Создание сайта. Верстка. Часть вторая

alt
Продолжим написание нашего кода.
Вчера мы создали шапку, а сегодня будем доделывать оставшиеся части, а именно сайдбар, контент и подвал.
Итак, продолжим. После нашей шапки сделаем пропущенное расстояние для того, чтобы отделить шапку от другой части. Вы можете сделать там навигацию, как в шаблоне, но мы делать ничего не будем. Не забывайте, что это лишь пример, чтобы дать вам понять как верстается шаблон.
В принципе, все остальное создается таким же способом, как описано в прошлой статье.
Для сайдбара создаем еще одну таблицу, в которую поместим части дизайна. В нашем шаблоне можно сделать лишь одну таблицу, и кодом <br /> опускать нужные нам разделы либо коду счетчиков. Если ваши блоки имеют разную структуру, то придется писать код для каждого блока. Наш код не будет отличаться от кода выше (с описанием разделов).
Вот, что у нас вышло:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> {headers} <style type="text/css" media="all"> @import url(/templates/blog/css/style.css); </style> <style type="text/css" media="all"> @import url(/templates/blog/css/engine.css); </style> </head> <body> <center> <div style="padding-top: 29px"> <table width="900" border="0"> <tr> <td width="15"><img src="http://site.ru/theme/наше название.png" width="15" height="10" border="0"></td> <td width="100%" colspan="5" valign="top"></td> <td width="428"><img src="http://site.ru/theme/наше название.png" width="15" height="10" border="0"></td> </tr> <tr> <td width="15"></td> <td width="290" valign="top" align="left"><a href="http://site.ru"><img src="http://site.ru/theme/logo.png" width="200" height="100" border="0"></a></td> <td width="0" valign="top" align="left"></td> <td width="100%" colspan="3"></td> <td width="15"></td> </tr> <tr> <td width="15"></td> <td colspan="5" valign="bottom"><a href="http://раздел.ru"><img src="http://site.ru/theme/ваше имя.png" width="100" height="20" border="0"></a>&nbsp;<a href="http://раздел.ru"><img src="http://site.ru/theme/ваше имя.png" width="100" height="20" border="0"></a>&nbsp;<a href="http://раздел.ru"><img src="http://site.ru/theme/ваше имя.png" width="100" height="20" border="0"></a>&nbsp;<a href="http://раздел.ru"><img src="http://site.ru/theme/ваше имя.png" width="100" height="20" border="0"></a> <td width="100%"></td> </tr> <tr> <td width="15"></td> <td height="10" colspan="5"></td> <td width="0"></td> </tr> <tr> <td width="15"></td> <td width="250" align="left"><table width="250" border="0"> <tr> <td width="250"></td> <td width="10"></td> </tr> <tr> <td width="250" height="10"></td> <td width="10"></td> </tr> </table></td> <td width="0"></td> <td width="250" align="left"><table width="250" border="0"> <tr> <td width="250"><img src="http://site.ru/theme/ваше имя.png" width="250" height="150" border="0"></td> </tr> </table></td> <td width="0"></td> <td width="250" align="left"><table width="250" border="0"> <tr> <td width="10"></td> <td width="250"></td> </tr> <tr> <td width="10" height="10"></td> <td width="250"></td> </tr> </table></td> <td width="0"></td> </tr> <tr> <td width="15"></td> <td width="100%" height="10" colspan="5"></td> <td width="15"></td> </tr> <tr> <td width="15"></td> <td width="250"><table width="250" border="0"> <tr> <td width="250"></td> <td width="10"></td> </tr> <tr> <td width="250" height="10"></td> <td width="10"></td> </tr> </table></td> </tr> </table> </div> </center> </body> </html>

Теперь место для контента. У каждого движка вывод контента реализован по своему. Например, в DLE контент идет отдельным шаблоном, который выводится командой {content}. В других же скриптах, шаблон для вывода контента придётся писать в коде основной страницы. Для того, чтобы узнать, как выводится контент на вашем движке, вам нужно загрузить код в редактор, а так же запустить работающий скрипт. Смотря на код и на отображении его в работе (зная html), вы сможете разобраться с нюансами используемого вами скрипта.
Итак, вернемся к нашей верстке, учитывая, что в нашем примере, контент выводится отдельным шаблоном, поэтому, для вывода контента мы создаем лишь ячейку. А так же, для правого сайдбары мы пишем такой же код, что и для левого, только меняем размеры ячеек, чтобы маленькие ячейки были слева, а большие – справа.
Вот, что у нас получилось:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> {headers} <style type="text/css" media="all"> @import url(/templates/blog/css/style.css); </style> <style type="text/css" media="all"> @import url(/templates/blog/css/engine.css); </style> </head> <body> <center> <div style="padding-top: 29px"> <table width="900" border="0"> <tr> <td width="15"><img src="http://site.ru/theme/наше название.png" width="15" height="10" border="0"></td> <td width="100%" colspan="5" valign="top"></td> <td width="428"><img src="http://site.ru/theme/наше название.png" width="15" height="10" border="0"></td> </tr> <tr> <td width="15"></td> <td width="290" valign="top" align="left"><a href="http://site.ru"><img src="http://site.ru/theme/logo.png" width="200" height="100" border="0"></a></td> <td width="100%" colspan="4"></td> <td width="15"></td> </tr> <tr> <td width="15"></td> <td colspan="5" valign="bottom"><a href="http://раздел.ru"><img src="http://site.ru/theme/ваше имя.png" width="100" height="20" border="0"></a>&nbsp;<a href="http://раздел.ru"><img src="http://site.ru/theme/ваше имя.png" width="100" height="20" border="0"></a>&nbsp;<a href="http://раздел.ru"><img src="http://site.ru/theme/ваше имя.png" width="100" height="20" border="0"></a>&nbsp;<a href="http://раздел.ru"><img src="http://site.ru/theme/ваше имя.png" width="100" height="20" border="0"></a> <td width="100%"></td> </tr> <tr> <td width="15"></td> <td height="10" colspan="5"></td> <td width="0"></td> </tr> <tr> <td width="15"></td> <td width="250" align="left"><table width="250" border="0"> <tr> <td width="250"></td> <td width="10"></td> </tr> <tr> <td width="250" height="10"></td> <td width="10"></td> </tr> </table></td> <td width="0"></td> <td width="250" align="left"><table width="250" border="0"> <tr> <td width="250"><img src="http://site.ru/theme/ваше имя.png" width="250" height="150" border="0"></td> </tr> </table></td> <td width="0"></td> <td width="250" align="left"><table width="250" border="0"> <tr> <td width="10"></td> <td width="250"></td> </tr> <tr> <td width="10" height="10"></td> <td width="250"></td> </tr> </table></td> <td width="0"></td> </tr> <tr> <td width="15"></td> <td width="100%" height="10" colspan="5"></td> <td width="15"></td> </tr> <tr> <td width="15"></td> <td width="250"><table width="250" border="0"> <tr> <td width="250"></td> <td width="10"></td> </tr> <tr> <td width="250" height="10"></td> <td width="10"></td> </tr> </table></td> <td width="250" colspan="3"></td> <td width="250"><table width="250" border="0"> <tr> <td width="10"></td> <td width="250"></td> </tr> <tr> <td width="10" height="10"></td> <td width="250"></td> </tr> </table></td> <td width="15"></td> </tr> </table> </div> </center> </body> </html>

Вот, как это выглядит:
Осталось написать код нашего подвала. Он не составит труда. Он идентичен нашему пропуску:

<tr> <td width="15"></td> <td height="10" colspan="5"></td> <td width="15"></td> </tr>

Вот наш код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> {headers} <style type="text/css" media="all"> @import url(/templates/blog/css/style.css); </style> <style type="text/css" media="all"> @import url(/templates/blog/css/engine.css); </style> </head> <body> <center> <div style="padding-top: 29px"> <table width="900" border="0"> <tr> <td width="15"><img src="http://site.ru/theme/наше название.png" width="15" height="10" border="0"></td> <td width="100%" colspan="5" valign="top"></td> <td width="428"><img src="http://site.ru/theme/наше название.png" width="15" height="10" border="0"></td> </tr> <tr> <td width="15"></td> <td width="290" valign="top" align="left"><a href="http://site.ru"><img src="http://site.ru/theme/logo.png" width="200" height="100" border="0"></a></td> <td width="100%" colspan="4"></td> <td width="15"></td> </tr> <tr> <td width="15"></td> <td colspan="5" valign="bottom"><a href="http://раздел.ru"><img src="http://site.ru/theme/ваше имя.png" width="100" height="20" border="0"></a>&nbsp;<a href="http://раздел.ru"><img src="http://site.ru/theme/ваше имя.png" width="100" height="20" border="0"></a>&nbsp;<a href="http://раздел.ru"><img src="http://site.ru/theme/ваше имя.png" width="100" height="20" border="0"></a>&nbsp;<a href="http://раздел.ru"><img src="http://site.ru/theme/ваше имя.png" width="100" height="20" border="0"></a> <td width="100%"></td> </tr> <tr> <td width="15"></td> <td height="10" colspan="5"></td> <td width="15"></td> </tr> <tr> <td width="15"></td> <td width="250" align="left"><table width="250" border="0"> <tr> <td width="250"></td> <td width="10"></td> </tr> <tr> <td width="250" height="10"></td> <td width="10"></td> </tr> </table></td> <td width="0"></td> <td width="250" align="left"><table width="250" border="0"> <tr> <td width="250"><img src="http://site.ru/theme/ваше имя.png" width="250" height="150" border="0"></td> </tr> </table></td> <td width="0"></td> <td width="250" align="left"><table width="250" border="0"> <tr> <td width="10"></td> <td width="250"></td> </tr> <tr> <td width="10" height="10"></td> <td width="250"></td> </tr> </table></td> <td width="15"></td> </tr> <tr> <td width="15"></td> <td width="100%" height="10" colspan="5"></td> <td width="15"></td> </tr> <tr> <td width="15"></td> <td width="250"><table width="250" border="0"> <tr> <td width="250"></td> <td width="10"></td> </tr> <tr> <td width="250" height="10"></td> <td width="10"></td> </tr> </table></td> <td width="250" colspan="3"></td> <td width="250"><table width="250" border="0"> <tr> <td width="10"></td> <td width="250"></td> </tr> <tr> <td width="10" height="10"></td> <td width="250"></td> </tr> </table></td> <td width="15"></td> </tr> <tr> <td width="15"></td> <td height="10" colspan="5"></td> <td width="15"></td> </tr> <tr> <td width="15"></td> <td height="10" colspan="5"></td> <td width="15"></td> </tr> </table> </div> </center> </body> </html>

А так это выглядит:
Теперь пришло время расставить все необходимые нам теги и ссылки. В шапке у нас панель навигации. В зависимости от используемого скрипта так же выводится по разному. Можно прописать ссылки вручную. Ищем наш блок навигации. Учитывая, что в первом ряду у нас будет изображение со скруглением, нам нужно вписывать информацию во вторую строку.
С правой стороны в шапке у нас находится панель навигации. Опять же, в каждом скрипте она реализована по своему. В DLE это тег {login}. Его мы и вписываем. Так же, добавляем нужные нам параметры и теги скрипта в соответствующие места.
Теперь у нас такой код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> {headers} <style type="text/css" media="all"> @import url(/templates/blog/css/style.css); </style> <style type="text/css" media="all"> @import url(/templates/blog/css/engine.css); </style> </head> <body> <center> <div style="padding-top: 29px"> <table width="900" border="0"> <tr> <td width="15"><img src="http://site.ru/theme/наше название.png" width="15" height="10" border="0"></td> <td width="100%" colspan="5" valign="top"></td> <td width="428"><img src="http://site.ru/theme/наше название.png" width="15" height="10" border="0"></td> </tr> <tr> <td width="15"></td> <td width="290" valign="top" align="left"><a href="http://site.ru"><img src="http://site.ru/theme/logo.png" width="200" height="100" border="0"></a></td> <td width="100%" colspan="4"></td> <td width="15"></td> </tr> <tr> <td width="15"></td> <td colspan="5" valign="bottom"><a href="http://раздел.ru"><img src="http://site.ru/theme/ваше имя.png" width="100" height="20" border="0"></a>&nbsp;<a href="http://раздел.ru"><img src="http://site.ru/theme/ваше имя.png" width="100" height="20" border="0"></a>&nbsp;<a href="http://раздел.ru"><img src="http://site.ru/theme/ваше имя.png" width="100" height="20" border="0"></a>&nbsp;<a href="http://раздел.ru"><img src="http://site.ru/theme/ваше имя.png" width="100" height="20" border="0"></a> <td width="100%"></td> </tr> <tr> <td width="15"></td> <td height="10" colspan="5"></td> <td width="15"></td> </tr> <tr> <td width="15"></td> <td width="250" align="left"><table width="250" border="0"> <tr> <td width="250"></td> <td width="10"></td> </tr> <tr> <td width="250" height="10"><a href="http://ваш_сайт/главная.html">Главная</a> <br /><a href="http://ваш_сайт/ваш_раздел/пример1.html">Пример1</a> <br /><a href="http://ваш_сайт/ваш_раздел/пример2.html">Пример2</a> <br /><a href="http://ваш_сайт/ваш_раздел/пример3.html">Пример3</a> </td> <td width="10"></td> </tr> </table></td> <td width="0"></td> <td width="250" align="left"><table width="250" border="0"> <tr> <td width="250">{content}</td> </tr> </table></td> <td width="0"></td> <td width="250" align="left"><table width="250" border="0"> <tr> <td width="10"></td> <td width="250"></td> </tr> <tr> <td width="10" height="10"></td> <td width="250">{login}</td> </tr> </table></td> <td width="15"></td> </tr> <tr> <td width="15"></td> <td width="100%" height="10" colspan="5"></td> <td width="15"></td> </tr> <tr> <td width="15"></td> <td width="250"><table width="250" border="0"> <tr> <td width="250"></td> <td width="10"></td> </tr> <tr> <td width="250" height="10">Ваши ссылки или навигация</td> <td width="10"></td> </tr> </table></td> <td width="250" colspan="3"></td> <td width="250"><table width="250" border="0"> <tr> <td width="10"></td> <td width="250"></td> </tr> <tr> <td width="10" height="10"></td> <td width="250">Ваша информация</td> </tr> </table></td> <td width="15"></td> </tr> <tr> <td width="15"></td> <td height="10" colspan="5" align="center">Копирайт</td> <td width="15"></td> </tr> <tr> <td width="15"></td> <td height="10" colspan="5"></td> <td width="15"></td> </tr> </table> </center> </body> </html>

И такой макет:
На этом наш дизайн практически сверстан. Если вы попробуете его загрузить, то увидите нечто непонятное, не то, что мы видим на изображении. Просто все дополнительные параметры оформления мы вынесем в файл .css, чтобы не перегружать наш код необходимыми нам параметрами. О CSS мы поговорим в следующих статьях, т.к. тема довольно объемная. Если есть какие-либо вопросы – пишите их в комментариях.
  • Выгодная ипотека на IRR. Пора приобретать жилье.
  • Даже во время кризиса есть работа. Большое количество разнообразных вакансий.

Уважаемые читатели! Если вы обнаружили в тексте ошибку, не поленитесь, выделите слово и нажмите CTRL+Enter. Сделаем язык чище!

  • +1
kotik
27 апреля 2009 22:58
avatar
Спасибо, скоро буду запускать проект на DLE, твой пост ой как пригодится!
  • 0
Легион
27 апреля 2009 23:01
avatar
Ну, тут для новичков посты. Могу помочь с более сложными вопросами.
  • 0
vladimir739
29 апреля 2009 09:28
avatar
Благодарю за акруальный материал. Жду продолжения. Очень интересно
  • 0
comments powered by Disqus

Ваше Имя:

Ваш E-Mail:

Или войтите с помощью социальных сетей

  • bowtiesmilelaughingblushsmileyrelaxedsmirk
    heart_eyeskissing_heartkissing_closed_eyesflushedrelievedsatisfiedgrin
    winkstuck_out_tongue_winking_eyestuck_out_tongue_closed_eyesgrinningkissingstuck_out_tonguesleeping
    worriedfrowninganguishedopen_mouthgrimacingconfusedhushed
    expressionlessunamusedsweat_smilesweatdisappointed_relievedwearypensive
    disappointedconfoundedfearfulcold_sweatperseverecrysob
    joyastonishedscreamtired_faceangryragetriumph
    sleepyyummasksunglassesdizzy_faceimpsmiling_imp
    neutral_faceno_mouthinnocent
  • Введите два слова, показанных на картинке: