Сайт о правильных сайтах

проект

CSS2 предоставляет разработчикам вполне состоятельное средство, позволяющее организовать пространство веб-страницы в виде набора прямоугольных областей с различными свойствами – речь идет о так называемой блочной модели. Блочная модель присутствовала в CSS с самого начала, но в спецификации CSS2 она подверглась весьма существенным дополнениям и коррективам. Название "блочная модель" не должно вводить в заблуждение – свойства, предопределенные ею, вполне применимы не только к блочным, но и к внутристрочным элементам. Путаница возникает исключительно по причине особенностей перевода рекомендаций W3C на русский язык. Устоявшемуся русскоязычному названию "блочная модель" в англоязычной терминологии соответствует понятие box model, тогда как "блочный элемент" в оригинале – это block element.




Организация пространства web-страницы

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

В организации пространства страницы любого информационного сайта можно выделить как минимум четыре функциональные области со строго определенными ролями. Это «шапка» (в английской терминологии — header), блок навигации, область основного текста и «подвал» (footer).

Этот раздел включает в себя материалы, затрагивающие актуальные на сегодняшний день веб-технологии вёрстки сйтов: табличную и блочную модели.

"Шапка" должна располагаться сверху, основной её функциональный элемент - название сайта. Иногда, помимо титульной надписи, в "шапке" может присутствовать заголовок текущего раздела сайта. Там же может находиться логотип компании или иной характерный символ проекта. Хорошим тоном считается размещение подобного символа в левой стороне "шапки" и наделение его ролью ссылки на главную страницу сайта.

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

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

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

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

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

Все элементы логической разметки можно подразделить на два типа: блочные(block) и внутристрочные(inline). Разница между ними заключается в том, что при визуальном отображении страницы следующие друг за другом блочные элементы располагаются вертикально, а внутристрочные – горизонтально.

Иными словами, любой блочный элемент всегда разрывает строку, а внутристрочный – нет. Абзац является примером блочного элемента – он всегда начинается с новой строки. Любой элемент, который следует за абзацем, будет также перенесен на новую строку.

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

Следует помнить, что сайты создаются не ради дизайна, а ради контента. Дизайн служит контенту, находясь у него в полном подчинении, но никак не наоборот.

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

По окончании создания и тестирования Web-страницы нужно обеспечить доступ к ней пользователей, для чего страницу следует разместить на Web-сервере. Публикация web-страниц на сервере является актуальной темой на сегодня. Существуют различные способы их публикации. Примером публикации страницы может стать сервер провайдера – эта услуга, как правило бесплатная.

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