Согласно данным аналитического отчета компании Netcraft, в сентябре количество работающих в интернете сайтов и персональных блогов впервые в истории превысило 1 млрд. и составило 1 022 954 603 узла. По данным последнего пресс-релиза Международного союза электросвязи (МСЭ) от 22.07.2016, количество пользователей интернета в мире составляет 3,5 миллиарда человек. Такая популярность и обуславливает актуальность данной темы. У пользователя огромный выбор сайтов и чтобы удержать его внимание на сайте или, что ещё лучше, сделать его постоянным посетителем, необходимо иметь сайт, отвечающий всем его требованиям: красивый дизайн, удобная навигация, читаемость текста, скорость загрузки страниц и т.д. Необходимо учитывать воздействие различных цветов на психику людей, контрастность, расположение рисунков, размер шрифта и множество других нюансов. Всё это элементы хорошего дизайна. Дизайн создаётся средствами HTML и CSS, причём HTML отвечает за логическую структуру, а CSS – за физическое формирование текста.

Цель работы заключается в создании и оформлении web-приложения.

Для достижения поставленной цели нужно выполнить следующие задачи:

рассмотреть способы оформления веб-приложений;
рассмотреть понятие юзабилити;
изучить теоретические основы CSS: понятие, стили, уровни;
выбрать средства создания веб-приложения;
выбрать стили для приложения;
реализовать возможность выбора темы веб-приложения.

1. Способы оформления web-страниц приложения

Сайты создаются с определённой целью. Чаще всего с целью продать товар или услугу или, как минимум, дать информацию пользователю. По данным Nielsen Norman Group, пользователи проводят на одной странице в среднем 27 секунд и редко прокручивают страницу до конца. За несколько секунд, которые у вас есть, нужно успеть «сказать» пользователю очень многое, доступно объяснить ему, где он находится и что ему делать, заинтересовать. В этом заключается удобство использования, дружественность, эргономичность сайта. Научным синонимом этих слов является термин «юзабилити».

Понятие юзабилити

Юзабилити представляет собой методы контроля и обеспечения качества, которые определяют эффективность работы системы на пользователя. Она обеспечивает человеку возможность управлять тем, что он создал [21].

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

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

Прежде всего, это можно сделать до того, как началось оформление дизайна. В данном случае проводятся исследования на месте изучения конкурентов. С их помощью дизайнер определяет направление движения реального мира. Эти действия характерны для такого научного подхода, как «гипотеза-опыт»: сначала вы создаёте какие-либо закономерности, а затем находите им подтверждения в реальном мире, чтобы использовать их в дальнейшем для создания самого лучшего дизайна.

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

Юзабилити пытается объяснить поведение пользователя в сложных системах в необычных обстоятельствах, следовательно, её гипотезы менее точны, чем прогнозы таких точных наук, как, к примеру, физика или математика. Поэтому юзабилити в своих рекомендациях опирается, в основном, на полученные ранее результаты экспериментов и на опыт, чем на какие-либо точные формулы.

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

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

Важно освоить две стороны юзабилити, которые представляют собой идеологическую и научную точку зрения. Каждая из этих сторон требует определённого подхода к освоению.

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

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

Юзабилити (англ. usability, по стандарту ISO DIS 9241-11) - «степень, в которой продукт может быть использован определёнными пользователями при определённом контексте использования для достижения определённых целей с должной эффективностью, отдачей и удовлетворением», проще говоря степень качества и адекватности интерфейса продукта. Также под юзабилити понимается и дисциплина, направленная на достижение такого интерфейса.

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

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

В ISO также разработаны стандарты, используемые в сфере юзабилити и человеко-компьютерного взаимодействия:

ISO 9241 - содержит требования к эргономике визуальных дисплейных терминалов для офисной работы. Основной акцент ISO 9241 сделан на требования к офисному оборудованию, которые должны выполняться всеми производителями, например, требования к дисплеям, клавиатурам, к отражению, к цвету, к компоновке элементов на экране, к диалогам и сообщениям об ошибках. Этот стандарт не применим к проектированию интерфейсов для мобильных устройств. В ней даётся определение юзабилити - «эффективность, продуктивность и удовлетворение пользователя», а также приводятся различные метрики, которые помогают проектировать удобные пользовательские интерфейсы.

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

ISO 18529 - эргономика человеко-компьютерного взаимодействия - описание процесса проектирования интерефейсов, ориентированных на пользователей.

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

ISO 16071 - эргономика взаимодействия "человек-система". Руководящие указания по доступу к интерфейсам "человек-машина"

ISO 16982 - эргономика взаимодействия человек-система. Методы, основанные на удобстве применения, для обеспечения проектирования, ориентированного на человека

ISO 20282 - юзабилити повседневных вещей. В первой части стандарта рассказывается о методе определения свойств контекста, в котором будет использоваться разрабатываемый продукт. Во второй части описывается методика измерения юзабилити для повседневных вещей [9].

1.2. Необходимость разработки стилей. Разновидности стилей CSS

Юзабилити – важное понятие при создании сайта. Привлекательный и удобный дизайн является необходимым условием юзабилити. Такой дизайн средством лишь языка гипертекстовой разметки создать если даже возможно, то нелегко. И тут не обойтись без каскадных таблиц стилей (CSS).

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

Пример HTML-кода, созданного без использования таблиц стилей:

<P><FONT COLOR="#FF0000"><I>Это цитата.</I>

</FONT></P>

Шрифт выражения «Это цитата» пусть требуется уменьшить. Для этого пишем код:

<P><FONT COLOR="#FF0000" size="-1"><I>Это цитата.</I></FONT></P>

С одной цитатой можно справиться без труда. А если их сотня, тут без таблицы стилей не обойтись. Перепишем пример с использованием стилей.

Сначала напишем саму таблицу стилей.

.cit { font-style: italic; color: #FF0000 }

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

Этот стиль содержит определение параметров для двух атрибутов стиля. Первый атрибут - font-style - задаёт «стиль» текста; в нашем случае значение italic делает текст курсивом, словно бы его поместили внутрь тега <i>. Второй атрибут - color - задаёт цвет текста. Как видно, два атрибута стиля cit заменили оба тега: <FONT> и <i>.

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

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

<Р CLASS="cit">Это цитата.</Р>

Как видно, достаточно просто добавить в тег <р> атрибут CLASS и в качестве значения присвоить ему имя определённого нами стилевого класса, в нашем случае cit. Теперь этот фрагмент текста будет форматироваться курсивным красным шрифтом уменьшённого размера.

Но, кроме того, нам ещё нужно добавить в секцию HTML-заголовка (тег <HEAD>) нашей страницы ссылку на таблицу стиля, чтобы Web-обозреватель смог её найти. Эта ссылка будет иметь следующий вид:

<LINK REL="stylesheet" HREF=".../styles.css" TYPE="text/css">.

В зависимости от расположения таблиц стилей различают следующие разновидности:

- встроенные;

- внутренние;

- внешние.

Встроенная таблица стилей определяется в теге <style type="text/css">, который обычно располагается в разделе страницы <head>. Внутри этого раздела <style> находится список имён тегов, называемых селекторами, которым присваивают объявления стилей (свойства и значения). Когда эти объявления сделаны, они автоматически применяются к определённым тегам.

Пример формы встроенной таблицы стилей:

selector {property:value [; property:value] ...}

</style>

Селектор является именем тега (без охватывающих символов "<" и ">"). Свойства и значения стиля тега представлены в виде списка объявлений стиля, разделённом точками с запятой и помещённом внутри пары фигурных скобок «{ }». Например, следующий код определяет объявления стиля для тега <hr/>, задавая такие же параметры стиля, как и предыдущая линейная таблица стилей.

Пример применения встроенной таблицы стилей:

<head>

<title>Пример встроенной таблицы стилей</title>

hr {height:10px; width:50%; color:red; text-align:center}

</style>

</head>

При помощи дополнительного атрибута style мы можем определить нужные нам стилевые параметры в любом теге. Это самый лёгкий способ, и действует он в пределах лишь одного тега. Но представьте, насколько вырастет размер файла, и насколько неудобно будет его исправлять, если мы будем указывать стиль у каждого тега. Этот способ не слишком отличается, к примеру, от прямого описания внешнего вида при помощи тега <font>.

Таблица стилей, заданная внутри элемента HTML при помощи атрибута style, называется внутренней.

Пример формы внутренней таблицы стилей:

<H1 style=”color: green”> Зелёный заголовок </H1>

Определение стилей происходит при помощи классов, которые представляют собой списки с определением всех необходимых параметров оформления.

При использовании этого метода описание стилей необходимо разместить в секции заголовка:

<head> ....

<!--

.header {

text-align :left;

font-size : 18pt;}

.green {color : green; }

-->

</style>

</head>

Теперь эти стили можно применять в любом месте html-кода. Для этого используется следующая конструкция:

<p class=header>Текст написан стилем header<p>

<p class=green>Текст написан зелёным цветом<p>

Кроме определения новых классов мы также имеем возможность переопределять стандартные теги. Например, тег <p>:

p { text-align : center; font-size :12pt;}

</style>

Теперь весь текст, заключённый в теги <p> </p>, будет выглядеть так, как определено данным стилем. Это очень удобно и позволяет легко адаптировать уже существующие странички к использованию стилей. Кроме того, это несколько уменьшает объём файла за счёт отсутствия лишних атрибутов class.

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

Бывают случаи, когда создаваемый сайт состоит из десятков страниц и каждая страница должна иметь свою таблицу стилей. Обычно все страницы сайта выглядят одинаково и имеет одну таблицу стилей, описывающую её элементы. Чтобы не дублировать эту страницу между тегами <style> и </style> на каждой странице, её можно поместить в отдельный файл с расширением .css и подключить к html-документу при необходимости. Такие таблицы называются внешними.

Преимущество внешних таблиц заключается в том, что, однажды загрузив её, браузер кэширует информацию и при повторной загрузке берет её не с web-cepвepa, а с локального диска. Таким образом, при загрузке страниц wеb-сайта с одной таблицей стилей экономят на времени загpузки внешней таблицы стилей, то есть содержащего её файла css. Второе преимущество опять же удобство редактирования таких страниц. Достаточно исправить стиль оформления элемента в одном месте в файле, содержащем таблицу стилей, и на всех НТМL-страницах, использующих эти стили, внешний вид элементов изменится.

Таким образом, главное условие выживания сайта - юзабилити. Причиной тому является тот простой факт, что сегодня в интернете содержится очень большое количество сайтов, поэтому если пользователь наткнулся на проблемы на одном сайте, он может очень быстро уйти с него и найти более приятный и понятный для него сайт. Статистика показывает, что сегодня приблизительно 10% бюджета всего сайта тратится именно на юзабилити.

Юзабилити невозможен без привлекательного дизайна. За дизайн сайта отвечают CSS – каскадные таблицы стилей. В следующей части работы рассмотрим сам процесс создания сайта средствами HTML и CSS.

2. Создание и оформление web-приложения

2.1 Выбор и обоснование средств реализации

Для создания сайта использовались следующие средства:

HTML;
CSS;
JavaScript.

HTML (Hypertext Markup Language) - язык разметки гипертекста. Был изобретён в 1990 году учёным Тимом Бёрнсом-Ли.

Каждый HTML-документ должен отвечать какой-либо версии спецификации HTML, в свою очередь документ необходимо начать со строки декларации версии HTML <!DOCTYPE>, если этого не указать, то добиться от браузера корректного отображения документа становиться более труднее.

Пример

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN>

В данном примере указывается, что HTML соответствует международной спецификации версии 1.0.

Основные понятия языка HTML - тег и атрибуты.

Тег - оформленная единица HTML-кода. Например, <html>, <body>, <h1>, <h2> и т.д. Все тэги имеют одинаковый формат: они начинаются знаком «<» и заканчиваются знаком «>» [10, 12].

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

Пример

<h1> Крупный заголовок </h1>

<h2 align="center"> Заголовок чуть поменьше </h2>

Рассмотрим процесс создания сайта с использованием html.

Весь код помещается в тег <html>, </html>. Знаками < > обозначаются все теги, <html> означает, что начинается код, а </html> - закрывает код.

Тег <head> - «голова документа», отвечает за заголовок страницы в окне браузера.

Teг <title > - отвечает за заголовок страницы.

Тело документа находится в парном тeгe <body>. Внутри угловых скобок написано не только название тeгa, но и его атрибуты. Написав данный атрибут bgcolor="#000000" означает, что фон страницы будет чёрного цвета.

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

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

Пример HTML:

<font color="red"><strong><u> Текст </u></strong>

</font>

Если подобный стиль нужно использовать несколько раз, тут нам и поможет СSS.

Каскадность заключается в том, что стили могут переопределяться. Например, мы определили во внешнем стилевом файле, что текст в теге <p> должен быть написан при помощи шрифта высотой 10 пунктов. Но если в заголовке странички мы дополнительно укажем, что тот же текст в теге <p> должен быть написан шрифтом в 12 пунктов, то текст будет выведен именно таким кеглем - т.е. стиль в заголовке странички переопределил стиль во внешнем файле.

Структура и правила

Селекторы.

Синтаксис селектора: selektors {свойства 1: значение; свойство 2: значение; ...}

Любой тег HTML - по сути может выступать селектором CSS. Стиль элемента определяет свойства селектора, для которого он определён.

Пример

H5 {color:blue; size:25pt;}

Все элементы H5 в документе будут синего цвета, размером в 25 точек (pt, point).

Классовые селекторы.

Классовые селекторы можно описать двумя способами.

Синтаксис классовых селекторов: selektors.class {свойства 1: значение; свойство 2: значение; ...}

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

Пример

H1.blue {color:blue; size:20pt;}

Все элементы H1 с атрибутом CLASS="blue" станут синими.

Классы могут так же быть описаны без привязывания их к определённым элементам.

Синтаксис: .klass {свойства 1: значение; свойство 2: значение; ...}

Пример

.green {color:green;}

В данном варианте все элементы с атрибутом CLASS=«green» станут зелёными.

ID селекторы.

Cинтакс ID селектора: #id {свойства 1: значение; свойство 2: значение; ...}

ID - индивидуально именованный стиль. C его помощью можно создавать стилистические исключения cреди элементов одного класса.

Идентификаторы используются в основном для придания одному или нескольким элементам одного класса индивидуальных свойств. Скажем, мы создали класс blue - синий курсив. Но нам понадобился жирный подчёркнутый текст синим курсивом. Конечно, можно создать новый класс, но проще описать ID. Например "bold-line". И все элементы класса blue с значением ID «bold-line» станут жирным подчёркнутым синим курсивом. Произойдёт как бы синтез свойств класса blue и идентификатора boldunderline.

Пример

<html>

<head>

<title> Первые шаги в CSS </title>

</head>

<style>

.blue {color:blue; font-style:italic}

#bold-line {text-decoration:underline; font-weight:bold}

</style>

<body>

<p class="blue"> Первая работа. </p>

<p class="blue" id=«boldunderline»> Пока ещё в стадии разработки ... </p>

<p id="bold-line">... Но скоро откроется </p>

</body>

</html>

Как видно из примера, атрибут ID может быть использован без указания класса.

Контекстуальные селекторы.

Контекстные селекторы (англ. Contextual Selectors) - это сочетания нескольких обыкновенных селекторов. Стиль задаётся только элементам в заданной последовательности в зависимости от каскадного порядка.

Пример

P EM {color:silver;}

В данном примере все элементы в теге <EM> внутри элементов тега <P> будут иметь заданный стиль.

Придание нескольким элементам одинаковых свойств.

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

Пример

h1,h2,h3,p,strong {color:green; font-style:italic;}

Все элементы h1, h2, h3, p и strong будут зелёными.

Псевдоклассы и псевдоэлементы.

Синтаксис: selectors: pseudo class {свойства 1: значение; свойство 2: значение; ...}

selectors.klass: pseudo class {свойства 1: значение; свойство 2: значение; ...}

selectors: pseudo element {свойства 1: значение; свойство 2: значение; ...}

selectors.klass: pseudo element {свойства 1: значение; свойство 2: значение; ...}

Псевдоклассы и псевдоэлементы - это особые классы и элементы, присущие CSS и автоматически определяемые поддерживающими CSS браузерами. Псевдоклассы – это атрибуты, назначаемые строго к селекторам с намерением определить реакцию или состояние для данного селектора. в основном псевдоклассы используют для задания стилей ссылок. Например: link для непосещённой ссылки, :hover для ссылки при наведении, :active для нажатой и удерживаемой ссылки и :visited для посещенной. Псевдоэлементы - это особый вид свойств CSS, которые позволяют работать не над самим элементом, а над его отдельной частью. Например: стиль первой буквы или первой строки в текстовом блоке, добавляет содержимое до или после элемента, стиль выделенного пользователем текста.

Все параметры, используемые для определения стиля, условно можно разделить на несколько больших групп:

- управляющие видом шрифта (гарнитура, кегль, цвет, наклон, жирность)

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

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

- другие, которые не вписываются ни в одну из перечисленных выше групп (цвет ссылок странички, изменение внешнего вида курсора)

Рассмотрим подробнее параметры, используемые для управления внешним видом текста и форматирования абзацев - как наиболее часто употребляемые.

Основные параметры шрифта

font-family - указывает приоритетный список шрифтов, используемых для отображения данного элемента или web-страницы.

font-style - определяет normal, italic или oblique.

font-variant - используется для выбора между вариантами normal и small-caps.

font-weight - описывает, насколько толстым, или «тяжёлым», должен отображаться шрифт. Шрифт может быть normal или bold. Некоторые браузеры поддерживают даже числовые значения 100-900 (в сотнях) для описания веса шрифта.

font-size – устанавливается размер шрифта.

Font - можно указывать все свойства шрифта в одном стилевом правиле.

Основные параметры абзаца (и элементов типа "Box")

text-align: [left|right|center|justify] - выравнивание

text-indent: number - отступ красной строки

line-height: number -интерлиньяж

letter-spacing: number - трекинг

padding-left: number - отступ от текста слева

padding-right: number - отступ от текста справа

padding-top: number - отступ от текста сверху

padding-bottom: number - отступ от текста снизу

margin-left: number - отступ от границы слева

margin-right: number- отступ от границы справа

margin-top: number - отступ от границы сверху

margin-bottom: number - отступ от границы снизу

Различные спецификации CSS разбиваются на уровни (версии): CSS 3.1, CSS 95, CSS 98 и CSS NT. Каждый уровень CSS подразумевает более развёрнутый предыдущий уровень, что требует полной совместимости между уровнями.

CSS первого уровня предоставляет следующие возможности.

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

Цвета. Спецификация позволяет определять цвета текста, фона, рамок и других элементов страницы.

Атрибуты текста. Возможность задавать межсимвольный интервал, расстояние между словами и высоту строки (то есть межстрочные отступы).

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

Свойства блоков, такие как высота, ширина, внутренние (padding) и внешние (margin) отступы и рамки. Так же в спецификацию входили ограниченные средства по позиционированию элементов, такие как float и clear.

Уровень CSS2 основан на CSS1 с сохранением обратной совместимости за несколькими исключениями. Добавление к функциональности:

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

Типы носителей. Позволяет устанавливать разные стили для разных носителей (например монитор, принтер, КПК).

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

Страничные носители. Позволяет, например, установить разные стили для элементов на чётных и нечётных страницах при печати.

Расширенный механизм селекторов.

Указатели.

Генерируемое содержимое. Позволяет добавлять содержимое, которого нет в исходном документе, до или после нужного элемента.

Консорциум Всемирной паутины (W3C) больше не поддерживает CSS2 и рекомендует использовать CSS2.1. В данный момент ведется активная разработка CSS 3, которая должна стать настоящим прорывом в развитии каскадных таблиц стилей.

Мы рассмотрели основные теоретические сведения, касающиеся применения таблиц стилей.

Полученные сведения рассмотрим на примере создания стилей для данного сайта.

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

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

Например, body.

body {

font: 100% Verdana, Arial, Helvetica, sans-serif;

margin: 0;

padding: 0;

background: #FFFFFF url('bg-KLASS.gif') left top repeat-x;

margin: 0 auto;

font-size: 12px; /*размер шрифта*/

text-align: left;

}

Далее в скобках идёт свойство CSS и через двоеточие значение параметра.

Сначала зададим свойства шрифта:

font: 100% Verdana, Arial, Helvetica, sans-serif;

После двоеточия перечисляем значения параметров. В данном случае перечислены несколько типов шрифтов. Это делается для того, чтобы в случае, когда какой-то браузер не сможет отобразить первый тип - Verdana, то в этом случае отобразится тип Arial, если не отображается и Arial, то Helvetica, а sans-serif обозначает обычный шрифт без засечек.

margin: 0 - означает, что ни слева, ни справа нет отступов.

padding: 0 - аналогично, нет отступов, только рассматриваются верх и них.

background: #FFFFFF url('bg-KLASS.gif') left top repeat-x;

С помощью этого свойства можно несколько свойств указать в одном селекторе.

#FFFFFF - означает, что фон будет белого цвета.

url('bg-KLASS.gif') - это значит, что рисунок bg-KLASS.gif вставлен в качестве фонового изображения.

left top - позиционируется фоновое изображение от верхнего левого угла.

repeat-x - рисунок повторяется по горизонтали.

font-size: 12px - задаёт размер шрифта.

text-align: left - выравнивает текст слева.

Таким образом, создавался стиль для каждого блока на странице сайта.

JavaScript - это относительно простой объектно-ориентированный язык, предназначенный для создания небольших клиентских и серверных приложений для Internet. Программы, написанные на языке JavaScript, включаются в состав HTML-документов и распространяются вместе с ними. Программы просмотра (браузеры - от англ. browser) типа Netscape Navigator и Microsoft Internet Explorer распознают встроенные в текст документа программы-вставки (script-коды) и выполняют их. Таким образом, JavaScript - интерпретируемый язык программирования. Примерами программ на JavaScript могут служить программы, проверяющие введённые пользователем данные или выполняющие какие-то действия при открытии или закрытии документа. Такие программы могут реагировать на действия пользователя - нажатие кнопок «мыши», ввод данных в экранной форме или перемещение «мыши» по странице. Более того, JavaScript-программы могут управлять самим браузером и атрибутами документа.

JavaScript позволяет контролировать работу браузера. Например, объект Window поддерживает методы, позволяющие выводить на экран всплывающие диалоговые окна, создавать, открывать и закрывать новые окна браузера, задавать режимы прокрутки и размеры окон и т.д.

JavaScript позволяет взаимодействовать с содержимым документов. Объект Document и содержащиеся в нем объекты позволяют программам читать части HTML-документа и иногда взаимодействовать с ними. Сам текст прочитать невозможно, но можно, например, получить список гипертекстовых ссылок, имеющихся в данном документе. На текущий момент широкие возможности взаимодействия с содержимым документов обеспечивает объект Form и объекты, которые он может содержать: Button, Checkbox, Hidden, Password, Radio, Reset, Select, Submit, Text и Textarea.

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

Кроме основных средств - HTML, CSS, JavaScript - использовались дополнительные средства, программы для создания сайта, в частности для создания графической и текстовой части.

Графическая часть сайта создавалась с использованием самого известного графического редактора - Adobe Photoshop. Он позволяет редактировать старые изображения и создавать новые.

При создании графики для данного сайта были использованы следующие его возможности:

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

Создание элементов дизайна (рис. 1 «Верхняя шапка web-страницы»).

bg-MODERN-01

Рис.1. «Верхняя шапка web-страницы».

2.2. Структура системы

Структура сайта представляет собой определённое расположение разделов, позволяющее посетителям быстро переходить от одной страницы к другой, не делая более 3-4 кликов. Грамотно разработанная структура даёт возможность разместить на сайте максимум полезной информации, которая будет легко доступна посетителям и не потребует больших временных затрат для её нахождения и усвоения.

Меню сайта состоит из следующих пунктов:

О программе;
Новости;
Галерея;
Участники;
Курсы;
Полезные ссылки.

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

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

Сайт информационного портала hp имеет следующую архитектуру (см. рис.2. «Архитектура сайта»).

Рис.2. «Архитектура сайта»

Из каждой страницы сайта можно попасть в другую посредством верхнего меню. Исключением являются сторонние сайты, например, сайты учебных заведений (см. рис.3. «Страница «Участники проекта»»), являющихся участниками данного проекта. Если зайти на сайт любого из этих учебных заведений, обратно можно вернуться лишь кнопкой «назад» в браузере.

Рис.3. Страница «Участники проекта»

В данном разделе были рассмотрены основные средства и инструменты, с помощью которых создавался сайт. Это HTML, CSS, JavaScript, Photoshop. По данным средствам были получены теоретические сведения, на основе которых можно приступить к практической части, в частности, разработке стилей.

3. Разработка стилей сайта

3.1. Концепция внешнего вида и ее изменения

Концепция внешнего вида сайта – специально разрабатываемое, комплексное представление будущего внешнего вида сайта. Концепция очерчивает основные характеристики дизайна, которые определяют вид графики, цветовое содержание, размещение отдельных художественных элементов и т.д. (см. Рис.4. «Оформление сайта стилем «классический»).

001

Рис.4. «Оформление сайта стилем «классический».

Основные структурные элементы на главной страницы сайта расположены в две колонки.

Для оформления web-сайта применяется основной стиль под названием «классический», приведем ниже его CSS-код:

body {

font: 100% Verdana, Arial, Helvetica, sans-serif;

margin: 0;

padding: 0;

background: #FFFFFF url('bg-KLASS.gif') left top repeat-x;

margin: 0 auto;

font-size: 12px;

text-align: left;

}

.contentcontainer #container {

width: 860px;

margin-top: 0;

margin-right: auto;

margin-bottom: 0;

margin-left: auto;

height: auto;

padding: 0px 5px 10px;

}

.contentcontainer #header {

padding: 3px 0px 0px 0px;

position: inherit;

}

.contentcontainer #header h1 {

font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

font-size: 52px;

font-weight: bold;

letter-spacing: -2px;

color: #BBDDEE;

line-height: 100%;

margin: 25px 0px 0px 0px;

padding: 0px;

}

#header a {

font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

color: #FFFFFF;

font-size: 13px;

}

#header a:hover {

font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

color: #F00;

font-size: 13px;

text-decoration: none;

}

.contentcontainer #mainContent {

padding: 0px 0px 0px 0px;

margin: 65px 0px 15px 0px;

}

.contentcontainer #footer {

background: #FFFFFF url('bg01-KLASS.gif') left top repeat-x;

clear: both;

}

.contentcontainer #footer p {

padding: 15px 0;

color: #FFF;

text-align: right;

width: 860px;

margin: 0 auto;

}

.contentcontainer #logo {

margin: 0px 0px 0px 0px;

}

a {

color: #27048B;

text-decoration: none;

}

a:hover {

color: purple;

text-decoration: none;

}

#topmenu {

width: 860px;

float: left;

padding: 15px 0px 0px 5px;

margin: 0px 0px 0px 0px;

padding: 0px;

font-size: 12px;

}

#topmenu ul {

display: inline;

margin: 0px;

padding: 0px;

}

#topmenu li {

display: inline;

list-style: none;

margin: 0px;

padding: 0px;

}

#topmenu li a {

display: block;

color: #000099;

font-weight: bold;

text-decoration: none;

float: left;

padding: 16px 13px 13px 5px;

}

#topmenu li a:hover {

padding: 16px 13px 6px 5px;

border-bottom: 3px solid #CCFFFF;

color: #CCFFFF;

}

#leftContent {

width: 300px;

padding: 0px 0px;

float: left;

}

.posted {

background: url('dotted1.gif') left bottom repeat-x;

padding-bottom: 10px;

}

.small {

font-family: Arial;

font-size: 11px;

}

#PChanger {

display: block;

border: 0px;

text-align: center;

vertical-align: middle;

padding: 3px;

}

#mainContent h2, #rightContent h2 {

font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

font-size: 22px;

text-decoration: none;

font-weight: bold;

color: #660066;

margin: 0px;

}

#rightContent {

margin: 0px 0px 0px 335px;

}

.first {

text-indent: 0;

}

h3{

color: #27048B;

text-decoration: none;

text-indent: 20px;

}

a.large{

font-family: Verdana,Helvetica,sans-serif;

font-size: 12px;

font-weight: bold;

}

По заданию на проект мы разработали три вида стиля, каждый из которых имеет уникальное название, это «классический», «академический» и «современный». На основе построенного CSS-файла классического стиля мы меняем некоторые значения в двух остальных CSS-файлах. Изменения произошли в цветовом оформлении, тексте, позиционировании элементов стиля, отступы от краёв элементов и блоков и т.д.

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

Подключение стилей к HTML-документу

Каскадные таблицы стилей подключаются к HTML-документу с помощью тега <link>, который имеет параметры:

REL - определяет отношения между текущим документом и файлом, на который делается ссылка;

HREF - путь к связываемому файлу, который определяет URL (Universal Resource Locator, универсальный указатель ресурса);

TYPE - MIME-тип данных подключаемого файла;

MEDIA - Определяет устройство, для которого следует применять стилевое оформление.

Из данных параметров мы уделим особое внимание параметру REL, т.к. непосредственно этот параметр определяет отношения между HTML-документом и файлом, на который делается ссылка. Для браузера это крайне важно, необходимо определить, как использовать подключаемый документ. Есть три вида взаимоотношения между каскадными таблицами стилей и HTML-документа:

Фиксированный (persistent). Такая таблица стилей всегда связана с документом и ее стили комбинируются со стилями активной таблицы. Чтобы сделать таблицу стилей фиксированной, нужно параметру REL задать свойство «stylesheet» и не указывать параметр TITLE.

Пример

Предпочтительный (preferred). Такая таблица стилей загружается по умолчанию и не является обязательной. Чтобы сделать таблицу стилей предпочтительной, нужно параметру REL задать свойство «stylesheet», а также указать параметру TITLE уникальный заголовок. Такое свойство параметра REL позволяет сгруппировать несколько предпочтительных таблиц, при этом каждая из них должна иметь уникальный заголовок, они будут включаться и выключаться одновременно. В случае когда объявляем несколько групп предпочтительных таблиц, то первая из них будет иметь превосходство над остальными.

Пример

Альтернативный (alternate). Такая таблица стилей может быть выбрана пользователем, как альтернативный вариант предпочтительной таблице. Чтобы сделать таблицу стилей альтернативной, нужно параметру REL задать свойство «alternate stylesheet» и указывать параметр TITLE.

Пример

В итоге мы определились со свойством параметра REL, который нам необходим для дальнейшей работы со стилями. Классическому стилю мы придаем параметр REL с свойством «stylesheet», а двум остальным задаем «alternate stylesheet».Что отражено ниже в части HTML-кода:

...

...

Смена стилей

При первичной загрузки HTML-страницы вступают в работу фиксированные и предпочтительные таблицы стилей, а альтернативные таблицы могут быть выбраны пользователем вручную. Некоторые браузеры более новейших версий, имеющие поддержку CSS3, позволяют применить данную функции. Для выбора стиля достаточно перейти на вкладку Вид > Стиль страницы и выбрать нужный стиль, такой путь применяется у большинства браузерах. В более поздних версиях поддержки этой функции нет. В данной ситуации нам поможет JavaScript, чтобы пользователи с более поздними версиями браузеров могли воспользоваться функцией смены стилей.

Скрипт

function setActiveStyle(title) {

var i, a, main;

for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {

if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title"))

{

a.disabled = true;

if(a.getAttribute("title") == title) a.disabled = false;

}

function getActiveStyle(){

var i, a;

for(i=0; (a = document.getElementsByTagName("link")[i]); i++)

{

if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title") && !a.disabled)

return a.getAttribute("title");

}

return null;

}

function getPreferredStyle (){

var i, a;

for(i=0; (a = document.getElementsByTagName("link")[i]); i++)

{

if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("rel").indexOf("alt") == -1 && a.getAttribute("title"))

return a.getAttribute("title");

}

return null;

}

Коротко поясним эти скрипты.

Функция function setActiveStyle(title)- непосредственно функция переключения.

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

Блок-схема указанной функции приведена в приложении 3.

Функция function getActiveStyle возвращает текущий стиль.

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

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

Блок-схема приведена в приложении 3.

Функция function getPreferredStyle()нужна для того, чтобы выяснить какая таблица у нас предпочтительная.

Cookies

function createCookie(name,value,days)

{

if (days)

{

var date = new Date();

date.setTime(date.getTime()+(days*24*60*60*1000));

var expires = "; expires="+date.toGMTString();

}

else expires = "";

document.cookie = name+"="+value+expires+"; path=/";}

function readCookie(name)

{

var nameEQ = name + "=";

var ca = document.cookie.split(';');

for(var i=0;i < ca.length;i++)

{

var c = ca[i];

while (c.charAt(0)==' ') c = c.substring(1,c.length);

if (c.indexOf(nameEQ) == 0)

return c.substring(nameEQ.length,c.length);

}

return null;

}

Поясним, для чего нужны Cookies. Мы написали скрипт, который позволяет нам менять стиль сайта. А пользователи получили возможность выбора персональных настроек для сайта. Но эти настройки исчезнут, как только пользователь покинет сайт. Для того чтобы такого не было, и используют Cookies.

Onload

window.onload = function(e) {

var cookie = readCookie("style");

var title = cookie ? cookie : getPreferredStyleSheet();

setActiveStyleSheet(title);

}

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

Onunload

window.onunload = function(e) {

var title = getActiveStyleSheet();

createCookie("style", title, 365);

}

Сохранить cookies в событие onunload проще. Все что нам понадобится, это функция getActiveStyleSheet(), чтобы возвратить активную таблицу стилей и сохранить ее в cookies.

Выбранный стиль будет сохранен в cookies. Чтобы использовать один и тот же стиль для всего сайта, нужно поместить ссылки на соответствующие css файлы и файл styles.js между тегами <head> и </head> каждой страницы.

3.2. Применение эргономики интерфейсов в рамках проекта

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

Цветовое решение

Цвет один из самых неоднозначных элементов web-дизайна. Цвет может подчеркнуть контекст, а может и оттолкнуть.

При разработке стилей мы учитывали следующие требования, налагаемые на выбор цветового решения:

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

Скорость загрузки сайта

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

Разрешение сайта

Что лучше - «резиновые» сайты с плавающим дизайном или сайты с фиксированным разрешением, - отвечать на этот вопрос нужно, исходя из задач сайта. Безусловный плюс «резинового» сайта в том, что он позволяет полностью использовать рабочую область монитора при большом разрешении, позволяя, в то же время, просматривать сайт без полосы прокрутки на экранах меньшего размера. Это весьма актуально для сайтов с большим количеством разнообразной информации, разбитой на несколько визуальных блоков или, например, для сайтов, содержащих сложные таблицы. Представьте, однако, страницу, основным содержанием которой является несколько абзацев текста, растянутую на всю ширину 19-дюймового монитора. Длинные текстовые строки затрудняют восприятие информации и порой выглядят неаккуратно. В данном случае лучше «зафиксировать» ширину сайта, или диапазон, в пределах которого сайт будет растягиваться.

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

Ссылки. Сайт отличается большим количеством ссылок. Причем не только на страницы данного сайта, но и на другие web-ресурсы. Например, на ресурсы учебных заведений.

Информационное наполнение

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

Навигация

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

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

Список использованной литературы

Анар Бабаев, Николай Евдокимов, Михаил Боде, Евгений Костин, Алексей Штарев Раскрутка. Секреты эффективного продвижения сайтов. — СПб.: Питер, 2013. — С. 272. — ISBN 978-5-496-00600-2.
Вендров А.М. Проектирование программного обеспечения экономических информационных систем. - М: «Финансы и статистика», 2010
Дж. Берд Веб-дизайн. Руководство разработчика = The Principles of Beautiful Web Design, 2nd Edition. — П.: «Питер», 2012. — С. 224. — ISBN 978-5-459-00901-9.
Игорь Ашманов, Андрей Иванов Оптимизация и продвижение сайтов в поисковых системах. — СПб.: Питер, 2009. — С. 400. — ISBN 978-5-388-00008-8.
Калиновский А. Юзабилити: как сделать сайт удобным – М.: Новое знание, 2015. – 220с.
Квинт И. HTML,XHTML и CSS на 100%.- Спб.: Питер, 2010. -384с.
Кейт Шенгили-Робертс. CSS: каскадные таблицы стилей. Библиотека профессионала, М.: Издательство Вильямс, 2013.
Крамер Э. “HTML:наглядный курс Web-дизайна”, Вильямс, IDG Books Worldwide, 2011. -304с.
Лешек А. Мацяшек. Анализ требований и проектирование систем. Издательский дом «Вильямс». 2012-432с
Нидерст Д. “Web-мастеринг для профессионалов. Настольный справочник”
Олищук Андрей Владимирович. Разработка Web-приложений на PHP 5. Профессиональная работа. — М.: «Вильямс», 2006. — С. 352. — ISBN 5-8459-0944-9.
Севостьянов Иван Олегович Поисковая оптимизация. Практическое руководство по продвижению сайта в Интернете. — СПб.: «Питер», 2010. — 240 с. — ISBN 978-5-49807-670-6.
Стив Суэринг, Тим Конверс, Джойс Парк. PHP и MySQL. Библия программиста, 2-е издание = PHP 6 and MySQL 6 Bible. — М.: «Диалектика», 2010. — С. 912. — ISBN 978-5-8459-1640-2.
Сырых Ю.А. Современный web-дизайн. Рисуем сайт, который продает. – М.: ООО «И.Д.Вильямс», 2012.- 304с.
Храмцов П.Б., Брик С.А., Русак А.М., Сурин А.И. Основы Web-технологий. Интернет-университет информационных технологий - ИНТУИТ.ру, БИНОМ. Лаборатория знаний, 2013.- 376с.
Храмцов П.Б.Введение в HTML и CSS. Интернет-университет информационных технологий - ИНТУИТ.ру, БИНОМ. Лаборатория знаний, 2012.- 160с.
Якоб Нильсен, Хоа Лоранжер Web-дизайн: удобство использования Web-сайтов = Prioritizing Web Usability. — М.: «Вильямс», 2007. — С. 368. — ISBN 0-321-35031-6.
Rocket Surgery Made Easy: The Do-It-Yourself Guide to Finding and Fixing Usability Problems. — СПб.: Питер, 2010
Usability 101: Introduction to Usability, Jakob Nielsen's Alertbox. Retrieved 2010-06-01
Jakob Nielsen (1994), Usability Inspection Methods, Morgan John Wiley & Sons

Приложение 1. Листинг программы

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Институт технологий НР</title>

<!--<script type=text/javascript>

jQuery.noConflict();

jQuery(function()

{

// вызов стилей для их работоспособности

jQuery.stylesheetInit();

// переборка стилей

jQuery('#toggler').bind(

'click',

function(e)

{

jQuery.stylesheetToggle();

return false;

}

);

// принимает значение атрибута rel при нажатии

jQuery('.styleswitch').bind(

'click',

function(e)

{

jQuery.stylesheetSwitch(this.getAttribute('rel'));

return false;

}

);

}

);

</script>

-->

</head>

<tr>

<td colspan="2" width="616" height="110"><h1>Институт технологий НР</h1></td>

</tr>

<tr>

<td width="700"><a href="#" onclick="setActiveStyleSheet('classic'); return false;">Классический </a>

<a href="#" onclick="setActiveStyleSheet('academ'); return false;">Академический </a>

<a href="#" onclick="setActiveStyleSheet('modern'); return false;">Современный</a>

</td>

<td width="150" height="20" style="text-align: right"><a href="/Registration.php"><b>Регистрация</b></a></td>

</tr>

</table>

<tbody>

<tr>

</div>

<tbody>

<tr>

<tr>

<tr>

<td align="middle"><span style="COLOR: white" class="reg1">Пароль:</span></td></tr>

<tr>

<tr>

<td height="31" align="middle"><button style="width: 80px" onclick="registrate()" type=submit><span class="reg1">Регистрация</span></button></td></tr>

</tbody>

</table>

</div>

<ul>

<li><a href="index.html">Главная страница</a></li>

<li><a href="abouttheprogram.html">О программе</a></li>

<li><a href="news.html">Новости</a></li>

<li><a href="gallery.html">Галерея</a></li>

<li><a href="participants.html">Участники</a></li>

<li><a href="allcourses.html">Курсы</a></li>

<li><a href="UsefulLinks.html">Полезные ссылки</a></li>

</ul>

</div>

</div>

<h2 class="posted">Участники проекта</h2>

<tr>

<td width="50"><b><a href="#" onclick="changePartner(0);">ВятГУ</a></b></td>

<td width="50"><b><a href="#" onclick="changePartner(1);">ДВГТУ</a></b></td>

<td width="50"><b><a href="#" onclick="changePartner(2);">КамГУ</a></b></td>

</tr>

<tr>

</tr>

<tr>

<td width="50"><b><a href="#" onclick="changePartner(14);">СПбГУ</a></b></td>

<td width="50"><b><a href="#" onclick="changePartner(15);">СПбГУТ</a></b></td>

</tr>

<tr>

<td width="50"><b><a href="#" onclick="changePartner(20);">НовГУ</a></b></td>

</tr>

</table>

</td></tr>

</td>

</td>

</tr>

</tbody></table>

</td></tr>

<td align="left" width="50"><b><a class="small" href="#" onclick="toProject()">Проект</a></b></td>

<td align="center" width="50"><b><a class="small" href="#" onclick="toContacts()">Контакты</a></b></td>

</tr></tbody></table>

</td></tr>

</div>

</td></tr>

<span id="partnerAnnotation" onclick="toFullAnnotation()"><p><img src="index_files/ATT06751.jpg" align="left" height="100" hspace="5">   "Мы придумали эту программу специально для России, а теперь она заслужила признание высшего руководства НР и получила значительные дополнительные инвестиции на дальнейшее развитие, несмотря на нестабильную мировую экономическую ситуацию. Уникальность этой программы, значимые результаты ее работы и растущий к ней интерес лучших вузов России поставили МИТ в ряд с наиболее приоритетными и ключевыми программами компании в области поддержки образования и филантропии."</p>

<p align="right">Александр Микоян </p></span>

</td></tr>

<tr>

<tbody>

<tr>

<td colspan="2" align="center"><a class="large" href="#" onclick="openPhotoForm();">Галерея</a></td>

</tr>

</tbody>

</table></td></tr>

<td>

</div>

</td>

</tr>

</tbody></table>

</td></tr>

</tr>

</tbody></table>

</td></tr>

</tbody></table>

</td></tr>

</div>

</td><td width="500">

</td></tr>

<h3><span id="RitProjectTitle">О проекте</span></h3>

<p class="first">Программа Международный «Институт Технологий НР» (МИТ) является уникальной для компании НР, она была придумана и ведется Подразделением по университетским и исследовательским программам НР в России.<br>

Программа имеет своей главной целью оказание поддержки вузам России и стран Восточной Европы в подготовке ИТ-специалистов высокого уровня и обеспечение доступа студентов и преподавателей к информации о самых современных технологиях. Она разработана в соответствии с целями национального Российского проекта «Образование».

<a href="http://iit.hi-edu.ru/Projects.html" class="large">Далее</a></p>

</div>

</td></tr>

</tbody></table>

<h2 class="posted">Новости MИТ</h2>

</td></tr>

</tbody></table>

<td width="500" height="40"><a onclick="toCommonNews(2)" href="#" class="large">(11.07.2010) Компания HP приняла участие в Форуме "Селигер-2010"</a></td>

</tr>

<tr>

<td width="500" onclick="toMasterNews();"><p class="first"><img src="index_files/Seliger3.jpg" align="left" height="30" hspace="5">11 июля гостями смены "Техническое творчество и инновации" Форума "Селигер-2010" стали Александр Микоян и Игорь Белоусов.</p></td>

</tr>

<tr>

<td width="500" height="40"><a onclick="toCommonNews(3)" href="#" class="large">(13.05.2010) Обнинский Инновационный форум</a></td>

</tr>

<tr>

<td width="500" onclick="toMasterNews();"><p class="first"> <img src="index_files/post_08t1.jpg" align="left" height="30" hspace="5">13 мая в Обнинске прошел первый региональный Инновационный форум. Его организаторами выступили Правительство Калужской области, Администрация города Обнинск и Информационное агентство AK&M при участии Калужской торгово-промышленной палаты и Рейтингового агентства «Эксперт РА».</p></td>

</tr>

<tr>

<td width="500" height="40"><a onclick="toCommonNews(4)" href="#" class="large">(06.05.2010) Первая всероссийская виртуальная интернет конференция</a></td>

</tr>

<tr>

<td width="500" onclick="toMasterNews();"><p class="first">6 мая при содействии Центра МИТ НР в Казанском федеральном университете проводилась Первая всероссийская виртуальная интернет конференция "Современные проблемы анатомии, гистологии и эмбриологии животных".</p></td>

</tr>

<tr>

<td width="500" height="40"><a onclick="toCommonNews(5)" href="#" class="large">(27.04.2010) Открытие Центра Международного Института Технологий НР в Национальном техническом университете Украины ”Киевский политехнический институт”</a></td>

</tr>

<tr>

<td width="500" onclick="toMasterNews();"><p class="first"> <img src="index_files/rasti%2520igor.jpg" align="left" height="30" hspace="5">27 апреля в Национальном техническом университете Украины ”Киевский политехнический институт” (НТУУ “КПИ”) состоялось торжественное открытие учебно-научного центра «Технологий НР», созданного в рамках программы Международный «Институт технологий НР» МИТ НР).</p></td>

</tr>

<tr>

<td width="500" height="40"><a onclick="toCommonNews(6)" href="#" class="large">(09.04.2010) Открытие Центра Международного Института Технологий НР в Казанском федеральном университете</a></td>

</tr>

<tr>

<td width="500" onclick="toMasterNews();"><p class="first"> <img src="index_files/2.jpg" align="left" height="30" hspace="5">9 апреля в Казанском федеральном университете (КФУ) состоялось торжественное открытие центра «Технологий НР», созданного в рамках программы Международный «Институт технологий НР» (МИТ НР). Казанский университет присоединился к программе в марте 2009 г., а занятия в центре для студентов стартовали с началом учебного года в сентябре 2009 г.</p></td>

</tr>

</tbody></table>

<a href="http://iit.hi-edu.ru/news.html" class="large">Архив новостей</a>

</tbody></table>

<h2 onclick="//window.location='comingSoon.html'" title="все предстоящие события">Скоро</h2>

</td></tr>

</tbody></table>

</div>

</div>

</div>

</div>

</body>

</html>

Приложение 2. Внешний вид страниц сайта

Стиль «Классический»

Стиль «Академический»

Стиль «Современный»

Приложение 3. Блок-схемы