Урок№2. Урок по наполнению сайта, сделанного на okis.ru - Все о мотоблоках

Урок№2. Урок по наполнению сайта, сделанного на okis.ru

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

После создания сайта на okis.ru, на вашу почту должно прийти письмо с адресом панели управления Вашего сайта и паролем к нему.

Заходим в панель управления.

В первую очередь посмотрим, как выглядит сайт, который мы только что сделали. Для этого кликаем по ссылке адреса сайта в левом верхнем углу.

Кликаем по ссылке адреса сайта в левом верхнем углу, чтобы посмотреть, как выглядит сайт на okis.ru

На данный момент наш сайт выглядит так.

Поскольку мы будем делать сайт о классических коктейлях, то предлагаю поменять надпись «Добро пожаловать на наш сайт!» в шапке сайта на «60 классических коктейлей». Для этого сначала заходим в «Параметры сайта».

Урок по наполнению сайта, сделанного на okis.ru: Заходим в «Параметры сайта»

Поменяйте Слоган на «60 классических коктейлей» и Ваши контакты на «Cocktail60». В «Копирайт» можно вписать следующее предложение: «2012 (С) Сайт о классических коктейлях cocktail60.okis.ru». Приставку к title можно оставить без изменений. Количество новостей, выводимых справа, можно ввести любое. О поле «Метатэги» мы поговорим позже. После нажмите кнопку «Изменить».

Урок по наполнению сайта, сделанного на okis.ru: меняем параметры сайта

Теперь наш сайт выглядит вот так:

Урок по наполнению сайта, сделанного на okis.ru: теперь на сайт выглядит так
Увеличить изображение (+)

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

Для начала удалим все ненужные нам страницы. Для этого заходим в раздел «Страницы сайта» в левой панели управления сайтом.

Урок по наполнению сайта, сделанного на okis.ru: заходим в раздел Страницы сайта

Т.к. у нас сайт о классических коктейлях, то автоматически сгенерированные страницы «О Нас», «Контакты», «Цены» и «Наши услуги» нам не нужны, поэтому мы удалим все страницы кроме главной. Для удаления страницы нужно кликнуть по перечёркнутому кружочку справа от её названия.

Урок по наполнению сайта, сделанного на okis.ru: Удаляем все страницы сайта кроме главной

Теперь давайте отредактируем главную страницу index.html. Для этого нужно нажать левой кнопкой мышки по иконке с карандашиком.

Урок по наполнению сайта, сделанного на okis.ru: чтобы отредактировать страницу нужно кликнуть по иконке с карандашиком

Перед Вами появится визуальный редактор страницы Вашего сайта. Название index мы не будем трогать, иначе главная страница сайта не будет отображаться.

Запомните одно важное правило: главная страница сайта всегда имеет название index!

Всю остальную информацию мы сейчас поменяем. Пойдем по порядку.

Выделите текст, отмеченный красным цветом, и скопируйте его (CTRL+C): «Классические коктейли. Рецепты приготовления 60 классических коктейлей». Затем вставьте этот текст (CTRL+V) в пункт «Заголовок страницы». Данное название (тэг title) будет отображаться в заголовке в поисковых системах, таких как Яндекс, Гугл, Рамблер, а также в самой верхней части браузера.

В пункт «Ключевые слова» вставьте следующий текст: «классические коктейли, 60 классических коктейлей, рецепты приготовления 60 классических коктейлей». По этим ключевым фразам Ваш сайт будут искать в поисковых системах.

В пункт «Описание страницы» вставьте текст: «На нашем сайте представлены методы приготовления и рецепты 60 классических коктейлей». Данный тест пишется для поисковых систем, который возможно будет отображаться в описании сайта под «Заголовком страницы», в зависимости от запроса в поисковике.

Как отображается в Яндексе запрос (ключевая фраза), заголовок страницы и описание страницы

В «Заголовоке» вместо фразы «Ваш сайт создан!» вставьте текст «Классические коктейли». «Заголовок» будет отображаться на странице большими буквами (тэг h1) над всем текстом.

На фото изображено, как нужно поменять заголовок страницы (title), ключевые слова (keywords), описание страницы (description) и заголовок (h1):

Урок по наполнению сайта, сделанного на okis.ru: Заполните поля Заголовок страницы, Ключевые слова, Описание страницы и Заголовок

Теперь отредактируем текст на главной странице. Для начала выделим весь тест (Ctrl+A) в «Содержимом страницы» и удалим его (Del). Пока мы просто пометим, что это главная страница. Напишите в визуальном редакторе (Содержимое страницы), что-то вроде этого: «Добро пожаловать на главную страницу сайта!».

Затем выровняйте текст по центру, выделив фразу «Добро пожаловать на главную страницу сайта!», и, нажав по иконке Выравнивает текст по центру. Также, я предлагаю для нашего приветствия задать размер шрифта 5 (18 pt).  После чего нажмите «Сохранить изменения» в самом низу.

Урок по наполнению сайта, сделанного на okis.ru: Выровняйте текст по центру, задайте размер шрифта 5 (18 pt) и нажмите «Сохранить изменения» в самом низу

Теперь давайте зайдем на главную страницу сайта и посмотрим что изменилось.

У нас поменялся общий «Заголовок страницы» (title), который Вы можете увидеть в левом верхнем углу Вашего браузера. Также поменялся «Заголовок» (h1) и текст после заголовка (Содержимое страницы).

Заголовок h1, Заголовок страницы title, Содержимое страницы

«Ключевые слова» и «Описание страницы» можно посмотреть в коде страницы. Для того чтобы посмотреть код страницы нужно кликнуть правой кнопкой в любом месте, где нет ссылок и выбрать Исходный код (либо Просмотр HTML-кода — в зависимости от того, каким браузером Вы пользуетесь).

Как посмотреть Исходный код страницы сайта

На 7-8 строчке Вы увидите следующий код:
<meta name=’description’ content=’На нашем сайте представлены методы приготовления и рецепты 60 классических коктейлей’ />Описание страницы
<meta name=’keywords’ content=’классические коктейли, 60 классических коктейлей, рецепты приготовления 60 классических коктейлей’ />Ключевые слова
Это и есть «Ключевые слова» и «Описание страницы», которые прописываются специально для поисковых систем.

Идем далее…

Ненужные нам страницы мы удалили, но остались пункты меню (слева), которые ведут на несуществующие страницы. Давайте удалим лишние пункты меню. Для этого заходим в Управление меню.

Урок по наполнению сайта, сделанного на okis.ru: Заходим в Управление меню

Удалим все пункты меню кроме главной, точно также, как мы удаляли страницы сайта. Далее нужно отредактировать пункт меню «Главная» — для этого кликаем по иконке с карандашиком. В Текст ссылки напишем «Коктейли». «УРЛ ссылки» и «Всплывающую подсказку» оставим без изменений. Нажимаем «Изменить».

Теперь добавим подпункты меню. Для этого кликаем по плюсику (+) (Подменю)

Урок по наполнению сайта, сделанного на okis.ru: Добавляем подменю

Указываем следующие данные:
Текст ссылки: На основе водки
УРЛ ссылки: vodka.html
Всплывающая подсказка: Классические коктейли на основе водки
Добавить в раздел: Коктейли

-> Жмем «Добавить»

Урок по наполнению сайта, сделанного на okis.ru: Указываем следующие данные

Теперь переходим на главную страницу нашего сайта. Как мы видим, слева появился новый пункт меню, который называется «На основе водки». Наведите курсор мышки на него и Вы увидите всплывающую подсказку «Классические коктейли на основе водки», а также адрес http://ИМЯ_ВАШЕГО_САЙТА/vodka.html пока что не существующей страницы, на которую ведет данная ссылка.

Добавление подпункта меню

Давайте создадим эту страницу. Не выходя из раздела меню, нажмите на кнопку «+ Добавить страницу».

Урок по наполнению сайта, сделанного на okis.ru: нажмите на кнопку «+ Добавить страницу»

Указываем следующие данные:
Название: vodka
Заголовок страницы: Классические коктейли на основе водки
Ключевые слова: классические коктейли на основе водки, коктейли на основе водки
Описание страницы: Классические коктейли на основе водки. Рецепты приготовления.
Заголовок: Классические коктейли на основе водки
В Содержимое страницы напишем: На этой странице будут представленны все классические коктейли на основе водки.

— > Жмем «Добавить страницу»

Урок по наполнению сайта, сделанного на okis.ru: Данные для страницы

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

Пункты меню и страницы мы научились создавать. Теперь давайте перейдем к самой интересной части мини-курса по созданию бесплатного сайта на Okis, а именно к изменению дизайна сайта на okis.ru. Но прежде чем мы приступим к урокам по изменению дизайна, Вам следует создать еще несколько подпунктов меню и страниц для них. На этот раз Вы можете попробовать сначала добавить страницу, а потом добавить страницу в подменю, выбрав раздел «Коктейли». Только не перепутайте пункт с подпунктом меню. Нужно создать именно ПОДпункты меню – это ссылки на ПОДразделы страницы «Коктейли» (главной страницы сайта). Создадите следующие подпункты меню и пустые страницы для них:

  • На основе водки (уже добавили)
  • На основе джина
  • На основе виски
  • На основе коньяка
  • На основе ликеров
  • На основе рома
  • На основе текилы
  • На основе шампанского
  • На основе вина
  • Безалкогольные

Несколько советов:

При добавлении новой страницы указывайте название ТОЛЬКО ЛАТИНСКИМИ БУКВАМИ, но без .html

Урок по наполнению сайта, сделанного на okis.ru: Добавление новой страницы

После создания страницы Вам предложат добавить страницу в меню или в подменю. Нам нужно все новые страницы добавить в подменю. Заметьте, что УРЛ ссылки состоит из названия страницы и расширения .html . Также следите за тем, чтобы текст ссылки был коротким, иначе он не будет помещаться в пункт меню.

Урок по наполнению сайта, сделанного на okis.ru: Добавление страницы в меню и подменю

Если у Вас нарушился порядок пунктов меню и Вы хотите переставить один пункт выше, а другой ниже, то Вы можете легко это сделать, кликнув по стреле вверх, тем самым переместив пункт меню на один уровень выше, либо по стрелке вниз, тем самым переместив пункт меню на один уровень ниже.

Урок по наполнению сайта, сделанного на okis.ru: Как перемещать пункты меню

Если Вы во всём разобрались и выполнили все задания, то можете переходить к следущим урокам:

Урок№3. Как поменять оформление меню на сайте, сделанного на okis.ru
Урок№4. Как поменять шапку сайта на okis.ru
Урок№5. Как поменять низ сайта на okis.ru
Урок№6. Как поменять фон сайта на okis.ru
Урок№7. Как поменять контур сайта на okis.ru
Урок№8. Всё, что нужно знать новичку об ОКИС.РУ (OKIS.RU)
Изменение дизайна на ОКИС.РУ (OKIS.RU). Общий список CSS-кодов

Дополнительные уроки по созданию и ведению сайта на OKIS:
Урок№9. Как организовать общение на сайте, сделанном на okis.ru
Урок№10. Как активировать сайт на okis.ru с помощью WebMoney
Урок №11. Учимся добавлять новую страничку на okis.ru и работать с содержимым страницы

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

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