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

ЧАСТНОЕ УЧРЕЖДЕНИЕ ОБРАЗОВАНИЯ 

«МИНСКИЙ ИНСТИТУТ УПРАВЛЕНИЯ» 

Кафедра информационных технологий и высшей математики 
 
 

 
 
 
 
 
 
 

УПРАВЛЯЕМАЯ САМОСТОЯТЕЛЬНАЯ РАБОТА 
 
 

по дисциплине: «Основы Web-дизайна»

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

 
 
 
 
 

МИНСК-2011

Оглавление

Введение

     World Wide Web – глобальная компьютерная сеть на сегодняшний день содержит миллионы сайтов, на которых размещена всевозможная информация. Люди получают доступ к этой информации посредством использования технологии Internet. Для навигации в WWW используются специальные программы – Web-браузеры, которые существенно облегчают путешествие по бескрайним просторам WWW. Вся информация в Web-браузере отображается в виде Web-страниц, которые являются основным элементом байтов WWW.

     Web-страницы, поддерживая технологию мультимедиа, объединяют в себе различные виды информации: текст, графику, звук, анимацию и видео. От того, насколько качественно и красиво сделана та или иная Web-страница, зависит во многом ее успех в Сети.

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

1. Уровень структуры

1. Web-страница  и ее элементы

     Web-страница  — документ или информационный ресурс Всемирной паутины, доступ к которому осуществляется с помощью web-браузера.

     Web-страницы обычно создаются на языках разметки HTML или XHTML и могут содержать гиперссылки для быстрого перехода на другие страницы.

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

     Первым  элементом web-страницы является ее заголовок. Он может быть выполнен как в текстовом, так и в графическом варианте, однако и в том и в другом случае он должен располагаться в верхней части документа. Иногда с заголовком совмещают меню выбора кодировки кириллицы и кнопки для перехода с русскоязычной на англоязычную версию сайта, если данный web-ресурс представлен на двух языках. Непосредственно подзаголовком документа, как правило, располагается пространство, отведенное для размещения рекламного баннера. Включение баннера именно в верхнюю часть web-страницы в большинстве случаев является обязательным условием регистрации сайта в службах баннерного обмена — системах, рекламирующих созданный вами ресурс в обмен на показ на страницах вашего сайта рекламы других участников баннерообменной сети. Стандартный размер баннеров, публикуемых под заголовком документа, составляет обычно 468x60 точек. Если вы используете статический принцип компоновки страницы, ширина заголовка вашего документа будет составлять приблизительно 640 пикселов: это значение обусловлено, прежде всего, необходимостью обеспечить корректное отображение документа на мониторах с экранным разрешением 640x480 точек и избежать появления горизонтально полосы прокрутки, затрудняющей его просмотр. Очевидно, что ширина баннера в этом случае будет значительно меньше ширины заголовка, благодаря чему в той части страницы образуется незанятое пространство, которое можно заполнить логотипом компании-владельца данного сайта или ссылкой на сервер, осуществляющий web-хостинг. Разумеется, логотип необходим далеко не всегда: как правило, он включается в состав web-страницы лишь в случае, если сайт имеет коммерческую направленность. В заголовке web-страницы рекомендуется использовать от 60 до 115 символов. Туда должны входить следующие данные: название компании, если это известная компания, а так же наиболее важные ключевые слова. Заголовок web-страницы – это её краткое описание.

     Основную  часть документа занимает так  называемое текстовое поле — участок, где и размещается смысловое  наполнение страницы: содержательный информационный текст и иллюстрации. Перечисленные элементы еще называют «контент». Расположение текстового поля зависит в первую очередь от того, каким образом web-дизайнер разместит остальные элементы документа.

     Следующей обязательной составляющей частью web-страницы являются элементы навигации — гиперссылки, связывающие данный документ с другими разделами сайта. Элементы навигации могут быть выполнены в виде текстовых строк, графических объектов, то есть кнопок, либо активных компонентов, например Java-апплетов. Последние представляют собой те же кнопки, которые, в отличие от своих «традиционных» сестер, умеют реагировать на движения мыши, выполняя при наведении на них курсора какие-либо несложные действия (включение подсветки, создание эффекта «нажатия», изменение формы и т. д.). Располагать элементы навигации следует таким образом, чтобы они всегда были «на виду», «под рукой», то есть так, чтобы пользователю не приходилось «отматывать» страницу назад, если текстовое поле занимает по высоте несколько физических экранов, после чего подолгу искать ссылки на другие разделы. Наиболее устоявшимся подходом является размещение элементов навигации у левой границы страницы.

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

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

     

     Рисунок1.1 - Пример компоновки web-страницы с правым позиционированием элементов навигации.

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

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

2. Классификация веб-страниц

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

     По  поведению документа  в браузере пользователя, различают:

• Статические html страницы

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

• Динамические html страницы

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

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

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

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

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

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

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

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

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

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

1. HTML

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