§17. Внедрение фреймов

Фреймы– перегородки внутри окна броузера, дающие возможность загружать одновременно несколько файлов в образующихся окнах-форточках. Это разновидность древовидной структуры, когда сам документ (frameset document) не виден. Он разделяет окно броузера на заданное количество фреймов, определяет их размещение и размеры, указывает URL-адреса для загрузки в них документов.

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

Преимущества использования фреймов:

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

2. Возможность «промотки» содержимого только одного файла при неизменных прочих фрагментах окна броузера.

3. Возможность контроля величины всех полей.

Недостатки фреймовой структуры:

1. Ограниченная переносимость такого HTML-документа и недоступность для многих поисковых систем.

2. Недостаточно интуитивно понятный интефейс.

3. Неоднозначная адресация: при загрузке в окно нового документа адрес текущего корневого документа в строке броузера не меняется. Результат – работа броузера не всегда логична, например, при отражении списка посещенных адресов.

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

5. Топологическая сложность компоновки сайта, использующего 3 и более фреймов.

Внедрение окон. Создание новых окон броузера также обеспечивает возможность просмотра нескольких документов одновременно.

Новое окно для документа по ссылке можно открыть при помощи атрибута target тега «А» (со всеми атрибутами окна броузера). Java Script контролирует размеры нового окна и генерирует окна без каких-либо атрибутов броузера. Можно открывать окна и на месте рекламного баннера.

§18. Конструкция страницы

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

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

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

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

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

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

Размеры страницы. При превышении размером страницы размера окна броузера ее можно промотать вверх и влево посредством организуемых броузером полос прокрутки (scrollbars). Стиль сайта может быть разрушен. Эргономическое качество также заметно падает. Поэтому, если вертикальной прокрутки избежать достаточно трудно, отсутствие горизонтальной полосы прокрутки – жесткое требование хорошего дизайна. В этом случае необходимо учесть так называемую «минимальную» ширину окна броузера, то есть максимальную ширину окна броузера, достижимую на самом узком в пиксельном измерении компьютерном экране.

Размер, или «разрешение» монитора по горизонтали и вертикали, сейчас варьируется от 16001200 пикселов и более у мониторов графических станций до 640480 пикселов у графического адаптера VGA. Однако из этих 640 пикселов по горизонтали следует вычесть рамку окна броузера, ширину полей самойWeb-страницы. Таким образом, окончательная ширина содержательной части страницы не должна превышать примерно 610 пикселов, и даже 580 пикселов для старых компьютеров Макинтош.

Поля самой страницы в данном контексте вовсе не часть дизайна, а просветы слева и вверху страницы, генерируемые самим броузером. Они непостоянны, зависят от версии броузера и базового кегля шрифта, установленного в данный момент. Ликвидировать их средствами стандартного HTMLневозможно. Хотя броузер MSIE и поддерживает атрибуты leftmargin, они игнорируются стандартомHTML 4.0и броузером Netscape. Из-за этого возможны проблемы с точным совмещением на странице фонового изображения (генерируемого броузером на все окно от рамки) и содержимого переднего плана (отодвигаемого от рамки на величину полей). При необходимости в подобных случаях пользуются тегом FRAME с атрибутами marginwidthи marginheight, формируя единственный фрейм на все окно броузера с точно заданной величиной полей.

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

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

Дизайн сайта и конструкция страницы.

1. Академический стильоформления сайта с использованием только тегов HTML 2.0.

Для этого стиля размеры окна броузера не существенны, поскольку HTML 2.0 не позволяет определять размеры каких-либо элементов в пикселах. Если не используются таблицы и прочие элементы позиционирования текста, страница верстается автоматически «под наличное окно» броузера.

2. «Резиновый» дизайн. В этом случае материал размещается в таблицах, размеры которых задаются в процентах от ширины наличного окна броузера.

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

Недостаток: недоступность точной стыковки графики ( ее фрагментов) и колонок текста. Ширина колонок меняется в зависимости от возможностей броузера.

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

Дизайнер при этом всегда «контролирует» окончательную верстку, но должен ограничиться возможностями минимального окна броузера, если не хочет удовольствоваться полосой прокрутки. Удобно также отцентрировать страницу на случай ее появления широком окне броузера.

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

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

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

Заглавиеэто строка в заголовке окна броузера, помеченная в коде страницы тегом TITLE.

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

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

Заголовки (headings). Большинство страниц не поддерживают стандартную HTML-иерархию заголовков. Заголовки 6 уровней H1H6 редко используются в редактировании. Исключениеакадемический стиль.

Основная нелюбовь дизайнеров к тегам H* обусловлена главным образом параметрами их оформления, неприемлемыми для страниц с минимальными эстетическими претензиями.

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

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

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

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

Нетекстовые разделителичасто используются вместо заголовков нижних уровней. Встраивание осуществляется тегом HR. Для привлекательности сначала в Netscape , затем в MSTE встраиваемые линейки делаются псевдотрехмерными. Однако такое оформление годится разве что для страницы, выполненной в академическом стиле. При наличии минимума оформления такие трехмерные линейки всегда противоречат дизайну страницы: в характере трехмерности, текстуре, глубине, освещении. Более того, даже плоская линейка не всегда кстати на странице. Можно считать, что использование такого рода оформления для стиля, отличного от академического, – признак недостаточной квалификации дизайнера.