Сайт, на котором вы сейчас находитесь, мог бы иметь и другой дизайн. Предположим, у нас есть вот такой макет:
Эту картинку нам надо перенести в 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>
Сейчас наша таблица выглядит так:
Зададим ширину и высоту каждой ячейки, а фоном сделаем подготовленные картинки, уберем рамку у таблицы (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>
...
На следующем уроке зададим слоган, пункты меню и создадим остальные страницы
сайта.
Следующий урок Вернуться в раздел
Теперь нажмите кнопку, что бы не забыть адрес и вернуться к нам снова.
Главная → Делаем сайт - табличная верстка
→ Урок 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 с каркасом нашей таблицы:
Первая строка состоит из трех столбцов, причем третий столбец объединяет три строки (ячейки 1, 2 и 3).
Вторая строка состоит из одного столбца, включающего в себя два (ячейка 4).
Третья строка состоит из одного столбца, включающего в себя два (ячейка 5).
Четвертая строка состоит из одного столбца, включающего в себя три (ячейка 6).
Пятая строка состоит из одного столбца, включающего в себя три (ячейка 7).
Запишем это:
| 1 | 2 | 3 |
| 4 | ||
| 5 | ||
| 6 | ||
| 7 | ||
Зададим ширину и высоту каждой ячейки, а фоном сделаем подготовленные картинки, уберем рамку у таблицы (border="0").
Чтобы задать размеры ячеек, нужно знать размеры картинок, которые в них будут располагаться. Наша картинка im_01.gif имеет размер 352 х 31 пикселов, картинка im_02.gif имеет размер 398 х 31 пикселов и т.д. Именно эти размеры мы и укажем в качестве размеров ячейки:
Сейчас наша страница прижимается к левому краю, исправим это с помощью параметра align="center" тега <table> и зададим фоновый цвет окна параметром bgcolor тега <body>.
Следующий урок Вернуться в раздел
Теперь нажмите кнопку, что бы не забыть адрес и вернуться к нам снова.