| |
рафических изображений и даже пустого
пространства) в отдельные ячейки таблицы, а затем управление дизайном Web
Глава 2. HTML-таблицы 81
страницы путем помещения ячеек в организованные строки и столбцы. Соб-
ственно, многие дизайнеры при создании структурированной Web-страницы на-
чинают с рисования матрицы строк и столбцов (иными словами, таблицы), соответ-
ствующей ширине и высоте всей страницы. Затем дизайнер компонует страницу,
помещая содержимое страницы в ячеистую структуру строк и столбцов таблицы в
тех местах, где ему хотелось бы видеть каждый элемент (или объект) на странице.
Предположим, например, вы хотите разместить графический элемент в верх-
нем правом углу Web-страницы. Все, что нужно для этого сделать, — это создать
таблицу с ячейкой в верхнем правом углу страницы. Аналогично, если вы хотите
поместить текст в нижний правый угол страницы, просто проследите за тем,
чтобы структура таблицы создавала ячейку там, где должен быть выведен текст, и
поместите текст в эту ячейку.
Когда Web-браузер затем отобразит Web-страницу с таблицей, размеры табли-
цы и ее ячеек будут удерживать на месте графическое изображение (изображе-
ния) и текст. Поскольку каждая ячейка в таблице может удерживать объект Web-
страницы в определенном месте на странице, таблицы можно использовать для
управления расположением всего чего угодно, от простого текста до интерактив-
ных графических кнопок и фоновых изображений. На рис. 2.2, например, показана
Web-страница, на которой таблица с границами нулевой ширины обеспечивает не-
видимую сетку, удерживающую компоненты содержимого страницы на своих местах.
Рис. 2.2. Содержимое Web-
страницы, удерживаемое на своем
месте в ячейках таблицы
82 Глава2. HTML-таблицы
Не будет преувеличением сказать, что появление HTML-таблиц полностью
изменило процесс создания Web-страниц дизайнерами.
• А Н И Е, Из-за сложности и значительного объема HTML-кода, необходимого для
со-
здания больших таблиц компоновки страниц, вы можете прибегнуть к помощи
программ для
разработки Web-страниц, таких, как Dreamweaver и GoLive. Эти программы не
только генери-
руют хорошо написанный и эффективный HTML-код, но также могут сэкономить вам
часы ра-
боты, позволяя "рисовать" с помощью мыши таблицы, которые вы хотите
впоследствии ви-
деть на экране.
Кроме использования таблиц для размещения графики и текста на Web-стра-
нице, с их помощью можно также группировать навигационные кнопки вверху,
внизу или по бокам страницы. Использование таблицы для организации навига-
ционных кнопок в упорядоченную структуру с одинаковым относительным мес-
торасположением на каждой странице существенно упрощает навигацию по сай-
ту. Более того, окрашивая группы ячеек в различные фоновые цвета, можно
создать визуально упорядоченную страницу.
Предположим, например, вы создаете столбец навигационных кнопок вдоль
левого края Web-страницы. Используйте один и тот же цвет фона для каждой из
содержащих навигационные кнопки ячеек таблицы, как показано на рис. 2.3.
1 Ре .6ssK» товары
названия препарата: I
Купить 1
производитвпь. «повой1
П Mi*ri."3s JllfflAWi>tJJ
Н%й ft nwnnftH
ЯЫ j
№Й 1 юл
t .
ii ш э
Links ".VjjjjB
: МЫ '••
ентамнны | Щ
[г-.„
о я д-z о-э '^i
ф Internet
Рис. 2.3. Web-страница с содержимым, организованным с помощью цветов фона ячеек
таблицы
Рис. 2.3. Web-страница с содержимым, организованным с помощью цветов фонаячеек
таблицы
Затем, применив контрастный цвет в качестве фона остальных ячеек таблицы,
вы привлечете взгляд посетителя к группе ячеек, служащих навигационным
меню сайта, — так посетителю будет легче найти кнопки перехода со страницы
на страницу. Более того, используя один и тот же цвет фона для ячеек навига-
ционных кнопок на всех Web-страницах, вы дадите посетителю визуальную под-
сказку — куда "обращаться за помощью" при поиске интересующих его страниц
Глава 2. HTML-таблицы 83
на сайте. Вообще говоря, использование цвета фона для группирования ячеек
таблицы, выполняющих одну и ту же функцию, помогает создать приятный гла-
зу и дружественный к посетителю Web-сайт.
Таблицы также представляют собой отличный инструмент для разделения од-
ного графического изображения на несколько частей для последующего составле-
ния навигационной карты в Web-браузерах, не поддерживающих навигационные
карты. Навигационные карты {image maps) — это графические изображения, разде-
ленные на области, с помощью щелчка на которых пользователь может перехо-
дить на другие страницы. В зависимости от назначения и общей направленнос-
ти сайта, навигационную карту можно использовать в качестве единственного
инструмента навигации. Предположим, например, вы создаете сайт, посвящен-
ный истории своей семьи. На главную страницу
|
|
