<< Пред. стр.

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

ОГЛАВЛЕНИЕ

След. стр. >>

</td>
</tr> .•

<tr>
<td>
<!— Вторая вложенная таблица начинается здесв. —>
<table width="100%" border="0" cellpadding="O" cellspac-
ing="0">
<tr>
<td width="150">Nav</td>
<td width="*">Content</td>
' <td width="100">More links</td>
</tr>
</table>
<!— Вторая вложенная таблица заканчивается здесв. —>
</td>
</tr>
</table>
ГЛАВА 18.
Создание текучих макетов
при помощи таблиц CSS
Как следует из главы 17, текучие, или автоматически изменяющиеся, макеты - это
макеты, которые автоматически изменяют свои размеры для соответствия размерам
окна браузера посетителя. Однако если в предыдущей главе рассматривались текучие
макеты, созданные при помощи таблиц, то в этой главе демонстрируется, как созда-
вать текучие макеты с использованием каскадных таблиц стилей (Cascading Style
Sheets-CSS).


Совет
Как и в случае с CSS-макетами с фиксированной шириной, вам нуж-
но установить атрибуты leftmargin, topmargin, marginheight и
marginwi dth тега body в значение 0, чтобы математические расче-
ты корректно согласовывались между разными браузерами.


Начните работу с создания эскиза макета, наподобие представленного на ри-
сунке 18.1. Для CSS-макетов не требуется использование вложенных таблиц, поэтому
не беспокойтесь об этом. Просто разделите дизайн на прямоугольные области. Каж-
дая из этих областей станет элементом раздела в HTML-коде.
На следующем шаге необходимо решить, какие разделы будут текучими. Предполо-
жим, что мы хотим, чтобы раздел Content (Содержимое) увеличивался и уменьшался,
но при этом левая и правая боковые панели имели фиксированную ширину, скажем,
200 пикселов для раздела Nav (Навигация) и 150 пикселов для раздела Links (Ссылки).
Очевидно, что раздел Content (Содержимое) должен быть текучим, но как насчет раз-
дела Logo (Логотип)? Если бы этот макет строился с использованием таблиц, нам не
нужно было бы обязательно устанавливать значение атрибута w i d t h верхней ячейки,
равным 100%, поскольку сама таблица имела бы ширину, равную 100%, и браузер изме-
нил бы размеры ячейки Logo (Логотип) для полного соответствия ширине таблицы.
В таблицах CSS такого сокращения нет. Если вы желаете, чтобы раздел Logo (Лого-
тип) растянулся вдоль всей ширины окна браузера, это необходимо явно указать в
CSS-коде. Поэтому добавьте раздел Logo (Логотип) к все еще небольшому списку теку-
чих элементов и разметьте эскиз, как показано на рисунке 18.2.
Одной из наименее желанных особенностей CSS-макетов является то, что не сущест-
вует одного единственного решения для создания эффекта текучести. Необходимо ис-
пользовать различные методы в зависимости от положения раздела в макете:
• Если раздел растягивается вдоль всей ширины окна браузера, эффект текучес-
ти создается посредством присвоения атрибуту раздела w i d t h значения 100%.
• Если справа или слева от раздела расположены другие элементы - раздел не
растягивается на все окно браузера - не присваивайте значение атрибуту разде-
ла w i d t h .
ГЛАВА 18. Создание текучих макетов при помощи таблиц CSS 123



Logo



Nav Main Content Area Links




Рис. 18.1. Этот макет несложно создать при помощи таблиц CSS.
Но как его сделать текучим?

100%


Logo



Nav Main Content Area Links




Рис. 18.2. Поскольку мы имеем дело с таблицами CSS,
в этом макете необходимо сделать текучим раздел Logo (Логотип).
Если бы мы создавали таблицу, нам бы не пришлось этого делать

Раздел Logo (Логотип) растягивается вдоль всей ширины браузера, от левой стороны
до правой стороны, поэтому этот элемент попадает в первую категорию. Его код вы-
глядит следующим образом:
<di'v id="logo" s t y l e = " p o s i t i o n : absolute; width: 100%; height:
lOOpx; t o p : Opx; l e f t : 0px;">
Logo
124 Строим Web-сайты

Разделы для навигационной панели и ссылок являются обычными элементами с фи к-
сированной шириной:
<div id="nav" s t y l e = " p o s i t i o n : absolute; width: 200px; t o p : lOOpx;
l e f t : Opx;">
Nav



150px; top:
<div id="links" style="position: absolute; width:
lOOpx; right: Opx;">
Links


В значение атрибута s t y l e раздела Links (Ссылки), помимо всего прочего, включена
пара r i g h t : Opx. Этот особый кусочек кода размещает элемент рядом с правой сто-
роной экрана. Атрибут s t y l e необходимо определять именно таким способом, пос-
кольку мы не знаем, какую ширину будет иметь область Content (Содержимое), являю-
щаяся самой главной, в первую очередь, в текучих макетах.
Теперь код для раздела Content (Содержимое):
<div i d = " c o n t e n t " s t y l e = " p o s i t i o n : absolute; top: lOOpx; left:
20Opx; r i g h t : 150px ; ">
Content


Поскольку данный раздел находится между левой и правой боковыми панелями, он
попадает во вторую категорию. Мы не задаем значение атрибута width, однако распо-
лагаем его на расстоянии 200 пикселов от левой стороны окна браузера и на расстоя-
нии 150 пикселов от правой стороны. Почему? Чтобы гарантировать, что он не перек-
роет области навигационной панели и ссылок.

Совет
ЕСЛИ ВЫ назначаете разделам фоновые цвета, необходимо сделать
так, чтобы основная область с содержимым имела такой же цвет фо-
на, как и страница. Это предотвратит отображение браузером, так
сказать, швов дизайна. Раздел Content (Содержимое) может не при-
легать точно к правому столбцу в зависимости от того, что находится
в основной области содержимого, и мы не хотим, чтобы цвет фона
страницы проступил через пространство между разделами.

Вот и он: текучий макет, созданный с использованием таблиц CSS. На рисунке 18.3 по-
казан завершенный эскиз макета.
ГЛАВА 18. Создание текучих макетов при помощи таблиц CSS 125

100%

т
ЮОрх
Logo



Nav Main Content Area Links




-150 px-
200 px 100%
Рис. 18.3. Завершенный эскиз для текучего макета,
создаваемого при помощи таблиц CSS


Инструментарий Создание текущего макета при помощи таблиц CSS
Данный инструментарий демонстрирует, как создавать текучий
CSS-макет с любой комбинацией следующих элементов: баннер,
левый столбец, средний столбец и правый столбец.
<body leftmargin="0" topmargin="0" margin-
height="0" marginwidth="O">
<!— Добавьте следующий тег d i v , если хотите, чтобы
по всему верху макета располагался баннер. — >
<div id="banner" style="position: absolute;
bannerheightpx;
width: 100%; h e i g h t : t o p : Opx;
l e f t : 0px;">
Здесь располагается содержание


<!— Окончание тега d i v баннера. —>
<!— Добавьте следующий тег d i v , если хотите иметь
левый столбец. Используйте значение в пикселах для
атрибута width, чтобы получить столбец с фиксиро-
ванной шириной, или задайте значение в процентах
для текучего столбца. Если вы не используете бан-
нер, замените ниже выражение bannerheight значени-
ем 0 . —>
<div id="leftcol" style="position: absolute;
leftwidth; top: bannerheightpx;
width: left:
Opx;">
126 Строим Web-сайты

Здесь располагается содержание


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


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


<!— Окончание тега div среднего столбца. —>
</body>
ГЛАВА 19.
Разделение изображении на срезы
для макетных таблиц
Популярным методом создания Web-макетов является метод разделения на срезы.
При использовании данного метода макет разрабатывается в виде графического фай-
ла в таких приложениях, как, например, Macromedia Fireworks, Adobe Photoshop или
Adobe ImageReady. Затем файл буквально разделяется на кусочки для различных час-
тей страницы, как показано на рисунке 19.1, и приложение для работы с графикой ге-
нерирует HTML-таблицу, которая снова собирает полученные кусочки в Web-браузе-
ре. Это является отличным решением для людей, обученных графическому дизайну:
разработка ведется в полностью визуальной среде, и нет необходимости самому вы-
полнять какое-либо кодирование.


Определение
Разделение на срезы - это метод создания макетных таблиц в гра-
фических приложениях, например, Fireworks и Photoshop. Сначала ма-
кет разрабатывается в графическом редакторе, после чего получен-
ный макет разрезается на кусочки или срезы, основанные на различ-
ных частях страницы. При экспортировании срезов в виде отдельных
графических файлов вы получаете HTML-таблицу, которая снова со-
бирает полученные кусочки в Web-браузере.

По крайней мере, это - теория. Чтобы выполнить работу по разделению на срезы в
практическом смысле, необходимо знать кое-что о создании макетных таблиц труд-
ным способом, начиная с языка HTML, а не с графического файла. В этой книге заве-
дено предостерегать вас от дурной привычки использовать объединение столбцов и
строк в макетных таблицах, и макетные таблицы, полученные из разрезанных графи-
ческих файлов, не являются исключением. Если в результате разделения на срезы по-
лучена макетная таблица, использующая объединения столбцов или строк (что, кста-
ти, получилось при разделении на срезы рисунка 19.1), почти наверняка у вас появят-
ся проблемы при добавлении содержимого к макету в HTML-редакторе. Содержимое,
выходящее за границы таблицы, заставляет макет некрасиво разрываться, как показа-
но на рисунке 19.2.
Избежать использования объединения столбцов и рядов достаточно легко, если
каждую область страницы разделять на срезы поодиночке. Разделите исходные сре-
зы, показанные на рисунке 19.1, на отдельные графические файлы, как на ри-
сунке 19.3, а затем разделите на срезы и экспортируйте эти макеты по отдельности.
В данном случае вы получите четыре отдельных макетных таблицы для четырех об-
ластей страницы.
Строим Web-сайты
128




600x«80 100% -



Puc. 19.1. В результате разделения макета на срезы в графическом приложении,
например, Macromedia Fireworks, получаются отдельные графические файлы
и HTML-таблица, которая снова собирает полученные срезы в Web-браузере



File Edit View Favwltes Ioois




Рис. 19.2. Есть проблема. Макетная таблица использует объединения столбцов
и строк, поэтому макет может быть легко разорван при работе с ним в редакторе
ГЛАВА 19. Разделение изображений на срезы для макетных таблиц 129




1»™. D?-l* : Л » S i W * ШМ» Ш




Рмс. 29.3. Чтобы избежать использования объединений столбцов и строк,
разделите области макета на отдельные графические файлы,
а затем по отдельности разделите на срезы каждый графический файл

Как теперь обратно собрать области вместе? Наилучший способ - закатать рукава, за-
пустить HTML-редактор и создать контейнерную таблицу вручную. Создайте полный
эскиз макета, как показано на рисунке 19.4. Обратите внимание, что в нижней ячейке
контейнерной таблицы необходимо использовать вложенную таблицу, чтобы избе-
жать объединения столбцов, а в правой ячейке вложенной таблицы необходимо ис-
пользовать еще одну вложенную таблицу, чтобы избежать объединения строк.

-* 600 рх - *-

Тор



Nav Main Content Area




-*-125рх—»- -475px *-

Footer


Рис. 19.4. Создайте эскиз контейнерной таблицы, используя несколько
вложенных таблиц, чтобы избежать объединения столбцов
и строк, и постройте эту таблицу в HTML-редакторе
Строим Web-сайты
130

Листинг 19.1. Просмотр исходного кода для рисунка 19.4
•ctable width="600" border="0 " cellpaddir,g="0" cellspacing="O">
<tr>
<td>Top</td>
</tr>
<tr>
<td>
<!— Начало первой вложенной т а б л и ц ы . — >
<table width="125" b o r d e r = " 0 " cellpadding="O" cellspac-
ing= " 0 " >
<tr>
<td>Nav</td>
<td>
<!— Начало в т о р о й в л о ж е н н о й т а б л и ц ы . — > •




•ctable width="47 5" "Dorder="0"
, cellpadding="C"
cellspacing="O">
<tr>
<td>Main Conten t Area</td>
</tr>
<tr>
<td>Footer</td>
</tr>
</table> ,
-
<!— Окончание второй вложенной таблицы. ->
' </td>
</tr>
</table>
<!— Окончание первой вложенной таблицы. ->
</td>
</tr> -
</table>
i
. i • ••
ГЛАВА 19. Разделение изображений на срезы для макетных таблиц 131


File Цв!р
?* ?ew FjvotKes loots




Рис. 19.5. Вставьте HTML-код, полученный при разделении
графических файлов на срезы, в контейнерную таблицу.
Когда размеры таблицы изменятся, макет не будет разорван

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

Совет
Ваше графическое приложение может иметь возможность экспорти-
рования разделенного макета во вложенные таблицы, вместо одной
таблицы с использованием объединения столбцов и строк. Вы може-
те попробовать данный метод, хотя зачастую лучше построить кон-
тейнерную таблицу с нуля. Кустарные таблицы в основном более
прочные, чем те, которые выплевывают графические приложения.
ГЛАВА 20.
Создание многоколонных макетов
при помощи таблиц
Наилучшим способом получения нескольких колонок текста в макете, основанном на
таблицах, является размещение вложенной таблицы в ячейке для основного содержи-
мого, как показано на рисунке 20.1. Вложенная таблица может иметь любое необх< >ди-
мое количество столбцов, хотя, возможно, вам не захочется использовать больше
двух или, может быть, трех .столбцов.

760 рх-


Banner


Text Column 1 Text Column 2




-380 рх- -380 px-

<< Пред. стр.

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

ОГЛАВЛЕНИЕ

След. стр. >>