ИТиБДвПК_лабораторные_1 семестр

1.

Министерство цифрового развития, связи и массовых коммуникаций
Федеральное государственное бюджетное образовательное
учреждение высшего образования
Поволжский государственный университет
телекоммуникаций и информатики
Кафедра «Информационные системы и технологии»
Лошкарев А.С.
Информационные технологии и базы данных
в прикладных коммуникациях. Часть 1.
Методические указания
к лабораторным занятиям по дисциплине
для студентов очной формы обучения направления
«Реклама и связи с общественностью»
Самара, ИУНЛ ПГУТИ, 2021
1

2.

УДК 311 + 004.738.52+ 004.77
ББК 30ф + 76
Рекомендовано к изданию методическим советом ПГУТИ,
протокол № 57, от 19.05.2020 г.
Лошкарев, А.С.
Информационные технологии и базы данных в прикладных коммуникациях.
Часть 1: методические указания к лабораторным занятиям для бакалавров по
направлениям подготовки 42.03.01 – «Реклама и связи с общественностью», по
дисциплине «Информационные технологии и базы данных в прикладных коммуникациях»
/ А.С. Лошкарев – Самара: ПГУТИ, 2021. – 50с.
Методические указания разработаны в соответствии с Федеральным
государственным образовательным стандартом высшего профессионального образования
по направлениям подготовки 42.03.01 – «Реклама и связи с общественностью» для
студентов первого курса очного отделения по дисциплине «Информационные технологии
и базы данных в прикладных коммуникациях».
Данный лабораторный цикл включает в себя четыре лабораторные работы,
выполнение которых поможет студентам изучить основные инструменты для работы с
медиа контентом в рамках взаимодействия с цифровым маркетингом.
В методических рекомендациях к лабораторным занятиям даны задания к
лабораторным работам, помогающие закрепить на практике полученные знания.
© Лошкарев А.С.
2021
2

3.

Оглавление
Лабораторная работа №1 – Анализ рынка ................................................ 4
Лабораторная работа №2 – Основы создания сайта и наполнение
контентом ........................................................................................................... 14
Лабораторная работа №3 – Подготовка семантического ядра на
заданную тему .................................................................................................... 28
Лабораторная работа №4 – Разработка интерактивного баннера для
сайта .................................................................................................................... 41
3

4.

Лабораторная работа №1
Анализ рынка
1 Цель работы:
Научиться искать и анализировать информацию о продукте, имея
доступ лишь к общедоступным источникам, а так же представлять
результаты анализа в графическом виде
2 Рекомендуемая литература
1. Основы маркетинга [Текст] : пер. с англ. / Ф. Котлер, Г. Армстронг,
Дж. Сондерс, 2-е европ. изд. - М.; СПб.; Киев : ВИЛЬЯМС, 2001. - 944 с. –
ISBN 5-8459-0065-4 : 134.55 р., 160.00 р.
2.Басовский, Л. Е., Маркетинг [Текст] : курс лекций / Л. Е. Басовский. М. : ИНФРА-М, 2001. - 219 с. : ил. - (Высшее образование). - 39.60 р.
3 Подготовка к работе
3.1. Изучить информацию о продукте, предложенном в варианте.
3.2. Изучить информацию о целевой аудитории данного продукта.
3.3. Изучить информацию об основных производителях данного
продукта.
3.4 Подготовить презентационный
материал,
в котором
будут
отображены результаты проведенного анализа.
4 Контрольные вопросы
4.1 Назовите основные этапы маркетингового анализа;
4.2 Назовите основные методы маркетингового анализа;
4.3 Дайте определение целевой аудитории;
4.4 Назовите задачи, которые решает маркетинговый анализ;
4

5.

4.5 Назовите основные сервисы, которые использовались для сбора
данных в лабораторной работе.
5 Задание на выполнение работы
5.1 Провести анализ рынка выбранного продукта по следующим
критериям:
• Целевая аудитория – тип, размер;
• Количество упоминаний бренда востребованность;
• Тональность высказываний насколько позитивны или негативны
отзывы потребителей;
• Состояние конкурентов – в чем предполагаемое отличие;
• Каналы распространения продукта.
Табл.1
Номер
варианта
1
2
3
4
5
6
7
8
9
10
11
12
13
Товар
Смартфоны и аксесуары
Видеокамера
Фастфут
Линейка одежды
Ювелирные изделия
Агентства недвижимости
Принты на заказ
Кухонная мебель
Строительные бригады
Мягкие игрушки
Комплекты спального белья
Организация свадеб
Игровые аксесуары (геймпады, джойстики, мыши,
клавиатуры, наушники)
Автомобили
Аптеки
Здоровый образ жизни
Спортивный инвентарь
Туристические агентства
14
15
16
17
18
5.2 На основании полученных данных составить презентацию,
отличающую
новый
бренд
от
существующих.
Презентация
должна
отображать все пункты, перечисленные в 5.1
5

6.

6 Отчёт должен содержать:
6.1 Титульный лист (с названием ВУЗа, кафедры, лабораторной
работы, а также фамилию И.О. студента, подготовившего отчёт).
6.2 Цель работы.
6.3 Результаты выполнения задания на ПК, в виде скриншотов с
пояснениями, в том числе и слайды презентации. Задание считается
выполненным, если выполнен анализ продукта согласно варианту по
указанным критериям, а так же проведен анализ рынка хотя бы по трем из
шести этапов.
6.4
Выводы по проделанной работе.
7 Общие сведения
Маркетинговый анализ (marketing analysis) – анализ данных в
маркетинге,
собранных
в
результате
проведения
маркетинговых
исследований, в рамках выполнения задач комплексного маркетинга («4Р»),
их преобразование, систематизация, интерпретация и моделирование.
Маркетинговый
анализ
в
классическом
понимании
—
совокупность специальных видов анализа, получивших распространение
именно в маркетинге и особым образом решающих специфические
маркетинговые задачи (например, портфельный анализ, в т.ч. с помощью
матрицы БКГ или матрицы Мак-Кинси).
Цель маркетингового анализа – содействие подготовке принятия
обоснованных управленческих решений в условиях неопределённости
рыночной ситуации.
Задачи маркетингового анализа:
изучение рынка и обоснование рыночных тенденций;
анализ основных факторов, влияющих на спрос;
анализ и обоснование стратегии ценообразования;
6

7.

выявление
реальных
и
потенциальных
конкурентов
предприятия;
оценка
слабых
и
сильных
сторон
деятельности,
преимуществ и недостатков;
оценка
конкурентоспособности
в
целом,
выявление
способов повышения конкурентоспособности;
анализ методов стимулирования сбыта и обоснование
выбора наиболее эффективных.
В
маркетинге
выделяют
два
основных
направления
анализа:
выявляет
комплекс
оперативный анализ и стратегический анализ:
Оперативный
анализ
в
маркетинге
–
взаимосвязей фирмы с окружающей средой, оценка реакции рынка на
маркетинговые мероприятия, анализ и моделирование покупательского
поведения на рынке, как реакция на маркетинговую деятельность, изучение
мнений и предпочтений потребителей, анализ потенциала собственной
фирмы, конкурентный анализ;
Стратегический анализ в маркетинге – оценка состояния рынка
(сбалансированность, масштаб, емкость, пропорциональность развития,
тенденции развития, устойчивость развития, цикличность развития), анализ и
прогноз покупательского спроса. Стратегический анализ выявляет комплекс
взаимосвязей фирмы с окружающей средой.
Маркетинговый анализ проводится с применением статистических,
эконометрических и других методов анализа.
Методы маркетингового анализа, существующие и применяемые на
практике:
статистические методы анализа;
математическое моделирование;
моделирование процессов и рисков;
эвристические методы (методы экспертных оценок);
7

8.

многомерные (матричные) методы анализа;
гибридные методы анализа в маркетинге.
Статистические методики анализа в маркетинге – это анализ
абсолютных, средних и относительных величин, группировки, индексные,
трендовые и регрессионные факторные модели, методы вариационного,
дисперсионного,
корреляционного
и
циклического
анализа,
методы
многомерного анализа: факторного, кластерного и др. Среди видов
статистического
анализа
выделяются
дескриптивный
(описательный),
выводной анализ, анализ различий, анализ связей, а также предсказательный
анализ. Все эти разновидности анализа могут использоваться как по
отдельности, так и в комбинации. Служат основным средством изучения
массовых,
повторяющихся
явлений
и
широко
используются
в
прогнозировании поведения рынка.
Математическое моделирование в маркетинге – это расчеты системы
ценообразования, расчета цены, методики выбора месторасположения,
составления комплекса средств рекламы и рекламного бюджета. К этому
методу относится оценки конкурентоспособности товара, так называемый
ABC-анализ ассортимента по блокам модификаций товаров, отвечающих на
запросы различных сегментов рынка.
Моделирование рисков – модели процессов, основанное на теориях
вероятности
и
теории
принятия
решений.
С
помощью
методов
выстраиваются модели товаропотоков и потоков покупателей, модели
реакции рынка. Инструментарий маркетингового моделирования рисков
включает методики сегментации рынков, так называемый SWOT-анализ –
исследование и оценку силы и слабостей фирмы, ее возможностей и
угрожающих факторов.
Эвристические
методы
или
методы
экспертных
оценок –
основывающиеся на интуиции, воображении и опыте. Они применяются для
количественного измерения тех событий, для которых не существует
8

9.

способов измерения (метод «Дельфин», метод коллективной генерации идей,
теория катастроф).
Многомерные матричные методы – моделирование ситуаций на
основании построения и анализа многомерных матриц, моделей поведения
(SWOT-анализ, матрица БКГ, матрица «Мак-Кинза»).
Гибридные маркетинговые методы – объединяют детерминированные
и
вероятностные
характеристики.
Применяются,
прежде
всего,
для
исследования сложных процессов, например, проблем товародвижения.
Этапы маркетингового анализа:
1.
Сбор данных в результате проведения маркетинговых
исследований;
2.
Обобщение массива данных путем их выражения через
ограниченное число ключевых параметров;
3.
Концептуализация — оценка результатов обобщения,
коммуникативная обработка и интерпретация результатов в понятных
для заказчика категориях;
4.
Экстраполяция – определение, в какой степени (в каком
доверительном интервале) данные выборки характерны для всей
совокупности объектов внимания;
5.
Формулирование выводов.
Маркетинговый анализ рынка – стратегический анализ прогноз
развития рынка, спроса, моделирование покупательского поведения.
Маркетинговый
анализ
компании
–
стратегический
анализ,
выявляющий комплекс взаимосвязей компании с окружающей средой.
Конкурентный маркетинговый анализ – изучение качества и
конкурентоспособности рыночного предложения;
Анализ результатов маркетинговой кампании – оперативный анализ
реакции рынка на маркетинговое воздействие.
9

10.

Маркетинговый анализ проекта – емкое понятие, представляющее
собой анализ процессов по реализации отдельно взятого проекта.
Маркетинговый
анализ
товара
(услуги,
предложения)
–
определение конкурентоспособности данного товара на рынке, понимание
того, что происходит и что будет происходить с товаром на конкретном этапе
или на всех этапах его жизненного цикла.
Не нужно путать маркетинговое исследование и маркетинговый
анализ. Маркетинговое исследование включает сбор, обработку, хранение и
систематизацию информации. Маркетинговый анализ предполагает выводы –
оценку, объяснение, моделирование и прогноз процессов и явлений.
7.1 Анализ рынка
ШЕСТЬ ЭТАПОВ АНАЛИЗА
• Анализ продаж;
• Анализ клиентов;
• Анализ продукции;
• Анализ конкурентов;
• Анализ маркетинговой продукции (Вашей и конкурентов);
• SWOT-анализ.
1)
Для сбора данных и последующего анализа рынка можно
пользоваться следующими сервисами:
Федеральная служба государственной статистики – благодаря этому
сервису можно найти крайне интересную и, что удивительно, актуальную
информацию;
Оценка объема рынка – сервис по проверке контрагента, но при
правильной настройке можно вытащить интересные данные.
К примеру, ориентировочные продажи в какой-то нише (данные
берутся из финансовых отчетов компаний).
10

11.

Для базового понимания анализ рынка необходимо делать за последние
3 года, по годам и помесячно. Для лучшей наглядности нужно строить
графики. Так лучше видно все взлеты и падения.
Кроме того, обязательное условие – понять, бывает ли в анализируемом
бизнесе сезонность, а также насколько он прирастает или падает по
соотношению с прошлым годом.
Рис.1 – Пример построения графика по годам
2)
Пример анализа продукции:
Рабочие лошадки.
Звезды.
Низкая доходность и высокая
Высокая доходность блюда и
популярность блюда
высокая популярность блюда
Пример: американо, бургер, сэндвич
Пример: гамбургер, капучино
Собаки.
Загадки.
Низкая доходность и низкая
Высокая доходность, но низкая
популярность блюда Пример:
популярность блюда Пример:
крылышки, наггетсы
авторский чай, блинчики
11

12.

Рабочие лошадки – популярные блюда среди клиентов и значит
нужно придумать к ним какие-то варианты допродаж, ну или поднять цену
до 10% (не всегда), так как люди и так будут брать;
Звезды – это то, с чего приходит основной заработок, Ваша основная
задача – поддержать высокие продажи и низкую себестоимость не в ущерб
качеству;
Загадки – выгодные, но не популярные блюда. Для этого Вам
необходимо стимулировать их продажи, вводя дополнительную мотивацию
среди своего персонала;
Собаки – от таких блюд лучше всего отказываться/выводить из меню
либо искать им заменители.
Правильно проанализированное меню, сделанные из него выводы,
то есть удаление каких-то позиций, дописанный скрипт для персонала
по допродаже определенных позиций, помогают увеличить продажи в
кафе/ресторане на 7-10%.
На самом деле подобный анализ можно провести на л юбом
бизнесе, будь то ресторан, опт или магазин одежды. Единственное
условие – наличие подробной отчетности и аналитики.
3)
Пример SWOT-анализа:
• Strengths (сильные стороны);
• Weaknesses (слабые стороны);
• Opportunities (возможности);
• Threats (угрозы).
12

13.

Рис.2 – Таблица SWOT-анализа
4) Анализ клиентов:
Так как выполнение лабораторной работы не подразумевает наличие
собственного бизнеса, то информацию по клиентам можно искать в
открытых источниках – на сайтах анализируемых товаров/услуг, в свободных
базах данных за прошедшие года. В статистику нужно включать – возраст
целевой
аудитории,
процентное
соотношение
пола,
геоданные
(в
зависимости от анализируемого продукта), средний предполагаемый доход
целевой аудитории.
13

14.

Лабораторная работа №2
Основы создания сайта и наполнение контентом
1 Цель работы: Научиться работать с языком гиперразметки HTML,
наполнять сайт необходимым контентом.
2 Рекомендуемая литература
1. Самоучитель HTML [Текст] / А. Гончаров. - СПб. : Питер, 2001. - 239
с. : ил. - (Самоучитель).
2. Быстро и легко создаем, программируем, шлифуем и раскручиваем
web-сайт [Текст] : учебное пособие / ред. Ю. М. Алексеев. - М. : Лучшие кн.,
2003. - 426 с. : ил. + 1 эл. опт. диск (CD-ROM). - (Быстро и легко). - ISBN 593673-018-2 : 160.00 р.
3 Подготовка к работе
3.1. Изучить предлагаемый ход работы лабораторной работы;
3.2. Выполнить верстку на языке HTML приведенного примера;
3.3. Видоизменить полученную Web-страницу в соответствии с
выполненным анализом в лабораторной №1. Наполнить сайт контентом в
соответствии со своим вариантом.
4 Контрольные вопросы
4.1 Что такое язык гиперразметки HTML?
4.2 Что такое тело документа?
4.3 Что такое заголовок документа?
4.4 Что такое тег?
4.5 В чем отличе HTML от PHP?
4.6 Как можно поменять цвет фона созданной страницы?
4.7 С помощью каких тегов можно создать таблицу?
14

15.

5 Задание на выполнение работы
1. В текстовом редакторе Блокнот ввести код, содержащий основные
теги для определения структуры HTMLдокумента:
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
Введите в HTML-документ название WEB-станицы и краткую
информацию о фирме АТЛАНТ
•Между
тегами<title>
и</title>наберите
название
WEB-страницы
Компания АТЛАНТ.
•Между тегами<body>и </body> вставьте новую строку с информацией
о компании:
Компания АТЛАНТ обеспечит вас компьютерами и программными
продуктами на любой вкус.
Цвета фона и текста можно задавать в цифровом или символьном виде.
Словесное указание цвета более удобно использовать, зато численное
обозначение позволяет задавать любой оттенок. Атрибутыbgcolorи text
обеспечивают установку цвета фона и текста WEB-страницы.
Вместо тега <body> введите фрагмент HTML-кода:
<bodybgcolor=bluetext=red>
Сохраните
файл
с
именем
атлант.html
в
локальной
папке
С:/Users/U_IST2-507-0X/Рабочий стол/РСО-91 жесткого диска. Загрузите
любой браузер, в поле ввода окна программы введите полный путь к файлу
атлант.html (рис.1)
15

16.

Рис.1 – Созданная WEB-страница
Самостоятельно изменить вид созданной WEB -страницы по примеру
рисунка 2.
Фоновый рисунок может быть любым
Рис.2 – Отредактированная WEB-страница
2. Наполнить созданный сайт контентом согласно варианту из табл.1.
Предварительно необходимо провести анализ рынка выбранного продукта по
следующим критериям:
16

17.

1. Целевая аудитория – тип, размер;
2. Количество упоминаний бренда востребованность;
3. Тональность высказываний
насколько позитивны или негативны
отзывы потребителей;
4. Состояние конкурентов – в чем предполагаемое отличие;
5 Основные каналы распространения товара/услуги.
Табл.1
Номер
Товар
варианта
1
Смартфоны и аксесуары
2
Видеокамера
3
Фастфут
4
Линейка одежды
5
Ювелирные изделия
6
Агентства недвижимости
7
Принты на заказ
8
Кухонная мебель
9
Строительные бригады
10
Мягкие игрушки
11
Комплекты спального белья
12
Организация свадеб
13
Игровые аксесуары (геймпады, джойстики, мыши,
клавиатуры, наушники)
14
Автомобили
15
Аптеки
16
Здоровый образ жизни
17
Спортивный инвентарь
18
Туристические агентства
17

18.

6 Отчёт должен содержать:
6.1 Титульный лист (с названием ВУЗа, кафедры, лабораторной
работы, а также фамилию И.О. студента, подготовившего отчёт).
6.2 Цель работы.
6.3 Результаты выполнения задания на ПК, в виде скриншотов с
пояснениями. Задание считается выполненным, если студент написал
рабочий HTML-код и наполнил его контентом согласно варианту.
6.5
Выводы по проделанной работе.
7 Общие сведения
HTML - это обычный текстового вида файл, в котором то, что мы
обычно видим на страничках, перемежается невидимым для просмотра из
браузера кодом. Вот этот -то невидимый код и есть язык разметки HTML.
HTML - это не язык программирования. Он служит для разметки
странички, придания определенного вида тому или иному элементу, будь то
таблица, текст или картинки. Осуществляется это путем присвоения каждому
элементу своих параметров, которые распознает браузер. Тип элементов
может быть разным: таблицы, ячейки, ссылки, текст и т. п.
Параметры отображения элементов задаются при помощи тегов, в
которых и задается желаемый вид того или иного элемента нашей странички.
Теги управляют отображением информации и при этом сами не
выводятся на экран. Теги бывают одиночными и парными (открывающими и
закрывающими).
Язык разметки гипертекста или HTML является старейшим и наиболее
часто используемым методом создания веб-страниц. Он очень простой и
всего за несколько минут, кодер может легко создать простую веб-страницу с
текстом и парой картинок. Вы можете сделать то же самое с РНР, поскольку
его вывод обрабатывается HTML и, если вы вставили тот же HTML-код, Вы
18

19.

также получите тот же результат. Это связано с тем, что конечный продукт
PHP-код, и он будет отправлен в браузер в HTML.
Так что браузер будет отображать вам тот же HTML код. если вы
установите его в качестве выхода из вашего РНР скрипта, но если вы хотите
воспользоваться расширенными возможностями, которые предлагает РНР,
вам придётся потратить немного больше времени.
Кодирование в HTML означает что страницы, которые вы кодируете,
всегда будут одинаковыми в зависимости от того, какой браузер вы
используете. РНР позволяет кодеру создавать HTML-страницу или её часть
динамически. Например, если вы хотите создать сайт, который будет
отображать все буквы алфавита индивидуально на своей собственной
странице, вам нужно будет создать страницу для каждой буквы, если вы
используете HTML, но вам нужна только одна страница с РНР, РНР также
способен принимать данные и использовать их или манипулировать ими для
создания результата, который пользователь желает получить. Веб-страница,
которая может принимать два номера, может добавлять их и представлять
результат
пользователю,
и
всё
это
очень
просто
выполнить
при
использовании РНР, но не с HTML.
Из-за дополнительных возможностей РНР он должен внедрить
надлежащую структуру в кодировании. В отличие от HTML, где всё, что вы
помещаете, создаёт выход, РНР не даст вам такой выход, если что-то не так с
вашим кодом. Обучение РНР также намного сложнее по сравнению с HTML.
Для изучения РНР вам потребуется значительно больше времени, чем при
изучении HTML, хотя вам все равно нужно будет изучить HTML для
изучения РНР
1.
HTML-это язык разметки, а РНР-это скриптовый язык.
2.
Вывод РНР, как правило, в HTML-коде, который браузер
может интерпретировать.
19

20.

3.
Коды HTML являются статическими, и они всегда одни и
те же каждый раз, когда они открываются, хотя файлы РНР
динамические и результат может не всегда быть одинаковым.
4.
HTML-это очень простой и прощающий ошибки язык, а
РНР нет.
Пример:
<p>, <br>-одиночные теги. Для них нет закрывающего тега.
<head></head>, <body></body>-парные теги.
<> -открывающий тег, </> -закрывающий тег
В тегах могут использоваться только символы латинского алфавита, а в
значениях атрибутов –любые символы. Если в качестве значения атрибутов
используются, например, русские символы, то они должны быть заключены в
кавычки.
Пример:
Name=”название”
Если эти значения используют латинские символы, цифры, то кавычки
иногда опускают
Атрибуты тега отделяются друг от друга пробелами, при этом порядок
ихследования произволен.
Пример:
<tableborder=0 width=”100%”>
Язык HTMLне различает большие и малые буквы, как что теги
<TITLE>, <Title> и<title>эквивалентны.
Каждый HTML-документ имеет определенную структуру:
<html>
<head>
...
</head>
<body>
20

21.

...
</body>
</html>
Таким образом HTML-документ содержит теги <html>и </html>,
отмечающие конец документа, заголовок, ограниченный тегами
<head>и </head>,а также тело или содержательную часть документа,
заключенную между тегами <body>и </body>.
Документ HTMLможет содержать комментарии для пояснения кода.
Комментарии могут состоять из произвольного числа строк и начинаться с
последовательности <!-и заканчиваться символами -->.
Пример:
<!-Просмотреть таблицу-->.
Следует
помнить,
что
комментарии
являются
частью
файла,
передаются по сети вместе с документом и могутприводить к увеличению
времени загрузки.
ПРИЛОЖЕНИЕ
Основные теги
<html></html> Указывает программе просмотра страниц, что это HTML
документ.
<head></head>
Определяет
место,
где
помещается
различная
информация не отображаемая в теле документа. Здесь располагается тег
названия документа и теги для поисковых машин.
<body></body> Определяет видимую часть документа
Теги оглавления
<title></title> Помещает название документа в оглавление программы
просмотра страниц
Атрибуты тела документа
<body bgcolor=?> Устанавливает цвет фона документа, используя
значение цвета в стандарте RGB - пример: FFFF00 -желтый цвет.
21

22.

<body text=?> Устанавливает цвет текста документа, используя
значение цвета в стандарте RGB - пример: 00ff00 -зеленый цвет.
<body link=?> Устанавливает цвет гиперссылок, используя значение
цвета в стандарте RGB -пример: 00FF00 - зеленый цвет.
<body vlink=?> Устанавливает цвет гиперссылок, на которыхх вы уже
побывали, используя значение цвета в виде стандарте RGB - пример: 333333
- темно - серый цвет.
<body alink=?> Устанавливает цвет гиперссылок при нажатии.
Теги форматирования текста
<pre></pre> Обрамляет предварительно отформатированный текст.
<h1></h1> Создает САМЫЙ БОЛЬШОЙ заголовок (как отдельный абзац)
<h6></h6> Создает САМЫЙ МАЛЕНЬКИЙ заголовок
<b></b> Создает жирный текст
<i></i> Создает наклонный текст
<tt></tt>Создает текст -имитирующий стиль печатной машинки.
<cite></cite> Используется для цитат, обычно наклонный текст.
<em></em>Используется для выделения из текста слова (наклонный
или жирный текст)
<font size=?></font> Устанавливает размер текста в пределах от 1 до 7.
<font color=?></font> Устанавливает цвет текста, используя значение
цвета в виде RRGGBB.
Гиперссылки
<a href="URL">ТЕКСТ</a> Создает гиперссылку на другие документы
или часть текущего документа. Здесь URL адрес ссылки, ТЕКСТ-текст
ссылки.
<a href="URL"> < img src="imgURL" > </a> Создает гиперссылку на
рисунок, находящийся по адресу imgURL.
"URL" = "links/main.htm"Адрес документа main.htm, находящегося в
локальной папке links данного компьютера.
22

23.

"URL" = "http://www.rambler.ru"Ссылка на ресурс, находящийся на
удаленном
компьютере.
В
адресе
присутствуют:
программа
связи
судаленным компьютером http(HyperText Transfer Protocol, разделители :// и
интернет (IP) адрес искомого ресурса (в данном случае поискового сервера
Rambler).
<a href="mailto:EMAIL"></a> Создает гиперссылку вызова почтовой
программы для написания письма по указанному адресу.
<a name="NAME"></a> Отмечает часть текста как место перехода по
гипперссылке в документе.
<a href="#NAME"></a> Создает гиперссылку на помечанную часть
текущего документа.
Форматирование
<p> Создает новый параграф
<p align=?> Выравнивает параграф относительно одной из сторон
документа, значения: left,right, justify или center
<center></center> Выравнивает строку текста по центру
<blockquote> </blockquote> Создает отступы с обеих сторон текста.
<dl></dl> Создает список определений. Штанга <dt>
Основной снаряд в тяжелой атлетике. Состоит из стального грифа
(стержня) со втулками на концах и свободно надевающихся металлических
дисков.
<dd>
<dt> Определяет каждый из терминов списка
<dd> Описывает каждое определение
<ol></ol>Создает нумерованный список
<li>Определяет каждый элемент списка и присваивает номер
<ul></ul> Создает ненумерованный список
<li> Предваряет каждый элемент списка и добавляет кружок или
квадратик.
23

24.

<div align=?> Тег, используемый для форматирования больших блоков
текста
HTML документа. Часто используется в таблицах стилей
Использование кодов символов и специальных знаков в документе
HTML
Код в документе HTML
Выводится браузером на экран
&#32;
пробел
&#33;
!
&#34;
"
&#35;
#
&#36;
$
&#37;
%
&#38;
&
&#60;
<
&#61;
=
&#62;
>
&#169;
©
&#171;
«
&#177;
±
&#185;
¹
&#187;
»
&#197;
Å
&nbsp;
Неразрывный пробел
&lt;
<
&gt;
>
&quot;
"
Графические элементы
<img src="name"> Добавляет изображение в HTML документ
24

25.

<img src="name" align=?> Выравнивает изображение к одной из сторон
документа, принимает значения: left, right, center; bottom, top, middle
<img src="name" border=?> Устанавливает толщину рамки вокруг
изображения
<hr> Добавляет в HTML документ горизонтальную линию.
<hr size=?> Устанавливает высоту(толщину) линии
<hr width=?>Устанавливает ширину линии, можно указать ширину в
пикселях или процентах.
<hr noshade> Создает линию без тени.
<hr color=?> Задает линии определенный цвет. Значение RRGGBB.
Таблицы
<table></table> Создает таблицу.
<tr></tr> Определяет строку в таблице.
<td></td> Определяет отдельную ячейку в таблице.
<th></th> Определяет заголовок таблицы (нормальная ячейка с
отцентрованным жирным текстом)
Атрибуты таблицы
<table border=#> Задает толщину рамки таблицы. (здесь 5)
<table cellspacing=#> Задает расстояние между ячейками таблицы.
<table cellpadding=#> Задает расстояние между содержимым ячейки и
ее рамкой.
<table width=#> Устанавливает ширину таблицы в пикселах или
процентах от
ширины документа.
<tr align=?>
или <td align=?> Устанавливает выравнивание ячеек в
таблице, принимает значения:left, center, или right.
<tr
valign=?>
или<td
valign=?>
Устанавливает
вертикальное
выравнивание для ячеек таблицы, принимает значения : top, middle, или
bottom.
25

26.

<td colspan=#> Указывает количество столбцев которое объединено в
одной ячейке. (по умолчанию=1)
<td rowspan=#> Указывает количество строк которое объединено в
одной ячейке. (по умолчанию=1)
<td nowrap>Не позволяет программе просмотра делать перевод строки
в ячейке таблицы.
Фреймы
<frameset></frameset> Предваряет тег <body>в документе, содержащем
фреймы;
<frameset rows="value,value"> Определяет строки в таблице фреймов,
высота которых определена количеством пикселов или в процентном
соотношении к высоте таблицы фреймов.
<frameset cols="value,value">Определяет столбцы в таблице фреймов,
ширина которых определена количеством пикселов или в процентном
соотношении к
ширине таблицы фреймов.
<frame> Определяет единичный фрейм или область в таблице фреймов.
<noframes></noframes> Определяет, что будет показано в окне браузера
если он не поддерживает фреймы.
Атрибуты фреймов
<frame src="URL"> Определяет какой из HTML документов будет
показан во фрейме.
<frame name="name"> Указывает Имя фрейма или области, что
позволяет перенаправлять информацию в этот фрейм, или
область из других фреймов.
<frame marginwidth=#> Определяет величину отступов по левому и
правому краям фрема; должно быть равно или больше 1.
<frame marginheight=#> Определяет величину отступов по верхнему и
нижнему краям фрейма; должно быть равно или больше 1.
26

27.

<frame scrolling=VALUE> Указывает будет ли выводится линейка
прокрутки во фрейме; значение value может быть "yes," "no," или "auto".
Значение по умолчанию для обычных документов -auto.
<frame noresize> Препятствует изменению размеров фрейма.
Формы
Для форм, выполняющих какие-то функции должны быть запущены
соответствующие CGI скрипты на сервере. HTML создает только внешний
интерфейс формы.
<form></form> Создает формы
<select multiple name="NAME" size=?></select> Создает скролируемое
меню. Size устанавливает количество пунктов меню, которое будет показано
на экране, остальные будут доступны при использовании прокрутки.
<option> Указывает каждый отдельный элемент меню
<select Создает ниспадающее меню
name="NAME"></select><option>Указывает
каждый
отдельный
элемент меню
<textarea name="NAME" cols=40 rows=8></textarea> Создает окно для
ввода текста. Columns указывает ширину окна; rows указывает его высоту.
<input type="checkbox" name="NAME"> Создает checkbox. За тегом
следует текст.
<input type="radio" name="NAME" value="x"> Создает radio кнопку. За
тегом следует текст.
<input type=text name="foo" size=20> Создает строку для ввода текста.
Параметром Size указывается длина в символах.
<input type="submit" value="NAME"> Создает кнопку "Принять"
<input type="image" border=0 name="NAME" src="name.gif"> Создает
кнопку "Принять" -для этого используется изображение
<input type="reset"> Создает кнопку "Отмена"
27

28.

Лабораторная работа №3
Подготовка семантического ядра на заданную тему
1 Цель работы:
Разработать семантическое ядро для своего сайта и модернизировать
сайт в соответствии с разработанным ядром. Наполнить созданные страницы
контентом согласно варианту.
2 Рекомендуемая литература
1. Основы маркетинга [Текст] : пер. с англ. / Ф. Котлер, Г. Армстронг,
Дж. Сондерс, 2-е европ. изд. - М.; СПб.; Киев : ВИЛЬЯМС, 2001. - 944 с. –
ISBN 5-8459-0065-4 : 134.55 р., 160.00 р.
2.Басовский, Л. Е., Маркетинг [Текст] : курс лекций / Л. Е. Басовский. М. : ИНФРА-М, 2001. - 219 с. : ил. - (Высшее образование). - 39.60 р.
3 Подготовка к работе
3.1. Изучить определения семантического ядра;
3.2. Изучить этапы создания семантического ядра;
3.3.
Выполнить
разработку
семантического
ядра.
Допускается
выполнение в графическом или табличном видах.
3.4 Модернизировать созданную раннее Web-страницу в соответствии
с созданным семантическим ядром.
4 Контрольные вопросы
4.1 Дайте определение семантического ядра;
4.2 Назовите основные сервисы для анализа ключевых слов;
4.3 Назовите этапы создания семантического ядра;
4.4 Расскажите о процессе кластеризации семантического ядра;
28

29.

4.5 Расскажите об основных типах запросов, которые можно
задействовать в структуре семантического ядра.
5 Задание на выполнение работы
5.1 Подготовить максимально полное семантическое ядро (знать
определение этого термина, причем взятое исключительно из авторитетного
источника) по темам, представленным в лабораторной работе№1. В ядре
должны быть все запросы из wordstat.yandex.ru с количеством показов более
100 в месяц Подготовку осуществлять с помощью следующих сервисов:
• http://ru.prodvigator.ua/pay (сервис, которым можно собирать СЯ –
как анализируя конкурентов, так и вводя общие темы и отбирая
конкретные запросы);
• http://audit.megaindex.ru/audit/query_parameters/ (введя сюда сайтконкурент, можно увидеть по каким запросам он продвигается и
выбрать те из них, у которых оптимальное соотношение частоты
и стоимости продвижения);
• www.wordstat.yandex.ru (базовый сервис для сбора статистики
поисковых запросов по интересующей тематике).
5.2 Модернизировать созданную раннее Web-страницу в соответствии
с созданным семантическим ядром.
6 Отчёт должен содержать:
6.1 Титульный лист (с названием ВУЗа, кафедры, лабораторной
работы, а также фамилию И.О. студента, подготовившего отчёт).
6.2 Цель работы.
6.3 Результаты выполнения задания на ПК, в виде скриншотов с
пояснениями. Задание считается выполненным, если студент разработал
максимально полное семантическое ядро и модернизировал рабочий HTML29

30.

код из лабораторной работы№2 и наполнил его контентом согласно
варианту.
6.6
Выводы по проделанной работе.
7 Общие сведения
Семантическое ядро — набор слов и словосочетаний, отражающих
тематику и структуру сайта. Семантика – раздел языковедения,
изучающий смысловую наполненность единиц языка. Поэтому термины
«семантическое ядро» и «смысловое ядро» тождественны.
План сбора семантического ядра для сайта:
1.
Выписать основные направления сайта. Как правило, это
категории (рубрики) проекта. К этим разделам выписываем подходящие
ключи. Это будут первоначальные запросы, по которым в дальнейшем будет
собираться семантика.
2.
Определяемся с регионом продвижения. Особенно это важно для
коммерческих проектов (интернет-магазины и сайты услуг). Это нужно
чтобы приводить свою целевую аудиторию. Также не забываем, что для
разных регионов статистика по запросам будет разной.
3.
Сбор ключевых слов. Для этого есть как платные, так и
бесплатные инструменты. Сам сбор начинаем с тех первых запросов,
которые сформировали во втором пункте.
4.
Очистка СЯ от ненужных ключевиков. Оставляем только самые
эффективные и подходящие варианты. Ниже мы об этом еще поговорим.
5.
Кластеризация
семантического
ядра.
Делаем
группировку
запросов на отдельные кластеры. То есть для каждой продвигаемой страницы
закрепляем свои ключевики. В результате этого сформируется готовая
структура сайта.
6.
Расширение семантики. Этот пункт выполняется в том случае,
если первоначальное ядро было составлено не полностью. Хоть это и трудно,
30

31.

но я рекомендую создавать сразу полное СЯ. Тогда можно увидеть полную
картину. При больших объемах ключевых слов она помогает нам достаточно
быстро и эффективно их разгруппировать.
Рис.1 – Пример грубого сбора семантического ядра в автоматическом
режиме с помощью программы Key Collector
Рис.2 – Пример сбора семантического ядра с проработкой структуры сайта
31

32.

Рис.3 – Пример сбора семантического ядра с выбором приоритетных
слов
Рис.4 – Пример удобного для представления семантического ядра –
структура сайта привязана к приоритетным словам
32

33.

С помощью семантики владельцы сайтов могут сформировать
структуру сайта. Например, какие ключевики будут продвигать страницы и
посты, а какие рубрики и метки.
Также можно заранее продумать иерархию разделов. Например, что
будет рубриками, а что подрубриками. Это особенно важно при создании и
продвижении молодого сайта.
Еще зная структуру сайта, можно заранее сформировать структуру вебдизайна. То есть какие блоки должны быть на сайте и где они будут
располагаться. Сюда также относим меню с необходимыми разделами.
Помимо структуры, семантическое ядро помогает составить контентплан.
С заранее отобранных ключевых слов мы уже видим темы будущих
статей. А благодаря статистике по ключевикам, мы эти темы сможем
сформировать в единый план.
Также СЯ очень хорошо помогает во внешней и внутренней
перелинковке. Вы уже наглядно будете видеть, какие статьи по каким
ключам у вас продвигаются. А также какие страницы нужно перелинковать, а
какие нет.
Еще можно сразу увидеть свой ссылочный профиль. То есть какие
анкоры в ссылках употребляются чаще всего, а какие нет. Благодаря этому
можно
равномерно
распределять
ссылочную
массу.
Это
придает
дополнительную естественность для поисковых систем.
Группировка семантического ядра
Рассмотрим такой этап в seo продвижении, как группировка
семантического ядра. Само по себе ядро без сгруппированных запросов,
распределенных на посадочные страницы не имеет никакого значения.
То есть каждый ключевой запрос должен быть определен на какую-то
конкретную продвигаемую страницу. Но перед этим все слова должны быть
сгруппированы в логические группы.
33

34.

Есть основные правила группировки.
Один запрос на одну страницу
Нельзя пытаться двигать две страницы по одному и тому же
ключевому слову. Тогда будет конфликт релевантности. Это в свою очередь
очень негативно сказывается на SEO оптимизации сайта.
Максимально уточняющие страницы
Запросы должны идти на максимально уточняющие страницы.
К примеру, запрос «ноутбук samsung» должен вести конкретно на
страницу данного бренда. То есть нельзя вести его на общую страницу с
ноутбуками.
И чем более уточняющий запрос, тем более уточняющая страница
должна быть для этого запроса.
Создавайте новые страницы
Не нужно бояться создавать новые страницы по итогам сбора
семантического ядра.
Конечно же, процесс создания новых страниц — это дополнительные
вложения. Но я не рекомендую пытаться продвинуть ключевые слова только
на уже существующие страницы лишь бы не прилагать лишних усилий.
Это наоборот позволит потратить в разы больше усилий, чем сразу
создать необходимые страницы и продолжить самостоятельное продвижение
сайта.
Объединяйте старые страницы
Нельзя бояться объединять старые страницы по итогам сбора СЯ.
Многие сео оптимизаторы грешат тем, что предыдущее правило понимают в
рамках «лучшее враг хорошего». То есть они создают отдельные посадочные
страницы под созвучные ключевые слова.
Однажды на seo аудит попал один сайт.
В нем отдельно были созданы страницы под запросы «букет для
девушки», «букет для девочки», «букет для женщины» и так далее. То есть
34

35.

слова, которые по сути своей являются созвучными и должны объединяться в
одну группу, были разбиты на разные страницы
Поэтому нельзя пытаться до тошноты разбить под каждый ключ
отдельную страницу. Все должно делаться с умом и разумно.
Если запрос объединяется в одну группу, то под эту группу создаем
отдельную посадочную страницу. Если запросы разбиваются на две и более
групп, значит создаем две и более страниц.
Должен быть логический смысл
У дифференциации страниц должен быть логичный смысл. Это как раз
то, о чем я говорил, когда разбивают фактически под каждый запрос
отдельную страницу.
Приведу еще один пример, когда попался сайт с плохими результатами
продвижения. Выполняя seo аудит, я заметил, что также было создано
множество посадочных страниц на созвучные запросы.
Например,
«подарки
на
день
Валентина»,
«подарки
на
день
влюбленных» и «подарки на 14 февраля». Все эти три запроса — это все одна
группа. Однако под каждую из них была создана отдельная посадочная
страница.
Забыть про ВЧ на главной
Нужно забыть про принцип «высокочастотные запросы на главную, а
остальное на внутренние страницы».
Это старое правило, когда seo продвижение было хаотичным. Тогда для
наибольшей легкости ВЧ запросы кидали на главную, а все остальное на
внутренние страницы.
Но это правило уже давно не работает!
Выровнять количество запросов
Не забываем выровнять количество запросов по страницам.
Чем чреват большой разброс? Например, на одну посадочную страницу
20 ключевых запросов, на другую 2, на третью 100, а на четвертую 5.
35

36.

А чревато это тем, что когда начнется закупаться ссылочная масса на
данные страницы, то получится большой дисбаланс между внутренними
страницами. Это в свою очередь будет выглядеть не естественно для
поисковых систем.
Отделяем коммерческие и информационные запросы
Коммерческие и информационные запросы нельзя группировать
вместе. Коммерческие должны вести на коммерческие страницы, а
информационные на инфо-страницы.
Это разные потребности пользователей и совсем разные цели.
Соответственно, тут их нужно разумно разделять.
Запросы с приставками «купить», «заказать» и так далее должны вести
на коммерческие страницы. Запросы с приставками «что», «как», «почему» и
так далее должны вести на информационные страницы со статьями.
На коммерческих страницах все должно быть создано весьма просто
чтобы пользователь непринужденно выполнил целевое действие. Для
информационных же страниц должны быть статьи с подробным раскрытием
проблемы пользователя.
Кластеризация семантического ядра
Рис.5 – Схема кластеризации семантического ядра
36

37.

На
рисунке
приведен
пример
алгоритма
программы,
которая
автоматическим способом кластеризирует заданный список ключевых слов.
Подается запрос в поисковую систему. Далее выбирается топ 10 по
каждому из ключу. Затем сравнивается выдача по первому и второму.
Если есть совпадения с определенным индикатором (например, 3 — 4
совпадения), то они попадают в одну группу. Если нет совпадений, то они
идут в разные группы.
Потом сравниваются полученные результаты первого и третьего,
первого и четвертого, второго и четвертого, второго и третьего. Операция
продолжается пока каждые из запросов не будут сравнены и не
сформированы окончательно списки кластеров.
Существует много программ и сервисов по кластеризации запросов
семантического ядра.
Но есть бесплатный способ проверить через поисковик.
Просто введите отдельно поисковые запросы и посмотрите на выдачу.
Если в выдаче присутствуют практически одни и те же сайты, то запросы
будут относится к одной общей группе. Если сайты разные, то скорее всего,
это слова с разных групп.
В общем, автоматизировав этот процесс и опираясь на поисковую
выдачу, можно определять кластеры ключевых слов без долгого и ручного их
группирования.
Чистка СЯ
Пустые запросы
Что такое пустые запросы? Это запросы, которые могут иметь очень
низкую частотность. Они не являются популярными, но по какой-то причине
мы их просто выбрали.
Соответственно, даже занятие высоких позиций по данному ключу не
принесет никакого результата. Ведь пользователи данный запрос не будут
вводит в поиске. В итоге они никак не попадут на сайт.
37

38.

Также к пустышкам относятся запросы, которые имеют низкое
соотношение общей частотности к точным показам. То есть по широкому
соответствию запрос имеет большое количество показов в месяц. Но в
точной форме, он имеет очень низкое число показов.
Нецелевые запросы
Что такое не целевые запросы? Это запросы, которые приводят
нецелевых посетителей. От таких людей толку мало, так как они не
совершают целевые действия на сайте.
Пользуясь уже ранее представленным инструментом Spywords, я вбил
один из коммерческих сайтов по бытовой технике.
В списке ключевых слов, по которым он ранжируется обнаружились
совсем не те ключи, которые подходили для данного проекта. Такая ситуация
тоже не редко встречается.
Где еще мы можем увидеть не целевые запросы?
Например, пользуясь методом подбора ключевиков через поисковые
подсказки, мы можем ввести начальную фразу и одну букву.
Вот мы видим список ключевых слов, которые предлагает нам
поисковая система.
Некоторые из них целевые. Но есть запросы, которые не совсем смогут
подойти сайту. Например, если вы продаете новые товары, то запросы с бу
вам точно не подойдут.
Устаревшие запросы
Что такое устаревшие запросы? Это запросы, которые потеряли свою
актуальность по прошествии времени. Например, «лучший мобильный
телефон 2012» или «туры в Египет 2013».
Такие запросы становятся не актуальными. Поэтому нужно постоянно
чистить свое семантическое ядро сайта от такого мусора.
38

39.

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

40.

Поэтому такие неоднозначные запросы могут лишь мешать нам в СЯ.
Лучше добавлять туда какой-то наиболее уточняющий вариант.
40

41.

Лабораторная работа №4
Разработка интерактивного баннера для сайта
1 Цель работы:
Разработать интерактивный баннер для созданного ранее сайта для
повышения конверсии и юзабилити сайта.
2 Рекомендуемая литература
1. Самоучитель HTML [Текст] / А. Гончаров. - СПб. : Питер, 2001. - 239
с. : ил. - (Самоучитель).
2. Быстро и легко создаем, программируем, шлифуем и раскручиваем
web-сайт [Текст] : учебное пособие / ред. Ю. М. Алексеев. - М. : Лучшие кн.,
2003. - 426 с. : ил. + 1 эл. опт. диск (CD-ROM). - (Быстро и легко). - ISBN 593673-018-2 : 160.00 р.
3 Подготовка к работе
3.1. Изучить основные приемы и техники для создания интерактивного
баннера;
3.2. Осуществить анализ основных предполагаемых элементов баннера
– цвет, изображения, размер, цвет/размер/шрифт текста;
3.3. Выполнить разработку интерактивного баннера.
3.4 Модернизировать созданную раннее Web-страницу в соответствии
с созданным семантическим ядром.
Примечание. Для успешной защиты лабораторной нужно для своего
баннера изменить ориентацию информационных полей на горизонтальную, и
добавить баннер на отдельную страницу своего сайта
41

42.

4 Контрольные вопросы
4.1 Дайте интерактивного баннера;
4.2 Назовите задачи, которые можно решить, внедрив интерактивный
баннер на свой сайт;
4.3 Расскажите о структуре кода, реализующего каждый блок баннера –
какие теги и элементы содержит каждый блок;
4.4
С
помощью
какой
технологии
можно
сделать
баннер
интерактивным?;
4.5 Расскажите про псевдоклассы, используемые в разметке баннера.
5 Задание на выполнение работы
Для
наглядности
и
упрощения
процесса
верстки
можно
воспользоваться сервисом https://codepen.io/
5.1 Разметка
Для начала создадим html-разметку для баннера-навигации.
<section class=”container”>
<div class=”section”>
<div class=”cont_title”>
<h1>Название заповедника</h1>
<h3>Статус</h3>
</div>
<div class=”cont_desc”>
<p>Местоположение</p>
</div>
</div>
</section>
42

43.

Рис.1 – Пример создания разметки
Есть общий родитель с классом .container, в него будут вложены наши
плашки — блоки .section.
В каждом из блоков есть место под заголовок и описание.
Остается скопировать и вставить блоки еще 4 раза и внести нужные
нам данные.
Рис.2 – Пример разметки для 4 блоков
43

44.

5.2 Стили
Для начала пропишем общие стили для страницы и нашего
родительского блока с классом .container.
html, body {
margin: 0;
max-width: 100%;
height: 100%;
}
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
width: 100vw;
}
Рис.3 – Пример вертикальной ориентации блоков
Здесь и далее имеем ввиду, что страница будет верстаться при помощи
технологии flexbox. Обязательно убедитесь, что все нужные вам браузеры
поддерживают ее. Проверить поддержку разных версий браузера можно по
ссылке.
44

45.

1vh = 1% высоты окна брузера, а 1 vw = 1% ширины окна браузера. В
отличии от процентов, эти единицы измерения всегда рассчитываются от
размеров окна браузера.
Исходя из этой логики баннер всегда будет во всю ширину и высоту
браузера.
Зададим стили для каждой из плашек.
.section {
position: relative;
height: 100%;
align-items: center;
justify-content: center;
box-sizing: border-box;
text-align: center;
flex: 1;
}
Рис.4 – Пример 4 блоков с заданным стилем текста
Обратите внимание на то, как записывается свойство flex-grow. Его не
пишут отдельно, а задают значение в рамках шортката flex. Это связано с
тем, что дальше он будет меняться по наведению курсора, а свойство flexgrow напрямую не поддается изменениям при помощи transition.
Далее задаем выключение по центру для текста, по центру же
выравниваем элементы на странице.
45

46.

Теперь оформим текстовые блоки.
.cont_title {
position: relative;
margin: auto;
width: 100%;
height: 300px;
text-align: center;
margin-top: 30vh;
}.cont_title h1 {
text-transform: uppercase;
text-shadow: 1px 2px 5px rgba(0, 0, 0, 0.5);
font-size: 3.5vw;
margin: 0;
vertical-align: middle;
}.cont_title h3 {
text-transform: uppercase;
font-size: 1.3vw;
}.cont_desc {
position: relative;
display: block;
text-align: center;
width: 60%;
height: auto;
margin: auto;
padding-top: 30px;
}.cont_desc p {
margin: 0;
font-size: 20px;
}
46

47.

Рис.5 – Оформление текстовых блоков
Размер текста тоже зададим в относительных единицах измерения.
Таким образом текст будет изменяться пропорционально размеру экрана и
всегда будет отлично выглядеть.
Реагировать на наведение курсора мыши мы можем при помощи
псевдокласса :hover.
.section:hover {
flex: 1.8;
transition: flex 0.4s;
}
Добавляем правило для каждого блока .section и «говорим», что при
наведении курсора он должен менять значение свойства flex-grow с 1 на 1.8.
Также добавим свойство transition и укажем, что меняться значение должно
равномерно, на протяжении 4 десятых секунды. Это позволит сделать
движение плавным, без рывка.
Далее зададим подобные свойства нашим текстовым блокам и укажем,
что размер текста тоже должен меняться по наведению мыши.
.section:hover > .cont_title h1 {
font-size: 5vw;
transition: font-size 0.4s;
}.section:hover > .cont_title h3 {
font-size: 1.5vw;
47

48.

transition: all 0.4s;}
Теперь давайте спрячем нижней текст в секции и будем показывать его
только по наведению.
Для этого в изначальные стили добавим свойство opacity со значением
0 (ноль) и напишем инструкцию по поведению текста в случае, когда курсор
находится над соответствующей секцией.
Свойство transition-delay задает небольшую задержку перед началом
анимации для того, чтобы текст начал проявляться когда блок уже немного
«вырастет».
.cont_desc {
opacity: 0;
}.section:hover > .cont_desc {
opacity: 1;
transition-delay: 0.5s;
transition: opacity 0.8s;
}
Зададим фон каждой из секций.
.section {
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}.section:nth-child(1) {
background-image: url(“http://epic.spb.ru/demo/pic1.jpg");
}.section:nth-child(2) {
background-image: url(“http://epic.spb.ru/demo/pic2.jpg");
}.section:nth-child(3) {
background-image: url(“http://epic.spb.ru/demo/pic3.jpg");
}.section:nth-child(4) {
background-image: url(“http://epic.spb.ru/demo/pic4.jpg");
48

49.

}.section:nth-child(5) {
background-image: url(“http://epic.spb.ru/demo/pic5.jpg");}
Чтобы
не
задавать
дополнительные
классы
воспользуемся
псевдоклассами :nth-child(n) и напишем правила с фоновыми картинками. В
изначальные правила для плашек добавим повторяющимся свойстваб
background-position, background-size и background-repeat.
Становится
очевидно,
что
черный
текст
на
фоне
красочных
фотографий почти не читается. Изменим цвет текста на белый и подключим
другой шрифт.
Для подключения шрифта воспользуемся css-правилом @font-face.
@font-face {
font-family: ‘Roboto Condensed’;
font-style: normal;
font-weight: 400;
src: local(“Roboto Condensed”), local(“Roboto Condensed-Regular”),
url(https://fonts.gstatic.com/s/Roboto
Condensed/v4/jObgDQiPUtmACAaaK3pMG6CWcynf_cDxXwCLxiixG1c.ttf)
format(“truetype”);
}.cont_title h1 {
color: white;
font-family: 'Roboto Condensed', sans-serif;
}.cont_title h3 {
color: white;
font-family: 'Roboto Condensed', sans-serif;
}.cont_desc p {
font-family: 'Roboto Condensed', sans-serif;
color: white;
}
49

50.

Добавим эффект затемнения для всех плашек кроме той, над которой
сейчас находится курсор. Для этого воспользуемся свойством filter со
значением brightness.
Обратите внимание, что это свойство может не поддерживаться
некоторыми браузерами.
Не забудем про transition для .section — чтобы затемнение
происходило плавно.
.container:hover > .section {
filter: brightness(22%);
}.container:hover > .section:hover {
filter: brightness(100%);
}.section {
transition: all 0.4s;
}
6 Отчёт должен содержать:
6.1 Титульный лист (с названием ВУЗа, кафедры, лабораторной
работы, а также фамилию И.О. студента, подготовившего отчёт).
6.2 Цель работы.
6.3 Результаты выполнения задания на ПК, в виде скриншотов с
пояснениями. Задание считается выполненным, если студент разработал
интерактивный баннер согласно варианту, а так же самостоятельно изменил
ориентацию блоков баннера с вертикальной на горизонтальную.
6.7
Выводы по проделанной работе.
50