Druzya.org
Возьмемся за руки, Друзья...
3 2, столбец 1 и 2 2 K/td> 2 3 И, наконец, вы можете создать ячейку, объединяющую и несколько строк, и несколько столбцов, как, например, вторая ячейка сверху на правой стороны таб- лицы на рис. 2.9, задав в дескрипторе
 
 
Наши Друзья

Александр Градский
Мемориальный сайт Дольфи. Светлой памяти детей, погибших 1 июня 2001 года, а также всем жертвам теракта возле Тель-Авивского Дельфинариума посвящается...

 
liveinternet.ru: показано количество просмотров и посетителей
Библиотека :: Компьютеры и Программирование :: К.Джамса, К.Кинг, Э.Андерсон - Эффективный самоучитель по креативному Web-дизайну. HTML, XHTML, CSS, JavaScript, PHP, ASP, ActiveX.
Всякий раз, когда браузер считывает внутри определения таблицы дескриптор , он должен перейти на новую строку таблицы, тогда как дескриптор , дает браузеру указание поместить все считан- ное им до дескриптора в одну ячейку таблицы. Следовательно, в данном примере первый дескриптор , стоящего перед дескриптором , Web-брау- зер помещает все, что заключено между второй парой начального и конечного дескрипторов данных таблицы () (в данном примере "В") во вторую (вправо) ячейку первой строки таблицы. (Если бы перед дескриптором имелась третья пара начального и конечного дескрипторов данных таблицы (), Web-браузер поместил бы все, что находилось бы между этими дес- крипторами, в третью ячейку (вправо) первой строки таблицы и т.д.) Дескриптор говорит браузеру: "Все. В текущей строке больше ячеек нет", после чего браузер ожидает увидеть либо новый дескриптор , либо дескриптор . В данном примере структура < t r x t d x / t d x t d x / t d x / t r> повторя- ется еще два раза (таким образом, отдавая браузеру указание создать еще две строки по две ячейки (или столбца) каждая) перед тем, как дескриптор в последней строке кода просигнализирует об окончании определения HTML-таблицы. Добавление границ, заголовков столбцов/строк и заголовка таблицы Если вы хотите воспользоваться HTML-таблицей для отображения табличных данных (вместо применения таблицы в качестве инструмента компоновки стра- ницы, о чем пойдет речь ниже в этой главе), вам нужно будет нарисовать грани- цы вокруг таблицы и каждой из ее ячеек и добавить заголовок (название) табли- цы, который будет резюмировать данные, содержащиеся в таблице. Более того, в большинстве своем табличные данные включают в себя строку и/или столбец за- головков, которые сообщают читателю значение элементов в отдельной строке или столбце (либо же отношения между ними). На рис. 2.6, например, показана таблица с видимыми границами, заголовками столбцов и заголовком таблицы. 86 Глава 2. HTML-таблицы Fife Edit Viem Fsvaites Iooh Help LMu * Ш ^ . "' • J Ld Ы S4 BacK : Stop Reffcsh Home Search Дескрипторы и атрибуты, используемые дня создали* таБтш НТМ^дгсэсрюггор/атрнбут Олнсашк
 [Весь Текст]
Страница: из 389
 <<-
  
Эффективный самоучитель по креативному Web-дизайну. 
HTML, XHTML, CSS, JavaScript, PHP, ASP, ActiveX. 
Текст, графика, звук и анимация 

Книга одного из наиболее известных «гуру» в области Wfeb-дизайна, Криса Джамса, 
Эффектив- 
ный самоучитель по креативному Web-дизайн. HTML, XHTML, CSS, JavaScript, PHP, 
ASP, ActiveX. 
Текст, графика, звук и анимация является не просто очередным учебным пособием в 
этой сложной и 
многогранной области, изобилующей множеством разнообразных технологий и приемов.
 Это настоя- 
щая «книга рецептов» для тех, кто желает быстро и эффективно получить 
минимальных набор знаний 
и навыков, дабы немедленно приступить кразработке Web-сайтов профессионального 
качества. Удачно 
подобранные примеры и их решения в реальных ситуациях, простой и точный стиль 
изложения, боль- 
шой объем работающего кода и иллюстраций — вот лишь несколько очевидных 
достоинств книги, 
выгодно отличающих ее от множества ей подобных. В ней приводятся оптимальные 
решения более чем 
300 задач, возникаю щихв повседневной практике, программирования для Web. 
Подробно рассматри- 
ваются такие вопросы, как создание динамических сайтов с использованием HTML, 
JavaScript и 
CSS-стилей, внедрение мультимедиа-элементов в Web-страницы, подготовка 
мультимедиа-содержи- 
мого, создание и использование Java-аплетов и ActiveX-объектов, написание 
серверных сценариев на 
РНР и ASP, создание баз данных для Web и многие другие. Большое внимание 
уделяется вопросам 
производительности и готовности Web-сайтов, а также методике повышения 
безопасности пользова- 
телей и защите критически важной информации. 
Книга рекомендуется, в первую очередь, тем, кто совершает первые шаги в области 
разработки для 
Wfeb, однако принесет несомненную пользу и профессионалам, за плечами которых 
имеется солидный 
опыт создания Web-приложений. 
ББК 32.973.2 
Original edition copyright © 2003 by McGraw-Hill Companies as set forth in 
copyright notice of 
Proprietor's edition. All rights reserved. 
Russian language edition copyright © 2004 by DiaSoft Publishing House. All 
rights reserved. 
Лицензия предоставлена издательством McGraw-Hill/Osborne. 
Все правазарезервированы, включая право на полное или частичное воспроизведение 
в какой бы то ни было форме. 
Материал, изложенный в данной книге, многократно проверен. Но поскольку 
вероятность технических оши- 
бок все равно остается, издательство не может гарантировать абсолютную точность 
и правильность приводимых 
сведений. В связи с этим издательство не несет ответственности за возможные 
ошибки, связанные с использова- 
нием книги. 
Все торговые знаки, упомянутые в настоящем издании, зарегистрированы. Случайное 
неправильное использо- 
вание или пропуск торгового знака или названия его законного владельца не 
должно рассматриваться как 
нарушение прав собственности. 
ISBN 5-93772-128-4 (рус.) © Перевод на русский язык. ООО «ДиаСофтЮП», 2005 
ISBN 0-07-219394-8 (англ.) © McGraw-Hill/Osborne, 2003 
© Оформление. ООО «ДиаСофтЮП», 2005 
Гигиеническое заключение №77.99.6.953.П.438.2.99 от 04.02.1999

Оглавление 
Введение 12 
Глава 1. Основы языка HTML 19 
Роль Web-браузеров и Web-страниц 21 
Контейнернье HTML-дескригтгоры 23 
HTML-дескригтторы разделов 24 
Пустые HTML-дескригтгоры 25 
Создание Web-страницы 25 
Управление форматированием текста 26 
Атрибуты в HTML ; 28 
Работа со шрифтами ; 29 
Назначение одного и того же набора атрибутов множеству элементов страницы 30 
Создание Web-страниц с помощью текстовых редакторов, текстовых процессоров 
и программ компоновки Web-страниц 30 
Работа с относительными и абсолютными адресами файлов 34 
Загрузка и установка персонального Web-сервера 35 
Работа с персональным Web-сервером и публикация Web-страниц 38 
Описание содержимого Web-страницы при помощи заголовка 42 
Идентификация Web-документов с помощью определения типа документа 44 
Вставка комментариев в Web-документы ; 45 
Определение гарнитуры шрифта текста Web-страницы 47 
Управление структурой текста с помощью дескрипторов абзаца и перевода строки 48 

Изменение размера текста с помощью дескрипторов уровней заголовков и атрибута 
size дескриптора шрифта 52 
Изменение цвета текста в HTML-документе 53 
Добавление графики в Web-страницу с помощью базового дескриптора  , 55 
Изменение выравнивания текста и графики 57 
Добавление гипертекстовых ссылок 59 
Выделение отдельных букв и слов с помощью дескрипторов форматирования символов 
61 
Использование специальных символов в HTML-документах ,63 
Использование горизонтальных линий для структурирования Web-содержимого 64 
Использование дескрипторов блоков цитирования для управления левым и правым 
отступами текста 66 
Создание упорядоченных и неупорядоченных списков 68 
Создание вложенных списков , 70 
Создание списков определений 71 
Использование дескрипторов предварительно форматированного текста для 
управления 
отображением Web-содержимого 72 
Отображение навигационного меню в фрейме Web-страницы 73 
Одновременный вывод на экран нескольких Web-страниц ' 76 
Глава 2. HTML-таблицы 79 
Понимание HTML-дескрипторов, используемых для создания таблиц 83 
Создание таблиц с ячейками, объединяющими несколько столбцов и несколько строк 
89 
Работа с шириной границы таблиц и ячеек 91 
Работа с цветами границ таблицы и ячеек 93 
Работа с фоновыми изображениями и цветами 95 
Определение значения цветового атрибута 98 
Работа с полями ячеек и расстоянием между ячейками таблицы 100 
Задание размеров таблицы с помощью относительных и абсолютных значений 101 
Задание размеров ячеек с помощью относительных и абсолютных величин 102 
Выравнивание содержимого ячейки по горизонтали и по вертикали 104 
Выравнивание таблицы на Web-странице 105

Оглавление 
Управление шириной и высотой ячейки с помощью вставки прозрачного 
GIF-изображения 107 
Обтекание текстом изображения 109 
Отображение с помощью таблицы галереи миниатюр 110 
Создание маркеров и списков с помощью таблиц и графики 112 
Создание бокового навигационного меню с помощью таблицы 114 
Добавление графики и ссылок в ячейки таблицы 115 
Управление границами на Web-странице с помощью вложенных таблиц 116 
Составление навигационной карты путем помещения фрагментов изображения в 
таблицу 117 
Разрезание графического изображения на фрагменты для вставки в ячейки таблицы с 
целью создания 
быстрозагружаемой Web-графики 118 
Снижение времени, затрачиваемого Web-браузером на рисование таблицы 120 
Имитация фреймовой Web-страницы с помощью таблицы 121 
Привлечение внимания посетителя с помощью цвета фона ячеек 123 
Визуальное выравнивание содержимого Web-страницы с помощью видимых границ 
таблицы 124 
Управление расстоянием между колонками и шириной полей текста на Web-странице 
126 
Глава 3. HTML-формы 128 
Обработка HTML-форм 130 
Дескрипторы и атрибуты, используемые для создания форм 132 
Создание на форме однострочного поля ввода 135 
Создание на форме многострочного поля ввода 136 
Проверка данных текстового элемента перед передачей результатов заполнения 
формы 138 
Создание на форме флажков -. 140 
Создание на форме переключателей 142 
Проверка выбора группы переключателей перед передачей результатов формы 143 
Создание на форме выпадающего списка (меню выбора) 146 
Проверка выбора элемента списка перед передачей результатов формы 148 
Изменение элементов списка выбора на основании введенных посетителем д а н н ы 
х . . . 1 5 0 
Передача всех значений списка выбора на Web-сервер с использованием скрытых 
полей 152 
Создание на форме кнопки Reset 153 
Предотвращение случайной очистки посетителем элементов формы 155 
Создание на форме кнопки Submit 156 
Замена стандартных кнопок Submit и Reset другими графическими изображениями 157 

Отправка результатов формы по электронной почте без использования Щ l-сценария 
159 
Управление расположением элементов и текста формы с помощью HTML-таблиц, 161 
Создание клавиши быстрой навигации по форме с помощью дескриптора
, следующий за дескриптором
дает Web-браузеру указание поместить "А" В первую слева ячейку в новой строке таблицы, начатой браузером после обработ- ки дескриптора
. Третья строка кода в HTML-таблице в данном примере выглядит так: B Поскольку перед вторым дескриптором нет дескриптора
Начало и когеы опредытеиия таблицы. ; Начаш и конец определения элемента данных таблицы. | border Ширина (Б пикселях) границ по перкнетру таблицы и ее ячеек.:; ; <С АРТЮЫ> Начало и конец текста заголовки таблицы. <ТН>*<Л*Н> :Начшю н конец текста заголовка столбца/строки табгащы. Й~Оопв • - | 4v Computer . , ,,, Рис. 2.6. Таблица для отображения информации в табличном формате В HTML-дескрипторе определения таблицы предусмотрен атрибут border (граница), с помощью которого можно дать Web-браузеру указание отобразить границу вокруг таблицы и вокруг каждой из ее ячеек. Кроме того, с помощью начального и конечного дескрипторов заголовка таблицы () можно задать название (или заголовок) таблицы, а с помощью начального и ко- нечного дескрипторов заголовков столбцов/строк () дать Web-браузеру указание отформатировать содержимое ячейки в виде заголовка: border. Атрибут дескриптора , сообщающий Web-браузеру число пикселей — ширину границы, которую браузер должен нарисовать вокруг таблицы и каждой ее ячейки. • . Дает Web-браузеру указание применить к тексту между начальным и конечным дескрипторами стиль заголовка (большин- ство браузеров используют для этого полужирный шрифт). • . Сообщает Web-браузеру, что текст между начальным и конеч- ным дескрипторами должен быть отформатирован как текст заголовка (большинство браузеров используют для этого полужирный шрифт). Дескрипторы заголовков таблиц и столбцов/строк особенно важны для незря- чих, поскольку браузеры, разработанные для пользователей с ослабленным зре- нием, будут произносить по-иному их, чтобы провести различие между заголов- ками таблицы и столбцов/строк и данными таблицы. Кроме того, в дескриптор можно включить атрибут summary (резюме), чтобы предоставить более подробное описание назначения таблицы для посетителей, пользующихся брау- зерами на основе речевого или Брайль-интерфемса. Чтобы отобразить таблицу с границами, заголовком и заголовками столбцов вроде той, которая показана на рис. 2.6, сначала нужно изменить дескриптор таблицы , включив в него атрибут border, которому присваивается ши- рина в пикселях границы таблицы. Например, чтобы нарисовать границы шири- ной 1 пиксель (как у таблицы на рис. 2.6), дескриптор таблицы должен будет выглядеть следующим образом:
Глава 2. HTML-таблицы 87 Затем, чтобы снабдить таблицу названием (заголовком), в определение табли- цы сразу же после дескриптора нужно вставить начальный и конечный дескрипторы заголовка таблицы (). Таким образом, первая строка кода (с одним лишь дескриптором ) в предыдущем примере пре- вращается в следующие две строки кода, которые дают Web-браузеру указание нарисовать таблицу с границами шириной 1 пиксель и заголовком: border="l"> <сарЪ1оп>Дескрипторы и атрибуты, используемые для создания таблиц Примите к сведению, что в новейших спецификациях языка HTML (начиная со стандарта HTML 4.01) указано, что элемент caption, если таковой присут- ствует, должен следовать сразу же за открывающим дескриптором . Затем, чтобы поместить вверху каждого столбца таблицы заголовок, вставьте начальные и конечные дескрипторы заголовков столбцов/строк таблицы () с текстом заголовков между ними после дескриптора , начинающего строку, в которой должны быть отображены заголовки. Например, чтобы доба- вить заголовок над каждым столбцом в таблице из двух столбцов, вам нужно бу- дет написать следующий код:
<сарЪд.оп>Дескрилторы и атрибуты, используемые для создания таблиц HTML-flecKpnnTop ). Например, приведенный ниже HTML-код с двумя парами — начальным и конечным - дескрипторов заголовков столбцов/строк таблицы () после одного дескриптора , дает Web-браузеру указание создать таблицу с двумя заголовками в разных столбцах одной и той же строки:
OnncaHne Чтобы добавить вместо строки заголовков столбец заголовков, добавьте пару (начальный и конечный) дескрипторов заголовка столбца/строки (), между которыми заключен текст заголовков, в каждую строку элементов данных, обозначенную начальным и конечным дескрипторами строки таблицы (
3aronOBKM, расположенные в CTpoi 3aronoBOK <Й1>Заголовок a4pdica 1,
CTpOKa, 1, э CTpOKa 2, CTpoKa 2,
K/th> элемент элемент элемент элемент /tr> K/td> 2 K/td> 2«УуеШХ/1г> g 88864= п86Я6 Ш? 6 3§Ш98Ш1 1 8ЙЙ8 й Ж 16 6Ш§6Й Глава 2. HTML-таблицы На рис. 2.7 две таблицы, полученные из определений таблиц из двух преды- дущих примеров, показаны рядом друг с другом, так что можно сравнить вне- шний вид таблицы с заголовками в строку с таблицей, заголовки которой распо- ложены в столбец: Е' f l T ' 'У i i: ' " V * If Л 'fiii'i lifiiiiit: i 11 ffil f 'ti'rtV TWIT 11 "i •' i 7' M иГТ Заголэвга в строку 1 Зиалемк 1 Заголовок 2 Строка 1, злемект Строга 1, отеимг 1 -:2 Строка 2, элемент 'Строка 2, элкмек Заголовет в столбец Запловвх I ^Строка 1, аимкнт 1 Строка 1,: х 2 'Строга 2, эпгкект 1 Строка 2, мвжнт 2 Рис. 2.7. Заголовки таблиц могут располагаться в строку (слева) или в столбец (справа) Использование таблицы для компоновки страниц При использовании таблицы для вывода табличных данных можно позволить данным в таблице диктовать размеры ячеек таблицы и, следовательно, размеры самой таблицы. Однако если вы собираетесь использовать HTML-таблицу в каче- стве ячеистой "сетки" для позиционирования графических изображений и тек- ста в определенных местах на Web-странице, вам потребуется проделать две вещи. Во-первых, нужно "скрыть" границы таблицы. Во-вторых, вы должны иметь возможность контролировать размеры таблицы и размеры ячеек в таблице. Вы уже знаете, как сделать границу таблицы невидимой — просто не вклю- чайте в дескриптор таблицы атрибут border. Или же, если вы хотите, чтобы "невидимость" (иными словами, ширина, равная 0 пикселей) границ таб- лицы была задана явным образом, а не "подразумевалась", запишите дескриптор следующим образом: Если ширина и высота ячеек таблицы не указаны, Web-браузер изменяет их размеры в соответствии с помещенными в них данными. Браузер установит ши- рину каждого столбца равной ширине самого широкого объекта в ячейках столб- ца. Аналогично, высоту каждой строки Web-браузер установит в соответствии с высотой самого "высокого" объекта в строке. Минимальные высота и ширина ячейки, содержащей графическое изображение — это размеры графического изоб- Глава 2. HTML-таблицы 89 ражения. Минимальная ширина ячейки с одними лишь текстовыми данными — это число символов в самом длинном слове или числе, а минимальная высота — высота самого высокого символа. Создание таблиц с ячейками, объединяющими несколько столбцов и несколько строк Ранее в этой главе вы научились создавать ячейки таблицы с помощью начальных и конечных дескрипторов заголовков столбцов/строк таблицы () и начальных и конечных дескрипторов данных таблицы (). Вы также узнали, как задавать атрибуты width (ширина) и height (высота) в дескрипторах Если бы ячейка объединяла три столбца, значение атрибута coispan было бы установлено равным "3" и т.д. Помните: если вы задали атрибут coispan для ячейки равным "2", между начальным и конечным дескрипторами строки табли- цы () для текущей строки вы должны набрать на одну пару дескрипто- ров или меньше, поскольку количество ячеек (или столб- цов) в строке на одну меньше обычного. Например, в строке 2 в следующей таблице с тремя строками, тремя столбцами только две пары начальных и конеч- ных дескрипторов данных таблицы (), поскольку первая ячейка в стро- ке обладает шириной двух ячеек: Глава 2. HTML-таблицы
и для определения размеров ячейки. Если ячейки таб- лицы вы определяете без атрибута ceiispan или атрибута гowspan, все ячейки в строке будут иметь одинаковую высоту, а все ячейки в столбце будут иметь оди- наковую ширину, как ячейки в таблице, показанной на рис. 2.8. .dt View Fsvorte* loots ' Stop' Refresh а Seaich .•Строка 1, столбец! ;|СтрогаX столбец 1 ; [Строка 3, столбец 1 Табтпща с одкночншш хче$а&ми Стш*еиЭ Сто.п6гц4 •Строга 1, столбец 3 !Строка 1, столбец 4 |Строга 1, столбец 2 Строга 2. стогСеа 2 Ь р о » 3 , столбец 2 Строю 2, столбец 3 ;Строка 2, столбец 4 h-3, стопбеи 3 |Строга 3. столбец 4 | ' "'""""' \ Строга 4 столбец 1 Строка 4, столбец 2 L Строга 4. столбец 3 |Строга 4, столбец 4 ^1 Рис. 2.8. Таблица, в которой все ячейки в одной и той же строке имеют одинаковую высоту, а в одном и том же столбце — одинаковую ширину Однако иногда может понадобиться, чтобы ячейки объединяли несколько строк и/или несколько столбцов, как три из ячеек на рис. 2.9. В HTML-деск- рипторе определения таблицы предусмотрено два атрибута (coispan (объедине- ние столбцов) и rowspan (объединение строк)), с помощью которых можно задать ширину и/или высоту ячейки как число столбцов и/или строк смежных ячеек. Чтобы задать ячейку, объединяющую несколько строк, как, например, вторая сверху ячейка в первом столбце на рис. 2.9, укажите атрибут rowspan в дескрип- торе или ячейки. Для данного примера, где ячейка объединяет две строки, потребовалось бы написать следующий код: ="2">CTpoKa 1 и 2, столбец K/td> Если бы ячейка объединяла три строки, нужно было бы установить значение атрибута rowspan равным "3" и т.д. 90 Глава 2. HTML-таблицы Slop Rafre^t Cnirfexl Строга 1 & 2, столбец 1 Строга 3, столбец 1 ^Строка 4, столбец 1 ТвБгаои с о&ьепгаиккнми Столбгн: "трока 1, столбец 2 Строга 7, столбец 2 Строга 3, столбец 1 Строка 4, столбец 2 .3 ячейками j Столбец 3 | CiMfc«4 |Строга 1 &. 2. столбец 3 & 4 ^Строка 3, столбец 3 Строка 3, столбец 4 1 | .Строга 4, столбец 4 Рис. 2.9. Таблица, в которой ячейки в одной и той же строке или столбце имеют разную высоту и ширину Важно помнить, что, если вы установили атрибут rowspan для ячейки равным "2", в определении таблицы между следующей парой дескрипторов строки таб- лицы () вы должны набрать на одну пару дескрипторов меньше, поскольку в "следующей" строке на один столбец меньше. Например, строка 2 в следующей таблице с тремя строками и двумя столбцами имеет толь- ко одну пару начальных и конечных дескрипторов данных таблицы (), поскольку первая ячейка из строки 1 распространяется и на вторую строку: cTpoKa 1 и 2 , столбец К/1
CTpoKa 1, столбец 2 <Ьс1>строка 2, столбец 3 CTpoKa 3, столбец K/td> CTpoKa 2, столбец 3
Аналогично, если вы хотите создать ячейку, объединяющую несколько столб- цов, как, например, вторая ячейка слева в нижней строке таблицы на рис. 2.9, ука- жите в дескрипторе 		или ячейки атрибут coispan. Для данного примера, в котором ячейка объединяет два столбца, определение ячейки запишется так: CTpoKa 4, столбец 2 и 3
CTpoKa
crpoKa CTpoKa 1, 1, 1, столбец столбец столбец строка ; cTpoKa c трока cтрока cтрока
2, 3, 3, 3, столбец столбец столбец столбец K/td> 2		 или ячейки оба атрибута — и coispan, и rowspan. Для текущего примера, в котором ячейка объединяет две строки и два .столбца, определение ячейки запишется так: установлено равным " I й . Tafimuaбез границ laomoec Заголсиок 1 Заголоюк 2 i Заголовок 1 i Захолоток 2 Строка 1, элемент 1 Строка 1, элемент 2 Строка 1, элемент 1 ^Строка 1, элемент 2 ! Строка 2, элемент 1 Строка 2, мекект 2 1СтрОК8.2, элемент 1 ^Строка 2, элемент 2 | Рис. 2.10. Таблицы без границ и с границами шириной один пиксель 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.
Табпицас границейв 10 пикселей \ Заголовок 1 ! Заголовок 2 i Заголовок 3 . :Строка 1, элемент 1 |Строка 1, элемент 2 [Строка 1, элемент 3 1 Строка 2, элемент 1 'Строка 2, злемент 2 ртрока 2, элемент 3 | Рис. 2.11. Таблица с границами шириной десять пикселей Обратите внимание на два интересных эффекта изменения значения атрибута border. Во-первых, хотя ширина границы по периметру таблицы увеличивается с увеличением значения, присвоенного атрибуту border, ширина каждой из гра- ниц вокруг ячеек внутри таблицы в то же время остается равной одному пиксе- лю. Вне зависимости от того, насколько широкой вы сделаете границу вокруг таблицы, большинство Web-браузеров нарисуют вокруг каждой из ячеек внутри таблицы границу шириной в один пиксель — за исключением того случая, когда значение атрибута border установлено равным нулю — тогда ни таблица, ни ее ячейки не будут иметь границ. Во-вторых, по умолчанию Web-браузеры рисуют границы и таблицы, и ячеек с использованием двух цветов, пытаясь придать таб- лице (и ее ячейкам) трехмерный вид. При использовании границы по умолча- нию — серой — Web-браузер нарисует левую и верхнюю стороны таблицы светло- серым, а нижнюю и правую стороны таблицы — темно-серым. Web-браузер также использует два цвета — хотя их нелегко различить при их ширине, составляющей обычно один пиксель — при рисовании границ вокруг ячеек внутри таблицы. Ле- Глава 2. HTML-таблицы . 93 вая сторона и верх каждой ячейки — темно-серые, тогда как низ и правая сторо- на ячейки имеют светло-серый цвет. Научиться устанавливать цвета границ таб- лицы и ячеек отличными от цветов по умолчанию — серых — вы сможете, озна- комившись со следующим практикумом. Работа с цветами границ таблицы и ячеек Как вы уже знаете, граница (border) — это видимая линия по периметру таб- лицы и вокруг каждой из ячеек внутри таблицы. Границы таблицы и ячеек име- ют два атрибута, которые вы можете задать — ширина (с которой вы работали в ходе предыдущего практикума) и цвет. Чтобы настроить цвета границ ячеек и таблицы, вставьте в дескриптор таблицы атрибут bordercoior. Напри- мер, чтобы Web-браузер нарисовал темно-синюю границу шириной 10 пикселей вокруг таблицы и темно-синюю границу шириной один пиксель вокруг каждой из ее ячеек, задайте атрибут атрибут bordercoior в дескрипторе табли- цы следующим образом:
К сожалению, задание атрибута bordercoior не приводит к одному и тому же эффекту во всех Web-браузерах. При установке атрибута bordercoior равным и#оооо8В", например, Netscape Navigator нарисует границы таблицы и ячеек дву- мя цветами - две стороны голубым и две стороны темно-синим. Internet Explorer же поддерживает два дополнительных атрибута для управления цветами границы: bordercoioriight (цвет границы — светлый) и bordercoiordark (цвет грани- цы — темный). Если вы установите только значение bordercoior, Internet Explorer нарисует границы таблицы и ячеек, используя только один цвет — в данном примере темно-синий. (В главе 4, речь в которой пойдет о CSS, вы на- учитесь создавать CSS-правила, позволяющие управлять атрибутами рамки (то есть границами вокруг таблицы) независимо от атрибутов границ вокруг ячеек.) ПРАКТИКУМ Если вы хотите, чтобы Internet Explorer использовал два разных цвета при рисо- вании границ таблицы, вам нужно либо опустить атрибут bordercoior из деск- риптора (тогда Web-браузер будет использовать границы по умол- чанию — светло-серые/темно-серые), либо задать в дескрипторе атрибуты bordercoioriight и bordercoiordark. Например, Internet Explorer проигнорирует задание bordercoior в нижеприведенном дескрипторе и будет использовать значения, присвоенные атрибутам bordercoioriight и bordercoiordark, нарисовав верхнюю и левую стороны границы таблицы голу- бым, а нижнюю и правую стороны границы таблицы — темно-синим:
Атрибуты bordercolorlight И bordercolordark В вышеприведенном КОДе также дают Internet Explorer указание нарисовать верхнюю и левую стороны гра- ниц вокруг каждой ячейки голубым, а нижнюю и правую стороны границы — темно-синим. 94 Глава 2. ^ Включив в дескриптор
и атрибут bordercolor, и атрибуты bordercolorlight и bordercolordark, вы сможете отображать двухцветные грани- цы как в Internet Explorer, так и в Netscape Navigator. Internet Explorer будет игнорировать атрибут bordercolor и использовать значения атрибутов bordercolorlight и bordercolordark. Netscape Navigator, в то же время, будет игнорировать атрибуты bordercolorlight и bordercolordark и использовать для установки цвета границ таб- лицы и ячеек значение атрибута bordercolor. Если посетители вашего сайта будут пользоваться версией Internet Explorer 5 и выше или версией Netscape Navigator 6.1 и выше, вы можете указать цвет каж- дой стороны таблицы и ее ячеек независимо друг от друга с помощью атрибута style. Например, задав атрибут style в дескрипторе , как показано ниже, вы можете окрасить верхнюю (top) и левую (left) стороны таблицы в тем- но-синий, в то же время сделав нижнюю (bottom) и правую (right) стороны таб- лицы голубыми:
Хотя атрибут style в данном примере устанавливает один цвет для верхней и левой сторон и другой цвет для нижней и правой сторон, можно установить каждое из четырех свойств border-color внутри атрибута style равным своему собственному цвету. Чтобы задать один и тот же цвет для всех четырех сторон таблицы, установите значение свойства border-color равным желаемому цвету следующим образом:
Точно так же, как вы вставляете атрибут style в дескриптор для ра- боты с цветами сторон таблицы, вы можете вставить style в дескриптор
, чтобы таким же образом управлять цветами сторон ячейки. Например, окрасить стороны ячейки в красный, синий, зеленый и пурпурный можно путем задания атрибута style в дескрипторе : Аналогично, чтобы задать один и тот же цвет для всех сторон ячейки, напри- мер, красный, используйте свойство border-color следующим образом: Имейте в виду, что использование свойства border-color для задания одного и того же цвета для всех четырех сторон таблицы или всех четырех сторон ячей- ки на самом деле дает вам два цвета. Если речь идет о сторонах таблицы, и Internet Explorer, и Netscape Navigator нарисуют верхнюю и левую стороны ука- занным вами цветом, а нижнюю и правую стороны — более темным тоном того же цвета. Аналогично, когда вы задаете с помощью border-color один цвет для всех сторон ячейки, оба браузера отобразят нижнюю и правую стороны ячейки указанным вами цветом, а верхнюю и левую стороны ячейки — более темным то- ном того же цвета. Глава 2. HTML-таблицы 95 Работа с фоновыми изображениями и цветами Значение, присвоенное атрибуту bordercoior в дескрипторе , изме- няет цвет границы вокруг таблицы и границ вокруг ячеек - за исключением тех ячеек, дескрипторы которых содержат свои собственные атрибуты bordercoior. Следовательно, если вы хотите, чтобы Web-браузер нарисовал зеле- ную границу вокруг отдельной ячейки в таблице - вне зависимости от цвета гра- ниц вокруг других ячеек в таблице или вокруг самой таблицы -добавьте атрибут bordercoior в дескриптор ячейки. Например, чтобы дать Web-браузеру указание нарисовать зеленую границу вокруг ячейки, дескриптор этой ячейки должен выглядеть следующим образом: Для Internet Explorer, в частности, можно указать цвета границы ячейки сле- дующим образом, чтобы верхняя и левая стороны ячейки были нарисованы зеле- ным цветом, а нижняя и правая стороны — светло-зеленым: Хотя все Web-браузеры поддерживают использование атрибута bordercoior в дескрипторе < t a b l e > , многие их них не поддерживают использование ат- рибутов bordercoior, b o r d e r c o l o r l i g h t и bordercolordark в дескрипторе . В связи с этим разрабатывайте свои таблицы в соответствии с предположением, что многие из посетителей вашего Web-сайта будут видеть границу вокруг каждой ячейки того же цвета (цветов), что и граница по периметру самой таблицы. Поскольку фоновые изображения и цвета — это "атрибуты" таблицы или ячейки внутри таблицы, они задаются (в форме атрибута border) как часть HTML-дескриптора. (Элементы Web-страниц, такие как таблицы, строки, данные и т.д., имеют свои собственные HTML-дескрипторы, тогда как атрибуты всегда находятся внутри HTML-дескрипторов.) Поскольку и таблица, и каждая из ее ячеек имеют фон, который можно задать независимо, пожалуй, самый простой способ понять, как взаимодействуют между собой фон таблицы и фон каждой из ее ячеек — это представлять их себе как накладываемые друг на друга. На рис. 2.12, например, показаны четыре таблицы. Две таблицы в верхней части рисунка суть таблица с фоновым цветом и таблица с фоновым изображением. Две табли- цы в нижней части рисунка показывают, что произойдет, если дать Web-браузеру указание нарисовать некоторые из ячеек таблицы с фоновым цветом или фоно- вым изображением. Фон таблицы — это прямоугольный объект, лежащий поверх Web-страницы, по- добно подложке в кадре. Отдельные объекты данных прямоугольной формы внутри таблицы — определенные начальным и конечным дескрипторами данных таблицы () — называются ячейками (cells). Таблица лежит поверх фона Web-страни- цы; каждая из ячеек таблицы представляет собой прямоугольный объект, лежащий поверх фона таблицы. Содержимое, помещаемое в ячейку (путем помещения текста и/или HTML-дескрипторов между начальным и конечным дескрипторами данных таблицы () ячейки), в свою очередь, лежит поверх фона ячейки. 96 Глава 2. HTML-таблицы Ш Создание таблицы с фоновыми рисунками и цвет .« Уях Fjvales look tjdp • Back j Stop Rshesh • Ho Soacch Fevaie» Meter Фоновый цвет и фоновый рисунок ячейки га фоновой цвете фоновый цвет н фоновый рисунок ячейки на фоновом рисунке таблицы ; $ My Compute Рис. 2.12. Таблица с фоновыми цветами и изображениями, накрытая ячейками с фоновыми цветами и изображениями 1РАКТИКУМ ^ЗВЯВВВНВВВНВВВ Когда вы указываете цвет фона таблицы, задавая атрибут bgcolor в дескрипторе таблицы, Web-браузер "закрашивает" присвоенным атрибуту цветом по умолчанию прозрачный фон таблицы. Например, в следующем дескрипторе атрибут bgcolor, установленный равным шестнадцатеричному значению "#OOOOFF", дает Web-браузеру указание закрасить фон таблицы голубым цветом: Аналогично, если задать в дескрипторе атрибут background, Web- браузер будет использовать графический файл, присвоенный атрибуту, в качестве "обоев" для фона таблицы. Например, в следующем коде атрибут background дает Web-браузеру указание "накрыть" фон таблицы рисунком из файла picture.gif, который хранится в подпапке images Web-сайта:
Поскольку каждая из ячеек таблицы, как и сама таблица, имеет фон, цвет фона или фоновое изображение ячейки задаются в виде атрибута в дескрипторе
ячейки. Следовательно, независимо от фонового цвета или изображения (если таковые имеются), установленного для таблицы, вы можете дать Web-брау- зеру указание закрасить фон таблицы определенным цветом, присвоив значение этого цвета в виде шестнадцатеричного числа атрибуту bgcolor в дескрипторе ячейки. Например, шестнадцатеричное значение и#оооо8В", присвоенное атрибуту bgcolor в следующем дескрипторе , дает Web-браузеру указание закрасить фон ячейки темно-синим цветом: Глава 2. HTML-таблицы 97 Аналогично, если задать в дескрипторе ячейки атрибут background, Web-браузер будет использовать файл, присвоенный атрибуту, в качестве "обоев" для фона ячейки. Например, в следующем дескрипторе атрибут background дает Web-браузеру указание "накрыть" фон ячейки рисунком из файла picture.gif, который хранится в подпапке images Web-сайта: Хотя синтаксис HTML этому не препятствует, не имеет смысла задавать и цвет фона, и фоновое изображение для одной и той же таблицы или ячейки. Если же вы зададите и цвет, и изображение, "победу" одержит тот атрибут, ко- торый будет стоять в дескрипторе последним — примерно так же, как при поклейке обоев на окрашенную стену или покраске обоев. То, что наклады- вается на фон последним (иными словами, верхний слой), и будет видеть пользователь. И напротив, если в дескрипторе ячейки нет ни атрибута background, ни атрибута bgcolor, Web-браузер нарисует фон ячейки так, как будто это прозрачный лист стекла, лежащий поверх фона таблицы. Следователь- но, "сквозь" прозрачный фон ячейки будет виден фон таблицы. Подобным образом, поскольку фон таблицы лежит поверх фона Web-страни- цы, фоновое изображение или цвет таблицы скрывают цвет или рисунок, ис- пользуемый в качестве фона Web-страницы. И наоборот, если в дескрипторе таблицы не задан ни атрибут background, ни атрибут bgcolor, Web-бра- узер нарисует фон таблицы так, как будто это прозрачный лист стекла, лежащий поверх фона Web-страницы. Следовательно, "сквозь" прозрачный фон таблицы будет виден фон Web-страницы. Кстати, несмотря на то, что это могло бы ока- заться довольно-таки оригинальным эффектом, если вы не зададите ни цвета, ни изображения для фона Web-страницы, вы не будете видеть "подложку" своего монитора. Вместо этого Web-браузер установит белый либо серый фон Web-стра- ницы — в зависимости от настроек по умолчанию браузера. Хотя браузеры в настоящее время поддерживают атрибут background в деск- рипторах и , стандарт HTML не разрешает использовать атрибут background ни с дескриптором , ни с дескриптором . Более того, атрибут bgcolor — нерекомендованный с момента появления HTML 4.01 — офи- циально объявлен незаконным в стандарте XHTML 1.0. Для задания фонового изображения таблицы либо ячейки действующие стандарты HTML (и XHTML) требуют применять свойство CSS background-image. Например, чтобы указать изображение, которое Web-браузер должен использовать в качестве фона табли- цы, в дескриптор нужно вставить атрибут style, как показано ниже: Аналогично, чтобы задать фоновое изображение для ячейки, установите зна- чение свойства background-image с помощью атрибута style в дескрипторе
следующим образом: 9 8 Глава 2. HTML-таблицы Свойство CSS background-color позволяет выбрать цвет для фона таблицы и/или фона любой ее ячейки. Например, чтобы задать в качестве цвета фона таблицы ЦВеТ МОРСКОЙ ВОЛНЫ, НУЖНО уСТаНОВИТЬ СВОЙСТВО background-color В дескрипторе следующим образом: Аналогично, чтобы задать в качестве цвета фона ячейки таблицы темно-си- ний, например, необходимо с помощью атрибута style установить значение свойства background-color в дескрипторе
следующим образом: Определение значения цветового атрибута Всякий раз, когда вы используете один из атрибутов выбора цвета, такой как bordercolor, bgcolor, bordercolorlight, bordercolordark И Т.Д. В HTML-Деск- рипторе для задания цвета элемента, вы указываете нужный вам цвет в виде шес- тнадцатеричного числа. Например, чтобы создать таблицу со светло-желтым фо- ном, необходимо указать атрибут bgcolor в дескрипторе таблицы следующим образом: Аналогично, чтобы нарисовать темно-синюю границу по периметру таблицы и вокруг каждой ячейки в таблице, следует задать атрибут bordercolor в деск- рипторе таблицы следующим образом:
задает темно-синий цвет границ таблицы, значение bordercolor, равное #00008в, дает Web-браузеру указание создать цвет границы путем смешивания О красного с 0 зеленого с 139 синего. (Шестнадцатеричное значение 8в равно де- сятичному значению 139.) Таким образом, Web-браузер создает заданный вами оттенок путем смешивания нулевого количества красного, нулевого количества зеленого и чуть больше половины максимального количества синего. Глава 2. HTML-таблицы 99 Чтобы определить шестнадцатеричный RGB-триплет цвета, который вы хотите ИСПОЛЬЗОВать, зайдите на http://www.htmlhelp.com/cgi-bin/color.cgi ИЛИ сверьтесь с меню цветов шрифта или фона своего любимбго редактора изображе- ний. Большинство графических программ предоставляют RGB-значения, исполь- зуемые для создания цвета, выбранного вами из палитры образцов цветов или смешанного в окне Пользовательские цвета (Custom colors) приложения. Или же, если вы пользуетесь пакетом Microsoft Office, щелкните на кнопке со спис- ком справа от кнопки Font Color (Цвет шрифта) в стандартной панели инструмен- тов Microsoft PowerPoint или Microsoft Word. Затем щелкните на кнопке Мою Colors (Другие цвета...) внизу раскрывшегося меню. Приложение Office, в свою очередь, отобразит диалоговое окно Colors (Цвета), аналогичное показанному на рис. 2.13. Обычные Спектр Цвета: U Оттенок: Й3 " ' ~ г ] Краевой: [гв'з""-^ Нас^ндение: J250 -^-j г&эленый; . ]253 - ^ j Новый вТекущий • диалогового окна Colors (Цвета) редактора Microsoft Wo Рис. 2.13. Закладка < Если содержимое закладки Custom (Спектр) скрыто, щелкните на закладке Custom (Спектр) в диалоговом окне Colors. Чтобы "смешать" пользовательский цвет, щелкните на нужном цвете на цветовой палитре в верхней части закладки Custom, а затем на ползунке насыщенности цвета справа от палитры. Всякий раз, когда вы создаете цвет, диалоговое окно покажет вам образец цвета в ниж- нем правом углу диалогового окна и RGB-значение цвета в полях Red (Красный), Green (Зеленый) и Blue (Синий). Если RGB-значения — десятичные, а не шест- надцатиричные, вам потребуется преобразовать каждое из них в шестнадцатерич- ный эквивалент. Затем составьте три шестнадцатеричных RGB-значения в один шестнадцатеричный триплет вида "#RRGGBB" (где RR, GG и вв - шестнадцатерич- ные значения красной, зеленой и синей составляющих смешиваемого цвета). , H ЕПе р е ч е н ь шестнадцатеричных триплетов можно просмотреть, зайдя на, сайт по адресу http://www.htmlhelp.com/cgi-bin/color.cgi. Кроме того, несколько более длинный перечень шестнадцатеричных триплетов и пример соответствующего каждо- му из них цвета вы найдете по адресу http://www.hypersolutions.org/pages/ rgbhex.html. 100 Глава 2. HTML-таблицы Работа с полями ячеек и расстоянием между ячейками таблицы В то время как задание полей ячейки {cellpadding) сообщает Web-браузеру чис- ло пикселей интервала, который следует оставить между сторонами ячейки и ее содержимым, заданиерасстояния между ячейками {cellspacing) сообщает Web-бра- узеру размер интервала, который нужно оставить между ячейками и между гра- ницей вокруг таблицы и ее ячейками. На рис. 2.14 показано различие между по- лями ячейки и расстоянием между ячейками. Светлая граница таблицы Расстояние между ячейками Содержимое ячейки 'Темная граница ячейки Светлая граница ячейки> Темная граница таблицы^ Поля ячейки Граница ячейки Контур содержимого Рис. 2.14. Поля ячейки определяют расстояние между ячейками, а расстояния между ячейками — расстояние между границей ячейки и ее содержимым Поскольку атрибуты cellspacing и ceiipadding оказывают влияние на все ячейки в таблице, оба атрибута устанавливаются в дескрипторе табли- цы. По умолчанию и cellspacing, и ceiipadding имеют значение больше нуля. Например, если вы опустите оба атрибута из дескриптора , Internet Explorer оставит интервал шириной в два пикселя между каждой ячейкой и меж- ду границами таблицы и ее ячеек. Следовательно, в Internet Explorer по умолча- нию cellspacing равен двум (2). Аналогично, если ceiipadding не задан, Internet Explorer оставит интервал шириной в один пиксель между границей каж- дой ячейки и ее содержимым. Чтобы увеличить интервалы между ячейками в таблице, установите атрибут cellspacing в дескрипторе таблицы равным значению больше 1. На- пример, установка атрибута cellspacing равным десяти (ю) в следующем коде дает Web-браузеру указание оставить интервалы шириной 10 пикселей между каждой из ячеек таблицы и между границей таблицы и ее ячейками:
Глава 2. Аналогично, если вы хотите увеличить интервалы между сторонами ячейки и ее содержимым, задайте соответствующее значение атрибута ceiipadding. (В данном примере Web-браузер по-прежнему оставит интервал шириной только в один пиксель между границей ячейки и ее содержимым, поскольку в дескрипто- ре не указан атрибут ceiipadding.) Чтобы Web-браузер оставил между сторонами ячейки (то есть границей вокруг ячейки) и ее содержимым интервалы шириной пять пикселей, предыдущий дескриптор следует записать так:
Web-браузер, в свою очередь, изменит размеры таблицы (и ее ячеек) так, что- бы таблица заняла все его окно. Иными словами, Web-браузер будет делать таб- лицу (и ее ячейки) больше, если посетитель Web-сайта увеличат окно браузера, и будет делать таблицу (и ее ячейки) меньше, когда посетитель сайта уменьшит размеры окна браузера. Если вы не хотите, чтобы Web-браузер изменял размеры таблицы в зависимо- сти от размеров окна браузера, задайте высоту и ширину таблицы в виде фикси- рованного числа пикселей. Например, чтобы Web-браузер каждый раз рисовал таблицу шириной 764 пикселя и высотой 558 пикселей, запишите дескриптор следующим образом:
Опустив знак процента (%) в значении атрибута, вы даете Web-браузеру указа- ние использовать значение как число пикселей, а не как процентное отношение. При задании размеров таблицы с помощью абсолютных величин (иными слова- ми, при задании ширины и высоты таблицы как числа пикселей), Web-браузер не будет изменять ни размеры таблицы, ни размеры ее ячеек при изменении 102 Глава 2. HTML-таблицы посетителем сайта размеров окна Web-браузера. Например, при разрешении эк- рана 800x600 и ширине и высоте таблицы 764x558, если посетитель Web-сайта уменьшит высоту окна Web-браузера, на экране будет видна только часть табли- цы. Web-браузер, в свою очередь, добавит в окно вертикальную полосу прокрут- ки, чтобы посетитель сайта мог прокрутить часть таблицы вне экрана в пределах видимой области. (Аналогично, если посетитель уменьшит ширину окна браузе- ра, Windows отобразит горизонтальную полосу прокрутки, позволяющую посети- телю прокручивать содержимое экрана в горизонтальной плоскости.) И наоборот, если посетитель увеличит* разрешение экрана до 1024x768, размер таблицы останет- ся неизменным, а Web-браузер будет отображать в своем окне пустые места — снизу и справа от таблицы. Задавая атрибуты width и height в дескрипторе , имейте в виду, что на самом деле вы устанавливаете только минимальные размеры таблицы. Ее фак- тические размеры будут определяться содержимым, которое вы поместите в ячейки таблицы. Предположим, например, вы задали таблицу 764x558, с двумя строками по две ячейки в каждой. Если в каждую ячейку первой строки вы по- местите по рисунку размером 450x350 пикселей, Web-браузер автоматически уве- личит ширину таблицы до 900 пикселей для соответствия ширине данных в таб- лице — то есть двух рисунков в первой строке. Если затем вы поместите графическое изображение размером 450x350 пикселей в одну из ячеек второй строки таблицы, Web-браузер увеличит высоту таблицы до 700 пикселей для со- ответствия высоте двух рисунков в столбце таблицы. Задание размеров ячеек с помощью относительных и абсолютных величин Помимо (или вместо) указания размеров таблицы путем задания атрибутов height и width таблицы в дескрипторе , вы можете создать таблицу оп- ределенной высоты и ширины за счет указания размеров ячеек таблицы. ПРАКТИКУМ Например, если вы хотите создать таблицу 800x600 с двумя строками по четыре столбца в каждой, вы можете задать каждую ячейку как 200x300 пикселей, запи- сав дескриптор
для каждой ячейки следующим образом: (Чтобы задать размеры ячейки с данными-заголовками, установите атрибуты width и height в дескрипторе ячейки заголовка.) "" При определении ширины таблицы путем задания атрибута width в деск- рипторе таблицы следите за тем, чтобы ширина ячеек в каждой строке в сумме была строго равна ширине таблицы во избежание "странного" поведения, "проявления" кото- рого специфичны для каждого отдельного браузера. Каждый из браузеров по-своему обраща- ется с неправильно сформированными таблицами. Следовательно, если вы хотите контро- лировать внешний вид своей таблицы в любом из браузеров, не пишите HTML-код таблиц, в котором размеры таблицы находятся в противоречии с размерами ее ячеек. Глава 2. HTML-таблицы Вместо.задания размеров ячейки в виде фиксированного числа пикселей, вы можете дать Web-браузеру указание рисовать каждую ячейку как процент от об- щей ширины и высоты таблицы. Предположим, например, вы хотите, чтобы Web-браузер нарисовал таблицу, заполняющую окно браузера и имеющую три столбца равной ширины. HTML-код этой таблицы запишется следующим обра- зом, как с относительной шириной (заданной значением атрибута width в деск- рипторе ), так и со столбцами относительной ширины (заданной значе- нием атрибутов width в дескрипторах
и ): width="33%" >3аголовок K/th>
3аголовок Данные столбца K/td> Данные столбца 2 Данные столбца Или, если вы хотите задать таблицу с фиксированной шириной и двумя стол- бцами, занимающими 80 процентов ширины таблицы и одним столбцом, зани- мающим 20 процентов ее ширины, HTML-код таблицы должен выглядеть следу- ющим образом: width= width= width= width=" width=" width=" M40%" "40%" "20%M "40%" "40%" "20%" >3аголовок K/th> >3аголовок 2 >3аголовок 3 >Данные столбца K/td> >Данные столбца 2 >Данные столбца 3 Шшш 1Ы задаёте шираш ятш. таШищы как нредштны© етнешшмя к шмрм= не таблицы, шшщт ж тем, чтобы сумма ширин, заданных в щещшшерш <Ш> (mim TaseiMi ммшетш) м дескрипторах <Ы> щщ едней §Tgesi т щтшшш& 100 процентов. Штш же щтш щецентных отношений составит меньше 100 Wib=§papgp ршщшшжч еетатем ра!немерне м^щу ЁШММ я При задании размеров ячейки (или таблицы) вы можете задать ширину без задания высоты или наоборот. Однако если вы задаете размеры ячейки как про- центные отношения к ширине таблицы, следите за тем, чтобы ширина таблицы была задана как число пикселей или как процент от окна Web-браузера путем задания атрибута width в дескрипторе таблицы. Аналогично, если вы задаете высоту ячеек в таблице как процентное отношение к общей высоте таб- лицы, обязательно задайте также высоту таблицы. Чтобы задать высоту таблицы, установите атрибут height в дескрипторе таблицы равным либо числу пикселей, либо процентному отношению к высоте окна браузера. 104 Глава 2. Выравнивание содержимого ячейки по горизонтали и по вертикали Если ячейка шире, чем ее содержимое, Web-браузер по умолчанию выровняет содержимое в ячейке по левому краю ячейки. Чтобы изменить выставляемое по умолчанию горизонтальное (то есть слева на- право) выравнивание содержимого ячейки, добавьте в дескриптор столбец 2 Если ваш дескриптор будет включать в себя атрибут width, установ- ленный равным "Ю0%" или значению в пикселях, которое превышает ширину окна браузера в пикселях, Web-браузер будет игнорировать атрибут align внутри дескриптора
в начальном и конечном дескрипторах блока () вокруг определения таблицы. Глава 2. HTML-таблицы 1 07 Управление шириной и высотой ячейки с помощью вставки прозрачного GIF-изображения Рисуя таблицу, Web-браузер увеличивает размер ячеек (и всей таблицы) так, чтобы вместить их содержимое. Предположим, например, вы создаете ячейку с дескриптором
ячейки атрибут align. Атрибут align может получать три возможных значения: • left. Выравнивает содержимое по левому краю ячейки. right. Выравнивает содержимое по правому краю ячейки. • center. Центрирует содержимое между левым и правым краями ячейки. На рис. 2.15 показано, как Internet Explorer отобразит таблицу, определенную следующим HTML-кодом, в дескрипторах которой использовано каждое из допустимых значений атрибута align: Выравнивание по центру
BbipaBHHBaHHe по левому KpasK/th> BupaBHHBaHHe по правому Kpara IIo ueHTpy Cлeвa CnpaBa
Если высота ячейки превышает высоту ее содержимого, 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: < t r X t h width="25%">BbipaBHKBaiuie по вертикали - по верхнему краю*
BbipaBHMBaHMe по вертикали - по центру BbipaBHHBaHHe по вертикали - по базовой линии BupaBHHBaHHe по вертикали - по нижнему KpaxX/th> < t r x t d width="25%" valign="top">BBepxy IIo ueHTpy IIo базовой nnHrai C™isy
Рис. 2.15. Таблица, иллюстрирующая действие трех значений атрибута выравнивания по горизонтали Выравнивание таблицы на Web-странице В предыдущем практикуме этой главы вы научились выравнивать содержимое ячейки по левому краю ячейки, по правому краю ячейки или по центру ячейки. Пока содержимое ячейки уже ширины самой ячейки, с помощью атрибута align в дескрипторе 		ячейки вы можете позиционировать содержимое ячейки в горизонтальной плоскости внутри ячейки. Аналогично, если вы создаете таблицу уже ширины Web-страницы, на которой она отображается, вы можете позицио- нировать всю таблицу в горизонтальной плоскости на Web-странице с помощью атрибута align. 106 Глава 2. HTML-таблицы .«J* View Гзи>г*« Joels Help Stop Rehesti ' Home. i Search • Б..РЧГ Вырыто , По и-игру inKmitfiwvn поиекгру Вырыюпиок га» ссрттолн - МО б и . ЮЙ ЛИНИИ По Базовой ЛИШИ Вироккп • по и Смоу мж m вертикали : «jbone Рис. 2.16. Таблица, иллюстрирующая действие четырех значений атрибута выравнивания по вертикали ПРАКТИКУМ • • • • По умолчанию Web-браузер отображает таблицу у левого края Web-страницы. Чтобы изменить выравнивание таблицы, заключите определение таблицы между начальным и конечным дескрипторами блока (
). Затем установите атрибут align внутри дескриптора
равным "left", "right" ИЛИ "center" — в зависимости от того, как должна быть выровнена таблица относи- тельно левого и правого краев Web-страницы. Например, чтобы Web-браузер отобразил таблицу по правому краю Web-стра- ницы (вместо левого края по умолчанию), заключите определение таблицы меж- ду начальным и конечным дескрипторами блока (). Затем установи- те атрибут align внутри дескриптора
равным "right", как показано в первой строке приведенного ниже HTML-кода:
'> " width="50%' 50%" "50%" 50%" '50%" 50%" '50%" ' height="50%"> >3аголовок _ >3аголовок >Строка >Строка >Строка >Строка 1 - 1 - 2 - 2 - K/th> 2 столбец K/td> столбец 2 столбец l
 безматрибутов width или height. Если вы поместите в ячей- ку графическое изображение размером 150x100 пикселей, Web-браузер автомати- чески нарисует ячейку с шириной 150 пикселей и высотой 100 пикселей так, чтобы рисунок в нее помещался. Аналогично, если вы вставите это же изображе- ние размером 150x100 пикселей в ячейку, определенную с шириной и высотой, равными, например, 50 пикселей, Web-браузер "растянет" ячейку от заданных размеров 50x50 пикселей до таких, которые позволят вместить в нее графическое изображение. Присущим браузеру свойством изменять размер ячеек можно воспользоваться, поместив однопиксельное прозрачное GIF-изображение в ячейку и дав Web-бра- узеру указание растянуть картинку до нужной высоты и/или ширины. Web-брау- зер, в свою очередь, растянет графическое изображение и увеличит размеры ячейки до размеров растянутого изображения. Увеличение ячейки до размеров прозрачного изображения в ячейке заставит браузер вставить точные интервалы между ячейками слева и справа от ячейки с GIF-изображением и/или ячейками, находящимися сразу же над и/или под ней. Прозрачное GIF-изображение — это "невидимое" графическое изображение, которое можно использовать с таблицей или без таковой, чтобы воздействовать на положение объектов, размещенных на Web-странице. Посетитель сайта не бу- дет видеть прозрачное GIF-изображение на экране компьютера, поскольку Web- браузер отображает его так, как будто это лист прозрачного стекла, лежащий по- верх фона ячейки (или Web-страницы). Хотя посетитель "видит сквозь" прозрачное GIF-изображение, графическое изображение занимает определенное пространство в ячейке. В результате этого Web-браузер сделает ячейку достаточно большой для того, чтобы его вместить. Предположим, например, вы создаете Web-страницу с меню шириной 100 пикселей вдоль левого края страницы, и хотите отделить меню от остального содержимого (справа от него) 20-пиксельным интервалом, подобно тому, как по- казано на рис. 2.17. ПРАКТИКУМ Создать таблицу с тремя столбцами, в которой пустая ячейка шириной 20 пиксе- лей (с растянутым прозрачным GIF-изображением) отделяет содержимое левой ячейки от содержимого в правой ячейке, можно, написав следующий код: IIyHKTbi Meiuo
Здесь находится содержимое Web-cTpaHin№i
108 Глава 2. HTML-таблицы . 1 •.!»• .tfi View fgvarte» I « * befe . • ' • . [irks Л | Е i t : ••.•••*•..•. '.+•"•> - •'.••& Ъ d L > i •••'& iM *$ f . Back : • Stop Refresh Hone Sa*eh Favoritet Hitioiy .* |Эпементы Меню Содержимое Web-страницы ' :-Л..- '• .1 ' . i f f j b o * '"j Щ Computer • Рис. 2.17. Web-страница со 100-пиксельной панелью меню вдоль левого края, отделенной справа 20-пиксельным интервалом от остального содержимого страницы В данном примере дескриптор , стоящий после второго дескриптора 		(в третьей строке) дает Web-браузеру указание поместить прозрачное GIF- изображение, хранящееся в файле spacing.gif, во вторую ячейку таблицы. Ат- рибут width в дескрипторе дает Web-браузеру указание "растянуть" изоб- ражение размером 1x1 пиксель так, чтобы его ширина составляла 20 пикселей. Причина, по которой вам может понадобиться использовать прозрачное GIF- изображение — вместо того, чтобы установить атрибут width в дескрипторе ячейки равным требуемому числу пикселей незаполненного пространства и оста- вить ячейку пустой — состоит в том, что Web-браузеры по-разному обходятся с пустыми ячейками таблиц. Например, хотя Internet Explorer и показывает фоно- вый цвет ячейки в пустых ячейках, Netscape Navigator этого не делает, показывая вместо него цвет фона таблицы или Web-страницы. Более того, некоторые брау- зеры игнорируют атрибут height и/или атрибут width, заданные в дескрипторе пустых ячеек, и рисуют пустые ячейки так, что их высота равна всего лишь высоте самой высокой непустой ячейки в строке, а ширина не превышает шири- ны самой широкой непустой ячейки в столбце. И, наконец, ни Netscape. Navigator, ни Internet Explorer не будут рисовать левую и верхнюю границы ячей- ки, не имеющей содержимого — даже если атрибут border таблицы имеет значе- ние 1 или более. Однако если вы поместите однопиксельное GIF-изображение, растянутое до требуемых размеров, в ячейку таблицы, все Web-браузеры будут отображать "пустую" ячейку одинаково — с размерами GIF-изображения, задан- ным цветом фона ячейки и границами (если таковые заданы) — поскольку, хотя ячейка и кажется незаполненной, на самом деле она не пустая. Глава 2. HTML-таблицы 109 l^i Вы у з н а е т е , к а к создавать файлы прозрачных GIF-изображений, далее в этой книге, в главе, посвященной графике. Пока что вы можете пользоваться однопиксель- ным прозрачным GIF-изображением из файла s p a c i n g . g i f , который можно выгрузить из раздела материалов для этой книги на сайте издательства. Обтекание текстом изображения Когда вы обдумываете первоначальный дизайн Web-страницы, вопросом пер- востепенной важности является компоновка документа. На Web-странице с удач- ным дизайном текст и графика расположены в организованном, легком для вос- приятия формате. Более того, организация содержимого страницы помогает глазам читателя плавно переходить от графических изображений к связанному с ними тексту и обратно. Предположим, например, вы создаете Web-страницу, содержащую несколько изоб- ражений книг. Для каждого изображения необходим небольшой абзац информа- ции, описывающий объект, и его розничная цена. Поместив графические изобра- жения, текст описания и цены в таблицу, вы можете дать Web-браузеру указание отображать текстовую информацию где угодно возле изображения, как показано на рис. 2.18. Ctw.H. PoStpr фундаментальный алгоритмы на С Анализ/Структуры данныл/Сортировка/Поиск Сшк> Роберт е алгоритмы на С. Алгоритмы на графах :гг'~ Пр»йс-л«от- 20 СЮгрн е-н«г*мн'2 Лрлйс-лжт 174.00руб. •••игиии С.АЖ.И. Робарт Фундаментальные алгоритмы на С Анализ/Структура данных/Сортировка/Поиск^Алгоритмы на графах Рис. 2.18. Пример совместного представления рисунков товаров вместе с их кратким описанием и ценой Следующие HTML-дескрипторы создают таблицу, в которой первый рисунок будет отображен в строке 1, столбце 1 с соответствующими ему описанием (ря- дом с рисунком) в строке 1, столбце 2 и ценой (под рисунком) в строке 2, стол- бце 1. (Строка 3, столбцы 1 и 2 были добавлены для создания дополнительного пространства между предметами, описаниями и ценами.) <Ъ<1>Вставьте oiracaHMe Вставьте ueHy
BcTaBbTe описание BcTaBbTe iieHy BcTaebTe onHcaHne Вставьте 4eHy
Глава 2. HTML-таблицы src="image_l.jpg"X/td> К'Ш 		Bc-raBb!re oinioafflie Вставьте i*eHy BcTaBbTe описание BcTaBbTe i*eHy BcTaBbTe on»caHHe Вставьтеi *eHy
Использование таблицы для управления структурой текста и графики создает приятную взгляду Web-страницу. Кроме того, поскольку содержащие большое ко- личество текста Web-страницы меньше, чем Web-страницы, изобилующие графи- ческими изображениями, использование текста в ячейках описания и цены при- водит к созданию документа меньшего, размера, нежели при преобразовании текста в графику, и, соответственно, Web-страница быстрее загружается. Отображение с помощью таблицы галереи миниатюр Отображение графики - неотъемлемая часть World Wide Web. Пусть, напри- мер, вы — владелец агентства по недвижимости, и вам нужно показать фотогра- фии домов, выставленных на продажу. Вы хотите, чтобы у посетителей сайта была возможность выбирать полноразмерное изображение, сначала открыв Web- страницу, содержащую миниатюры (уменьшенные изображения) всех выставлен- ТТППГТЯЖУ помят; Кпггтя гкасатитаттт, тттрдкяетт^ня минияттяпа>ч Глава 2. HTML-таблицы 111 Рис. 2.19. Web-страница с миниатюрами для каждого полноразмерного изображения ПРАКТИКУМ Чтобы с помощью таблицы отобразить группу изображений-миниатюр, создайте таблицу с отдельной ячейкой под каждую миниатюру. Чтобы связать миниатюру с соответствующим ей полноразмерным изображением, вставьте дескриптор <а> с атрибутом href в каждую ячейку, содержащую изображение-миниатюру. Деск- риптор <а> создает ссылку от миниатюры к полноразмерному изображению. На- пример, следующий код связывает изображение-миниатюру home_i.jpg с Web- страницей, содержащей полноразмерное изображение (page_i.htm): <а href="page_l .htm"Ximg src="home__l. jpg"X/a> Когда посетитель сайта щелкает на миниатюре, Web-браузер загружает стра- ницу, содержащую соответствующее полноразмерное изображение. Дескриптор <а> с атрибутом href в приведенном ниже коде связывает миниатюру (заданную атрибутом src в дескрипторе ) с соответствующим ей полноразмерным изоб- ражением и создает Web-страницу, немного похожую на показанную на рис. 2.19: -•
Как только Web-браузер отобразит страницу с миниатюрами, посетителю ос- тается только щелкнуть на выбранной миниатюре, чтобы отобразить полнораз- мерное изображение. Например, при щелчке на "миниатюре в верхнем левом углу рисунка 2.19 Web-браузер отобразит полноразмерное изображение, которое пока- зано на рис. 2.20. 112 Глава 2. HTML-таблицы Homes & Apartments •-j Homes i:>; Maxwell Realty Company Location: PhiUdtlphla, PA Types Condo d Contect •bout thi» property. rpo« *wi AM efc Рис. 2.20. В результате щелчка на миниатюре загружается полноразмерное изображение Поскольку миниатюра — это уменьшенная версия полноразмерного изображе- ния, используйте правила именования, связывающие миниатюры с исходными изображениями. Если, например, вы создали и сохранили изображение с име- нем home__i.jpg, назовите соответствующую миниатюру home__is.jpg. Создание ассоциативных имен файлов помогает быстро идентифицировать файлы, по- скольку в стандартном списке файлов имена будут отображаться в алфавитном порядке. Создание маркеров и списков с помощью таблиц и графики Web-дизайнеры всегда имели возможность создавать списки с квадратным или круглым маркером перед каждым элементом списка. К сожалению, при создании стандартного маркированного (или, пользуясь принятым в языке HTML терми- ном, неупорядоченного) списка дизайнер может обозначать его элементы только маркерами из ограниченного количества символов. Например, следующий код сгенерирует маркированный список, приведенный на рис. 2.21. <11>Элемент списка K/li> <11>Элемент списка 2 <И>Элемент списка 3 Глава 2. HTML-таблицы1 Начальный и конечный дескрипторы неупорядоченного списка () идентифицируют начало и конец маркированного списка, а дескриптор оп- ределяет элемент списка (см. рис. 2.21). Элемент списка 1 Элемент списка 2 Элемент списка 3 Рис. 2.21. Упорядоченный список С другой стороны, таблицы позволяют создавать свои собственные маркеры за счет вставки графического изображения-маркера в ячейку таблицы. Обычно таблица, используемая для создания маркированного списка, содержит два стол- бца. Первый столбец содержит в себе графическое изображение, используемое в качестве маркера, а второй столбец — текст, описывающий элемент списка. Стандартная таблица с двумя столбцами создает список с броскими изображени- ями в качестве символов маркеров, как, например, показано на рис. 2.22. Акации »ы Березы Рис. 2.22. Неупорядоченный список со специальными маркерами ПРАКТИКУМ ШЯШ Предположим, например, что вы создаете список, содержащий три элемента, и хотите использовать изображение стрелки в качестве маркера для каждого из эле- ментов списка. Для создания показанного выше маркированного списка служит следующий код:
3neMeHT списка K/tdX/tr> , 3neMeHT списка 2 3neMeHT списка 3
Поскольку ячейки таблицы могут содержать любую графику, поэксперименти- руйте, заменяя обычные изображения, используемые для маркеров, чем-нибудь неординарным. Например, если вы создаете маркированный список действий, необходимых для выращивания роз, замените стандартный символ маркера на графическое изображение красной розы. 114 Глава 2. HTML-таблицы Создание бокового навигационного меню с помощью таблицы При разработке многостраничного Web-сайта вам нужно позаботиться о том, чтобы посетители могли без затруднений передвигаться со страницы на страни- цу вашего сайта. В предыдущем практикуме вы научились создавать маркирован- ные списки, используя для этого отдельные ячейки таблицы. С их помощью также можно создать отлично организованную навигационную панель. ПРАКТИКУМ Боковое меню {sidebar) представляет собой простую форму навигационной панели. Обычно боковое меню состоит из списка слов, отображаемых с левой стороны на Web-странице. Каждое слово на самом деле является ссылкой на другую страницу Web-сайта. При использовании таблицы для создания бокового меню каждая ячейка таблицы содержит отдельный элемент меню. Приведенный ниже листинг создает боковое навигационное меню, показанное на рис. 2.23: rnaBHaa 06pa3ubi 0 Hac KoHTaKT href="purchase.htm">KynnTb Чтобы быть последовательными, всегда помещайте боковое навигационное меню в одном и том же месте на каждой странице сайта. Так посетителям будет легче находить систему навигации сайта и пользоваться ею. Чаще всего навига- ционное меню помещают в двух областях страницы: в виде боковой панели вер- тикально вдоль левого края Web-страницы (как в данном практикуме) или в виде горизонтальной панели вверху страницы. .fe № .Beck' Stop Reftesh Home Search FevotSes . Hiaoij1 Главная Обравиы Контакт Купить ~3 а ро Рис. 2.23. Типовое боковое навигационное меню, заключенное в таблицу Глава 2. HTML-таблицы Добавление графики и ссылок в ячейки таблицы Каждая ячейка таблицы представляет собой отдельный управляемый элемент, в который можно помещать текст, графику или же комбинацию текста и графи- ки. Чтобы добавить в таблицу ячейку, вставьте пару - начальный и конечный - дескрипторов данных таблицы (), как показано в приведенном ниже коде, между начальным и конечным дескрипторами () таблицы:
<Ъс1>Сюда помещаются данные ячвйки
ПРАКТИКУМ Чтобы поместить в ячейку графическое изображение, вставьте дескриптор , как показано ниже, между начальным и конечным дескрипторами данных ячей- ки ():
Атрибут src в дескрипторе сообщает Web-браузеру имя файла графи- ческого изображения, которое браузер должен отобразить в ячейке таблицы. Следовательно, в данном примере Web-браузер отобразит рисунок из файла image.jpg. Чтобы преобразовать графическое изображение в ячейке таблицы в гиперс- сылку, заключите дескриптор между парой — начальным и конечным — дескрипторов привязки (<ах/а>). Например, следующий код преобразует рису- нок в таблице (из предыдущего примера) в гиперссылку:
Обрабатывая HTML-код из данного примера, Web-браузер во время рисова- ния таблицы отобразит рисунок из файла image.jpg. Если посетитель сайта за- тем щелкнет на рисунке, Web-браузер отобразит содержимое файла, указанного в атрибуте href дескрийтора <а>. Следовательно, в данном примере Web-браузер отобразит содержимое файла info.htm, когда посетитель щелкнет на рисунке в таблице. Глава 2. HTML-таблицы Управление границами на Web-странице с помощью вложенных таблиц Когда вы срздаете Web-страницу без таблиц, Web-браузер отображает найден- ные им в файле элементы Web-страницы один за другим, начиная в верхнем ле- вом углу окна браузера. Между первым элементом страницы и левым краем окна браузер помещает заданный по умолчанию интервал. К сожалению, не все Web- браузеры (и даже не все версии одного и того же Web-браузера) используют по умолчанию интервалы одинаковой, из-за чего при разработке Web-страницы воз- никает проблема, разрешить которую можно с помощью точного размещения графики и текста. ПРАКТИКУМ Предположим, например, вы создаете Web-страницу, содержащую три графичес- ких изображения, требующих установки определенного интервала от левой гра- ницы Web-страницы. Чтобы управлять границей сложной Web-страницы, создай- те таблицу и вставьте вторую таблицу с тремя графическими элементами в ячейку второго столбца первой таблицы. Помещение таблицы в ячейку внутри другой таблицы называется вложением (nesting). Когда вы вкладываете одну таб- лицу в другую, создается организованная структура, которая позволяет с большей точностью управлять размещением элементов на сложной Web-странице. В приведенном ниже коде демонстрируется вложение таблицы, содержащей три изображения? в ячейку другой таблицы:
В данном примере второй столбец таблицы содержит вложенную таблицу, а первый столбец внешней таблицы имеет фиксированную ширину, равную 30 пикселям. В результате, когда Web-браузер загружает Web-страницу, первый стол- бец таблицы отодвигает вложенную таблицу на 30 пикселей вправо от левого края окна браузера, как показано на рис. 2.24. Глава 2. HTML-таблицы 117 •3D \Ьпе*,\?П1!2МоЬв «WVHIML>feb_DCTign\?be t*»4mase.\1-2« hi ЕЯе . с атрибутом href, который будет сообщать Web-браузеру, какое действие необходимо выполнить при щелчке на изображении, помещенном в ячейку. 118 Глава 2. HTML-таблицы ПРАКТИКУМ В приведенном ниже коде, когда посетитель выполняет щелчок на графическом изображении home.jpg, Web-браузер соединяется с Web-страницей home.htm и открывает ее: <а href="home.htm"> Правильно разработанные и помещенные в ячейки таблицы с границами ну- левой ширины (то есть невидимыми) фрагменты рисунка Web-браузер отобража- ет рядом друг с другом, так что посетитель будет видеть их как целостное графи- ческое изображение. Приведенный ниже код создает навигационную панель, показанную на рис. 2.25:
^j$D:\books\ ; № .* ; ' Back t поиск 2002Vabe View ' Fav и заказ eiltlVHTML Web DetignV2b jrif« Xod* НФ J i Slop Refie 1 как ПОАЬЭОМТЬСЯ 1 " о*(\1тич.л\1 2Ь hi h Home i справочник ii Mi h Favorites Ш» КООрДИМЛТ). ilotei ...H">o
sr c=" image. jpg"X/td> Если опустить атрибуты height и width в дескрипторе , браузеру при- дется определять размер ячейки по размеру изображения, которое он должен в ячейку поместить. В результате этого Web-браузеру потребуется больше времени для рисования таблицы на экране, поскольку для определения размеров ячейки ему нужно будет загрузить графическое изображение. Если вы в явном виде зада- Глава 2. HTML-таблицы дите размеры всех графических изображений, Web-браузер сможет нарисовать таблицу, вывести весь текст в ячейках таблицы, а затем вернуться к загрузке и вставке медленно загружающихся изображений в таблицу. Поскольку извлечь и отобразить текстовое содержимое браузер сможет быстро, у посетителя сай- та будет возможность читать текстовое содержимое таблицы, ожидая, пока браузер извлечет и отобразит большие, медленно загружающиеся изображе- ния в таблице. При указании размеров изображений следите затем, чтобы значения атри- бутов height и w i d t h соответствовали фактической ширине и высоте изображения, кото- рое браузер должен поместить в ячейку. Если указанные вами высота и/или ширина отлича- ются от размеров изображения, Web-браузер растянет (или сожмет) изображение, чтобы привести его размеры в соответствие со значениями атрибутов height и w i d t h . В резуль- тате выведенное на экран изображение может исказиться. Имитация фреймовой Web-страницы с помощью таблицы Web-дизайнеры тратят немало времени на то, чтобы должным образом орга- низовать содержимое на Web-странице. На хорошо продуманных Web-страницах информация группируется в четко определенные области. Например, на страни- цах многих сайтов группа заголовков (или баннер) отображается вдоль верхней границы страницы, навигационная панель расположена вдоль одной из сторон или вдоль нижнего края, а само содержимое отображается под заголовками и либо справа от навигационной панели, либо над ней. Web-сайт с хорошо организованными Web-страницами создает удобную среду, которая побуждает посетителя зайти на сайт и потратить время на исследование его содержимого. Один из способов организации содержимого нагWeb-странице — это использование фреймов, которые делят Web-страницу на несколько окон, называемых фреймовой структурой (frameset), причем каждое окно способно ото- бражать отдельный Web-документ. Типовая фреймовая Web-страница, вроде той, которая показана на рис. 2.27, имеет три фрейма. Первый фрейм располагается слева направо вдоль верхнего края страницы и содержит заголовочную информацию, например, название и адрес компании. Второй фрейм содержит навигационную систему и располагается вдоль левой стороны страницы, от заголовочного фрейма до нижнего края страницы. Третий фрейм содержит организованные области текста и графики. Хотя фреймы — отличный инструмент для организации информации на Web- странице, им присущи два больших недостатка. Во-первых, фреймы не полнос- тью поддерживаются всеми Web-браузерами, а во-вторых, на загрузку фреймовой Web-страницы Web-браузеру требуется больше времени, поскольку в каждом фрейме страницы браузер должен загрузить и отобразить отдельный Web-доку- мент. 122 Глава 2. HTML-таблицы Видимая граница определяет фреймы Stop fietfech Home Seaich Favorites Huttty ; Mai , ., _ _ I ^j^ : • . . , - ! ' • : '• • : .' • . i.'. . , . • . I РИС. 2.27. Типичная Web-страница, разделенная на фреймы ПРАКТИКУМ ШШШШШ Хотя таблицы не позволяют загружать в одном окне браузера несколько доку- ментов, с помощью таблиц можно создать видимость организации, получаемой при работе с фреймовыми Web-странцами. Например, приведенный ниже код создает таблицу, придающую Web-странице организованный вид фреймовой стра- ницы, как показано на рис. 2.28.
3T0 ЗАГОЛОВОЧНАЯ ОБЛАСТЬ
3Ta область содержит 1 навигационный MaccHB B этой области находится содержимое Web-CTpaHnuK
Глава 2. HTML-таблицы 123 .8е .dft У»«м : Favorites Tools J Stop Refresh это:;/, J n! My Compute! Рис. 2.28. Web-страница с имитацией фреймовой структуры с помощью таблицы Используя различные фоновые цвета для каждого раздела (в данном примере красный, синий и черный), можно сделать так, что каждый раздел будет смот- реться как независимый - подобно фреймам на фреймовой Web-странице. Привлечение внимания посетителя с помощью цвета фона ячеек В этой главе вы узнали, что основные способы применения таблиц в Web-до- кументе включают отображение табличных данных, организацию и размещение содержимого в определенных местах, создание навигационных карт и экономию времени, затрачиваемого браузером на загрузку графических изображений. Кроме того, таблицы можно использовать для привлечения внимания посетителей сай- та и, следовательно, для притягивания их взглядов к отдельным областям Web- страницы. Цвет — мощное средство, с помощью которого можно завладеть вни- манием посетителя, В предыдущем практикуме вы работали с фоновым цветом для создания групп ячеек, делящих Web-страницу на области, имеющие различ- ное назначение. Теперь предположим, что вы создаете документ, содержащий большое количе- ство текста, и хотите, чтобы посетитель уделил особое внимание одному опреде- ленному абзацу. Создайте таблицу с множеством ячеек и поместите текст Web- страницы в одну из ячеек таблицы. Затем окрасьте ячейку слева от "важного" абзаца и, может быть, даже поместите в цветную ячейку какой-нибудь описа- тельный текст, например, как показано на рис. 2.29. 124 Глава2. HTML-таблицы '• " ' • ' - " • • - • •••.•••• • • • ' - г » « . Fife .dl View Favorite» X™ • Help J Stop Seach . Favorites: Смотри сюда! Текст основной части документа находится здесь. Вся информация, которую должна отображать ваша Web-страница Важная информация, которую ваши читатели должны увидеть, подсвечена ярко-желтым цветом. m Рис. 2.29. Таблица с цветной ячейкой, притягивающей взгляды к определенной области Web-страницы Приведенный ниже код создает Web-документ, показанный на рис. 2.22:
Текст основной части документа находится здесь.
Вся информация, которую должна<Ьг> отображать ваша Web-страница.
Важная информация, которую ваши читатели<Ьг> должны увидеть, подсвечена<Ьг> ярко-желтым цветом.
Смотри crafla!
Изменение цвета фона ячейки таблицы, содержащей слова "Смотри сюда!" на желтый (за счет установки атрибута bgcolor в дескрипторе 		ячейки равным ''yellow") привлекает внимание посетителя к ячейке и делает акцент на фраг- менте текста в смежной ячейке. Визуальное выравнивание содержимого Web-страницы с помощью видимых границ таблицы Выравнивая с помощью таблицы графику и текст, вы создаете организован- ную структуру страницы, что помогает глазам посетителя двигаться по документу и повышает привлекательность компоновки страницы. Глава 2, HTML-таблицы 1 2 5 ПРАКТИКУМ Предположим, например, вы хотите создать Web-страницу, содержащую фотогра- фии ваших сотрудников вместе с их именами и фамилиями, должностями, зани- маемыми в компании, и почтовыми адресами. Чтобы организовать эту информа- цию, создайте таблицу, состоящую из одного столбца, как показано на рис. 2.30. Строка 1 содержит имя и фамилию сотрудника, строка 2 — фотографию со- трудника, строка 3 — должность, занимаемую им/ею в компании; строка 4 — его/ее почтовый адрес. Применение таблицы не только помогает организовать информацию на Web-странице, но, вдобавок к этому, использование атрибута border дает возможность еще более наглядно определить внешнюю границу таб- лицы и отделяет таблицу от прочей графики и текста на Web-странице. Показанная на рис. 2.30 таблица создается при помощи следующего кода: . , 263 86 263 43 84 27
    69, 113, 219 контейнерный 23 пустой 25 разделов 24 Дешифрация 592 Динамический HTML (DHTML) 339 Диспетчер PWS 38 Добавление гипертекстовых ссылок 59 графики в Web-страницу 55 графики и ссылок в ячейки таблицы 1 цветов в форму 223 Документ 237, 393, 550 ASP 550 ХНТМГ 237, 245 отображение в устаревших браузерах 393 преобразования HTML-документа в XHTML-документ 251 Драйвер 587 ODBC 587 3 Заглавная буква 207 Заголовок Web-страницы 43 Загрузка графики 1 рисунков быстрая 307 660 Предметный указатель файла 306 нечересстрочный режим 306 чересстрочный режим 306 Заливка 214 сплошная 214 Запись 536 Зарезервированные слова 388 Заставка анимированная 365 Защита учетных записей по умолчанию 616 Звук 347 форматы звуковых файлов 349 И Извлечение полноразмерного изображения 326 Изображение анимированное GIF 342 плавающее 217 фоновое 323 расположение 214 Имитация фреймовой Web-страницы 121 с помощью таблицы 121 Индекс 395 Интервал между буквами 203 между словами 203 между строками 203 К Кавычка двойная (") 559 Камера 377 Web 377 Канал 308 альфа 308 Карта 83 навигационная 83, 117 Каскадный список стилей 173 добавление на Web-страницу 180 импортирование внешнего списка стилей 183 связывание с внешним списком стилей 181 Клавиши быстрой навигации по форме 163 Клиент 546 FTP 546 Ключ шифрования 621 Код 486 Коллекция ServerVariables 581 Комментарии 45, 388 Компилятор 486 Консорциум W3C 275 Контейнер 238. См. также Раздел Контейнерный HTML-дескриптор 23 Курсор 228 Кэширование графических изображений 329 предварительное 441 Л Линейка 92 Линия горизонтальная цветная 314 Логические операции JavaScript 392 Логотип 215 м Маркированный список 112 Массив 394 изображений 420 Медиа 376 потоковое создание 376 Меню 114, 464 боковое навигационное 114 всплывающее навигационное 464 выбора 147 Метка 168 Метод 403, 557 Миниатюра ПО, 112, 225 Минимизация атрибута 242 Монтаж видеоролика 351 н Набор cookie 418, 427, 572 Web-серверов 653 зеркальный 653 Навигационная карта 83, 117 Навигационная панель 331 графическая 331 Навигационное меню 114 Неупорядоченный список 113 Номер порта 376, 628 О Обработка HTML-форм 130 ошибок 608. Предметный указатель 661 Обработчик событий 401, 409 сценариев ASP 550 Обтекание текстом изображения 109 Объект 414, 461, 557 ActiveX 449 внедрение в Web-страницу 458 использование в Internet Explorer 489 подписанный 461 Объявление 178, 406 Ограничивающий прямоугольник 324 Оператор простой 396, 504 составной 396, 504 Операции 502 JavaScript 392 логические 392 сравнения 391 арифметические 502 логические 503 присваивания 502 сравнения 503 Операционная система 652 Определение типа документа (DTD) 240 Организация миниатюр в таблицу ПО Отображение графики •§ документа в устаревших браузерах 393 п Параметры 387, 455 передача аплету 455 Передача потокового аудио и видео 374 Переключатель 142 Переменная 399 управляющая 399 Персональный Web-сервер 35 Печать XHTML-страницы Web-браузером 278 Пиксель 190 Подключаемый модуль браузера 354 QuickTime 354 RealAudio 354 Подчеркивание (_) 558 Поле ввода многострочное 136 разделение текста на отдельные части 197 скрытое 1 Правила 173 каскадного списка стилей 177 Преобразование HTML-документа в XHTML-документ 251 типов аудиофайлов 377 Приложение Adobe Premiere 352 Cool Edit 376 Director 345 Flash 343 ImageReady 357 Macromedia Flash 373 Shockwave 346 Sound Recorder 349 ssh 645 выполняемое сервером 652 Проверка данных формы с помощью атрибута onClick 170 Программа SATAN 646 создания Web-страниц 326 компоновки Web-страниц 32 редактирования изображений 326 Прозрачность в GIF-изображениях 107, 324 Прокси-сервер 653 Протокол 20, 546, 623 FTP 546 HTTP 20 SSL 623 Публикация Web-страниц 38 Пункт 190 Р Раздел 238 Разрезание графического изображения на фрагменты 118 Рамка (frame) 92 Расположение фоновых изображений 214 элементов Web-страницы по слоям 230 Растрирование 301, 331 С Свойство 417, 557 Сеанс 526, 593 ASP 593 Селектор 177 класса 187 Сервер 35, 552, 653 IIS 552 Web 35 персональный 35 662 Предметный указатель быстродействие 654 прокси 653 Серверные приложения 652 Сертификат безопасности 592 Сжатие с потерями 302 Сканер 311 Скорость передачи данных 650 работы процессора 651 Скрытое (hidden) поле 171 Снижение времени на рисование таблицы 120 Содержимое (content) страницы • Создание Flash-фильма с чистого листа 370 Web-страницы 25 . баннера с помощью GIF-анимации 360 вложенных списков 70 графических гиперссылок 320 маркеров 112 с помощью таблиц и графики 112 на форме переключателей 142 на форме флажков 140 навигационного меню •• с помощью таблицы 114 перекрывающегося текста 192 потокового медиа 376 прозрачности в GIF-изображениях 324 списка 112 с помощью таблиц и графики 112 стилей 176 страницы с Web-камерой 377 цветных горизонтальных линий 314 эффекта отбрасывания тени 210 Сокрытие ввода пользователя •! Составной оператор 396 Список 112, 218 вложенный 70 выпадающий 147. маркированный 112 ненумерованный (маркированный) 218 неупорядоченный со специальными маркерами 1.13 определений 71 стилей 173 каскадный 173 создание 176 упорядоченный (нумерованный) 113,218 Средство встраивания объектов ActiveX 450 Стили 184 включение в HTML-дескрипторы 184 Стоп-кадр 353 Страница 22, 30, 174, 268, 550 ASP 550 коллекция 576 создание 552 'СТЗрСВШЗЯ JDo Web 22, 30 заголовок 43 публикация 38 создание 25 XHTML 268 вставка однойXHTML-страницы в другую 268 печать Web-браузером 278 с всплывающими подсказками 229 с имитацией фреймовой структуры 123 с помощью таблицы 123 с каскадным списком стилей 174, 177, 179 с логотипом компании 215 с миниатюрами 111 с перекрывающимся текстом 192 с плавающим изображением 217 с плавающим рисунком текстом с полями 175 с текстурным фоном 215 с тремя колонками 200 Строка бегущая 443 СУБД MySQL 587 Сценарий 138, 382, 392, 492 JavaScript 138, 382 вставка функций JavaScript в HTML-код 393 зарезервированные слова 388 логические операции 392 массивы 394 сокрытие от браузеров, не поддерживающ*их JavaScript 384 функции 385 РНР 492 готовый (внешний) 434 т Таблица 80, 115, 263 HTML 80 XHTML 263 видимая граница 124 вложение таблицы в другую таблицу 116 выравни вание таблицы на Wfeb-страни це 105 граница (border) 91, 93 Предметный указатель 663 для отображения миниатюр 110 добавление графики и ссылок 115 имитация фреймовой Web-страницы 121 линейка (rule) 92 рамка (frame) 92 с текстом и графикой 125 с цветной ячейкой .124 снижение времени на рисование таблицы 120 стилей вложенная 173 фон таблицы 95 ячеек 123 ячейка (cell) 95 Текст 26, 73, 192, 333 выравнивание 194 использование начальных заглавных букв 205 перекрывающийся 192 плавающий 217 сглаживание краев текста 333 форматирование 26 предварительное 73 Текстовый процессор 32 • редактор 31 Тени 210 Технология ASP 552 Унарные операции JavaScript 391 Упорядоченный список 113 Управление границами на Web-странице 116 с помощью вложенных таблиц 116 курсором 228 расстоянием между колонками на Web-странице 126 • шириной полей текста на Web- странице 126 Условная обработка 392 Утилита TidyGUI 251 Ф Файл 306, 377, 550 . .asp 550 .class 457 jar 457 аудио 377 загрузка 306 исходный 479 перенаправлений 601 расписания ротатора 601 сжатие 310 Файловая система NTFS 639 Фильм 367 Flash 369 создание 370 Фильтры 221 Флажок 140 Фон 214, 322 мозаичный 322 таблицы 95 текстурный 214 ячеек таблицы 123 Фоновое изображение 323 Форма 129 ввода имени пользователя и пароля 171 набор данных формы 130 обработка 130 проверка данных формы 170 с выпадающим списком (меню выбора) 147 с двумя однострочными полями ввода текста 135 с клавишами быстрого перехода 169 с метками 169 с многострочным полем ввода 136 с переключателями 142,171 с флажками 140 Форматирование текста 26 Форматы файлов 284 GIF 285, 304, 341 JPEG 285, 301 PNG 285, 310 PNG-24 308 PNG-8 308 SVG 344 звуковых 349 Фрейм 76, 121, 271 . одновременное обновление нескольких фреймов 271 Фреймовая структура 121 Функция 403 disableSpuseNameQ 171 prepFromResultO 153 PreResetProcO 156 validateAndSubmitO 171 ValidateFormO 150 встроенная 403 вызов 407 определенная пользователем 403 664 Предметный указатель X Хакер 613 ц Цвет 123, 223, 290, 425 добавление цветов в форму 223
    Джеймс Маркин
    Ведущий дизайнер
    Riven Productions 433 Spaeder Street Hollywood, CA 23435 Когда вы отключаете атрибут border (border=M0"), ячейки таблицы сливают- ся, так что отдельные ячейки таблицы ЁЫГЛЯДЯТ СПЛОШНЫМ целым. Использова- ние атрибута border визуально разделяет информацию на четко определенные информационные блоки, что существенно облегчает ее восприятие. Джеймс Маркин Ведущий дизайнер Riven Productions 433 Syacdei Street Hollywood, CA 234*5 Рис 2.30. Таблица с текстом и графикой 126 Глава 2. HTML-таблицы Управление расстоянием между колонками и шириной полей текста на Web-странице При создании документов с помощью таких программ, как Microsoft Word, текстовый процессор позволяет управлять внешними полями по краям каждой страницы и расстоянием между колонками текста. К сожалению, язык HTML не предоставляет таких же возможностей при размещении текста на Web-странице. Однако помещение текстового содержимого в таблицу может в некотором роде сымитировать механизм управления внешними полями и расстоянием между ко- лонками, который имеется в текстовом процессоре. Пусть, например, вы хотите создать Web-страницу, которая, будучи отображе- на Web-браузером, напоминала бы созданный в текстовом процессоре документ" с двумя колонками текста и соответствующим расстоянием между колонками (см. рис. 2.31). ПРАКТИКУМ В таблице, показанной на рис. 2.31, первый и последний столбцы таблицы оп- ределяют размер пространства, отведенного под левое и правое поле. В то же время третий столбец определяет размер интервала, который браузер оставит между колонками текста. И, наконец, второй и четвертый столбцы содержат в себе текст документа. Приведенный ниже код сгенерирует таблицу, показанную на рис. 2.31 (обра- тите внимание, что таблица фактически содержит пять ячеек):
    CH>fla вставляется эаголовок

    Сюда вставляется текст основной части документа <р> Сюда вставляется текст основной части документа

    		CKwa вставляется эаголовок

    Сюда вставляется текст основной части документа <р> Сюда вставляется текст основной части flOKyMeHrra

    Глава 2. HTML-таблицы 127 Помещение текста в таблицу позволяет организовать текст и управлять его отображением в окне браузера, а хорошо организованный текст легче читается и воспринимается. Кроме того, не все браузеры корректно отображают пустые ячейки таблиц. Следовательно, чтобы таблица всегда отображалась так, как вы задумали, вставьте прозрачные GIF-изображения в ячейки полей и промежутка между колонками и установите атрибут width в дескрипторе равным тре- буемой ширине поля или промежутка между колонками. 15-пиксельныи проь i .fe Edit .»« FavoiW ТоЫ» : Hob " ": ^ ^) { Back " Stop oeiween columns onext. Unfortunately, HTML does not give you the same control over the placement of tert on a Web page that Microsoft Word exerts over the margui and gutter space in a word processing document However, by placing text content in a table, you can simulate the outside margin and gutter control available in a word processor. Say, for example, you want to create a Web page that when displayed by a Web browser resembles a twocolumn word processor document with appropriate gutter spacing between the columns of text, as . shown in Figure 26 1 ew\ , ежуток между колонками ii 4 й м Refresh Home ; Search Favaiites between the twc; columns of text. Finally, the second and fourth columns hold the document text The following code will generate the table displayed in Figure 26_1. (Notice that the table actually contains five cells.) Unfortunately, HTML does not give you the same control over the placement of text on a Web page that Microsoft Word exerts over the margin and gutter space in a word processing document However, by placing text content in a table, you can simulate the outside margin and gutter control available in a word processor /^\~~A" ;;u*H| J History i ^ MyCoiT^uter Щ • - 20-пиксельные столбцы Рис. 2.31. Отображение двухколоночного текстового документа с использованием таблицы В этой главе I Обработка HTML-форм I Дескрипторы и атрибуты, используемые для создания форм • Создание на форме однострочного поля ввода ' Создание на форме многострочного поля ввода Проверка данных текстового элемента перед передачей результатов заполнения формы I Создание на форме флажков ' Создание на форме переключателей I Проверка выбора группы переключателей перед передачей результатов I формы Создание на форме выпадающего списка (меню выбора) I Проверка выбора элемента списка перед передачей результатов формы I Изменение элементов списка выбора на основании введенных посетителем данных I Передача всех значений списка выбора на Web-сервер с использованием скрытых полей I Создание на форме кнопки Reset Предотвращение случайной очистки посетителем элементов формы I Создание на форме кнопки Submit Замена стандартных кнопок Submit и Reset другими графическими I изображениями I Отправка результатов формы по электронной почте без использования CGI-сценария I Управление расположением элементов и текста формы с помощью HTML-таблиц ' Создание клавиши быстрой навигации по форме с помощью дескриптора
     
     [Весь Текст]
    Страница: из 389     		 <<-