СОЗДАНИЕ WEB-СТРАНИЦ

Рассмотрим вопрос создания web-страниц для сайтов, где главной задачей является визуальная сторона web-страницы (далее — страница). Каждая страница состоит из двух частей:

  • 1) визуальная, описываемая обычно на языке HTML;
  • 2) код действий, который выполняется в рамках этой страницы.

Если присутствуют обе составляющие, то такие страницы называются

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

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

Описание страницы на языке HTML иначе можно назвать ее содержанием или контентом, который разделяется на некоторые информационные элементы. Каждый такой элемент определяется местом расположения на странице и своим содержанием, которое тоже описывается на языке HTML и может называться контентом.

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

Иерархическая схема содержимого страницы

Рис. 6.12. Иерархическая схема содержимого страницы

В реальности почти 95% страниц состоят из трехуровневой иерархической структуры: контент страницы —» структурные контенты —> базовые контенты.

Перечень базовых контентов может быть представлен всего четырьмя типами контентов:

I ) тип «text», т.е. некоторая последовательность символов, помещаемых в один html-тэг;

  • 2) тип «html», т.е. некоторое описание, помещаемое в один html-тэг верхнего уровня;
  • 3) тип «image» — картинка, которая характеризуется одним html-тэгом;
  • 4) тип «link» — ссылка, которая определяет переход на другую страницу.

Каждый из базовых контентов определяется своими параметрами, которые приведены в табл. 6.6 (подготовлено автором).

Параметры базовых контентов

Таблица 6.6

Базовый элемент

Параметры

Text

Стандартный текст в виде набора букв и цифр

html

НШкекст (информация в виде гипертекста)

Image

Имя файла, где содержится изображение и размер картинки

LINK

1Ж-адрес перехода, ТШе-заголовок в виде текста, отображаемого на странице

Отличие базовых контентов типа «text» и «html» в том, что первый содержит в себе непосредственно текст, а второй — текст со стилями, т.е. тип и вид шрифта, его размер и цвет. Таким образом, при построении страницы нас интересует внесение текста без стилей, т.е. если стили определены постоянно вне контента, используется элемент типа «text», а если стиль, размер, цвет текста меняется, — базовый контент типа «html». При этом все контенты типа «html» можно разделить на те, содержимое которых меняется при построении страницы, и те, содержимое которых является постоянным и определяется заранее в момент создания контента. Контенты с постоянным содержанием называются дизайнерскими, так как они содержат какие-либо украшения страницы, например цветовую полосу.

Структурные контенты состоят из некоторой комбинации базовых контентов, например баннер — из базовых контентов типа «image» и «link», аннотация статьи — из заголовка (контент типа «text»), текста аннотации (контент типа «text») и перехода на текст статьи (контент типа «link») и т.д.

Если контент не является дизайнерским, то он состоит из своей структуры и содержания, при этом структура контента определяется заранее, а содержимое — в момент построения страницы на сайте. Структурное описание контента называется шаблоном контента. Соответственно страница имеет шаблон страницы, который состоит из шаблонов контентов. На рис. 6.13 приведен фрагмент страницы построения шаблона (подготовлено автором).

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

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

С^) Рис. 6.13. Фрагмент шаблона страницы

При построении динамических страниц список базовых шаблонов необходимо расширить списком элементов управления в терминологии .Net, которые могут включаться в web-страницу (например, форма регистрации). Следовательно, структура страницы может выглядеть так, как представлено на рис. 6.14 (подготовлено автором).

Примеры структур web-страниц

Рис. 6.14. Примеры структур web-страниц

Web-страницы, которые создаются на специализированном web-сайте, по своему назначению можно разделить, например, на следующие группы страниц:

  • 1) электронное письмо;
  • 2) описание события;
  • 3) web-onpoc;
  • 4) регистрация (для получения рекламной информации);
  • 5) полное описание рекламируемых товаров и услуг.

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

Web-опрос состоит из ограниченного количества типов страниц (страница опроса, страница результатов опроса, страница «спасибо за участие» и т.д.). Группа страниц используется при организации опроса потенциальной аудитории рекламируемой продукции или услуги.

Регистрация включает в себя форму регистрации и форму отказа от получения рекламной информации.

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

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

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

 
Посмотреть оригинал
< Пред   СОДЕРЖАНИЕ   ОРИГИНАЛ     След >