Практическая работа № 32 «Блочная верстка»

Практическая работа № 32 «Блочная верстка»

В этой работе вы освоите трёхколоночную верстку без использования таблиц.

1. Скопируйте на свой компьютер каталог DIV. Откройте файл baikal.htm в редакторе. Ваша задача – оформить веб-страницу так, как показано на образце (см. на следующей странице). Для этого нужно использовать рисунки из подкаталога images и стилевой файл.

2. Добавьте заголовок страницы (TITLE), укажите название документа и фамилию автора, например:

Блочная вёрстка: работа Василия Пупкина.

3. Создайте стилевой файл baikal.css и подключите его к веб-странице. Установите для всех элементов страницы (они обозначаются знаком *) нулевые внутренние и внешние отступы:

* {

margin:0px;

padding:0px;

}

4. Добавьте в блок с идентификатором header заголовок документа «Озеро Байкал». В стилевом файле установите для этого блока высоту 80 пикселей и фоновый рисунок header.jpg из каталога images (без повторения). Добавьте для заголовка отступы слева и сверху (как на образце).

5. Добавьте в блок pogoda два скрипта, которые записаны в файле informer.txt. Они выводят на страницу информацию о погоде в двух посёлках на берегу Байкала – в Листвянке и Хужире.

6. Добавьте в блок photo четыре фотографии с именами baikal1.jpg, baikal2.jpg, baikal3.jpg, baikal4.jpg из подкаталога images.

7. Добавьте в блок content текст, записанный в файле text.txt. Оформите абзацы с помощью тэга p. В стилевом файле для тэгов p установите отступы со всех сторон 5 пикселей и абзацный отступ (красную строку) 20 пикселей.

8. В тексте замените, где нужно, знаки «минус» на тире, перед тире поставьте неразрывные пробелы. Поставьте неразрывные пробелы между числами и единицами измерения.

Добавьте в конец текста абзац со словами

По материалам Википедии.

Выровняйте абзац по правой границе и выделите этот текст с помощью тэга em.

Слово «Википедии» должно быть ссылкой на страницу Википедии, посвящённую Байкалу.

9. Добавьте в блок footer текст, содержащий вашу фамилию, имя и класс, например,

Работу выполнил Василий Пупкин, 11А класс

10. Посмотрите, как выглядит страница в браузере. Теперь остается с помощью стилей оформить блоки так, чтобы они заняли правильное место на странице.

11. В стилевом файле для блока pogoda установите ширину 140 пикселей, отступ слева 10 пикселей и обтекание слева (float:left;). Посмотрите, как теперь выглядит страница.

12. В стилевом файле для блока photo установите ширину 220 пикселей, отступ слева 10 пикселей и обтекание справа (float:right;). Посмотрите, как теперь выглядит страница.

13. Теперь сделаем так, чтобы центральная колонка (блок content) не залезала на левую и правую. В стилевом файле для блока content установите отступ слева 140 пикселей и отступ справа 220 пикселей. Посмотрите, как теперь выглядит страница.

14. Остается оформить нижний блок («подвал»). В стилевом файле установите для блока footer цвет фона #CCCCCC, внутренние отступы – сверху 5 пикселей, снизу – 10 пикселей, выравнивание текста по центру. Для того, чтобы этот блок не обтекался другими ни слева, ни справа, добавьте свойство clear:both;

15. Посмотрите на окончательный результат в браузере: