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

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



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

«К защите допускаю»

________________ А.Н. Лавренов

«_____»________________ 2011г.

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







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

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

Студентки группы 71001с	Бондарь Н.И.
Руководитель доцент кафедры ИТиВМ	Лавренов А.Н.
к. ф.-м. н.

МИНСК-2011

Оглавление

Введение.. 3

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

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

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

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

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

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

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

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

ЗАКЛЮЧЕНИЕ.. 16

СПИСОК ИСПОЛЬЗОВАННЫХ ИСТОЧНИКОВ.. 17

КОНТРОЛЬНЫЕ ВОПРОСЫ... 18

ГЛОССАРИЙ.. 19

ТЕСТ.. 20

Введение

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

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

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

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

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
-страницы с правым позиционированием элементов навигации.

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

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

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

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

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

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

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

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

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

Динамика на веб страницах реализована при помощи скриптов, которые выполняются браузером. Многие элементы языка 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      Модульные сетки в веб-дизайне

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

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

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

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

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

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

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

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

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

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

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

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

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-страниц рекомендуется использовать пакеты, которые будут рассмотрены ниже.

·                   Macromedia DreamWeaver.

Начнем мы с популярного Macromedia DreamWeaver. Компания Macromedia считается лидером по производсту программ для создания веб-сайтов, а также законодателем моды в этой области. Последния версия HTML-редактора этой компании - DreamWeaver 3, который относится к категории WYSIWYG-редакторов, и этот пакет имеет очень много достоинств: удобный интерфейс, настройка функций, поддержка больших проектов и ShockWave технологий, возможность закачки файлов через FTP, поддержка SSI и многое другое. Для работы в этой программе не нужно досконально знать HTML (в этом и заключается преимущество технологии WYSIWYG - что вижу, то и получаю).

Но DreamWeaver на несколько шагов опережает другие редакторы, использующие технологию WYSIWYG, в первую очередь тем, что генерирует очень чистый HTML-код. DreamWeaver позволяет вам избавиться от однотипной работы при создании страниц (например, верстка текста) при помощи использования опции "запись последовательности команд" вы записываете последовательность производимых вами команд, потом нажимаете, например, CTRL+P, и DreamWeaver воспроизводит все в той же последовательности.

·                   HomeSite 4

Следующий редактор - HomeSite 4 - для создания страниц вручную, т. е. для знатоков HTML. Вы получаете полный контроль над HTML-кодом, причем существует возможность оптимизировать свою страничку под один из трех популярных браузеров (MSIE, NN, Opera).

HomeSite содержит два основных режима: Edit и Design. Режим Design - это подобие WYSIWYG-редактора, выдающее HTML-код, причем, если вы загрузите чужой HTML-код, то HomeSite все перепишет по-своему. Режим Edit позволяет получить полный контроль над страничкой. Здесь вы можете настроить практически все, сможете прописать функции каждого тега (тогда ваша страничка в любом браузере будет смотреться одинаково).

Еще одна отличительная особенность HomeSite - это его «склейка» с Dreamweaver. HomeSite обладает кнопкой «Dreamweaver», а также входит в его стандартный пакет поставки. Впрочем, и DreamWeaver имеет возможность подключения HomeSite, как редактора для коректировки HTML-кода.

ЗАКЛЮЧЕНИЕ

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

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

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

СПИСОК ИСПОЛЬЗОВАННЫХ ИСТОЧНИКОВ

1.                 Консорциум Всемирной паутины - Википедия / [Электрон. ресурс]. – 2010. – Режим доступа: http://ru.wikipedia.org/wiki/W3 – Дата доступа: 04.10.2010.

2.                 Теория компьютерной графики / [Электрон. ресурс]. – 2010. – Режим доступа: http://www.sgrafika.narod.ru/modul1/Teoriyagrafiki.htm  – Дата доступа: 05.10.2010.

3.                 Web-интерфейс - Википедия / [Электрон. ресурс]. – 2010. – Режим доступа http://ru.wikipedia.org/wiki/Web-интерфейс – Дата доступа: 06.10.2010.

4.                 Владимир Дронов. ‑ Разработка интерактивных Web-сайтов, 2008.—512 с.

5.                 Максим Кузнецов, Игорь Симдянов: Самоучитель HTML, 2009.—460 с.

КОНТРОЛЬНЫЕ ВОПРОСЫ

1)                Что такое Web-страница?

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

2)                Какие бывают страницы?

Статические и динамические

3)                Какие бывают документы?

Статические и динамические

4)                Какие основные виды дизайна страниц?

1-полосный дизайн, 2-полосный дизайн, 3-полосный дизайн

5)                Каков стандартный размер баннеров, публикуемых под заголовком документа?

468x60 точек

6)                Что такое модульная сетка?

Невидимые направляющие, по которым располагаются элементы страничек веб-сайта

7)                Что из себя представляет модульная сетка?

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

8)                Что такое иерархическая сетка?

Размещение блоков, не поддающееся какой-либо закономерности

9)                Как могут быть реализованы модульные сетки?

Модульные сетки могут быть реализованы как одно- , так и двух- и трехколонные.

10)            Какой наиболее распространенный табличный дизайн?

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

ГЛОССАРИЙ

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

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

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

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

·                   1-полосный дизайн

·                   2-полосный дизайн

·                    3-полосный дизайн

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

ТЕСТ

1.               
Web-страница – это:

·                   информационный ресурс Всемирной паутины.

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

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

2.               
Составные части web-страницы:

·                   Заголовок

·                   Текстовое поле

·                   Элементы навигации

·                   Формы

·                   Авторские права

·                   Кнопки

3.               
Страницы по поведению документа в браузере делятся на:

·                   Статические

·                   Динамические

·                   Смешанные

·                   Гипертекст

·                   Текстовые

4.               
Документы по способу создания делятся на:

·                   Статические

·                   Динамические

·                   Смешанные

·                   Гипертекст

·                   Текстовые

5.               
Какие основные виды дизайна страниц?

·                   1-полосный дизайн

·                   2-полосный дизайн

·                   6-полосный дизайн

·                   5-полосный дизайн

·                   3-полосный дизайн

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

·                   468x60 точек

·                    460x60 точек

·                    468x50 точек

·                    458x60 точек

11)          
Модульная сетка – это:

·                   Видимые направляющие, по которым располагаются элементы страничек веб-сайта

·                   Невидимые направляющие, по которым располагаются элементы страничек веб-сайта

·                   Направляющие, по которым располагаются элементы страничек веб-сайта

12)          
Иерархическая сетка – это:

·                    Размещение блоков,  поддающееся какой-либо закономерности

·                   Размещение блоков, не поддающееся какой-либо закономерности

·                   Размещение блоков, по горизонтали

·                    Размещение блоков, по вертикали

13)          
Как могут быть реализованы модульные сетки:

·                   одноколонные

·                   двухколонны

·                   четырехколонны

·                   трехколонные

14)          
Какой наиболее распространенный табличный дизайн:

·                   1-полосный дизайн

·                   2-полосный дизайн

·                   6-полосный дизайн

·                   5-полосный дизайн

·                   3-полосный дизайн