КОМПЬЮТЕРНЫЕ КУРСЫ "ПОИСК"

УЧЕБНЫЕ МАТЕРИАЛЫ ПО ПРОГРАММИРОВАНИЮ, КРЕКИНГУ, HTML, CSS, ОФИСНЫМ ПРИЛОЖЕНИЯМ

[Главная страница] [HTML/CSS] [Контакты]

Вопросы, касающиеся макетов

10. Управление пространством дизайна в языке HTML

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

Добавление дополнительного пространства можно отключить, установив значения пары атрибутов тега body в 0. От браузера зависит, какие атрибуты использовать. Для браузера Internet Explorer соответствующими атрибутами являются leftmargin и topmargin:

<body leftmargin="0" topmargin="0">

11. Управление пространством дизайна при помощи таблиц CSS

Как видно из раздела 10, язык HTML предоставляет несколько атрибутов тега body для управления стандартными значениями пространства в окне браузера, однако эти атрибуты являются частными - они работают только в определенных браузерах. Браузеры полностью игнорируют атрибуты, которые они не понимают.

Вы получаете большее управление над полями мри использовании каскадных таблиц стилей (CSS). Просто определите стиль для тега body на странице, наподобие следующей строки кода:

<body style="margin:0px">

Эта строка кода устанавливает все четыре поля - верхнее, левое, правое и нижнее - в 0 пикселов, тем самым исключая использование на странице любых пространств со значениями по умолчанию.

Таблицы CSS не ограничиваются только этим. При помощи атрибутов margin-top, margin-left, margin-right и margin-bottom можно легко определить различные размеры пространств для различных полей. Макет, представленный на рисунке 11.1, имеет верхнее поле, равное 200 пикселам, левое поле, равное 300 пикселам, правое поле, равное 400 пикселам, и нижнее поле, равное 100 пикселам.

Листинг 11.1. Просмотр исходного кода для рисунка 11.1.

<body style="margin-top:200px; margin-left:300px; 
margin-right:400px; margin-bottom:100px">

Рис. 11.1. Эта страница использует таблицы CSS для управления
размером пространств для всех четырех полей

Совет

Для краткости можно задать размеры всех полей в атрибуте margin, выполнив обход по часовой стрелке (сверху, справа, снизу и слева), наподобие следующего: <body style="margin: 200 400 100 З00рх;">