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

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

Тема: «Блочная верстка»

Цель: научиться использовать блочную верстку для создания web-страниц.

Задание 1. Данную web-страницу оформите по образцу:

Далее будем использовать контейнеры:

с названием учебного заведения – title

с основным содержимым меню и текстом – content

отдельно меню (левая часть страницы) – left

отдельно текст (правая часть страницы) - right

нижняя часть страницы, с данными об авторе – подвал – footer

полностью весь контейнер, содержащий все предыдущие - wrapper

1. В NotePad cоздайте файл и сохраните его под именем style.css.

2. Далее работаем в файле style.css

Зададим изображение для фона страницы. Обращаемся к селектору body, его свойству background-image.

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

3. Задаем свойства для контейнера wrapper:

ширину в 700 пикселей

отступ от верхней границы в 10 пикселей и для отступов от правого, нижнего и левого края ставим значение auto, чтобы браузер автоматически рассчитывал отступы – так весь контейнер будет располагаться по центру страницы

толщину границы вокруг контейнера 3 пикселя, тип линии – сплошная, цвет – синий

тень для всего контейнера – первые два нуля означают, что нет смещения ни влево-вправо, ни вверх-вниз, 3px 4px – толщина и размытие тени в пикселях, и последнее - цвет тени

радиус скругления всех углов – 20px;

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

4. Внутри контейнера wrapper имеется контейнер title, а в нем два заголовка.

4.1. Задаем стили для контейнера title:

цвет фона – светло-зеленый;

высота контейнера – 110px;

выравнивание текста – по центру;

радиус скругления верхнего левого и верхнего правого углов – 20px;

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

4.2. Задаем параметры для заголовка h1:

синий цвет,

отступ от верхнего края контейнера title - 10 пикселей

тип шрифта - calibri,

тень для текста – первый ноль означает, что нет смещения слево-справо, а значение 2px – смещение вниз, далее – цвет тени.

4.3. Задаем параметры для заголовка h2 – тип шрифта Calibri и отступ от нижнего края контейнера title в 10px.

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

5. Для контейнера content стили не задаем. Работаем только с его левой и правой частями - контейнерами left и right

6. Задаем свойства контейнера left:

цвет фона

отступ от контейнера-родителя (content) в 0px

внутренние отступы - отступы от всех краев контейнера до содержимого - 5px

свойство float – свойство, которое определяет, что контейнер будет выравниваться по левому краю, а остальные элементы (контейнер right) будут обтекать его с других сторон

ширину и высоту контейнера и выравнивание текста внутри контейнера