Лабораторная работа 9
Работа добавлена на сайт samzan.net:
ЯЗЫК ГИПЕРТЕКСТОВОЙ РАЗМЕТКИ – HTML-2009
ВЕРСТКА С ПОМОЩЬЮ СЛОЕВ
Лабораторная работа 9.1.
1. Базовые понятия
Первоначально слои ввела компания Netscape, включив в свой браузер поддержку тега <LAYER>. Этот тег позволял прятать/показывать текущее содержимое, устанавливать положение относительно окна браузера, накладывать один слой поверх других и загружать данные в содержимое слоя из файла. Что характерно, все эти параметры легко менялись с помощью JavaScript и это расширяло возможности по созданию действительно динамического контента на странице. Несмотря на столь впечатляющий набор возможностей, тег <LAYER> не был включен в спецификацию HTML и так и остался лишь расширением браузера Netscape.
Однако необходимость в указанных возможностях, которые бы применялись на сайтах, уже назрела, и в конце 1996 года синтаксис для работы со слоями был разработан и одобрен в рабочем проекте консорциума “CSS Positioning (CSS-P)”. Основная нагрузка ложилась на стили, с их помощью можно управлять видом любого элемента, в том числе менять значения динамически через JavaScript. К сожалению, объектные модели браузеров для доступа к элементам разнились, поэтому приходилось писать достаточно сложный код, который бы учитывал эти различия.
В настоящее время разработчики популярных браузеров стали придерживаться спецификаций HTML и CSS, что сильно облегчило жизнь создателям сайтов, поскольку снизило время на отладку сайта в разных браузерах.
Снова вернемся к слоям. Понятно, что они непосредственно связаны со стилями. Раз так, то не получается ли, что каждый элемент HTML-кода, к которому добавляются стили, является слоем? В каком-то смысле так и есть. Однако это внесло бы изрядную путаницу, если вместо “таблица” или “параграф” мы бы говорили “слой”. Поэтому договоримся относить этот термин только к тегам <DIV> или <SPAN>.
Слой - это элемент веб-страницы, созданный с помощью тега <DIV> или <SPAN>, к которому применяется стилевое оформление.
Таким образом, верстка с помощью слоев заключается в конструктивном использовании тегов <DIV> и стилей. При этом придерживаются следующих принципов:
1. Разделение содержимого и оформления
Код HTML должен содержать только теги разметки и теги логического форматирования, а любое оформление выносится за пределы кода в стили. Такой подход позволяет независимо управлять видом элементов страницы и ее содержимым. Благодаря этому над сайтом может работать несколько человек, при этом каждый выполняет свою функцию самостоятельно от других. Дизайнер, верстальщик и программист работают над своими задачами автономно, снижая время на разработку сайта.
2. Активное применение тега DIV
При использовании слоев существенное значение уделяется универсальному тегу <DIV>, который выполняет множество функций. Фактически это основа, на которую “навешиваются” стили, превращая ее то в игрушку, то в зверушку. Совершенно не значит, что применяется только один этот тег, нужно ведь и рисунки вставлять и оформлять текст. Но при верстке с помощью слоев тег <DIV> является кирпичиком верстки, ее базовым фундаментом.
Благодаря этому тегу HTML-код распадается на ряд четких наглядных блоков, за счет чего верстка слоями называется также блочной версткой. Код при этом получается более компактным, чем при табличной верстке, к тому же поисковые системы его лучше индексируют.
3. Таблицы применяются только для представления табличных данных
При верстке слоями, конечно же, используются таблицы, но только в тех случаях, когда они нужны, например, для наглядного отображения чисел и других табличных данных. Вариант, когда от таблиц предлагается отказаться вообще, является нецелесообразным и, более того, вредным.
2. Особенности верстки слоями
Не секрет, что большинство сайтов в мире создано с помощью табличной технологии, когда таблица с невидимой границей выступает в качестве опорной модульной сетки документа. Вместе с тем разработчики постепенно переходят на верстку слоями - это интересно, доступно и пользуется популярностью. Но в качестве образца для подражания выбираются именно табличные сайты, поскольку они известны и на виду, и уже их пытаются приспособить под верстку слоями.
Что же в итоге получается? А то, что из конструктора, предназначенного для создания танка, пытаются сделать самолет. Думаете, это невозможно? Нет ничего невозможного, когда под рукой есть напильник и прорва времени. Но с другой стороны, может проще взять нужный конструктор...
- за основу берется табличная верстка и с помощью слоев она воплощается максимально близко к оригиналу.
- используются особенности слоев, сайт верстается с их учетом.
Теперь переходим к особенностям слоев, чтобы понять, в чем же суть этого типа верстки.
2.1. Высота слоев ограничена высотой контента
В таблице соседние ячейки взаимосвязаны, поэтому высота у них одна, независимо от объема информации. Это хорошо видно, если залить фон ячеек разным цветом. Слои же в каком-то смысле являются независимыми друг от друга, поэтому высота слоя определяется его содержимым (рис. 1).
Рис. 1. Страница, созданная с помощью слоев
Высота разных колонок на данном рисунке различается, поскольку формируется за счет их содержимого.
Когда требуется, высоту слоя можно установить через стили, используя для этого разные единицы - проценты, пикселы, дюймы и т.д. Но если содержимое слоя превышает его заданную высоту, то браузеры по-разному интерпретируют этот факт - одни расширяют высоту слоя под новый контент, а другие браузеры, оставляя высоту исходной, накладывают контент поверх слоя.
2.2. Блочная верстка
Уже упоминалось, что слои в большинстве случаев являются независимыми друг от друга, за счет чего они как отдельные блоки могут добавляться или удаляться в макете веб-страницы. За такое поведение верстка с помощью слоев получила название «блочная верстка». Слои допустимо вкладывать один в другой для формирования желаемого декоративного элемента. Поэтому под именем «блок» подразумевается не столько отдельный слой, сколько их совокупность.
2.3. Расположение колонок
По умолчанию содержимое контейнеров <DIV> на веб-странице располагаются по вертикали, вначале идет один слой, ниже располагается следующий и т.д. При создании колонок требуется располагать слои рядом по горизонтали, для чего применяется несколько методов. Одним из распространенных является использование стилевого параметра float. Хотя он предназначен для создания обтекания вокруг элемента, с тем же успехом float устанавливает и колонки. Но здесь следует учесть одну особенность. При уменьшении окна браузера до некоторой критической ширины, колонки перестают располагаться горизонтально и перестраиваются друг под другом по вертикали. С этим фактом либо остается смириться, либо использовать другие методы формирования колонок через слои.
3. Блочные элементы
Блочные элементы выступают в качестве основного строительного материала при верстке веб-страниц. Блочным называется элемент, который отображается на веб-странице в виде прямоугольника. Такой элемент занимает всю доступную ширину, высота элемента определяется его содержимым, и он всегда начинается с новой строки. К блочным элементам относятся контейнеры <DIV>, <H1> и <P>.
Допускается вкладывать один блочный элемент внутрь другого, а также размещать внутри них встроенные элементы (<SPAN>, например). Запрещено добавлять внутрь встроенных элементов блочные (файл sloi_1.html).
В данном примере параграф (тег <P>) вставляется внутрь контейнера <DIV>, а ссылка (тег <A>) - в заголовок <H2>. Кстати, ошибкой будет поступить наоборот - добавить <H2> в контейнер <A> (<a href= “link1.html”><h2>Ut wisi</h2></a>), поскольку тег <A> не относится к блочным элементам.
3.1. Ширина блочных элементов
По умолчанию ширина блока вычисляется автоматически и занимает все доступное пространство. Здесь следует оговорить, что под этим подразумевается. Например, если тег <DIV> в коде документа присутствует один, то он занимает всю свободную ширину окна браузера и ширина блока будет равна 100%. Стоит поместить один тег <DIV> внутрь другого, как ширина внутреннего тега начинает исчисляться относительно его родителя, т.е. внешнего контейнера.
Спецификация CSS определяет, что высота и ширина элемента определяется не только значениями параметров height и width, но к ним еще плюсуется значение полей, отступов и границ, а именно: ширины самого блока (width), отступов (margin), полей (padding) и границ (border).. Браузеры в этом плане делятся на две части: одни поддерживают в этом вопросе спецификацию, другие же ее игнорируют и поступают по-своему. Это создает трудности разработчикам, которые желают делать универсальные веб-страницы.
3.1.1. Рассмотрим создание слоя, в котором присутствуют все эти компоненты (файл sloi_2.html)
В результате данного примера получим слой шириной 342 пиксела. На рис. 2 показано, из чего складывается ширина слоя.
Рис 2. Ширина блочного элемента
Браузер Internet Explorer за ширину всего блока принимает значение параметра width.
3.1.2. Рассмотрим спользование селектора классов для указания свойств слоев (файл sloi_3.html) .
Ширина первого слоя в данном примере (layer1) установлена как 100%, что приводит к отображению горизонтальной полосы прокрутки. Для второго слоя (layer2) ширина задана 50%. К третьему слою (layer3) вообще не применяется параметр width, поэтому он определяется по умолчанию - auto. В таком случае слой будет занимать всю ширину окна браузера без всяких горизонтальных полос.
3.2. Высота
С высотой блочных элементов дело обстоит аналогично ширине. Т.е. браузер Internet Explorer (а также Opera) за высоту слоя принимает значение параметра height, а Firefox добавляет к нему еще значение параметров margin, padding и border. Если высота слоя не установлена явно, то она вычисляется автоматически исходя из объема содержимого.
Допустим, для слоя установлена высота в пикселах, а содержимое слоя однозначно превышает указанную высоту (файл sloi_4.html).
Internet Exporer увеличит автоматически высоту слоя, подстраивая ее под содержимое а Firefox (и Opera) оставляет высоту неизменной, за счет чего текст не помещается в блоке и накладывается поверх слоя.
3.3. Цвет фона
Цвет фона элемента проще всего устанавливать через универсальный параметр background. Фоном при этом заливается область, которая определяется значениями атрибутов width, height и padding (рис. 3).
Рис. 3. Область слоя, которая заполняется фоновым цветом
Таким образом, margin не принимает участия в формировании цветной области.
3.4. Границы
Из-за разницы в подходах браузеров при формировании блочных элементов наблюдается и различие при отображении границ. Браузер Internet Explorer проводит рамку внутри блока, а Firefox - снаружи. Но если использовать фоновую заливку, то увидим совершенно противоположную картину (рис. 4). А все потому, что Firefox (Opera) цвет фона устанавливает по внешнему краю границы, а Internet Explorer - по внутренней.
а. Internet Explorer
б. Firefox
в. Opera
Рис. 5. Отображение рамки в браузерах
Создадим код для получения подобной границы (файл sloi_5.html).
Различия в подходе браузеров при рисовании границ заметны только на цветном фоне и пунктирных линиях. Для сплошной рамки вид слоя в браузерах будет практически одинаковым.
PAGE \* MERGEFORMAT 7
2. Обломов Сообщение 515б Обломов ~ главный герой романа
3. тема посвящена тем
4. Моральна цінність шлюбу
5. Working in the grden ll dy. You must be tired
6. История развития ООС ИПЭ в России.
7. Тема 1 Деятельность как социальная основа менеджмента Основные вопросы- Введение Деяте
8. Оптические методы диагностики плазмы
9. Тема- Характеристика периода новорожденности План лекции Внутриутробный период
10. Данией Бельгией Нидерландами Люксембургом Францией Швейцарией Австрией Чехией и Польшей
11. ЗЕЛЕНОЛУГОВСКАЯ СРЕДНЯЯ ОБЩЕОБРАЗОВАТЕЛЬНАЯ ШКОЛА ПРИНЯТО Руков
12. Бесы и большевистская революция
13. темах [3] Органические вещества в биосистемах Общий план строения клетки В любой клетке
14. Учение Гераклита
15. Мониторить 2 источника например- блогеры и СМИ или отечественные СМИ и зарубежные СМИ в дальнейшем надо
16. риск как впрочем и многие другие экономические термины ставшие сегодня уже привычными для слуха является
17. а подразумевают освоение новой продуктовой линии то есть совокупности контрактов на сбыт продукта и снабже
18. 1Цілеспрямована дія на об~єктз метою зміни його стану або поведінки у зв~язку із зміною обставин це- БУпра
19. I Numi c~ cest~ ~tiin~~ nu cercetez~ ~ntreg problemtic~ sttului puterii politice ~n generl
20. варианту Пошли в ход небритые плачущие албанцы которым сербы в масках велели убираться из их домов