Курсовая работа Разработка лендинга. Курсовая работа_Разработка лендинга. Создание Landing Page для ооо квест

Название	Создание Landing Page для ооо квест
Анкор	Курсовая работа Разработка лендинга
Дата	19.10.2022
Размер	1.27 Mb.
Формат файла
Имя файла	Курсовая работа_Разработка лендинга.docx
Тип	Курсовой проект #741092

КУРСОВОЙ ПРОЕКТ

на тему «Создание Landing Page для ООО «КВЕСТ»»

Содержание

Введение 3

Глава 1. Теоретические основы разработки Landing Page 5

1.1Понятие и назначение Landing Page 5

1.2Структура оформления Landing Page 8

1.3Основные этапы создания Landing Page 9

Глава 2. Этапы создания Landing Page с помощью HTML5 и CSS3 11

2.2. Поэтапная вёрстка лендинга 16

ЗАКЛЮЧЕНИЕ 19

Список использованных источников 21

Введение

Современный интернет-маркетинг включает в себя множество приемов и методов для повышения эффективности продаж. Существует ряд способов обратить на свою компанию внимание в интернете, привлечь новых пользователей и прорекламировать свой товар. Важный инструмент, с помощью которого достигается сразу несколько целей, – так называемая посадочная страница, или Landing Page . Практически каждая компания, серьезно занимающаяся продвижением в интернете, уделяет большое внимание созданию и развитию Landing Page страниц. С их помощью можно достичь отличных результатов сразу по нескольким направлениям.

Объект исследования: язык HTML5 и каскадные таблицы стилей CSS3, PHP7.

Предмет исследования: разработка Landing Page для ООО “Квест” с помощью HTML5 и CSS3, PHP.

Цель исследования: разработать Landing Page для ООО “Квест” при помощи языка гипертекстовой разметки документов HTML5 и каскадных таблиц стилей CSS3,а так же серверного языка PHP.

Задачи исследования:

1. Изучить и проанализировать учебно-методическую и специальную литературу по теме исследования, материалы Интернет-сайтов.

2. Изучить теоретические основы разработки Landing Page.

3. Изучить этапы создания Landing Page с помощью языка гипертекстовой разметки документов HTML5 и каскадных таблиц стилей CSS3, cерверного языка PHP.

4. Разработать Landing Page для ООО “Квест” с помощью языка гипертекстовой разметки документов HTML5 и каскадных таблиц стилей CSS3, серверного языка PHP.

Методы исследования: изучение литературы, анализ, синтез, обобщение, классификация.

Практическая значимость: материалы данной курсовой работы будут полезны при проведении профориентационной работы, а также заинтересованным лицам в сфере веб-дизайна и интернет-маркетинга.

Глава 1. Теоретические основы разработки Landing Page

Понятие и назначение Landing Page

Landing Page — это одностраничный сайт, ориентированный на продвижение конкретного типа товара или услуги. Основная задача такого ресурса — побудить посетителя к выполнению целевого действия.

Сайт - набор web-страниц, объединенных друг с другом общей темой, оформлением и ссылками. Это информационная единица, представляющая компанию или отдельно взятого человека, доступная из любого уголка мира, а также одно из современных средств передачи информации и рекламный продукт, дающий большие возможности в области поиска и привлечения клиентов.
Создание сайта в Интернете – это один из эффективных методов рекламы своих товаров и услуг, он заслужил признание как малого предпринимательства, так и крупных международных корпораций. В настоящий момент пользователями сети являются более четверти населения Земли, что является действительно внушительной цифрой. Поэтому сегодня огромное множество успешных компаний используют Всемирную Сеть как рекламу тем или иным способом.

От обычного сайта и сайта-визитки Landing Page отличается особой структурой.

Посадочная страница состоит из определённых блоков с исчерпывающей, но при этом лаконичной информацией. На Landing Page нет отвлекающих факторов. Посетителю даётся всего два сценария поведения — либо совершить целевое действие, либо не делать этого.

На обычном сайте таких сценариев намного больше. Клиент с помощью меню курсирует по страницам в поисках требуемой информации. В результате его внимание рассеивается, и он отвлекается от выполнения требуемого вам действия.

Они хорошо мотивируют посетителя совершить нужное действие. Они быстро конструируются. И часто стоят дешевле обычного сайта. Еще один плюс: посадочную страницу можно сделать самостоятельно.
Landing page легко переделать – улучшить, изменить, добавить недостающую информацию.

Базовые понятия о Landing Pagе:

Это одностраничный сайт. У пользователя нет возможности углубляться в разделы и подразделы.
Landing Page является концентратом маркетинговых хитростей. Каждый блок играет определенную роль и стоит на определенном месте.
Посадочная страница используется для продвижения 1 конкретного вида товаров и услуги.
Landing Page размещается в интернете. Человек может попасть на него, кликнув по ссылке.
Попадая на Landing Page, клиент находит именно то, что ищет. Точное соответствие запросу обеспечивается благодаря узкой специфике ресурса.

Цели и задачи Landing Page.

Основная цель создания Landing Page — побуждение потенциального клиента к выполнению целевого действия. В большинстве случаев это сводится к сбору контактных данных заказчиков с целью их последующей передачи в отдел продаж.

Ключевая миссия Landing Page – снять барьеры, которые могли бы помешать покупке, сделать из потенциального клиента реального. Буквально все элементы одностраничника заточены под продажи. Прежде всего, на мини-сайт возлагается не информационная, а продающая функция. Он подает информацию об интернет-магазине и предложении в лаконичной форме, не перегружая посетителя ненужными деталями.

. В некоторых случаях посадочные страницы используются для прямых продаж. Однако эффективность таких Landing Page значительно ниже

Landing Page используются при проведении рекламных кампаний:

Для сбора контактов потенциальных клиентов;
Для непосредственной продажи товаров и услуг;
Для повышения узнаваемости бренда в сети.

С помощью данного инструмента можно отстроиться от конкурентов, отразить преимущества вашего торгового предложения, а также обработать возражения клиентов и повысить их доверие.

Landing page — это ваш личный онлайн-маркетолог, который работает 24 часа в сутки, описывая все достоинства вашего бизнеса.

Виды Landing Page:

Click-through Page - чтобы совершить целевое действие на такой странице, клиенту достаточно совершить всего 1 клик. На данном Landing Page нет ни формы заявки, ни сложного дизайна — всего 1-2 экрана и кнопка.
Лидогенерирующая страница - это самый популярный тип landing page с более сложной структурой и дизайном. Такой Landing Page рассчитан на глубокую коммуникацию с клиентом. На нем есть форма заявки и CTA-элементы.
Squeeze Page - на такой странице посетителю предлагают бесплатно получить какой-либо полезный материал взамен на email. Этот вид Landing Page часто используется в инфобизнесе для продвижения услуг.
Продающая страница – целевые страницы, предназначенные для прямой продажи товара. Длина такого Landing Page зависит от того, насколько детально нужно раскрыть пользователю суть продукта и отстроиться от конкурентов. На нем есть кнопки «Заказать прямо сейчас».

Структура оформления Landing Page

В шапке сайта размещается логотип компании, название, дескриптор. Дескриптор – короткая надпись под логотипом, которая рассказывает, что это за сайт и чем занимается компания.

Ниже располагается торговое предложение или оффер.

Оффер - заголовок Landing Page, торговое предложение, то, что компания предлагает посетителю страницы. Он содержит само предложение и ключевые выгоды.

Средняя часть страницы: блоки о продукте или услуге. Это блоки с перечнем услуг и товаров, которыми занимается фирма.

Блок с рассказом о компании используют, если о компании есть что рассказать, или это непосредственный производитель товара / поставщик услуг.

В блоке используются факты достижений и ключевые преимущества. Компания – место на рынке, опыт, результаты, преимущества сотрудничества.

Блок важен для повышения доверия, особенно в высококонкурентных нишах, когда опыт работы или другие цифры и факты о компании могут склонить чашу весов в ее пользу.

Далее следует блок регистрации, в котором клиент оставляет свои контактные данные, которые в дальнейшем будут давать ему всевозможные скидки и акции при заказе.

В самом конце страницы размещаются контакты и адрес фирмы - он нужен, если у компании есть офис, это повышает доверие к ней.

Основные этапы создания Landing Page

Создание Landing Page можно разделить на следующие этапы:

Подготовительный.
Создание Landing Page.
Наполнение контентом.

Цель: определить назначение посадочной страницы.

Это первый и очень важный этап, который поможет создать действительно эффективный Landing Page. Имея четко обозначенную цель, будет намного проще составить структуру будущего сайта, написать текст и подобрать изображения.

Подготовительный этап включает в себя:

шаг. Анализ целевой аудитории.

Анализ целевой аудитории описан в Техническом задании.

шаг. Написание текста Landing Page.

Один из важных этапов в создании Landing Page - хорошо продуманный и написанный текст, который и будет привлекать потенциальных клиентов.

В данном сайте, это скидка при оффлайн заказе, на нее и делается основной акцент.

Текст в Landing Page должен быть читаемый, будь то описание услуг, продуктов или акции.

Составить структуру.

Структура веб-сайта – это его каркас, определяющий порядок навигации. Для того чтобы Landing page приносила максимум выгод, она должна соответствовать ряду требований, а именно содержать определенные элементы и обладать некоторыми характеристиками.

Стоит взять вопросы целевой аудитории, сгруппировать их по смыслу. Добавить рассказ о себе и оффер, описать его суть в нескольких предложениях.

Landing Page состоит из нескольких блоков, на каждый из которых возлагается определенная задача. Особенно важна качественная проработка блока с оффером, направленного на привлечение внимание и подогрев интереса посетителя. На нем отображаются заголовок, фоновая картинка, торговое предложение.

За блоком с оффером следуют блоки предложения. Здесь описываются услуги или характеристики товара. Далее располагают блоки действия, содержащие лид-формы. Если Landing Page длинный, их вставляют несколько раз. Последний элемент – блоки доверия, где размещается информация о компании .

Глава 2. Этапы создания Landing Page с помощью HTML5 и CSS3

2.1 Техническое задание на оформление Landing Page

Проведём анализ компании ООО Квест:

Информация о компании:

ООО «Квест». Грузоперевозки, изготовление строительных материалов. Основана в 2008 году.

Фирма "Квест" официально зарегистрирована по адресу: 692042, Приморский край, г. Лесозаводск, ул. Степная, д. 7Б.

Контактная информация:

Телефон: +7 908 993-37-89, +7 (423) 552-39-96;

Эл.почта: dima00425@yandex.ru

Адрес: - г. Лесозаводск, ул. Степная, д. 7Б.

Название: ООО «Квест».

Описание Landing Page: Сайт будет создан для ознакомления с основным перечнем услуг фирмы, а так же для рекламы (всевозможные скидки, акции, продвижение в интернете). Landing Page будет выполнен в деловом стиле, с разными информационными блоками и контактами для обратной связи с клиентами.

Информация о компании-заказчике:

Конкурентные преимущества: Большее количество услуг сконцентрированы в одной фирме, что значительно снижает время клиентов на поиск товара или услуги.

Основные конкуренты: Лесозаводский лесоперерабатывающий комплекс.

Регион распространения: Лесозаводский городской округ, Приморский край, Китайская Народная Республика.

Цель Landing Page: Сайт поможет осведомить потенциальных клиентов с полным перечнем услуг фирмы, что упростит работу сотрудников, и ускорит работу с клиентом.

Целевая аудитория: Люди, занимающиеся строительством частных домов, а так же предприятия, которые занимаются деятельностью в сфере строительства.

Мужчины от 30 до 50 лет (преимущественно), с техническим образованием. Проживающие в Приморском крае или КНР. Имеющие доход от 25 000 до 50 000 тысяч рублей в месяц.

Требования к дизайну и оформлению: Сайт в деловом стиле. Картинки в стилистике видов деятельности компании. Предпочтительные шрифты: Intro, Comfortaa, и похожие.

Предпочтительные цвета: Зеленый, серый, белый, черный.

Наполнение Landing Page:

Первый блок представляет собой верхнюю часть сайта, который будет содержать дескриптор и название организации.

В следующем блоке будет информация о действующих скидках и акциях фирмы.

Ниже будет располагаться перечень услуг фирмы в квадратных небольших блоках, которые будут информировать потенциальных клиентов.

В среднем блоке содержится информация о фирме, с которой пользователь может ознакомиться, это - общая информация о фирме, а так же преимущества.

В пятом блоке находится форма обратной связи с клиентом, которая представляет собой базу данных. Таким образом, все клиенты, оставившие контактные данные на сайте, будут занесены в базу данных компании, это будет предполагать скидки или акции при заказе.

Последний блок содержит контактную информацию, полезную для пользователя.

Примерная структура:

Шапка Landing Page — название организации+дескриптор.

Рисунок 1.1 - Шапка Landing Page.

Оффер:

Оффер — это уникальное торговое предложение. Он рассказывает суть товара или услуги, объясняет их предназначение и выгоду. Задача не продать сразу в лоб, как многие думают, а заинтересовать и сконвертировать посетителя в какое-то определенное действие, на определенном этапе продаж. Обычно, одно из самых простых, это получение заявки. Получив контакт будущего клиента, вы уже продаете ему по телефону или через email-маркетинг, что гораздо проще, чем продать на сайте.

Рисунок 1.2 - Банер с торговым предложением.

Оффер в данном Landing Pageе нацелен на получение контактной информации клиента, что очень важно при создании клиентской базы. Так же, скидка на продажу товара при покупке оффлайн, побуждает потенциального клиента оставить свои контактные данные.

Виды деятельности предприятия:

Рисунок 1.3 - Виды деятельности фирмы.

Сайт предоставляет скидку при регистрации, клиентам нужно видеть, чем занимается фирма и подходит ли это ему.

Об организации:

Рисунок 2.4 - Контакты фирмы.

Блок информирует покупателей о фирме, что сильно повышает доверие потенциальных клиентов.
Форма обратной связи:

Рисунок 2.5 - Форма обратной связи.

Создана для обратной связи, данные клиента заносятся в базу данных, при помощи которой и проверяется их наличие, при предоставлении скидки. А так же для удобной рассылки информации о предстоящих скидках и акциях компании.

Контакты фирмы:

Рисунок 1.6 - Контакты фирмы.

Блок контактной информации, по которой с фирмой могут связаться клиенты.

2.2. Поэтапная вёрстка лендинга

Для создания сайта были использованы: HTML5, CSS3, PHP 7 и реляционная база данных MySQL.

Программы для разработки:

Brackets - был использован для создания HTML-документа и для Каскадных таблиц стилей CSS.

Sublime Text 3 - был использован для работы с файлом PHP.

Так же был использован локальный сервер XAMMP, с поддержкой базы данных MySQL и поддерживающего я зык программирования PHP, для подключения к форме регистрации и структуризации вводимых данных пользователями.

Сайт был создан на скелете, который написан на HTML:

В данной работе используется блочная вёрстка веб-страниц. Блочная вёрстка— верстка с помощью тега

Заголовок - Создается в самом начале HTML-документа, используя парный тег <Title>…Title>, в нем пишется название страницы, которое будет отображаться при открытии вкладки.
Шапка - Создается при помощи тега <div> и селектора <сlass>, который имеет значение <Header>. К блоку применяется выравнивание с помощью тега <align> и его атрибута <center>, ограничения по ширине и высоте блока дают теги <width> и <height> , а так же заливка фона при помощи <background> и атрибута <color> .

Был создан отдельный файл с CSS-кодом «style.css», для читаемости основного кода HTML. Подключался файл через тег <link>, который и служит для связи этих двух файлов.

Верстка страницы - блочная:

1 блок - <div class=”header”>…div - верхняя часть сайта, там расположились название организации и дескриптор. Одна из важных частей сайта, потому что анализ и оценка сайта начинается именно с него.
2 блок – Ниже следует средняя часть сайта, в которой и расположен основной контент. Создается с помощью тегов <div> и его атрибута «class», который имеет следующие значения: banner, product, company, 1, r1, body, white, form, input, form-button к которым применяются отступы, заливка фона, сеточное выравнивание тегом <grid>, выравнивание текста, рамки.

В работе был использован атрибут CSS – Grid. Он используется для построения сетки блоков, на основе тега

. Значительно снижает скорость выравнивания и позиционирования блоков на экране. Обычно применяется для «плиточного» дизайна сайта или создания каталогов.

У данного селектора Grid множество атрибутов, которые дают большие возможности для блочной верстки.

Так же использовался в селекторах тег … - для создания рамок на изображениях.

В среднем блоке содержится форма, к которой так же применялись таблицы стилей и подключался файл PHP через атрибут тега

… «action», который будет отправлять данные, вводимые в форму, в базу данных и сохранять их в ней.

3 блок – Завершающей частью Lending Page является подвал или же «Footer».

В блоке <div class=”Footer”>…div> содержатся контактные данные фирмы. Он состоит из блоков <div>. К блокам применяется стилевое оформление с помощью селектора «Grid», который позволяет выровнять все блоки под нужное положение на странице. Так же используются изображения, которые будут являться иконками в данном блоке. Отступы и выравнивание текста так же были применены.

Для разработки Базы Данных MySQL был использован локальный сервер XAMMP, с помощью которого запускается Apache и используется язык запросов SQL.

Для создания Базы Данных нужно запустить phpMyAdmin, в котором и создается БД. В данном Lending Page подключается форма обратной связи к БД, для ее привязки необходим файл PHP, с определенным кодом. В коде должно быть прописано название базы данных и что к чему подключается.

В данной Базе Данных была использована привязка с помощью атрибута «id», который определяет номер пользователя. Значения атрибутов «Email» и «Password», помогают сохранить адрес электронной почты клиента и пароль.

ЗАКЛЮЧЕНИЕ

Проделанная работа позволяет сделать выводы о том, насколько актуальна тема «Разработка Landing Page ООО “Квест”» на сегодняшний день и как важно знать особенности разработки, вёрстки и публикации сайта в сети Интернет.

В ходе выполнения курсовой работы были решены цель и задачи исследования.

Landing Page — это одностраничный сайт, ориентированный на продвижение конкретного типа товара или услуги. Основная задача такого ресурса — побудить посетителя к выполнению целевого действия.

В настоящее время в интернете множество компаний, которые используют Landing pag под абсолютно любые виды услуг.
Использование сайта позволяет не только привлечь новых клиентов, но и раскрутить товарный знак компании, сделав его более запоминающимся среди потребителей, а также заинтересовать новых партнеров и инвесторов. Главными преимуществами в интернете можно назвать непрерывную работу сайта 24 часа в сутки и невысокую стоимость его создания и продвижения, а также с помощью сайта можно предоставлять клиентам необходимую информацию, отслеживать их интерес к товарам и услугам.
Сайт является инструментом продвижения лаборатории на рынке соответствующих услуг.
При написании курсовой работы была изучена дополнительная информация по созданию сайта с помощью различных Web-технологий разработки.

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

Структура Landing Page состоит из трёх частей: представление и предложение, о продукте (курсе, услуге, товаре), призыв к действию, вызов доверия, завершающая часть, которые, в свою очередь, имеют свои блоки.

Качество Landing Page зависит от соблюдения следующих требований: расположения блоков, размещаемой информации, дизайна сайта, использования нормативно-правовой базы.

Реализованы следующие этапы создания Landing Page с помощью HTML5, CSS3, PHP. Подготовительный, который включает в себя определение целей создания сайта, анализ целевой аудитории и конкурентов. Создание Landing Page с помощью специальных программ и наполнение его контентом. Важными моментами в вёрстке сайта являются: выбор структуры, вида вёрстки веб-страниц. Для данного Landing Page использована блочная верстка и адаптивный дизайн, который позволяет просматривать Landing Page с различных устройств. При вёрстке следует помнить о базовых принципах дизайна, таких как единство шрифтов, отступов между блоками, сочетание цветов фона и текста. Публикация в сети Интернет является последним и важным моментом в работе над Landing Page. Основные этапы размещения сайта в сети Интернет - это регистрация домена, заказ хостинга, привязка домена к хостингу и размещение сайта на хостинге.

Таким образом, был разработан Landing Page для ООО “Квест” при помощи языка гипертекстовой разметки документов HTML5 и каскадных таблиц стилей CSS3 и PHP7.

Список использованных источников

Landing Page — что это такое простыми словами. -[Электронный ресурс].- 2020 .- URL: http://klientizdes24.ru/landing-chto-eto-takoe-prostymi-slovami/
Офер. – [Электронный ресурс]. – 2019. – URL: https://sendpulse.com/ru/support/glossary/offer
Структура Landing Pageа. – [Электронный ресурс].- 2020 .- URL: https://www.directline.pro/blog/struktura-landinga/ .
Структура Landing Pageов, основные блоки для конвенверсии посадочных страниц.- [Электронный ресурс].-2019 .- URL: https://texterra.ru/blog/struktura-lendingov-osnovnye-bloki-dlya-povysheniya-konversii-posadochnykh-stranits.html .
Самоучитель HTML.
Учебник HTML.
Руководство по PHP.
Клуб разработчиков PHP.

Приложение 1 Код HTML

Виды деятельности компании:

Складирование и хранение

Лесозаготовки

Распиловка и строгание древесины

Пропитка древесины

Производство шпона

Оптовая тогровля лесоматериалами

Упаковка лесоматериалов

Грузоперевозки

Фирма на рынке более 13-ти лет!

Международные сотрудничества

Более 1000 покупателей выбирают - ООО "Квест"

Высокое качество и экономичное производство

Обратная связь

Пароль

Эл.почта: dima00425@yandex.ru

Телефон:
+7 908 993-37-89
+7 (423) 552-39-96

Приложение 2 Код CSS

@font-face {

font-family: 'open-sans-bold_[allfont.ru].ttf';

src: url('open-sans-bold_[allfont.ru].ttf');

font-weight: normal;

font-style: normal;

}

.header{

text-align: center;

font-family: genuine;

height: 32%;

width: 100%;

background:#222222;

}

.banner{

width: 90%;

height:70%;

background:#b5b8b1;

}

.product {

display: grid;

grid-gap: 10px;

grid-template-columns: repeat(auto-fill,minmax(300px, 300px));

margin: 4% 0.5% 4% 2.5%;

text-align: center;

background:#b5b8b1;

}

.company{

height: 250px;

width: 55%;

display: grid;

grid-gap: 15px;

grid-template-columns: repeat(2, minmax(100px, 1fr) 200px);

margin: 40px 22.5% 40px 22.5%;

padding-bottom:auto;

}

.1{

padding-bottom: 50px;

}

.r1{

border-radius:40em;

}

body{

background:#b5b8b1;

font-family: 'open-sans-bold_[allfont.ru].ttf';

}

.white{

border-radius: 0.5em;

background: white;

}

.form{

border-radius:100px;

width: 50%;

height: auto;

background:grey ;

text-align: center;

}

input{

border-radius: 0.4em;

padding: 5px 0px 5px 0px;

margin: 10px 0px 20px 0px;

}

.form_bbutton{

border-radius: 0.4em;

}

footer{

height: 300px;

width: auto;

}

.block1{

font-family: 'open-sans-bold_[allfont.ru].ttf';

height: 100px;

width: 55%;

display: grid;

grid-gap: 10px;

grid-template-columns: repeat(2, minmax(100px, 1fr) 200px);

margin: 40px 22.5% 40px 22.5%;

padding-bottom:auto;

}

Приложение 3 Код Подключения базы данных

$Email = $_POST['Email'];

$pass = $_POST['pass'];

$mysql = new mysqli('localhost','root','','kvest');

$mysql->query("INSERT INTO `kvest` (`Email`,`pass`)

VALUES('$Email', '$pass')");

$mysql->close();

?>