вёрстка
Несмотря на то, что термин «слой» достаточно устойчиво используется при разработке
сайта, расшифровке этого понятия в литературе по сайтостроению практически не
уделяется внимание. В дальнейшем я буду активно использовать термин «слой»,
поэтому вначале необходимо определить, что же под ним подразумевается.
Первоначально слои ввела компания Netscape, включив в свой браузер поддержку
тега <layer>. Этот тег позволял прятать/показывать
текущее содержимое, устанавливать положение относительно окна браузера, накладывать
один слой поверх других и загружать данные в содержимое слоя из файла. Все эти параметры легко менялись с помощью JavaScript и это расширяло возможности
по созданию действительно динамического контента на странице. Несмотря на столь
впечатляющий набор возможностей, тег <layer>
не был включён в спецификацию HTML и остался лишь расширением браузера
Netscape.
Любой блочный элемент состоит из набора свойств, подобно капустным листам накладываемых друг на друга. Основой блока выступает его контент (это может быть текст, изображение и др.), ширина которого задается свойством width, а высота через height; вокруг контента идут поля (padding), они создают пустое пространство от контента до внутреннего края границ; затем идут собственно сами границы (border) и завершают блок отступы (margin), невидимое пустое пространство от внешнего края границ. Порядок влияния этих свойств на блок четко определён и не может быть нарушен. На рис. 3.1 показан блок в виде набора этих свойств.
Рис. 3.1. Свойства, формирующие блочный элемент
Блочным называется элемент, который отображается на веб-странице в виде прямоугольника.
Такой элемент занимает всю доступную ширину, высота элемента определяется его
содержимым, и он всегда начинается с новой строки. К блочным элементам относятся
контейнеры <div>, <h1>
и <p>.
О вёрстке веб-страниц вообще мало книг на русском языке, а уж последовательных, где подробно с самого начала рассказаны все основы, можно считать что нет. Так что эту нишу восполняет моя новая электронная книга «Вёрстка веб-страниц», которая будет полезна и новичкам и опытным пользователям.
Для новичков в ней рассказано, как использовать на своей странице стили, как их применять для оформления элементов — ссылок, рисунков, таблиц, форм и списков. Подробные примеры, описание всех действий и комментарии позволяют легко воспроизвести приведенные технологии на практике и модернизировать код под свои нужды.
Опытные пользователи получат более подробные сведения об особенностях популярных браузеров и о том, как они работают с тегами и стилями. Это позволит учитывать различия между браузерами и создавать универсальные документы, которые будут корректно в них отображаться.
Наконец, искушенные специалисты по созданию сайтов смогут использовать книгу как справочное руководство, заглядывая в нее для получения информации об ошибках браузеров и нестандартном применении некоторых стилевых свойств.
Содержание книги
- Основы CSS
- Режимы браузеров
- Принципы вёрстки слоями
- Вёрстка с помощью таблиц
- Браузер Internet Explorer
- Макеты, применяемые на сайтах
- Типовые элементы веб-страницы
- Вёрстка сайта на практике
- Использование HTML5
- Тестирование и отладка готового кода
Наряду с самой книгой отдельно прилагаются примеры из нее со всеми требуемыми изображениями, стилями и скриптами. Также включен макет рассматриваемого на примерах сайта в форматах PSD, AI и сам сайт целиком.
Формат PDF, 378 страниц, стоимость 150 руб.
HTML изначально задумывался как язык, которому не нужны средства оформления, такие как цвет, размер, рамки или что-то подобное. Разработанный в Европейском институте физики частиц (CERN), HTML был игрушкой ученых, их, прежде всего, интересовала логика информации, а не её визуальное представление. Тогда ещё не существовало понятия веб-дизайна и вёрстки как таковой, все сайты по своему оформлению были практически однотипными, в стиле, называемом сейчас «академический дизайн». Пример до сих пор можно посмотреть на lib.ru.
Внутренними будем называть все веб-страницы сайта кроме главной. Они основаны на двухколоночном фиксированном макете, где в правой колонке располагается навигация (ссылки по сайту) и блок с интересной информацией, а в левой текст статьи.
Встроенными называются такие элементы веб-страницы, которые являются непосредственной
частью другого элемента, например, текстового абзаца. К встроенным элементам
относятся теги <span>, <a>,
<q>, <code> и
др. В основном они используются для изменения вида текста или его логического
выделения.
Разница между блочными и встроенными элементами следующая.
Основное отличие веб-страницы от листа бумаги заключается в их размерах. Если
лист имеет заданную фиксированную ширину и высоту, то по отношению к веб-сайту
такого сказать нельзя. Веб-документ отображается в окне браузера и может изменять
свои размеры в зависимости от настроек операционной системы, типа монитора, установленного
разрешения и т.д. Использование выравнивания позволяет проигнорировать указанную
особенность и располагать элемент у края окна или по его центру.
Одним из наиболее популярных вариантов верстки веб-страниц выступает двухколонный
макет, где в левой колонке располагаются ссылки, а в правой колонке —
основной контент. Такая схема достаточно традиционна и привычна для пользователей,
поэтому также пользуется признанием среди разработчиков (рис. 1).
Рис. 1. Двухколонный макет с навигацией слева
Рассмотрим вариант создания двухколонного макета с помощью абсолютного позиционирования.
При таком варианте одна колонка располагается как обычно, а координаты второй
колонки задаются относительно верхнего правого или левого угла окна браузера.
Поскольку слой заданный абсолютно накладывается поверх остального содержимого
документа, то под него требуется оставить место путем добавления отступов.
На рис. 1 показан вид веб-страницы, когда меню располагается в правой
колонке, а основной текст — в левой.
Известно, что ширина окна браузера варьируется в довольно широких пределах,
поэтому подгадать под нее не представляется возможным. Установить рисунок на
всю ширину можно лишь в том случае, когда применяется фиксированный макет. Ширина
при этом четко задана, и сделать рисунок требуемого размера достаточно просто.
Следует уточнить, что речь здесь идет не о ширине веб-страницы как таковой,
а лишь о ширине макета, в который вписывается вся информация. Например, на сайте
boeing.com применяется именно такой подход (рис.
По умолчанию ширина слоя принимает значение auto, и слой, как правило, занимает всю доступную ширину. Поэтому описанным методом по центру можно выровнять только такой слой, у которого явно задана ширина в процентах или пикселах. После чего к стилю слоя следует добавить отступ слева (стилевое свойство margin-left) и справа (margin-right) со значением auto. Впрочем, также можно воспользоваться универсальным свойством margin со значением 0 auto. Первое значение задает нулевой отступ сверху и снизу от слоя, а второй — автоматический слева и справа (пример 1).
«Замораживание» слоя в определённом месте веб-страницы происходит с помощью стилевого свойства position со значением fixed. При этом положение слоя не меняется даже при прокрутке страницы с помощью скроллинга. Сами координаты слоя задаются через свойства left, right, top и bottom, которые соответственно определяют положение от левого, правого, верхнего и нижнего края окна браузера.
Для решения задачи существует несколько способов, из которых мы рассмотрим два. Первый, в каком-то смысле традиционный, основан на таблицах, а второй использует слои и стили.
Слой, создаваемый через тег <div>, является блочным элементом веб-страницы. Это означает, что по ширине слой занимает все доступное пространство и всегда начинается с новой строки. Поэтому ограничение ширины слоев никак не приведет к тому, что блоки станут располагаться рядом. Для нашей цели следует воспользоваться стилевым свойством float со значением left. Это свойство превращает блочный элемент в плавающий, что в свою очередь приводит к выравниванию слоя по левому краю и его обтеканию другими элементами по правому краю. На деле же слои при подобной манипуляции выстраиваются не друг под другом как обычно, а рядом по горизонтали. Но только в том случае, когда ширина слоев задана через свойство width.
