Главная | Обратная связь | Поможем написать вашу работу!
МегаЛекции

Преобразование в блочный элемент.




Блочная вёрстка (верстка с помощью слоев)

 

Выражение «блочная вёрстка» или вёрстка с помощью слоёв заключается в конструктивном использовании тегов <div> и стилей. При этом придерживаются следующих принципов.

 

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

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

 

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

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

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

 

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

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

 

В HTML4 и XHTML слой – это базовый элемент вёрстки веб-страниц, при которой активно применяются стили и придерживаются спецификаций HTML и CSS. При таком подходе важная роль уделяется тегу <div>, с которым у большинства людей и ассоциируются слои. В каком-то смысле это является верным, поэтому договоримся в дальнейшем употреблять термин «слой» к тегу <div> для которого указан стилевой идентификатор или класс. Таким образом, выражение «слой с именем content» подразумевает, что используется тег <div id="content"> или <div class="content">.

 

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

 

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

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

 

Поля (padding)

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

Значения полей не могут быть отрицательными.

 

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

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Поля</title> <style type="text/css">.space { padding: 20px; /* Поля */ background: #E5D3BD; /* Цвет фона */ border: 2px solid #E81E25; /* Параметры рамки */ } </style> </head> <body> <div class="space"> Они шли, чтобы покорить нас, чтобы пытать нас и сжигать живьем на кострах, они шли, чтобы сделать с нами, вольными англичанами, то же самое, что Кортес сделал с индейцами Анауака. </div> </body></html>

Результат примера показан на рис. 3.3.

Рис. 3.3. Поля вокруг текста

 

 

Границы (border)

Границы – это линии вокруг полей элемента на одной, двух, трёх или всех четырёх его сторонах. У каждой линии есть толщина, стиль и цвет. Для создания рамки применяется универсальное свойство border одновременно задающее все эти параметры, а для создания линий на отдельных сторонах элемента можно воспользоваться свойствами border-left, border-top, border-right и border-bottom, соответственно устанавливающих границу слева, сверху, справа и снизу. В примере 3.2 показано добавление линии слева от элемента.

 

Пример 3.2. Красная пунктирная линия

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Линия</title> <style type="text/css"> P.line { border-left: 1px dotted red; padding: 10px; } </style> </head> <body> <p class="line">Лев ревет только в том случае, когда сообщает, что территория принадлежит ему или провозглашает себя царем природы.</p> </body></html>

 

Результат данного примера показан на рис. 3.4.

Рис. 3.4. Линия возле текста

 

Отступы (margin)

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

Для отступов характерны следующие особенности.

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

· Отступы в отличие от полей могут принимать отрицательное значение, это приводит к сдвигу всего блока в указанную сторону. Так, если задано margin-left: -10px, это сдвинет блок на десять пикселов влево.

· Для отступов характерно явление под названием «схлопывание», когда отступы у близлежащих элементов не суммируются, а объединяются меж собой.

· Отступы, заданные в процентах, вычисляются от ширины контента блока. Это касается как вертикальных, так и горизонтальных отступов.

 

В примере 3.3 показано схлопывание отступов и их прозрачность.

 

Пример 3.3. Использование отступов

 

XHTML 1.0CSS 2.1IECrOpSaFx

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Отступы</title> <style type="text/css">.layer1,.layer2 { background: #F2EFE6; border: 1px solid #B25538; padding: 10px; margin: 20px; } </style> </head> <body> <div class="layer1">Лев ревет только в том случае, когда сообщает, что территория принадлежит ему или провозглашает себя царем природы.</div> <div class="layer2">Охотничий участок льва может иметь длину и ширину до тридцати километров.</div> </body></html>

 

Результат данного примера показан на рис. 3.5. Обратите внимание, что расстояние между блоками равно 20 пикселов, а не 40, которые получаются суммированием верхнего и нижнего отступа у блоков. Это происходит за счёт эффекта схлопывания, при котором близлежащие отступы объединяются.

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

 

Рис. 3.5. Отступы в элементе

 

Блочные элементы

Блочным называется элемент, который отображается на веб-странице в виде прямоугольника. Такой элемент занимает всю доступную ширину, высота элемента определяется его содержимым, и он всегда начинается с новой строки. К блочным элементам относятся теги <address>, <blockquote>, <div>, <fieldset>, <form>, <h1>,...,<h6>, <hr>, <ol>, <p>, <pre>, <table>, <ul> и некоторые устаревшие. Также блочным становится элемент, если в стиле для него свойство display задано как block, list-item, table и в некоторых случаях run-in.

Для блочных элементов характерны следующие особенности.

  • Блоки располагаются по вертикали друг под другом.
  • На прилегающих сторонах элементов действует эффект схлопывания отступов.
  • Запрещено вставлять блочный элемент внутрь строчного. Например, <a><h1>Заголовок</h1></a> не пройдёт валидацию, правильно вложить теги наоборот — <h1><a>Заголовок</a></h1>.
  • По ширине блочные элементы занимают всё допустимое пространство.
  • Если задана ширина контента (свойство width), то ширина блока складывается из значений width, полей, границ, отступов слева и справа.
  • Высота блочного элемента вычисляется браузером автоматически, исходя из содержимого блока.
  • Если задана высота контента (свойство height), то высота блока складывается из значения height, полей, границ, отступов сверху и снизу. При превышении указанной высоты контент отображается поверх блока.
  • На блочные элементы не действуют свойства, предназначенные для строчных элементов, вроде vertical-align.
  • Текст по умолчанию выравнивается по левому краю.

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

 

Преобразование в блочный элемент

В некоторых случаях требуется наделить строчный элемент характеристиками блочного. Так, превращение ссылки в блок позволяет увеличить полезную площадь ссылки за счёт использования свойств width и height. В примере 3.15 показано создание меню, в котором ссылками является вся доступная область.

 

Пример 3.15. Меню

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Меню</title> <style type="text/css">.menu { width: 220px; /* Ширина меню */ padding: 5px; /* Отступы от рамки до пунктов меню */ border: 1px solid #000; /* Рамка вокруг меню */ }.menu P { margin: 0 0 2px; }.menu A { padding: 2px; /* Отступ от рамки вокруг ссылки до текста */ display: block; /* Ссылка как блочный элемент */ border: 1px solid #fff; /* Маскируем рамку вокруг ссылки */ text-decoration: none; /* Убираем подчеркивание у ссылок */ }.menu A:hover { background: #faf3d2; /* Цвет фона под ссылкой */ color: #800000; /* Новый цвет ссылки */ border: 1px dashed #634f36 /* Рамка вокруг ссылки */ } </style> </head> <body> <div class="menu"> <p><a href="l.html">Метод простых итераций</a></p> <p><a href="2.html">Метод случайных чисел</a></p> <p><a href="3.html">Метод дихотомии</a></p> <p><a href="4.html">Метод золотого сечения</a></p> </div> </body></html>

 

Вся строка выступает ссылкой, поэтому при наведении на неё курсора происходит изменение стиля (рис. 3.24). Следует понимать, что превращение элемента в блочный не даёт право нарушать последовательность вложения тегов и вкладывать блочные элементы внутрь строчных, даже если через стили они установлены блочными.

 

Рис. 3.24. Ссылка как блочный элемент

 

Строчные элементы

Строчными называются такие элементы документа, которые являются непосредственной частью строки. К строчным элементам относятся теги <img>, <span>, <a>, <q>, <code> и др., а также элементы, у которых свойство display установлено как inline. В основном они используются для изменения вида текста или его логического выделения.

По аналогии с блочными элементами перечислю их характерные особенности.

  • Внутрь строчных элементов допустимо помещать текст или другие строчные элементы. Вставлять блочные элементы внутрь строчных запрещено.
  • Эффект схлопывания отступов не действует.
  • Свойства, связанные с размерами (width, height) не применимы.
  • Ширина равна содержимому плюс значения отступов, полей и границ.
  • Несколько строчных элементов идущих подряд располагаются на одной строке и переносятся на другую строку при необходимости.
  • Можно выравнивать по вертикали с помощью свойства vertical-align.

 

Строчные элементы удобно использовать для изменения вида и стиля текста, в частности, отдельных символов и слов. Для этой цели обычно применяется универсальный тег <span>, который самостоятельно никак не модифицирует содержимое, но легко объединяется со стилями через классы или идентификаторы. За счёт чего с помощью этого тега можно легко управлять видом и положением отдельных фрагментов текста или рисунков.

Для вёрстки строчные элементы применяются реже, чем блочные. Это связано в основном с тем, что внутрь строчных элементов не допускается вкладывать контейнеры <div>, <p> и подобные широко распространённые теги. Тем не менее, блочные и строчные элементы удачно дополняют друг друга, поскольку позволяют на всех уровнях менять вид составляющих веб-страниц. В примере 3.16 показано использование тега <span> для выделения отдельных слов.

 

Пример 3.16. Применение тега <span>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Строчные элементы</title> <style type="text/css">.pose { background: #fc0; /* Цвет фона */ margin-left: 1em; /* Отступ слева */ }.press { padding: 1px; /* Поля вокруг текста */ border: 1px dotted maroon; /* Параметры рамки */ color: navy; /* Цвет текста */ }.num { font-weight: bold; /* Жирное начертание */ color: maroon; /* Цвет текста */ } </style> </head> <body> <p><span class="pose">Лягте животом на пол</span>. Соедините стопы вместе, согнув ноги в коленях и развернув их в стороны. Руки за головой. Тяните голову руками вверх и вперед до полного сокращения <span class="press">мышц живота</span>. Задержитесь на две секунды. Выполните <span class="num">восемь</span> повторений.</p> </body></html>

 

Результат примера показан ниже (рис. 3.25).

Рис. 3.25. Текст, оформленный с помощью стилей

 

В данном примере тег <span> и стили используются для выделения различными способами фрагментов текста. В частности, выделение происходит за счёт фонового цвета, рамки вокруг текста и сменой его цвета. Обратите внимание, что в результате переноса текста рамка вокруг него также перенеслась на другую строку. Во многих случаях это выглядит не очень красиво, поэтому можно запретить перенос текста через white-space: nowrap.

 

Поделиться:





Воспользуйтесь поиском по сайту:



©2015 - 2024 megalektsii.ru Все авторские права принадлежат авторам лекционных материалов. Обратная связь с нами...