МИНОБРНАУКИ РОССИИ Федеральное государственное бюджетное образовательное учреждение высшего профессионального образования «Омский государственный технический университет» Т. В. Макарова ВЕБ-ДИЗАЙН Допущено Учебно-методическим объединением вузов Российской Федерации по университетскому политехническому образованию в качестве учебного пособия для студентов высших учебных заведений, обучающихся по направлению подготовки бакалавра 09.03.02 «Информационные системы и технологии» Омск Издательство ОмГТУ 2015 УДК 658.512.23:004.4(075) ББК 30.18+32.81я73 М15 Рецензенты: Д. А. Хворостов, д-р пед. наук, профессор, ОГУ; Е. А. Сидорова, д-р техн. наук, доцент, ОмГУПС Макарова, Т. <...> ISBN 978-5-8149-2075-1 Рассмотрены теоретические вопросы: гипертекстовый способ представления информации в компьютерной сети; основные принципы визуального дизайна веб-страниц; разработка концепции, структуры, макета, сайта; анализ юзабилити. <...> Изложены практические вопросы верстки вебстраниц с использованием HTML и CSS, представленные в виде комплекса учебных работ. <...> Использование табличных структур для верстки веб-страницы . <...> Стилевое оформление веб-страницы с использованием CSS . <...> 142 3 ВВЕДЕНИЕ За бурным ростом веб-технологий, обеспечивающих гипертекстовое представление и быструю передачу значительных объемов текстово-графических данных, последовало столь же стремительное развитие сферы обеспечения эстетики предъявляемой пользователям веб-сети информации и появилось новое направление профессиональной деятельности – веб-дизайн. <...> В понятии «веб-дизайн» отчетливо определены две его составляющие: «веб» (русифицированное от англ. «web» – сеть, паутина) – ключевое слово в выражении World Wide Web, которое является названием основной службы Интернета, обеспечивающей поиск и просмотр гипертекстовых документов; и «дизайн» (от англ. «design» – проектировать, создавать, конструировать) – деятельность по проектированию эстетических свойств изделия с учетом его <...>
Веб_–дизайн.pdf
УДК 658.512.23:004.4(075)
ББК 30.18+32.81я73
М15
Рецензенты:
Д. А. Хворостов, д-р пед. наук, профессор, ОГУ;
Е. А. Сидорова, д-р техн. наук, доцент, ОмГУПС
Макарова, Т. В.
М15
Веб-дизайн : учеб. пособие / Т. В. Макарова ; Минобрнауки России,
ОмГТУ. – Омск : Изд-во ОмГТУ, 2015.– 148 с. : ил.
ISBN 978-5-8149-2075-1
Рассмотрены теоретические вопросы: гипертекстовый способ представления
информации в компьютерной сети; основные принципы визуального
дизайна веб-страниц; разработка концепции, структуры, макета,
сайта; анализ юзабилити. Изложены практические вопросы верстки вебстраниц
с использованием HTML и CSS, представленные в виде комплекса
учебных работ.
Предназначено для студентов, обучающихся по направлению «Информационные
системы и технологии», профиль «Информационные
технологии в медиаиндустрии». Отдельные главы пособия могут использоваться
для обучения студентов направления «Дизайн».
УДК 658.512.23:004.4(075)
ББК 30.18+32.81я73
ISBN 978-5-8149-2075-1
2
© ОмГТУ, 2015
Стр.2
ОГЛАВЛЕНИЕ
ВВЕДЕНИЕ ................................................................................................................. 4
1. ОБЩИЕ СВЕДЕНИЯ О ГИПЕРТЕКСТОВЫХ СИСТЕМАХ ........................... 6
1.1. Гипертекст. Топология гипертекстовых систем .......................................... 6
1.2. Виды веб-сайтов ............................................................................................ 11
1.3. Этапы разработки веб-сайта компании (жизненный цикл) ...................... 25
2. ОСНОВЫ ВИЗУАЛЬНОГО ДИЗАЙНА ВЕБ-РЕСУРСОВ ............................. 39
2.1. Основные принципы дизайна ...................................................................... 39
2.2. Верстка веб-страниц ..................................................................................... 49
2.3. Адаптивный дизайн сайтов .......................................................................... 55
2.4. Основные аспекты улучшения качества веб-ресурса (юзабилити) ......... 62
2.5. Основные тенденции и тренды современного веб-дизайна ..................... 70
3. ПРАКТИКУМ: ОСНОВЫ HTML И CSS В ВЕБ-ДИЗАЙНЕ .......................... 76
3.1. Основные разделы HTML-документа. Описание раздела body ............... 77
3.2. Форматирование текста в HTML ................................................................ 86
3.3. Организация гиперссылок ........................................................................... 94
3.4. Добавление графики на веб-страницу. Особенности веб-графики ......... 97
3.5. Метаданные веб-документов ..................................................................... 107
3.6. Организация таблиц. Использование табличных структур
для верстки веб-страницы .......................................................................... 113
3.7. Вложенные таблицы. Табличная верстка веб-страниц ........................... 117
3.8. Добавление мультимедиа на страницу ...................................................... 122
3.9. Стилевое оформление веб-страницы с использованием CSS ................. 127
3.10. Текстовые блоки. Верстка веб-страницы блоками
...................... 132
3.11. Проверка валидности HTML- и CSS-кода веб-страниц ........................ 137
БИБЛИОГРАФИЧЕСКИЙ СПИСОК ................................................................... 141
ПРИЛОЖЕНИЯ ....................................................................................................... 142
3
Стр.3