Уровень структуры. Уровень представления

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. Уровень представления

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. Модульные сетки в веб-дизайне

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

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

     Есть  несколько неоспоримых плюсов в  использовании модульной сетки  при разработке дизайна сайта.

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

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

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

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

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

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

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

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

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

3. Инструментарий  на слое представления

     Если  вы уже пытались создавать HTML-страницы, то вам понадобиться:

• Adobe Photoshop

     Мощное  средство создания графики для Интернет и не только. Веб-дизайнера он интересует в особенности, т. к. оснащён развитыми средствами оптимизации графики, т. е. уменьшения размеров графических файлов без проигрыша в качестве или с мининальным проигрышем. Имейте в виду, что в Интернет используются два основных графических формата: GIF (для изображений с небольшим количеством цветов) и JPEG (для полноцветных фотографических изображений), с каждым из которых Photoshop справляется очень неплохо.

• Notepad

     Без этого весёлого редактора тоже не обойтись: по крайней мере вы всегда будете знать, что код сохранён именно в том варианте, в котором вы его создавали.

• Apache Web-server

     Этот  сервер вы можете использовать для  тестирования веб-страниц и скриптов, написанных на языке Perl, PHP и т.д.

     Каждый  выбирает свой инструмент для создания Web-страниц. Это может быть MS FrontPage или Macromedia DreamWeaver или Allaire HomeSite. А кто-то пользуется простым текстовым редактором, например Блокнотом (Notepad).

• MS FrontPage

     Основным недостатком MS FrontPage является то, что он генерирует очень большой HTML-код, поэтому страницы получаются большими, что сказывается на скорости загрузки. Более того, при создании Web-страниц в этом редакторе видишь одно, а в окне браузера - совсем другое. Странички получаются какими-то кривыми, поэтому для создания качественных Web-страниц рекомендуется использовать пакеты, которые будут рассмотрены ниже.