Создание шаблона сайта

1. Откройте файл index.html, созданный на прошлом занятии. В теле документа создайте контейнеры div в указанной ниже последовательности. Список ссылок поместите в <div id="left"> … </div>, а заголовок третьего уровня исправьте на заголовок первого уровня и поместите в контейнер <div id="header"> … </div>.

<div id="all"> <div id="header"> </div> <div id="left"> </div> <div id="content"> </div></div>

2. Скопируйте содержимое тела файла structure.html в контейнер <div id="content"> … </div>. После этого удалите файл structure.html и измените адрес в ссылке, которая указывала на данную страницу:
<a href="index.html">Структура Web</a>

3. Посмотрите результат, открыв в браузере файл index.html.

4. Откройте style.css на редактирование и пропишите в нем следующие таблицы стилей для тегов div. Посмотрите на результат в браузере. Объясните произошедшие изменения.

#all { width: 1000px; margin: auto; background-color: #fff; } #header { height: 100px; border: #E6E6FA dashed 1px; } #left { width: 250px; float: left; margin-top: 20px;} #content { width: 708px; border: #E6E6FA dashed 1px; margin-top: 20px; padding: 0 20 0 20px;}

5. В качестве фона тела документа установите изображение:

body { background-image: url(<a href="http://www.png" title="www.png">www.png</a>);}

6. Нарисуйте изображение на тему «Всемирная паутина» высотой не более 80 пикселей, а шириной не более 200 пикселей; сохраните его в формате PNG. Пропишите тег img с адресом этого изображения перед заголовком в контейнере <div id="header"> … </div>.
<img id="logo" src="logo.png">

7. Опишите специальный стиль для логотипа:

img#logo { float: left; margin: 10px;}

8. Вставьте в другие html-страницы теги div и ссылку на таблицу стилей аналогично содержимому файла index.hml.