Если у вас возникли сложности с курсовой, контрольной, дипломной, рефератом, отчетом по практике, научно-исследовательской и любой другой работой - мы готовы помочь.
Предоплата всего
Подписываем
«Резиновым дизайном» будем называть структуру веб-страницы, которая автоматически приспосабливается под определенную ширину окна браузера пользователя. Такой макет имеет несколько преимуществ:
Среди недочетов можно отметить придирчивость разных браузеров к «резиновому» макету и большая вероятность появления ошибок. В связи с чем повышается сложность верстки веб-страниц.
При верстке веб-страниц наиболее популярным является двухколонный макет, при этом одна колонка содержит набор ссылок для навигации по сайту, а вторая, более широкая - контент. Впрочем, хотя такая схема и представляет собой устоявшуюся традицию, это не значит, что обязательно ее следует придерживаться. Использование всей ширины окна позволяет более эффективно задействовать площадь веб-страницы. Так что можно добавить три, и даже четыре колонки. Это зависит исключительно от имеющегося объема информации. Учтите и обратный эффект - чем больше материала, тем больше рассеивается внимание посетителя, и ему сложнее становится ориентироваться на сайте.
На рис. 1 приведены типичные схемы размещения колонок. Красным цветом выделен заголовок страницы, светло-серым — область для навигации, рекламы, небольших текстовых вставок и т.д., а белым цветом — место для основного контента. Нижняя часть страницы, как правило, отводится для контактной информации, баннеров, кнопочек и других не самых существенных элементов.
|
а. две колонки |
б. три колонки |
в. четыре колонки |
Рис. 1. Варианты размещения колонок
Для создания двухколонного макета применяется два способа. Первый подход использует параметр float, позволяющий состыковывать один слой с другим по горизонтали, а второй основан на задании положения слоев через позиционирование. Несмотря на некоторые недочеты, оба подхода имеют место быть в арсенале верстальщика и их надо знать для лучшего понимания принципов работы со слоями.
Использование плавающих элементов: параметр float добавляемый к слою определяет, по какой стороне будет выравниваться слой, при этом остальные элементы будут обтекать его с других сторон.
Рассмотрим вариант, когда левая колонка имеет определенный размер, а ширина правой колонки устанавливается автоматически, исходя из ширины окна браузера. При этом ширина левой колонки может задаваться в пикселах или процентах. В табл. 1 приведены основные стилевые параметры для формирования двух колонок.
|
Табл. 1. Левая колонка заданной ширины |
|
|
Для левого слоя шириной 20% |
|
|
Слой 1 |
Слой 2 |
|
Для левого слоя шириной 200px |
|
|
Слой 1 |
Слой 2 |
Для первого слоя требуется всего два параметра: float - заставляет второй слой располагаться рядом по горизонтали с первым слоем и width, который устанавливает ширину колонки. Вторая колонка будет занимать все оставшееся место, поэтому для нее атрибут width не требуется.
Правый слой характеризуется лишь одним параметром - margin-left, он смещает левый край колонки на ширину левого слоя, плюс задает отступ между колонками. Поэтому величина этого свойства в табл. 1 указана 21%, где 20% сама ширина первого слоя, а на один процент приходится расстояние между колонками. В случае задания ширины одной из колонок в пикселах, код останется прежним, но поменяются единицы измерения.
В следующем примере (файл sloi_28.html) приводится код веб-страницы, на которой содержится: заголовок, две колонки и контактная информация. Ширина первой колонки с именем menu фиксирована и установлена как 100 пикселов, оставшееся пространство занято колонкой с именем content.
Результат данного примера показан на рис. 2.
Рис. 2. Результат создания двухколонного макета
Для формирования колонки заданной ширины справа, а не слева, код незначительно модифицируется. В табл. 2 показаны стилевые параметры, которые требуются для этого случая.
|
Табл. 2. Правая колонка заданной ширины |
|
|
Для правого слоя шириной 20% |
|
|
Слой 1 |
Слой 2 |
|
Для правого слоя шириной 200px |
|
|
Слой 1 |
Слой 2 |
Расположение слоев в коде остается прежним, но значение атрибута float меняется на right, а параметр отступа на margin-right. Более никаких изменений не предполагается, поэтому в предыдущем примере следует заменить стиль слоев menu и content на тот, что показан в следующем примере (файл sloi_29.html).
Результат кода:
Заметьте, что положение слоев в коде HTML не меняется, вначале идет слой с именем menu, а потом уже content. Причем это правило действует всегда, независимо от того, как будут отображаться на веб-странице колонки - меню слева от контента или наоборот, справа. В любом случае модифицируется только код CSS.