Уровень структуры. Уровень представления (стр. 2 из 4)

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

По способу создания документы делят опять на статические и динамические.

Статическими называют страницы, если они лежат на сервере в html виде.А динамическими называют те, которые генерируются "на лету" по запросу браузера.

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

Если ваш сайт содержит часто меняющийся контент (content - информация на сайте), то вам на помощь придут скрипты, выполняющиеся на сервере. И это ключевое отличие этих скриптов, от описанных ранее (тех, что написаны на JavaScript). Работает это следующим образом:

· Браузер запрашивает у сервера документ

· Сервер определяет, что документ является скриптом и запускает его на выполнение

· Скрипт генерирует html страницу

· Сервер отправляет сгенерированную страницу браузеру, так что тот и не догадывается, что на сервере отработал скрипт

Надо сказать, что сейчас все больше набирает силу гибридная система. Название у нее, как у голландского футбольного клуба - AJAX, что означает: Asyncronous JavaScript And XML . Эта технология позволяет скриптам на JavaScript обращаться к какому либо скрипту на сервере и получать информацию с сервера. Это в свою очередь, дает пользователю гибкость и позволяет перезагружать только часть содержимого страницы, а не всю ее полностью.

1.3 Инструментарий на слое структуры

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

1. HTML

Язык гипертекстовой разметки документов: этот язык описывает каждый элемент страницы и все ссылки на объекты, находящиеся за её пределами. В настоящее время используется версия 4.0, которая существенно богаче предыдущей. К сожалению, производители браузеров так и не договорились о стандартах... существуют даже тэги (своего рода операторы языка HTML), предназначенные для одних браузеров и игнорируемые другими.

2. CSS

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

3. JavaScript

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

Помимо JavaScript существует ещё и VBScript, язык с синтаксисом Visual Basic, предоставляющий примерно те же возможности, что и JavaScript, но он используется значительно реже вследствие совместимости с единственным браузером: Internet Explorer.

4. DHTML

Фактически DHTML (Dynamic HTML) есть не что иное как сочетание расширенного HTML и продвинутого JavaScript. Используя последние достижения в этой области, разработчик может на ходу менять вид и содержание любого элемента веб-страницы без её перезагрузки. К сожалению, Netscape не поддерживает DHTML в полной мере, и поэтому при условии наличия требований совместимости с этим браузером приходится ограничивать функциональные возможности скриптов.

5. Java

Кроссплатформенный язык программирования. В нашу с вами жизнь он войдёт в виде готовых апплетов, специальных файлов, написанных на Java и внедряемых в HTML как объекты.

6. ActiveX

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

7. Flash и Shockwave.

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

2 Уровень представления

2.1 Графический макет, модульные сетки и дизайн страницы

Веб-страница (интернет-страница, web-страница, страница www, web-page) - это логическая единица интернета, однозначно определяемая адресом (URL). Можно сказать, что веб состоит из сайтов, а сайты, в свою очередь - из страниц. Веб-страницы (web-pages) пишутся на языке HTML. Вообще говоря, веб-страница может состоять из нескольких частей (фреймов), каждый из которых является отдельной страницей со своим собственным адресом. Также веб-страницы могут включать картинки, музыку, видео, скрипты и др.

Основные виды дизайна страниц следующие:

· 1-полосный дизайн (рисунок 2.1, а);

· 2-полосный дизайн (рисунок 2.1, б);

· 3-полосный дизайн (рисунок 2.1, в).

Рисунок2.1 - Виды дизайна: а – 1-полосный дизайн; б – 2-полосный дизайн; в – 3-полосный дизайн

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

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

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

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

· Применяйте постоянные и понятные обозначения для всех страниц сайта.

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

· Избегайте ссылок с обозначением просто «назад», а всегда указывайте, куда ведет обратная ссылка.

Возможны следующие варианты размещения навигации на странице (таблица 2.1):

Таблица 2.1 - Варианты размещения навигации на веб-странице

Расположение	Характеристика
Навигация сверху	Имеет довольно широкое распространение. Достоинства: возможные варианты перехода появляются на экране в самом начале загрузки страницы; расположена рядом с кнопкой «назад» браузера; имеется аналогия с интерфейсом пользователя прикладных программ, где меню так же расположено в верхней части экрана; соответствует логике просмотра страницы (пользователи обычно просматривают страницу слева направо и сверху вниз). Недостатком является то, что когда пользователь просмотрел страницу и выполнил прокрутку, навигация может оказаться за пределами видимой области и ему придется вновь выполнить прокрутку. Решение данной проблемы осуществляется тремя способами: закреплением навигационных элементов в верхней части экрана, использованием ссылки «наверх», возвращающей пользователя в начало страницы и дублированием верхней навигации, навигацией снизу.
Навигация снизу	Следует избегать в роли основной навигации. Обычно используется совместно с навигацией, расположенной сверху, в качестве дублирующей, позволяющей пользователю осуществить требуемый переход, не возвращаясь к началу страницы. Может так же совместно использоваться и с навигацией, имеющей расположение отличное от верхнего.
Навигация слева	Наиболее распространенное расположение навигации. Является логичной, так как в европейских языках чтение выполняется слева направо. Кроме того, при таком расположении сокращается расстояние до кнопки «назад» браузера пользователя. Недостатком является то, что сокращается пространство экрана на содержательную часть страницы. Впрочем, этот недостаток может оказаться и достоинством, так как не позволяет тексту сильно растягиваться по горизонтали.
Навигация справа	Применяется в качестве основной навигации достаточно редко. Достоинством можно считать тот факт, что такое расположение навигации не мешает основному содержимому страницы. Недостатками являются нетрадиционность такого расположения и увеличение расстояния от навигации до кнопки «назад» браузера. Иногда используется в роли вспомогательной навигации.
Навигация в центре	Обычно используется лишь на главной странице сайта, картах сайта и страницах, являющихся оглавлениями разделов. В дизайне обычных страниц используется лишь в случае внутренних ссылок на подразделы в пределах текущей страницы.

2.2 Модульные сетки в веб-дизайне

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