<< Пред. стр.

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

ОГЛАВЛЕНИЕ

След. стр. >>

Если вы желаете получить более авантюрный дизайн, попытайтесь использовать вло-
женные таблицы. Вложенная таблица - это таблица, которая размещается внутри
ячейки другой таблицы. Дизайн, представленный на рисунке 14.3, никак не назовешь
авантюрным даже с натяжкой, однако в нижней ячейке основной таблицы вкладыва-
ется другая таблица, чтобы избежать объединения столбцов в верхней ячейке.



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



Как только набросок дизайна будет готов, вы должны начать думать о размерах в пик-
селах. Пиксел является основной единицей измерений в HTML-таблицах. Довольно
удобно, что операционные системы компьютеров измеряют ширину экрана также в
пикселах, и это делает процесс задания размеров макета для конкретных настроек эк-
рана безболезненной операцией. Вы просто выбираете ширину экрана, которая име-
ет смысл для ваших посетителей, а затем создаете макет, который вмещается в табли-
цу аналогичных размеров.
104 Строим Web-сайты



Совет
При создании дизайна устанавливайте значение атрибута ячеек
valigne «top». Это сообщит браузеру, что по вертикали содержимое
необходимо выравнивать по верху ячеек. Иначе браузер будет цент-
рировать содержимое по вертикали.


В таблице 14.1 приведены цифры. Можно заметить, что не так уж и просто создать
таблицу шириной 640 пикселов, которая будет соответствовать экрану ширине«
640 пикселов. Необходимо принимать во внимание элементы интерфейса браузера,
например, полосы прокрутки, поэтому от ширины таблицы отнимается несколько
пикселов, просто чтобы подстраховаться. Исключением является приложение
MSNTV, иногда упоминаемое как WebTV, не имеющее полос прокрутки или других эле-
ментов интерфейса, которые съедают пространство дизайна.
Табл. 14.1. Распространенные ширины экрана
и соответствующие им ширины таблицы

Ширина таблицы Комментарии
Ширина экрана

544 пикселов 544 пикселов Приложение WebTV/MSNTV

Абсолютный минимум для большинства при-
640 пикселов 600 пикселов
ложений

800 пикселов 760 пикселов Стандартный безопасный размер

1024 пикселов 955 пикселов Выходящий за рамки стандартного размер

1280 пикселов 1210 пикселов Не рекомендуется для универсальных сайте в

1600 пикселов 1530 пикселов Не рекомендуется для универсальных сайк в



Совет
И хотя в действительности многие бродят по Интернету с использо-
ванием настольных мониторов и экранов ноутбуков, разрешение ко-
торых установлено в 1024 пикселов по ширине, не забывайте, что
также существуют и другие типы устройств просмотра для Интерне-
та, например карманные компьютеры (PDA), телевизоры, телефоны,
консоли видеоигр, кухонные приспособления, наручные часы, и кто
знает, что еще. Если ваш сайт обращается к беспроводной публике,
откажитесь от больших размеров экрана.

Для конечной цели данного примера не будем рисковать и выберем экран шириной
800 пикселов, для которого ширина таблицы составляет 760 пикселов. Теперь, когда
мы знаем общую ширину таблицы, рассчитать ширины областей, расположенных
внутри таблицы, не составит труда. Смотрите. Сделайте свой наилучший выбор.
Позднее, при необходимости, можно будет изменить значения. Просто удостоверь-
тесь, что сумма отдельных ширин не больше (или не меньше) общей ширины таблицы.
105
ГЛАВА 14. Создание макетов при помощи таблиц

Нанесите значения на эскиз, как показано на рисунке 14.4, и код таблицы практичес-
ки напишет себя сам. Замените метки в HTML-коде содержимым сайта - используя
вложенные таблицы, если необходим особый дизайн, - и у нас готов макет с фиксиро-
ванной шириной.
760 рх-


Logo




Рис. 14.4. После определения ширины таблицы
остальные значения становятся на свои места


Совет
Не забудьте установить значения атрибутов таблицы макета border,
cellpadding и cellspacing в 0. В данном случае, браузер не бу-
дет автоматически добавлять дополнительные промежутки, как он
делает это при отображении таблиц.


Листинг 14.1. Просмотр исходного кода для рисунка 14.4
<div align="center">
<!— Если вы не желаете выравнивать таблицу макета по центру, уда-
лите тег div здесь и в конце листинга. —>
<table width="760" border="0" cellpadding="O" cellspacing="O">
<tr>
<td width="760" valign="top">Logo</td>
</tr>
<tr>
<td width="760" valign="top">
<!— Вложенная таблица начинается здесь. —>
<table width="760" border="0" cellpadding="O" cellspac-
ing^' Q">
<tr>
<td width="200" valign="top">Nav</td>
Строим Web-сайты
106

<td width="560" valign="top">Content</td>
</tr>
</table>
<!— Вложенная таблица заканчивается здесь. — >
</td>
</tr>
</table>



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


Совет
Если ширина ячейки таблицы равняется ширине самой таблицы, ат-
рибут width ячейки таблицы можно опустить. В данном случае, если
вы измените свое мнение относительно ширины таблицы, вам при-
дется обновить значение всего лишь одного атрибута width.


Вот как мог бы выглядеть листинг после добавления нескольких значений для атрибутов
height:
<div align="center">
•stable width="760" border="0" cellpadding="O" cellspacing="O">
<tr>
<td width="760" height="100" valign="top">Logo</td>
</tr>
<tr>
<td width="7 60" height="400" valign="top">
<!— Вложенная таблица начинается здесь. ->
<table width="760" border="0" cellpadding="O" cellspac-
ing^' 0">
<tr>
<td width="200" height="40-0" valign="top"
>Nav</td>
<td width="560" height="400" valign="top"
>Content</td>
</tr>
</table>
ГЛАВА 14. Создание макетов при помощи таблиц 107

<!— Вложенная таблица заканчивается здесь. —>
</td>
</tr>
</table>


Обратной стороной отказа от использования атрибутов h e i g h t является то, что в окне
браузера таблица будет выглядеть полностью свернутой до тех пор, пока вы не начнете
добавлять содержимое в ячейки. Если вы считаете это ошибкой, при построении табли-
цы просто задайте атрибутам ячеек h e i g h t произвольные значения, однако потом, ког-
да содержимое будет находиться в ячейках, не забудьте удалить атрибуты h e i g h t .




Дневник: для создания макета
использовать HTML- или CSS-kog?
Существует два основных подхода по созданию макетов на Web-странице: HTML-табли-
цы и каскадные таблицы стилей (Cascading Style Sheets - CSS). Подход, использующий
таблицы, является классическим. Его легко реализовать, и он надежно работает на мно-
жестве различных типов браузеров. Однако использование HTML-таблиц для создания
макета приводит все стандарты в беспорядок. Группы, наподобие консорциума World
Wide Web (W3C), ненавидят, когда таблицы используются подобным образом, посколь-
ку использование тегов t a b l e языка HTML предполагается для строк и столбцов дан-
ных. Использование таблиц для графического дизайна напоминает использование мо-
лота для вбивания шурупа - задача будет выполнена, однако это не та задача, на которую
рассчитывали молот или шуруп. Этот тип аргумента не является всего лишь придиркой
к мелочам. Средства специальных возможностей, например, преобразователи текст-
речь, и читатели экрана полагаются на точные интерпретации стандартов языка
HTML, поэтому ваш макет, в основе которого лежат таблицы, может с большой лег-
костью ввести в заблуждение инвалидов по зрению. Однако несмотря на эти ограниче-
ния, макеты, основанные на использовании таблиц, доминируют в Интернете.
Альтернативный подход с использованием CSS-кода следует стандартам буквально, удов-
летворяя даже самых привередливых членов консорциума W3C. Таблицы CSS уже неко-
торое время используются повсеместно, но до сих пор они являются «созревающей» тех-
нологией. Таблицы стилей не были бы такими неудачными, если бы браузеры выполня-
ли совместные действия в отношении их. Самые последние версии браузеров Internet
Explorer, Netscape и Opera достаточно хорошо поддерживают таблицы CSS, однако ни
один из них не поддерживает таблицы CSS полностью и без существенных несогласован-
ностей. Для построения макета, основанного на таблицах CSS, требуется больше усилий
и больше времени для тестирования, и, кажется, что данный подход наилучшим образом
работает для простых дизайнов. Пока же макеты, основанные на таблицах CSS, или что-
то очень похожее на них, являются будущим графического дизайна в Интернете.
Если вы пытаетесь охватить максимально возможное количество посетителей, выбор
очевиден: используйте таблицы. Однако если вы заботитесь о стандартах и проблемах
доступности людям с ограниченными возможностями и смотрите в будущее, таблицы
CSS - это ваш выбор.
ГЛАВА 15.
Создание макетов с фиксированной
шириной при помощи таблиц CSS
Для тех, кто только что присоединился к нам, напомним, что макет с фиксированной
шириной использует абсолютные размеры для определения ширины страницы, и это
дает более высокий уровень управления графическим дизайном. В главе 14 описыва-
ется, как создавать макеты с фиксированной шириной при помощи таблиц. В этой
главе показано, как добиться того же результата при помощи каскадных таблиц спе-
лей (Cascading Style Sheets - CSS).


Совет
В результате выполнения данной процедуры вы получите макет с
фиксированной шириной, выровненный по левой стороне окна
браузера. Если же вы хотите выровнять макет, основанный на
таблицах CSS, по центру, сразу перейдите к главе 16.


Если в этой книге взять любую главу, посвященную макетам, основанным на таблицах,
вы снова и снова будете читать о том, как следует всегда создавать дизайн с испольк -
ванием вложенных таблиц. В этой главе вы не найдете таких советов, поскольку при
использовании таблиц CSS необходимость во вложенных таблицах отпадает. Вместо
этого макет делится на ряд прямоугольных областей, называемых разделителями
(divs), или разделами. Каждая область дизайна разрабатывается по отдельности с ис-
пользованием тегов d i v языка HTML, а затем эти элементы выкладываются на
Web-странице, как части мозаики. В этом смысле таблицы CSS более ориентированы
на графику, чем таблицы языка HTML. Мыслить в понятиях прямоугольников являет^
ся абсолютно естественным для людей со зрительными способностями, которые в лю-
бом случае стремятся видеть мир в фигурах.



Определение
Тег di v языка HTML обозначает раздел (division). Он размечает об-
ласть ИЛИ раздел Web-страницы. Каждый раздел может иметь свои
собственные свойства CSS-стиля.


Как и в случае с макетами, основанными на таблицах, разработка макетов, основан-
ных на таблицах CSS, начинается с эскизов, как показано на рисунке 15.1. Снова обра-
щаем внимание, что при работе с таблицами CSS не нужно думать о вложенных табли-
цах. Необходимо просто определить различные прямоугольные области, составляю-
щие страницу.
ГЛАВА 15. Создание макетов при помощи таблиц CSS 109

760 рх


Logo



Nav Main Content Area




560 px
200 px
Рис. 15.1. He называйте данные прямоугольники ячейками таблицы.
Они являются разделами

Для создания этого макета потребуется три прямоугольника:
1. Один для области Logo (Логотип) шириной 760 пикселов;
Один для области Nav (Навигация) шириной 200 пикселов;
2.
Один для области Content (Содержимое) шириной 560 пикселов.
3.
Три прямоугольника подразумевают три элемента раздела. Вот они:
<div id="logo" s t y l e = " p o s i t i o n : a b s o l u t e ; width: 760px;">
Logo



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



<div id="content" style="position: absolute; width: 560px;">
Content


Значения атрибута s t y l e данных тегов задают ширину в CSS-формате, а не в виде
width= "760", который можно было бы использовать при построении таблицы. Важ-
но помнить о необходимости использования CSS-формата, вместо HTML-формата,
для всего, что находится внутри атрибута s t y l e . Это означает следующее:
Строим Web-сайты
110

Используйте символ двоеточия (:), а не знак равно (=), для задания пар атри-
бут/значение;
Разделяйте составные имена атрибутов дефисом, например, background-
color, а не backgroundcolor или background_color;
Всегда указывайте единицу измерения после числового значения и не вставляй-
те пробел между числом и единицей измерения, например, 56Орх, а не 5 60 или
5 60 рх;
Разделяйте пары атрибут/значение символом точки с запятой (;).

Совет
Перед вычислением смещений сверху и слева для ваших разделов,
окажите себе любезность и установите значения атрибутов
leftmargin, topmargin, marginv/idth и marginheight в 0. Эти
атрибуты принадлежат тегу body. Внесение данных изменений улуч-
шает согласованность вашего дизайна в различных браузерах, кото-
рые по умолчанию устайавливают различные значения для прост-
ранств полей страницы.


Если помните, теги div представляют разделы или области страницы. Следующим
шагом является их размещение на странице. Для этого расположение элементов вы-
ражается через смещение от левой и верхней сторон окна браузера. Разместить пер-
вый элемент раздела не составит труда: он начинается в левом верхнем углу, поэтом}' у
него нет смещения сверху или слева:
<div id="logo" s t y l e = " p o s i t i o n : absolute; width: 760px; t o p : Opx:
l e f t : 0px;">
Logo


Второй элемент раздела начинается слева, поэтому у него нет смещения слева, но как
насчет смещения сверху? Здесь необходимо что-то )тсазать. Иначе второй раздел час-
тично перекроет первый раздел, что не предусмотрено вашим дизайном. Предполо-
жим, что вы планируете вставить графический логотип в первый раздел, и вы знаете,
что высота изображения составляет 100 пикселов. Если второй раздел начинается
прямо под логотипом, смещение будет составлять 100 пикселов, как показано на ри-
сунке 15.2. Следовательно, код выглядит так:
<div id="nav" style="position: absolute; width: 2 0 Орх; t o p : ЮОрх;
left: Opx;">
Nav


Для обеспечения согласованности и очень четкого разъяснения всего для браузеров,
критично относящихся к таблицам CSS, следует вернуться обратно к разделу Logo (Ло-
готип) и жестко закодировать значение атрибута height:
<div id="logo" s t y l e = " p o s i t i o n : absolute; width: 760px; height:
ЮОрх; t o p : Opx; l e f t : Opx;">
ГЛАВА 15. Создание макетов при помощи таблиц CSS 111

Logo


Для третьего элемента раздела необходимо смещение сверху, равное 100 пикселам,
чтобы не закрывать область Logo (Логотип), и смещение слева, равное 200 пикселам,
чтобы не закрывать область Nav (Навигация):
<div i d = " c o n t e n t " s t y l e = " p o s i t i o n : absolute; width: 560px; top:
ЮОрх; l e f t : 200px;">
Content


760 px

т
ЮОрх
Logo
T

Nav Main Content Area




200 px 560 px

Рис. 15.2. Поскольку размещение каждого элемента раздела
осуществляется в соответствии со смещениями сверху и слева,
необходимо вычислить высоту элемента Logo (Логотип).
Всегда можно выбрать произвольное значение и уточнить его позднее


Макет с фиксированной шириной, построенный при помощи
Инструментарий
CSS-кода
Данный инструментарий предоставляет макет с фиксированной
шириной, построенный при помощи CSS-кода, с любой комби-
нацией следующих элементов: баннер, левый столбец, средний
столбец и правый столбец.
<body leftmargin= 'О" topmargin="0" marginwidth="O'
marginheight="0">
<!— Добавьте следующий тег div, если хотите, чтобы
по всему верху макета располагался баннер. — >
Строим Web-сайты
112

<div id="banner" style="position: absolute;
width: designwidthpx; height: bannerheightpx; top:
Opx; left: Орх;">3десь размещается содержимое


<!— Окончание тега div баннера —>
<!— Добавьте следующий тег div, если хотите иметь
левый столбец. Если вы не используете баннер, за-
мените ниже выражение bannerheight значением 0. — >

<div id="leftcol" style="position: absolute;
width: leftwidthpx; top: bannerheightpx; left:

<< Пред. стр.

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

ОГЛАВЛЕНИЕ

След. стр. >>