Проектирование Интернет приложений. Тузовский А.Ф. - 47 стр.

UptoLike

Составители:

Рубрика:

бражать блок ниже плавающего блока нужно использовать атрибут clear

(значение both).

При использовании плавающих блоков надо обязательно задавать

их ширину (иначе они будут растягиваться до ширины контейнера), и

кроме того, желательно определить поля для элемента body, иначе в

некоторых браузерах (например, в версиях Internet Explorer) появятся

большие поля вокруг плавающего блока.

Блочная верстка HTML документов

В настоящее время задание структуры сайтов (верстка) выполня-

ется не с помощью таблиц, а путем использования так называемой

«блочной верстки» (или div верстки). Основная идея данного способа

состоит в том, что в самих web-страницах расположение элементов не

задается. Просто их содержимое разделено на логические блоки, описы-

ваемые с помощью div контейнеров, имеющих разные значения атрибу-

та id. При отображении страницы в браузере такие блоки позициониру-

ются на экране требуемым образом с помощью стилей позиционирова-

ния. Такое размещение блоков создает каркас, который уже затем на-

полняют включенным в них содержимым. Достоинством данного спо-

соба структурирования HTML страницы заключается в том, что струк-

туру web-страниц можно очень просто изменить путем изменения ис-

пользуемых каскадных таблиц.

На рис. 1.8 показана стандартная структура web-страницы, заго-

ловок, три колонки и подвал.

Рис. 1.8. Стандартный шаблон web-страницы

Для создания web-страницы с такой структурой используется

блочная верстка HTML документа (рис. 1.9), содержащего четыре div

блока (с id атрибутами header, left, content и footer). В связанной с данным

документом таблице стилей DivStyle.css (рис. 1.10) для всех div контей-

неров заданы свои стили. Для контейнера left задан размер (width:150px;)

и плавающее позиционирование (float:left – блок размещается слева и

последующий блок «обтекает» его). Для контейнера content задано сме-

щение слева и справа (margin-left:152px; margin-right:102px;) для располо-

жения его между левой и правой колонками. Для контейнера right задан