Получите свидетельство
Вход
Конспект урока «Верстка меню web-сайта»
Составила: преподаватель спец. дисциплин Агупова Н.С.
Специальность: 09.02.02 Компьютерные сети
ПМ: ПМ.02 Организация сетевого администрирования
МДК: МДК 05.03 Web-программирование
Курс: IV
Тема занятия: Верстка меню web-сайта
Цели урока: Создание условий для формирования представлений о верстке меню сайта
Образовательные:
Способствовать формированию знаний о типах и классификации меню сайта;
Организовать самостоятельную деятельность обучающихся при выполнении заданий направленных на создание меню сайта;
Способность выработке умений анализировать целесообразность применения элементов html и css для решения конкретной задачи;
Развивающие:
Способствовать развитию логического мышления, навыков создания различных типов меню при создании сайтов;
Совершенствовать умения применять различные элементы html и css;
Развивать навыки коллективной работы;
Воспитательные:
Формирование ответственного отношения к учению, готовности и способности обучающихся к саморазвитию и самообразованию на основе мотивации к обучению и познанию;
Формирование коммуникативной компетентности в общении и сотрудничестве со сверстниками в процессе учебной деятельности;
Тип занятия: урок изучения нового материала
Средства обучения: мультимедийные средства обучения, компьютерные презентации, информационные ресурсы, таблицы для систематизации информации, дидактический материал
Формы организации работы с обучающимися: фронтальная, работа в парах
План урока
| № | Этап урока | Время |
| | Организационный момент | 1 мин |
| | Актуализация опорных знаний | 5 мин |
| | Постановка целей и задач урока, мотивация | 4 мин |
| | Изучение нового материала | 15 мин |
| | Закрепление нового материала | 10 мин |
| | Проверка усвоения пройденного | 5 мин |
| | Итог урока | 1 мин |
| | Рефлексия учебной деятельности на уроке | 3 мин |
| | Домашнее задание | 1 мин |
Ход урока
Организационный момент – 1 мин
Приветствие, проверка присутствующих студентов и их готовность к занятию. Объяснение о правилах использования листа рефлексии (см. Приложение А)
Актуализация опорных знаний – 5 мин
Интерактивное задание «Найди пару» (см. Приложение Б)
Постановка целей и задач урока, мотивация – 4 мин
Изучить типы меню
Изучить свойства css-стилей, используемых для создания меню
Научиться создавать меню
Изучение нового материала – 15 мин
Рассмотрим типы меню. Классификация меню основывается на двух параметрах:
Первый из них – ориентация меню на странице. В классических примерах сайтов в качестве горизонтального меню обычно используют статические страницы, освещающие основное содержание сайта. Зачастую список главного меню выглядит так: Главная, О сайте, Контакты, Карта сайта.
Вертикальное меню в классическом использовании - это рубрикатор основного содержания сайта. Он может быть в виде многоуровневого каталога или простого перечня содержимого сайта.
Второй параметр – место расположения. Верхнее и нижнее меню сайта обычно ориентированы горизонтально. Отличаются они зачастую количеством основных пунктов. В верхнем меню используется краткая схема навигации по сайту, в нижнем же более развернутая, отражающая скрытые в верхнем меню страницы. Кроме того, верхнее меню может отличаться от нижнего дизайном элементов. Чаще всего для верхнего меню используются различные кнопки, в нижнем же только текстовые ссылки.
Боковое меню сайта обычно ориентировано вертикально и может либо дублировать горизонтальное меню, либо заменять его (в случае если горизонтальное меню вообще не используется), либо содержать другую, более расширенную навигацию. Как говорилось выше, зачастую в боковом меню используется расширенный рубрикатор основного содержания сайта. В отличие от верхнего и нижнего боковое меню может быть различным для разных страниц сайта - по тематике, разделу, направлению и т.д. Пример - боковое меню на данном сайте для рубрик"Портфолио" и "Блог". Обратите внимание, что содержание бокового вертикального меню для этих рубрик разное. Это сделано для удобства пользования навигацией.
В данном случае прослеживается связь между горизонтальным и вертикальным меню, т.к. краткая информация в горизонтальном меню разворачивается в подробный рубрикатор в вертикальном.
Если веб-сайт не ограничивается одной веб-страницей, то стоит подумать о добавлении панели навигации (меню). Меню - раздел веб-сайта, предназначенный помогать посетителю перемещаться по сайту. Любое меню представляет собой список ссылок, ведущих на внутренние страницы сайта. Самым простым способом добавить панель навигации на сайт является создание меню с помощью CSS и HTML.
Вертикальное меню
Первым шагом создания вертикального меню будет создание маркированного списка. Также нам нужно будет иметь возможность идентифицировать список, поэтому мы добавим к нему атрибут id с идентификатором "navbar". Каждый элемент
- Главная
- Новости
- Контакты
- О нас
Наша следующая задача заключается в сбросе стилей списка, установленных по умолчанию. Нам нужно убрать внешние и внутренние отступы у самого списка и маркеры у пунктов списка. Затем зададим нужную ширину:
#navbar {
margin: 0;
padding: 0;
list-style-type: none;
width: 100px;
}
Теперь можно стилизовать сами ссылки. Можно добавить к ним фоновый цвет, изменить параметры текста: цвет, размер и насыщенность шрифта, добавить небольшие отступы. Дополнительно можно добавить рамки к пунктам списка.
Однако в данном случае мы только уберем подчеркивание и переопределим отображение элемента со строчного на блочный.
Самой важной частью наших изменений является переопределение строчных элементов на блочные. Теперь наши ссылки занимают все доступное пространство пунктов списка, то есть для перехода по ссылке нам больше не нужно наводить курсор точно на текст.
#navbar a {
text-decoration: none;
display: block;
}
Объединив весь код, описанный выше, в один пример, мы можем увидеть результат:
Название документа
style
#navbar {
margin: 0;
padding: 0;
list-style-type: none;
width: 100px;
}
#navbar a {
text-decoration: none;
display: block;
}
- Главная
- Новости
- Контакты
- О нас
Конспект урока «Верстка меню web-сайта» (2.48 MB)
0
383
19
Нравится
0
