Табличная вёрстка сайта
Рассмотрим пример построения табличного сайта.Cразу определимся:сайт будет состоять из шапки(header),трёх колонок(меню,контент и колонки новостей)и подвал нашего сайта (footer)Почему мы рассматриваем именно трехколоночную модель? Всё очень просто, зная строение трёх колонок отрезать лишнее и сделать двухколоночный сайт уже не составит труда.
Итак:в блокноте записываем обязательные теги HTML-документа.
<html>
<head>
<title> </title>
</head>
<body>
</body>
</html>
Теперь напишем название нашего страницы.Информация о содержимом задаётся между тегами<title></title>Допустим мы делаем сайт о природе.
<html>
<head>
<title>Сайт о природе Кавказа и его богатствах,музеи и заповедники</title>
</head>
<body>
</body>
</html>
Сделаем каркас нашей страницы. Нам необходима таблица где в первом ряду будет одна ячейка, во втором три ячейки и в третьем одна ячейка
В первом ряду у нас будет шапка сайта(header),Второй ряд первая ячейка меню сайта,вторая ячейка содержимое(контент) и третья колонка новостей.Третий ряд у нас займёт подвал сайта(footer).
Сразу же пропишем размеры нашей таблицы:ширину возьмём 800рх,вы можете выставить свои размеры,высоту поставим 600рх.Вы можете задать свои размеры
<html>
<head>
<title>Сайт о природе Кавказа и его богатствах,музеи и заповедники</title>
</head>
<body>
<table width="800" height="600рх">
<tr>
<td colspan="3">header</td>
</tr>
<tr>
<td> меню </td>
<td>контент</td>
<td>новости</td>
</tr><tr>
<table width="800" height="50">
</tr>
<tr>
<td colspan="3">footer</td>
</tr>
</table>
</body>
</html>
Параметр colspan="3"определяет размер ячейки.Для нашего случая верхняя и нижняя ячейки такого же размера как три вертикальные колонки.
Теперь давайте раскрасим нашу страницу, для того наглядно увидеть наше произведение и ещё одна проблема нужно выровнять страницу по центру.
<html>
<head>
<title>Сайт о природе Кавказа и его богатствах,музеи и заповедники
</title>
</head>
<body>
<center>
<table width="800" height="600рх">
<tr>
<td
colspan="3"bgcolor="#CC6699">header</td>
</tr>
<tr>
<td bgcolor="#FFFF00"> меню </td>
<td bgcolor="#CCCCCC">контент</td>
<td bgcolor="#FFFF00">новости</td>
</tr>
<table width="800" height="50">
<tr> <td
colspan="3">footer</td>
</tr>
</table>
</center>
</body>
И ещё давайте сразу пропишем все размеры для нашей таблицы:ширина колонок меню и колонки новостей у нас будет=180рх,на контент остаётся 440рх,шапка сайта ширина=800рх,высота151рх и подвал соответственно 800рх на 50рх
<html>
<head>
<title>Сайт о природе Кавказа и его богатствах,музеи и заповедники</title>
</head>
<body>
<center>
<table width="800" height="600рх">
<tr>
<td
colspan="3"bgcolor="#00CC99" width="800" height="151">header</td>
</tr>
<tr>
<td bgcolor="#FFFF00"width="180" > меню </td>
<td bgcolor="#CCCCCC"width="440" >контент</td>
<td bgcolor="#FFFF00"width="180" >новости</td>
</tr>
<table width="800" height="50">
<tr> <td
colspan="3"bgcolor="#00CC99"width="800" height="50">footer</td>
</tr>
</table>
</center>
</body>
</html>
Создайте у себя на компьютере папку,назовите её по вашему усмотрению,допустим у нас папка будет называться test.
Создайте в этой папке папку images в которой будете сохранять изображения.Вы можете скопировать данный код в блокнот,а затем сохранить его как index.html в вашей папке.
Как это должно выглядеть вы можете посмотреть здесь
следующая >>>