С помощью фреймов можно всегда держать навигационное меню на виду, в то время как посетитель будет путешествовать по страницам вашего Web-сайта.

Предположим, например, вы создаете Web-страницу с двумя фреймами вроде той, которая показана на рис. 1.26.



Поместите навигационное меню в узкий, 100-пиксельный прямоугольный фрейм

в левой части страницы и отображайте новые Web-страницы в большем фрейме

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

справа, посетитель не теряет из виду «дорожную карту» вашего сайта. Приведенный ниже код создает Web-страницу с фреймами, показанную на рис. 1.26:



76 Глава 1. Основы языка HTML







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

в фреймах, определенных начальным дескриптором* задания фреймов ().

В данном примере страница определения фреймов дает Web-браузеру указа —

ние отобразить документы n_nav. html и n main. html (навигационное меню сай —

та и главную страницу соответственно) внутри двух разных фреймов. Web-браузер

загружает документ n_nav. html в первый фрейм, ширина которого составляет

100 пикселей, и документ n main. html во второй фрейм, ширина которого —

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

ко Web-страниц внутри одного окна документа.

Одновременный вывод на экран нескольких

Web-страниц

С помощью фреймов можно одновременно отображать на экране несколько Web — страниц. Типовая Web-страница, содержащая фреймы, может иметь два фрейма —

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



ПРАКТИКУМ

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

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

Предположим, например, у вас есть страница с навигационной панелью, со —

храненная в файле с именем n_menu. html. Кроме того, у вас имеется Web-стра — ница с информацией о компании, сохраненная в файле с именем opendoc. html.

С помощью фреймовой страницы, которая описывается приведенным ниже

HTML-кодом, вы можете отобразить обе страницы (n_menu. html и opendoc. html) на экране одновременно:



Глава 1. Основы языка HTML 7 7





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

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

В данном примере атрибут cols в дескрипторе дает Web-браузеру указание нарисовать два фрейма, первый из которых должен иметь ширину 80 пикселей, а второй — 400 пикселей. Таким образом, атрибут cols сообщает Web — браузеру не только количество фреймов, которые тот должен нарисовать (по чис —

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

в пикселях. (Например, если у вас три фрейма, атрибут cols будет иметь три

значения и выглядеть так: соД. в«»л, л,л»; если у вас четыре фрейма, атрибут

cols будет иметь четыре значения и выглядеть как со18=»л, л,л, л», и т. д.)

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

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

зит njnenu. html В Первый фрейм (названный menu) И opendoc. htm ВО ВТОрОЙ

фрейм (с именем content), как показано на рис. 1.27.



78 Глава 1. Основы языка HTML





Когда посетитель сайта щелкает на гиперссылке в фрейме меню, атрибут target дескриптора сообщает Web-браузеру, в какой фрейм загрузить Web-страницу, на которую указывает атрибут href дескриптора . Например, следующая гиперссыл —

ка дает Web-браузеру указание отобразить документ aboutus. htm l в фрейме content,

когда пользователь щелкнет в каком-то месте ссылки «О нас»:





Таким образом, когда посетитель сайта щелкнет на гипертекстовой ссылке «О

нас», Web-браузер заменит документ (opendoc. html из предыдущего примера), ото —

бражаемый в целевом фрейме (content), документом aboutus. html (на который указывает атрибут href в данном примере). Если у дескриптора гиперссылки

нет атрибута target, браузер загрузит документ, на который указывает гиперссылка, в

фрейм, где отображалась Wfeb-страница, гиперссылку которой активизировал пользова —

тель. Например, HTML-код о нас заставит Wfeb-браузер

заменить в фрейме menu документ njnenu. html документом aboutus. html (при усло —

вии, что «О нас» — гиперссылка в панели меню, отображаемой внутри фрейма menu).

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

target, — в этом случае браузер все равно загрузит связанную страницу в фрейм

content. Отображая извлекаемые браузером связанные страницы в меню content,

вы сможете оставлять навигационное меню (в фрейме menu) на экране постоянно.

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

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

не поддерживают фреймы, не отобразят ни Web-страницы в фреймах, ни фрей —

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

Чтобы решить проблему браузеров, не поддерживающих фреймы, включите в

свой документ задания фреймов начальный и конечный дескрипторы воспроизведе —

ния документа без фреймов (), как показано в следующем коде:







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





Создание таблиц с ячейками, объединяющими несколько столбцов

и несколько строк

Работа с шириной границы таблиц и ячеек Работа с цветами границ таблицы и ячеек Работа с фоновыми изображениями и цветами Определение значения цветового атрибута

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

Задание размеров таблицы с помощью относительных и абсолютных значений Задание размеров ячеек с помощью относительных и абсолютных величин Выравнивание содержимого ячейки по горизонтали и по вертикали Выравнивание таблицы на Web-странице

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

GIF-изображения

Обтекание текстом изображения

Отображение с помощью таблицы галереи миниатюр

Создание маркеров и списков с помощью таблиц и графики Создание бокового навигационного меню с помощью таблицы Добавление графики и ссылок в ячейки таблицы

Управление, границами на Web-странице с помощью вложенных таблиц

Составление навигационной карты путем помещения фрагментов изображения в таблицу

Разрезание графического изображения на фрагменты для вставки в ячейки таблицы с целью создания быстрозагружаемой Web-графики

Снижение времени, затрачиваемого Web-браузером на рисование таблицы

Имитация фреймовой Web-страницы с помощью таблицы

Привлечение внимания посетителя с помощью цвета фона ячеек

Визуальное выравнивание содержимого Web-страницы с помощью видимых границ таблицы

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

Web-CTDaHHue

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



появлением в языке HTML механизма таблиц, в арсенале Web-дизайнеров

^появились два весьма ценных инструмента — средство для размещения на страницах текстовой и числовой информации в табличном формате, а также инст- румент для точного позиционирования объектов на Web-странице. Хотя вы и бу — дете время от времени использовать таблицы для представления табличных дан — ных, истинная ценность таблиц заключается в возможности их применения для компоновки страниц. HTML-таблицы позволяют компоновать такие Web-страни — цы, создание которых было достаточно сложным, если не вовсе невозможным, до введения таблиц с появлением в 1995 году версии HTML 3. Собственно говоря, применение таблиц для компоновки страниц стало настолько распространенным,

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

При работе с таблицами наиболее очевидным кажется их применение для отображения текста и числовых данных в форме набора столбцов. Скажем, вы хотите вывести на экран список должностных лиц компании вместе с телефон — ными номерами каждого из них. Для этого вам нужно создать таблицу с двумя столбцами, где отдельные ячейки в левом столбце будут содержать имена и фа — милии должностных лиц. Соответствующие ячейки в правом столбце содержат номер телефона того или иного должностного лица. Как показано на рис. 2.1, объем предоставляемой таблицей информации можно увеличить, добавив третий столбец, содержащий адрес электронной почты, а также четвертый, пятый и ше —

стой столбцы, соответственно, под адрес, город и штат.



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

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

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





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

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

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

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

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

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





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





Не будет преувеличением сказать, что появление HTML-таблиц полностью

изменило процесс создания Web-страниц дизайнерами.



ПРИМЕЧАНИЕ, Из-за сложности и значительного объема HTML-кода, необходимого для со- здания больших таблиц компоновки страниц, вы можете прибегнуть к помощи программ для разработки Web-страниц, таких, как Dreamweaver и GoLive. Эти программы не только генери- руют хорошо написанный и эффективный HTML-код, но также могут сэкономить вам часы ра- боты, позволяя «рисовать» с помощью мыши таблицы, которые вы хотите впоследствии ви — деть на экране.





Кроме использования таблиц для размещения графики и текста на Web-стра —

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

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

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

левого края Web-страницы. Используйте один и тот же цвет фона для каждой из содержащих навигационные кнопки ячеек таблицы, как показано на рис. 2.3.





Рис. 2.3. Web-страница с содержимым, организованным с помощью цветов фона ячеек таблицы

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

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

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





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

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

зу и дружественный к посетителю Web-сайт.

Таблицы также представляют собой отличный инструмент для разделения од — ного графического изображения на несколько частей для последующего составле — ния навигационной карты в Web-браузерах, не поддерживающих навигационные карты. Навигационные карты {image maps) — это графические изображения, разде — ленные на области, с помощью щелчка на которых пользователь может перехо — дить на другие страницы. В зависимости от назначения и общей направленнос —

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

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

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

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

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

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

Web-страницу на бумаге и разделив изображения и текст горизонтальными и вертикальными линиями, можно быстро убедиться, реализуем ли вообще такой ди — зайн. Иными словами, набросок (или раскадровка) покажет, сможете ли вы разде — лить объекты на Web-странице на отдельные ячейки блочной структуры HTML-таб — ЛЙЦЫ. Всегда анализируйте проект перед тем, как приниматься за написание кода.



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

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

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





• . Уведомляет Web-браузер, что с текстом, заключенным

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

таблицей.

•
(строка таблицы — table row). Уведомляет Web-браузер, что он должен поместить элементы данных и, возможно, заголовки между началь — ным и конечным дескрипторами в отдельную новую строку таблицы.

• (данные таблицы — table data). Уведомляет Web-браузер, что HTML-дескрипторы, атрибуты и текст (если таковой имеется) между началь — ным и конечными дескрипторами являются содержимым (иными словами, данными), которое Web-браузер должен отобразить в столбце таблицы.



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







Как было сказано в перечне перед HTML-кодом табли — цы, начальный и конечный дескрипторы таблицы

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

не обращайте внимания на атрибут border; его мы рассмотрим в следующем

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

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

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

торов данных таблицы ( ) , как показано ниже:





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





Как и в случае с предыдущим примером, первая строка кода в данном приме —

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

дескриптор , является частью определения HTML-таблицы.

Вторая строка кода выглядит так: