Верстка страниц сайта — это процесс создания веб-страницы из макета дизайна, как правило, в формате PSD, с помощью кода соответствующего языка разметки (HTML, WML), так же состоящий из подключенных к ней стилей оформления (CSS) и подгружаемых скриптов (например, JavaScript) и объектов (например, Flash-анимация).
Блочная верстка создается благодаря семантическим конструкциям разметки, например, <div></div>. Принято считать, что разновидностей верстки три:
- Табличная верстка — верстка, построенная на таблицах
<table><tr><td>; - Блочная верстка — верстка в конструкции
<div></div>; - Смешанная — использование в верстке табличных и блочный конструкций в примерно равных пропорциях.
Некоторые выделяют еще один вид — css-верстка, т.е. верстка страницы с использованием CSS.
Различают верстку и по ширине страницы:
Фиксированная верстка — означает, что сверстанная страница
имеет одну заданную ширину, как правило, расположенную по центру при
большем разрешении экрана.
Резиновая верстка — когда сверстанная страница тянется по
ширине окна браузера, либо в заданных приделах, например, от 1024px до
1600px, либо не имеющая конечной ширины.
Кросс-браузерность — это корректное идентичное отображение
сверстанной страницы сайта в различных браузерах: Internet Explorer,
FireFox, Opera, Safari, Google Chrome и другие.
HTML-верстка
Итак, верстка страницы сайта начинается с оценки макета дизайна и выбора конструкции — модульной сетки, по которой будет верстаться страница. На модульных сетках останавливаться пока не будем, рассмотрим их позже, в новых статьях.
Далее, начинаем «нарезать» макет дизайна и выносим максимальное количество слоев в спрайты.
Готовим html-каркас или берем заранее приготовленный:
HTML код: Заранее приготовленный html-каркас.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Example</title>
</head>
<body>
<div class="header">...</div>
<div id="container">
<div class="aside left">...</div>
<div id="content">...</div>
<div id="aside right">...</div>
</div>
<div id="footer">...</div>
</body>
</html>
Далее, там где стоит многоточие «...», верстаем необходимые элементы
разметки в соответствии с дизайном. Например, шапка сайта — header у нас получится такая:
HTML код: Шапка сайта.
<div class="header">
<div id="logo">
<a href="/">Example</a>
</div>
<ul id="nav">
<li>
<a href="/about/">О нас</a>
</li>
<li>
<a href="/service/">Услуги</a>
</li>
<li>
<a href="/contact/">Контакты</a>
</li>
</ul>
</div>
Содержимое левого и правого блоков описывать не будем, дабы не
тратить время на разъяснения. В них может содержаться все что угодно,
начиная от меню каталога и заканчивая формами и баннерами.
В контенте — content, понятное дело, располагается контент, текстовый, графический, какой угодно. Начинать следует с заголовка h1, текст желательно выделять в параграфы p, и т.д. в соответствии с семантикой.
В нижней части сайта, так называемого подвала — footer, как правило, размещают копирайты, кнопки счетчиков, какие-либо ссылки на разделы.
О стилях оформления CSS поговорим чуть позже, отмечу только что их необходимо выносить в отдельный файл и размещать между тегами <head> и </head>:
HTML код: Вынос CSS в отдельный файл в спецификации xhtml.
<link rel="stylesheet" href="style.css" type="text/css" media="all" />
Гм.. что еще?
Несколько преимуществ блочной верстки
- Блочная верстка имеет более логичный семантический код;
- Блочная верстка имеет сравнительно небольшой вес, что способствует быстрой загрузке страницы;
- Блочная верстка позволяет отделить структуру от представления.
Ну и все, пожалуй, вкратце по азам пробежались. На этом спешу отклониться.
Спасибо за внимание.
| 
Главная 
