Урок №11. Учимся добавлять новую страничку на okis.ru и работать с содержимым страницы - Все о мотоблоках

Урок №11. Учимся добавлять новую страничку на okis.ru и работать с содержимым страницы

В данном уроке мы узнаем, как добавить новую страничку на okis.ru, как делать ссылки в статье, помещать фотографии, менять оформление текста и многое другое, связанное с работой с содержимым страницы.


Для начала давайте создадим тестовую страничку.

Зайдите в раздел > Страницы сайта и нажмите на кнопку + Добавить страницу

Заполните поля  «Заголовок страницы», «Название», «Ключевые слова», «Описание страницы» и «Заголовок», как мы это делали в уроке по наполнению сайта, сделанного на okis.ru.

Лично я поставил везде фразу «Тест страница», а для адреса страницы дал название test.

Теперь обратите внимание на кнопки, которые находятся под заголовком «Содержимое страницы» – вот их мы и будем подробно рассматривать в этом уроке.

OKIS.RU: Кнопки для работы с текстом

Но, перед тем как продолжить, добавьте немного текста в содержимое страницы для дальнейшей работы и сохраните страничку. Текст можно взять с главной страницы сайта coctail60.okis.ru, на примере которого мы проходили уроки по созданию сайта на ОКИСЕ, или любой другой.

Предлагаю разобраться с основными кнопками в панели редактирования текста, которые чаще всего используются в работе. Все кнопки мы рассматривать не будем, т.к. их достаточно много. Если Вам интересно изучить всю панель, то Вы можете навести курсор на любую кнопку, и в этом месте появится подсказка, которая показывает краткую информацию о ней. В общем, экспериментируйте! 😉

OKIS.RU: Наведите курсор на любую кнопку, и Вы увидите подсказку

Пойдём по порядку…

Сохранить – при нажатии этой кнопки страница будет сохранена.

Новый документ – при нажатии этой кнопки содержимое страницы будет стёрто.

Идём далее…

Прежде чем использовать нижеперечисленные кнопки, нужно сначала выделить текст и нажать на любую из них.

Выделение

Полужирный (Ctrl+B) – выделяет текст полужирным шрифтом.

Курсив (Ctrl+I) – выделяет текст курсивом.

Подчёркнутый (Ctrl+U)подчёркивает текст.

Перечёркнутыйзачёркивает текст.

Выравнивание текста

Выровнять слева, по центру, вправо и равномерно по ширине – данные кнопки выравнивают текст слева, по центру, справа и равномерно по ширине.

Форматирование текста

Абзац
Здесь Вы можете выбрать заголовки разных уровней (h1,h2,h3,h4,h5,h6), а также различные форматы текста.

Внимание: Не рекомендуется использовать «Заголовок 1 (h1)», т.к. он уже есть в шапке сайта, а повторное использования этого заголовка плохо сказывается на продвижении сайта в поисковых системах.

Шрифт
Задаёт шрифт текста

Размер шрифта
Задаёт размер шрифта. Эту кнопку мы использовали в уроке по наполнению сайта, сделанного на okis.ru.

Списки

Маркированный список – с помощью этой кнопки можно делать маркированные списки.

Пример:

  • Строка 1
  • Строка 2
  • Строка 3

Нумерованный список – с помощью этой кнопки можно делать пронумерованные списки.

Пример:

  1. Строка 1
  2. Строка 2
  3. Строка 3

Как сделать ссылку на другую страничку

Очень просто! Необходимо выделить текст, который Вы хотите сделать ссылкой и нажать на значок Вставить/редактировать ссылку, после чего перед Вами появится всплывающее окно, где в поле «Адрес ссылки» нужно указать ссылку.

Выделите текст и нажмите значок «Вставить/редактировать ссылку»

Выделите текст и нажмите значок «Вставить/редактировать ссылку»

В поле «Адрес ссылки» укажите ссылку и нажмите «Вставить»

В поле «Адрес ссылки» укажите ссылку и нажмите «Вставить»

Мы уже говорили о том, что index.html является ссылкой на главную страницу. Но я не упомянул, что вместо index.html можно просто поставить символ слеш (/). Я даже рекомендую Вам ставить ссылку на главную страницу не index.html, а именно / – так будет правильнее и проще.

Ссылка на главную страницу сайта

Если Вы хотите убрать ссылку, то Вам нужно выделить текст, который Вы сделали ссылкой и нажать на значок Удалить ссылку.

Как помещать фотографии в тест

Прежде чем помесить фотографию в текст её нужно загрузить.

Давайте сделаем небольшое задание: загрузим фотографию на сайт, после чего, вставим её слева от текста.

Перед выполнением задания скачайте фото и разархивируй его, если у Вас нет своего фото.

Внимание: размер фотографии не должен быть большим (желательно не более 300 Кб.), иначе страница сайта может очень долго грузиться. Если Вы не знаете, как уменьшить размер фотографии и не умеете работать с программой Photoshop , то рекомендую Вам изучить курс по web-дизайну для начинающих Money Master 2, с помощью которого Вы станете дизайнером средней руки буквально за несколько вечеров!

Продолжим…

Чтобы загрузить фотографию нужно зайти в пункт «Загрузка фото»

Затем нажмите «Обзор», выберите фотографию на своём компьютере и загрузите её на сервер.

После загрузки фото Вы увидите ссылку, которую мы будем использовать для вставки фото в статью.

Теперь зайдите в редактор нашей тест-странички и кликните левой кнопкой мыши вначале текста (в это место мы вставим фото слева), после чего нажмите на кнопку Вставить/редактировать изображение

OKIS.RU: Учимся вставлять фото

После проделанных действий перед Вами появится всплывающее окно с открытой вкладкой «Общие», где:

  • В поле «Адрес изображения» нужно указать ссылку на изображение, которое было загружено;
  • В поле «Описание изображения» нужно указать замещающий текст, который будет показываться при отсутствии изображения;
  • В поле «Название» нужно указать текст, который будет показываться при наведении на картинку курсора мишки.

OKIS.RU: Адрес изображения, Описание изображения, Название

Перейдите на вкладку «Внешний вид» и поставьте выравнивание «Влево», после чего нажмите «Вставить».

OKIS.RU: Вставляем картинку слева

Как видите, фотография разместилась слева. Таким же образом фото можно размещать справа, по центру, по основанию, по верху текста и по низу текста.

Пожалуй, я на этом остановлюсь. Дальше Вы уже сами можете изучить все оставшиеся кнопки.

Желаю Вам успехов в учёбе!

Перейти в начало к урокам по созданию сайта на OKIS>>>

Ссылка на основную публикацию