верстка » Блог - Атомы Сознания

27апреля

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

Продолжим написание нашего кода.

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

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

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

26апреля

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

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

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

Теперь, нам нужно сверстать дизайн с помощью .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>

06марта

Обзор HTML редакторов

Прежде чем приступим к вёрстке сайта, нам нужно подобрать инструменты, которые помогут в этом. Конечно, многие деятели кричат, что HTML можно писать в блокноте, и я с ними полностью согласен. Но мы не будем копать котлован совочками. Давайте рассмотрим программы, которые помогут нам писать HTML и CSS. Итак, давайте приступим.

Самой знаменитой программой для написания сайта является Adobe Dreamweaver, который раньше был Micromedia Dreamweaver, и который выкупила Adobe (чуют ребята из Adobe, где пахнет деньгами).

Итак, Adobe Dreamweaver, на мой и не только взгляд, является одной из лучших программ по написанию кода. Поддерживает не только HTML и CSS, но и PHP, JAVA и многое другое. Ещё одним плюсом является то, что вы можете просмотреть свою работу в графическом режиме, а не только код. Так же программа проверяет валидность вашего кода. Отлично реализована возможность писать код. Вам достаточно написать начальные буквы тега, и программа выдаст вам возможное теги для вставки. Так же, программа сама закрывает нужный тег.