У вас вопросы?
У нас ответы:) SamZan.net

Лабораторная работа 9

Работа добавлена на сайт samzan.net:

Поможем написать учебную работу

Если у вас возникли сложности с курсовой, контрольной, дипломной, рефератом, отчетом по практике, научно-исследовательской и любой другой работой - мы готовы помочь.

Предоплата всего

от 25%

Подписываем

договор

Выберите тип работы:

Скидка 25% при заказе до 29.12.2024

ЯЗЫК ГИПЕРТЕКСТОВОЙ РАЗМЕТКИ – HTML-2009

ВЕРСТКА С ПОМОЩЬЮ СЛОЕВ. 

«РЕЗИНОВЫЙ» ДИЗАЙН. МАКЕТ ИЗ ДВУХ КОЛОНОК

Лабораторная работа 9.7.

«Резиновым дизайном» будем называть структуру веб-страницы, которая автоматически приспосабливается под определенную ширину окна браузера пользователя. Такой макет имеет несколько преимуществ:

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

Среди недочетов можно отметить придирчивость разных браузеров к «резиновому» макету и большая вероятность появления ошибок. В связи с чем повышается сложность верстки веб-страниц.

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

На рис. 1 приведены типичные схемы размещения колонок. Красным цветом выделен заголовок страницы, светло-серым — область для навигации, рекламы, небольших текстовых вставок и т.д., а белым цветом — место для основного контента. Нижняя часть страницы, как правило, отводится для контактной информации, баннеров, кнопочек и других не самых существенных элементов.

а. две колонки

б. три колонки

в. четыре колонки

Рис. 1. Варианты размещения колонок

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

Использование плавающих элементов: параметр float добавляемый к слою определяет, по какой стороне будет выравниваться слой, при этом остальные элементы будут обтекать его с других сторон.

Рассмотрим вариант, когда левая колонка имеет определенный размер, а ширина правой колонки устанавливается автоматически, исходя из ширины окна браузера. При этом ширина левой колонки может задаваться в пикселах или процентах. В табл. 1 приведены основные стилевые параметры для формирования двух колонок.

Табл. 1. Левая колонка заданной ширины

Для левого слоя шириной 20%

Слой 1

float: left
width: 20%

Слой 2

margin-left: 21%

Для левого слоя шириной 200px

Слой 1

float: left
width: 200px

Слой 2

margin-left: 210px

Для первого слоя требуется всего два параметра: float - заставляет второй слой располагаться рядом по горизонтали с первым слоем и width, который устанавливает ширину колонки. Вторая колонка будет занимать все оставшееся место, поэтому для нее атрибут width не требуется.

Правый слой характеризуется лишь одним параметром - margin-left, он смещает левый край колонки на ширину левого слоя, плюс задает отступ между колонками. Поэтому величина этого свойства в табл. 1 указана 21%, где 20% сама ширина первого слоя, а на один процент приходится расстояние между колонками. В случае задания ширины одной из колонок в пикселах, код останется прежним, но поменяются единицы измерения.

В следующем примере (файл sloi_28.html) приводится код веб-страницы, на которой содержится: заголовок, две колонки и контактная информация. Ширина первой колонки с именем menu фиксирована и установлена как 100 пикселов, оставшееся пространство занято колонкой с именем content.

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

Рис. 2. Результат создания двухколонного макета

Для формирования колонки заданной ширины справа, а не слева, код незначительно модифицируется. В табл. 2 показаны стилевые параметры, которые требуются для этого случая.

Табл. 2. Правая колонка заданной ширины

Для правого слоя шириной 20%

Слой 1

float: right
width: 20%

Слой 2

margin-right: 21%

Для правого слоя шириной 200px

Слой 1

float: right
width: 200px

Слой 2

margin-right: 210px

Расположение слоев в коде остается прежним, но значение атрибута float меняется на right, а параметр отступа на margin-right. Более никаких изменений не предполагается, поэтому в предыдущем примере следует заменить стиль слоев menu и content на тот, что показан в следующем примере (файл sloi_29.html).

Результат кода:

Заметьте, что положение слоев в коде HTML не меняется, вначале идет слой с именем menu, а потом уже content. Причем это правило действует всегда, независимо от того, как будут отображаться на веб-странице колонки - меню слева от контента или наоборот, справа. В любом случае модифицируется только код CSS.




1. ЛАБОРАТОРНАЯ РАБОТА 8 Параметры синусоидального напряжения название лабораторного исследования
2. Реферат- Экономическая таблица Франсуа Кенэ
3. Контрольная работа- Правила безопасности водителя
4. хозяйственных мероприятий по наиболее рациональному упорядоченному применению удобрений в целях увеличен
5. как ряд этапов каждый из которых может стать поворотным
6. ягодного сусла или из сброженноспиртованных виноматериалов с последующим добавлением пчелиного меда и спи
7. Организация расчетов с бюджетом и внебюджетными фондами Задача 1.
8. САНКТПЕТЕРБУРГСКИЙ ГОСУДАРСТВЕННЫЙ УНИВЕРСИТЕТ ТЕЛЕКОММУНИКАЦИЙ ИМ
9. Руїна
10. Тема- Понятие и особенности бухгалтерского дела Сущность бухгалтерского дела его содержание
11. Эти описания в графической и текстовой форме составляют содержание проекта т
12. Реферат- Финансовый рынок- сущность, порядок и правила работы
13. Тема 1 Социальная политика России в сфере труда и трудовых отношений 1Что не относится к мерам социальной
14. Тема 8 Профессиональное сообщество психологов Психология стала в современном мире не только популярной от
15. Статья- Палеографические условия формирования ястребовской свиты на юго-востоке Воронежской антеклизы
16. это воспаление уха чаще всего острое
17. Почему мужчины часто выглядят отрешенными после секса
18. Пояснительная записка
19. УЧЕТ ЗАЙМОВ И КРЕДИТОВ И ЗАТРАТ ПО ИХ ОБСЛУЖИВАНИЮ
20. . Общие положения Курсовая работа предусмотрена учебным планом и является завершающим этапом изучения про