Фреймы слишком уж независимы друг от друга. И примечания, врезки, сноски и прочие типографские "вкусности" с помощью фреймов не создашь. Нужно что-то другое, "отвязывающее" их от "потока" текста, но не полностью. Требования крайне противоречивые, но ничего не поделаешь — они таковы.
И тогда на помощь приходят таблицы.
В главе 5, когда говорилось об особых применениях таблиц, мы всячески экспериментировали с текстом: делали отступы слева и справа, линейки, фоновый узор и т. п. На самом деле, таблицы могут гораздо больше. Например, с их помощью мы можем разместить несколько фрагментов текста так, как нам нужно. И это вполне могут быть основной текст и комментарии к нему.
Взгляните на рис. 8.1. Что вы на это скажете?
| Абзац 1 | Примечание 1 |
| Абзац 2 | Примечание 2 |
| Абзац 3 | Примечание 3 |
Рис. 8.1. Создание примечаний к тексту с помощью таблиц
Как видите, используя таблицу, мы можем разделить текст на несколько фрагментов и поместить рядом соответствующие примечания. Мы можем сделать линии между фрагментами невидимыми, так что посетитель нашего сайта и не заметит, что для форматирования этого текста использовались таблицы. (Опытный интернетчик, знакомый с HTML, конечно, догадается, ну и бог с ним.) Также мы можем сделать невидимыми линии между фрагментом текста и примечанием, выровнять текст примечания вправо, выделить его курсивом и сделать еще что-нибудь, дабы логически отделить его от основного текста. Но это уже детали. Главное: мы получили то, что хотели.
Значит, есть выход из положения!
Приведем еще один пример. Предположим, мы делаем интернет-магазин. Нам нужно поместить на страницу название, описание, цену и фотографию товара. С таблицами это проще простого — см. рис. 8.2.
| Название товара | ||
| Фотография товара | Описание товара | Цена товара и сведения о скидках |
Рис. 8.2. Описание товара в интернет-магазине, сделанное с помощью таблицы
Видите, как компактно и изящно у нас получилось! С помощью специально отформатированной таблицы мы разместили несколько фрагментов текста и графическое изображение так, как нам нужно. А если нам что-то не понравится, мы можем слегка переделать эту таблицу и получить совершенно другой результат.
Web-дизайнеры давно освоили таблицы. И так же давно носилась в воздухе простая, как все гениальное, идея. А что если поместить ВЕСЬ текст Web-страницы в большую, сложно отформатированную таблицу, "растянув" ее на все окно Web-обозревателя? Ведь тогда мы получим практически неограниченные возможности, почти такие же, как у наших коллег-полиграфистов. Мы сможем создавать и примечания, и сноски, и врезки, и множественные "потоки" текста, которые будут начинаться и прерываться там, где нам нужно. Да это произведет революцию в Web-дизайне!
Вот мы и подошли вплотную к табличному дизайну, т. е. способу построения Web-страниц с использованием таблиц.
Основной принцип табличного дизайна уже был приведен. Весь текст и вся графика помещаются в ячейки таблицы, что позволяет делать с ними все, что угодно. Как правило, такие таблицы (назовем их таблицами разметки) имеют невидимые границы, а линейки создаются с помощью очень тонких ячеек с фоновым заполнением. Таблицы разметки очень сложны, используют различное форматирование и многократное объединение ячеек и практически всегда — вложенные таблицы.
Создание сложных таблиц разметки вручную — высший пилотаж Web-дизайна. Не всякий даже опытный Web-дизайнер возьмется делать сложные страницы на основе таблиц. И все это из-за невероятной сложности получающегося HTML-кода. Поэтому очень часто в коде Web-страниц, построенных на основе таблиц, встречаются ошибки, из-за чего их не всегда может отобразить Web-обозреватель. В самом деле, во всех этих многочисленных объединенных ячейках и в сложнейшем форматировании можно элементарно запутаться.
И в то же время любой может значительно улучшить вид своих страничек, использовав относительно простую табличку. Проиллюстрируем это примером.
Откроем страницу default.htm нашего второго сайта, построенного на основе фреймов. Посмотрим на нее. И переделаем с использованием таблиц. Конечно, не будем сразу же делать это в Dreamweaver, а пока что нарисуем на бумаге. У нас получится нечто, похожее на рис. 8.3. Это, кстати, классическая схема табличного дизайна.
| Заголовок сайта | |
| Набор гиперссылок для перехода между страницами сайта | Полезное содержимое сайта |
| Сведения о правах разработчика сайта | |
Рис. 8.3. Классический табличный дизайн
Как видите, это совсем простая таблица с двумя объединенными ячейками. Dreamweaver создаст ее для вас в два счета. А каков результат!
А ведь Dreamweaver может много больше. Он может построить для вас сколь угодно сложную таблицу и при этом ни разу не ошибется. Господа Web-дизайнеры, запутавшиеся в собственном HTML-коде, вы слышите?
А пока рассмотрим наиболее общеупотребительные схемы табличного дизайна, встречающиеся в Сети.
Схемы табличного дизайна
Классическая схема табличного дизайна, выдержавшая проверку временем, показана на рис. 8.3. Ничего лишнего — только то, что действительно нужно. Иногда, правда, полосу навигации помещают справа — это выглядит необычно и довольно удобно (рис. 8.4). Автор сам как-то делал такой сайт.
| Заголовок сайта | |
| Полезное содержимое сайта | Набор гиперссылок для перехода между страницами сайта |
| Сведения о правах разработчика сайта | |
Рис. 8.4. Классический дизайн с полосой навигации, расположенной справа
Часто на первую страницу в отдельной колонке помещают еще и новости сайта (рис. 8.5). Но это стоит делать только тогда, когда ваш сайт часто обновляется, и посетителям нужно знать об этих обновлениях. Впрочем, сейчас все более-менее значимые сайты имеют колонку или раздел новостей.
| Заголовок сайта | ||
| Набор гиперссылок для перехода между страницами сайта | Полезное содержимое сайта | Новости сайта |
| Сведения о правах разработчика сайта | ||
Рис. 8.5. Классический табличный дизайн с колонкой новостей сайта
Как правило, на главной странице помещаются только "свежие" новости (за определенный период), а "старости" располагают на специальной странице архива новостей. Ссылка на эту страницу размещается внизу или, реже, наверху колонки новостей. А сами новости и в колонке на главной странице, и на странице архива перечисляются в обратном порядке: от самых "свежих" до самых "старых".
Сайты-каталоги программ, которых очень много в Интернете, имеют весьма похожий дизайн — см. рис. 8.6.
| Заголовок сайта | |
| Список разделов | Описания программ выбранного раздела |
| Сведения об авторских правах на материалы сайта и опубликованные на нем программы | |
Рис. 8.6. Дизайн сайта-каталога программ
Новостные сайты имеют самый сложный дизайн (рис. 8.7). Состоящие из множества пестрых колонок Web-страницы сразу привлекают внимание посетителей.
| Заголовок сайта и - очень часто - реклама | |||
| Набор гиперссылок, ведущих на различные разделы сайта | Фотографии, относящиеся к новостям | Важнейшие новости | Остальные новости одной строкой |
| Календарь новостей | |||
| Сведения об авторских правах | |||
Рис. 8.7. Один из вариантов дизайна новостного сайта
Не менее, а иной раз и более пестрый дизайн имеют музыкальные сайты (рис. 8.8). Порядок следования колонок может меняться, но, в целом, основные элементы главной страницы перечислены полностью.
Надо сказать, что описанные выше схемы применяются, как правило, к главной странице сайта. В самом деле, главная страница современных сайтов часто настолько перегружена разнородной информацией, что без сложной таблицы разметки не обойтись. Остальные страницы, поскольку они всегда значительно проще начальной, строятся по простейшим, проверенным временем схемам, представленным на рис. 8.3 и 8.4.
| Заголовок сайта и - очень часто - реклама | |||
| Набор гаперссылок, ведущих на различные разделы сайта | Новые поступления в музыкальный архив | Музыкальные новости | "Горячая" десятка (двадцатка, тридцатка) |
| Сведения об авторских правах | |||
Рис. 8.8. Один из вариантов дизайна музыкального сайта
На многих главных страницах, построенных с применением табличного дизайна, помещаются составные изображения. Они играют роль либо красивого графического заголовка сайта, либо полосы навигации, либо и того и другого. Нередко организуется отдельная колонка или ячейка таблицы разметки, предназначенная для рекламных баннеров, аналогично специальным "рекламным" фреймам.
Очень часто в табличном дизайне используются пустые ячейки фиксированной ширины или высоты с заданным цветом фона либо вообще без фона (т. е. цвет фона такой же, как и у страницы). С помощью первых создаются линейки, а с помощью вторых — просветы, визуально отделяющие один фрагмент от другого. Как правило, линейки или просветы помещаются между близко находящимися фрагментами текста, между текстом и полосой навигации, текстом и заголовком. Иногда помимо использования линеек или просветов Web-дизайнер по-разному форматирует соседние фрагменты текста, например, задает им выравнивание в противоположные стороны или меняет цвет фона ячеек, в которых они находятся.