Веб-проектирование

А.А. БАРКОВИЧ
Т.А. ФИЛИМОНОВА
ВЕБ-ПРОЕКТИРОВАНИЕ
УЧЕБНОЕ ПОСОБИЕ
Москва
ИНФРА-М
2025

УДК  004.774.6(075.8)
ББК  32.973:16.263.434я73
	
Б25
Р е ц е н з е н т ы:
Куликович В.И., кандидат филологических наук, доцент, заведую-
щий кафедрой редакционно-издательских технологий Белорусского 
государственного технологического университета;
Левчук В.Д., кандидат технических наук, доцент, доцент кафедры 
программного обеспечения информационных технологий Белорусского государственного университета информатики и радиоэлектроники
Баркович А.А.
Б25	 	
Веб-проектирование : учебное пособие / А.А. Баркович, Т.А. Филимонова. — Москва : ИНФРА-М, 2025. — 231 с. — (Высшее образование). — DOI 10.12737/2116156.
ISBN 978-5-16-019399-1 (print)
ISBN 978-5-16-112052-1 (online)
Учебное пособие охватывает важные аспекты веб-проектирования и позволяет приобрести профессиональную компетенцию в сфере создания 

и развития веб-ресурсов. Особенностями данного пособия являются его 
универсальность и адаптивность. Лаконично представлены все необходимые базовые сведения и системно изложен подробный практико-ориентированный материал с необходимыми пояснениями. Будет полезным как 
уже обладающим определенным опытом в сфере информационных технологий специалистам, так и новичкам. Позволяет осваивать проблемную 
область как под руководством преподавателя, так и самостоятельно.
Для студентов учреждений высшего образования технического и гуманитарного профилей, изучающих учебные дисциплины, связанные с проблематикой информационного обслуживания и веб-дизайна.
УДК  004.774.6(075.8)
ББК  32.973:16.263.434я73
Данная книга доступна в цветном -
исполнении 
в электронно-библиотечной системе Znanium
©  Баркович А.А., 
ISBN 978-5-16-019399-1 (print)
ISBN 978-5-16-112052-1 (online)
Филимонова Т.А., 2024

Предисловие
Данное пособие охватывает ключевые аспекты веб-проектирования. Соответствующая практика постепенно актуализируется как 
базовая компетенция для широкого круга специалистов, занятых 
в сфере информационных технологий и современной коммуникации. 
Характерной особенностью развития современной информационнокоммуникационной среды является ее интердисциплинарность, 
-
обусловливающая спрос на специалистов самого разного профиля. 
Уже сложно представить перспективы профессионального совершенствования инженера, не имеющего представления об искусственных 
языках, или дизайнера, не владеющего навыками программирования.
В данном пособии реализовано стремление обеспечить будущих 
специалистов, работающих в сфере компьютерно-опосредованной 
коммуникации, компактным и практичным учебником. Конечно, 
представленный здесь материал может быть изложен более пространно и подробно. Однако опыт показывает, что знания в этой 
сфере зачастую устаревают раньше, чем осваиваются в полном 
объеме, и намного важнее приобрести комплексные навыки их применения, что позволит в дальнейшем совершенствовать компетенцию 
в режиме реального времени. Именно по этой причине в пособии 
большое внимание уделено синтезу практико-ориентированного 
материала и отработке приобретенных умений.
Важной особенностью данного пособия является его универсальность. С ним могут начинать работать как уже обладающие определенным опытом в сфере информационных технологий специалисты, 
так и новички. Здесь, в том числе, лаконично представлены все необходимые базовые сведения. Данное пособие также позволяет осваивать проблемную область как под руководством преподавателя, так 
и самостоятельно.
Вашему вниманию представляется своего рода квинтэссенция 
многолетнего опыта преподавания дисциплин циклов «Информационное обслуживание» и «Веб-дизайн». Авторы надеются, что его 
освоение поможет обучающимся стать профессиональными участниками весьма востребованной и развивающейся сферы информационных технологий. Эта сфера уже стала доминирующей на рынке 
труда и спрос на обладающих знаниями и опытом специалистов 
по веб-дизайну постоянно растет. Нет сомнений, что обучающиеся, 
нацеленные на освоение непростой, но очень интересной и нужной 
компетенции веб-проектирования найдут свое рабочее место и сегодня, и завтра, и послезавтра.
3

Глава 1.
ВЕБ-ПРОЕКТИРОВАНИЕ В ОБЕСПЕЧЕНИИ 
КОММУНИКАЦИИ
1.1. ВЕБ КАК КОММУНИКАЦИОННАЯ СРЕДА
Становление и развитие «Веба», или «Всемирной паутины» (англ. 
World Wide Web, WWW), тесно связано с историей целого ряда коммуникационных феноменов, вошедших в обиход приблизительно 
с 40-х годов 20-го столетия. Появление информационных технологий 
было обусловлено созданием таких практических инструментов, 
как компьютер, и теоретическим прогрессом таких наук, как кибернетика. Сам сетевой формат коммуникации буквально открыл 
новую главу в истории человеческой коммуникации. И сегодня рукописные письма и напечатанные на пишущей машинке тексты уже 
воспринимаются как анахронизм. А традиционная почта постепенно 
осваивает смежные социальные сферы — пересылка корреспонденции 
в конвертах уже ретро. Так или иначе, веб-технологии создали новое 
качество человеческой цивилизации.
Исключительно востребованный и привычный, как воздух, Веб 
не особенно интересен огромному количеству пользующихся им 
людей. Мало кто задумывается: кто же автор, собственник или распорядитель этого «нашего» достояния. Действительно, зачем это знать, 
если все и так работает. Однако, став общеизвестным в новейшие 
времена, Веб до сих пор не полностью прозрачен и феноменологически, и технологически.
А между тем история развития Веба не менее насыщена, чем его 
нынешние будни. Первая успешная «…дистанционная передача информации с помощью компьютеров произошла еще 29 октября 1969 г. 
в 22.30 между Калифорнийским университетом и Стенфордским 
исследовательским центром в США: Чарльзу Клайну (Charles Kline) 
и Уильяму Дювалю (William Duvall) удалась передача двух первых 
букв слова login (англ. «начало сеанса»). Первая коммуникация, опосредованная компьютером, была не очень содержательной: LO. Однако 
начало было положено»1. Впрочем, та сеть называлась ARPANET. 
Был ли это уже Веб? Конечно, нет: событие знаковое, но масштаб 
1	
Баркович А.А. Интернет-дискурс: компьютерно-опосредованная коммуникация. Москва. 2015. 288 с.
4

не тот и атрибуты другие. Хотя, тем самым, в 1969 г. точно «родилась» компьютерно-опосредованная коммуникация. Правда, сам 
термин computer-mediated communication (англ. «компьютерно-опосредованная коммуникация») был предложен Наоми Бэрон лишь 
в 1984 г. — через 15 лет.
Тем не менее 20 лет спустя, в 1989 г. Веб все-таки стал реальностью. Если обратиться к первоисточникам — согласно официальной информации научного центра CERN, где Всемирная паутина 
создавалась: «Британский физик Тим Бернерс-Ли изобрел Всемирную паутину в ЦЕРНе в 1989 г.».1 ЦЕРН — Conseil Européen pour 
la Recherche Nucléaire (франц. «Европейская организация по ядерным 
исследованиям»). И «…первая веб-страница была размещена в сети 
на Рождество 1990 г., а с 30 апреля 1993 г. доступ ко Всемирной паутине стал бесплатным. Но кажется, что это произошло уже очень 
давно, — настолько появление глобальной коммуникационной сети 
ускорило темп жизни»2.
Одно из распространенных в данной связи заблуждений это то, 
что Веб и Интернет — одно и то же. В чем-то эти феномены, конечно, 
похожи: например, как комуникационные сети. Однако Интернет — 
сугубо коммерческий проект, которым с разрешения правительства 
США распоряжается компания ICANN. Вебом, или Всемирной паутиной, управляет консорциум WWW, и с 30 апреля 1993 г. доступ 
к Всемирной паутине стал бесплатным. И, сколько бы ни писали 
в Интернете, что Интернет важнее и появился чуть ли не в 1983 г., 
факты говорят о том, что «Интернет» кристаллизовался позже 
«Веба» (Всемирной паутины) — официально был оформлен в 1998 г. 
Впрочем, это отдельная история.
На практике, архитектуры Всемирной паутины и Интернета взаимозависимы, однако для кодировки в них используются разные 
языки: HTML — во Всемирной паутине и HTTP — в Интернете. 
HTML — HyperText Markup Language — (англ. «язык гипертекстовой 
разметки»). HTTP — HyperText Transfer Protocol (англ. «протокол передачи гипертекста»). То, что HTTP официально «протокол» — обычная 
лингвистическая формальность. HTTP — особый набор знаков, код, 
а следовательно, и — язык.
Кстати, создавая Всемирную паутину, Т. Бернерс-Ли изобрел, 
главным образом, язык HTML. Изобрел, конечно, «не с нуля», ведь 
HTML оказался «диалектом» SGML — (англ. Standard Generalized 
1	
Cern. URL: http://info.cern.ch.
2	
Баркович А.А. Там же.
5

Markup Language — «стандартный обобщенный язык разметки»). 
Правда, в дискретном мире искусственных языков диалектов не бывает — это оказался уже другой новый язык. В свою очередь, SGML — 
реинкарнация разработанного в 1969 г. компанией IBM языка GML 
(англ. Generalized Markup Language — «обобщенный язык разметки»), 
который использовался в машиночитаемых документах и космических проектах.
Итак, Веб, или Всемирная паутина, — глобальная коммуникационная сеть, использующая кодировку HTML. Сегодня Веб — популярный сервис сети Интернет. Пространство Всемирной паутины 
образуют гипертекстовые документы, называемые веб-сайтами. Гипертекстовый документ такого рода, или веб-сайт, в свою очередь, 
содержит гиперссылки, тексты, графику, звуковое сопровождение, 
анимацию и другие мультимедийные объекты. Гиперссылка — элемент гипертекста, обеспечивающий переход к определенной части 
данного гипертекста или иному объекту сети. Гиперссылки обеспечивают переход к какому-либо элементу веб-страницы или переход 
на другую веб-страницу. Функциональность современной Всемирной 
паутины обеспечена миллионами веб-серверов. Сервер — компьютерная система, выполняющая функции по обеспечению функционирования сети.
Собственно, сегодня никого не нужно убеждать в преимуществах 
сетевого формата. Мир вокруг нас все более и более зависим от корректной работы информационно-компьютерных ресурсов. И, если 
раньше отношение к созданию и совершенствованию коммуникационных сетей имел небольшой круг специалистов, сегодня такого 
рода компетенции востребованы весьма широко. В данной связи Веб 
и связанные с ним знания — не только хобби или учебный материал, 
но и профессионально-необходимый базис рабочих навыков.
1.2. ВЕБ-ПРОЕКТИРОВАНИЕ КАК ДЕЯТЕЛЬНОСТЬ
Веб не является застывшим во времени и пространстве памятником. Заложенный в нем потенциал позволяет его постоянно совершенствовать. Это по-прежнему общедоступный и универсальный инструментарий, позволяющий широкому кругу пользователей успешно 
решать коммуникационные задачи. Собственно, так и задумывалось 
Т. Бернерсом-Ли, о чем он написал в книге «Плетя паутину: истоки 
и будущее Всемирной паутины» (англ. Weaving the Web: Origins and 
Future of the World Wide Web): «Каждый должен иметь возможность 
размещать собственные гиперссылки на общедоступную информацию 
6

и сопровождать их информацией для себя. Каждый должен иметь 
возможность приватно аннотировать как отдельные ссылки, так и их 
комбинации»1. То есть, Веб изначально задумывался как сеть с равноправными узлами. Однако, это не помешало созданию на его базе 
коммерчески успешных иерархических сетей, таких как Интернет. 
Конечно, суровая действительность внесла существенные коррективы 
в теоретические построения создателя Всемирной паутины: наряду 
с прогрессивными идеями Веб отражает противоречивое и не всегда 
совершенное содержание социальной практики.
Впрочем, все эти творческие разногласия не мешают использовать 
возможности Веба и не отменяют его высочайшую прикладную целесообразность. Развивается веб-архитектура, создаются актуальные 
веб-приложения, шлифуется и базовая веб-кодировка. Так, в частности, версия HTML уже пятого поколения 5.3 была представлена 
24 декабря 2018 г.
Собственно, организацией собственного информационного пространства на базе Веба может заняться любой пользователь. Эти 
задачи решаются в процессе веб-проектирования. Веб-проектирование — планирование и моделирование уникальных авторских информационных ресурсов в веб-среде. Такими ресурсами, как правило, 
являются веб-сайты и веб-приложения. Эта деятельность позволяет 
наиболее рациональным и эффективным образом создавать, модифицировать и использовать веб-ресурсы. В данной связи актуальны 
следующие аспекты веб-проектирования:
	
• формулирование целей;
	
• планирование;
	
• подготовка материала;
	
• реализация;
	
• тестирование;
	
• размещение;
	
• совершенствование продукта.
Проектированию любого программного продукта предшествует 
этап моделирования условий его использования и установления минимально приемлемых порогов его результативности. Так или иначе, 
это подразумевает:
	
• изучение проблемы;
	
• выдвижение гипотезы о предполагаемом решении;
	
• структурирование процесса реализации.
1	
Berners-Lee T., Fischetti M. Weaving the Web: the original design of the World 
Wide Web by its inventor. New York. 2000. 246 p.
7

Существенным залогом успешного веб-проектирования является 
формирование максимально полного представления об исходных 
данных и доступных средствах их обработки. К исходным данным 
относят:
	
• требования к функциональности продукта;
	
• параметры определения результативности;
	
• критерии производительности;
	
• условия безопасной эксплуатации;
	
• гарантийные обязательства;
	
• приоритеты использования ресурса;
	
• поведенческие шаблоны пользователя;
	
• условия использования и многое другое.
Например, в контексте производительности актуальны характеристики параллелизма, кэширования, скорости обмена данными, 
синхронизации процессов, лакуны архитектуры и т.д.
Целесообразным основанием веб-проектирования является создание технического задания. Этим вопросом могут заниматься как 
заказчик, так и разработчик веб-проекта. Предварительно заказчиком 
составляется бриф, в котором очерчиваются существенные параметры объекта проектирования. Техническое задание составляется 
с учетом программного и дизайнерского потенциала. Разумеется, 
кроме факторов, способствующих успешному веб-проектированию, 
всегда присутствуют обстоятельства, препятствующие достижению 
поставленных задач. Нередко такие обстоятельства, в противовес 
объективным предпосылкам, связывают с субъективным влиянием 
на ход проектирования. Действительно, на процесс проектирования 
влияет, например, «объективная» квалификация его участников, 
однако нередки случаи и «субъективной» небрежности. Конечно, 
у успеха всегда находятся его авторы, а неудачи — чаще всего «безымянны». Вместе с тем, грамотная оценка условий проектирования 
всегда способствует преодолению трудностей, вне зависимости 
от того, насколько они объективны или субъективны.
В процессе проектирования задачи нередко усложняются и обременяются дополнительными атрибутами. Так, например, изначально 
планируемое развертывание продукта на собственном сервере может 
быть дополнено пожеланием развертывания продукта в облачной 
среде. Формат краудфандинга потребует дополнительных усилий 
и ресурсов по координации и совмещению разрабатываемых компонентов системы. Такие «вводные» могут появляться на любой 
стадии веб-проектирования, поэтому исключительно важно изначально иметь полностью прозрачные стратегию и тактику выпол8

нения проекта. Это позволяет адаптировать конфигурацию процесса 
и, в конечном итоге, достигать поставленных целей.
1.3. ВЕБ-ДИЗАЙН КАК ПРОЦЕСС
1.3.1. Аспекты веб-дизайна
Дизайн — это деятельность по художественному конструированию 
всевозможных изделий. Дизайном (от англ. design — «проектировать») также называют результат процесса проектирования предметов 
или объектов (например, дизайн самолета или дизайн книги).
Дизайн играет огромную роль в современном мире. Дизайнеры 
в процессе разработки проекта не только стремятся создать максимально функциональное изделие, но и учитывают его ценность 
с точки зрения эстетики.
Дизайн — это очень объемное понятие, которое включает огромное 
количество разнообразных процессов деятельности, направленных 
на создание того или иного продукта. В зависимости от сферы применения (назначения) различают следующие виды дизайна:
	
• архитектурный;
	
• интерьерный;
	
• транспортный;
	
• книжный;
	
• ландшафтный;
	
• веб-дизайн и т.д.
Под веб-дизайном подразумевают особую отрасль разработки вебресурсов. Чтобы понять, зачем нужен веб-дизайн, давайте рассмотрим 
конкретный пример.
Первое, что видит пользователь, впервые попадая на сайт, — это 
его оформление. На основании этого формируется первое впечатление о ресурсе и, соответственно, возникает или не возникает желание остаться на странице и продолжить ее просмотр.
Термин веб-дизайн имеет несколько толкований:
	
• процесс создания сайта, в том числе, его проектирование, макетирование, структурирование, верстку и оформление графическими средствами;
	
• обеспечение функциональности сайта в сети;
	
• разработка совокупности веб-страниц и  объединение их 
в единый комплекс посредством гиперссылок;
	
• решение связанных с отладкой работы сайта программных, графических, редакторских задач;
9

	
• организация и совершенствование взаимодействия пользователей сайта с компьютерными системами, базами данных и т.д.
В процессе работы «…веб-дизайнеры проектируют логическую 
структуру сайта и каждой его страницы, продумывают наиболее 
удобные решения подачи информации, проектируют художественное 
оформление»1.
На веб-дизайн возлагаются несколько функций:
	
• привлечение внимания посетителя веб-ресурса;
	
• обеспечение доступности информации на странице;
	
• формирование представления о  содержании и  структуре ресурса;
	
• создание уникального, индивидуального образа, способствующего узнаваемости ресурса.
Веб-дизайн — вид графического дизайна, направленный на разработку и оформление веб-ресурсов, призванный обеспечить им 
высокие потребительские свойства и эстетические качества.
Практика свидетельствует, что одним из наиболее значимых для 
функциональности сайта факторов является его композиционное 
решение. Композиция веб-дизайна — это гармоничное расположение 
всех элементов сайта на экране таким образом, чтобы максимально 
раскрывалось их содержание и реализовывалось их назначение. Цель 
композиции — обеспечение целостного восприятия объекта.
1.3.2. Принципы веб-дизайна
Принцип — основополагающая черта какой-либо сущности. 
Принципы присущи и веб-дизайну как деятельности.
1. Принцип акцентирования. Данный принцип реализуется при 
выделении значимости какого-либо элемента в общей структуре 
или функциональности сайта. Традиционно для акцентирования 
создается фокусная точка. Фокусная точка — визуальный ориентир, 
к которому привлекается внимание пользователя и который намечается как стартовая позиция для изучения страницы посетителем. 
Предполагается, что именно с фокусной точки, являющейся точкой 
«входа», посетитель сайта начинает визуальное знакомство со страницей. И, естественно, заложенный тем самым образ, или «карта», 
страницы в дальнейшем как осознанно, так и подсознательно актуализируется посетителем сайта. Подобное акцентирование позволяет 
создателю, а затем и менеджеру сайта прогнозировать приоритетные 
для посетителя позиции и элементы страниц, целесообразно организуя взаимодействие с ними.
1	
Макарова Т.В. Веб-дизайн. Омск. 2015. 146 с.
10