Опубликован: 06.10.2006 | Доступ: свободный | Студентов: 4502 / 504 | Оценка: 3.94 / 3.86 | Длительность: 24:58:00
Лекция 8:

Макет страницы

Аннотация: В данной лекции рассматривается стратегия размещения компонентов страницы. Даются советы по использованию в качестве "каркаса" страницы таблиц или фреймов. Также автор касается вопросов печати Web-страницы, использования стилей CSS.

Веб-страница не отображается на экране полностью

Основное содержание вы обычно видите на странице без прокручивания, оно как бы находится "выше сгиба страницы" (above the fold) – это термин газетных редакторов, обозначающий то, что вы видите на титульном листе до того, как откроете газету. Когда при открытии страницы появляется содержание, всегда более вероятно, что оно будет замечено и прочитано. Всю важную информацию – вашу эмблему, информацию по перемещению по сайту, первичное сообщение или резюме страницы – поместите выше сгиба. Проблема состоит в том, что люди используют экраны разных размеров. Если вы используете настройку монитора с высоким разрешением, типа 1024 на 768, при проектировании страницы, вы не можете знать, какая часть страницы будет потеряна на другом экране. У посетителя окно броузера может быть маленькое, например 300 пикселов в высоту, так что многие страницы будут продолжаться за пределами окна. Но вы же не хотите, чтобы посетители пропустили что-то или не нашли средство управления только потому, что у них окно маленькое.

При просмотре на маленьком мониторе наиболее важные детали и ссылки в этом проекте страницы находятся справа за пределами экрана или "ниже сгиба"

увеличить изображение
При просмотре на маленьком мониторе наиболее важные детали и ссылки в этом проекте страницы находятся справа за пределами экрана или "ниже сгиба"

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

  1. Откройте страницу в маленьком окне предварительного просмотра, чтобы увидеть ее глазами посетителя. Если на вашем экране установлено высокое разрешение, вы можете даже временно переключить его на более низкое разрешение типа 640 на 480 (с помощью Панели управления Windows), чтобы посмотреть, как выглядят ваши страницы в этом случае.
  2. Если на вашей странице мало свободного пространства, попробуете что-нибудь сжать. Например, удалите лишние концы строк, расположите текст так, чтобы он обтекал изображения, и уменьшите значение cellpadding в тэгах <TABLE>.
  3. Если главные элементы вашей страницы – название и эмблема вашей организации, основное сообщение страницы или важные гиперссылки – не в поле зрения, их перемещают выше и левее. Если средства управления или важный текст находятся вне поля зрения, уменьшают ширину таблицы, которая их содержит.
  4. Если страница длинная, ее разбивают на две страницы или больше, воспользовавшись возможностью связывать страницы между собой. Перепроектируйте вашу страницу так, как будто это газета, пусть она начинается с итоговой информации, а все подробности будут расположены позже. Тогда, если информация не очень важна, переместите ее на другую страницу и обеспечьте с ней связь.

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

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

    Чтобы разбить страницу на две, скопируйте ее (или нажмите Save As (Сохранить как) в меню File (Файл)). Замените содержание в основной странице связью со страницей, содержащей подробности, убедившись, что связь видна при открытии страницы. Затем откройте страницу, содержащую подробности, и удалите содержание, так как оно уже содержится в другой странице.

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

При некоторых разрешениях веб-страница выглядит неправильно

Не так давно веб-дизайнеры могли ориентироваться на посетителей, имеющих разрешение экрана 640 на 480 пикселов. Сегодня существует множество популярных разрешений экрана, которые вы должны принять во внимание при разработке страницы. Если ваша страница слишком широкая для экранов посетителей, они будут вынуждены листать ее вправо и влево, чтобы рассмотреть. Так как большинство людей не будет этого делать, информация или ссылки вне границ экранов будут игнорироваться. Другой крайний случай – у многих посетителей экраны с высоким разрешением, и ваша страница или будет слишком узкой, или ее содержимое будет слишком растянутым.

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

С помощью таблицы размещения элементов страницы вы можете ограничить ширину страницы и поместить ее содержание в разделы, благодаря чему выстроить элементы страницы в линию будет проще

увеличить изображение
С помощью таблицы размещения элементов страницы вы можете ограничить ширину страницы и поместить ее содержание в разделы, благодаря чему выстроить элементы страницы в линию будет проще

Таблица размещения элементов вашей страницы должна иметь один столбец для каждого главного раздела страницы. Например, вы можете сделать первый столбец для гиперссылок, второй – для основного текста страницы, третий – для картинок или рекламных объявлений.