Пример создания страницы по шагам

В странице "Что это такое?" приведен пример возможностей данной системы. Давайте посмотрим как создавалась эта страница. В данном описании опущены некоторые детали, которые описаны в документации. Например, если написано "вставляем изображение", то все детали такого действия подробно описаны в документации, а в этом описании представлена только схема действий, чтобы понять суть происходящего.

1. После вызова страницы demo.osnovnoe.info/admin и ввода логина и пароля открывается список имеющихся страниц сайта.

. Обратите внимание на ряд кнопок вверху, точнее на вторую слева кнопку "создать страницу". Думаю функция этой кнопки понятна. Нажимаем левой клавишей мыши на пиктограмму  - "редактировать" в строке с названием страницы "Домашняя".

2. Откроется страница редактора в которой мы и будем производить всю необходимую работу. Редактор имеет несколько вкладок. Первая вкладка позволяет задать параметры страницы:

. Параметры страницы важны как для поисковых систем, так и для внутренней работы системы. Название страницы попадет в title страницы, т.е. заголовок страницы, показываемый браузером в шапке. Это поле читают поисковики, поэтому для поисковой (SEO) оптимизации это поле должно содержать с себе ключевые фразы вашего текста по которым хотелось бы, чтобы поиковики находили данную страницу сайта. Заголовок страницы ( в шаблоне страницы обозначен как {H1}) как правило располагается наверху страницы итакже считается поисковиками важной информацией, отражающей какую информацию страница содержит. В заголовке также важно чтобы присутствовали ключевые слова. Поле "ключевые слова" читаются исключительно поисковиками. Сейчас SEO-оптимизаторы спорят о том, читают ли поисковики эти keywords, но все без исключения их указывают, так как они все же играют важную роль для выдачи страниц в поисковых сервисах. "Ссылка в меню" должна содержать наименование страницы в меню сайта. Следующее поле "Папка автовывода изображений". Поскольку система "заточена" на работу с изображениями, то имеется возможность автоматически вставлять их из определенной папки с изображениями. Т.е. не надо вставлять изображения "руками" в страницу, а просто указать откуда их вставить и они окажутся на странице, располагаясь последовательно друг за другом слева направо и сверху вниз. Изображения в папке могут иметь разный размер, поэтому, чтобы при автовыводе галерея изображений выглядела аккуратно, следует указать к какой высоте приводить изображения при автовыводе. Если шаблон сайта предусматривает, что каждая страница сайта может для вывода своего содержания использовать индивидуальный подшаблон, то в поле "Подшаблон для вывода контента" можно указать какой подшаблон использовать. В данном случае указано подшаблон не применять.

3. Вторая вкладка редактора содержит окно с основным текстом страницы и здесь ведется ее наполнение и  изменение. По сути это обыкновенный текстовый редактор, дополненный возможностями HTML.

. Текст просто набран, а изображения вставляются когда щелкаешь правой клавишей мыши на том месте, куда планируется вставить изображение. В появившемся меню выбираем "вставить/изменить изображение". После этого появляется окно вставки/изменения изображения. Чтобы не набирать адрес изображения руками, нажимаем на пиктограмму файлового менеджера и выбираем нужный файл, ориентируясь на комментарии, которые смогли заблаговременно ввести при добавлении изображений:

. Файловый менеджер позмоляет не только видеть комментарии, но и предварительно просмотреть изображение. Для этого надо нажать на пиктограмму  напротив интересующего файла. Как видите, когда все под рукой, то сделать страницу совсем не трудно! Вопрос скорее в том, а откуда появились вставляемые изображения? 

4. Подготовку изображений для страницы давате рассмотрим на примере изображения туфель, которое имеет функцию интерактивности - когда мы нажимаем на подкрашенную область, то появляется всплывающее окно. В примере на главной странице появляется следующее интерактивное изображение. Однако вместо изображения может быть текст или комбинация с изображением, так как всплывающая подсказка является элементом web-страницы. Чтобы изображения туфель появилось на сайте были сделаны фотографии с помощь смартфона (можно использовать и планшет с камерой). Для этого была вызвана страница demo.osnovnoe.info/foto.php на смартфоне под управлением Андроид 4.2. Обязательно  должен быть установлен браузер Hrome. После вызова этой страницы в браузере запрашивается куда помещать снимки. Для снимков предварительно была создана папка "туфли"(см. кнопку Папки для фото"):

. Итак, для снимков была выбрана папка "туфли". Затем запрашивается с какой камеры смартфона делать изображение. Обычно фронтальная (со стороны экрана) камера имеет номер 1, а вот основная -2. Наводим камеру ориентируясь на изображение на экране смартфона. Достаточно затем нажать пальцем на изображение на экране, чтобы сделать снимок. Перед отправкой снимка надо указать в каком качестве сохранить снимок и продиктовать комментарий к снимку, чтобы соответствующий текст появился в файловом менеджере системы. Насчет качества... Если ваш смартфон подключен к интернету через WI-FI можно смело выбирать полный PNG, а вот при соединении через мобильный интернет отправка снимка на сайт может занять много времени, поэтому выбирая качество типа JPG50% можно значительно сократить объем файла, а значит и время его передачи. После серии снимков в папке для изображений "туфли" появились файлы с расширением png -такой формат был выбран для сохранения снимков со смартфона. 

. Если в списке изображений нажать на пиктограмме  левой клавишей мыши, то можно просмотреть изображение так же как и в файловом менджере, а вот при нажатии правой клавишй мыши изображение передается в фоторедактор, где можем "подрихтовать" полученные снимки. Ниже показан фрагмент окна фоторедактора с открытым меню функций:

. Давайте вернемся к списку изображений в папке. Обратите внимание на кнопку "создать новый svg" под списком изображений. Именно так были созданы несколько svg-изображений, перечисленных списке (см. 2-е и последнее). При создании этих изображений в качестве "подложки" были использованы снимки со смартфона, а сверху нанесены линии и надписи. Кроме того, для некоторых областей было указано при щелчке на них вызывать всплывающую подсказку. Для поиска подсказки указана ключевая фраза, по которой система ищет подсказку и выводит ее. Внимательно рассмотрите снимок экрана и вы все поймете:

5. Осталось показать как в системе сделана всплывающая подсказка. Обратите внимание на кнопку "Всплывающие подсказки". Именно там они и создаются и редактируются. Ничего особенного там нет, так как всплывающие подсказки создаются точно в таком же редакторе как и для основного текста страницы.

Все! Все стадии создания страницы этого сайта были описаны. Подчеркну, что и это описание было создано точно также. Единственное отличие, что снимки экрана были сделаны нажатием на кнопку клавиатуры "PrintScreen". А затем снимки экрана, полученные таким образом, были вставлены  через пункт меню "вставить", вызванного по кнопке "новое фото из буфера обмена", расположенную в списке файлов папки для изображений. Вы можете увидеть где расположена эта кнопка, если пролистаете немного вверх до изображения списка файлов в папке. На разработку этой страницы было потрачено 4 часа. Попробуйте все это проделать классическим способом, используя фоторедакторы и традиционные CMS. Гарантирую спину в мыле :)