ГлавнаяДелаем сайт - табличная верстка → Урок 1. Переносим макет сайта в HTML

Переносим макет сайта в HTML

Если вы читали Основные этапы создания сайтов, то знаете, что после этапа создания макета сайта получившуюся картинку нужно перенести в HTML. Этому процессу и посвящены эти два урока.

Сайт, на котором вы сейчас находитесь, мог бы иметь и другой дизайн. Предположим, у нас есть вот такой макет:



Эту картинку нам надо перенести в HTML. Попробуем сделать так называемый фиксированный дизайн, взяв за основу таблицу. Поэтому наложим на эту картинку сетку таблицы, чтобы разделить на структурные элементы, например, так:


Целиком наша картинка имеет размеры 800 х 600 пикселов, значит и наша таблица-каркас будет иметь размеры 800 х 600 пикселов. Далее, мы разделили нашу картинку на 7 частей, на эти же 7 ячеек мы разделим и нашу таблицу. Первую часть нашей картинки оставим без изменений, а в остальных частях удалим текст (его мы вернем при помощи HTML).

Теперь надо подготовить наши 7 картинок, например, в программе ImageReady (как это сделать читайте на странице Подготовка графики с помощью ImageReady). Для удобства дадим им имена в виде im_01.gif - im_07.gif и сложим в папку с названием im.

Теперь создадим папку site на любом диске компьютера, поместим в нее папку im с картинками и сюда же будем складывать все наши страницы.

Создайте страницу index.html с каркасом нашей таблицы:
<html> <head> <title>Как сделать сайт</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> </head> <body> <table width="800" height="600" border="0" cellpadding="0" cellspacing="0"> </table> </body> </html>
Теперь определим структуру таблицы, она состоит из пяти строк и трех столбцов:

Первая строка состоит из трех столбцов, причем третий столбец объединяет три строки (ячейки 1, 2 и 3).
Вторая строка состоит из одного столбца, включающего в себя два (ячейка 4).
Третья строка состоит из одного столбца, включающего в себя два (ячейка 5).
Четвертая строка состоит из одного столбца, включающего в себя три (ячейка 6).
Пятая строка состоит из одного столбца, включающего в себя три (ячейка 7).

Запишем это:
<html> <head> <title>Как сделать сайт</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> </head> <body> <table width="800" height="600" border="1" cellpadding="0" cellspacing="0"> <tr> <td>1</td> <td>2</td> <td rowspan="3">3</td> </tr> <tr> <td colspan="2">4</td> </tr> <tr> <td colspan="2">5</td> </tr> <tr> <td colspan="3">6</td> </tr> <tr> <td colspan="3">7</td> </tr> </table> </body> </html>
Сейчас наша таблица выглядит так:

1 2 3
4
5
6
7


Зададим ширину и высоту каждой ячейки, а фоном сделаем подготовленные картинки, уберем рамку у таблицы (border="0").

Чтобы задать размеры ячеек, нужно знать размеры картинок, которые в них будут располагаться. Наша картинка im_01.gif имеет размер 352 х 31 пикселов, картинка im_02.gif имеет размер 398 х 31 пикселов и т.д. Именно эти размеры мы и укажем в качестве размеров ячейки:
<html> <head> <title>Как сделать сайт</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> </head> <body> <table width="800" height="600" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="352" height="31" background="im/im_01.gif"> </td> <td width="398" height="31" background="im/im_02.gif"> </td> <td rowspan="3" width="50" height="183" background="im/im_03.gif"> </td> </tr> <tr> <td colspan="2" width="750" height="112" background="im/im_04.gif"> </td> </tr> <tr> <td colspan="2" width="750" height="40" background="im/im_05.gif"> </td> </tr> <tr> <td colspan="3" width="800" height="366" background="im/im_06.gif"> </td> </tr> <tr> <td colspan="3" width="800" height="51" background="im/im_07.gif"> </td> </tr> </table> </body> </html>
Теперь наша страница выглядит так, как мы и хотели:


Сейчас наша страница прижимается к левому краю, исправим это с помощью параметра align="center" тега <table> и зададим фоновый цвет окна параметром bgcolor тега <body>.
... <body bgcolor="#477B1D"> <table width="800" height="600" border="0" cellpadding="0" cellspacing="0" align="center"> ...
Отлично, мы перенесли нашу картинку в HTML, остался один нюанс. Сейчас фоном ячейки, где будет контент, является картинка белого цвета (im_06.gif). Но картинка занимает место и при этом не несет никакой информации, поэтому разумно ее удалить, а белый цвет задать параметром bgcolor.
... <tr> <td colspan="3" width="800" height="366" bgcolor="#FFFFFF"> </td> </tr> ...
На следующем уроке зададим слоган, пункты меню и создадим остальные страницы сайта.



Следующий урок Вернуться в раздел 
Теперь нажмите кнопку, что бы не забыть адрес и вернуться к нам снова.