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. Подготовка в прикладной области пользователя влияет на использование 

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

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