4. Общие принципы проектирования табличных сайтов

ЗАДАНИЕ. Изучить материал данного раздела.

Сайт на таблице это классический шаблон сайтов начинающих сайтостроителей. Особенно популярен этот шаблон на сайтах, расположенных на бесплатных хостингах.

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

Рассмотрим, например, классическую структуру с тремя колонками в середине плюс верхняя и нижняя части:

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

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

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

Часть Center предназначена для основного текста страницы. Это переменная часть, на каждой странице сайта она разная.

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

Структура таблицы состоит из трех строк и трех столбцов:

ВЫВОД. Если сайт состоит из нескольких страниц, код HTML всех частей (строк, столбцов, ячеек) страницы, кроме CENTER (в которой расположен КОНТЕНТ), практически совпадает для каждой страницы.
Это основной принцип проектирования табличных сайтов
.

Существует два основных способа проектирования табличных сайтов:

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

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

В обоих случаях файловая структура сайта должна быть примерно следующей:

Здесь

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

images - папка, содержащая изображения (рисунки).

index.htm (или index.html) - главная страница сайта, она отображается в браузере при вызове сайта.

Общая структура сайта

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

Структура страниц

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

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

Структура навигации

Это очень важная часть планирования ресурса. Способ доступа к информации на сайте должен быть простым и понятным. Пользователь в любую минуту должен знать ответы на следующие вопросы:
  1. Где я нахожусь?

  2. Куда могу пойти?

  3. Как туда добраться?

  4. Как вернуться назад?

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

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

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

Теперь рассмотрим основные системы навигации:

Заставки сайта

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

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

Главная страница сайта

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

Остальные страницы сайта

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