<< Пред. стр.

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

ОГЛАВЛЕНИЕ

След. стр. >>

Nav2


400 px
Nav3



Nav4



Nav5


-.—125 px—*-
Рис. 22.3. При увеличении высоты основной области содержимого высоты ячеек
навигационной панели не отстают от общей высоты
Строим Web-сайты
142

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




ft Main Content Area
Content goes here Content goes here Content goes here
Content goes here

Content goes here. Content goes here. Content goes here.
Content goes here

Content goes here Content goes here Content goes here
Content goes here

Content goes here Content goes here Content goes here
Content goes here

Content goes here




Рис. 22.4. Слишком большое количество содержимого
приводит к разрыву навигационной панели

Это является проблемой, как минимум, по двум причинам. Во-первых, данный подход
разрушает целостность вашего дизайна. Ваши пользователи - это раздражительные
люди, и они не хотят на каждой новой странице искать положение правой навигаци-
онной кнопки. Они хотят оставаться на одном и том же месте от страницы к страни-
це. Во-вторых, кнопки навигационной панели, находящиеся в самом низу, могут исчез-
нуть из области видимости. Пользователи не хотят выполнять прокрутку страницы,
чтобы найти основную навигацию вашей страницы. Навигация должна быть понят-
ной и тотчас же доступной на всем сайте.
Почему разрывается навигационная панель? Вините во всем объединение строк. Про-
верьте листинг 22.2 и обратите внимание, что основная область содержимого являет-
ся единственной, кто имеет атрибут rowspan="5". Другими словами, основная об-
ласть содержимого охватывает пять ячеек для навигационных кнопок в макетной таб-
лице, т.е. высоты ячеек для навигационных кнопок полностью зависят от высоты ос-
новной области содержимого. Естественно, если область содержимого изменяет раз-
мер, строки, которые она охватывает, - ячейки навигационной панели - изменяют
размер пропорционально.
Вот в чем проблема. Вы можете попытаться устранить ее, указав высоты для каждой
из пяти ячеек навигационной панели, однако, увы, этот подход не работает. Браузер
автоматически раздувает ячейки навигационной панели, чтобы заставить их охватить
область содержимого, независимо от того, какие значения вы присвоили. Как только
ГЛАВА 22. Предотвращение разрыва навигационной панели 143

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

600 px

Top


-«—100%—*•
Main Content Area
Nav1

Nav2

250 px
Nav3


Nav4


Nav5

-125 px
Рис. 22.5. Создайте вложенную таблицу для навигационной панели в ячейке слева




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



Листинг 22.3. Просмотр исходного кода для рисунка 22.5
<table width="600">
<tr>
<td colspan="2">Top</td>
</tr>
<tr>
<td width="125" valign="top">
<!— Начало вложенной таблицы. —>
Строим Web-сайты
144

<table width="100%">
<tr> . '.
<td>Nav l</td>
. • </tr>

<tr>
• <td>Nav 2</td>
</tr>
<tr>
<td>Nav 3</td>
</tr>
<tr> ••

<td>Nav 4</td>
</tr>
<tr>
<td>Nav 5</td>
</tr>
</table>
<!— Окончание вложенной таблицы. —>
</td>
<td height="250" valign="top">Main Content Area</td>
</tr>
:/table>

Обратите внимание, что значение атрибута width вложенной таблицы установлено в
100%. Это заставляет таблицу увеличиваться, чтобы заполнять всю ширину роди-
тельской ячейки. Обратите также внимание, что ячейка с вложенной таблицей имеет
атрибут v a l i g n = " t o p " . Данный атрибут заставляет браузер выравнивать содержи-
мое ячейки по верху, что все время удерживает вложенную таблицу возле самого верх-
него края ячейки, прямо там, где посетители ожидают найти ее.

Совет
Если после помещения навигационной панели во вложенную табли-
цу, она все еще выглядит разорванной, проверьте атрибуты тега
table вложенной таблицы. Возможно, вам необходимо установить
значения атрибутов cellpadding, cellspacing и border в 0, на-
подобие следующей строки кода:
<table width="100%' eellpadding="0" eel 1spacing="0"
border="0">
ГЛАВА 22. Предотвращение разрыва навигационной панели 145

Теперь в основную ячейку можно добавить столько содержимого, сколько пожелаете.
Поскольку мы не использовали объединение строк для создания ячеек навигацион-
ной панели, в основную ячейку можно добавить сколь угодно много содержимого, и
навигационная панель не будет разорвана. Макет на рисунке 22.6 доказывает это.
Ячейка, содержащая вложенную таблицу, выросла, однако размеры вложенной табли-
цы не изменятся до тех пор, пока вы не измените содержимое в ячейках вложенной
таблицы.




Main Content Area
Content'goes here Content goes here Content goes here
Nav з | Content goes hers

Content goes here Content goes here Content goes here
Content goes here.

Content goes here. Content goes here. Content goes here
Content goes here

Content goes here Content goes here. Content goes here
Content goes here

Content goes here.




Рис. 22.6. Вложенная таблица исключает объединение строк,
что сохраняет навигационную панель нетронутой независимо от того,
какое количество содержимого будет добавлено



Совет
Если ВЫ используете программное обеспечение, например,
Macromedia Fireworks, Adobe Photoshop или Adobe ImageReady, для раз-
деления дизайна на срезы, неожиданный разрыв навигационной па-
нели присутствует всегда. Чтобы избежать этого, разделяйте на сре-
зы каждую основную область дизайна по отдельности. За дополни-
тельной информацией обратитесь к главе 19.
ГЛАВА 23.
Раскрашивание ячеек таблицы
Ячейки таблицы в языке HTML имеют атрибут bgcolor, управляющий цветом фо-
на ячейки. Задание цветов фона для определенных ячеек в макете придает BameMv
дизайну большую выразительность без использования файлов изображений. Срав-
ните макет, представленный на рисунке 23.1, с макетом на рисунке 23.2, и вы согла-
ситесь с этим.



Logo




Links




Puc. 23.1. Ячейки таблицы в данном макете не используют цвета фона

Листинг 23.1. Просмотр исходного кода для рисунка 23.1
<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" cellspao
ing="0">
<tr>
<td width="200" valign="top">Nav</td>
<td width="400" valign="top">Content</td>
• <td width="160" valign="top">Links</td>
</tr> ',
ГЛАВА 23. Раскрашивание ячеек таблицы 147

</table>
</td>
</tr>
</table>


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




Рис. 23.2. Указав цвета фона для областей Logo (Логотип), Nav (Навигация)
и Links (Ссылки), вы создадите более выразительную страницу
без использования файлов изображений

Листинг 23.2. Просмотр исходного кода для рисунка 23.2
<table width="760" border="0" cellpadding="O".cellspacing="O">
<tr>
<td width="760" valign="top" bgcolor="#99CCFF">Logo</td>
</tr>
<tr>
<td width="760" valign="top">
<table width="760" border="0" cellpadding="O" cellspac-
ing="0">
<tr>
Строим Web-сайты
148

<td width="200" valign="top" bgcolor="#99CCFF":-
Nav</td>
<td width="400" valign="top">Content</td>
<td width="160" valign="top" bgcolor="#99FF9 Э•
'
>Links</td>

</tr>
</table>
</td>
</tr>
</table>

Обратите внимание, что в листинге 23.2 желаемый цвет задается строкой символов,
называемой шестнадцатеричным кодом цвета. Код начинается со знака решет-
ки (#), за которым следует шестизначное шестнадцатеричное число. В шестнадцате-
ричной системе счисления используется основание 16, а не основание 10, как в нашей
распространенной, ежедневно используемой десятичной системе счисления, что уже
знают фанаты математики, находящиеся среди нас. Первые десять цифр шестнадца-
теричной системы счисления являются обычными десятичными цифрами от 0 до 9.
Оставшиеся шесть цифр - это буквы от А до F, поскольку у нас нет числовых символов
для их представления. Поэтому, когда вы видите шестнадцатеричное значение, напо-
добие FC или FF, не считайте их буквами. На самом деле это числа.


Определение
В шестнадцатеричной системе счисления используется основание
16, а не основание 10. Числовые значения в этой системе представ-
ляются при помощи символов от 0 до 9 для первых десяти цифр, и
символов от А до F для оставшихся шести цифр.




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


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

значение 00 для зеленой составляющей и значение 00 для синей составляющей.
Это абсолютно красный цвет, поскольку в позиции для красной составляющей нахо-
дится значение FF - самое большое значение из всех возможных для двухзначного
шестнадцатеричного числа. Для этого конкретного оттенка составляющие зеленого и
синего цветов не снижают чистоту красного цвета. Подобным образом, код для зеле-
ного цвета равен #00FF00 (ноль красного, полный зеленый, ноль синего), а код для си-
него цвета равен #0OOOFF (ноль красного, ноль зеленого, полный синего).


Совет
Цифры в каждом положении шестнадцатеричного кода числа не обя-
заны совпадать. Код &FC02D5 является отличным шестнадцатерич-
ным цветом, где значение FC находится в позиции для красной сос-
тавляющей, 02 - в позиции для зеленой составляющей, и D5 - в по-
зиции для синей составляющей. Однако для получения наилучших
результатов в Интернете придерживайтесь цифр, кратных трем: 0, 3,
6, 9, С и F. Следовательно, ближайшим Web-эквивалентом для кода
«FC02D5 является код #FF00CC.

Чтобы создать цвет, например, фиолетовый, смешивается вместе пара составляю-
щих. Красная и синяя составляющие создают фиолетовый цвет, поэтому одной из воз-
можностей является смешивание полной красной и полной синей составляющих, как,
например, #FF00FF, что дает очень яркий и чистый цвет. Но, возможно, вы захотите
получить фиолетовый цвет с краснотой. Просто уменьшите уровень синей составля-
ющей, присвоив ей меньшее значение, например, #FF0099 или #FF0066. Чтобы полу-
чить фиолетовый цвет с синевой, выполните противоположное действие. Оставьте
полной синюю составляющую и уменьшите уровень красной составляющей, напри-
мер #9.900FF или #6600FF.


Совет
Если вы по-настоящему ненавидите шестнадцатеричные коды, мо-
жете вместо них всегда указывать название цвета, например,
bgcolor= "lightgreen", однако лучше все же использовать бли-
жайшее шестнадцатеричное значение для Интернета, которое менее
открыто для интерпретации браузером посетителя. Более того, наз-
вания могут вводить в заблуждение. Цвет с названием darkgray (тем-
но-серый) на самом деле соответствует более светлому оттенку се-
рого, чем цвет с названием gray (серый).

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

Табл. 23.1. Распространенные щ>ета и их коды
Шестнадцатери чный
Цвет Название Ближайший
код Web-эквивалент
#OOFFFF
Зеленовато-голубой aqua #00FFFF

#000000
Черный black #000000

blue
Синий #0000FF #0000FF

darkblue #00008B
Синий, темный #000099

Синий, светлый lightblue #ADD8E6 #CCCCFF

#87CEEB
Синий, небесный skyblue #99CCFF

#FFD700
Золотой gold #FFCC00

Серый gray #808080 #999999

Серый, темный #696969 #666666
dimgray
green #008000
Зеленый #009900

darkgreen
Зеленый, темный #006400 #006600

<< Пред. стр.

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

ОГЛАВЛЕНИЕ

След. стр. >>