Использование параметра float

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

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

ФИКСИРОВАННЫЙ ДИЗАЙН. МАКЕТ ИЗ ТРЕХ КОЛОНОК

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

 

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

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

Использование параметра float

Параметр float позволяет делать обтекание элемента. Значение left выравнивает слой по левому краю, а все последующие элементы - текст, изображения или другие слои, размещаются по его правой стороне. Аргумент right действует с точностью наоборот, выравнивая слой по правому краю и заставляя присоединяться к нему другие слои по левому краю. Свойство присоединения элементов между собой по горизонтали как раз и требуется, ведь слои по умолчанию размещаются по вертикали друг под другом.

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

Рис. 1. Пример создания трех колонок

Код для создания макета, аналогичного рис. 1, приведен ниже (файл sloi_25.html).

 

Поскольку сам код представляет собой только набор тегов <DIV> и текста, что не вызывает интереса, разберем подробно стиль, который и определяет внешний вид нашей страницы.

Селектор title предназначен для описания стиля заголовков, а col - задает вид колонки. Цифрами в имени селекторов обозначим номер колонки, чтобы разделить стиль каждой из них, цвет фона ведь у них различается. Так, идентификатор title1 определяет параметры заголовка первой колонки, а col3 - внешний вид третьей колонки.

Перечисление селекторов через запятую (стиль, помеченный единицей) называется группированием и предназначено для удобства и сокращения записи, чтобы не повторять одни и те же элементы несколько раз. Первые четыре параметра описывают стиль текста заголовка ? гарнитуру шрифта, его размер и цвет. Ширина колонок с помощью свойства width устанавливается фиксированной и равной 200 пикселов. Расстояние между колонками определяется аргументом margin-left, а между заголовком и его содержанием - значением margin-top. Изменяя эти величины, можно уменьшать или наоборот, усиливать расстояние между слоями. Атрибут float следует указывать обязательно, без него никаких колонок мы не получим.

Следующая запись, помеченная двойкой, определяет вид текста для всех трех колонок и не представляет важности для создания макета. А вот без класса tr (стиль, отмеченный тройкой) не обойтись. Используемый в нем параметр clear отменяет действие float и заставляет слои располагаться друг под другом. Тем самым создается заголовок и блок текста под ним.