Блочная верстка | Урок 1

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

Итак, приступим:

Что есть такое блочная верстка и с чем ее едят? Ранее сайты верстали

при помощи таблиц. Каждый элемент страницы — заголовок, текст, картинка — располагался в собственной ячейке, ячейки кучно роились в других, более крупных ячейках, те в свою очередь лежали в главной ячейке, сиречь самой странице сайта.

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

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

Блочная верстка позволяет обойтись без жесткой конструкции табличной сетки. Принцип тут простой: каждый элемент страницы, будь то картинка, кусок текста (абзац), табличка, список и пр. называется блоком. Блоки, как кирпичики, располагаются на странице в режиме "естественного потока". Это как будто вы пишете письмо, и как только строка кончается, то переходите на следующую. Монитор — это тоже своеобразная "страница". Содержимое сайта на мониторе так же "раскладывается" слева на право и сверху вниз по-порядку.

У блоков есть одна интересная особенность: каждый из них считает, что недостойно находиться на одной горизонтали (читай — строке) с другим блоком. Поэтому по-умолчанию блоки всегда располагаются один под другим. Это умолчание можно подкорректировать и расположить несколько блоков на одной линии. Но об этом чуток попозже.

То есть, мы не делим пространство веб-страницы на ячейки как в табличной верстке, а словно бы складываем в коробочку все элементы. В этой самой "коробочке" они плотно укладываются один к другому. В результате мы избавляемся от скелета, а стало быть, и от массы ненужного кода. Для сравнения: к огда я сверстал свою самую первую веб-страницу, используя таблицы, а потом переделал в блочный вариант, то вес кода уменьшился ровно в 4 раза. Да и разбираться в нем стало намного проще.

Что же такое этот самый блок? Блок — это обычная прямоугольная область, обладающая рядом свойств, таких как: рамка, поля и отступы. Содержимым блока может быть что угодно — кусок текста, картинка, список, форма для заполнения, меню навигации и т.п.

 

Рамка (border) — это контур, для которого можно задать такие характеристики как толщина, цвет и тип (пунктирная, сплошная, точечная).Поля (padding) — отделяют содержимое блока от его рамки, чтобы текст, например, не был “впритык” к стенкам блока.Отступы (margin) — это пустое пространство между различными блоками, позволяющее на заданном расстоянии расположить два блока относительно друг друга.

Из картинки видно, что внутреннее содержимое, например кусок текста, всегда имеет рамку. Она может быть как видима, так и невидима. В последнем случае у нее просто толщина равна нулю. Сам текст может как иметь поля (расстояние от рамки), так и не иметь их. В свою очередь, рамка тоже может иметь отступы от других таких же блоков, или прижиматься к ним плотно. Это позволяет гибко регулировать размещение блоков на странице, задавая цифровые значения отступам и полям.

 

Тэг

Тэг — это особая конструкция языка HTML. Можно сказать — буква алфавита. Различают открывающий и закрывающий тэги. В самом простом случае тэг — это как деталь детского конструктора, которая имеет своё строгое предназначение: планка — значит планка, колесо — значит колесо и ничто иное. К примеру, тэг абзаца:

<p>Текст абзаца.</p>

всегда обозначается буквой “p” и никак иначе.

Тэги всегда заключены в угловые скобки. Как видно из примера, наличествуют как открывающий тэг, так и закрывающий. У последнего перед именем добавлен “слэш/ — косая черта, наклоненная вправо. Для самых любознательных: данный значок расположен на клаве во втором ряду снизу справа в английской раскладке, а не во втором сверху в русской. Сверху — это совершенно другой знак, хотя и похож.

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

<img src="/images/risunok.jpg" alt="" />

 

Тэг div

В отличии от строгих привязок стандартных HTML-тэгов к своему содержимому (”р” — к абзацам, “а” — к ссылкам, “img” — к изображениям), тэг div является по-сути нейтральным. То есть ему всё равно что содержать, хоть всё разом. Его используют для задания функциональных областей на странице, таких как: “шапка” (header), блок навигации, блок основного содержимого, “футер” (footer) или подвал по-нашему.

У данного тэга, как и у любого другого, имеются свои собственные атрибуты.

Атрибут — описательная характеристика тэга. То есть, что он может делать и каким образом. Например, опять же возьмём тэг изображения:<img src="/images/risunok.jpg" width="200px" height="50px"alt="Рисунок меня, где я кормлю собаку, а она кусает меня зачем-то" />

 

В данном случае src, width, height, alt являются атрибутами тэга. В кавычках (и это тоже обязательное требование современных стандартов) даны значения атрибутов. Расшифровать такую запись несложно. Тэг указывает, что в данном месте страницы нужно прилепить изображение risunok.jpg из папки images, шириной 200 пикселей, высотой 50 пикселей.

И еще добавлен альтернативный текст, который всплывает на страничке при наведении мышки на рисунок. Это не блажь, а тоже необходимое требование. Не все пользователи сети обладают хорошим зрением. Кто-то пользуется программой распознавания и чтения текста. А кто-то просто выключает показ картинок в браузере. Вот для них и существуют альтернативные подписи к рисункам. Если же их нет смысла подписывать (например маркер списка или стрелка какая), то у атрибута alt оставляют пустое место — alt="".

Итак, атибуты тэга div. Наиболее часто используют два вида:

id — атрибут, позволяющий придать тегу уникальное значение, то есть такое, которое на странице используется только один раз. Например “header” (про кавычки не забываем), или “footer“. Таким образом мы сможем задать затем в листе стилей для тэга div с атрибутом id и значением “header” (шапка) одни настройки, а для подвала “footer” совсем другие, и браузер верно распознает, что вот этот абзац, обозначенный тэгом <р>

относится к “шапке” и будет набран крупным и красным шрифтом, а вот этот к “подвалу” и будет мелким и серым. И никакой путаницы!

class — атрибут, позволяющий одно и то же значение придать нескольким элементам. Например всем изображениям на странице добавить рамку одинаковой толщины и цвета. Так как изображений несколько, то атрибут id уже нельзя использовать.

Добавить комментарий


Защитный код
Обновить

Комментарии

Реклама