Пошаговое руководство для новичков по созданию,
раскрутке и монетизации собственного сайта.
WebPageMaker, Wordpress, Joomla - инструкции для
новичков по установке CMS и шаблонов к ним.
Добро пожаловать в проект "Сайт с нуля" !
Прежде всего данный проект предназначен для тех, кто пытается создать сайт самостоятельно, то есть для новичков. Соответственно, вся информация изложена доступно, все этапы построения сайта сопровождаются скриншотами, что позволит начинающим вебмастерам быстро и просто освоиться в этом нелегком вопросе.
Здесь вы можете скачать русские версии WebPageMaker, WordPress, Joomla, Adobe Muse, а также инструкции по установке WordPress и Joomla на хостинг и мануалы по установке тем (шаблонов) для этих CMS.
Всем желаю удачи и смелых воплощений идей на вашем сайте !
2010 - 2016 © Сайт с нуля: пошаговое руководство для новичков по созданию, раскрутке и монетизации собственного сайта. WebPageMaker, WordPress, Joomla - русские версии.
Автор и администратор данного проекта - SvetLana_TSV. Копирование материалов сайта разрешено только при наличии активной ссылки на данный проект.
Проект для новичков
Хочешь быть на шаг впереди и первее
остальных получать новые материалы
сайта? Тогда не забудь оставить свои
координаты: имя и электронный адрес!
Полезные материалы:
Удобный кроппер для сайта
Приветствую всех посетителей сайта! Отныне на сайте появился новый инструмент - кроппер. Теперь помимо онлайн-определителя html-кода любого цвета, расположенного здесь, можно еще прямо на сайте обрезать изображения.
В переводе с английского "crop" - обрезка, кадрирование, поэтому основная задача кроппера - вырезать любую область на изображении и сохранить в нужном формате у себя на компьютере.
Для чего может понадобится обрезка изображений? Для разных целей: для создания аватара, для иконок, для превьюшек галереи или слайдера, для обрезания ненужной области на фотографии и т.д. Вот тут-то кроппер и приходит на помощь - в считанные секунды он позволяет загрузить фото или картинку с компьютера и выбрав нужную область, остальное обрезать.
Для тех, кто хотел бы на своем сайте разместить такой же кроппер для удобства посетителей, ниже я расскажу как это сделать. На самом деле, установить такой инструмент на любой сайт довольно просто, даже новички разберутся. Устанавливается он, как большинство стандартных скриптов, и мы обязательно чуть позже рассмотрим пошаговый алгоритм данного процесса.
А пока я приведу скриншоты и краткую инструкцию по пользованию кроппером. Для того, чтобы обрезать любое изображение, нужно с помощью кнопки "Выбрать файл" выбрать нужное фото или картинку на своем компьютере, после чего она разместится в окне кроппера.
По центру изображения будет серый полупрозрачный квадрат, который является областью выбора любого фрагмента. Все, что останется за границами серого квадрата, в результате будет обрезано.
Не забудь заглянуть в свою почту и подтвердить подписку!
Опробовать инструмент в действии можно на демо-странице, ссылка на нее внизу материала. А сейчас давайте рассмотрим, как установить на свой сайт такой же кроппер. Итак, вам потребуется выполнить всего несколько простых шагов:
ШАГ 1. Скачать и распаковать архив с исходниками. Внутри будут два небольших файла js и файл стилей.
ШАГ 2. Создать на хостинге в корневой директории папку cropper, куда загрузить все файлы из архива.
ШАГ 3. Подключить скрипты, стили и библиотеку JQuery к странице, на которой будет установлен кроппер. Для этого между тегами <head> и </head> следует прописать такие строки:
<link rel="stylesheet" type="text/css" href="cropper/iEdit.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js"
<script type="text/javascript" src="cropper/iEdit.js"></script>
<script type="text/javascript" src="cropper/script.js"></script>
<style type="text/css">
#result{
display: block;
position: relative;
width: 30%;
margin: auto;
margin-top: 100px;
}
</style>
ШАГ 4. Теперь в код страницы между тегами <body> и </body> добавьте пару строк для инициализации кроппера:
<input id="file" type="file" >
<img id="result">
ШАГ 5. Загружаете страницу на хостинг и проверяете работу скрипта.
После всех шагов на странице вашего сайта появится кнопка "Выбрать файл", а вот оформление самой страницы вы осуществляете самостоятельно. Как вариант, кроппер можно установить на чистой странице сайта, добавив лишь минимум пояснительного контента либо установить на одну из существующих страниц сайта, оформленных в общем стиле.
Всем желаю удачных проектов! До новых встреч!
С ув. Светлана (SvetLana_TSV).
P.S. Подписчики в этом выпуске рассылки получат адаптивный вариант кроппера, который будет подстраиваться под экраны мобильных гаджетов пользователей сайта. Там процесс установки немного отличается от вышеописанного, поэтому инструкция будет вложена в архив.
Как видите, быть подписчиком "Сайт с нуля" выгодно - кроме новых материалов вы получаете бесплатно в каждом выпуске рассылки отличный бонус в виде платного контента. Не упускайте такую возможность!
В правом нижнем углу серого квадрата будет маркер, потянув за который внутрь квадрата, можно пропорционально уменьшить выбранную область до нужного размера. Также серый квадрат можно перемещать по картинке, просто кликнув по нему и зажав левую кнопку мышки. После окончательного выбора фрагмента картинки, который будет вырезан, нужно нажать зеленую кнопку "Готово" под изображением.
Откроется диалоговое окно "Сохранить как", в котором вы выбираете место на своем компьютере для сохранения полученного результата.
Вот такой фрагмент фото за несколько секунд был вырезан с помощью кроппера.
