Практическая работа Блочная вёрстка

Практическая работа
 Блочная вёрстка

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

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.   Посмотрите на окончательный результат в браузере:

Скачано с www.znanio.ru