WEB-инжиниринг

МИНИСТЕРСТВО  ОБРАЗОВАНИЯ И НАУКИ  РФ 
ФЕДЕРАЛЬНОЕ ГОСУДАРСТВЕННОЕ БЮДЖЕТНОЕ ОБРАЗОВАТЕЛЬНОЕ 
УЧРЕЖДЕНИЕ ВЫСШЕГО ПРОФЕССИОНАЛЬНОГО ОБРАЗОВАНИЯ 
«ВОРОНЕЖСКАЯ ГОСУДАРСТВЕННАЯ ЛЕСОТЕХНИЧЕСКАЯ АКАДЕМИЯ» 
 

 

 

 

 

В.В.Лавлинский, О.В.Курипта, Ю.Г.Табаков 

 

 

 

 

 

 

WEB-инжиниринг 

 

Учебное пособие  

для направления 230200.62 Информационные системы и 230.400.62 

Информационные системы и технологии 

 

 

 

 

Воронеж, 2013.

Содержание 

 

ВВЕДЕНИЕ ...................................................................................................................... 8 

1. 
Основы WEB-проектирования ........................................................................... 10 

1.1. 
Основы, цели и правила построения Web-сайта .......................................... 10 

1.2. 
Разработка стиля, структуры и сопровождения WEB-сайта ....................... 13 

2. 
Создание HTML документов .............................................................................. 20 

2.1. 
Синтаксис и структура HTML документов .................................................. 20 

2.2. 
Форматирование и выравнивание текста ...................................................... 29 

2.3.1. 
Работа с заголовками ................................................................................ 29 

2.3.2. 
Вставка абзацев и пустых строк .............................................................. 30 

2.3.3. 
Применение текстовых стилей ................................................................ 31 

2.3.4. 
Выравнивание текста................................................................................ 32 

2.3. 
Списки и ссылки .............................................................................................. 33 

2.4. 
Работа с графикой в HTML ............................................................................ 45 

2.4.1. 
Форматы графических файлов ................................................................ 45 

2.4.2. 
Основы и применение изображений ....................................................... 51 

2.5. 
Управление шрифтами и цветом текста ........................................................ 55 

2.6. 
Таблицы, формы, фреймы .............................................................................. 58 

2.6.1. 
Таблицы ..................................................................................................... 58 

2.6.2. 
Формы ........................................................................................................ 63 

2.6.3. 
Фреймы ...................................................................................................... 75 

2.7. 
Работа со звуком и видео ................................................................................ 87 

2.7.1. 
Звуковые форматы .................................................................................... 87 

2.7.2. 
Применение звуковых файлов ................................................................. 88 

2.7.3. 
Технология RealAudio .............................................................................. 90 

2.7.4. 
Фоновый звук ............................................................................................ 93 

3. 
Технология каскадных таблиц стилей CSS ....................................................... 97 

3.1. 
Применение, наследование и переопределение CSS ................................... 99 

3.1.1. 
Синтаксис таблиц стилей CSS ............................................................... 105 

3.1.2. 
Имя элемента разметки и класса ........................................................... 106 

3.1.3. 
Индентификатор объекта ....................................................................... 108 

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

3.2. 
Блочные и строковые элементы ................................................................... 110 

3.2.1. 
Свойства блоков: margin, padding и border .......................................... 113 

3.2.2. 
Обтекание блока текстом ....................................................................... 122 

3.2.3. 
Цветные границы блоков ....................................................................... 123 

3.3. 
Цвет текста и фона. Применение шрифтов ................................................. 124 

3.3.1. 
Применение font-family .......................................................................... 129 

3.3.2. 
Применение font-size .............................................................................. 131 

3.3.3. 
Назначение font-family ........................................................................... 133 

3.4. 
Текст в CSS ..................................................................................................... 134 

3.4.2. 
Выравнивание текста.............................................................................. 135 

3.4.3. 
Преобразование текста ........................................................................... 137 

3.4.4. 
Красная строка ........................................................................................ 139 

3.4.5. 
Межстрочное расстояние ....................................................................... 140 

3.4.6. 
Основы создания списков ...................................................................... 143 

3.4.7. 
Позиционирование ................................................................................. 146 

3.4.8. 
Координаты и размеры ........................................................................... 148 

4. 
JAVASCRIPT ...................................................................................................... 153 

4.1. 
Основы JavaScript .......................................................................................... 153 

4.1.1. 
Типы и структуры данных ..................................................................... 154 

4.1.2. 
Свойства ................................................................................................... 158 

4.1.3. 
Методы ..................................................................................................... 158 

4.1.4. 
События ................................................................................................... 159 

4.1.5. 
Размещение кода на HTML-странице ................................................... 160 

4.2. 
Классы ............................................................................................................. 164 

4.2.1. 
Объекты JavaScript .................................................................................. 164 

4.2.2. 
Свойства и методы ключевых объектов ............................................... 166 

4.2.3. 
Программирование свойств окна браузера .......................................... 170 

4.3. 
Фреймы и формы ........................................................................................... 182 

4.3.1. 
Фреймы .................................................................................................... 182 

4.3.2. 
Формы ...................................................................................................... 187 

4.4. 
Работа с графикой .......................................................................................... 204 

4.5. 
Создание, редактирование и обработка гиперссылок ............................... 220 

4.5.1. 
Объект URL ............................................................................................. 221 

4.5.2. 
Массивы встроенных гипертекстовых ссылок .................................... 222 

4.5.3. 
Замена атрибута HREF ........................................................................... 223 

4.5.4. 
Изменение части URL ............................................................................ 224 

4.5.5. 
Обработка событий Mouseover и Mouseout ......................................... 224 

4.5.6. 
Схема URL-"javascript:..." ...................................................................... 225 

4.6. 
Массивы .......................................................................................................... 227 

4.6.1. 
Метод join() ............................................................................................. 228 

4.6.2. 
Метод reverse() ........................................................................................ 229 

4.6.3. 
Метод sort() .............................................................................................. 229 

4.7. 
Функции .......................................................................................................... 231 

4.7.1. 
Синтаксис ................................................................................................ 231 

4.7.2. 
Функция-объект ...................................................................................... 237 

4.8. 
События .......................................................................................................... 238 

4.9. 
Операторы условий ....................................................................................... 243 

4.9.1. 
Оператор SWITCH ......................................................................................... 249 

4.10. 
Циклы .............................................................................................................. 251 

4.11. 
Объект Math и String ..................................................................................... 255 

4.11.1. Использование объектов String .................................................................... 257 

4.12. 
Работа с фокусом ........................................................................................... 263 

4.12.1. 
Управление фокусом в окнах ................................................................ 264 

4.12.2. 
Управление фокусом во фреймах ......................................................... 265 

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

 

ВВЕДЕНИЕ 

 

Быстрое развитие сети Интернет привело к появлению массы как литературы 

об Интернет-технологиях, так и различные уроки, размещенные на сайтах. В 

основном авторы рассматривают материал на уровне описания и основных 

возможностей разделов, не углубляясь при этом в детали и важные моменты, 

которые многие забывают. Иногда практически весь материал излагается методом 

«step-by-step» (шаг за шагом), что влечет к сложному усвоению материалов. 

Современное развитие всех подходов основывается на WEB-технологиях. Что 

такое WEB? Web это глобальная гипертекстовая система WWW (World Wide 

Web) для поиска и использования ресурсов Internet, Web-система, WWW-система, 

или «всемирная паутина». Понятие инжиниринг (engineering) это предоставление 

инженерно-консультационных услуг по созданию различных объектов на 

коммерческих условиях. Поэтому основой понятия WEB-инжиниринг является 

изучения методов и способов проектирования различных объектов для 

глобальной гипертекстовой системы WWW с предоставлением инженерно
консультационных услуг. 

В учебном пособии излагаются основы создания web-страниц с помощью 

технологии «клиент-сервер» и их последующего размещения и сопровождения на 

web-серверах. Главной задачей предлагаемого пособия является знакомство 

читателей с практическими вопросами создания, как клиентских приложений 

web-страниц, так и серверных программ.  

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

«чистый» HTML-код, до сложных документов, использующих динамическую 

генерацию содержимого, средства интерактивного общения с пользователем, 

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

В учебном пособии рассматриваются основные компоненты web-дизайна, 

такие как язык гипертекстовой разметки документов – HTML, каскадные таблицы 

стилей – CSS, язык JavaScript, используемый при разработке сценариев, 

выполняемых при создании интерактивных элементов web-страниц. Излагается 

технология применения перечисленных компонентов при построении web-сайтов. 

При этом затрагиваются вопросы формирования концепции развития сайта, 

организации его структуры и системы навигации, а также размещения в сети 

Интернет. 

В учебном пособии подробно рассмотрены с наглядными примерами 

технологии создания, модификации и публикации различной информации в сети 

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

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

Пособие предназначено для студентов вузов, обучающихся по направлению: 

230400.62 – Информационные системы и технологии, и может быть использовано 

при изучении таких дисциплин, как «Интернет-технологии», «WEB-инжиниринг» 

или «Основы WEB-инжиниринга», а также дисциплин специализации, связанных 

с использованием Интернет-технологий.  

1. Основы WEB-проектирования  

 

1.1. 
Основы, цели и правила построения Web-сайта 

 

Информационное проектирование (information design) – это процесс 

организации содержания и представления его в форме, наиболее удобной для 

восприятия целевой аудиторией. 

Для успешного воплощения первоначального замысла необходимо решить 

следующие задачи: 

1.  Определение общей концепции и предназначения Web-сайта. 

2.  Определение категорий потенциальных посетителей Web-сайта. 

3.  Выбор общего стиля (не только визуального) Web-сайта. 

4.  Разработка структуры Web-сайта (с учетом внешних и внутренних ссылок, а 

также возможной последующей модификации). 

5.  Разработка главной страницы (как правило, это «лицо» сайта, посетители 

эту страницу видят первую, и она создает общее впечатление). 

6.  Разработка основных категорий. 

7.  Размещение материалов в сети интернет и регистрация в основных 

поисковых системах. 

8.  Анализ рейтинга и принятие решения о внесении изменений в проект (для 

успешного 
продвижения 
своего 
Web-сайта 
необходимо 
постоянно 

выполнять этот пункт). 

9. Пересмотр ранее принятых решений, относящихся к одному (или ко всем) 

из пунктов с первого по седьмой (как правило, этот пункт применяется, 

если Web-сайт становится не популярный или не конкуретно способный).  

Выбор общей концепции и предназначения материалов влияет на архитектуру, 

информационное наполнение и стилевое оформление сайта. 

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

будущий проект. Учитывая разнообразные и постоянно меняющиеся формы 

представления материалов, задача классификации является достаточно сложной. 

Тем не менее, все сайты можно упорядочить по трем основным признакам: 

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

Объем сайта может меняться от одной страницы до нескольких тысяч и, по 

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

сайт, содержащий достаточно большое количество страниц (примерно, от 500 

страниц), переходит на качественно новый уровень. 

На сегодняшнее время все чаще используется термин – портал, под которым в 

общем случае понимается объединение нескольких тематических направлений. В 

связи с этим объем портала должен существенно превосходить объем сайта. 

Существует и более развернутая трактовка этого термина: портал – это сайт, 

предоставляющий посетителю персонализированную начальную страницу, 

бесплатные услуги электронной почты, новостной и развлекательный сервисы, а 

также поисковый механизм. 

Несмотря на указанные различия в этих понятиях, все они представляют собой 

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

часто в качестве обобщенного термина используют слово «сайт». 

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

более активное участие пользователя в формировании облика документа. Такие 

изменения стали возможны благодаря расширениям HTML и его совместному 

использованию с клиент-серверными технологиями. Причем основная работа по 

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

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

взаимодействия читателя с содержимым страниц. 

Последующее развитие технологии создания Web-сайтов шло по трем 

основным направлениям: 

1) разработка инструментов, которые позволили бы свести к минимуму ручное 

кодирование и одновременно были бы пригодны для выполнения операций по 

сопровождению Web-сайтов; 

2)  перераспределение функций по обеспечению интерактивности страниц 

между сервером и клиентом в сторону последнего; 

3)  расширение диапазона мультимедийных компонентов, включаемых в 

состав публикаций, и упрощение такой интеграции.  

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

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

1. Человеческие потребности обозначают, в частности, потребность быть 

понятым партнером по диалогу. 
Например, 
пользователь хочет иметь 

возможность личного развития или хочет изменить окружение и при этом не 

хочет оказаться ограниченным в своем поведении.  

2. Навыки пользователя состоят из моторных навыков, лингвистических 

навыков, навыков в общении и навыков в решении задач. 

3. Свойства 
личности 
– 
это, 
например, 
творческие 
способности, 

подверженность ошибкам, способность к обучению, терпеливость, устойчивость к 

стрессу и т.д. 

4. Уровень 
компьютерной 
грамотности: 
здесь 
обычно 
различают 

программирующих и непрограммирующих пользователей, а среди последних, в 

свою очередь, выделяют три категории: 

– подготовленные пользователи, решающие творческие задачи, – аналитики и 

исследователи (т.е. пользователи, последовательность действий которых сложно 

формализовать);  

– подготовленные пользователи, выполняющие рутинные операции (т.е. 

пользователи, последовательность действий которых является достаточно 

устойчивой); 

– случайные (или «наивные») пользователи, обладающие минимальным 

уровнем компьютерной грамотности. 

5. Подготовка в прикладной области пользователя влияет на использование 

языка (например, профессиональной терминологии) и применяемые методы 

решения задач. 

6. Причина пользования системой может быть: 

– обязательной как неотъемлемая часть работы;  

– необязательной как дополнительная составляющая профессиональной 

деятельности;  

– обязательной с точки зрения личных потребностей (например, когда 

определенную информацию можно получить только с помощью компьютера);  

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

7. Отношение к системе и ожидания от работы с ней определяются уровнем 

компьютерной грамотности и причиной ее использования; оно может быть 

нейтральным, положительным и негативным. 

8. Целями пользователя могут быть: решить определенную задачу с 

помощью компьютера или научиться работать с системой.  

9. Ограничения во времени: независимо от характеристик системы 

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

времени, исходящим от задачи или контекста работы. 

 

1.2. Разработка стиля, структуры и сопровождения WEB-сайта  

 

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

также стилем изложения его содержания (контента – content) и средствами 

взаимодействия посетителя с этим содержанием. Эти три составляющие 

формируют пользовательский интерфейс. 

Какими же свойствами должен обладать «хороший» интерфейс? 

1.  Естественность. Естественный интерфейс не вынуждает пользователя 

существенно 
изменять 
привычные 
для 
него 
способы 
решения 
задачи. 

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

на странице информация не должна требовать пояснений. 

2.  Согласованность интерфейса должна проявляться в оформлении страниц 

сайта. Речь идет о том, что однотипные элементы на всех страницах должны 

выглядеть одинаково и размещаться в одной и той же позиции. 

3. Дружественность интерфейса. На каждом этапе работы интерфейс должен 

разрешать 
только 
соответствующий 
набор 
действий 
и 
предупреждать 

пользователей о последствиях тех действий, которые могут оказаться для них 

неожиданными или неблагоприятными. Ни в коем случае нельзя умышленно 

обманывать посетителя (например, перейти по рекламе). 

4. Принцип обратной связи. Каждое действие пользователя, посетившего 

ваш сайт, должно получать визуальное, а иногда и звуковое подтверждение того, 

что оно (действие) воспринято системой. Например, общепринятым правилом 

является изменение цвета использованных гиперссылок.  

5. Простота интерфейса. Один из возможных путей обеспечения простоты – 

представление на экране информации, минимально необходимой для определения 

пользователем дальнейшей последовательности действий или для усвоения того, 

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

информация сайта может быть скомпонована таким образом, чтобы очередная ее 

порция умещалась на одном экране.  

Другой путь к созданию простого, но эффективного интерфейса – размещение 

и представление элементов на экране с учетом их смыслового значения и 

логической взаимосвязи. Здесь важную роль играет как пространственная 

компоновка элементов (группирование, выравнивание). 

6. Гибкость 
интерфейса. 
Возможность 
настройки 
пользовательского 

интерфейса является отличительной чертой хорошей программы. Наиболее 

популярным вариантом настройки является возможность выбора языка и способа 

кодировки символов для отображения текстового содержимого страниц. Реже 

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

При разработке структуры сайта целесообразно использовать подход 

«проектирование сверху вниз». Применительно к Web-сайту его суть заключается 

в том, что сначала определяется состав сайта на уровне крупных разделов, 

содержание которых постепенно детализируется и уточняется. В такой же 

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

Хотя обе формы представления структуры узла удобнее разрабатывать 

параллельно, поочередно уточняя и корректируя их, начинать все же лучше с 

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

При 
выборе 
файловой 
структуры 
проекта 
следует 
придерживаться 

определенных правил: 

– взаимосвязанные страницы следует размещать в одной папке; 

– для упорядочения информации внутри больших разделов следует 

использовать вложенные папки;  

– файлы разных типов следует размещать в отдельных папках; например, 

графические файлы – в папке Images, звуковые файлы – в папке Sound и т.п.; 

если таких файлов много, их нужно распределить по вложенным папкам, 

имена которых должны соответствовать наименованиям страниц, где эти 

файлы используются;  

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

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

При выборе оптимального размера страницы определяющим является 

условие, чтобы каждая страница была завершена логической точки зрения. 

Поэтому не следует делить изложение некоторой идеи на несколько страниц, 

чтобы сократить размер каждой из них. Однако при выборе размера документа 

следует учитывать следующие факторы: 

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

браузером;  

– читателю сложнее работать с большим по объему документом: он не может 

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

полосу прокрутки, в то время как переход по ссылкам может оказаться 

значительно эффективнее.  

В то же время чрезмерное увлечение созданием ссылок также может 

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

схема сайта должна предоставлять посетителям возможность – оценить, какая 

информация находится на сайте и насколько быстро можно до нее добраться. 

Находясь на любой странице сайта, посетители должны представлять свое 

местоположение, знать, что они могут сделать на этой странице и куда пойти 

дальше. 

Для выполнения этого условия достаточно соблюдать несколько правил: 

– на главной странице сайта обязательно должна быть представлена карта 

сайта, как в графической, так и текстовой форме;  

– на всех последующих страницах должны присутствовать ссылки на главную 

страницу и/или на первую страницу данного раздела (на которой, в свою 

очередь, должно быть представлено содержание раздела);  

– при использовании рисунков в качестве ссылок они должны быть 

однотипными на всех страницах и располагаться в одной и той же позиции;  

– рисунки, используемые в качестве ссылок, должны быть интуитивно 

различимы для читателей относительно других элементов страницы.  

Хорошо спланированная структура является фундаментом для дальнейшего 

развития сайта. Возможность наращивания информационного наполнения сайта 

без кардинального изменения его структуры называется масштабируемостью 

сайта. Масштабируемость – важное свойство любого сайта: сайт обязательно 

должен развиваться. Кроме того, масштабируемость сайта является одним из 

условий согласованности его интерфейса: после того как посетители уже изучили 

структуру и схему навигации сайта, они будут опираться на это знание во время 

последующих посещений.  

Главная страница должна дать посетителю представление об общей 

направленности сайта, а также о его структуре и способах навигации. 

При выборе способа визуальной компоновки и объема информации на 

странице следует помнить психофизиологические особенности посетителей. 

Например, о том, что человек не способен идентифицировать одновременно более 

пяти – семи видимых предметов, что графическая информация воспринимается