Пример реализации.
Разберем пример реализации одного из заданий. В таблице 3.9 приведено задание по реализации шаблона сайта. Таблица занимает 100% ширины родительского контейнера (ФП-100), Выравнивание ячеек по умолчанию, отступы от границ ячейки cellpadding=2, отступы между ячейками Cellspacing=2, ширина границы border=2.
Таблица 3.9 Пример задания
|
Вариант |
Ширина |
Выравнивание |
cellpadding |
Cellspacing |
Граница |
|
Пример |
ФП-100 |
|
2 |
2 |
2 |
|
№ варианта |
Задание |
№ ячеек | |||||||
|
Пример |
Таблица |
1 |
4 |
5 |
8 |
11 |
13 |
15 |
|
|
Ширина |
|
Ф300 |
|
|
|
|
Ф600 |
| |
|
Содержимое |
МГ-5 |
МВ-4 |
З1 |
2П |
И |
А |
Е |
| |
|
Фон |
Синий |
Синий |
|
|
|
Синий |
Синий |
| |
Посмотрим на универсальную таблицу 3.1 и вычеркнем из нее не использованные поля, таблица 3.10а. Ячейка 1 расширяется влево за счет ячеек 2 и 3. Ячейки 5, 6 и 11 также расширяются влево за счет ячеек 6, 9 и 12 соответственно. Ячейку 14 убираем, расширяя ячейку 13. В результате получаем таблицу 3.10б. 4я ячейка имеет фиксированную ширину в 300 пикселей (Ф300), ячейка 13, также имеет фиксированную ширину в 600 пикселей, ширина остальных ячеек зависит от их содержимого и самой таблицы.
Таблица 3.10а Универсальная таблица
|
1 |
2 |
3 |
|
4 |
5 |
6 |
|
7 |
8 |
9 |
|
10 |
11 |
12 |
|
13 |
14 |
15 |
Таблица 3.10б Шаблон согласно заданию
|
1 | ||
|
4 |
5 | |
|
8 | ||
|
11 | ||
|
13 |
15 | |
<html>
<head><title>Пример создания таблиц</title></head>
<body>
<table width=100% border="2" cellpadding="2" cellspacing="2">
<tr><td colspan="3" bgcolor="blue">1</td></tr>
<tr><td rowspan="3" width=200px bgcolor="blue">4</td><td colspan="2">5</td></tr>
<tr><td colspan="2">9</td></tr>
<tr><td colspan="2">12</td></tr>
<tr><td colspan="2" bgcolor="blue">13</td><td bgcolor="blue" width="600px">15</td></tr>
</table>
</body>
</html>
Создадим шаблон страницы согласно заданию. Результат приведен на рис. 3.3.
Рисунок 3.3 Пример создания таблицы.
Теперь заполним ячейки таблицы контентом. В ячейке 4 необходимо разместить горизонтальное меню из 5ти элементов (МГ-5). В ячейке 4, поместим вертикальное меню из 4х пунктов; 5я ячейка содержит заголовок, 9я – 2 параграфа текста. Изображение помещаем в ячейку 12. Ячейки 13 и 15 содержат сведения об авторе и его адрес электронной почты соответственно.
Так как мы не умеем пока развернуть список (средствами HTML) в горизонтальную линию, реализуем горизонтальное меню с помощью таблицы.
Реализация горизонтального меню:
<html>
<head><title>Пример создания таблиц</title></head>
<body link="red" vlink="yellow" text="red">
<table width=100% border="2" cellpadding="2" cellspacing="2">
<tr><td colspan="3" bgcolor="lightblue">
<table border="0" rows="1" cols="5" width="100%">
<tr>
<td width="19%">Пункт1</td>
<td width="19%">Пункт2</td>
<td width="19%">Пункт3</td>
<td width="19%">Пункт4</td>
<td width="19%">Пункт5</td>
</tr>
</table>
</td></tr>
<tr><td rowspan="3" width=200px bgcolor="lightblue" align="left" valign="top">
<ol type="none">
<li>Пункт1</li>
<li>Пункт2</li>
<li>Пункт3</li>
<li>Пункт4</li>
</ol>
</td><td colspan="2">Заголовок 1</td></tr>
<tr><td colspan="2">
<p>Это первый параграф текста …</p>
<p>Это второй параграф текста …</p>
</td></tr>
<tr><td colspan="2">
<img src="ex.jpg" width="500px" />
</td></tr>
<tr><td colspan="2" bgcolor="lightblue"><author>Фонотов А.М.</author></td>
<td bgcolor="lightblue" width="600px">Пишите: <a href="mailtto:afm-mars@rambler.ru">afm-mars@rambler.ru</a></td></tr>
</table>
</body>
</html>
