В данном уроке мы узнаем, как добавить новую страничку на okis.ru, как делать ссылки в статье, помещать фотографии, менять оформление текста и многое другое, связанное с работой с содержимым страницы.
Для начала давайте создадим тестовую страничку.
Зайдите в раздел > Страницы сайта и нажмите на кнопку + Добавить страницу
Заполните поля «Заголовок страницы», «Название», «Ключевые слова», «Описание страницы» и «Заголовок», как мы это делали в уроке по наполнению сайта, сделанного на okis.ru.
Лично я поставил везде фразу «Тест страница», а для адреса страницы дал название test.
Теперь обратите внимание на кнопки, которые находятся под заголовком «Содержимое страницы» – вот их мы и будем подробно рассматривать в этом уроке.
Но, перед тем как продолжить, добавьте немного текста в содержимое страницы для дальнейшей работы и сохраните страничку. Текст можно взять с главной страницы сайта coctail60.okis.ru, на примере которого мы проходили уроки по созданию сайта на ОКИСЕ, или любой другой.
Предлагаю разобраться с основными кнопками в панели редактирования текста, которые чаще всего используются в работе. Все кнопки мы рассматривать не будем, т.к. их достаточно много. Если Вам интересно изучить всю панель, то Вы можете навести курсор на любую кнопку, и в этом месте появится подсказка, которая показывает краткую информацию о ней. В общем, экспериментируйте! 😉
Пойдём по порядку…
– при нажатии этой кнопки страница будет сохранена.
– при нажатии этой кнопки содержимое страницы будет стёрто.
Идём далее…
Прежде чем использовать нижеперечисленные кнопки, нужно сначала выделить текст и нажать на любую из них.
Выделение
– выделяет текст полужирным шрифтом.
– выделяет текст курсивом.
– подчёркивает текст.
– зачёркивает текст.
Выравнивание текста
– данные кнопки выравнивают текст слева, по центру, справа и равномерно по ширине.
Форматирование текста
Здесь Вы можете выбрать заголовки разных уровней (h1,h2,h3,h4,h5,h6), а также различные форматы текста.
Внимание: Не рекомендуется использовать «Заголовок 1 (h1)», т.к. он уже есть в шапке сайта, а повторное использования этого заголовка плохо сказывается на продвижении сайта в поисковых системах.
Задаёт шрифт текста
Задаёт размер шрифта. Эту кнопку мы использовали в уроке по наполнению сайта, сделанного на okis.ru.
Списки
– с помощью этой кнопки можно делать маркированные списки.
Пример:
- Строка 1
- Строка 2
- Строка 3
– с помощью этой кнопки можно делать пронумерованные списки.
Пример:
- Строка 1
- Строка 2
- Строка 3
Как сделать ссылку на другую страничку
Очень просто! Необходимо выделить текст, который Вы хотите сделать ссылкой и нажать на значок 
, после чего перед Вами появится всплывающее окно, где в поле «Адрес ссылки» нужно указать ссылку.
Выделите текст и нажмите значок «Вставить/редактировать ссылку»
В поле «Адрес ссылки» укажите ссылку и нажмите «Вставить»
Мы уже говорили о том, что index.html является ссылкой на главную страницу. Но я не упомянул, что вместо index.html можно просто поставить символ слеш (/). Я даже рекомендую Вам ставить ссылку на главную страницу не index.html, а именно / – так будет правильнее и проще.
Если Вы хотите убрать ссылку, то Вам нужно выделить текст, который Вы сделали ссылкой и нажать на значок 
.
Как помещать фотографии в тест
Прежде чем помесить фотографию в текст её нужно загрузить.
Давайте сделаем небольшое задание: загрузим фотографию на сайт, после чего, вставим её слева от текста.
Перед выполнением задания скачайте фото и разархивируй его, если у Вас нет своего фото.
Внимание: размер фотографии не должен быть большим (желательно не более 300 Кб.), иначе страница сайта может очень долго грузиться. Если Вы не знаете, как уменьшить размер фотографии и не умеете работать с программой Photoshop , то рекомендую Вам изучить курс по web-дизайну для начинающих Money Master 2, с помощью которого Вы станете дизайнером средней руки буквально за несколько вечеров!
Продолжим…
Чтобы загрузить фотографию нужно зайти в пункт «Загрузка фото»
Затем нажмите «Обзор», выберите фотографию на своём компьютере и загрузите её на сервер.
После загрузки фото Вы увидите ссылку, которую мы будем использовать для вставки фото в статью.
Теперь зайдите в редактор нашей тест-странички и кликните левой кнопкой мыши вначале текста (в это место мы вставим фото слева), после чего нажмите на кнопку 
После проделанных действий перед Вами появится всплывающее окно с открытой вкладкой «Общие», где:
- В поле «Адрес изображения» нужно указать ссылку на изображение, которое было загружено;
- В поле «Описание изображения» нужно указать замещающий текст, который будет показываться при отсутствии изображения;
- В поле «Название» нужно указать текст, который будет показываться при наведении на картинку курсора мишки.
Перейдите на вкладку «Внешний вид» и поставьте выравнивание «Влево», после чего нажмите «Вставить».
Как видите, фотография разместилась слева. Таким же образом фото можно размещать справа, по центру, по основанию, по верху текста и по низу текста.
Пожалуй, я на этом остановлюсь. Дальше Вы уже сами можете изучить все оставшиеся кнопки.
Желаю Вам успехов в учёбе!
