<< Пред. стр.

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

ОГЛАВЛЕНИЕ

След. стр. >>


Puc. 20.1. Используйте вложенную таблицу в ячейке для основного содержимого
вашего макета, чтобы создать несколько колонок для текста

Обычно, когда одна макетная таблица вкладывается внутрь другой макетной таблицы,
мы устанавливаем значения атрибутов border, cellpadding и c e l l s p a c i n g в 0. Это
гарантирует, что вложенная таблица будет точно подогнана к своей контейнерной
ячейке. Однако когда в макетной таблице размещается несколько колонок текста, мы
не хотим иметь такой эффект. Попытайтесь прочитать две колонки текста, находя-
щихся друг возле друга и не имеющих достаточного расстояния между собой, как по-
казано на рисунке 20.2, и вы полностью поймете почему.


Совет
Вам не следует использовать больше двух или трех колонок в много-
колонном макете, и три колонки уже теснятся. Подумайте о тех посе-
тителях вашего сайта, которые не имеют огромных мониторов с
чрезвычайно высоким разрешением экрана. Если вы попытаетесь
втиснуть слишком много колонок в ячейку с содержимым, то получи-
те колонки, которые будут слишком узкими для чтения, или ужасные
горизонтальные полосы прокрутки.
ГЛАВА 20. Создание многоколонных макетов при помощи таблиц 133

Здесь может помочь атрибут c e l l s p a c i n g тега table. Атрибут c e l l s p a c i n g управ-
ляет расстоянием между соседними ячейками. Просто задайте атрибуту c e l l s p a c i n g
любое значение, отличное от 0, и вы автоматически получите свободное простран-
ство. Точное значение зависит от того вида, который вы собираетесь получить, но зна-
чения, лежащего в пределах от 12 до 16 пикселов, обычно достаточно. Макет, представ-
ленный на рисунке 20.3, использует значение атрибута cellspacing, равное 12.


Совет
Значение атрибута cellspacing также влияет и на пространство
вокруг ячеек таблиц, а не только на расстояние между ними. Поэтому
колонки текста не будут точно подогнаны к сторонам контейнерной
ячейки. Если это не согласуется с видом, которого вы пытаетесь дос-
тичь, оставьте значение атрибута cellspacing вложенной таблицы
равным 0, и добавьте отдельный столбец, который будет служить
свободным местом между колонками текста. Установите значение
атрибута width для этого столбца, равное желаемой ширине сво-
бодного места, наподобие следующего кода:
<table width="412' border="0" cellpadding="O"
eel 1spacing="0">
<tr>
<td width="200" valign="top">First column of
text</td>
<td width="12"><.'— Свободное пространство —

<td width="200" valign="top">Second column of
text</td>
</tr>
</table>



Edit Favorites loots Help


How do you like reading this textSetting the cellspacing to zero in
when there isn't any white space a multi-column layout isn't the
between the columns'' best approach.




Puc. 20.2. Необходимо подумать о свободном пространстве
между колонками, или вы получите что-то наподобие этого
Строим Web-сайты
134




Reading the text is easier with This example uses a
just a little extra white space cellspacing of 12 to create
between the columns. just enough of a visual break.




Рис. 20.3. Установка атрибута таблицы cellspacing в значение,
например, 12, автоматически создает свободное место

Листинг 20.1. Просмотр исходного кода для рисунка 20.3
<table width="400" border="0" cellpadding="O" cellspacing="12">
<tr>
<td width="50%" valign="top">
<p>Reading the text is easier with just a little extra
white space between the columns.</p>
</td> •

<td width="50%" valign="top">
<p>This example uses a cellspacing of 12 to create just
enough of a visual break.</p>
</td>
</tr>
</table>

Также необходимо выполнить пару других вещей:
• Задать одинаковую ширину для всех колонок. Это заставит браузер сделать
все колонки одного размера. Если этого не сделать, браузер подгонит ширины
колонок, чтобы разместить тот текст, который вы поместите в них.
• Установить значение атрибута v a l i g n каждой ячейки таблицы в t o p . Это
гарантирует, что колонки текста будут выровнены по верхней линии. В против-
ном случае, браузер отцентрирует их по вертикали.
• Сбалансировать колонки текста, чтобы они имели приблизительно одина-
ковую высоту. Браузер не сделает это за вас, поэтому придется делать руками.
Убедитесь, что в каждой колонке находится приблизительно одинаковое коли-
чество текста, иначе вы испортите макет.
135
ГЛАВА 20. Создание многоколонных макетов при помощи таблиц

Инструментарий Создание многоколонного макета при помощи таблиц
Данный инструментарий демонстрирует, как использовать вло-
женную таблицу для нескольких колонок текста. Разместите эту
таблицу внутри основной области содержимого вашего макета.
•stable width="contentcellwidth" border="0" cell-
padding="0" cellspacing="whitespacewidth">
<!— В теге t a b l e , расположенном выше, вставьте ши-
рину ячейки содержимого вашей макетной таблицы.
Также задайте ширину свободного пространства, не-
обходимого между колонками, обычно это значение на-
ходится между 12 и 16 пикселами. ->
<tr>
<!— Этот блок кода создает одну колонку. Скопируй-,
те и вставьте эту часть столько раз, сколько столб-
цов вам необходимо. Не забывайте указывать значе-
ние атрибута width для каждого столбца. В макете с
двумя колонками значение атрибута width составляет
50%. В макете с тремя колонками значение атрибута
width составляет 33%. В макете с четырьмя колонка-
ми значение атрибута width составляет 2 5% и так да-
лее. ->
<td width="columnwidth"' valign="top">
Здесь располагается содержание
</td>
<!— Окончание кода для колонки. —>
</tr>
</table>
ГЛАВА 21.
Создание многоколонных макетов
при помощи таблиц CSS
Точно так же, как для создания многоколонного макета для основанного на таблицах
дизайна, который был рассмотрен в главе 20, используются вложенные таблицы, для
создания многоколонного макета при помощи таблиц CSS используются вложенные
элементы разделов. Поместите вложенные разделы в основной раздел с содержимым
макета, как показано на рисунке 21.1, и результат не заставит себя ждать. Единствен-
ное препятствие - основной раздел с содержимым должен иметь фиксированную ши-
рину. Раздел не может быть текучим, иначе некоторые браузеры подавятся, если вы
примените методику, представленную здесь.

560 рх-

Banner ЮОрх


Text Column 2
Text Column 1




172 рх 172 рх


Рис. 21.1. В основном разделе содержимого данного макета
, находятся вложенные разделы для каждой колонки текста

Листинг 21.1. Просмотр исходного кода для рисунка 21.1
<div id="logo" style="position: relative; width: 560px; height:
ЮОрх; ">
Banner


<div id="container" style="position: relative; width: 560px;">
<!— Вложенные разделы начинаются здесь —>
<div id="leftcolumn" style="position: absolute; width: 172px;
left: Opx;">
Text Column 1
ГЛАВА 21 • Создание многоколонных макетов при помощи таблиц CSS 137

<div id=middlecolumn" s t y l e = " p o s i t i o n : absolute; width: 172px;
l e f t : 186px;">
Text Column 2



<div id="rightcolumn" s t y l e = " p o s i t ion: a b s o l u t e ; width: 172px;
l e f t : 372px;">
Text Column 3


<!— Окончание вложенных разделов —>



Совет
Одним из способов обойти ограничение, связанное с фиксирован-
ной шириной раздела, является использование макетной таблицы
для многоколонной структуры внутри основного раздела содержимо-
го. Смешивание таблиц и CSS-кода для макета отлично работает, хо-
тя сторонники таблиц CSS обычно съеживаются от одного упомина-
ния об этой идее. Факт остается фактом ˜ таблицы предоставляют в
целом более надежные макеты. Обратитесь к главе 20 за информа-
цией, как создавать многоколонные макеты при помощи таблиц, а за-
тем поместите эту таблицу в основной раздел содержимого вашего
CSS-макета.


Выполните приведенные шаги для создания вложенных разделов:
1. Возьмите ширину основного раздела содержимого и разделите это значение
на число колонок, которое вы хотите создать. На рисунке 21.1 ширина основ-
ного раздела содержимого составляет 560 пикселов, следовательно, разделив
560 на три колонки, мы получим приблизительно 186 пикселов. Это нерегули-
руемая ширина каждой из колонок.
2. Между колонками необходимо свободное место, поэтому удержите несколько
пикселов от значения ширины, полученного на шаге 1. Четырнадцати пиксе-
лов для ширины свободного места вполне достаточно, поэтому, из 186 вычи-
таем 14 и получаем значение ширины, равное 172 пикселам на колонку.
3. Нам необходима горизонтальная позиция каждой колонки, выраженная в ви-
де смещения от левой стороны родительского раздела - в данном случае, ос-
новной держатель содержимого. Смещение слева первой колонки всегда рав-
няется 0 пикселам. Следующая колонка смещается на исходную ширину, рас-
считанную на шаге 1, или на 186 пикселов слева. Следующая колонка смещает-
ся на двойную ширину колонки, или на 372 пиксела слева, и так далее, в зави-
симости от того, сколько колонок вы имеете.
Напишите код для вложенных разделов, используя значения из предыдущих шагов.
Инструментарий, приведенный ниже, предоставляет вам шаблон.
Строим Web-сайты
138




Совет
Как и в случае с таблицами, не пытайтесь уместить на макете
больше, чем две или три CSS-колонки.




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


Создание многоколонного макета при помощи таблиц CSS
Инструментарий
Данный инструментарий предоставляет код для многоколонных
разделов. Вложите их в основной раздел содержимого вашего
макета. Помните, что основной раздел содержимого доджей
иметь фиксированную ширину - его ширина должна иметь абсо-
лютный размер в пикселах, а не в процентах.
<!— Каждая колонка получает свой собственный p,v -
дел. Нумерация колонок слева направо начинается с
О, а не с 1, иначе формула в коде будет работать
неправильно.
Замените выражение coluinnwidth значением, получер-
ным на шаге 2 вышеописанной процедуры.
Замените выражение columnposition значением, полу-
ченным на шаге 1 вышеописанной процедуры. —>
id="columncolumnnumber"
<div style="position:
a b s o l u t e ; width: columwidthpx; l e f t : (columnposi-
tion * columnnumber)px;">
Содержимое располагается здесь


<!— Повторите этот блок кода для каждой колонки ма-
кета. Для большинства сайтов не пытайтесь втиснуть
в основной раздел содержимого больше, чем две или
три колонки. —>
ГЛАВА 22.
Предотвращение разрыва
навигационной панели
При разработке макетной таблицы все мысли должны быть направлены на использо-
вание наименьшего количества ячеек. Так будет проще для дизайнерского програм-
много обеспечения, так будет проще для кодировщиков, и, что самое важное, так бу-
дет проще для вас.
В зависимости от того, где какой элемент будет расположен на странице, возможно,
вы сможете сформировать макет, похожий на изображенный на рисунке 22.1. Просто
заполните ячейки соответствующим содержимым, позвольте таблице увеличиваться
до бесконечности по вертикали, загрузите страницу в Интернете и можете считать де-
ло завершенным.

600 рх


Тор



Nav Main Content Area




250 рх




-125 рх-


Рис. 22.1. Простой макет, наподобие представленного на этом рисунке,
может сберечь ваше время и усилия

Листинг 22.1. Просмотр исходного кода для рисунка 22.1
<table width="600">
<tr>
<td colspan="2">Top</td>
</tr>
<tr>
<td width="125">Nav</td>
<td height="250">Main Content Area</td>
</tr>
</table>
140 Строим Web-сайты

Воодушевленные простотой, вы можете испытать искушение разбить ячейку слева i ia
отдельные строки для кнопок навигационной панели, используя атрибут rowspan,
как показано на рисунке 22.2.
Макет, представленный на рисунке 22.2, работает в том случае, когда заранее извест-
на высота основной области содержимого. (В данном случае высота равняется
250 пикселам.) Данное значение высоты не всегда просто высчитать. Возможно, ваш
дизайн будет использоваться на разных страницах, каждая из которых имеет различ-
ный объем содержимого. Возможно, ваш сайт будет изменяться в будущем, и дизайн
должен быть достаточно гибким для работы с различными объемами содержимого.

600 рх

Тор



Main Content Area
Nav1


Nav2

250 px
Nav3


Nav4


Nav5

-<—125px—*-
Рис. 22.2. Чтобы сделать вещи красивыми и простыми, вы, возможно,
попытаетесь разбить ячейку слева для кнопок навигационной панели

Листинг 22.2. Просмотр исходного кода для рисунка 22.2
•stable width="600">
<tr>
<td colspan="2">Top</td>
</tr>
<tr> ...
<td width="125">Nav l</td>
<!— Далее идет ячейка с объединением строк —>
<td height="250" rowspan="5">Main Content Area</td;>
</tr>
<tr>
<td>Nav 2</td>
</tr> • : • •-


<tr>
ГЛАВА 22. Предотвращение разрыва навигационной панели 141

<td>Nav 3</td>
</tr>
<tr>
<td>Nav 4</td>
</tr>
<tr>
<td>Nav 5</td>
</tr>
</table>

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

-* *-
600 px

Top




Main Content Area
Nav1



<< Пред. стр.

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

ОГЛАВЛЕНИЕ

След. стр. >>