ЗАДАНИЕ 2
В этой работе вы освоите трёхколоночную верстку без использования таблиц.
-
Скопируйте на свой компьютер каталог DIV. Откройте файл baikal.htm в редакторе. Ваша задача – оформить веб-страницу так, как показано на образце (см. ниже на странице). Для этого нужно использовать рисунки из подкаталога images и стилевой файл.
-
Добавьте заголовок страницы (TITLE), укажите название документа и ВАШУ фамилию, например: Блочная вёрстка: работа Василия Пупкина.
-
Создайте стилевой файл baikal.css и подключите его к веб-странице. Установите для всех элементов страницы (они обозначаются знаком *) нулевые внутренние и внешние отступы:
* {
margin:0px;
padding:0px;
}
-
Добавьте в блок с идентификатором header заголовок документа «Озеро Байкал». В стилевом файле установите для этого блока высоту 80 пикселей и фоновый рисунок header.jpg из каталога images (без повторения). Добавьте для заголовка отступы слева и сверху (как на образце).
-
Добавьте в блок pogoda два скрипта, которые записаны в файле informer.txt. Они выводят на страницу информацию о погоде в двух посёлках на берегу Байкала – в Листвянке и Хужире.
-
Добавьте в блок photo четыре фотографии с именами baikal1.jpg, baikal2.jpg, baikal3.jpg, baikal4.jpg из подкаталога images.
-
Добавьте в блок content текст, записанный в файле text.txt. Оформите абзацы с помощью тэга p. В стилевом файле для тэгов p установите отступы со всех сторон 5 пикселей и абзацный отступ (красную строку) 20 пикселей.
-
В тексте замените, где нужно, знаки «минус» на тире, перед тире поставьте неразрывные пробелы. Поставьте неразрывные пробелы между числами и единицами измерения
Добавьте в конец текста абзац со словами
По материалам Википедии.
Выровняйте абзац по правой границе и выделите этот текст с помощью тэга em.
Слово «Википедии» должно быть ссылкой на страницу Википедии, посвящённую Байкалу.
-
Добавьте в блок footer текст, содержащий вашу фамилию, имя и класс, например, Работу выполнил Василий Пупкин, 11А класс
-
Посмотрите, как выглядит страница в браузере. Теперь остается с помощью стилей оформить блоки так, чтобы они заняли правильное место на странице.
-
В стилевом файле для блока pogoda установите ширину 150 пикселей, отступ слева 10 пикселей и обтекание слева (float:left;). Посмотрите, как теперь выглядит страница.
-
В стилевом файле для блока photo установите ширину 220 пикселей, отступ слева 10 пикселей и обтекание справа (float:right;). Посмотрите, как теперь выглядит страница.
-
Теперь сделаем так, чтобы центральная колонка (блок content) не залезала на левую и правую. В стилевом файле для блока content установите отступ слева 150 пикселей и отступ справа 220 пикселей. Посмотрите, как теперь выглядит страница.
-
Остается оформить нижний блок («подвал»). В стилевом файле установите для блока footer цвет фона #CCCCCC, внутренние отступы – сверху 5 пикселей, снизу – 10 пикселей, выравнивание текста по центру. Для того, чтобы этот блок не обтекался другими ни слева, ни справа, добавьте свойство
clear:both;
-
Посмотрите на окончательный результат в браузере:
