...
<td width="398" height="31" background="im/im_02.gif"
align="right" valign="top">
создаем, раскручиваем, зарабатываем
</td>
...
На макете слоган белого цвета и выделен полужирным курсивом:
...
<td width="398" height="31" background="im/im_02.gif"
align="right" valign="top">
<font color="#FFFFFF"><strong><em>
создаем, раскручиваем, зарабатываем
</em></strong></font>
</td>
...
Теперь нужно сделать меню. На макете это пятая ячейка. Этой ячейке соответствует единственный столбец третьей строки
нашей таблицы (где background="im_05.gif").
Чтобы наше меню было аккуратным, поместим его в таблицу. Она будет состоять из одной строки и четырех столбцов (именно столько у нас пунктов меню). Чтобы пункты меню располагались так, как на макете, выровняем таблицу по правому краю:
...
<td colspan="2" width="750" height="40"
background="im/im_05.gif">
<table align="right">
<tr><td></td><td></td><td></td><td></td></tr>
</table>
</td>
...
Теперь подумаем, что собой представляют пункты меню, правильно это ссылки на соответствующие страницы сайта.
Сами страницы мы создадим чуть позже, пока же дадим им названия:
Напишим наши пункты меню и сделаем их ссылками:
...
<td colspan="2" width="750" height="40"
background="im/im_05.gif">
<table align="right">
<tr>
<td>
<a href="do.html">делаем сайт</a>
</td>
<td>
<a href="opt.html">оптимизируем сайт</a>
</td>
<td>
<a href="unt.html">раскручиваем сайт</a>
</td>
<td>
<a href="ear.html">зарабатываем</a>
</td>
</tr>
</table>
</td>
...
Теперь наше меню выглядит так:
А нам надо, чтобы оно занимало всю зеленую полоску, было белого цвета и без подчеркивания.
Как вы помните, если не задавать ширину таблицы, то она формируется по содержимому. Значит, если мы зададим таблице ширину равную ширине зеленой полоски, то наши пункты займут всю зеленую полоску.
Чтобы текст был белого цвета, заключим его в теги <font> </font> и в теги <strong> </strong> - для полужирного начертания.
Наконец, чтобы убрать подчеркивание, зададим тегу <a> параметр style="text-decoration:none". Этот параметр, откровенно говоря, относится к CSS, но здесь без него не обойтись:
...
<td colspan="2" width="750" height="40"
background="im/im_05.gif">
<table align="right">
<tr>
<td>
<a href="do.html" style="text-decoration:none">
<font color="#FFFFFF"><strong>
делаем сайт
</strong></font>
</a>
</td>
<td>
<a href="opt.html" style="text-decoration:none">
<font color="#FFFFFF"><strong>
оптимизируем сайт
</strong></font>
</a>
</td>
<td>
<a href="unt.html" style="text-decoration:none">
<font color="#FFFFFF"><strong>
раскручиваем сайт
</strong></font>
</a>
</td>
<td>
<a href="ear.html" style="text-decoration:none">
<font color="#FFFFFF"><strong>
зарабатываем
</strong></font>
</a>
</td>
</tr>
</table>
</td>
...
Теперь наше меню выглядит так:
Если есть желание можете поменять шрифт и размер.
Теперь займемся контентом, он занимает всю четвертую строку нашей таблицы. Если сейчас написать там текст, то он будет вплотную прижиматься к границам ячейки (ведь наша таблица имеет параметры cellpadding="0" и cellspacing="0").
Для того, чтобы иметь возможность оформлять наш контент, его необходимо также поместить в таблицу (состоять она будет из одной строки и одного столбца) и задать ей необходимые параметры.
Кроме того, чтобы содержимое контента отображалось как надо, т.е. с самого верха страницы, необходимо добавить параметр valign="top" тегу <td> основной таблицы:
...
<tr>
<td colspan="3" width="800" height="366"
bgcolor="#FFFFFF" valign="top">
<table cellpadding="20" cellspacing="0">
<tr><td>Добро пожаловать на сайт о сайтах</td></tr>
</table>
</td>
</tr>
...
Вот теперь шаблон нашего сайта готов. Создавайте страницы, соответствующие пунктам меню, скопируйте в них код этой страницы,
меняйте только название страниц (теги <title></title>) и наполняйте их нужным контентом.
Кстати, не забудьте на всех страницах сделать ссылку на главную страницу (index.html).
Рабочий пример можно посмотреть здесь.
Заключение
Вы, конечно, обратили внимание, что код нашей страницы громоздкий. Это издержки HTML. Но его можно сделать компактным и читабельным, если использовать CSS - каскадные таблицы стилей. Кроме того, CSS обладает гораздо большими возможностями по оформлению страниц. Поэтому настоятельно рекомендую изучить эту технологию. А наши уроки на этом закончены.
Предыдущий урок Вернуться в раздел
Теперь нажмите кнопку, что бы не забыть адрес и вернуться к нам снова.
Главная → Делаем сайт - табличная верстка
→ Урок 2. Делаем шаблон будущего сайта
Делаем шаблон будущего сайта
Если помните, во второй ячейке нашего макета должен располагаться слоган. Этой ячейке соответствует второй столбец первой строки нашей таблицы (где background="im_02.gif"). Напишем в этом столбце наш слоган и выровняем его по горизонтали - справа, по вертикали - кверху:Чтобы наше меню было аккуратным, поместим его в таблицу. Она будет состоять из одной строки и четырех столбцов (именно столько у нас пунктов меню). Чтобы пункты меню располагались так, как на макете, выровняем таблицу по правому краю:
- делаем сайт - do.html
- оптимизируем сайт - opt.html
- раскручиваем сайт - unt.html
- зарабатываем - ear.html
Напишим наши пункты меню и сделаем их ссылками:
А нам надо, чтобы оно занимало всю зеленую полоску, было белого цвета и без подчеркивания.
Как вы помните, если не задавать ширину таблицы, то она формируется по содержимому. Значит, если мы зададим таблице ширину равную ширине зеленой полоски, то наши пункты займут всю зеленую полоску.
Чтобы текст был белого цвета, заключим его в теги <font> </font> и в теги <strong> </strong> - для полужирного начертания.
Наконец, чтобы убрать подчеркивание, зададим тегу <a> параметр style="text-decoration:none". Этот параметр, откровенно говоря, относится к CSS, но здесь без него не обойтись:
Если есть желание можете поменять шрифт и размер.
Теперь займемся контентом, он занимает всю четвертую строку нашей таблицы. Если сейчас написать там текст, то он будет вплотную прижиматься к границам ячейки (ведь наша таблица имеет параметры cellpadding="0" и cellspacing="0").
Для того, чтобы иметь возможность оформлять наш контент, его необходимо также поместить в таблицу (состоять она будет из одной строки и одного столбца) и задать ей необходимые параметры.
Кроме того, чтобы содержимое контента отображалось как надо, т.е. с самого верха страницы, необходимо добавить параметр valign="top" тегу <td> основной таблицы:
Рабочий пример можно посмотреть здесь.
Заключение
Вы, конечно, обратили внимание, что код нашей страницы громоздкий. Это издержки HTML. Но его можно сделать компактным и читабельным, если использовать CSS - каскадные таблицы стилей. Кроме того, CSS обладает гораздо большими возможностями по оформлению страниц. Поэтому настоятельно рекомендую изучить эту технологию. А наши уроки на этом закончены.
Предыдущий урок Вернуться в раздел
Теперь нажмите кнопку, что бы не забыть адрес и вернуться к нам снова.