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

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.