Внимание!

План

Тема: Свободно позиционируемые элементы в CSS

Clear

Float

Height

Width

Border-color

Border-left-width

Border-bottom-width

Возможные значения: длина; thin, medium или thick. Применим ко всем элементам.

толщина нижней границы.

Пример: border-bottom-width:100em

Возможные значения: длина; thin, medium или thick. толщина левой границы.

Пример: border-left-width:medium

Возможные значения: color. Цвет границы. Применим ко всем элементам.

Пример: border-color:green

Возможные значения: длина; процент. Применим к блочным элементам. Ширина элемента.

Пример: width:10%

Возможные значения: длина; процент. Применим к блочным элементам. Высота элемента.

Пример: height:100pt

Возможные значения: left – слева; right – справа; none – по умолчанию. Расположение элемента.

Пример: float:right

Возможные значения: left – слева; right – справа; both – c двух сторон; none – по умолчанию. Расположение других элементов вокруг данного.

Пример: clear:both

Лекция №7 (4 часа)

1. Свободно позиционируемый элемент.

2. Размещение свободного элемента на странице, основные параметры

3. Верстка сайта с использованием свободных элементов

Основная литература: [1, 5, 6, 13, 20, 23, 32, 35]

Дополнительная литература: [16, 19, 31, 51]

Давайте возьмем какой-нибудь элемент страницы и рассмотрим его. Неважно, будет ли он фрагментом текста, изображением, фильмом или элементом управления ActiveX. С точки зрения Web-обозревателя, все они одинаковы (до известного предела, разумеется). Неважно, будет ли рассматриваемый нами элемент страницы помещен в основной "поток" текста, вынесен во фрейм или "втиснут" в ячейку таблицы. И первый, и второй, и третий способы никак не позволяют реально "освободить" элемент страницы, а только создают видимость этой свободы.

Откройте какую-нибудь страницу, сделанную ранее, и выберите любой ее элемент. Что он такое? Часть содержимого этой страницы. Его размерами управляет Web-обозреватель, основываясь на размерах его родителя, иначе говоря, на размерах свободного пространства, которое можно под него выделить. Точно так же дело обстоит и с позиционированием элемента страницы — оно зависит от размеров и месторасположения его "соседей" и его родителя. А они, в свою очередь, зависят от размера окна Web-обозревателя. Как видите,'способа точно контролировать размеры и координаты элемента страницы не существует — все эти параметры зависят от множества факторов, исключить которые обычным способом невозможно.

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

Выход: убрать этих "соседей" подальше! "Переселить" элемент страницы из "коммунальной" в "отдельную" квартиру!

Представьте себе, что, помещая на Web-страницу фрагмент текста или изображение, вы задаете его координаты и размеры, руководствуясь только своими нуждами, не принимая во внимание "соседей". А если ваш элемент и "наползет" на тот или иной соседний элемент, ничего страшного не произойдет — он его просто перекроет. (Вы даже можете специально перекрывать одним элементом страницы другие.) Такой "освобожденный" элемент страницы так и называется — свободно позиционируемый или просто свободный. Он не только вынесен за пределы "потока" текста, но и не зависит от "соседей".

Какими же параметрами свободно позиционируемого элемента можно управлять? А вот какими:

• координатами его левого верхнего угла;
• геометрическими размерами;
• слоем (уровнем), или z-индексом;
• видимостью или невидимостью;
• поведением в случае, если содержимое этого элемента выйдет за его размеры;
• некоторыми другими, о которых будет рассказано ниже.
• z-индексе нужно рассказать подробнее. Предположим, что все созданные нами на странице свободно позиционируемые элементы "сложены" в своеобразную "стопку". И не просто "сложены", а еще и пронумерованы в -порядке "снизу" "вверх". При этом, как вы поняли, элементы с большими номерами перекрывают элементы с меньшими номерами. Так вот этот номер в воображаемой "стопке" и есть z-индекс.

Свободно позиционируемый элемент в любом случае перекрывает обычное содержимое страницы, лежащее в "потоке" текста.

Как видите, вы можете задать для свободного элемента довольно много параметров. Вы даже можете сделать его видимым или невидимым, что часто используется в анимации и при создании различного рода спецэффектов. Кроме того, это пригодится, если вы будете программировать для своей страницы интерфейс, аналогичный интерфейсу Windows-приложения.

Отдельно хотелось бы остановиться на одной особенности свободных элементов. Как вы поняли, они могут содержать внутри себя некое содержимое, т. е. могут являться родителями для других элементов. Так вот: можно задать поведение такого свободного элемента в случае, если его содержимое перестанет в нем помещаться. Вы можете задать, появится ли в элементе-родителе полоса прокрутки или не помещающееся в нем содержимое будет "отрезано". Таким образом, вы можете создавать своеобразные "документы в документе" без использования фреймов.

И еще. Свободно позиционируемый элемент может содержать внутри себя другие свободно позиционируемые элементы. Во многих случаях это может быть полезным.

Подавляющее большинство Web-дизайнеров и Web-сайтов до сих пор прекрасно обходятся традиционными способами дизайна. Применять на своих страницах свободные элементы никто особо не хочет. Даже анимированные элементы, казалось бы, замечательное средство привлечь внимание посетителя, — большая редкость на просторах Сети.

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

Но если подавляющее большинство Web-дизайнеров как-то обходятся без свободно позиционируемых элементов, так ли уж они нужны? Стоит ли их применять? Может, лучше остаться при своих таблицах и фреймах?

Это решать вам.

Нужны ли вам свободно позиционируемые элементы? Нужны ли они вашему сайту? Сможете ли вы без них обойтись? Вот вопросы, ответы на которые вам стоит поискать.

Конечно, свободные элементы имеют множество преимуществ. Они позволяют располагать фрагменты содержимого Web-страниц так, как вам нужно, и при этом обходиться минимальным количеством кода (сравните с громоздкими таблицами разметки). Однако, если вы надумаете переделывать ваш старый сайт в новый, использующий свободные элементы, переделка будет весьма значительной. Особенно если ваш сайт достаточно велик и основан на таблицах. Так что, если.сайт работает нормально и без свободно позиционируемых элементов, лучше его не трогать.

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

• Как гласил рекламный лозунг фильма "Годзилла", размер имеет значение. В самом деле, если ваши Web-страницы сделаны на основе таблиц разметки и достаточно сложны, HTML-код догоняет в габаритах вышеупомянутое земноводное. А чем больше страница, тем дольше она будет загружаться... Свободно позиционируемые элементы позволят радикально сократить размер HTML-кода страниц и при этом добавят им такие возможности, которых у таблиц просто нет и не будет.
• Вы задумали такой дизайн для своих Web-страниц, который никак не создать без использования свободно позиционируемых элементов. Подобный дизайн может включать "окошки в окошке" для показа фрагментов текста, перекрывающиеся элементы и т. п.
• Вы собираетесь анимировать некоторые элементы страницы. Но прежде чем их анимировать, нужно сделать их свободно позиционируемыми.

Вот, вроде бы, и все случаи, когда вам не обойтись без свободных элементов. В остальных случаях они не обязательны.

Лекция №8 (4 часа)

Дата добавления: 2013-12-12