Table Of ContentБ А К А Л А В Р И А Т
САНКТ-ПЕТЕРБУРГСКИЙ ГОСУДАРСТВЕННЫЙ
УНИВЕРСИТЕТ ЭКОНОМИКИ И ФИНАНСОВ
Д.А. Евсеев, В.В. Трофимов
WEB-ДИЗАЙН
В ПРИМЕРАХ И ЗАДАЧАХ
Под редакцией профессора В.В. Трофимова
Рекомендовано УМО по образованию
в области прикладной информатики
в качестве учебного пособия для студентов вузов,
обучающихся по специальности «Прикладная информатика»
и другим экономическим специальностям
КНОРУС • МОСКВА • 2016
УДК 004.738.5(075.8)
ББК 32.973.26-018.1я73
Е25
Рецензенты:
С.Г. Светуньков, заведующий кафедрой экономической кибернетики и ЭММ
Санкт-Петербургского государственного университета экономики и финансов,
д-р экон. наук, проф.,
Е.В. Стельмашонок, проф. Санкт-Петербургского государственного инженерно
экономического университета, д-р экон. наук
Евсеев Д.А.
Е25 Wfeb-дизайн в примерах и задачах : учебное пособие / Д.А. Евсеев,
В.В. Трофимов; под ред. В.В. Трофимова. — М.: КНОРУС, 2016. — 264 с.
ISBN 978-5-406-04803-0
Изложены базовые темы дисциплины, начиная с процесса формирования
заглавной страницы web-узла и заканчивая процедурой его отладки, включая про
ектирование и составление логической схемы сайта. Пособие ориентировано на
изучение основ построения корпоративных и персональных web-узлов. Главные
приемы показаны на примерах.
Для студентов вузов экономических специальностей, изучающих дисциплину
«Информационные системы и технологии в экономике», а также для практиков,
занимающихся проблемами применения информационных технологий в менеджменте,
маркетинге и предпринимательстве.
УДК 004.738.5(075.8)
ББК 32.973.26-018.1я73
Евсеев Дмитрий Андреевич
Трофимов Валерий Владимирович
WEB-ДИЗАЙН В ПРИМЕРАХ И ЗАДАЧАХ
Сертификат соответствия № РОСС RU. АЕ51. Н 16604 от 07.07.2014.
Изд. №9923. Формат 60x90/16.
Гарнитура «Times». Печать офсетная.
Уел. печ. л. 16,5. Уч.-изд. л. 12,1.
ООО «Издательство «КноРус*.
117218. г. Москва, ул. Кедрова, д. 14, корп. 2.
Тел.: 8-495-741-46-28.
E-mail: [email protected] http://www.knonis.ni
Отпечатано в ООО «Контакт».
107150, г. Москва, проезд Подбельского 4-й, дом 3.
© Евсеев Д.А., Трофимов В.В., 2016
ISBN 978-5-406-04803-0 © ООО «Издательство «КноРус», 2016
Оглавление
ПРЕДИСЛОВИЕ..........................................................................................................................7
ВВЕДЕНИЕ...................................................................................................................................8
Как появился Интернет............................................................................................8
Концепция Паутины...............................................................................................11
История Паутины...................................................................................................11
Как это работает....................................................................................................13
Глава 1. ОСНОВНЫЕ ПОЛОЖЕНИЯ.................................................................................14
1.1. Правила языка HTML..........................................................................................15
1.2. Структура HTML-документа...............................................................................16
Комментарии..........................................................................................................16
Общая Заголовочная часть документа <HEAD>..............................................17
Заголовок документа <TITLE>.............................................................................17
Тэги тела документа..............................................................................................17
Тело документа <BODY>......................................................................................17
Практическая работа.........................................................................................18
Глава 2. БАЗОВЫЙ HTML...................................................................................................19
Регистр записи команд.........................................................................................19
Esca ре-последовательности................................................................................19
Перевод строки, пробелы, табуляция................................................................20
Тэг абзаца <Р>.......................................................................................................20
Тэг предформатированного текста <PRE>.......................................................21
Разрыв строки <BR>..............................................................................................22
Неразрывная строка <NOBR>..............................................................................22
Цитата <BLOCKQUOTE>......................................................................................22
2.1. Форматирование текста....................................................................................23
Физические стили...................................................................................................23
Практическая работа.........................................................................................25
Задание...................................................................................................................31
Логические тэги......................................................................................................31
Уровни заголовков <Нх>.......................................................................................32
Практическая работа.........................................................................................33
2.2. Тэги списков.........................................................................................................34
Нумерованные списки..........................................................................................35
Маркированные списки.........................................................................................35
Список определений..............................................................................................37
Горизонтальная линия..........................................................................................38
Практическая работа.........................................................................................38
Задание...................................................................................................................41
2.3. Графика HTML-документа.................................................................................42
Выбор формата графического файла................................................................42
Скорость передачи................................................................................................43
4 Оглавление
Цвета.......................................................................................................................43
Потери при сжатии.................................................................................................44
Поддержка программами просмотра..................................................................44
Вставка изображения в документ.......................................................................46
Выравнивание текста по краю изображения....................................................48
Позиционирование изображения на странице.................................................49
Указание размеров выводимого изображения.................................................50
Уменьшение масштаба........................................................................................51
Увеличение масштаба..........................................................................................51
Альтернативное описание изображения............................................................52
Отделение изображения от текста.....................................................................53
Практическая работа.........................................................................................55
Задание...................................................................................................................59
2.4. HTML-таблицы......................................................................................................59
Основные тэги таблицы........................................................................................59
Основные атрибуты таблицы...............................................................................60
Таблицы с рамками и без рамок.........................................................................61
Объединение ячеек...............................................................................................62
Включение в таблицу изображения и списка....................................................65
Практическая работа.........................................................................................66
Задание...................................................................................................................69
Практическая работа.........................................................................................70
Задание 1.................................................................................................................85
Задание 2.................................................................................................................86
Задание 3.................................................................................................................87
Глава 3. ГИПЕРТЕКСТОВЫЕ ССЫЛКИ............................................................................88
3.1. Универсальный адрес (URL).............................................................................88
3.2. Структура ссылок в HTML-документе............................................................90
Ссылки на метки внутри документа....................................................................90
3.3. Структура web-узла.............................................................................................91
Базовые структуры................................................................................................91
3.4. Навигация по узлу...............................................................................................95
Практическая работа.........................................................................................95
Задание.................................................................................................................105
Глава 4. HTML-ФОРМЫ.....................................................................................................106
4.1. Тэги формы.........................................................................................................107
4.2. Выпадающие списки........................................................................................109
Глава 5. КАСКАДНЫЕ ТАБЛИЦЫ СТИЛЕЙ..................................................................111
5.1. Базовые понятия...............................................................................................111
Единицы измерения значений...........................................................................112
Процентное выражение......................................................................................114
Обозначение цвета..............................................................................................114
URL........................................................................................................................115
Включение в HTML..............................................................................................116
Оглавление 5
Группирование ........................................................................ 117
Наследование......................................................................... 117
Класс в качестве селектора.................................................. 118
ID в качестве селектора........................................................ 119
Контекстные селекторы......................................................... 119
Комментарии........................................................................... 121
Псевдоклассы и псевдоэлементы................................... 121
Псевдоклассы ссылок............................................................. 121
Типографские псевдоэлементы............................................ 122
Псевдоэлементы в селекторах............................................. 125
Множество псевдоэлементов............................................... 125
Каскадирование.................................................................... 126
Модульная структура.............................................................. 126
Баланс «автор/читатель»...................................................... 127
Порядок каскадирования....................................................... 127
Свойства стилей................................................................... 129
Свойства background.............................................................. 131
Обрамление элементов........................................................ 134
Свойства списков.................................................................... 139
Свойства текста...................................................................... 141
Группирование свойств..................................................... 146
Группы стилей HTML............................................................. 146
Почему таблицы стилей HTML называются каскадными 148
О браузерах, не поддерживающих таблицы стилей....... 149
Практическая работа.......................................................... 149
Задания..................................................................................... .166
ФРЕЙМОВЫЕ СТРУКТУРЫ................................................. .172
Синтаксис фреймов............................................................ 172
Зарезервированные имена фреймов.................................. 175
Дополнительные атрибуты фреймов.................................. 176
Задание 1.................................................................................. .179
Структура гиперссылок для фреймовых структур .... 180
Задание 2.................................................................................. .181
Задание 3................................................................................. .182
СОЗДАНИЕ КАРТЫ ИЗОБРАЖЕНИЙ................................ .183
Когда нужно использовать изображение-карту................ .183
Когда не нужно использовать изображение-карту.......... .183
Практическая работа.......................................................... .186
Задание ................................................................................... .192
ПОНЯТИЕ WEB-САЙТА НА ОСНОВЕ АНАЛОГИЙ........ .193
Аналогия с живым организмом............................................ .193
Аналогия с миром насекомых.............................................. .193
Аналогия с транспортными сетями..................................... .193
Аналогия с ткацким станком................................................. .193
6 Оглавление
8.1. Место web-сайта в WWW.................................................................................194
8.2. Внутренняя структура web-сайта..................................................................194
Сложный сайт.......................................................................................................194
Простой сайт........................................................................................................196
Web-страница.......................................................................................................196
Глава 9. СТРУКТУРА УЗЛА И СИСТЕМА НАВИГАЦИИ.............................................197
Навигация по узлу................................................................................................197
9.1. Организация домашней страницы................................................................197
Принципы построения системы навигации.....................................................198
Советы по графическому дизайну узла..........................................................199
9.2. Необходимые программные инструменты................................................201
Web-браузеры......................................................................................................202
Выбор редактора.................................................................................................202
Управление файлами при помощи FTP...........................................................203
Инструменты валидации....................................................................................203
Программы для работы с растровым изображением...................................204
Программы для работы с векторным изображением...................................204
Утилиты web-анимации......................................................................................204
Утилиты для захвата изображения на экране................................................205
Программы для защиты и безопасности..........................................................205
ПРИЛОЖЕНИЯ.......................................................................................................................207
1. Краткий справочник HTML..............................................................................207
2. Краткий справочник по свойствам CSS......................................................228
Свойства шрифта................................................................................................228
Цветовая гамма...................................................................................................229
Свойства фона.....................................................................................................231
Свойства текста...................................................................................................232
Свойства рамок....................................................................................................232
Классификации....................................................................................................235
Позиционирование и отображение...................................................................235
Единицы измерения.............................................................................................237
ГЛОССАРИЙ...........................................................................................................................238
Предисловие
Любой информационный ресурс, опубликованный в Интернете (начиная от глобаль
ного информационного портала с десятками тысяч посетителей в день, например,
http://www.yandex.ru или http://www.google.com, до скромной домашней странички,
на которую заходят всего два-три человека в месяц, включая ее автора, например,
http://tvv.narod.ru), — это художественное произведение, сложный комплекс инже
нерно-дизайнерских решений. Процесс создания такого произведения и называется
web-дизайном.
Предлагаемое вашему вниманию учебное пособие «Web-дизайн в примерах и зада
чах» позволит вам самостоятельно освоить приемы проектирования и публикации
в Интернете как персональных страниц, так и сайтов организаций, и предназначено
для студентов специальности 080801 «Прикладная информатика в экономике», изу
чающих дисциплину «Разработка web-представительств и систем электронной ком
мерции», а также студентов экономических специальностей, изучающих дисциплину
«Информационные системы и технологии в экономике». Данное учебное пособие ори
ентировано на изучение студентами основ построения корпоративных и персональ
ных web-узлов. В учебном пособии изложены все основные приемы и технологии,
применяемые для создания web-узлов и контролирования хода их отладки. Все ос
новные приемы проиллюстрированы на большом количестве примеров. Излагаются
все базовые темы дисциплины, начиная с процесса формирования заглавной страни
цы, продолжая проектированием и составлением логической схемы сайта и заканчи
вая процедурами отладки.
Все положения, приведенные в пособии, сопровождаются примерами, что дает воз
можность на практике закрепить весь излагаемый теоретический материал. Исходные
данные для всех примеров размещены на сайте http://www.tvvlibrary.narod.ru/books/
2009/cont_09_tv.htm
Материалы, включенные в данное пособие, были собраны, опробованы и откоррек
тированы в течение четырех лет преподавания дисциплины «Web-дизайн» для сту
дентов специальности 080801 «Прикладная информатика в экономике», обучающих
ся в Санкт-Петербургском университете экономики и финансов на кафедре информа
тики. Изучив эту дисциплину на втором курсе, наши студенты смогли организовать
свою учебную фирму «Web-строй», которая в течение только последних двух лет
разработала и поддерживает в эксплуатации более 10 сайтов кафедр и подразделений
университета, среди которых есть три сайта нашей кафедры (http://itec.finec.ru,
http://itib.finec.ru, http://pm.finec.ru) и сайт факультета (http://ritmm.finec.ru).
Web-дизайн — это творчество, причем творчество ярко выраженное. В сфере web-
дизайна можно полностью проявить все свои способности, так как цензором резуль
татов вашего труда являетесь вы сами и посетители вашей странички. Вы не ограни
чены ни в объеме, ни в содержании, ни в компоновке разрабатываемого вами ресур
са, никто не загоняет вас в какие-либо жесткие рамки. Творите, и рано или поздно
созданный вами проект найдет заслуженное признание многомиллионной аудитории
пользователей Интернета.
Введение
Как появился Интернет
История рождения большинства великих изобретений во многом сходна: люди пы
таются открыть что-то скучное и неинтересное, а в результате получается нечто
весьма забавное. Например, они хотели создать эффективный источник энергии, ко
торый заменил бы уголь и пар, а придумали атомную бомбу. Один чудак старался
изобрести средство от поноса, а вышла пепси-кола. Практически то же произошло и с
Интернетом.
В конце далеких семидесятых годов Министерство обороны США задалось идеей
создать электронную сеть, с помощью которой компьютеры военных штабов
и командных пунктов могли бы успешно обмениваться информацией в случае бом
бардировки указанных объектов русскими атомными ракетами. Коммуникации, про
ложенные между бункерами, должны были, по замыслу министров, выдержать на
воднения, цунами, землетрясения, ураганы, прямые попадания метеоритов и другие
неприятные погодные явления. Сеть была спроектирована, исходя из принципа ма
лой надежности, то есть таким образом, что продолжала бы исправно перекачивать
информацию между компьютерами, даже когда отдельные ее участки могли неожи
данно исчезнуть. Исследования, проведенные в рамках этого проекта, были профи
нансированы Управлением перспективных научных разработок США (Advanced
Research Project Agency, ARPA), и в 1968 году такая система была создана. В честь
«спонсоров», вложивших весьма внушительный капитал в развитие первой в мире
полнофункциональной вычислительной сети, ей дали краткое и звучное название
ARPAnet.
Возникновение данной электронной сети осталось бы незамеченным, или этот факт
забылся бы со временем, если бы не несколько концептуальных особенностей, зало
женных в ее проект. Во-первых, все компьютеры, входящие в сеть, общались между
собой «на равных», то есть в ARPAnet не существовало структуры «главный компь
ютер — подчиненный компьютер». Во-вторых, в качестве основного сетевого прото
кола ARPAnet был принят межсетевой протокол IP.
ПРИМЕЧАНИЕ
Сетевым протоколом называется согласованный и утвержденный стандарт, содер
жащий описание правил приема и передачи между двумя компьютерами команд,
текста, графики, иных данных и служащий для синхронизации работы нескольких
вычислительных машин в сети.
Другими словами, межсетевой протокол — это некий «свод законов для компьюте
ров», набор правил, позволяющий нескольким машинам обмениваться данными по
средством сетевых коммуникаций. Именно протокол IP стал впоследствии главным
протоколом Всемирной сети Интернет.
Межсетевой протокол IP (Internet Protocol) является универсальным кроссплатфор-
менным стандартом, позволяющим объединять в сеть разнородные вычислительные
машины, работающие под управлением различных операционных систем. Важно
Введение 9
лишь, чтобы все эти системы поддерживали протокол IP. О принципах передачи дан
ных на основе указанного протокола мы подробно побеседуем позднее, а пока вер
немся к истории создания Интернета.
В начале восьмидесятых годов Национальный научный фонд США (National Science
Foundation) создал пять локальных сетей, соединив в единый комплекс их централь
ные компьютеры — сетевые рабочие станции. Эти системы, как и ARPAnet, исполь
зовали протокол обмена данными IP. Согласно заложенной в данный проект идее
планировалось объединить большинство американских исследовательских центров
в глобальную информационную систему, создав своеобразную «сеть сетей»
(Internetwork, сокращенно — Internet). Эта система должна была содержать самую
свежую, постоянно обновляющуюся информацию о научных исследованиях изыска
тельских учреждений США. По замыслу Национального научного фонда, появление
такой сети позволило бы большинству исследовательских институтов Америки иметь
быстрый доступ к самым современным разработкам ученых. А вот получилось
из этой идеи совсем не то, что планировали ее авторы.
Многочисленные коммерческие организации, имеющие к науке отношение весьма
далекое, в духе времени стали создавать собственные локальные сети, связывавшие
между собой, например, отдел продаж, приемную совета директоров и бухгалтерию.
Это было очень удобно: информация передавалась через коммуникационные линии
мгновенно и практически никогда не терялась. Ученые же встали перед сложной
проблемой: соединять в сеть университеты, находящиеся в разных штатах, было
слишком разорительно — чересчур много специального кабеля пришлось бы проло
жить под землей (к тому времени обычные телефонные линии уже не обеспечивали
должной скорости передачи данных). Пришлось, умерив гордыню, идти к ком
мерсантам с предложением соединить между собой ближайшие, расположенные
в соседних домах локальные сети, связав проводом сетевые станции подсетей двух
фирм. При такой схеме информация могла бы передаваться от одного компьютера
к другому через ближайших соседей. Коммерсанты с радостью согласились —
не могли же они упустить уникальную возможность обмениваться документами
и биржевыми котировками с партнерами в других городах, причем по цене платы
за электроэнергию! Связь быстро была установлена. Кто-то соединил кабелем ком
пьютер, расположенный в США, с сетевой станцией в Канаде, к которой, в свою оче
редь, стали подключаться местные локальные сети. С появлением специализирован
ных спутников открылась возможность ретранслировать информационный сигнал
через океан, благодаря чему вскоре была налажена связь с одним из европейских
университетов, с которым соединилась пара сотен местных локальных систем...
Секретарю одной фирмы, до безумия обожавшему комиксы, внезапно пришло
в голову разместить на своем сетевом компьютере их электронную подшивку
за несколько лет, бухгалтер другой конторы выложил в сеть фотографии из своего
любимого кинофильма, доступ к которым получили все пользователи этой глобаль
ной информационной системы. И вскоре ученые, схватившись за голову, обнаружи
ли, что их научно-исследовательская электронная сеть превратилась в нечто невооб
разимое. Вместо файлов с отчетами о брачных повадках африканских страусов они
получили потоки информации о состоянии дел на австралийской валютной бирже,
обмен электронными пакетами с изображениями обнаженных поп-звезд и рецептами
приготовления русского самогона. Инженер из Нью-Йорка признавался в любви
журналистке из Берлина, а пятеро студентов Калифорнийского университета и аспи
10 Введение
рант парижского колледжа самозабвенно резались в DOOM на институтской сетевой
машине... Ученые получили Интернет.
Тем временем Международная организация по стандартизации (Organization for
International Standardization, ISO) стала разрабатывать сетевой протокол, который
позволил бы «увязать» между собой все компьютеры в разных частях света. Однако
пока ISO в муках рождала новый стандарт, пользователи прекрасно договорились
между собой сами и установили на своих машинах программное обеспечение, под
держивающее IP. На этом протоколе Интернет работает до сих пор.
К концу восьмидесятых годов совершенствование настольных персональных компью
теров и их удешевление привело к тому, что частные пользователи получили возмож
ность осуществлять связь с Интернетом по коммутируемым телефонным каналам по
средством модемов — устройств, преобразующих цифровой поток информации
от компьютера в аналоговый звуковой сигнал и выдающих его в обычную телефонную
линию. На другом конце модем принимающего компьютера трансформирует звуковой
сигнал в цифровой. Каждый модем является как приемником, так и передатчиком ин
формации.
ПРИМЕЧАНИЕ
Единица измерения скорости связи между двумя компьютерами bps (bitper secund)
определяется количеством бит передаваемой информации в секунду.
Неуклонный рост подключающихся к Интернету частных пользователей и корпора
тивных сетей не мог не отразиться на работоспособности системы в целом. Настал
момент, когда любители DOOM и самогона перегрузили-таки большинство сетевых
узлов. Фирма Merit Network Inc., получившая в 1987 году счастливое право на управ
ление и контроль за аппаратными средствами Интернета, попросту заменила часть
коммутационных линий и сетевых станций на более современные, что позволило
повысить суммарный трафик Сети более чем в 20 раз.
ПРИМЕЧАНИЕ
Трафиком называется общий суммарный ноток информации через один — сетевой
компьютер.
ПРИМЕЧАНИЕ
Сетевой узел — по включенная в Интернет машина, когорая объединяет несколько
локальных сетей, использующих один сетевой протокол.
Совершенствование и развитие Всемирной сети происходит непрерывно, причем
осуществляют его, как правило, сами владельцы локальных сетей, составляющих
Интернет.
Сейчас подключиться к Интернету может каждый, с любого компьютера, на котором
установлено необходимое программное обеспечение и который соединен через мо
дем с коммутируемой телефонной линией, из офиса какой-либо организации и даже
из собственного дома. Причем пользователю совершенно не обязательно знать, как
устроена Сеть, как она работает. Он просто включает компьютер и пользуется Ин
тернетом.
