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.
7. Оформление таблиц с помощью css
Задание 1. Создайте файлы table1.html и связанный с ним style1.css. В первом на языке HTML опишите таблицу представленную ниже, а во втором - ее внешний вид.
Задание 2. Создайте файлы table2.html и связанный с ним style2.css. В первом на языке HTML опишите таблицу представленную ниже, а во втором - ее внешний вид.
Ответ к заданиям Задание 1.
Файл table1.html
<html>
<head>
<title>Таблицы</title>
<link rel="stylesheet" href="style1.css" />
</head>
<body>
<table>
<tr>
<th rowspan=2>HDD</th>
<td>WD Caviar 3.1 Gb</td>
<td> 50$</td>
</tr>
<tr>
<td>Quantum FB ST 6.4Gb</td>
<td> 90$</td>
</tr>
<tr>
<th rowspan=2>Video</th>
<td>Matrox G400</td>
<td>115$</td>
</tr>
<tr>
<td>Voodoo III</td>
<td> 120.50$</td>
</tr>
</table>
</body>
</html>
Файл style1.css
table {
margin: auto;
width: 400px;
border: #2f4f4f inset 5px;
padding: 5px;
}
td,th {
border: groove 1px;
padding: 5 10 5 10px;
}
Задание 2.
Файл table2.html
<html>
<head>
<title>Буки и бяки</title>
<link rel="stylesheet" href="style2.css" />
</head>
<body>
<table cellpadding="10">
<tr>
<tdclass="w200">
С каждым днем в Интернете появляется все больше бяк и бук. Это особенные существа, роль которых в развитии современного общества не понятна, но тем не менее само их присутствие заметно. Буки и бяки требуют особого обращения к себе, если обращаться к ним как к нормальным человеческим особям, то вы поняты не будете.</td>
<tdclass="w5"></td>
<tdclass="w200">Вот таблица, которая показывает сколько бук, бяк и других обитает в Интернете:<br><br>
<table class="white" cellspacing="3">
<tr>
<td class="w50">буки</td>
<td>65%населения</td>
</tr>
<tr>
<td>бяки</td>
<td>20%населения</td>
</tr>
<tr>
<td>другие</td>
<td>15%населения</td>
</tr>
</table>
<br><br>
Данные статистического штаба
</td>
</tr>
</table>
</body>
</html>
Файл style2.css
body {
background-color: #000066;
}
table {
margin: auto;
border: ridge 5px white;
}
td.w200 {
width: 200px;
vertical-align: top;
background-color: #99ccff;
}
td.w50 {
width: 50px;
}
td.w5 {
width: 5px;
background-color: #ffffff;
}
table.white {
border-width: 1px;
}
table.white tr {
background-color:#ffffff;
}