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 раз. ПРИМЕЧАНИЕ Трафиком называется общий суммарный ноток информации через один — сетевой компьютер. ПРИМЕЧАНИЕ Сетевой узел — по включенная в Интернет машина, когорая объединяет несколько локальных сетей, использующих один сетевой протокол. Совершенствование и развитие Всемирной сети происходит непрерывно, причем осуществляют его, как правило, сами владельцы локальных сетей, составляющих Интернет. Сейчас подключиться к Интернету может каждый, с любого компьютера, на котором установлено необходимое программное обеспечение и который соединен через мо дем с коммутируемой телефонной линией, из офиса какой-либо организации и даже из собственного дома. Причем пользователю совершенно не обязательно знать, как устроена Сеть, как она работает. Он просто включает компьютер и пользуется Ин тернетом.