Табличная вёрстка сайта

Рассмотрим пример построения табличного сайта.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 в вашей папке.

Как это должно выглядеть вы можете посмотреть здесь

                                               следующая >>>

 

 

http://www.iglis.ru

 
Создать бесплатный сайт с uCoz