На http://www.montale-original.ru монталь интенс тиаре, парфюмер.

HTML - Уроки - Программирование дизайна

Применение цветов

Если вы заметили, то уроки приходят к вам на страничках, покрытых бледно-желтым фоном. Это достигается при помощи параметра bgcolor тега <body>, который мы с вами уже знаем.

Конкретно, тег <body> выглядит так:

<body bgcolor="#FFFFCC">

Что означают эти буквы? Это код цвета в шестнадцатеричной системе счисления в представлении RGB. ;-)

Сложно звучит? Сейчас все объясню.

Смешение цветов

В человеческом глазу обнаружено всего три вида рецепторов, чувствительных к трем различным цветам - красному (red), зеленому (green) и синему (blue). Отсюда сокращение RGB. Эти цвета называются основными. Любой цвет, который мы видим - это всего лишь смесь этих трех цветов. Например, лазоревый - это смесь синего и зеленого, а красного в нем нет.

Возможны и другие комбинации основных цветов, каких-то может быть побольше или поменьше, но их всегда только три. Цвета в смеси называется компонентами. Каждая компонента кодируется двумя буквами, поэтому, поскольку всего их три, букв в коде получается шесть.

Полное отсутствие цвета обозначается кодом 00. Говорят, что соответствующая компонента равна нулю. Полное насыщение - кодом FF. Говорят, что компонента равна FF. CC - это некоторое среднее количество цвета. Таким образом, фон данного урока состоит из смеси полных красного и зеленого и некоторого среднего количества (равного CC) синего.

Возможно, вам не кажется совсем очевидным, как получаются цвета из смеси, особенно, если я скажу, что смесь всех трех цветов - это белый цвет! Однако, это именно так! Возьмите увеличительное стекло и посмотрите на белое место на экране вашего монитора - вы увидите, что там есть точки красного, зеленого и синего цветов! Когда в нашем глазу одинаково стимулируются все три вида рецепторов, мы видим именно белый!

Вот как происходит смешение красной и зеленой компонент, при пустой синей. По горизонтали, слева направо, нарастает зеленая компонента. По вертикали, сверху вниз, красная. Значения компонент отмечены в верхнем и левом рядах таблицы. На пересечении размещен квадратик данного цвета. Синяя компонента равна везде 00.

  00 20 40 60 80 A0 C0 E0 FF
00                  
20                  
40                  
60                  
80                  
A0                  
C0                  
E0                  
FF                  

Видно, что когда в смеси нет никаких цветов (левый верхний угол), то получается черный цвет. А когда в смеси полностью присутствует красная и зеленая компоненты, то получается желтый цвет!

Чтобы поверить, что при смеси красного и зеленого получается желтый, помострите на эту картинку:

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

Видно также, что в приведенной палитре нет ничего синего. Я бы даже сказал, не хватает синего :-)

Посмотрим, какую роль играет синяя компонента. Для этого возьмем палитру, приведенную выше, и рассмотрим ее, добавляя туда понемногу синего.

Синего 1/4 доли (код 3F) Синего 1/2 доли (код 7F)
                 
                 
                 
                 
                 
                 
                 
                 
                 
                 
                 
                 
                 
                 
                 
                 
                 
                 
Синаего 3/4 доли (код BF) Синего полная доля (код FF)
                 
                 
                 
                 
                 
                 
                 
                 
                 
                 
                 
                 
                 
                 
                 
                 
                 
                 

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

Самая правая нижняя клетка - это как раз цвет, в котором все три компоненты равны FF - и это белый цвет!

Как же получаются коды компонент?

Шестнадцатеричная система счисления

Как я уже сказал, это числа в шестнадцатеричной системе счисления. В привычной нам десятичной системе счисления десять цифр - 0, 1, 2, 3, 4, 5, 6, 7, 8, 9. В шестнадцатеричной системе их 16 - те же, что и в десятичной, плюс шесть первых латинских букв A, B, C, D, E, F.

Как считать в шестнадцатеричной системе? Так же, как и в десятичной - когда не хватает цифр, заводить новый разряд.

Вот мы досчитываем от 0 до 9, цифры у нас кончаются, и тогда мы заводим разряд десяток, ставим там единицу, а в старом разряде (единиц) начинаем считать опять с нуля - 10, 11, 12, .... Когда доходим до 19, цифры опять кончаются и мы ставим 2 в разряде десяток, а в разряде единиц опять считаем с нуля. Когда мы таким образом доходим до числа 99, то у нас кончаются цифры даже в разряде десяток, и тогда мы заводим разряд сотен, а в старых разрядах начинаем счет снова с нуля - 100, 101, 102, ....

В шестнадцатеричной системе вместо разряда десяток (10), сотен (10*10=100), тысяч (10*10*10=1000) и так далее, вводятся разряды шестнадцаток (16), двухсотпятидесятишестерок (16*16=256) и так далее.

Вот, как происходит счет.

Десятичное Шестнадцатеричное Примечание
0 0 начинаем считать одинаково
1 1  
2 2  
3 3  
4 4  
5 5  
6 6  
7 7  
8 8  
9 9  
10 A в десятичной системе кончились цифры и пришлось завести новый разряд; а в шестнадцатеричной системе цифры еще не кончились, продолжаем считать
11 B  
12 C  
13 D  
14 E  
15 F  
16 10 и вот только тут в шестнадцатеричной системе кончились цифры и мы заводим новый разряд шестнадцаток
17 11  
18 12  

Число десять называется основанием десятичной системы счисления. Число шестнадцать - основанием шестнадцатеричной. Обратите внимание, что основание в своей системе всегда записывается, как 10!

Теперь легко можно понять, как считать значения цветовых компонент в шестнадцатеричной системе. Величины от 0 до F обозначаются с ведущим нулем, то есть, как 00 - 0F. Когда мы хотим прибавить цвета сильно, то изеняем разряд шестнадцаток в соответствующей компоненте. Если чуть заметно - то разряд единиц. При этом надо помнить, что в шестнадцатеричной системе после 9 идет A и что последняя цифра - это F.

Названия цветов

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

Цвет Название по-русски Английский код
  красный red
  зеленый green
  синий blue
  лазоревый cyan
  сиреневый magenta
  желтый yellow
  рыжий orange
  серый gray
  черный black
  белый white

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

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

Тег <font>

Теперь рассмотрим, как окрашивать в разные цвета текст.

Очень просто: есть тег <font>, а у него есть параметр color. Чтобы окрасить кусочек текста в красный цвет, надо приенить код:

<font color="red">красный цвет</font>

Просто, правда?

Применение фоновых рисунков

Часто, чтобы оживить страничку, авторы помещают на ее задний план не равномерный цвет, а целый рисунок. Примерно также, как многие это делают с рабочим столом Windows или X Window. Для этого у тега <BODY> есть другой параметр - background. В его значении указыватеся путь к файлу с рисунком.

Пример такой странички показан здесь.

Если применять эту возможность в лоб, то можно столкнуться с двумя недостатками:

  1. Чтобы файл занимал всю площадь страницы, он должен быть большим и тогда он долго загружается; либо он должен быть низкого качества - это может быть некрасиво.
  2. Если страницу посмотреть на экране большего размера, чем рассчитывал дизайнер, то за краями рисунка он будет повторяться заново; то есть, браузеры обычно располагают фоновый рисунок черепицей.

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

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

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

Библиотеки картинок (Clipart-ы)

Разумеется, чтобы нарисовать хорошую картинку для заднего плана, нужно обладать определенными способностями. Часто те, кто разрабатывают дизайны для сайтов, этим не занимаются. Зато этим занимаются художники, которые создают целые галереи отрывочных картинок, которые ценны не сами по себе, а тем, что их можно встроить в композицию другого произведения, например, сайта.

По-русски такие библиотеки называются библиотеками картинок или клипартов, а по-английски, собственно, clipart-ами. Clip - значит отрывок, а art - искусство. То есть, клипарты - это кусочки искусства. В продаже имеются диски с подобными библиотеками, много их и в сети, в том числе и бесплатных.

Попробуйте найти некоторых из них через поисковую систему.

Таблицы (теги <table>, <tr> и <td>)

Теперь рассмотрим важнейшие для дизайна теги - теги для образования таблицы. Их я уже неоднократно использовал в текстах уроков и любопытные ужа давно могли все подглядеть и во всем разобраться!

Кстати, не стесняйтесь подглядывать за авторами других страниц: в любом браузере есть возможность просмотреть HTML-код страницы, на которую в пришли!

Ну так вот.

Как я уже говорил, HTML строится по иерархическому принципу, одни теги могут быть вложены в другие. Для построения таблицы нужно вложить друг в друга целых три тега!

Первый это тег <table>. Он обрамляет всю таблицу до закрывания </table>.

Внутри тега <table> идет множество тегов <tr>. TR - значит table row, строка таблицы. Внутри каждой таблицы столько тегов <tr>, сколько в ней строк.

И наконец, внутри тегов <tr> идет по несколько тегов <td>. TD - значит table data, данные таблицы. Каждый тег <td> дает на экране клетку, в которой можно что-нибудь написать.

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

Итак, чтобы построить простую таблицу 3 на 3 клетки, надо написать код

<table border="1">
<tr>
<td>
1
</td>
<td>
2
</td>
<td>
3
</td>
</tr>
<tr>
<td>
4
</td>
<td>
5
</td>
<td>
6
</td>
</tr>
<tr>
<td>
7
</td>
<td>
8
</td>
<td>
9
</td>
</tr>
</table>

Довольно длинно, да?

В результате этого кода получится вот такая куцая таблица:

1 2 3
4 5 6
7 8 9

Параметры тега <table>

Обратите внимание, что мы использовали параметр border тега <table>. Он указывает толщину границы в точках (пикселях). Вот какие бы получились таблицы при различных значениях параметра border:

border="0"
border="1"
border="2"
border="3"
border="4"
1 2 3
4 5 6
7 8 9
1 2 3
4 5 6
7 8 9
1 2 3
4 5 6
7 8 9
1 2 3
4 5 6
7 8 9
1 2 3
4 5 6
7 8 9

Обратите внимание, что когда указано border="0" границ вообще не видно и таблица превращается просто в средство расположения текста в нужных местах! Мы поговорим о таком использовании таблиц ниже.

Еще один важный параметр тега <table> - это bordercolor. Он указывает цвет границы.

нет
bordercolor="black"
bordercolor="red"
bordercolor="green"
bordercolor="blue"
1 2 3
4 5 6
7 8 9
1 2 3
4 5 6
7 8 9
1 2 3
4 5 6
7 8 9
1 2 3
4 5 6
7 8 9
1 2 3
4 5 6
7 8 9

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

Установив bordercolor = "black" мы увидим, что параметр border сказывается, в основном, только на толщине внешней границы.

bordercolor="black"
border="0"
border="1"
border="2"
border="3"
border="4"
1 2 3
4 5 6
7 8 9
1 2 3
4 5 6
7 8 9
1 2 3
4 5 6
7 8 9
1 2 3
4 5 6
7 8 9
1 2 3
4 5 6
7 8 9

Еще один важный параметр - это поля вокруг текста, называется он cellpadding.

bordercolor="black" border="1"
cellpadding="0"
cellpadding="1"
cellpadding="2"
cellpadding="3"
cellpadding="4"
1 2 3
4 5 6
7 8 9
1 2 3
4 5 6
7 8 9
1 2 3
4 5 6
7 8 9
1 2 3
4 5 6
7 8 9
1 2 3
4 5 6
7 8 9

Обратите внимание, что значению cellpadding="1" соответствует тот самый вид таблицы, который мы получали, вообще не указывая этого параметра. Иными словами, по умолчанию, браузер делает поле в одну точку.

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

Можно сделать наоборот, чтобы браузер отступал снаружи клетки. Этот отступ управляется параметром cellspacing.

bordercolor="black" border="1"
cellspacing="0"
cellspacing="1"
cellspacing="2"
cellspacing="3"
cellspacing="4"
1 2 3
4 5 6
7 8 9
1 2 3
4 5 6
7 8 9
1 2 3
4 5 6
7 8 9
1 2 3
4 5 6
7 8 9
1 2 3
4 5 6
7 8 9

Обратите внимание, что тут уже значением по умолчанию является отступ в две точки.

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

У нижеследующей таблицы задано width="200"

1 2 3
4 5 6
7 8 9

А у этой - width = "50%"

1 2 3
4 5 6
7 8 9

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

Наконец, последний параметр тега <table>, который мы рассмотрим - это align. Он управляет выравниванием всей таблицы, как целого. Возможные значения этого параметра left (слева), right (справа) и center (середина), вот примеры таблиц с этим параметром

нет align
текст до таблицы
1 2 3
4 5 6
7 8 9
текст после таблицы
align = "left"
текст до таблицы
1 2 3
4 5 6
7 8 9
текст после таблицы
align = "center"
текст до таблицы
1 2 3
4 5 6
7 8 9
текст после таблицы
align = "right"
текст до таблицы
1 2 3
4 5 6
7 8 9
текст после таблицы

Обратите внимание, что align="left" и align="right" ведут себя немного не так, как можно было бы ожидать. При выравнивании по левому и правому краям включается обтекание текста. Если текста много, то таблица оказывается как бы окружена текстом!

Картинки в тегах<td>

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

Но кроме этого, ячейка таблицы может иметь самостоятельный фон.

Для задания фона в ячейке, используются такие же параметры, как и в теге <body> - bgcolor и background.

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

<td background="/images/japan.gif"> 9 </td>

1 2 3
4 5 6
7 8 9

Понятно, что рисунок можно поместить в ячейку и непосредственно, поместив тег <img> внутрь тега <td>.

Это сделано для первой ячейки нижеследующей таблицы, кодом

<td><img src="/images/japan.gif"> </td>

2 3
4 5 6
7 8 9

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

"Плохие" таблицы

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

Например, в нижеследующей таблице я убрал один тег <td> из второй строки и добавил лишний в третью.

1 2 3
4 5
7 8 9 A

Разные браузеры могут по-разному воспринимать эту ситуацию и обычно ничего хорошего в этом нет.

Картинки по частям

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

Зачем это нужно?

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

Есть и другие преимущества.

Самое главное из них, на мой взгляд, состоит в том, что разбивание картинок на части может помочь отвлечься от HTML и заняться дизайном.

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

Пусть у нас есть картика.

При помощи графического редактора, например, Photoshop (там есть Slice tool) мы порезали ее на девять кусочков. Теперь рассуем эти кусочки в нашу таблицу.

Видно, что нам мешают внутриклеточные поля. Уберем их, установив cellpadding=0.

Еще уберем междуклеточные отступы, положив cellspacing = "0"

Наконец, убеерм границы, указав border="0"

Ясно, что такая картика не допускает никаких надвисей на ней. Точнее, все надписи должны быть врисованы в графические файлы. Если мы попытаемся вписать что-то в HTML, то картинка "развалится":

некий текст

Чтобы этого не случилось, надо картику центральной клетки врисовать по-иному. Конкретно - в качестве фона соответствующего тега <td>, то есть, не так

<td><img src="/images/duck_05.gif">некий текст </td>

а вот так

<td background="/images/duck_05.gif">я - утка! </td>

вот, что из этого получится

я - утка!

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

Вот, например, какой файл создает программа Photoshop - duck.

Домашнее задание

Домашнее задание у нас сегодня более сложное, так как пора уже повышать самостоятельность!

  1. Если у Вас еще нет книги по HTML, то купите ее!
  2. Если у Вас еще нет электронного справочника по HTML, то найдите его так, как я предлагал в первом уроке.
  3. Если Вы еще не определились с программой, которую собираетесь использовать, то сделайте это. Напишите мне о своем выборе. Лучше, если это будет не блокнот ;-)
  4. Изучите параметры табличных тегов width, height, colspan и rowspan. Напишите мне, что Вы о них узнали, каковы их особенности.
  5. Изучите тег font.
  6. Я порезал для Вас изображение окна , по следующей схеме

Каждое поле превратилось в следующий файл:

  1. corn_up_lf.gif
  2. window_icon.gif
  3. нет
  4. bord_up.gif
  5. icon_min.gif
  6. icon_max.gif
  7. icon_close.gif
  8. corn_up_rg.gif
  9. bord_rg_up.gif
  10. bord_md_rg.gif
  11. bord_md.gif
  12. bord_rg.gif
  13. corn_dn_rg.gif
  14. bord_dn.gif
  15. corn_dn_lf.gif
  16. bord_lf.gif
  17. bord_md_lf.gif
  18. bord_lf_up.gif
  19. нет

Ну понятно, bord - это border, граница, corn - это corner, угол, lf, dn, rg, up - это left, down, right, up (лево, низ, право, верх, соответственно).

Вот, задание: на своем хостинге надо завести файл window, в котором составить изображение окна из этих кусочков. Условия:

  • текст HTML должен быть написан "лесенкой"
  • внутри окна и в заголовке окна должен присутствовать текст, написанный прямо в HTML
  • середина окна должна быть белой, текст на ней - черным, заголовок окна - синим, цвет текста - белым
  • нарисованное окно должно занимать некоторую часть окна браузера и изменять размеры вместе с ним, не искажаясь
Copyright © 2006-09.