Самоучитель по креативному веб-дизайну. Книга 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 показано различие между по — лями ячейки и расстоянием между ячейками.

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





Поскольку атрибуты cellspacin g и ceiipadding оказывают влияние на все

ячейки в таблице, оба атрибута устанавливаются в дескрипторе табли —

цы. По умолчанию и cellspacing, и ceiipadding имеют значение больше нуля.

Например, если вы опустите оба атрибута из дескриптора, Internet

Explorer оставит интервал шириной в два пикселя между каждой ячейкой и меж —

ду границами таблицы и ее ячеек. Следовательно, в Internet Explorer по умолча — нию cellspacin g равен двум (2). Аналогично, если ceiipadding не задан, Internet Explorer оставит интервал шириной в один пиксель между границей каж — дой ячейки и ее содержимым.





Чтобы увеличить интервалы между ячейками в таблице, установите атрибут

cellspacin g в дескрипторе таблицы равным значению больше 1. На — пример, установка атрибута cellspacin g равным десяти (ю) в следующем коде дает Web-браузеру указание оставить интервалы шириной 10 пикселей между каждой из ячеек таблицы и между границей таблицы и ее ячейками:




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





Аналогично, если вы хотите увеличить интервалы между сторонами ячейки и

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

ре не указан атрибут ceiipadding.) Чтобы Web-браузер оставил между сторонами ячейки (то есть границей вокруг ячейки) и ее содержимым интервалы

шириной пять пикселей, предыдущий дескриптор следует записать так:







ХОТЯ В ЭТОМ Примере дескриптор

Содержит И атрибут cellspacing, И атрибут ceiipadding, вовсе не обязательно задавать один из них, чтобы задать другой. Просто имейте в виду, что большинство Web-браузеров будут использо —

вать значение по умолчанию — один (i) или два (2) пикселя — для одного или

обоих атрибутов, если вы явным образом не установите значения атрибута/атри —

бутов в дескрипторе.



Задание размеров таблицы с помощью относительных

и абсолютных значений

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

таблицы атрибут width (ширина) и/или атрибут height (высота). Раз — меры таблицы можно указывать либо в относительных величинах (в виде про — центных отношений), либо в абсолютных величинах (как число пикселей).

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





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

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







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

лицу (и ее ячейки) больше, если посетитель Web-сайта увеличат окно браузера,

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

Если вы не хотите, чтобы Web-браузер изменял размеры таблицы в зависимо — сти от размеров окна браузера, задайте высоту и ширину таблицы в виде фикси — рованного числа пикселей. Например, чтобы Web-браузер каждый раз рисовал таблицу шириной 764 пикселя и высотой 558 пикселей, запишите дескриптор

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






Опустив знак процента (%) в значении атрибута, вы даете Web-браузеру указа — ние использовать значение как число пикселей, а не как процентное отношение. При задании размеров таблицы с помощью абсолютных величин (иными слова — ми, при задании ширины и высоты таблицы как числа пикселей), Web-браузер

не будет изменять ни размеры таблицы, ни размеры ее ячеек при изменении

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





посетителем сайта размеров окна Web-браузера. Например, при разрешении эк —

рана 800×600 и ширине и высоте таблицы 764×558, если посетитель Web-сайта уменьшит высоту окна Web-браузера, на экране будет видна только часть табли — цы. Web-браузер, в свою очередь, добавит в окно вертикальную полосу прокрут- ки, чтобы посетитель сайта мог прокрутить часть таблицы вне экрана в пределах видимой области. (Аналогично, если посетитель уменьшит ширину окна браузе — ра, Windows отобразит горизонтальную полосу прокрутки, позволяющую посети — телю прокручивать содержимое экрана в горизонтальной плоскости.) И наоборот,

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

если посетитель увеличит* разрешение экрана до 1024×768, размер таблицы останет-

ся неизменным, а Web-браузер будет отображать в своем окне пустые места — снизу

и справа от таблицы.

Задавая атрибуты width и height в дескрипторе, имейте в виду, что

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

ячейки таблицы. Предположим, например, вы задали таблицу 764×558, с двумя строками по две ячейки в каждой. Если в каждую ячейку первой строки вы по — местите по рисунку размером 450×350 пикселей, Web-браузер автоматически уве — личит ширину таблицы до 900 пикселей для соответствия ширине данных в таб — лице — то есть двух рисунков в первой строке. Если затем вы поместите графическое изображение размером 450×350 пикселей в одну из ячеек второй строки таблицы, Web-браузер увеличит высоту таблицы до 700 пикселей для со- ответствия высоте двух рисунков в столбце таблицы.



Задание размеров ячеек с помощью относительных и абсолютных величин

Помимо (или вместо) указания размеров таблицы путем задания атрибутов

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



ПРАКТИКУМ

Например, если вы хотите создать таблицу 800×600 с двумя строками по четыре столбца в каждой, вы можете задать каждую ячейку как 200×300 пикселей, запи- сав дескриптор

для каждой ячейки следующим образом:






(Чтобы задать размеры ячейки с данными-заголовками, установите атрибуты width и height в дескрипторе ячейки заголовка.)



ПРИМЕЧАНИЕ При определении ширины таблицы путем задания атрибута widt h в деск — рипторе

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

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

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





Вместо. задания размеров ячейки в виде фиксированного числа пикселей, вы

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

Web-браузер нарисовал таблицу, заполняющую окно браузера и имеющую три столбца равной ширины. HTML-код этой таблицы запишется следующим обра —

зом, как с относительной шириной (заданной значением атрибута width в деск —

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

):





th width=»33%» >3аголовок 2

th width=»33%» Заголовок 3

trXt d width=»33%» >Данные столбца K/td>


Данные столбца 2 >Данные столбца 3





Или, если вы хотите задать таблицу с фиксированной шириной и двумя стол — бцами, занимающими 80 процентов ширины таблицы и одним столбцом, зани — мающим 20 процентов ее ширины, HTML-код таблицы должен выглядеть следу — ющим образом:



width=M40%» >3аголовок K/th>

width=»40%» >3аголовок 2

width=»20%M- >3аголовок 3

width=»40%» >Данные столбца K/td>

td width=»40%» >Данные столбца 2


Данные столбца 3





Если вы задаете ширины ячеек таблицы как процентные отношения к шири —

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

(если таковые имеются) и дескрипторах

для одной строки не превышала

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

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

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

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

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

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





Выравнивание содержимого ячейки по горизонтали и по вертикали

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

содержимое в ячейке по левому краю ячейки.





Чтобы изменить выставляемое по умолчанию горизонтальное (то есть слева на — право) выравнивание содержимого ячейки, добавьте в дескриптор

ячейки атрибут align. Атрибут alig n может получать три возможных значения:

• left. Выравнивает содержимое по левому краю ячейки.

• right. Выравнивает содержимое по правому краю ячейки.

• center. Центрирует содержимое между левым и правым краями ячейки.

На рис. 2.15 показано, как Internet Explorer отобразит таблицу, определенную следующим HTML-кодом, в дескрипторах
которой использовано каждое из допустимых значений атрибута align:





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


ячейки атрибут vaiign. АтрибутУ vaiign может принимать четыре возможных

значения:

• top. Отображает содержимое так, что оно начинается у верхнего края ячейки.

• middle. Центрирует содержимое вертикально между верхним и нижним краями ячейки.

• baseline. В Netscape Navigator отображает содержимое так, что оно закан- чивается у нижнего края ячейки. В Internet Explorer задание значения

«baseline » («по базовой линии») изменяет только вертикальное положе — ние текста в ячейке, если ячейка содержит и текст, и изображение. При

задании значения «baseline » Internet Explorer позиционирует текст так, чтобы он заканчивался вровень с нижним краем рисунка. Если в ячейке нет рисунка, Internet Explorer игнорирует значение «baseline » атрибута vaiign и начинает текстовое содержимое у верхнего края ячейки.

• bottom. Отображает содержимое так, что оно заканчивается у нижнего края ячейки.

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





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

вано каждое из возможных значений атрибута vaiign:



Выравнивание таблицы на Web-странице

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

Пока содержимое ячейки уже ширины самой ячейки, с помощью атрибута alig n

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

нировать всю таблицу в горизонтальной плоскости на Web-странице с помощью атрибута align.

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





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

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

атрибут alig n внутри дескриптора равным «left» , «right » ИЛИ «center » — в зависимости от того, как должна быть выровнена таблица относи — тельно левого и правого краев Web-страницы.

Например, чтобы Web-браузер отобразил таблицу по правому краю Web-стра — ницы (вместо левого края по умолчанию), заключите определение таблицы меж —

ду начальным и конечным дескрипторами блока (). Затем установи —

те атрибут alig n внутри дескриптора равным «right» , как показано в

первой строке приведенного ниже HTML-кода: ^Ш





Если ваш дескриптор будет включать в себя атрибут width, установ-

ленный равным «Ю0%» или значению в пикселях, которое превышает ширину окна браузера в пикселях, Web-браузер будет игнорировать атрибут alig n внутри дескриптора в начальном и конечном дескрипторах блока () вокруг определения таблицы.

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



Управление шириной и высотой ячейки с помощью вставки прозрачного GIF-изображения

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

дескриптором

безматрибутов width или height. Если вы поместите в ячей —

ку графическое изображение размером 150×100 пикселей, Web-браузер автомати — чески нарисует ячейку с шириной 150 пикселей и высотой 100 пикселей так, чтобы рисунок в нее помещался. Аналогично, если вы вставите это же изображе — ние размером 150×100 пикселей в ячейку, определенную с шириной и высотой, равными, например, 50 пикселей, Web-браузер «растянет» ячейку от заданных размеров 50×50 пикселей до таких, которые позволят вместить в нее графическое изображение.

Присущим браузеру свойством изменять размер ячеек можно воспользоваться,

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



Полезные ссылки
Случайные записи
  • 11.05.2010">Самоучитель по креативному веб-дизайну. Книга 1, стр.22
  • 18.05.2010">Самоучитель по креативному веб-дизайну. Книга 2, стр.78
  • 10.03.2011">Руководство по actionscript. часть 4, стр. 035
  • 11.05.2010">Самоучитель по креативному веб-дизайну. Книга 1, стр.25
  • 05.03.2011">Руководство по actionscript. часть 5, стр. 013
  • 08.03.2011">Руководство по actionscript. часть 4, стр. 078
  • 23.08.2011">Пиво не только вредно, но и полезно!
  • 17.05.2010">Самоучитель по креативному веб-дизайну. Книга 2, стр.117
  • 23.01.2011">Руководство по actionscript. часть 1, стр. 065
  • 06.03.2011">Руководство по actionscript. часть 4, стр. 135
  • 11.05.2010">Самоучитель по креативному веб-дизайну. Книга 1, стр.36
  • 27.02.2011">Руководство по actionscript. часть 6, стр. 038
  • 02.03.2011">Руководство по actionscript. часть 5, стр. 105
  • 03.06.2010">Самоучитель по креативному веб-дизайну. Книга 3, стр.86
  • 12.03.2011">Руководство по actionscript. часть 3, стр. 134
Опрос

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

View Results

Loading ... Loading ...