ПРАКТИЧЕСКОЕ ЗАНЯТИЕ № 7

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

Тема: «Блочная верстка. Создание меню. Позиционирование»

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

Ход работы.

Задание 1. Создайте web-страницу по образцу, используя html-документ.

1. В файле style.css задайте стили для всего документа, используя селектор body. Задаем значения отступа от окна браузера сверху и снизу 0px, а слева и справа – значение auto, благодаря чему страница будет центрироваться по горизонтали.

В качестве фонового изображения выбираем fon1.jpg, размещаем его по центру (по горизонтали) и по верхнему краю (по вертикали) страницы, повторяем изображение по горизонтали.

Задаем тип шрифта для всей страницы – tahoma.

Уменьшаем размер шрифта относительно стандартного до 90%.

2. Центрируем содержимое нашей страницы:

3. Задаем ширину всего содержимого, кроме подвала (footer), такую же, как и ширина изображения top_img.jpg.

4. Задаем стили для верха нашей страницы (header), он содержит два контейнера:

Контейнер с классом class=”search”

Контейнер меню - class="menu".

В качестве фонового изображения для контейнера header выбираем top_img.jpg, отменяем повтор изображения.

Задаем ширину контейнера такую же, как и ширина изображения top_img.jpg.

Задаем высоту контейнера.

5. Для контейнера, содержащего текстовое поле и кнопку GO задаем такие стили:

Размещаем все элементы контейнера справа – задаем выравнивание текста по правому краю и отступ от правого и верхнего краев контейнера.

Устанавливаем белый цвет текста в контейнере и высоту контейнера:

Чтобы «кнопка» с изображением (в нашем случае, просто ссылка на изображение) аккуратно разместились возле текстового поля, задаем обтекание для изображения:

6. Создаем меню.

Для списка, который будет меню, отменяем маркер, устанавливаем отступ слева от контейнера и расстояние между строками:

Каждую строку списка размещаем на одной и той же строке:

Для ссылок списка меню отменяем подчеркивание и устанавливаем черный цвет текста:

Для первого пункта меню, отмеченного классом but1 задаем отступы

Для первого пункта меню задаем псевдокласс - при наведении мыши у пункта меню появляется фоновое изображение:

Аналогично, выполняем для второго пункта меню:

И самостоятельно – остальные пункты меню.

7. Для содержимого, которое будет находиться ниже меню, задаем ширину в 1000px:

8. Далее отдельно задаем стили для левой (left) и правой (right) частей контента.

9. Для левой части установите фоновое изображение left_bg.jpg, задайте ширину и высоту в пикселях, обтекание.

Установите стили ссылкам.

10. В правой части задайте только высоту, ширина автоматически подберется.

Шесть списков правой части помещены в отдельные контейнеры. Подберите ширину контейнеров.

11. Установит стили для подвала.

Задание 2. Создание меню для сайта

Имеется код:

…

<title>Создание меню для сайта CSS методами</title>
</head>
<body>
<ul class="css-menu-2">
<li><a href="#">Главная</a></li>
<li><a href="#">CSS уроки</a></li>
<li><a href="#" class="selected">CSS меню</a></li>
<li><a href="#">Справочник</a></li>
</ul>

…

Проверьте в браузере.

Добавим к нему стили:

1. Список немаркированный. Расположение линии снизу от списка, с отступом в 10 пикселей.

2. Расположение элементов списка на одной строке (inline), увеличим отступ справа между элементами списка:

3. Задаем свойства для ссылок: цвет, убираем подчеркивание, цвет фона, рамку вокруг каждого элемента списка, отсутствие нижней границы, отступы от границ:

5. При наведении мышью на ссылку увеличиваем отступ, а, следовательно, и размер элемента

6. Для открытой (выбранной) ссылка задаем свойства:

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

При наведении мыши на пункт меню появляется эффект:

Или

Имеется код:

<title>Создание горизонтального CSS меню для сайта</title>
</head>
<body>
<div id="css-menu">
<ul>
<li><a href="#">
Главная
О нашем проекте
</a></li>
<li><a href="#">
Справочник
CSS справочник
</a></li>
<li><a href="#">
CSS уроки
Для начинающих
</a></li>
<li><a href="#">
CSS меню
Коллекция CSS меню
</a></li>
</ul>
</div>

Зададим стили:

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

Имеется код:

<title>Создание горизонтального CSS меню</title>
</head>
<body>
<ul class="css-menu-3">
<li><a href="#">Главная</a></li>
<li><a href="#">HTML уроки</a></li>
<li><a href="#">CSS уроки</a></li>
<li><a href="#" class="selected">CSS меню</a></li>
<li><a href="#">Справочник</a></li>
</ul>

Задайте стили:

Задание 5 . Создайте такие блоки на странице.

1. Откройте Notepad. В новом документе запишите теги:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

</head>

<body>

</body>

</html>

2. Файл сохраните под именем index1.html

3. В теле создайте четыре контейнера:

Сохраните. Просмотрите в браузере.

5. Создайте еще один файл и сохраните его под именем style1.css.

6. Далее работаем с файлом style1.

7. Задайте свойства, общие для всех контейнеров: рамку, отступ от левого края контейнера, абсолютное позиционирование, размер шрифта, жирный шрифт:

8. Для первого контейнера задайте свойства: ширину и высоту, цвет фона, отступ от левого края окна браузера и отступ от верхнего края окна браузера, z-index:1 – означает, что элемент будет на заднем плане: