Macromedia Dreamweaver MX

Основы табличного дизайна

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

Зачем нужны таблицы

В самом деле, зачем нужны таблицы? Казалось бы, у них достаточно узкое назначение: представлять большие объемы числовой и текстовой информа­ции на ограниченном пространстве. Зачем еще строить на их основе целые Web-страницы? Что это нам даст?

Свободу.

Когда мы говорили о рисунках (см. главу 4) и фреймах (см. главу 7А то упо­мянули о "потоке" текста. Давайте поговорим о нем подробнее.

Посмотрите на эту страницу. Полистайте книгу с начала до конца и наобо­рот. Что вы видите? Сплошной текст, "льющийся" по страницам и расска­
зывающий о принципах работы с Macromedia Dreamweaver. Абзацы текста, рисунки, таблицы находятся в этом "потоке" последовательно, один за дру­гим. Они не могут "вырваться" из этого "потока". Невозможно поместить на одном и том же месте одновременно и рисунок, и таблицу — элементы страницы могут быть расположены только последовательно, один за другим.

"Поток" текста хорош для художественных произведений и руководств, по­следовательно описывающих какие-либо действия, необходимые для дости­жения результата. В этом случае текст читается с начала и до конца без рез­ких "скачков" туда-сюда. "Поток" текста очень плох для технических статей, нуждающихся в многочисленных пояснениях, дополнениях и иллюстраци­ях; в этом случае нужно иметь перед глазами и первое, и второе, и третье, и четвертое. Также "поток" текста абсолютно не подходит для газет: чита­тель не хочет листать газету взад-вперед в поисках нужной статьи, а хочет видеть все главные новости на ее первой странице.

Вот поэтому дизайнеры постоянно ищут пути "вырваться" из жестких рамок "потока" текста. Ищут с разным успехом.

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

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

Web-дизайнерам, т. е. нам с вами, повезло значительно меньше. Язык HTML, создававшийся изначально для публикации в Сети научных текстов, поначалу даже не имел возможности размещать на страницах графику. Какие уж там сноски и врезки!.. Сейчас, конечно, HTML уже не тот, он "научился" обращаться с графикой и таблицами, но так и не "освоил" сно­ски и врезки. А ведь Интернет непрерывно развивается: из сети для ученых он давно превратился в сеть для всех. И этих "всех", посещающих Сеть, уже давно не удовлетворяет унылый одномерный дизайн Web-страниц.

Выходит, нет ни одного способа вырваться из "потока" текста?

Есть.

Существуют фреймы. Они позволяют разбить "поток" на несколько незави­симых "ручейков": основное содержание, полоса навигации, заголовок сайта и сведения об авторских правах помещаются в отдельные ¥еЬ-страницы и отображаются в отдельных "форточках" окна ¥еЬ-обозревателя. Причем, эти "ручейки" настолько независимы друг от друга, что теряют связь с об­щим "истоком". Фактически они связаны друг с другом только общим со­держимым, но, с точки зрения самого ¥еЬ-обозревателя, не связаны друг с другом никак. ¥еЬ-обозревателю глубоко безразлично, что отображать в соседних фреймах: страницы с одного и того же сайта или с разных, рас­положенных в различных концах земного шара.

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

И тогда на помощь приходят таблицы.

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

Взгляните на рис. 8.1. Что вы на это скажете?

Как видите, используя таблицу, мы можем разделить текст на несколько фрагментов и поместить рядом соответствующие примечания. Мы можем сделать линии между фрагментами невидимыми, так что посетитель нашего сайта и не заметит, что для форматирования этого текста использовались таблицы. (Опытный интернетчик, знакомый с НТМЬ, конечно, догадается, ну и бог с ним.) Также мы можем сделать невидимыми линии между фраг­ментом текста и примечанием, выровнять текст примечания вправо, выде­лить его курсивом и сделать еще что-нибудь, дабы логически отделить его от основного текста. Но это уже детали. Главное: мы получили то, что хотели.

Значит, есть выход из положения!

Приведем еще один пример. Предположим, мы делаем интернет-магазин. Нам нужно поместить на страницу название, описание, цену и фотографию товара. С таблицами это проще простого — см. рис. 8.2.

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

¥еЬ-дизайнеры давно освоили таблицы. И так же давно носилась в воздухе простая, как все гениальное, идея. А что если поместить ВЕСЬ текст Veb - страницы в большую, сложно отформатированную таблицу, "растянув" ее на все окно ¥еЬ-обозревателя? Ведь тогда мы получим практически неограни­ченные возможности, почти такие же, как у наших коллег-полиграфистов. Мы сможем создавать и примечания, и сноски, и врезки, и множественные "потоки" текста, которые будут начинаться и прерываться там, где нам нуж­но. Да это произведет революцию в ¥еЬ-дизайне!

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

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

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

И в то же время любой может значительно улучшить вид своих страничек, использовав относительно простую табличку. Проиллюстрируем это при­мером.

Откроем страницу default. htm нашего второго сайта, построенного на осно­ве фреймов. Посмотрим на нее. И переделаем с использованием таблиц. Конечно, не будем сразу же делать это в Dreamweaver, а пока что нарисуем на бумаге. У нас получится нечто, похожее на рис. 8.3. Это, кстати, класси­ческая схема табличного дизайна.

Как видите, это совсем простая таблица с двумя объединенными ячейками. Dreamweaver создаст ее для вас в два счета. А каков результат!

А ведь Dreamweaver может много больше. Он может построить для вас сколь угодно сложную таблицу и при этом ни разу не ошибется. Господа Web-дизайнеры, запутавшиеся в собственном HTML-коде, вы слышите?

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

Схемы табличного дизайна

Классическая схема табличного дизайна, выдержавшая проверку временем, показана на рис. 8.3. Ничего лишнего — только то, что действительно нуж­но. Иногда, правда, полосу навигации помещают справа — это выглядит необычно и довольно удобно (рис. 8.4). Автор сам как-то делал такой сайт.

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

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

Сайты-каталоги программ, которых очень много в Интернете, имеют весьма похожий дизайн — см. рис. 8.6.

Новостные сайты имеют самый сложный дизайн (рис. 8.7). Состоящие из множества пестрых колонок ¥еЬ-страницы сразу привлекают внимание по­сетителей.

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

Надо сказать, что описанные выше схемы применяются, как правило, к главной странице сайта. В самом деле, главная страница современных сайтов часто настолько перегружена разнородной информацией, что без сложной таблицы разметки не обойтись. Остальные страницы, поскольку они всегда значительно проще начальной, строятся по простейшим, прове­ренным временем схемам, представленным на рис. 8.3 и 8.4.

Рис. 8.8. Один из вариантов дизайна музыкального сайта

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

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

Порой случается, что Web-страница не содержит ничего, кроме текста, и этот текст помещен в таблицу. Это делается либо с целью как-то особым образом его оформить (сделать отступы, линейки, создать графический фон), либо с целью дальнейшего "развития". Вообще, это плохой тон в Web- дизайне. Вспомните, что мы говорили о недостатках таблиц: во-первых, они очень громоздки сами по себе, а во-вторых, пока Web-обозреватель не за­грузит весь код таблицы, он зачастую не сможет ее отобразить. Так что если текст, помещенный в таблицу, достаточно велик, посетителю придется ждать очень долго. В качестве выхода можно предложить либо разбить большую страницу на несколько меньших, либо вообще отказаться от таблиц.

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

Опять же повторим, что перечислить все схемы таблиц разметки просто не­возможно — их в Сети столько же, сколько и сайтов. (А сайтов в Сети мно­го...) Здесь приведены только самые общие рекомендации. Если вы хотите изучить Web-дизайн, вам потребуются другие, специальные книги. И еще: смотрите, как ваши коллеги делают свои сайты, решайте, нравятся ли они вам, удачны ли, на ваш взгляд. И заимствуйте удачные решения. Но осто­рожно, не нарушая ничьи авторские права.

Ну, все. С теорией покончено. Запускайте ваш любимый Dreamweaver — будем делать новый сайт.