03. Дизайн на таблицах

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

На этой странице:

• Заголовочная часть сайта
• Табличный макет страницы
• Картинки в таблицах
  • Использование распорок
  • Рамка
  • Сборная графика

Заголовочная часть сайта

Построим заголовочную часть, состоящую из трёх элементов:

• логотип. Выровнен по левому краю страницы;
• заголовок. Выровнен по центру страницы;
• вспомогательный рисунок. Выровнен по правому краю страницы.

Зададимся целью построить “резиновый” заголовок, то есть такой, который бы подстраивался под текущую ширину окна, сохраняя запланированные типы выравнивания своих элементов:

Исходный материал — три картинки:

Поместим эти изображения в таблицу, состоящую из одной строки с тремя ячейками:

Для таблицы укажем следующие атрибуты:

Для ячеек зададим атрибуты:

Для рисунка-заголовка укажем отступ по горизонтали в 10 пикселов (hspace=10), чтобы картинки не смыкались в узких окнах.

Откройте окно построенного примера и проверьте “резиновые” свойства заголовочной части, меняя размеры окна:

Табличный макет страницы

Спроектируем страницу, макет которой показан на рисунке:

Построим таблицу, имеющую подобную структуру:

Код этой таблицы:

Остаётся наполнить ячейки таблицы содержимым, и получим страницу, например, такую как показано на рисунке:

Картинки в таблицах

Использование распорок

Распорка (GIF, содержащий одну прозрачную точку) довольно часто используется в качестве инструмента дизайнера. “Растягивая” точку до прямоугольника нужных размеров, можно придать “жёсткость” проектируемым областям, не позволяя им уменьшаться вслед за уменьшением окна браузера.

Покажем метод использования распорок на примере. Пусть нужно создать страницу по следующему макету:

Решение без распорок:

Обратите внимание: при уменьшении ширины окна поля начинают уменьшаться, несмотря на то, что в ячейках, которые их задают, прописано указание width=100.

Распорки помогут исправить ситуацию:

Теперь, при уменьшении окна, браузер включит линейку прокрутки, но не изменит заданную ширину полей.

Рамка

Простейшую рамку можно получить, поместив картинку в табличную ячейку:

Код этой таблицы:

Обратите внимание, код элемента IMG плотно прилегает (без пробелов и концов строки) к коду табличной ячейки. А если записать код с пробелами?

Это приведёт к неплотному прилеганию картинки к границам ячейки:

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

Задумчивый портрет

Картинка Подпись

Код таблицы с картинкой:

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

Сначала нарисуем рамку в графическом редакторе:

При помощи подходящего средства (например, в программе Adobe ImageReady) вырежем из рисунка “кирпичики”, которые будем использовать для построения рамки произвольного размера:

Полученные заготовки будут фоновыми картинками в соответствующих ячейках таблицы размером 3×3. Саму картинку будем располагать в центральной ячейке (2,2), а подпись в ячейке (3,2):

Реализуя задуманное, получим следующее оформление для картинки:

	Задумчивый портрет

Код этого примера:

В пустых ячейках используется распорка (empty.gif). Пустой ячейку оставлять нельзя — не все браузеры правильно показывают таблицу с пустыми клетками. Использовать неразрывный пробел ( ) тоже нельзя — при увеличении размера шрифта, размеры пробела также будут увеличиваться, и это может привести к появлению разрывов в рамке.

Заготовку легко использовать многократно, например, поместить в неё другую картинку:

	Вася Кук изучает информатику

Рамку можно использовать в качестве врезки для размещения в ней различных материалов:

	Азы информатики
	«Азы информатики» — это курс для начинающих. Он рассчитан на 5 лет школьного обучения, стартовый возраст — пятый класс (но можно и с третьего; зависит от уровня предварительной подготовки учеников). Автор курса — Александр Александрович Дуванов. Он же автор электронной компоненты курса.
	kurs@robotland.pereslavl.botik.ru

Сборная графика

О преимуществах разрезанной картинки говорилось в уроке 12.

Пусть на страницу нужно вывести следующее изображение:

Оптимизация приводит к следующему результату: в форматах GIF и PNG-8 качество получается плохим. Размер файла в формате PNG-24 (сжатие без потерь) — 83 килобайта. Оптимизация в формате JPEG приводит к приемлемому результату по качеству при файле размером в 52 килобайта.

Но даже объём в 52 килобайта не годится для Web, ведь совокупный размер всей страницы не должен превышать 50 килобайт.

Разрежем картинку на четыре части:

Оптимизация частей приводит к неплохому результату — сокращению общего размера до 29 килобайт (уменьшение на 44%):

Для отображения картинки погрузим её части в таблицу 3×3 (ячейки, которые предстоит объединить, выделены цветом):

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

В каждую ячейку последнего столбца поместим картинку-распорку шириной в 1 пиксел.

Распорка — это прозрачное GIF-изображение размером 1×1 пиксел. То есть в этой картинке всего один пиксел, и он — прозрачный. Используя размерные атрибуты элемента IMG, эту картинку можно растянуть по горизонтали и вертикали до нужных размеров. Например, тег

задаёт на экране квадрат со стороной 200 пикселов (файл empty.gif — распорка). Понятно, что этот квадрат, да и любой другой прямоугольник, построенный на экране при помощи картинки empty.gif, пользователь не увидит — ведь размерные атрибуты “растягивают” прозрачную точку!

Результат работы представлен ниже:

Отметим важные моменты в этом коде.

• Для таблицы указана ширина в 401 пиксел: 400 — ширина исходной картинки, 1 — ширина распорки. Высота таблицы (300 пикселов) совпадает с высотой исходной картинки. Для ячеек ширина и высота не указаны, браузер будет их вычислять исходя из ширины и высоты изображений, которые в них помещены.
• Распорка в коде — это файл empty.gif.
• Границы кода элементов IMG примыкают к границам кода ячеек без пробелов и концов строк — чтобы в ячейке не появились ненужные промежутки.

При разрезании исходной картинки в программе Adobe ImageReady, генерируется автоматический HTML-код, подобный приведённому выше, в качестве распорки указывается файл spacer.gif