Создание сайта. Верстка. Часть первая
Продолжим наши посты по поводу создания сайта, а если быть точнее, то по поводу верстки шаблона.
Итак, в прошлом посте мы выбрали изображение и разрезали его для нашего будущего дизайна.
Теперь, нам нужно сверстать дизайн с помощью .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({THEME}/css/style.css);
</style>
<style type="text/css" media="all">
@import url({THEME}/css/engine.css);
</style>
</head>
<body>
</body>
</html>Строчка
<style type="text/css" media="all"> @import url({THEME}/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({THEME}/css/style.css);
</style>
<style type="text/css" media="all">
@import url({THEME}/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">Нам нужно создать блоки для наших закругленных частей и для рамки. И ставим ссылки на наши части скругленных частей. Не забываем, что прежде нам нужно дать каждой части свое имя и и вписывать реальный размер изображения, т.к. в примере цифры не реальный. К тому же, у каждого дизайна будет абсолютно другим.
Наш код:
<!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({THEME}/css/style.css);
</style>
<style type="text/css" media="all">
@import url({THEME}/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({THEME}/css/style.css);
</style>
<style type="text/css" media="all">
@import url({THEME}/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>У нас получился такой код:
<!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({THEME}/css/style.css);
</style>
<style type="text/css" media="all">
@import url({THEME}/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({THEME}/css/style.css);
</style>
<style type="text/css" media="all">
@import url({THEME}/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> <a href="http://раздел.ru"><img src="http://site.ru/theme/ваше имя.png" width="100" height="20" border="0"></a> <a href="http://раздел.ru"><img src="http://site.ru/theme/ваше имя.png" width="100" height="20" border="0"></a> <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>Итог можно посмотреть тут:
Спецсимвол позволяет сделать отступ. Если вы не хотите отступа между кнопками – не ставьте данный спецсимвол.
Теперь нам нужно сделать небольшой отступ от прошлой колонки:
<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({THEME}/css/style.css);
</style>
<style type="text/css" media="all">
@import url({THEME}/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> <a href="http://раздел.ru"><img src="http://site.ru/theme/ваше имя.png" width="100" height="20" border="0"></a> <a href="http://раздел.ru"><img src="http://site.ru/theme/ваше имя.png" width="100" height="20" border="0"></a> <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>Вот такой макет у нас получился:
На сегодня закончу статью о верстке. В следующей статье продолжим верстку сайта.
- Только сегодня узнал, что такое эпиграммы. Советую почитать и весело провести время.
- Во время беременности вы можете с пользой проводить время, получая полезную информацию. Вы узнаете много вещей, которые помогут вам не только во время беременности, но и позже.
