В прошлой заметке мы с вами, в общем, познакомились, что такое верстка. С ее помощью можно размещать элементы веб-страницы (текст, рисунки, и.т.д.) там, где это нам будет нужно, чтобы информация комфортно воспринималась.
Но, каким образом мы можем верстать веб-страницы? Какие для этого существуют методы и способы. Давайте сейчас попробуем разобраться в этом вопросе.
Давайте рассмотрим самый простой пример. Допустим, нам нужно разместить текст в две колонки.
Как вы думаете, как это делается?
Могу сразу сказать, чтобы вы время не теряли, специального тэга или свойства CSS, чтобы написать одну строчку кода и получить результат, для этой цели пока не придумали. Поэтому веб-мастерам приходится всяческими способами выкручиваться и придумывать разные трюки.
На сегодняшний день известно всего несколько основных способов (трюков) для верстки сайта. Давайте их сейчас рассмотрим, и я постараюсь объяснить на каком из них лучше всего остановиться, и почему это стоит сделать.
1 способ. Табличная верстка.
Любая таблица имеет ячейки. Если мы будем в этих ячейках располагать элементы веб-страницы, то сможем получить достаточно интересные макеты сайтов.
Давайте посмотрим, как можно решить нашу задачку (расположение текста в две колонки) с помощью табличной верстки.
Для этого нам понадобиться таблица, которая содержит 1 строку и 2 столбца. Вот какой html-код можно для этого написать:
<table width="700" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="padding:10px; font:Georgia, ‘Times New Roman’, Times, serif; font-size:14px; background:#FFFFBD;"><p>Что такое верстка сайта, мы с вами уже разобрались. С ее помощью можно размещать элементы веб-страницы (текст, рисунки, и.т.д.) там, где это нам будет нужно, чтобы информация комфортно воспринималась.</p></td>
<td style="padding:10px; font:Georgia, ‘Times New Roman’, Times, serif; font-size:14px; background:#C3D9FF;"><p>На сегодняшний день известно всего несколько основных способов (трюков) для верстки сайта. Давайте их сейчас рассмотрим, и я постараюсь объяснить на каком из них лучше всего нам остановиться, и почему это стоит сделать.</p></td>
</tr>
</table>
И мы получим нужный нам результат.
Можете посмотреть на исходный код любого сайта с табличной версткой, и вы заметите, что все содержание размещается в обычной табличной структуре
<table>
<tr>
<td>
</td>
</tr>
</table>
Но, если попытаться сейчас найти шаблоны сайтов на основе табличной верстки, то это будет сделать не легко. На сегодняшний день все меньше и меньше профессиональных сайтов делаются на таблицах.
Почему?
Есть несколько причин на такое положение дел. Вот некоторые из них.
1) Как вы понимаете, сами по себе таблицы изначально не были рассчитаны на верстку сайтов. Их основное назначение размещение табличных данных (прайс листов, статистики и.т.д.)
Хотя бы только этот факт уже лишает их необходимой функциональности.
2) Страницы, которые были сверстаны с помощью таблиц, содержат много html-кода и соответственно долго грузятся и занимают много места на жестком диске.
3) Ориентироваться в табличной верстке достаточно трудно. Можно запутаться в этих <tr> и <td>
4) Если вы решите внести изменения в дизайн страницы, например из двух колоночной верстки сделать трехколоночную, то придется переписать очень много кода.
Учитывая все эти недостатки табличной верстки и с развитием технологий CSS, многие стали переходить на новый способ верстки, который называется блочная верстка.
Блочная верстка.
Сначала давайте разберемся с основным понятием.
Что такое блок?
Под этим понятием понимается прямоугольная область на веб-странице, которая имеет внешние, внутренние отступы, рамку и содержимое.
Что, к примеру, может быть блоком? Блок это абзац <p>, цитаты <blockquote>, ссылка <a>, форма <form> и.т.д. Но блок, который не несет в себе никакой специальной функции и предназначен специально для верстки сайтов, это блок <div>. Чаще всего мы будем работать именно с ним.
Возможно, вы его встречали или даже работали:
<div>Содержимое</div>
Давайте рассмотрим простой пример, и на нем я покажу вам, как на самом деле выглядят блоки.
Вот код примера:
<body style="background:#EEEEEE;">
<div style="background:#C3D9FF; width:500px; height:100px; border:5px solid #99CC66; font: 14px Georgia, ‘Times New Roman’, Times, serif; padding:15px; margin:15px;">
Содержимое
</div>
</body>
Вот снимок результата, который получился, прямо в окне браузера.
Как вы видите, задав тэгу div определенные стили CSS, мы получили ту самую прямоугольную область, блок. На этом изображении мы можем увидеть те самые составные части, которые есть у любого блока, это:
Внешний отступ – margin:15px; ( в нашем примере)
Внутренний отступ – padding:15px;
Граница – border:5px solid #99CC66;
Из таких частей и состоит любой блок.
Как проверить, является ли тэг блоком? Для этого нужно просто задать ему стили CSS margin, padding, border, если он на них реагирует, значит этот элемент блок.
Но, в отличии от остальных элементов веб-страницы (абзацев, форм и.т.д.), тэг <div> не привязан к своему содержанию. Т.е. ему все равно, что в себе содержать, пусть это будет графика, текст или еще что-нибудь.
Основное назначение этого тэга – разбиение веб-страницы на функциональные части (заголовок, содержание, нижняя часть и.т.д.), но об этом мы поговорим позже.
Стили CSS позволяют нам очень гибко настраивать внешний вид и местоположение блока на веб-странице. Благодаря этому и стал возможен способ верстки – блочная верстка.
Сейчас практически все современные сайты используют блочную верстку. Зайдите на любой сайт с шаблонами для сайтов (хотя бы на этот http://free-templates.ru) и вы обнаружите, что они сделаны именно на блочной верстке.
Если хотите посмотреть, как выглядит сайт построенный на блочной верстке, то я могу вам предложить один пример.
http://www.bravoo.net/csskyrs/add/modernclassic.zip
Можете посмотреть его исходный код и общее представление о блочной верстке вы уже получите.
Как вы думает, почему все современные сайты перешли именно на блочную верстку? Должна быть веская причина на это. Я бы сказал, что их даже несколько:
1) Код, написанный с помощью блочной верстки, гораздо легче для понимания, чем код табличной верстки.
2) Сайты занимают меньше места и грузятся быстрее
3) Их легко переделать, такие сайты очень гибкие. Изменив всего несколько строк кода можно из двух колонок сделать одну или три.
4) Содержание и оформление (дизайн, представление) информации отделены друг от друга. За содержание отвечает html, а за оформление css.
5) Сайты сделанные с помощью CSS отвечают современным стандартам. Это дает вам определенную гарантию, что они будут правильно и хорошо смотреться во всех современных браузерах.
В конце концов, очень важно шагать в ногу с современными тенденциями развития веб-дизайна. Если стоять на месте, то ничего добиться и не удастся.
Фреймы.
Есть еще один вид верстки, который раньше широко использовался, а теперь встречается очень редко. Эта верстка основана на использовании фреймов.
Что такое фреймы?
Если перевести это слово с английского языка, то frame – это кадр или окно.
Благодаря фреймам мы можем открывать на одной веб-странице сразу несколько веб-документов.
Допустим, что у нас есть несколько html-страничек (menu.html, logo.html, content.html), каждая из которых содержит определенную информацию. Теперь можно создать главную страницу (index.html) и с помощью фреймов разместить в ней сразу все документы. Конечный результат будет выглядеть примерно вот так:
Таким образом, вы можете видеть, что на одной странице index.html с помощью фреймов, поместились сразу же три html-документа (menu.html, logo.html, content.html).
По сути, фрейм – это отдельная, полноценная веб-страница.
Но почему же фреймы на данный момент применяют очень редко? Оказывается, у них есть ряд недостатков. Вот некоторые из них:
1. Дело в том, что не все браузеры «правильно» понимают страницу с фреймами и в каждом из них она может выглядеть по-разному.
2. Каждый фрейм представляет собой отдельную HTML-страницу. Поэтому, чтобы загрузить все фреймы у пользователя уйдет намного больше времени, чем, если бы загружалась одна страница.
3. Когда используются фреймы, теряется исходный дизайн страницы за счет разделительных полос между ними.
4. В большинстве ситуаций фреймы можно заменить таблицами или CSS. Написать код для таблицы или для CSS намного проще, чем для фрейма и файлов в конечном итоге получиться намного меньше.
5. Рабочая область будет выглядеть слишком сложно и у некоторых пользователей наверняка возникнут трудности при сохранении на жесткий диск самой страницы. Дело в том, что сохранять нужно каждый фрейм по отдельности.
Вот такие основные способы верстки сайтов существуют на сегодняшний день. Мне бы хотелось порекомендовать вам именно блочный способ верстки и в ближайшее время я собираюсь уделить этому методу больше внимания.
P.S 2. Разместите эту заметку у себя на сайте со ссылкой на мой блог http://www.dimachen.info и получите обратную ссылку на Ваш сайт в разделе «Информационный спонсор».
Информационный спонсор:
1. http://design-lessons.com.ua
2. Здесь может быть ссылка на Ваш сайт.
