Прозрачное GIF-изображение — это «невидимое» графическое изображение, которое можно использовать с таблицей или без таковой, чтобы воздействовать

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

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

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

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

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





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







В данном примере дескриптор , стоящий после второго дескриптора

(в третьей строке) дает Web-браузеру указание поместить прозрачное GIF- изображение, хранящееся в файле spacing. gif, во вторую ячейку таблицы. Ат- рибут width в дескрипторе дает Web-браузеру указание «растянуть» изоб — ражение размером 1×1 пиксель так, чтобы его ширина составляла 20 пикселей.

Причина, по которой вам может понадобиться использовать прозрачное GIF — изображение — вместо того, чтобы установить атрибут width в дескрипторе ячейки равным требуемому числу пикселей незаполненного пространства и оста —

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

пустыми ячейками таблиц. Например, хотя Internet Explorer и показывает фоно — вый цвет ячейки в пустых ячейках, Netscape Navigator этого не делает, показывая

вместо него цвет фона таблицы или Web-страницы. Более того, некоторые брау —

зеры игнорируют атрибут height и/или атрибут width, заданные в дескрипторе

пустых ячеек, и рисуют пустые ячейки так, что их высота равна всего лишь высоте самой высокой непустой ячейки в строке, а ширина не превышает шири — ны самой широкой непустой ячейки в столбце. И, наконец, ни Netscape. Navigator, ни Internet Explorer не будут рисовать левую и верхнюю границы ячей — ки, не имеющей содержимого — даже если атрибут border таблицы имеет значе — ние 1 или более. Однако если вы поместите однопиксельное GIF-изображение, растянутое до требуемых размеров, в ячейку таблицы, все Web-браузеры будут отображать «пустую» ячейку одинаково — с размерами GIF-изображения, задан — ным цветом фона ячейки и границами (если таковые заданы) — поскольку, хотя ячейка и кажется незаполненной, на самом деле она не пустая.

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





ПРИМЕЧАНИЕ Вы узнаете, как создавать файлы прозрачных GIF-изображений, далее в этой книге, в главе, посвященной графике. Пока что вы можете пользоваться однопиксель — ным прозрачным GIF-изображением из файла spacing. gif, который можно выгрузить из раздела материалов для этой книги на сайте издательства.



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

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





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

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

на рис. 2.18.



Следующие HTML-дескрипторы создают таблицу, в которой первый рисунок

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



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







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

src=»image_l. jpg»X/td>

Вставьте onHcaHne

Вставьте i*eHy

tdX/tdX/tr >

img height=»32″ width=»32″ src=»image_2 . jpg»X/td>

BcTaBbTe описаниеtdXtr>

BcTaBbTe i*eHy

tdx/tdx/tr >

img height=»32n width=»32″ src=»image 3 . jpg»X/td>

BcTaBbTe on»caHHe

trxt d width=»72″ align=»center»>Вставьте i*eHy

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

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

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

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

была возможность выбирать полноразмерное изображение, сначала открыв Web —

страницу, содержащую миниатюры (уменьшенные изображения) всех выставлен —

лтWнзОарюыаргeецврbхгбИеауав-удсжносенеоатпзиаанйрмеозтигтваолпаяцржьнрсевизотинмоырядзаоваеабусамнженитнтиьруиц, нхаиевудтизк, ьыаоаотумбтсабирпюиоборсмодлрваореесиж. арнретцваетжньКынимтоаоиитащыгедбятдлушолпаюияви, рицопчлосWуситоатомоскоeнощеаbобтаот-нрвенрсеоалиаииттжтчйчесвдкелнтхаеаонвьоытлвуиьтьнеюящянаотощсоетбмнтуйлдеырвикеоисчхалнктд. енпьиритеноКаатылтьнрнинюениоа(оермцсритмеазро. зиоелптсмбншробоеригицзараовасыеенж, от. нтоюелзн2иендаяро. гв1еиедрие9тя, алуз)е. зпюозWсткабобадрсeпяаbеагточт-жрмсбиаежер:тофнтаедщитиулиаазтеьяткебе. юьмир-.

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





Чтобы с помощью таблицы отобразить группу изображений-миниатюр, создайте

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

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

с атрибутом href в каждую ячейку, содержащую изображение-миниатюру. Деск — риптор создает ссылку от миниатюры к полноразмерному изображению. На —

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

страницей, содержащей полноразмерное изображение (page_i. htm):





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

с атрибутом href в приведенном ниже коде связывает миниатюру (заданную

атрибутом sr c в дескрипторе ) с соответствующим ей полноразмерным изоб — ражением и создает Web-страницу, немного похожую на показанную на рис. 2.19:





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

мерное изображение. Например, при щелчке на «миниатюре в верхнем левом углу рисунка 2.19 Web-браузер отобразит полноразмерное изображение, которое пока — зано на рис. 2.20.

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







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

изображениями. Если, например, вы создали и сохранили изображение с име —

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



Создание маркеров и списков

с помощью таблиц и графики

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

ном, неупорядоченного) списка дизайнер может обозначать его элементы только маркерами из ограниченного количества символов. Например, следующий код сгенерирует маркированный список, приведенный на рис. 2.21.

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





Начальный и конечный дескрипторы неупорядоченного списка ( )

идентифицируют начало и конец маркированного списка, а дескриптор оп —

ределяет элемент списка (см. рис. 2.21).







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

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





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



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

неординарным. Например, если вы создаете маркированный список действий, необходимых для выращивания роз, замените стандартный символ маркера на графическое изображение красной розы.

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



Создание бокового навигационного меню

с помощью таблицы

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

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

цу вашего сайта. В предыдущем практикуме вы научились создавать маркирован —

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



ПРАКТИКУМ

Боковое меню {sidebar) представляет собой простую форму навигационной панели. Обычно боковое меню состоит из списка слов, отображаемых с левой стороны на

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

cellspacing=»2″ width=»96″>

.htm»>^aBHaH

06pa3ubi

trXtdXa href=»aboutus. htm»>0 Hac

KoHTaKT

.htm»>KynnTb

Чтобы быть последовательными, всегда помещайте боковое навигационное

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

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





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



Добавление графики и ссылок в ячейки таблицы

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

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

коде, между начальным и конечным дескрипторами ( ) таблицы:

Cs>fla помещаются данные ячвйки

ПРАКТИКУМ

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

ки ( ) :

src=»image. jpg» X/td>

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

Следовательно, в данном примере Web-браузер отобразит рисунок из файла

image. jpg.

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

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

href =»info. htm»Ximg src=»image. jpg» X/ax/td>

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

тем щелкнет на рисунке, Web-браузер отобразит содержимое файла, указанного в

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

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



Управление границами на Web-странице

с помощью вложенных таблиц

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

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

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



ПРАКТИКУМ

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

те таблицу и вставьте вторую таблицу с тремя графическими элементами в

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

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

три изображения? в ячейку другой таблицы:





В данном примере второй столбец таблицы содержит вложенную таблицу, а

первый столбец внешней таблицы имеет фиксированную ширину, равную 30

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

бец таблицы отодвигает вложенную таблицу на 30 пикселей вправо от левого

края окна браузера, как показано на рис. 2.24.

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





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

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

рии Канзаса. Навигационные карты помогают посетителям наглядно ориентиро- ваться в пределах сложного Web-сайта.

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

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





ПРАКТИКУМ

В приведенном ниже коде, когда посетитель выполняет щелчок на графическом изображении home. jpg, Web-браузер соединяется с Web-страницей home. htm и открывает ее:



width=»80″ src=»home. gif»X/a>



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

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

Приведенный ниже код создает навигационную панель, показанную на рис.

2.25:







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

В предыдущем практикуме вы научились создавать навигационные карты пу — тем компоновки отдельных графических элементов внутри таблицы. Таблицы

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

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





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

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



ПРАКТИКУМ

Скажем, к примеру, у вас на Web-странице есть большое графическое изображе —

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

ся big_sky. jpg.

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

Если вы разделите большое графическое изображение на фрагменты, графи — ческая программа сможет выбрать различные методы сжатия для разных частей,

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

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

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

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

Когда таблица загружает изображение на Web-страницу, оно загружается быст-

рее, поскольку браузеру приходится загружать с сервера меньший объем инфор- мации.

Для разрезания изображения требуется какой-нибудь графический редактор, например, Adobe ImageReady 3.0. Это единственная имеющаяся в настоящее, вре — мя на рынке программа, которая автоматически разрезает фотографическое изоб — ражение, оптимизирует каждую порцию в соответствии с цветами в изображении

и сохраняет нарезанные изображения в отдельной папке.

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







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

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

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

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

таблицы, тем быстрее таблица загружается.



ПРАКТИКУМ

Чтобы таблица быстрее загружалась, укажите размеры графических изображений, вставляемых в ячейки таблицы. В следующем коде графическое изображение image. jpg загружается в ячейку таблицы, которую браузер делает такой же ши — рины и высоты, что и изображение: