Постройте ваших уток в ряд - Макет страницы и управление содержанием

Peter de Pradines, пер. Александр Климов
AKWProject

Одно дело построить уток в ряд, и совсем другое - сделать то же самое, когда они отображаются на HTML-странице.

Возможно, наиболее часто задаваемые вопросы о дизайне веб-страниц: "Как я могу сделать отступы в тексте?" или "Как я могу сделать колонки?". Это те вещи, для которых язык создания веб-страниц, HTML, не был изначально предназначен.

Веб-страница - это не газетный лист

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

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

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

Веб-мастерам труднее

На первый взгляд, веб-мастера лишены этих полезных инструментов макетирования текста. HTML (язык разметки гипертекста) является только тем, о чем говорит его название, - языком разметки. Это простой набор команд, называемых тегами, которые ограничивают объекты (текст или рисунки) и говорят браузеру, как эти объекты должны отображаться на экране компьютера.

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

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

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

Что же делать - разрабатывать одну версию веб-страницы для PC, а другую для Макинтошей? Это противоречит основной концепции интернета, который объединяет различные системы. Оставлять ли управение макетом или позволить содержимому страницы располагаться как угодно на экране читателя?

Такое желание есть, но для тех, кто готов немного потрудиться, есть несколько методов решения практически всех проблем макетирования веб-страницы. Дополнительная работа приносит результаты.

Начинаем

Нет единого метода решения всех наших проблем, но используя их вместе, мы можем справиться с большинством ситуаций. Наш 'главный помощник' - использование таблиц. 'Маленькие помошники', но не менее сильные - прозрачный однопиксельный GIF и неотображаемый пробел. Это невидимые помощники, которые тайно работают на нас.

Сначала разберемся с HTML-таблицами. Я полагаю, что это не первая ваша встреча с таблицами. Если это не так, то перед дальнейшим чтением вам будет полезно провести краткое знакомство с их основами. В интернете хорошие руководства можно найти по адресам http://www.geocities.com/Wellesley/1001/tutorial/tables.html или http://www.stars.com/Quadzilla/Tables/index.html.

Те же, кто встречался с таблицами раньше, знают, что ручное их создание может стать неприятным и трудным, в особенности, если таблицы вложены друг в друга. Я очень советую всем, у кого нет мазохистских наклонностей, делать таблицы в WYSIWIG-редакторах, таких как FrontPage, HotMetal Pro или любом другом из пары дюжин. Если вы хотите выбрать лучший, то используйте Dreamweaver.

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

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

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

Один размер подходит везде

Постоянные читатели вспомнят, что для нормального просмотра на практически всех дисплеях, мы должны ограничить ширину нашей страницы максимум шестьюстами пикселями (сейчас уже можно увеличить ее до 740 - прим. переводчика). Если вам надо освежить это в памяти, прочитайте http://www.4sitejournal.com/archives/art080300.htm.

Мы можем легко сделать это, создав главную таблицу внутри тега body нашей страницы, использую следующий код:

<body>
<table width="600" border="0"><tr><td>&nbsp;</td></tr></table>
</body>

Обратите внимание на &nbsp; между тегами TD. Это специальный код, называемый неотображаемым или неразрывным пробелом. Его смысл заключается в помещении в ячейку таблицы для того, чтобы она не свернулась или не исчезла. Более подробно этот вопрос будет рассмотрен далее.

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

Мы обозначили левую и правую границы нашей страницы - установили простой контейнер для нашей информации. Если мы установим свойство border равным нулю, наш контейнер будет невидим для зрителей.

Перед тем, как двигаться дальше, обратим внимание на один эстетический вопрос. Если добавить к таблице тег <center>, то наша информация шириной 600 пикселей будет расположена по центру мониторов с большим разрешением.

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

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

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

Можно посмотреть пример?

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

Посмотрите на страницу http://www.4sitejournal.com/tabledemo291100.htm. Вы увидите таблицу шириной в 600 пикселей с синим фоном. Внутри нее находятся еще пять таблиц, вложенных одна в другую.  Каждая таблица разбита на ячейки различных размеров и форм.

Целью является демонстрация того, что вы можете создать структуру настолько сложную или настолько простую, какую вам надо для фиксированого расположения чего угодно и где угодно. Код этой страницы можно посмотреть, нажав правую кнопку мыши и выбрав 'view source' ('В виде HTML') во всплывающем меню.

Посмотреть пример можно по трем причинам:

1. Он наглядно демонстрирует сложность кода, необходимого для создания таблицы - в дальнейшем для этой работы рекомендуется использовать WYSIWIG-редактор.
2. Вы заметите, что ячейки заполнены с использованием &nbsp;.
3. Некоторые читатели могут захотеть создавать таблицы вручную, в примере показано, как это делается. Удачи им - если я буду делать эту работу руками, то она отвратит меня от веб-дизайна на всю жизнь.

Хорошо, я надеюсь, что этот краткий обзор убедил вас в следующем: При помощи таблиц вы можете создавать такую структуру табицы, какую захотите. Если вы спрячете границы, то никто не увидит эту структуру. Вы можете поместить информацию туда, куда захотите. Структура страницы не изменится на мониторах различного размера. И, возможно, наиболее важное; используйте WYSIWIG-редакторы для создания таблиц!

Самые большие из 'маленьких помошников'

Основными браузерами являются, без сомнения, Netscape Navigator и Microsoft Internet Explorer. Согласно посещениям моего веб-сайта за последние несколько лет, с использованием этих браузеров было просмотрено более 98,75% страниц. Мы не можем удовлетворить требованиям всех браузеров, но будет лучше, если сделать это хотя бы для двух основных.

Мы можем не хотеть помещать информацию в каждую ячейку таблицы. Много 'строительных блоков' в структуре таблицы могут оставаться пустыми. На момент написания статьи, все версии Netscape'а схлопывают пустые ячейки таблицы и не рисуют фон в пустых ячейках. Поэтому все ячейки должны что-нибудь содержать для того, чтобы быть правильно отображенными.

Неотображаемый текст

Мы уже прикоснулись к одному методу создания неотображаемого текста (&nbsp;), который использовался в нашем примере. Обычно, добавление простого неразрывного пробела или даже разрыва строки (<br>) в ячейку достаточно для того, чтобы ячейка правильно отображалась в Netscape'е. Этот текст не виден, когда таблица отображается в браузере, но оставляют ячейку открытой.

Однопиксельный GIF

Другой способ - поместить прозрачный однопиксельный GIF в пустую ячейку и установить у него аттрибуты WIDTH и HEIGHT. Если установить только один из них, то многие браузеры растянут изображение пропорционально (в большой квадрат), что неприемлемо.

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

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

Использование <spacer>

Ячейки таблицы также можно оставить открытыми при плмощи тега <spacer>, который явяется собственным методом Netscape'а для добавления пустого места в веб-страницы. Использование специфического HTML-кода для различных браузеров имеет существенный недостаток - усложнение вашей жизни веб-мастера. Его лучше избегать, пока вы не станете профессионалом в веб-дизайне.

Поэтому, как мы могли увидеть, если вы хотите сделать форматированную страницу, то придется немного потрудиться. однако дело это стоящее и приносит свои плоды в виде хорошо выглядящих страниц.

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

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

Свободное пространство

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

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

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

Имеет ли это все смысл?

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

Создайте образец таблиц для вашего стандартного макета. Решите, что где будет располагаться: кнопки меню - слева, текстовые ссылки - снизу, логотип - сверху в центре, текст в две колонки по середине страницы. Выберите цвет фона и так далее.

Вы можете копировать этот код в любую новую страницу. Останется только наполнить страницу содержанием.

Ура! Вы получили последовательный дизайн и гибкий макет сайта. Мы выглядим профессиональнее с каждой минутой, и это здорово!

Я это вам обещаю :)

Перевод выполнен на основе права эсклюзивного использования статьи Александром Климовым. Перепечатка в любой форме запрещена.

Peter de Pradines is owner and webmaster of the HiperNet Group. An honours degree graduate in Computer Science with 30 years hands-on experience, Peter lectures in Europe and holds winter workshops in the beautiful Mediterranean island of Mallorca. Specializing in web design and promotion he may be contacted at: mailto:hipernet@apdo.com or http://www.protiques.com/

Peter de Pradines владелец и веб-мастер компании HiperNet Group. Peter обладая ученой степенью и имея за плечами 30-ти летний опыт, читает лекции в Европе и проводит зимние занятия на прекрасных островах Мальорки. По поводу вопросов веб-дизайна и раскрутки сайтов можно обращаться: mailto:hipernet@apdo.com или http://www.protiques.com/