Практическое занятие №15

Наименование: Создание динамического меню навигации при помощи списков и правил CSS

1. Цель: Научиться применять элементы HTML (списки и гиперссылки), а также свойства CSS для формирования системы навигации на веб странице

2. Подготовка к занятию: по предложенной литературе повторить тему «Оформление HTML – документа средствами CSS» и ответить на следующие вопросы:

2.1 Каким способом можно создать меню на веб - странице?

2.2 Какие виды списков вам известны?

3. Литература:

3.1 Шомас Е.А. Конспект лекций по дисциплине «Веб - дизайн»

3.2 Клименко Р.А. Веб-мастеринг на 100%. – СПб.: Питер, 2013

3.3 Квинт И. HTML и CSS на 100%. – СПб.: Питер, 2008с

4. Перечень оборудования и программного обеспечения:

4.1 ПЭВМ, подключенные к сети Интернет

4.2 Браузеры

4.3 Текстовый редактор

5. Задание:

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

6. Порядок выполнения работы:

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

6.2 Выполнить задание практического занятия;

6.3 Дать ответы на контрольные вопросы;

7. Содержание отчета:

7.1 Наименование и цель работы

7.2 Код таблицы CSS

7.3 Ответы на контрольные вопросы

7.4 Вывод о проделанной работе

8. Контрольные вопросы:

8.1 Для каких целей используется панель навигации на веб – страницах?

8.2 Перечислите какие свойства вы использовали при создании свей панели навигации?

ПРИЛОЖЕНИЕ:

Меню – это неотъемлемая часть каждого сайта. Меню (или навигация) позволяет быстро перемещаться по основным разделам сайта, делая его похожим на оглавление в книгах. Особенно сходство заметно на картах сайта (разновидность навигации).

Меню может быть:

· Горизонтальным;

· Вертикальным;

· Многоуровневым (выплывающим или раскрывающимся)

Меню может быть очень разнообразным и сверстать его можно по-разному: таблицами, блоками, ссылками и т.д. Но в профессиональных кругах считается, что навигация должна быть на основе неупорядоченных списков – теги <ul> и <li>.

Простое горизонтальное меню:

HTML:

CSS:

.menu_nav {

Не нашли, что искали? Воспользуйтесь поиском: