› › WEB-технологии.Верстка с помощью слоев. Способ верстки слоями

WEB-технологии.Верстка с помощью слоев. Способ верстки слоями

Раньше считалось, что верстать сайт необходимо в основном с помощью фреймов и таблиц. Однако с развитием веб технологий и выходом более современных браузеров, появились и другие способы вёрстки страниц. Так, например, самые неограниченные возможности верстальщики получили благодаря вёрстке с помощью слоёв. Данный тип создания сайта по принципу напоминает слои в программе Photoshop.Однако сейчас всё ещё идёт спор между веб-мастерами, какой тип вёрстки выбрать, слоями или же таблицами, причём как у первой стороны, так и у другой есть свои защитные стороны. Вёрстка же фреймами сразу уходит назад, так как имеет более грубый вид и громоздкость. Главным преимуществом таблиц, отчего многие (особенно начинающие мастера) и не хотят от них отказываться, является простота освоения. А чем же отличается вёрста слоями и какие есть у неё преимущества?

Сами по себе слои – это элементы кода HTML, которые размещаются на странице сайта через размещение друг над другом, причём делается это с точностью до одного пикселя. Все изменения можно внести в параметры любого слоя с помощью языков JavaScript и VBScipt, что даёт возможность разработчикам добавлять на свои сайты всевозможные эффекты, присущие данным языка программирования, например, плавание, вращение, выпадение меню и прочие эффекты. Каждый слой задаётся специальным контейнером Layer, а позиционирование слоя делается благодаря атрибутам top, left и z-index.

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

Однако есть у слоёв и свои недостатки, которые для кого-то будут более существенны или менее. Так, например, для данного вида вёрстки необходимо знать такие технологии и языки программирования, как JavaScript, VBScipt, а также CSS. Также проблема и в редактировании – страницы, свёрстанные слоями сложно править в графических редакторах html. Кроме того, браузеры по-разному отображают сайты, свёрстанные с помощью слоёв, однако при замене тега Layer на Div, можно избежать ряда проблем с отображением.

Таим образом, слои предоставят огромное количество возможностей тем веб-мастерам, кто способен справиться с трудностями их воплощения с помощью языков программирования. Однако не смотря на широкие возможности, до сих пор не было достигнуто единого консенсуса различными браузерами в отображении свёрстанных слоями сайтов, из-за чего один и тот же ресурс может по-разному смотреться, например в IE и в Opera. Но если в будущем эти разногласия уйдут, то именно слои станут передовой технологией создания веб-ресурсов.

P.S. Если вы уже создали свой сайт, то вам потребуется глубокий анализ сайта (аудит). Эту услугу вам предоставит сервис http://sitepolice.ru/e-store/audit-saita/ . Аудит сайта поможет вам выявить все недостатки и недоработки вашего Интернет-проекта.

Не смотря на то, что слои - это не таблицы

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

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

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

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

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

Расположение колонок при верстке слоями

Содержание контейнеров

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

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

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

Первоначально слои ввела компания Netscape, включив в свой браузер поддержку тега . Этот тег позволял прятать/показывать текущее содержимое, устанавливать положение относительно окна браузера, накладывать один слой поверх других и загружать данные в содержимое слоя из файла. Что характерно, все эти параметры легко менялись с помощью JavaScript и это расширяло возможности по

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

расширением браузера Netscape.

Однако необходимость в указанных возможностях, которые бы применялись на сайтах, уже назрела, и в конце 1996 года синтаксис для работы со слоями был разработан и одобрен в рабочем проекте консорциума «CSS Positioning (CSS-P)». Основная нагрузка ложилась на стили, с их помощью можно управлять видом любого элемента, в том числе менять значения динамически через JavaScript. К сожалению, объектные модели браузеров для доступа к элементам разнились, поэтому приходилось писать достаточно сложный код, который бы учитывал эти различия.

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

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

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

Хак - это набор приемов, когда определенному браузеру «подсовывают» код, который понимается только этим браузером, а остальными игнорируется.

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

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

Снова вернемся к слоям. Понятно, что они непосредственно связаны со стилями. Раз так, то не получается ли, что каждый элемент HTML-кода, к которому добавляются стили, является слоем? В каком-то смысле так и есть. Однако это внесло бы изрядную путаницу, если вместо «таблица» или «абзац» мы бы говорили «слой». Поэтому договоримся относить этот термин только к тегам

.

Слой - это элемент веб-страницы, созданный с помощью тега

, к которому применяется стилевое оформление.

Таким образом, вёрстка с помощью слоёв заключается в конструктивном использовании тегов

и стилей. При этом придерживаются следующих принципов.

Разделение содержимого и оформления

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

Активное применение тега

При использовании слоев существенное значение уделяется универсальному тегу

, который выполняет множество функций. Фактически это основа, на которую «навешиваются» стили, превращая её то в игрушку, то в зверушку. Совершенно не значит, что применяется только один этот тег, нужно ведь и рисунки вставлять и оформлять текст. Но при вёрстке с помощью слоёв тег
является кирпичиком вёрстки, её базовым фундаментом.

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

Таблицы применяются только для представления табличных данных

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

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

Подвём итоги. Слой это базовый элемент вёрстки веб-страниц при которой активно применяются стили и придерживаются спецификаций HTML и CSS. При таком подходе важная роль уделяется тегу

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

подразумевает, что используется тег

или
.

Блочная модель

Любой блочный элемент состоит из набора свойств, подобно капустным листам накладываемых друг на друга. Основой блока выступает его контент (это может быть текст, изображение и др.), ширина которого задается свойством width , а высота черезheight ; вокруг контента идут поля (padding ), они создают пустое пространство от контента до внутреннего края границ; затем идут собственно сами границы (border ) и завершают блок отступы (margin ), невидимое пустое пространство от внешнего края границ. Порядок влияния этих свойств на блок четко определён и не может быть нарушен. На рис. 3.1 показан блок в виде набора этих свойств.

Рис. 3.1. Свойства, формирующие блочный элемент

Для наглядности свойства блока можно представить в виде матрёшек (рис. 3.2). Любую маленькую матрёшку можно вставить в более крупную матрёшку, но никак не наоборот.

Рис. 3.2. Матрёшки

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

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

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

Пример 3.1.Использование свойства padding

Поля