Базовые понятия
Несмотря на то, что термин «слой» достаточно устойчиво используется при разработке сайта, расшифровке этого понятия в литературе по сайтостроению практически не уделяется внимание. В дальнейшем мы будем активно использовать термин «слой», поэтому вначале необходимо определить, что же под ним подразумевается.
Первоначально слои ввела компания Netscape, включив в свой браузер поддержку тега <LAYER>. Этот тег позволял прятать/показывать текущее содержимое, устанавливать положение относительно окна браузера, накладывать один слой поверх других и загружать данные в содержимое слоя из файла. Что характерно, все эти параметры легко менялись с помощью JavaScript и это расширяло возможности по созданию действительно динамического контента на странице. Несмотря на столь впечатляющий набор возможностей, тег <LAYER> не был включен в спецификацию HTML и так и остался лишь расширением браузера Netscape.
Однако необходимость в указанных возможностях, которые бы применялись на сайтах, уже назрела, и в конце 1996 года синтаксис для работы со слоями был разработан и одобрен в рабочем проекте консорциума «CSS Positioning (CSS-P)». Основная нагрузка ложилась на стили, с их помощью можно управлять видом любого элемента, в том числе менять значения динамически через JavaScript. К сожалению, объектные модели браузеров для доступа к элементам разнились, поэтому приходилось писать достаточно сложный код, который бы учитывал эти различия.
В настоящее время разработчики популярных браузеров стали придерживаться спецификаций HTML и CSS, что сильно облегчило жизнь создателям сайтов, поскольку снизило время на отладку сайта в разных браузерах. Тем не менее, различия в подходах у браузеров существуют и при их возникновении разработчики придерживаются следующих форм работы.
- Если наблюдаются небольшие различия в отображении одного сайта в разных браузерах, то на эти отличия закрывают глаза. Попросту говоря, никак не исправляют. Здесь следует сделать оговорку, что сайт в любом случае должен отображаться корректно и без ошибок.
- Если у сайта имеются существенные различия при его показе в одном и другом браузере, то для их устранения применяют хаки.
Хак — это набор приемов, когда определенному браузеру «подсовывают» код, который понимается только этим браузером, а остальными игнорируется.
Несмотря на то, что хаки работают, использовать их следует ограниченно или вообще обходиться без них. Дело в том, что хаки снижают универсальность кода и для модификации параметров одного элемента приходится вносить изменения одновременно в разных местах.
Есть и другой, перспективный путь — придерживаться спецификации CSS. Несмотря на то, что браузеры не в полной мере сами ее поддерживают, они прогрессируют именно в этом направлении. А именно, полной поддержки различных спецификаций (HTML, CSS, DOM). Таким образом, получается, что будущие версии браузеров будут унифицированы и один и тот же сайт станут отображать корректно.
Снова вернемся к слоям. Понятно, что они непосредственно связаны со стилями. Раз так, то не получается ли, что каждый элемент HTML-кода, к которому добавляются стили, является слоем? В каком-то смысле так и есть. Однако это внесло бы изрядную путаницу, если вместо «таблица» или «параграф» мы бы говорили «слой». Поэтому договоримся относить этот термин только к тегам <DIV> и <SPAN>.
Слой — это элемент веб-страницы, созданный с помощью тега <DIV> или <SPAN>, к которому применяется стилевое оформление.
Таким образом, верстка с помощью слоев заключается в конструктивном использовании тегов <DIV> и стилей. При этом придерживаются следующих принципов.
Разделение содержимого и оформления
Код HTML должен содержать только теги разметки и теги логического форматирования, а любое оформление выносится за пределы кода в стили. Такой подход позволяет независимо управлять видом элементов страницы и ее содержимым. Благодаря этому над сайтом может работать несколько человек, при этом каждый выполняет свою функцию самостоятельно от других. Дизайнер, верстальщик и программист работают над своими задачами автономно, снижая время на разработку сайта.
Активное применение тега DIV
При использовании слоев существенное значение уделяется универсальному тегу <DIV>, который выполняет множество функций. Фактически это основа, на которую «навешиваются» стили, превращая ее то в игрушку, то в зверушку. Совершенно не значит, что применяется только один этот тег, нужно ведь и рисунки вставлять и оформлять текст. Но при верстке с помощью слоев тег <DIV> является кирпичиком верстки, ее базовым фундаментом.
Благодаря этому тегу HTML-код распадается на ряд четких наглядных блоков, за счет чего верстка слоями называется также блочной версткой. Код при этом получается более компактным, чем при табличной верстке, к тому же поисковые системы его лучше индексируют.
Таблицы применяются только для представления табличных данных
При верстке слоями, конечно же, используются таблицы, но только в тех случаях, когда они нужны, например, для наглядного отображения чисел и других табличных данных. Вариант, когда от таблиц предлагается отказаться вообще, является нецелесообразным и, более того, вредным.
Использование стилей не является обязательной характеристикой верстки слоями, и для табличной верстки стили могут применяться достаточно активно. Другое дело, что это становится стандартом де-факто и без стилей теперь никак не обойтись.
Резюме
Слой это базовый элемент верстки веб-страниц при которой активно применяются стили и придерживаются спецификаций HTML и CSS. При таком подходе важная роль уделяется тегу <DIV>, с которым у большинства людей и ассоциируются слои. В каком-то смысле это является верным, поэтому договоримся в дальнейшем употреблять термин «слой» к тегу <DIV> (<SPAN>) для которого указан стилевой идентификатор или класс. Таким образом, выражение «слой с именем content» подразумевает, что используется тег <div id=”content”> или <div class=”content”>.
Хотя современные браузеры более-менее корректно работают со стилями, иногда между ними возникают разногласия по поводу прочтения одного и того же кода. В подобных случаях веб-страница будет по-своему отображаться в разных браузерах. Чтобы этого не произошло, используют хаки — приемы, направленные на то, чтобы каждый браузер получил свой собственный код или стиль. Однако применение хаков при верстке считается плохим тоном, поэтому следует пользоваться ими лишь в крайних случаях или вообще обходиться без них.
| Статья опубликована: 16.01.2006 | Последнее обновление: 19.11.2007 |
Прежде, чем писать комментарий к статье, примите во внимание следующие моменты.
- Не задавайте вопросы в комментариях, для этой цели предназначен форум, где вы получите нужную помощь.
- Удаляются любые комментарии, которые:
- включают множество ошибок;
- написаны безграмотно;
- не имеют отношения к данной статье;
- не содержат никакой полезной информации для посетителей.
- Для выделения отдельных слов используйте следующие команды: [b]жирный[/b], [i]курсив[/i], [color=цвет]цветной текст[/color], [tag]тег[/tag], [var]параметр[/var], [code]пример[/code].
- Потренироваться в написании комментариев вы можете в песочнице.
Комментарии к статье
Nameless
19.09.2006
Хотя современные браузеры более-менее корректно работают со стилями, иногда между ними возникают разногласия по поводу прочтения одного и того же кода. В подобных случаях веб-страница будет по-своему отображаться в разных браузерах.
[/quote]
Особенно хорошо это видно при работе с Opera и Firefox(Mozilla). Проблема видна при использовании стилевых параметров обтекания(float) и параметра ширины (width)...
Sky
22.09.2006
Чаще всего после разработки сайта по стандартам приходится делать костыли для IE.
К сожалению, на многих сайтах исповедуют обратный подход - страница изначально пишется под IE, в результате чего в интернете полно сайтов, не соответствующих стандартам.
alx22001
23.09.2006
Влад Мержевич
25.09.2006
Александр Бублиенко
26.09.2006
а внизу сайта припишите, что-то типа, ИЕ-сакс, ФФ-руль...
Влад Мержевич
27.09.2006
Hanzo
02.10.2006
Александр Бублиенко
10.10.2006
Хм... Интересно, а если в експлорере Вашего заказчика, сверстанный Вами сайт, будет выглядеть как китайская грамота, Вы ему тоже будите говорить, чтобы он переходил на продвинутый, по Вашему мнению, броузер???
Я думаю, это не профессиональный подоход!
П.С. ничего личного...
Влад Мержевич
11.10.2006
Konstantin
12.10.2006
Влад Мержевич
13.10.2006
Vital
22.11.2006
CHuaCHa
23.11.2006
Во всем мире процент использования браузера Firefox вырос до 12,93 %, в Соединенных Штатах до 15,82 %, а в Германии показатель составляет 39,02 %. Австралийцы также любят Firefox, и он занимает 24,23 % австралийского рынка браузеров.
Процент использования Internet Explorer за последний месяц снизился с 80 % до 79,78 % в США, однако в мире он все еще занимает 83,05 % рынка. Британцы тоже отдают предпочтение IE, этот браузер занимает там 86,23 %.
Использование Opera равно 4,69 % в Австралии и более 1 % в Канаде и Германии. В мире Opera занимает лишь 1 % данного рынка, но показатель понемногу растет.
Браузер Safari компании Apple занимает третью позицию после IE и Firefox, занимая 1,84 % рынка браузеров в мире. В США, где сфокусирована основная деятельность Apple, Safari удерживает 3,28% рынка.
Druid
26.11.2006
Rudik
29.11.2006
Гораздо интереснее вопрос - почему IE не так хорош, как хотелось бы и клиентам и разработчикам? А отсюда и решение - на что же лучше ориентироваться - на плохой IE или хороший Firefox?
Причина недоработок IE, очевидно, не в скудости ресурсов Microsoft, и не в слабости их разработчиков. Стратегия!
В июне 2004 года Джоэл Спольски (работал в Microsoft более 3-х лет, участвовал в разработке Excel и других продуктов. Сайт www.joelonsoftware.com) писал : "Таким образом, переход на веб-интерфейс осуществлен уже процентов на 80, и даже до появления новых броузеров эта цифра может достичь 95%. Веб-интерфейса вполне хватает большинству людей, и это явно хорошая новость для разработчиков, которые продемонстрировали стремление разрабатывать почти любые существенные новые приложения в виде веб-приложений.
В результате вдруг обнаружилось, что API Microsoft не имеет такого большого значения. Веб-приложениям не нужна Windows.
Нельзя сказать, что в Microsoft не заметили происходящего. Конечно, заметили, и когда начали выясняться возможные последствия, они ударили по тормозам. Развитие многообещающих новых технологий типа HTA и DHTML было остановлено. Бригады Internet Explorer не видно: ОНА ПРОПАЛА БЕЗ ВЕСТИ НЕСКОЛЬКО ЛЕТ НАЗАД. Microsoft ЯВНО НЕ СОБИРАЕТСЯ ДОПУСТИТЬ, ЧТОБЫ DHTML СТАЛ ЕЩЕ ЛУЧШЕ, ЧЕМ ОН УЖЕ ЕСТЬ(выделено мной); это слишком опасно для их основного бизнеса, толстого клиента. В Microsoft сейчас ДЕЛАЮТ СТАВКУ НА ТОЛСТОГО КЛИЕНТА." (цитата из книги Джоэла Спольски "Джоэл о прграммировании", Изд. "Символ Плюс", Санкт-Петербург - Москва, 2006г.).
Изменилась ли стратегия Microsoft на сегодняшний день? Об этом знает только бог и ее руководители. Но в любом случае, имхо, Microsoft не уступит слишком много своего рынка в области веб-броузеров. Возможно, Microsoft просто делает нудную и неприбыльную работу по выявлению недостатков IE руками конкурентов? Возможно, конкуренты нужны и важны для последующего впечатляющего скачка на их фоне? Я с большой долей уверенности предполагаю, что довольно скоро IE подгонят под стандарты HTML, добавят новые возможности, сохранив при этом совместимость со старыми разработками. Но, главное сейчас то, что создаваемый ими новейший инструментарий для веб-разработок, ориентирован на IE. Поэтому и я буду на него ориентироваться. Тем более, что на моем предприятии все практические пользователи имеют только IE, но это так, к слову.
Влад Мержевич
29.11.2006
Rudik
30.11.2006
GreenDay
06.01.2007
Круглов Геннадий
12.01.2007
Влад Мержевич
15.01.2007
Андрей
17.01.2007
Мао
02.02.2007
Например, скрипт с веб-интерфейсом отсылает сообщение на почту. У меня все нормально работает, у товарища письма приходят в двух экземплярах. Замучился искать проблему в скрипте, дошел до выяснения браузеров. У меня Опера, у товарища IE7.
Оказалось надо было вместо submit использовать button в теге
<input type="button" name="send" value="Отправить" onclick="javascript:doAction(`mainform`,`send`);
, т.к. IE, встретив слово submit отправлял форму на сервер, а после запускает джаваскрипт, который после обработки тоже отсылает данные на сервер. В итоге процедура отсылки почты срабатывала дважды. Опера же делает только то, что записано в onclick, а если onclick не указано, отправляет форму на сервер, как положено submit.
frd
15.02.2007
Old Nick
28.02.2007
Old Nick
28.02.2007
Element
13.03.2007
}{aG@KyRe
17.04.2007
le chat
07.06.2007
alekciy
11.06.2007
>Слой - это элемент веб-страницы,
>созданный с помощью тега <DIV> или <SPAN>,
>к которому применяется стилевое оформление.
А? Создается впечатление, что справедливо выражение div==слой или span==слой. Что div и span это синонимы термина "слой". Но ведь это не так...
oddhead
15.06.2007
>Слой - это элемент веб-страницы,
>созданный с помощью тега <DIV> или <SPAN>,
>к которому применяется стилевое оформление.
>Слой - это тег <DIV> или <SPAN>,
>к которому применяется стилевое оформление.
Чуешь разницу? Буквы-то другие!
Влад Мержевич
19.06.2007
Антон Цветков
25.06.2007
По поводу meta-тегов - сегодня они как раз практически бесполезны, ибо игнорируются большинством поисковиков (в смысле параметры типа keywords).
проходил мимо
12.07.2007
xcr
31.07.2007
jangot
28.08.2007
Nemo
28.08.2007
Slon
04.09.2007
Niks
13.09.2007
Часто сталкивался с тем, что, например, забыл закрыть кавычку - Опера отображает вс? корректно, а "ос?л" вс? коверкает. Молчу уж про то как IE отображает стандартный код.
hozzzar
27.09.2007
Или круче, код этот вставлять в движок, чтобы он попадал в страницу случайным образом, так, чтобы ишак погибал не на одной странице, а случайным образом?
duncan
09.10.2007
lg
17.10.2007
Slon: respect
P.S. а здесь лучше б по теме поговорили....я вот никак не могу понять что такое "слой"...
Алан
21.10.2007
Алан
21.10.2007
homm
27.12.2007
Влад Мержевич
28.12.2007
На других сайтах пользователей IE бывает и 80%.
линуксоед
09.01.2008
Игорь
31.01.2008
Ал-др
22.02.2008
Игорь
14.03.2008
Лучше убить 2-3 часа вставляя костыли под ИЕ, чем пытатся что-то изменить.
МикрОсофт может и корова, но на рынке -- очень зубасая корова. И залажать сове детище на рынке принципиально не даст.
поэтому.. -- костыли наш профиль.
Dre@mWea?heR
02.05.2008
Не обрабатуется куча тегов.
Про что вы тогда тут говорите?
xexe
07.05.2008
Не обрабатуется куча тегов.
Про что вы тогда тут говорите?"
была у меня аналогичная трабла пока верстал черпая информацию по форумам и не понимая до дела что я вообще делаю, но после фтыкания в спецификации и прочтения пары приличных книг по свойствам css все пошло на лад. чаще всего получается сверстать страницу (среднюю), которая отлично отображается в ФФ и опере за 1-1.5 часа а потом столько же времени потратить на борьбу с самым "умным" броузером, который считает, что все неудачнеги а он один прально работает.
xexe
07.05.2008
Денис Унтевский
01.06.2008
Заранее спасибо!
kop
10.06.2008
Vio
20.06.2008
Timurco
19.07.2008
Slimmy
31.07.2008
2kop: +1
