<< Пред. стр.

стр. 12
(общее количество: 51)

ОГЛАВЛЕНИЕ

След. стр. >>

Opx;">
Здесь размещается содержимое


<!— Окончание тега div левого столбца. —>
<!— Добавьте следующий тег div, если хотите иметь
правый столбец. И снова, если вы' не используете
баннер, замените выражение bannerheight значением
0. ->
<div id="rightcol" style="position: absolute;
width: rightwidthpx; top: bannerheightpx; right :
Opx;">
Здесь размещается содержимое


<!— Окончание тега div правого столбца. —>
<!— Следующий тег div определяет основную област
для содержимого страницы. Замените нулями значе
ния, которые вам не нужны. —>
<div id="middlecol" style="position: absolute;
width: middlewidthpx; top: bannerheightpx; left:
leftwidthpx; right: rightwidthpx;">
Здесь размещается содержимое


<!— Окончание тега div среднего столбца. —>
</body>
ГЛАВА 16.
Центрирование CSS-макетов
с фиксированной шириной
Хороший метод для центрирования CSS-макетов с фиксированной шириной заключа-
ется в использовании вложенных слоев, также известных как вложенные разделы.
Вложенный слой - это элемент раздела внутри другого раздела, точно так же, как вло-
женные таблицы - это таблицы внутри таблиц. В данном сценарии основной раздел
является контейнером. Вложенные внутри него слои представляют содержимое сай-
та. На рисунке 16.1 показан типичный CSS-макет, использующий вложенные слои.



Определение
Вложенный слой, или вложенный раздел, - это элемент раздела,
который расположен внутри другого раздела.



4
760 px
I
100 px
Logo


Nav Main Content Area Links




200 px -160px-
400 px
Puc. 16.1. Для построения CSS-макета, выровненного по центру,
используйте контейнерный элемент, в котором будут размещаться
вложенные элементы с содержимым, а затем отцентрируйте контейнер


Для этого макета требуется четыре вложенных раздела:
Один для области Logo (Логотип) шириной 760 пикселов;
1.
Один для области Nav (Навигация) шириной 200 пикселов;
2.
Строим Web-сайты
114

Один для области Content (Содержимое) шириной 400 пикселов;
3.
Один для области Links (Ссылки) шириной 160 пикселов.
4.
Также необходим контейнерный элемент, который будет содержать четыре перечис-
ленных раздела.
Хитрость данного метода заключается в установке левого края страницы на централь-
ную точку окна браузера, что достигается добавлением атрибута s t y l e к тегу body
страницы:
<body s t y l e = " m a r g i n - l e f t : 50%;">
Обратите внимание, что исцользуется значение, выраженное в процентах, а не абсо-
лютный размер, выраженный в пикселах. Использование здесь процентного отноше-
ния является разумным решением, поскольку мы не знаем наверняка ширину окна
браузера посетителя.
Теперь, когда левый край страницы начинается в центре окна браузера, необходимо
выразить положение контейнерного элемента относительно этого края. Используйте
этот код:
<div i d = " c o n t a i n e r " s t y l e = " p o s i t i o n : relative; width: 760px; left:
-380px;">
Смещение слева выражается отрицательным значением, и на то есть причина. Пос-
кольку положение контейнерного элемента является относительным, а не
абсолютным, браузер использует смещение слева немного по-другому, вычитая
380 пикселов от позиции левого края страницы. Почему 380 пикселов? Потому что
380 - это половина от числа 760, которое является общей шириной макета. По сущест-
ву нужно найти центр страницы и сместиться на половину ширины макета в одну сто-
рону. В результате мы получим идеально отцентрированный контейнерный элемент.
При использовании данного метода, смещение слева контейнерного элемента всегда
равняется половине его ширины. Однако если у вас нет времени для вычислений, в
таблице 16.1 приведены готовые значения.
Табл. 16.1. Распространенные ширины контейнерного элемента
и соответствующие смещения слева

Смещение слева для
Ширина контейнерног о
Ширина экрана
центрирования
элемента

640 пикселов 600 пикселов 300 пикселов

800 пикселов 760 пикселов 380 пикселов

1024 пикселов 954 пикселов 477 пикселов

1280 пикселов 1210 пикселов 605 пикселов

1600 пикселов 1530 пикселов 765 пикселов
ГЛАВА 16. Центрирование CSS-макетов с фиксированной шириной 115

Вложенные элементы выглядят так же, как элементы в главе 15. Их положение являет-
ся абсолютным, однако поскольку они являются вложенными, браузер использует их
родительский элемент - в данном случае, контейнерный элемент, - в качестве базисной
точки для вычисления смещений слева и сверху, а не левый верхний угол окна браузера.
Вот исходный код для готового макета:
<body s t y l e = " m a . r g i n - l e f t : 50%; ">
<!— Атрибут style перемещает левый край страницы на центр окна бра-
узера. —>
<!— Это контейнерный элемент. Отрицательное смещение слева задано
относительно левого края страницы, определенного в теге body, и его
значение равняется половине ширины. —>
<div id="container" style="position: relative; width: 760px;
left: -380px;">
<! — Здесь идут вложенные элементы. —>
<div id="logo" style="position: absolute; width: 760px; top:
Opx; left: 0px;">
Logo


<div id="nav" style="position: absolute; width: 200px; top:
lOOpx; left: 0px;">
Nav


<div id="content" style="position: absolute; width: 400px;
top: lOOpx; left: 200px;">
Content .


<div id="links" style="position: absolute; width: 160px; top:
lOOpx; left: 600px;">
Links


<!— Перечисление вложенных элементов закончено. —>


<!— Предыдущая строка закрывает контейнерный элемент. —>
</body>
ГЛАВА 17.
Создание текучих макетоб
при помощи таблиц
Текучие, или автоматически изменяющиеся, макеты - это макеты, которые автома-
тически изменяют свои размеры для соответствия размерам окна браузера посетите-
ля. Сравните текучие макеты с их противоположностью - макетами с фиксированной
шириной, использующими абсолютные размеры, например, 600 пикселов или 760 пик-
селов, независимо от размеров окна браузера, которые предпочитает конкретный по-
сетитель.



Определение
Текучие, или автоматически изменяющиеся, макеты - это макеты,
которые автоматически изменяют свои размеры для соответствия
размерам окна браузера посетителя.



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


Часто задаваемые вопросы
Где я могу найти сайты, использующие текучие макеты?
Известные сайты, использующие текучие макеты, включают Amazon
и большую часть eBay. Оба сайта содержат большое количество ин-
формации и имеют простой (можно даже сказать, скучный) графи-
ческий дизайн.

Жизнь текучих макетов начинается с того же, что и жизнь макетов с фиксированной
шириной. Это означает, что при создании текучего макета вы разрабатываете табли-
цу, благодаря которой макет умещается в окне браузера определенной минимальной
ширины, скажем, 600 пикселов. Посетители, просматривающие страницы в окнах
браузера, ширина которых меньше минимальной ширины макета, увидят крайне не-
привлекательные горизонтальные полосы прокрутки, даже в случае с текучим макетом.
117
ГЛАВА 17. Создание текучих макетов при помощи таблиц

Если вам не нужно ничего, кроме макета с фиксированной шириной, остановитесь
здесь. Однако для текучего макета еще не все готово. Для создания эффекта текучес-
ти нужно очень аккуратно присвоить параметру w i d t h определенных ячеек таблиц
символ звездочки (*), которое в языке HTML служит сокращением слова любой. Ис-
пользование этой общей ширины, вместо фиксированного значения в пикселах, зас-
тавляет браузер вычислять ширину области дизайна, учитывая ширину окна браузера.
Отсюда и текучесть.
Итак, ширина (параметр w i d t h ) каких ячеек таблиц устанавливается любой? Это как
раз тот случай, когда пригодится план и один или два эскиза.
Начните с исходного дизайна с фиксированной шириной, наподобие представленно-
го на рисунке 17.1. Обратите внимание на простоту макета, что очень важно. В дан-
ном макете используются две вложенные таблицы внутри контейнерной, состоящей
из двух ячеек. Можно добиться такого же результата при помощи одной таблицы, ис-
пользуя атрибут c o l s p a n , однако мы не хотим делать это в данном случае. Никогда,
ни при каких обстоятельствах, не используйте атрибуты rowspan или c o l s p a n в те-
кучем дизайне. Если вы используете эти атрибуты, при увеличении таблицы браузер
посетителя осмелится вставить промежутки везде, особенно в тех местах, где вы не
хотите, чтобы они появились.

• 600 рх-

Links
Logo
-200 рх- -400 рх-

Nav Content More
Links




150 рх - - 300 рх - -100 рх-

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


Листинг 17.1. Просмотр исходного кода для рисунка 17.1
<table width="600" border="0" cellpadding="O" cellspacing="O">
<tr>
<td>
<!— Первая вложенная таблица начинается здесь. —>
<table width="600" border="0" cellpadding="O" cellspac-
ing^' 0">
<tr>
Строим Web-сайты
118

<td width="200">Logb</td>
<td width="400">Links</td>
</tr>
</table>
<i— Первая вложенная таблица заканчивается здесь. —>
</td>
</tr>
<tr>
<td>
<!— Вторая вложенная таблица начинается здесь. —>
<table width="600" border="0" cellpadding="O" cellspac-
ing="0">
<tr>
<td width="150">Nav</td>
<td width="350">Content</td>
<td'width="100">More links</td>
</tr>
</table>
<!— Вторая вложенная таблица заканчивается здесь. —>
'</td> ˜
</tr>
;/table>

Данная таблица имеет ширину в 600 пикселов, поэтому она уютно помещается в мак-
симизированном окне браузера на экране шириной 640 пикселов. Однако она выгля-
дит слишком сжатой в окнах браузеров с большими размерами на более широких эк-
ранах. Чтобы увеличить таблицу, необходимо решить, значения атрибутов w i d t h ка-
ких ячеек таблиц сменить с абсолютных, основанных на пикселах, на относительные,
основанные на процентах.

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

В первой вложенной таблице хорошим выбором является ячейка Links (Ссылки), по-
этому ее атрибуту w i d t h присвоим символ звездочки, как показано на рисунке 17.2.
Также установим значение атрибута w i d t h для всей таблицы в 100%. Если этого не
сделать, ширина таблицы останется фиксированной, равной 600 пикселам, даже
ГЛАВА 17. Создание текучих макетов при помощи таблиц 119

и с текучей ячейкой.) В этом случае ширина ячейки Logo (Логотип) не станет больше,
чем 200 пикселов, однако ячейка Links (Ссылки) увеличится и будет соответствовать
ширине окна браузера. Если вместо этого увеличить ячейку Logo (Логотип), браузер
сохранит ширину ячейки Links (Ссылки), равную 400 пикселам, и добавит свободное
место внутри ячейки Logo (Логотип), что может разбалансировать макет.

600 рх -

Links
Logo
-200 рх-


Nav Content More
Links




150 рх- • 300 рх - -100 рх -

Рис. 17.2. В первой вложенной таблице ячейка Links (Ссылки)
является хорошим выбором для использования переменной ширины

Листинг 17.2. Просмотр исходного кода для рисунка 17.2
<table width="100%" border="0" cellpadding="O" cellspacing="O">
<tr>
<td width="200">Logo</td>
<td width="*">Links</td>
</tr>
:/table>

Во второй вложенной таблице ячейка Content (Содержимое) является наилучшим вы-
бором для использования относительной ширины, как показано на рисунке 17.3.
Ячейки, находящиеся по обе стороны от ячейки Content (Содержимое), будут иметь
управляемые ширины, при этом позволяя содержимому страницы заполнять окно
браузера естественным образом. Поэтому установите символ звездочки для атрибута
width ячейки Content (Содержимое), а значение атрибута width вложенной таблицы
установите равным 100%.


Совет
Хорошее правило выбора текучей ячейки заключается в выборе
ячейки с наибольшим количеством содержимого.
120 Строим Web-сайты

Теперь просто установите значение атрибута width контейнерной таблицы в 100%,
чтобы увеличить ее ширину до ширины окна браузера, и все готово. На рисунке 17.4
показан завершенный эскиз макета.
- 600 рх -

Logo Links
-200 рх-

Content More
Nav
Links




-150 рх • >- -*• 100 рх -

Рис. 17.3. Во второй вложенной таблице выберите ячейку Content (Содержимое)
в качестве ячейки с переменной шириной


Листинг 17.3. Просмотр исходного кода для рисунка 17.3
<table width="100%" border="0" cellpaddi:ng="O" cellspacing="O">
<tr>
<td width="150">Nav</td>
<td width="*">Content</td>
<td width="100">More links</td>
</tr>
</table>

100%

Logo Links
-200 px-

Content More
Nav
Links




• 150 px —>• -* *- •*-100 px -

Рис. 17.4. Установите параметр width контейнерной таблицы
в значение 100%, и ваш макет станет текучим
ГЛАВА 17. Создание текучих макетов при помощи таблиц 121

Листинг 17.4. Просмотр исходного кода для рисунка 17.4
<table width="100%" border="0" cellpadding="O" cellspacing="O">
• <tr>

<td>
<!— Первая вложенная таблица начинается здесь. —>
<table width="100%" border="0" cellpadding="O" cellspac-
ing="0">
<tr>
<td width="2 00">Logo</td>
<td width="*">Links</td>
</tr>
</table>
<!— Первая вложенная таблица заканчивается здесв. —>

<< Пред. стр.

стр. 12
(общее количество: 51)

ОГЛАВЛЕНИЕ

След. стр. >>