Самоучитель по креативному веб-дизайну. Книга 1, стр.76

дескрипторами строки таблицы (
) для строки под той, в которой вы создали объединяющую два столбца ячейку.)

Работа с шириной границы таблиц и ячеек

Граница {border) — это видимая линия по периметру таблицы и вокруг каждой ячейки внутри таблицы. В отличие от фонов таблицы и ячеек, которые являются независимыми, границы таблицы и ячеек взаимосвязаны. Как вы узнаете из сле —

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

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

по периметру каждой из ячеек внутри нее.

На рис. 2.10 показаны две таблицы. Таблица слева не имеет границ, посколь —

ку значение атрибута border в ее дескрипторе установлено равным «0″.

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

рибута border в ее дескрипторе установлено равным «I й.





92 Глава 2. HTML-таблицы





Примите к сведению, что в стандарте языка HTML граница вокруг таблицы

называется рамкой (frame), а границы вокруг отдельных ячеек внутри таблицы —

линейками (rules). Задание атрибутов bordercoior (цвет границы) и/или border в

дескрипторе воздействует и на рамку таблицы, и на линейки ячеек. На —

пример, задание border=»0″ подразумевает frame=»void» (рамки нет) и

ruies=»none» (линеек нет) — что, в сущности, делает все границы снаружи и внутри таблицы невидимыми. Во время рассмотрения каскадных таблиц стилей (CSS) в главе 4 вы увидите, что новейшие Web-браузеры позволяют управлять ат — рибутами ячеек отдельно от атрибутов таблицы в целом. Вы научитесь создавать CSS-правила, позволяющие задавать ширину и цвет рамки таблицы независимо

от линеек (то есть границ) вокруг ячеек таблицы.



ПРАКТИКУМ

Ранее в этой главе вы узнали, как нарисовать границу шириной в 1 пиксель вок —

руг таблицы и ячеек внутри таблицы, задав атрибут border в дескрипторе

таблицы следующим образом:



Чтобы увеличить ширину границы таблицы, просто увеличьте число пиксе —

лей, присвоенное атрибуту border в дескрипторе таблицы. Например, чтобы нарисовать вокруг таблицы границу шириной 10 пикселей, установите

значение атрибута border в дескрипторе равным «Ю11; результирующая

таблица показана на рис. 2.11.





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

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

границы и таблицы, и ячеек с использованием двух цветов, пытаясь придать таб — лице (и ее ячейкам) трехмерный вид. При использовании границы по умолча —

нию — серой — Web-браузер нарисует левую и верхнюю стороны таблицы светло — серым, а нижнюю и правую стороны таблицы — темно-серым. Web-браузер также

использует два цвета — хотя их нелегко различить при их ширине, составляющей обычно один пиксель — при рисовании границ вокруг ячеек внутри таблицы. Ле —

Глава 2. HTML-таблицы. 93





вая сторона и верх каждой ячейки — темно-серые, тогда как низ и правая сторо —

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



Работа с цветами границ таблицы и ячеек

Как вы уже знаете, граница (border) — это видимая линия по периметру таб — лицы и вокруг каждой из ячеек внутри таблицы. Границы таблицы и ячеек име — ют два атрибута, которые вы можете задать — ширина (с которой вы работали в ходе предыдущего практикума) и цвет. Чтобы настроить цвета границ ячеек и

Самоучитель по креативному веб-дизайну. Книга 1, стр.77

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

из ее ячеек, задайте атрибут атрибут bordercoior в дескрипторе табли —

цы следующим образом:






К сожалению, задание атрибута bordercoior не приводит к одному и тому

же эффекту во всех Web-браузерах. При установке атрибута bordercoior равным

и#оооо8В», например, Netscape Navigator нарисует границы таблицы и ячеек дву — мя цветами — две стороны голубым и две стороны темно-синим. Internet Explorer же поддерживает два дополнительных атрибута для управления цветами границы:

bordercoioriigh t (цвет границы — светлый) и bordercoiordark (цвет грани — цы — темный). Если вы установите только значение bordercoior, Internet Explorer нарисует границы таблицы и ячеек, используя только один цвет — в данном примере темно-синий. (В главе 4, речь в которой пойдет о CSS, вы на —

учитесь создавать CSS-правила, позволяющие управлять атрибутами рамки (то есть границами вокруг таблицы) независимо от атрибутов границ вокруг ячеек.)



ПРАКТИКУМ

Если вы хотите, чтобы Internet Explorer использовал два разных цвета при рисо- вании границ таблицы, вам нужно либо опустить атрибут bordercoior из деск —

риптора (тогда Web-браузер будет использовать границы по умол —

чанию — светло-серые/темно-серые), либо задать в дескрипторе

атрибуты bordercoioriigh t и bordercoiordark. Например, Internet Explorer

проигнорирует задание bordercoior в нижеприведенном дескрипторе и будет использовать значения, присвоенные атрибутам bordercoioriigh t и bordercoiordark, нарисовав верхнюю и левую стороны границы таблицы голу —

бым, а нижнюю и правую стороны границы таблицы — темно-синим:





Атрибуты bordercolorligh t И bordercolordark В вышеприведенном КОДе

также дают Internet Explorer указание нарисовать верхнюю и левую стороны гра — ниц вокруг каждой ячейки голубым, а нижнюю и правую стороны границы — темно-синим.

94 Глава 2. HTML-таблицы





ПРИМЕЧАНИЕ Включив в дескриптор

и атрибут bordercolor, и атрибуты

bordercolorligh t и bordercolordark, вы сможете отображать двухцветные грани —

цы как в Internet Explorer, так и в Netscape Navigator. Internet Explorer будет игнорировать атрибут bordercolo r и использовать значения атрибутов bordercolorligh t и bordercolordark. Netscape Navigator, в то же время, будет игнорировать атрибуты bordercolorligh t и bordercolordar k и использовать для установки цвета границ таб — лицы и ячеек значение атрибута bordercolor.

Самоучитель по креативному веб-дизайну. Книга 1, стр.78



Если посетители вашего сайта будут пользоваться версией Internet Explorer 5

и выше или версией Netscape Navigator 6.1 и выше, вы можете указать цвет каж — дой стороны таблицы и ее ячеек независимо друг от друга с помощью атрибута

style. Например, задав атрибут styl e в дескрипторе , как показано ниже, вы можете окрасить верхнюю (top) и левую (left) стороны таблицы в тем — но-синий, в то же время сделав нижнюю (bottom) и правую (right) стороны таб — лицы голубыми:


border-left-color:#0000FF; border-bottom-color:#00008B;

border-right-color:#00008B»>



Хотя атрибут styl e в данном примере устанавливает один цвет для верхней и левой сторон и другой цвет для нижней и правой сторон, можно установить каждое из четырех свойств border-color внутри атрибута styl e равным своему собственному цвету. Чтобы задать один и тот же цвет для всех четырех сторон таблицы, установите значение свойства border-color равным желаемому цвету следующим образом:






Точно так же, как вы вставляете атрибут styl e в дескриптор для ра —

боты с цветами сторон таблицы, вы можете вставить styl e в дескриптор
, чтобы таким же образом управлять цветами сторон ячейки. Например, окрасить стороны ячейки в красный, синий, зеленый и пурпурный можно путем задания атрибута styl e в дескрипторе :

Самоучитель по креативному веб-дизайну. Книга 1, стр.79


border-right-color:#008000; border-bottom-color:#FF00FF»>

Аналогично, чтобы задать один и тот же цвет для всех сторон ячейки, напри- мер, красный, используйте свойство border-color следующим образом:






Имейте в виду, что использование свойства border-color для задания одного

и того же цвета для всех четырех сторон таблицы или всех четырех сторон ячей —

ки на самом деле дает вам два цвета. Если речь идет о сторонах таблицы, и Internet Explorer, и Netscape Navigator нарисуют верхнюю и левую стороны ука — занным вами цветом, а нижнюю и правую стороны — более темным тоном того

же цвета. Аналогично, когда вы задаете с помощью border-color один цвет для всех сторон ячейки, оба браузера отобразят нижнюю и правую стороны ячейки указанным вами цветом, а верхнюю и левую стороны ячейки — более темным то — ном того же цвета.

Глава 2. HTML-таблицы 95



Работа с фоновыми изображениями и цветами

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

Самоучитель по креативному веб-дизайну. Книга 1, стр.80

ниц вокруг других ячеек в таблице или вокруг самой таблицы — добавьте атрибут bordercoior в дескриптор

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

ячейки должен выглядеть следующим образом:






Для Internet Explorer, в частности, можно указать цвета границы ячейки сле — дующим образом, чтобы верхняя и левая стороны ячейки были нарисованы зеле- ным цветом, а нижняя и правая стороны — светло-зеленым:






ПРИМЕЧАНИЕ Хотя все Web-браузеры поддерживают использование атрибута bordercoio r в дескрипторе

, многие их них не поддерживают использование ат — рибутов bordercoior, bordercolorligh t и bordercolordar k в дескрипторе
. В связи с этим разрабатывайте свои таблицы в соответствии с предположением, что многие

из посетителей вашего Web-сайта будут видеть границу вокруг каждой ячейки того же цвета

(цветов), что и граница по периметру самой таблицы.





Поскольку фоновые изображения и цвета — это «атрибуты» таблицы или ячейки внутри таблицы, они задаются (в форме атрибута border) как часть HTML-дескриптора. (Элементы Web-страниц, такие как таблицы, строки, данные

Самоучитель по креативному веб-дизайну. Книга 1, стр.81

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

ее ячеек — это представлять их себе как накладываемые друг на друга. На рис.

2.12, например, показаны четыре таблицы. Две таблицы в верхней части рисунка суть таблица с фоновым цветом и таблица с фоновым изображением. Две табли —

цы в нижней части рисунка показывают, что произойдет, если дать Web-браузеру

указание нарисовать некоторые из ячеек таблицы с фоновым цветом или фоно — вым изображением.

Фон таблицы — это прямоугольный объект, лежащий поверх Web-страницы, по —

добно подложке в кадре. Отдельные объекты данных прямоугольной формы внутри таблицы — определенные начальным и конечным дескрипторами данных таблицы

( ) — называются ячейками (cells). Таблица лежит поверх фона Web-страни — цы; каждая из ячеек таблицы представляет собой прямоугольный объект, лежащий поверх фона таблицы. Содержимое, помещаемое в ячейку (путем помещения текста и/или HTML-дескрипторов между начальным и конечным дескрипторами данных таблицы ( ) ячейки), в свою очередь, лежит поверх фона ячейки.

96 Глава 2. HTML-таблицы





Когда вы указываете цвет фона таблицы, задавая атрибут bgcolor в дескрипторе

таблицы, Web-браузер «закрашивает» присвоенным атрибуту цветом по умолчанию прозрачный фон таблицы. Например, в следующем дескрипторе

атрибут bgcolor, установленный равным шестнадцатеричному значению

«#OOOOFF», дает Web-браузеру указание закрасить фон таблицы голубым цветом:



Аналогично, если задать в дескрипторе атрибут background, Web — браузер будет использовать графический файл, присвоенный атрибуту, в качестве «обоев» для фона таблицы. Например, в следующем коде атрибут background дает Web-браузеру указание «накрыть» фон таблицы рисунком из файла picture. gif, который хранится в подпапке images Web-сайта:

Самоучитель по креативному веб-дизайну. Книга 1, стр.82



Поскольку каждая из ячеек таблицы, как и сама таблица, имеет фон, цвет

фона или фоновое изображение ячейки задаются в виде атрибута в дескрипторе

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

ячейки. Например, шестнадцатеричное значение и#оооо8В», присвоенное

атрибуту bgcolor в следующем дескрипторе
, дает Web-браузеру указание закрасить фон ячейки темно-синим цветом:



Глава 2. HTML-таблицы 97





Аналогично, если задать в дескрипторе
ячейки атрибут background, Web-браузер будет использовать файл, присвоенный атрибуту, в качестве «обоев» для фона ячейки. Например, в следующем дескрипторе атрибут

background дает Web-браузеру указание «накрыть» фон ячейки рисунком из файла picture. gif, который хранится в подпапке images Web-сайта:






Хотя синтаксис HTML этому не препятствует, не имеет смысла задавать и

цвет фона, и фоновое изображение для одной и той же таблицы или ячейки. Если же вы зададите и цвет, и изображение, «победу» одержит тот атрибут, ко —

торый будет стоять в дескрипторе последним — примерно так же, как при поклейке обоев на окрашенную стену или покраске обоев. То, что наклады — вается на фон последним (иными словами, верхний слой), и будет видеть пользователь. И напротив, если в дескрипторе
ячейки нет ни атрибута background, ни атрибута bgcolor, Web-браузер нарисует фон ячейки так, как будто это прозрачный лист стекла, лежащий поверх фона таблицы. Следователь —

но, «сквозь» прозрачный фон ячейки будет виден фон таблицы.

Подобным образом, поскольку фон таблицы лежит поверх фона Web-страни- цы, фоновое изображение или цвет таблицы скрывают цвет или рисунок, ис — пользуемый в качестве фона Web-страницы. И наоборот, если в дескрипторе

Самоучитель по креативному веб-дизайну. Книга 1, стр.83

таблицы не задан ни атрибут background, ни атрибут bgcolor, Web-бра — узер нарисует фон таблицы так, как будто это прозрачный лист стекла, лежащий поверх фона Web-страницы. Следовательно, «сквозь» прозрачный фон таблицы

будет виден фон Web-страницы. Кстати, несмотря на то, что это могло бы ока — заться довольно-таки оригинальным эффектом, если вы не зададите ни цвета, ни изображения для фона Web-страницы, вы не будете видеть «подложку» своего монитора. Вместо этого Web-браузер установит белый либо серый фон Web-стра — ницы — в зависимости от настроек по умолчанию браузера.

Хотя браузеры в настоящее время поддерживают атрибут background в деск —

рипторах и

, стандарт HTML не разрешает использовать атрибут

background ни с дескриптором, ни с дескриптором
. Более того, атрибут bgcolor — нерекомендованный с момента появления HTML 4.01 — офи — циально объявлен незаконным в стандарте XHTML 1.0. Для задания фонового изображения таблицы либо ячейки действующие стандарты HTML (и XHTML)

Самоучитель по креативному веб-дизайну. Книга 1, стр.84

требуют применять свойство CSS background-image. Например, чтобы указать изображение, которое Web-браузер должен использовать в качестве фона табли —

цы, в дескриптор нужно вставить атрибут style, как показано ниже:


style=»background-image:url(images/picture. GIF)»>

Аналогично, чтобы задать фоновое изображение для ячейки, установите зна-

чение свойства background-image с помощью атрибута styl e в дескрипторе

следующим образом:




9 8 Глава 2. HTML-таблицы





Свойство CSS background-color позволяет выбрать цвет для фона таблицы

и/или фона любой ее ячейки. Например, чтобы задать в качестве цвета фона

таблиц ы ЦВеТ МОРСКОЙ ВОЛНЫ, НУЖНО уСТаНОВИТЬ СВОЙСТВО background-colo r В

дескрипторе следующим образом:






Аналогично, чтобы задать в качестве цвета фона ячейки таблицы темно-си — ний, например, необходимо с помощью атрибута styl e установить значение свойства background-color в дескрипторе
следующим образом:






Определение значения цветового атрибута

Всякий раз, когда вы используете один из атрибутов выбора цвета, такой как bordercolor, bgcolor, bordercolorlight, bordercolordark И Т. Д. В HTML-Деск — рипторе для задания цвета элемента, вы указываете нужный вам цвет в виде шес — тнадцатеричного числа. Например, чтобы создать таблицу со светло-желтым фо —

ном, необходимо указать атрибут bgcolor в дескрипторе таблицы

следующим образом:







Аналогично, чтобы нарисовать темно-синюю границу по периметру таблицы

и вокруг каждой ячейки в таблице, следует задать атрибут bordercolor в деск —

рипторе таблицы следующим образом:




Значение атрибута, которое сообщает Web-браузеру, какой цвет использовать при рисовании элемента Web-страницы или закрашивании фона называется шес —

тнадцатершным (по основанию 16) RGB-триплетом (red-green-blue — красный-зе — леный-синий). Иными словами, большое шестнадцатеричное число на самом деле состоит из трех отдельных шестнадцатеричных значений (отсюда и термин

«триплет»). Эти значения сообщают браузеру, «сколько» красной, зеленой и си — ней составляющих необходимо смешать, чтобы получить цвет, который должен

использовать браузер, рисуя элемент или закрашивая фон.

При создании цвета каждая из трех основных цветовых составляющих (крас — ная, зеленая, синяя) может иметь значение от 0 до 255 включительно, где 0 обо — значает отсутствие, а 255 — максимальное количество. Следовательно, во втором

примере данного практикума, где атрибут bordercolor в дескрипторе

задает темно-синий цвет границ таблицы, значение bordercolor, равное

#00008в, дает Web-браузеру указание создать цвет границы путем смешивания О красного с 0 зеленого с 139 синего. (Шестнадцатеричное значение 8в равно де — сятичному значению 139.) Таким образом, Web-браузер создает заданный вами оттенок путем смешивания нулевого количества красного, нулевого количества зеленого и чуть больше половины максимального количества синего.

Глава 2. HTML-таблицы 99





П1 МСТИКУМ

Чтобы определить шестнадцатеричный RGB-триплет цвета, который вы хотите

ИСПОЛЬЗОВать, зайдите на http://www. htmlhelp. com/cgi-bin/color. cg i ИЛИ сверьтесь с меню цветов шрифта или фона своего любимбго редактора изображе — ний. Большинство графических программ предоставляют RGB-значения, исполь- зуемые для создания цвета, выбранного вами из палитры образцов цветов или смешанного в окне Пользовательские цвета (Custom colors) приложения. Или же, если вы пользуетесь пакетом Microsoft Office, щелкните на кнопке со спис — ком справа от кнопки Font Color (Цвет шрифта) в стандартной панели инструмен — тов Microsoft PowerPoint или Microsoft Word. Затем щелкните на кнопке More Colors (Другие цвета…) внизу раскрывшегося меню. Приложение Office, в свою очередь, отобразит диалоговое окно Colors (Цвета), аналогичное показанному на рис. 2.13.

Самоучитель по креативному веб-дизайну. Книга 1, стр.85





Если содержимое закладки Custom (Спектр) скрыто, щелкните на закладке

Custom (Спектр) в диалоговом окне Colors. Чтобы «смешать» пользовательский

цвет, щелкните на нужном цвете на цветовой палитре в верхней части закладки Custom, а затем на ползунке насыщенности цвета справа от палитры. Всякий раз, когда вы создаете цвет, диалоговое окно покажет вам образец цвета в ниж — нем правом углу диалогового окна и RGB-значение цвета в полях Red (Красный), Green (Зеленый) и Blue (Синий). Если RGB-значения — десятичные, а не шест —

надцатиричные, вам потребуется преобразовать каждое из них в шестнадцатерич —

ный эквивалент. Затем составьте три шестнадцатеричных RGB-значения в один

шестнадцатеричный триплет вида «#RRGGBB» (где RR, GG и вв — шестнадцатерич — ные значения красной, зеленой и синей составляющих смешиваемого цвета). ,



ПРИМЕЧАНИЕ Перечень шестнадцатеричных триплетов можно просмотреть, зайдя на, сайт по адресу http://www. htmlhelp. com/cgi-bin/color. cgi. Кроме того, несколько более длинный перечень шестнадцатеричных триплетов и пример соответствующего каждо —

му из них цвета вы найдете по адресу http://www. hypersolutions. org/pages /

rgbhex. html.

100 Глава 2. HTML-таблицы



Работа с полями ячеек и расстоянием между ячейками таблицы

В то время как задание полей ячейки {cell padding) сообщает Web-браузеру чис —

ло пикселей интервала, который следует оставить между сторонами ячейки и ее содержимым, задание расстояния между ячейками {cell spacing) сообщает Web-бра — узеру размер интервала, который нужно оставить между ячейками и между гра — ницей вокруг таблицы и ее ячейками. На рис. 2.14 показано различие между по — лями ячейки и расстоянием между ячейками.



Полезные ссылки
Случайные записи
  • 10.05.2010">Самоучитель по креативному веб-дизайну. Книга 1, стр.118
  • 27.07.2010">Визуальное оформление для навигации
  • 02.03.2011">Руководство по actionscript. часть 5, стр. 080
  • 23.01.2011">Руководство по actionscript. часть 1, стр. 059
  • 09.05.2010">Самоучитель по креативному веб-дизайну. Книга 1, стр.163
  • 10.05.2010">Самоучитель по креативному веб-дизайну. Книга 1, стр.72
  • 09.03.2011">Руководство по actionscript. часть 4, стр. 053
  • 28.02.2011">Руководство по actionscript. часть 6, стр. 020
  • 16.06.2010">Самоучитель по креативному веб-дизайну. Книга 4, стр.34
  • 30.05.2013">В течение недели LG продемонстрирует гибкую панель OLED в 5 дюймов
  • 23.01.2011">Руководство по actionscript. часть 1, стр. 013
  • 19.05.2010">Самоучитель по креативному веб-дизайну. Книга 2, стр.7
  • 17.03.2011">Руководство по actionscript. часть 2, стр. 153
  • 09.05.2010">Самоучитель по креативному веб-дизайну. Книга 1, стр.137
  • 23.01.2011">Руководство по actionscript. часть 1, стр. 072
Опрос

Какие цвета вы предпочитаете?

View Results

Loading ... Loading ...