Лабораторное занятие №15

Создание меню сайта

Раздел 1. Установка и настройка аппаратных и программных средств доступа в сеть

Интернет
Тема 1.7 Принципы функционирования, организация и структура веб-сайтов

Цель работы: научить студентов создавать меню сайта

1. Теоретические сведения:

Меню сайта представляет собой текст (реже картинку), к которой «привязана»

гиперссылка на определенное место на сайте. Обычно на сайте есть горизонтальное и
вертикальное меню.
Их вид и состав зависит от целей и задач конкретного сайта.
Мы же с Вами - создаем меню сайта: горизонтальное и вертикальное. В
горизонтальном меню будут ссылки на главные разделы, а в вертикальном - перечислены
все статьи.
Создаем меню сайта - горизонтальное
Определяемся какие разделы являются основными. Их должно быть 4-5. У нас
будут следующие четыре разделе:
 Главная - ссылка на первую страницу сайта, то есть на«index.htm»;
 Все статьи - в ней перечислены все статьи;
 Программы скачать бесплатно - ссылка для скачивания бесплатных программ;
 Видео уроки бесплатно скачать  - ссылка на сайт с видео уроками по созданию и
размещению сайтов в Интернете.
В ячейку, где будет расположено меню, набираю название ссылок.

Горизонтальное меню - название

Центрируем по вертикали и горизонтали. Правая кнопка мыши - Свойства ячейки
- Выровнять по горизонтали и вертикали - значения по центру и по середине.

Горизонтальное меню - центрирование

Устанавливаем свойства ячейки: цвет фона - белый, цвет границы
- «Hex={33,66,СС}», ширина границы - 2px. Как это делать я описывал в двух
предыдущих статьях: правая кнопка мыши - свойства ячейки - задаем фон и через Стиль -
Формат - Границы - указываем параметры границы.

Горизонтальное меню - границы

Между названиями разделов в меню устанавливаем знак «l». Для этого на
вкладке «Вставка» выбираем Символ двойным нажатием.
 Устанавливаем символы в меню
Пробелами между текстом и символом увеличиваем расстояние.

Оформляем меню сайта

Задаем каждой ссылке путь. Для этого выделяем текст (например,«Главная»),
нажимаем правой кнопкой мыши и выбираем«Гиперсслыка». В открывшемся окне
находим название страницы. Для «Главная» - это «index.htm». Нажимаем ОК.

Присваиваем ссылки
Выделяем весь текст и задаем новые размер и шрифт - Verdana, 11pt.

Размер и шрифт горизонтального меню

и получаем

Меню сайта - готово

Измените цвет фона, подберите тот, что Вам понравиться. Вместо фона можно
использовать картинку (например, картинку в виде кнопки).
Создаем меню сайта - вертикальное
 Обычно, горизонтальное меню содержит общие разделы, как разделы в учебнике. А
в вертикальном – поясняющие статьи раздела, как главы разделов учебника.
На нашем сайте в вертикальном меню будут размещены ссылки на статьи только с
одного главного раздела - «Все статьи», они для наглядности и упрощения поиска будут
их дублировать.
Название статей я подбирал по смысловым вопросам - то есть по тем вопросам,
которые возникают при создании сайта.
Редактируем ячейку под вертикальное меню
Наши действия будут аналогичны тем, что выполнялись при подготовке
горизонтального меню.
Зададим отступы. «Формат» - «Абзац»:
 Выравнивание - по ширине;
 Отступы слева и справа - 40;
 Интервал после - 18;
 Интервал между строк - полуторный.

Вертикальное меню - отступы

Изменим свойства ячейки. Правая кнопка мыши - Свойства ячейки:

 Фон - белый;
 Ширина границы - 2 px;
 Цвет границы - «RGB (51, 102, 204)».
 Границы вертикального меню
Набираем вертикальное меню и вставляем гиперссылки. Пока у Вас не созданы все
страницы сайта, устанавливайте гиперссылку на главную страницу «index.htm» - потом
поменяете.
Гиперссылки в вертикальном меню сайта присваиваются аналогично гиперссылкам
в горизонтальном. В итоге у Вас получится такое же вертикальное меню, как и на этом
сайте.
Размер и шрифт текста вертикального меню - Verdana, 10 pt.

2. Порядок выполнения практической работы

1. Повторение теоретического материала.
2. Получение задания у преподавателя.
3. Выполнение задания по плану.
4. Оформление отчета о работе (вывод)
5. Подготовить ответы на контрольные вопросы.
6. Защита практической работы.

3. Алгоритм выполнения задания

1. Осмыслить полученное задание;
2. Выполнить задание
3. Сделать вывод, подготовиться к защите практической части.

4. Задание
1. Изучить теоретический материал
2. Выполнить вариант задания
3. Записать данные выполнения в отчет

Задание на практическую работу:

1. Создать меню сайта
Порядок выполнения:
1. Выбрать вариант задания
2. Выполнить задание
3. Создать отчет о выполнении лабораторной работы 
Варианты
1. Сайт ВТИТБиД
 2. Сайт Домашняя страница
3. Сайт любителей кошек
4. Сайт клуба собаководов
5. Сайт садовода-любителя
6. Сайт охотников
7. Сайт рыболовов
8. Сайт любителей футбола
9. Сайт города Волгодонска
10. Сайт Моя деревня
11. Сайт Планета кино
12. Сайт Моя семья
13. Сайт Кулинария
14. Сайт Познавательные странички
15. Сайт О звездах
16. Сайт Здоровье
17. Сайт Мода
18. Сайт Медицина
19. Сайт Автомобили
20. Сайт Спорт

5. Вопросы:
1. Какие меню бывают?
2. Что обычно помещают в меню?
3. Как создается вертикальное меню?
4. Как создается горизонтальное меню?
5. Какие разделы в меню основные?

6. Сделать вывод по практической работе.

Меню сайта — это сгруппированный набор ссылок с названиями разделов,
облегчающий переход на другие страницы.

Они называются пунктами меню и могут обозначаться текстом или

графическими значками — иконками.

Меню должно быть у каждого сайта. Оно дает возможность попасть из

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

Главная задача разработчиков — оптимально проработать структуру и

сделать удобную навигацию. Поэтому часто используют термин
навигационное меню сайта в контексте его основного предназначения.

Стили отвечают за внешний вид, то есть за то, как видим элементы мы с

вами. Варианты оформления меню сайта:

 с динамическими эффектами при наведении;

  с иконками, картинками;
 стиль «метро»;
 аккордеон.

На итоговые результаты выдачи в поиске могут влиять следующие критерии:

 Удачная навигация и грамотная внутренняя перелинковка являются
факторами внутренней оптимизации. Это удобство для людей и
положительная оценка от поисковиков. Понятная перелинковка
поможет пользователю сориентироваться, увидеть ссылки на
интересные разделы. Удобным считается такой вариант, когда
добраться до нужного материала можно в 3 клика.
 Если содержимое заинтересовало, человек проведет на веб-сайте
дольше времени. Поисковые системы учтут это, как положительный
результат для поведенческих факторов.
 Есть еще один важный момент. В web-разработке при проектировании
сайтов правильным считается разрабатывать структуру на основе
семантического ядра. То есть, сначала нужно собрать и
структурировать информацию обо всех тематических поисковых
запросах. Самые высокочастотные лягут в основу заголовков
разделов. Соответственно, названия пунктов меню лучше не
изобретать с креативным копирайтером, а согласовывать с seo-
специалистом. Он подскажет, насколько часто люди ищут ту или иную
информацию, это поможет сформировать интуитивно понятные
названия.
 Если ссылки оформлены в виде графических элементов, нужно
прописывать alt и title к ссылкам. Тогда роботы при индексации
смогут учесть эти пункты.