Самоучитель по креативному веб-дизайну. Книга 1, стр.96

Глава 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.

Самоучитель по креативному веб-дизайну. Книга 1, стр.97





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





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

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

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







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

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





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



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

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

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



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

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

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

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

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

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



ПРАКТИКУМ

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

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

Самоучитель по креативному веб-дизайну. Книга 1, стр.98


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-сайт, посвященный, скажем, исто-

Самоучитель по креативному веб-дизайну. Книга 1, стр.99

рии Канзаса. Навигационные карты помогают посетителям наглядно ориентиро- ваться в пределах сложного 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-странице есть большое графическое изображе —

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

Самоучитель по креативному веб-дизайну. Книга 1, стр.100

ся big_sky. jpg.

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

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

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

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

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

Самоучитель по креативному веб-дизайну. Книга 1, стр.101

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

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

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

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

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

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







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

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

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

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

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



ПРАКТИКУМ

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

Самоучитель по креативному веб-дизайну. Книга 1, стр.102




width=»58″ height=»12″ src=»image. jpg»X/td>







Если опустить атрибуты heigh t и width в дескрипторе , браузеру при- дется определять размер ячейки по размеру изображения, которое он должен в

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

ему нужно будет загрузить графическое изображение. Если вы в явном виде зада^

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





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

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

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



ПРИМЕЧАНИЕ При указании размеров изображений следите за тем, чтобы значения атри- бутов heigh t и widt h соответствовали фактической ширине и высоте изображения, кото — рое браузер должен поместить в ячейку. Если указанные вами высота и/или ширина отлича- ются от размеров изображения, Web-браузер растянет (или сожмет) изображение, чтобы привести его размеры в соответствие со значениями атрибутов heigh t и width. В резуль — тате выведенное на экран изображение может исказиться.



Имитация фреймовой Web-страницы

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

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

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

его содержимого. Один из способов организации содержимого наг Web-странице

— это использование фреймов, которые делят Web-страницу на несколько окон,

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

которая показана на рис. 2.27, имеет три фрейма.

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

Самоучитель по креативному веб-дизайну. Книга 1, стр.103

Хотя фреймы — отличный инструмент для организации информации на Web —

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

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





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



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







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

Самоучитель по креативному веб-дизайну. Книга 1, стр.104



Привлечение внимания посетителя

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

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

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

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

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



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

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

тельный текст, например, как показано на рис. 2.29.

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





Изменение цвета фона ячейки таблицы, содержащей слова «Смотри сюда!» на желтый (за счет установки атрибута bgcolor в дескрипторе ячейки равным

»yellow») привлекает внимание посетителя к ячейке и делает акцент на фраг — менте текста в смежной ячейке.

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

с помощью видимых границ таблицы

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

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

Глава 2, HTML-таблицы 12 5





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

Самоучитель по креативному веб-дизайну. Книга 1, стр.105

Строка 1 содержит имя и фамилию сотрудника, строка 2 — фотографию со — трудника, строка 3 — должность, занимаемую им/ею в компании; строка 4 — его/ее почтовый адрес. Применение таблицы не только помогает организовать информацию на Web-странице, но, вдобавок к этому, использование атрибута border дает возможность еще более наглядно определить внешнюю границу таб — лицы и отделяет таблицу от прочей графики и текста на Web-странице.

Показанная на рис. 2.30 таблица создается при помощи следующего кода:



Когда вы отключаете атрибут border (border=M0″), ячейки таблицы сливают —

ся, так что отдельные ячейки таблицы ЁЫГЛЯДЯТ СПЛОШНЫМ целым. Использова — ние атрибута border визуально разделяет информацию на четко определенные информационные блоки, что существенно облегчает ее восприятие.





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



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

и шириной полей текста на Web-странице

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



Полезные ссылки
Случайные записи
  • 02.03.2011">Руководство по actionscript. часть 5, стр. 100
  • 06.03.2011">Руководство по actionscript. часть 4, стр. 152
  • 01.10.2010">Что такое экшен и как с ним работать?
  • 10.05.2010">Самоучитель по креативному веб-дизайну. Книга 1, стр.98
  • 16.03.2011">Руководство по actionscript. часть 3, стр. 014
  • 19.10.2011">Памяти Стива Джобса
  • 04.03.2011">Руководство по actionscript. часть 5, стр. 036
  • 11.03.2011">Руководство по actionscript. часть 3, стр. 148
  • 30.01.2011">Форматы растровой графики
  • 13.03.2011">Руководство по actionscript. часть 3, стр. 096
  • 09.05.2010">Самоучитель по креативному веб-дизайну. Книга 1, стр.170
  • 19.05.2010">Самоучитель по креативному веб-дизайну. Книга 2, стр.35
  • 02.03.2011">Руководство по actionscript. часть 5, стр. 084
  • 14.03.2011">Руководство по actionscript. часть 3, стр. 069
  • 07.03.2011">Руководство по actionscript. часть 4, стр. 120
Опрос

Какие цвета вы предпочитаете?

View Results

Loading ... Loading ...