Преимущества и недостатки разных типов верстки

На предыдущей странице мы выделили три типа разбиения страниц сайта на блоки - верстка с использованием фреймов, табличная верстка и блочная верстка (или верстка слоями). Здесь поговорим о том, какими преимуществами и недостатками обладают эти способы.

Фреймы

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

Сайты, построенные таким методом, до сих пор встречаются на просторах Интернета. Только смотрятся такие сайты как-то не современно. Впрочем, не хуже, чем страничка, на которой вы сейчас находитесь, в чем вы можете убедиться, перейдя по этой ссылке. Там вы увидите ту же самую страничку, оформленную с помощью фреймов. Если посмотрите исходный код этой странички, вы не увидите собственно текста. Исходный код набора фреймов (frameset) определяет только окна, в которые выводятся файлы с содержимым. Каждое окно имеет все свойства окна браузера, в частности, свою полосу прокрутки, с каждым окном можно работать независимо от остальных окон. И файлы, выводимые в эти окна, оформлены по всем правилам HTML, имеют заголовок, тело и так далее.

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

Табличная вёрстка при создании Интернет страничек

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

Преимущества таблиц

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

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

"Склейка" изображений. Рисунки часто разрезают на отдельные фрагменты, а затем собирают их вновь в одно целое, выкидывая одни фрагменты или заменяя их другими изображениями. Это требуется для различных дизайнерских изысков вроде создания эффекта перекатывания, анимации или уменьшения объема файлов. Таблицы позволяют легко обеспечить «склейку» нескольких рисунков в одно изображение. Каждая картинка помещается в определенную ячейку, параметры таблицы при этом устанавливаются такими, чтобы не возникло стыков между отдельными ячейками.

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

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

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

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

Недостатки таблиц

Долгая загрузка. Особенность таблиц такова, что пока последнее слово в самом низу таблицы не загрузится, на экране содержимое ячеек отображаться не будет. Браузеры используют такой подход, чтобы получить всю информацию о таблице для правильного форматирования ее содержимого. Но если таблица велика по высоте, может пройти достаточно много времени, прежде чем мы увидим нужную информацию. Существуют и способы обхода этого свойства, в частности, разбиение одной большой таблицы на несколько таблиц поменьше, а также использование стилевого свойства table-layout.

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

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

Затруднено разделение содержимого и оформления. В идеале HTML-код должен содержать только теги с указанием стилевого класса или идентификатора. А все оформление вроде цвета текста и положения элемента выносится в CSS и модифицируется отдельно. Такое разделение позволяет независимо править код страницы и менять вид отдельных ее элементов. Хотя к таблицам стиль легко добавляется, но обилие «лишних» тегов не позволяет действительно просто и удобно управлять видом отдельных компонентов страницы. К тому же не все параметры таблиц имеют свой стилевой синоним, поэтому в любом случае приходится обращаться к коду веб-страницы и править его.

Несоответствие стандартам. В последнее время стандарты HTML и CSS прочно засели в умах веб-разработчиков. Этому способствует развитие XHTML и XML, которые более «жестко» относятся к коду документа, появление новых версий браузеров, придерживающихся спецификации, и мода на верстку слоями. Что же говорит спецификация относительно таблиц? А говорит она, что таблицы в первую и последнюю очередь нужны для размещения табличных данных. Все остальные способы использования таблиц осуждаются.

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

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

Применение таблиц для верстки

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

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

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

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

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

Блочная верстка (верстка слоями)

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

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

Преимущества и недостатки блочной верстки

  • Блочная верстка отлично связывается со стилями. Все свойства блоков задаются в таблице стилей, что позволяет более полно реализовать принцип разделения содержимого и оформления. Код при этом получается более компактным, чем при табличной верстке, к тому же поисковые системы его лучше индексируют.
  • Слои-блоки можно накладывать друг на друга, что облегчает расположение элементов на веб-странице.
  • Более быстрая загрузка страниц с блочной версткой по сравнению со страницами табличной верстки.
  • Возможность расположения в коде значимых слоев (например, с текстовым содержимым) перед другими слоями, которые визуально находятся на странице выше значимого слоя. Это свойство облегчает индексацию страниц с блочной версткой поисковыми роботами.

Есть у блочной верстки и свои отрицательные стороны. При ее применении труднее обеспечить одинаковый вид страниц в разных браузерах, поскольку не все браузеры в равной мере придерживаются спецификаций и стандартов. Но браузеры прогрессируют в направлении полной поддержки различных спецификаций (HTML, CSS, DOM), так что есть надежда, что будущие версии браузеров будут унифицированы и один и тот же сайт станут отображать одинаково корректно.

Полезные ресурсы

Загляните на досуге

маршрут санкт-петербург - могилёв на карте

Счетчики

Рейтинг@Mail.ru

LiveInternet

Rambler's Top100