Дмитрий Кирсанов - Веб-дизайн

Заметки о поляхУпомянутые только что поля — это не поля, которые устанавливает вокруг содержимого страницы дизайнер, а те небольшие просветы вдоль левой и верхней границ окна, которые оставляет сам броузер. Пользователь не может ни поместить что–либо в эту мертвую зону, hi повлиять на размеры полей средствами стандартного HTML. Еще хуже то, что величина этих полей непостоянна — она зависит от марки и верен» броузера и от установленного в данный момент базового кегля шрифта (стр. 216). Из–за этого возникают трудности с точным совмещением фонового изображения (стр. 259) и материала переднего плана — ведь броузер настилает фоновую картинку по всему пространству окна вплоть до рамки, вне зависимости от того, насколько отодвинуты от этой рамки текст и изображения переднего плана. Оговорка относительно «стандартного HTML» не случайна — очевидно, поля эти были введены именно для того, чтобы размеченные в минималистском, академическом (стр. 150) стиле тексты можно было читать, не стукаясь взглядом о вплотную прижатую к тексту рамку окна. Предоставляя со временем все больше оформительской свободы автору страницы, броузеры не могли обойти своим вниманием и этот аспект. Так, MSIE поддерживает атрибуты leftmargin и topmargin тега BODY, позволяющие устанавливать любую (в том числе нулевую и отрицательную) величину полей страницы. Однако и стандарт HTML 4.0, и броузер Netscape игнорируют эти «MSIE-only» атрибуты.

Более идеологически правильный, хотя и выходящий за рамки HTML подход — использование CSS-свойств (стр. 40) margin–left и margin–top для тега BODY. К сожалению, упоминавшаяся уже незрелость реализации CSS (стр. 23) не позволяет воспользоваться даже таким невинным трюком:

дело в том, что если MSIE отмеряет поле от рамки окна, то NC принимает за отправную точку то «поле по умолчанию», которое имеет место в отсутствие CSS. Поэтому, чтобы прижать содержимое страницы вплотную к левой рамке окна, в MSIE достаточно сказать

Желание обойтись без CSS заставляет некоторых дизайнеров прибегать к еще более замысловатому трюку. Пользуясь тем, что у тега FRAME есть поддерживаемые обоими броузерами атрибуты marginwidth и marginheight , они заключают всю страницу в единственный фрейм с тем, чтобы иметь возможность точно устанавливать величину полей.

Во первых строках.Итак, горизонтальная прокрутка должна быть исключена безусловно. Однако и прокрутка по вертикали тоже не доставляет пользователям большого удовольствия, и если ее невозможно избежать совсем, нужно по крайней мере сделать ее менее обязательной. Это значит, что основное содержимое страницы должно быть видно сразу после ее загрузки, т. е. должно находиться в первой же видимой порции страницы (по–английски этот прием называется «above the fold», т. е. «кверху от сгиба» — термин, заимствованный из дизайна газет, которые стараются верстать так, чтобы заголовки самых важных статей можно было прочесть, не разворачивая газету).

К основному, всегда всплывающему на самый верх страницы содержимому относятся не только заголовок и начало основного текста, но и реклама (эффективность которой в начале страницы намного выше, чем в конце), а главное — ссылки, как «россыпью», так и объединенные в навигационные панели. Щелчок по ссылке требует от пользователя меньшей затраты сил, чем перетаскивание движка в полосе прокрутки. Поэтому объемистые страницы иногда помещают вверху оглавление со ссылками на свои же, расположенные ниже, разделы, а возле каждого заголовка раздела ставят ссылку, позволяющую одним щелчком вернуться в самый верх (пример 7).

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

Какова же высота той части страницы, которая видна в окне броузера? Эта величина задана менее жестко, чем допустимая ширина, так как высота рабочей части окна зависит не только от размера экрана, но и от легко изменяемого оформления панелей управления вверху окна броузера (как вы знаете, вариантов здесь очень много: кнопки могут быть текстовые или с картинками, располагаться в один ряд с полем адреса или сверху от него и т. п.). Принято считать, что страница будет видна целиком любому пользователю, только если ее высота не превышает 350 пикселов.

У голубого экрана.Получившиеся минимальные габариты видимой части страницы — 580 на 350 пикселов — определяются разрешением экрана массовых персональных компьютеров PC и Макинтош. Однако недавно появилось еще одно устройство для доступа к сети — гибрид компьютера и телевизора под названием WebTV (www.webtv.net). Коробочка с модемом, процессором и зашитым в нестираемую память броузером, ценой около 200 долларов, позволяет путешествовать по сети, читая веб–страницы с экрана своего телевизора и выбирая ссылки при помощи пульта дистанционного управления (для ввода текста в поля бланков можно присоединить отдельно продающуюся клавиатуру). Для дизайнера WebTV прежде всего интересен более жесткими ограничениями на формат страницы. Размер рабочей части экрана на всех устройствах этого типа один и тот же — 544 на 376 пикселов, и изменить его пользователь не может. А хуже всего то, что при более узком, чем у компьютерных броузеров, экране это устройство не позволяет прокручивать страницу по горизонтали — если что–то вылезет за правую границу экрана, оно так и останется недоступным. Очевидно, ограничения WebTV нет смысла учитывать в дизайне русскоязычных сайтов, так как в России эти устройства пока — экзотика. Среди западной аудитории, однако, пользователи WebTV составляют уже заметный и постоянно увеличивающийся процент.

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