Логическая и физическая структуры сайта
Типы логических структур сайтов
Р
ft
Puc. 1.6. Иерархическое nocmpoe uue Web-узла
ис* /*7, Сетевая структура Web-узлаТипы web-страниц в узле
Для cайта любого типа и любой сложности:
Помощь (она же - поддержка, она же - support, может включать в себя FAQ, или - Часто Задаваемые Вопросы, которые могут пополняться)
Сервис поиска. Поиск может быть простым - по слову или словосочетанию или сложный - с учетом критериев, выбора рубрики, языка, регистра etc.
Карта сайта.
Для сайта любого типа - есть ли необходимость предоставлять дополнительные сервисы обратной связи с посетителями:
Гостевая книга
Форум
Опросы посетителей
Подписка на новостийную рассылку
Сервис мгновенной обратной связи
Информационная часть -
Будут ли обновляться новости - и как часто? Несколько раз в день? Раз в неделю? В пол-года?
Статьи - будут это материалы на одну тему(к примеру совпадающую один к одному с темой сайта) или для них следует написать внутреннюю
структуру - дерево тематик для статей, иначе говоря - рубрикатор, и как часто статьи будут добавляться?
Будет ли обновляться (расти) сам рубрикатор?
Для коммерческого сайта, цель которого - продажа товара или услуги, необходимо так же описать наличие динамических документов/разделов, таких как:
Каталог товаров/услуг (обязательно следует оценить как объем товаров в каталоге, так и наличие/отсутствие рубрикатора каталога)
Оперативно обновляемый прайс-лист
Регистрация партнеров и диллеров (т.е. возможность предоставления посетителю "приватной" зоны проекта)
Регистрация клиентов - потребителей товара/услуги Электронный магазин - собственно продажи.
Статическая и динамическая компоновка сайта
Хотя прародителем верстки веб-страниц является верстка полиграфических материалов, между ними есть одно важное различие. Любая полиграфия вроде буклета, листовки или брошюры печатается на листах установленного размера и в пределах одного тиража имеет лишь незначительные или даже незаметные глазу различия. Веб -страница же запускается на компьютере под управлением клиентской программы называемой браузером. Понятно, что операционная система, ее настройки и собственно сам браузер отличается от компьютера к компьютеру. Из чего напрашивается банальный вывод, что один и тот же документ сайта по-разному отображается у каждого пользователя.
Напрашивается вопрос, можно ли сделать так, чтобы веб-страница отображалась одинаково? Учитывая, сколько придется принять во внимание разных неоднозначных факторов, следует сказать, что нет, нельзя. Поэтому задача верстки веб -страниц формулируется так: сформировать документ, который бы корректно отображался с небольшими различиями на основных платформах и в браузерах. Корректно означает, что соблюден исходный замысел автора, воплощен требуемый дизайн документа, и он показывается в браузере без ошибок.
Чтобы реализовать указанную задачу надо понимать, как вообще происходит верстка веб-страниц и соизмерять свои идеи с их исполнением. Далее описаны некоторые особенности, которые имеют большое значение при верстке документов сайта.
Ширина документа
Изначально разработчику сайта ширина окна браузера пользователя неизвестна, поскольку она может меняться в самых широких пределах. Ширина зависит от разрешения монитора, длины его диагонали, размера окна и еще некоторых варьируемых данных. Иными словами предугадать ее заранее простыми средствами не представляется возможным. С учетом этой особенности утвердилось два способа верстки: фиксированный и «резиновый».
Фиксированный макет
В данном случае действуем от обратного и устанавливаем общую ширину макета жестко заданной и равной определенной величине. Если взять некоторую обобщенную статистику посетителей сайтов и посмотреть, какое разрешение монитора они преимущественно используют, то узнаем, что это 800 х 600 и 1024 х 768 пикселов. Получается, что ширина монитора пользователей в основном 800 и 1024 пиксела. Возьмем за ориентир 800 пикселов, тогда общая ширина макета за вычетом вертикальной полосы прокрутки и рамки браузера окажется 770-790 пикселов. На этот размер ориентируемся и устанавливаем ширину макета, например 770 пикселов.
Преимущество такой схемы следующее. Раз общая ширина макета точно известна, то мы можем легко подгонять под нее дизайн и делать изображения уже известной ширины. В целом подобная верстка приближается к верстке печатного буклета, и в том и
другом случае ширина носителя информации строго задана, за счет чего верстка хоть частично, но упрощается.
Недостаток, который инкриминируют этому виду верстки фактически один — недостаточно эффективное использование свободной площади. Действительно, для монитора с большо-о-о-й диагональю или высоким разрешением экрана документ будет смотреться по-другому, чем на предполагаемых 800 пикселах. На рис. 1 показано, как выглядит макет в таком случае.
Рис. 1. Макет фиксированной ширины с размещением по левому краю Справа появляется широкая пустая полоса, размер которой зависит от разрешения экрана пользователя и диагонали его монитора. Чтобы хоть как-то уменьшить пустое пространство, макет обычно помещают по центру окна браузера (рис. 2).
Рис. 2. Макет фиксированной ширины с размещением по центру «Резиновый» макет
Этот вид макета основывается на том, что в качестве одной из единиц измерения выступают проценты. Общая рабочая ширина окна браузера — 100%, и колонки макета в сумме не должны ее превышать, поэтому для удобства, как правило, везде применяют процентную запись. При изменении размеров окна происходит переформатирование данных страницы, чтобы они вписались в новую ширину (рис. 3).
Рис. 3. Веб-страница занимает всю отведенную ширину
Этот вид верстки набирает все большую популярность и практически все известные сайты выбрали именно его в силу того, что эффективно задействуется вся площадь веб-страницы. Но следует сразу отметить некоторые особенности и недостатки присущие «резиновой» верстке.
Хотя веб-страница и подстраивается под ширину окна браузера, при достижении некоторой величины читать текст становится неудобно — строки слишком длинные и глаза устают по ним бегать. Впрочем, браузер можно свернуть в окно, подобрав его комфортный размер.
Верстать «резиновый» макет сложнее, чем аналогичный, но фиксированной ширины. Это связано с тем, что приходится учитывать множество дополнительных факторов и знать некоторые приемы верстки. К тому же, популярные браузеры неоднозначно трактуют некоторые параметры и в них «резиновый» макет может отображаться по - разному. Говоря проще, знать о правилах верстки надо больше.
Любой макет имеет некоторую минимальную ширину, при достижении которой вебстраница «рассыпается» или появляется горизонтальная полоса прокрутки. Например, если в документ вставлен рисунок шириной 600 пикселов, то при уменьшении окна до этой величины браузер начнет отображать полосу прокрутки.
«Резиновый» дизайн характеризуется активным использованием фоновых изображений, которые по горизонтали собираются без швов встык. Действительно, изменить без потери качества ширину рисунков не получится, а вот «подложить» под них фон — всегда пожалуйста.
Высота документа
Исторически сложилось, что пролистывание большого документа на компьютере происходит сверху вниз. Для удобства листания предназначены вертикальные полосы прокрутки, клавиатурные комбинации, колесо прокрутки мыши. А вот перемещение по горизонтали происходит не так удобно, поэтому горизонтальной полосы прокрутки быть не должно. Из чего следует, что веб-страница должна вписываться в окно браузера по ширине, но никак не по высоте, которая может изменяться в очень широком диапазоне. На рис. 4 видно, что реальная высота документа не ограничена рамками браузера, но в окне показывается лишь часть страницы.
Рис. 4. Отображение документа в окне браузера по высоте
В принципе, чем больше на странице информации, и, следовательно, больше высота документа, тем сложнее находить нужные данные. Поэтому текст структурируют, разбивают на блоки и каждому из них дают свой заголовок, чтобы взгляду читателя было за что зацепиться.
Также следует учесть, что объем статей на сайте может достаточно сильно различаться между собой. При этом будет меняться и высота страницы, поэтому следует заранее побеспокоиться о том, чтобы макет отображался без ошибок, несмотря на различное значение высоты.