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

alt

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

Итак, в прошлом посте мы выбрали изображение и разрезали его для нашего будущего дизайна.

Теперь, нам нужно сверстать дизайн с помощью .html. Для удобства нам потребуется программа, которая поможет нам заниматься нашим делом. Обзор HTML-редакторов был в статье.

Итак, выбрав редактор, и почитав немного информацию из книг с прошлого поста, т.е. поняв принципы кода, можно начать верстать сайт.

Прочитав самоучители, мы узнали, что начало кода состоит из тегов DOCTYPE, html, head и body. Если первым тегом можно пренебречь, то html, head и body являются очень важными тегами.

Приступим к верстке. Пример будет на основе кода DLE. Разница будет только в тегах, которые рассчитаны для определенного движка. Например, для вывода контента, на DLE используется тег {content} (именно, в фигурных скобках), в то время, как в другом движке будет тег {post}. О операторах, используемых в выбранном вами движке, вы можете узнать из инструкции или просмотрев код первоначального дизайна.

Итак, наш начальный код:

<!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> </body> </html>

Строчка

<style type="text/css" media="all"> @import url(/templates/blog/css/style.css); </style>

показывает, местоположение нашего файла .css (о .css мы поговорим в следующей статье). Параметр {THEME}/css/style.css показывает, что файл .css находится в папка темы --> папка css --> название файла. Такая возможность существует не во всех движках, поэтому, если вы используете другой движок, вместо {THEME} пишем полный путь. Между тегом <head> и </head> находятся пути нахождения скриптов и файлов css.

Между тегом body мы пишем весь наш код.

Как вы видите, со всех сторон находится фон, а наш дизайн находится посредине. Для этого пишем код  <center></center>. Данный тег показывает, что наш дизайн будет находиться посредине окна. Но в этом случае, дизайн будет посредине окна, а все остальное будет белым фоном. Для того, чтобы фон вокруг дизайна был нужный нам, пишем код 

<div style="padding-top: 29px"></div>

.

Теперь нам нужно создать таблицу. Таблица создается тегом <table>. У каждого тега есть свои параметры, которые позволяют вам создать то, что вам нужно. Итак, создаем таблицу.

<table width="100%" border="0"></table>

Параметр width="100%" определяет, что наш дизайн будет резиновым, и на любом мониторе будет занимать все место. Если вам нужен фиксированный размер – ставим вместо 100% нужное нам число, например, 900. В этом случае, не смотря на размер монитора, дизайн будет составлять 900 пикселей.

Параметр border="0" показывает, что таблица не будет видимой. Если поставить 1, то таблица будет обрамлена рамкой толщиной в 1 пиксель. В зависимости от цифры будет и толщина рамки.

Что-то я ушел глубоко в изучение 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"> </table> </div> </center> </body> </html>

После

<table width="900" border="0">

ставим <tr></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 colspan="2" width="100%" valign="top"></td> <td width="15"><img src="http://site.ru/theme/наше название.png" width="15" height="10" border="0"></td> </tr> </table> </div> </center> </body> </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 colspan="2" width="100%" valign="top"></td> <td width="15"><img src="http://site.ru/theme/наше название.png" width="15" height="10" border="0"></td> </tr> <tr> <td width="15"></td> <td width="200" 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%" valign="top" align="left"></td> <td width="15"></td> </tr> </table> </div> </center> </body> </html>

Как видите, между тегом <tr></tr> появился тег <td> с параметрами. О значении параметров смотрите в самоучителе. Единственное, что скажу, это то, что первая ячейка у нас будет 200 пикселей (размер нашего логотипа), а вторая будет занимать все свободное место фоном, поэтому стоит параметр 100%.

Нам нужно, чтобы наш логотип при клике вел на главную страницу сайта. Для этого между тегами первой ячейки вставляем

<a href="http://site.ru"><img src="http://site.ru/theme/logo.png" width="200" height="100" border="0"></a>

. Надо учитывать, что размеры изображения должны соответствовать их реальному размеру, иначе дизайн получится кривой. Поэтому на 200 пикселей длины и 100 высоты не заостряйте внимание, а пишите свои реальные размеры, которые получились у вас.

У нас получился такой код:

<!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 colspan="2" width="100%" valign="top"></td> <td width="15"><img src="http://site.ru/theme/наше название.png" width="15" height="10" border="0"></td> </tr> <tr> <td width="15"></td> <td width="200" 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%" valign="top" align="left"></td> <td width="15"></td> </tr> </table> </div> </center> </body> </html>

А выглядит в таблице он так:

Дальше у нас идет панель навигации. Панель навигации может быть реализована как с помощью Java, так и просто с помощью кнопок. Мы не будем рассматривать для данного сайта никаких дополнений, кроме чистых возможностей скрипта (и то не всех). Для каждой части навигации можно сделать отдельную ячейку или выставить кнопки вряд. Мы воспользуемся вторым способом.

<!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 colspan="2" width="100%" valign="top"></td> <td width="15"><img src="http://site.ru/theme/наше название.png" width="15" height="10" border="0"></td> </tr> <tr> <td width="15"></td> <td width="200" 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%" valign="top" align="left"></td> <td width="15"></td> </tr> <tr> <td width="15"></td> <td width="700" colspan="2" 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="15"></td> </tr> </table> </div> </center> </body> </html>

Итог можно посмотреть тут:

Спецсимвол &nbsp; позволяет сделать отступ. Если вы не хотите отступа между кнопками – не ставьте данный спецсимвол.
Теперь нам нужно сделать небольшой отступ от прошлой колонки:

<tr> <td width="15"></td> <td width="100%" height="10" colspan="2"></td> <td width="15"></td> </tr>

Продолжаем доделывать шапку.  Нам нужно сделать еще семь колонок в ряду. Как видите, блок с информацией скруглен снизу. Если вы сделаете его прямоугольным, то можно лишь сделать одну ячейку, но делать мы будем скругленную, поэтому нужно в ячейку (td) поместить таблицу (table).

<tr> <td width="15"></td> <td width="290" align="left"><table width="290" border="0"> <tr> <td width="280"></td> <td width="10"></td> </tr> <tr> <td width="280" height="10"></td> <td width="10"></td> </tr> </table></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="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> </table> </div> </center> </body> </html>

Вот такой макет у нас получился:

На сегодня закончу статью о верстке. В следующей статье продолжим верстку сайта.

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

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

  • 0
makisiki1
27 апреля 2009 08:55
avatar
Благодарю за акруальный материал. Жду продолжения. Сайт радует
  • 0
Кудрявцев Сергей
27 апреля 2009 17:03
avatar
Хороший материал - для нубов очень даже познавательно!
Пишите больше :)
  • 0
жесть
5 мая 2009 13:34
avatar
это трудно назвать версткой... я понимаю статья для новичков. так зачем же БУДУЩИХ специалистов посвящать в допотопные методы верстки?? Это только усложнит процесс обучения! Вообщем незачЁт!
  • 0
Легион
5 мая 2009 14:45
avatar
жесть, а что вы называете версткой? DIV'ы? А вот я это убожество не считаю за верстку. Куча ограничений под дизайн? Ради интереса сравнивал код на div'ах и мой - по размеру не отличаются. Зато проще заставить новичков полгода разбираться в CSS2, 3 уже на подходе. Захотят - проще будет перейти на когда будут уже что-то уметь и понимать, а не захламлять голову непонятно чем.

К тому же, нужно учесть, что верстка делается на DLE, а на нем дополнительные блоки прописываются вручную.

Вы еще предложите функции через PHP написать. Очень даже возможно.
  • 0
Богдан
24 июля 2009 15:39
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
  • Введите два слова, показанных на картинке: