КОМПЬЮТЕРНЫЕ КУРСЫ "ПОИСК"
УЧЕБНЫЕ МАТЕРИАЛЫ ПО ПРОГРАММИРОВАНИЮ, КРЕКИНГУ, HTML, CSS, ОФИСНЫМ ПРИЛОЖЕНИЯМ
[Главная страница] [HTML/CSS] [Контакты]
Вопросы, касающиеся макетов
8. Раскрашивание ячеек таблицы
Ячейки таблицы в языке HTML имеют атрибут bgcolor, управляющий цветом фона ячейки. Задание цветов фона для определенных ячеек в макете придает вашему дизайну большую выразительность без использования файлов изображений. Сравните макет, представленный на рисунке 8.1, с макетом на рисунке 8.2, и вы согласитесь с этим.
Рис. 8.1. Ячейки таблицы в данном макете не используют цвета фона
Листинг 8.1. Просмотр исходного кода для рисунка 8.1.
<table width="760" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="760" valign="top">Logo</td>
</tr>
<tr width="760" valign="top">
<table width="760" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="200" valign="top">Nav</td>
<td width="400" valign="top">Content</td>
<td width="160" valign="top">Links</td>
</tr>
</table>
</tr>
</table>
 |
Совет Используйте вместо файлов изображений цвета фона везде, где это возможно. Поскольку цвета определяются в языке HTML, вашим посетителям не придется загружать отдельные файлы изображений, чтобы увидеть цвет. |
Рис. 8.2. Указав цвета фона для областей
Logo (Логотип), Nav (Навигация)
и Links (Ссылки), вы создадите более выразительную страницу
без использования файлов изображений
Листинг 8.2. Просмотр исходного кода для рисунка 8.2.
<table width="760" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="760" valign="top" bgcolor="#99CCFF">Logo</td>
</tr>
<tr width="760" valign="top">
<table width="760" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="200" valign="top" bgcolor="#99CCFF">Nav</td>
<td width="400" valign="top">Content</td>
<td width="160" valign="top" bgcolor="99FF99">Links</td>
</tr>
</table>
</tr>
</table>
Обратите внимание, что в листинге 8.2 желаемый цвет задается строкой символов, называемой шестнадцатеричным кодом цвета. Код начинается со знака решетки (#), за которым следует шестизначное шестнадцатеричное число. В шестнадцатеричной системе счисления используется основание 16, а не основание 10, как в нашей распространенной, ежедневно используемой десятичной системе счисления, что уже знают фанаты математики, находящиеся среди нас. Первые десять цифр шестнадцатеричной системы счисления являются обычными десятичными цифрами от 0 до 9. Оставшиеся шесть цифр - это буквы от А до F, поскольку у нас нет числовых символов для их представления. Поэтому, когда вы видите шестнадцатеричное значение, наподобие FC или FF, не считайте их буквами. На самом деле это числа.
|
Определение В шестнадцатеричной системе счисления используется основание 16, а не основание 10. Числовые значения в этой системе представляются при помощи символов от 0 до 9 для первых десяти цифр, и символов от А до F для оставшихся шести цифр. |
|
Совет Убедитесь, что на фоне цвета ячейки таблицы текст виден отчетливо. Если контраст выглядит так, будто можно было пойти другим путем, значит вы допустили ошибку из-за невнимательности. |
Шестнадцатеричный код цвета включает три набора шестнадцатеричных чисел по два разряда каждый. Первый двухзначный набор отвечает за количество красного в цвете. Второй набор управляет количеством зеленого, а третий - количеством синего. Смешивание различных уровней красного, зеленого и синего цветов создает каждый отдельный цвет, который вы видите на экране. Чем выше значение конкретного двухзначного набора, тем более заметным будет составляющий цвет в конечном оттенке.
Возьмем шестнадцатеричный код для красного цвета, который равен #FF0000. Если его разложить на составляющие, мы получим значение FF для красной составляющей, значение 00 для зеленой составляющей и значение 00 для синей составляющей. Это абсолютно красный цвет, поскольку в позиции для красной составляющей находится значение FF - самое большое значение из всех возможных для двухзначного шестнадцатеричного числа. Для этого конкретного оттенка составляющие зеленого и синего цветов не снижают чистоту красного цвета. Подобным образом, код для зеленого цвета равен #00FF00 (ноль красного, полный зеленый, ноль синего), а код для синего цвета равен #0OOOFF (ноль красного, ноль зеленого, полный синего).
|
Совет Цифры в каждом положении шестнадцатеричного кода числа не обязаны совпадать. Код #FC02D5 является отличным шестнадцатеричным цветом, где значение FC находится в позиции для красной составляющей, 02 - в позиции для зеленой составляющей, и D5 - в позиции для синей составляющей. Однако для получения наилучших результатов в Интернете придерживайтесь цифр, кратных трем: 0, 3, 6, 9, С и F. Следовательно, ближайшим Web-эквивалентом для кода #FC02D5 является код #FF00CC. |
Чтобы создать цвет, например, фиолетовый, смешивается вместе пара составляющих. Красная и синяя составляющие создают фиолетовый цвет, поэтому одной из возможностей является смешивание полной красной и полной синей составляющих, как, например, #FF00FF, что дает очень яркий и чистый цвет. Но, возможно, вы захотите получить фиолетовый цвет с краснотой. Просто уменьшите уровень синей составляющей, присвоив ей меньшее значение, например, #FF0099 или #FF0066. Чтобы получить фиолетовый цвет с синевой, выполните противоположное действие. Оставьте полной синюю составляющую и уменьшите уровень красной составляющей, например #9900FF или #6600FF.
|
Совет Если вы по-настоящему ненавидите шестнадцатеричные коды, можете вместо них всегда указывать название цвета, например, bgcolor="lightgreen", однако лучше все же использовать ближайшее шестнадцатеричное значение для Интернета, которое менее открыто для интерпретации браузером посетителя. Более того, названия могут вводить в заблуждение. Цвет с названием darkgray (темно-серый) на самом деле соответствует более светлому оттенку серого, чем цвет с названием gray (серый). |
Немного попрактиковавшись, вы можете научиться смешивать любые необходимые цвета, не утруждая себя запоминанием чего-либо из таблиц, похожих на таблицу 8.1, в которой приведены названия и шестнадцатеричные коды цветов для распространенных оттенков.
| Цвет | Название | Шестнадцатиричный код | Ближайший Web-эквивалент |
|---|---|---|---|
| Зеленовато-голубой | aqua | #00FFFF | #00FFFF |
| Черный | black | #000000 | #000000 |
| Синий | blue | #0000FF | #0000FF |
| Синий, темный | darkblue | #00008B | #000099 |
| Синий, светлый | lightblue | #ADD8E6 | #CCCCFF |
| Синий, небесный | skyblue | #87CEEB | #99CCFF |
| Золотой | gold | #FFD700 | #FFCC00 |
| Серый | gray | #808080 | #999999 |
| Серый, темный | dimgray | #696969 | #666666 |
| Зеленый | green | #008000 | #009900 |
| Зеленый, темный | darkgreen | #006400 | #006600 |
| Зеленый, светлый | lightgreen | #90EE90 | #99FF99 |
| Зеленый, морской | seagreen | #2E8B57 | #339966 |
| Индиго | indigo | #4B0082 | #330099 |
| Оранжевый | orange | #FF5A00 | #FF9900 |
| Розовый | pink | #FFC0CB | #FFCCCC |
| Пурпурный | purple | #800080 | #990099 |
| Красный | red | #FF0000 | #FF0000 |
| Красный, темный | darkred | #8B0000 | #990000 |
| Серебристый | silver | #С0С0С0 | #CCCCCC |
| Фиолетовый | violet | #EE82EE | #FF99FF |
| Белый | white | #FFFFFF | #FFFFFF |
| Желтый | yellow | #FFFF00 | #FFFF00 |
Цвет с названием darkgray (темно-серый) на самом деле светлее, чем цвет с названием gray (серый). Вместо него используйте цвет dimgray (тускло-серый).