Разработка web-проекта для кулинаров

Размещено на http://www.allbest.ru/

Министерство образования Пензенской области

Государственное автономное профессиональной образовательное учреждение Пензенской области

«Пензенский колледж информационных и промышленных технологий (ИТ - колледж)»

Учебный комплекс информационных технологий

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

по МДК 12.01 Выполнение работ по компетенциям WorldSkills

Тема «Разработка web-проекта для кулинаров»

Выполнил : Семенов Петр Николаевич

обучающийся 1 курса группы 20ИТ35

по специальности 09.02.07 Информационные системы и программирование,

Руководитель курсового проекта

Судовчихина Анастасия Викторовна

Пенза, 2021 г.

Содержание

Оглавление

• Введение
• 1. Постановка задачи
• 1.1 Цели создания веб-проекта
• 1.2 Анализ конкурентов
• 1.3 Требования к веб-проекту
• 1.3.1 Функционирование веб-проекта
• 1.3.2 Функциональные требования
• 1.4 Целевая аудитория
• 1.5 Обоснование веб-стиля
• 1.6 Ожидаемые результаты
• 2. «Проектирование»
• 2.1 «Информационная архитектура»
• 2.1.1 Логическая структура проекта
• 2.2 Физическая структура проекта
• 2.2.1 Разработка логотипа
• 2.2.3 Цветовая схема
• 2.2.4 Правила использования
• 2.2.5 Расчет модульной сетки и композиция
• 2.2.6 «Макеты типовых, уникальных, вспомогательных страниц»
• 2.3 Дизайн-макетирование
• 3. Веб-верстка
• 3.1 Инструменты веб-верстки и разработки
• 3.2 Интерактив и мультимедиа
• 3.3 Валидация и тестирование
• 3.3.1 «CSS и HTML валидация»
• 3.3.2 «Юзабилити-тестирование
• Заключение
• Список используемой литературы
• Приложение А
• Приложение Б
• Приложение В
• Приложение Г
• Приложение Д
• Приложение Е
• Приложение Ё
• Приложение Ж

• ЗАДАНИЕ
• на курсовое проектирование
• 1. Студент
• Группы
• Специальность
• 2. Руководитель ВКР
• 3. Время выполнения ВКР
• 4. Место преддипломной практики (для специальностей)
• _____________________________________________________
• 5. Тема ВКР
• Тема утверждена приказом
• 6.Техническое задание на ВКР (назначение, условия применения, внешние воздействия, специальные требования и т.п.)
• 7. Объём и содержание основной части ВКР
• 7.1. Пояснительная записка (перечень вопросов, подлежащих разработке, расчётов, обоснований, описаний)
• 7.2. Графическая часть (перечень и содержание чертежей, плакатов)
• 8. Консультанты и содержание дополнительных разделов (указывается конкретное содержание задания)
• 8.1. По экономике и организации производства
• Консультант __________________ /Судовчихина А.В./
• Календарный график работ по выполнению ВКР.

Наименование этапов работы	Объём работы	Срок выполнения	Подпись руководителя, консультанта
Введение. Обсуждение		16.05.2021
Теоретическая
Практическая часть
Заключение
Список литературы		10.06.2021

• Примечание. Задание по п. 8 должно быть согласовано с руководителем проекта.
• В случае, если по отдельным дополнительным разделам (см. п. 8) консультанты не назначаются, то необходимые задания на проектирование выдаёт руководитель проекта и в носит в п.п. 8.1-8.3.
• Дата выдачи « » 20 г. _____________________ / Судовчихина А.В
• Руководитель ВКР
• «___» 20 г.
• Задание к исполнению принял
• _____________________ / Судовчихина А.В


Введение

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

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

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

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

Ив этом отношении, важны все нюансы - цвета, шрифт и, конечно, общее настроение, которое создает дизайна сайт.



1. Постановка задачи

Целью курсового проекта является разработка кулинарного проекта. В соответствии с темой необходимо выполнить разработку информационного и интерфейса для работы с ней. Разработка интерфейса осуществляется с применением Web-технологий. Областью исследования являются сайты о кулинарии. В результате мною была собрана информация, выявлены плюсы и минусы информативных сайтов

В связи с этим к данному курсовому проекту были выдвинуты следующие функциональные требования:

- исследовать предметную область;

- собрать необходимую входную и выходную информацию;

- произвести тестирование отладку программного продукта;

- кликабельность;

- эффективность по потребляемым ресурсам;

В дополнение к функциональным требованиям также выдвинуты следующие нефункциональные требования:

- простота интерфейса;

- приятный дизайн;

- простота установки;

- надежность и бесперебойность работы;

1.1 Цели создания веб-проекта

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

Основной целью создания веб - проекта является:

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

– создание с возможностью продолжения дальнейшего обучения.

– разделение среды обучения на составляющие части по типам

навыкам аудитории.

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

– увеличение количества учащихся и соответственно преподавателей.

1.2 Анализ конкурентов

Разберем аналоги среди российских сайтов и зарубежных.

Например, сайт«Golubkakitchen» (рис.1.). Утонченный дизайна сайта, большие яркие фотографии. В header шрифтовой логотип с использованием 3х цветов, которые больше на сайте не используются.

Рисунок 1-- Главная страница сайта golubkakitchen.com

Минусы:

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

-форма рецепта не компактна, необходимо ее прокручивать несколько раз.

А в случае, если Вы забыли какой-то ингредиент, необходимо возвращаться в начало страницы.

Плюсы:

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

-множество ссылок на аналогичные сайты рецептов.

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

Российский аналог сайт журнала «Хлеб и соль», слоган которого гласит «простые решения/легкие рецепты», который безусловно не относится к дизайну сайта. Он перегружен и цветом и графическими элементами, множество цветов используется при оформлении сайта. А иконки будто нарисованы цветными карандашами, как и форма поиска

Рисунок 3 -- Поиск сайта «Хлеб и соль»



Перегружена шапка (рис 1.2) сайта информацией, которую можно было разместить на странице без потерь. Огромное количество рекламы, которая только добавляет «шума» в дизайне сайта.

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

-Удобный поиск с множеством условий, возможность сортировки в зависимости от популярности или времени добавления;

1.3 Требования к веб-проекту

1.3.1 Функционирование веб-проекта

Для отличного функционирования веб-проекта необходимо использовать один из широкодоступных интернет браузеров: Opera , Firefox, Safari, Google Chrome. Веб-проект был полностью разработан и адаптирован под использование как на мобильной так и на полноценной версии.

В качестве разрешения экрана использовалось1500х 750 пикселей;

В качестве операционной системы могут использовать Windows 7, Windows8, а также Windows10 и разнообразные версии данный ос.

1.3.2 Функциональные требования

Основными требованиями являются:

- удобство в обращении ( все под руками)

- высокая скорость загрузки

- отсутствие перегруженности текста, информативность

- удобная поддержка

- высокая скорость ответа по запросам



1.4 Целевая аудитория

В первую очередь решает проблему поиска прекрасных рецептов,

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

Целевая аудитория у данного сайта очень широкая, по большей части женщины от 20 до 60. Безусловно мужчины не исключены, поскольку, как оговаривалось в начале, готовить интересно всем. Это очевидно из комментариев к рецептам и на форумах, на них не мало мужчин. Они делятся своими рецептами, полюбившимися блогами.

Сайт рассчитан на русскоговорящую аудиторию, которая сталкивается с проблемой -- «Что приготовить? ». Если посетитель даже не знает точно, чего бы ему хотелось, из какой кухни, на сайте он всегда найдет несколько тематических подборок, которые регулярно обновляются и помогут определиться с выбором.

1.5 Обоснование веб-стиля

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

Классический стиль предполагает наличие четкой колончатой структуры. Навигация преимущественно горизонтальная или вертикальная, стандартная и понятная, в хедере - слева название, логотип/слоган, а футер содержит данные о копирайте, контактной информации. Контент распределяется с помощью боковых колонок и блоков. Шрифты - классические, стандартные, наиболее удобочитаемые: Arial, а также Lobster Цветовая гамма без ярких или слишком мрачных цветов, с минимальным количеством графики и практически полным отсутствием анимации.

Контент - грамотный, актуальный.

Исключительной чертой были небольшие доработки в дизайне. Мною был изменен цвет верхней и нижней панели сайта.

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

1.6 Ожидаемые результаты

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



2. «Проектирование»

2.1 «Информационная архитектура»

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

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

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

Рисунок 4- Архитектура сайта

2.1.1 Логическая структура проекта

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

2.1.2 Навигация

Как будет выглядеть сайт на устройствах с разным разрешением и разными размерами экрана.

Лучший способ сделать страницу простой для быстрого схватывания --это организовать внешний вид элементов страницы (визуальных подсказок) таким образом, чтобы они ясно и четко показывали отношения между этими элементами -- какие элементы связаны между собой, какие являются частями других элементов. Так выделено несколько областей на главной странице, помимо: «Главная» с переходом на основную страницу, «Кулинарная школа» с переходом на обучающие мероприятия, «Контакты» с информацией о данных для записи на курс, а также «Новости» с последней информацией о сайте и новых реализованных программах, «О нас» реферальными ссылками об оплате, всей юридической информации о сайте и т.д., «Учителя»- с материалами об учителях, их стажем работы, видом кухни, которую преподает, во вкладке «Материалы» находится информация о всех доступных рецептах, «Курсы» же открывают перед нами всё доступное обучение на сайте, по степени сложности , а «Настройки» реализуют доступные изменения на странице, вкладка «Войти» разворачивает окно с входа

Важно понимать, как пользователь видит страницу, «сканирует» ее, останавливаясь взглядом лишь на расставленных акцентах.

2.2 Физическая структура проекта

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

Рисунок 5- Физическая структура сайта

2.2.1 Разработка логотипа

Важным элементом узнаваемости сайта является логотип.

Логотип - оригинальное изображение, отражающее сущность компании, организации, товарного знака.

В качестве логотипа мной были выбрано упрощенное изображение

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

Рисунок 6- Логотип сайта

2.2.2 «Типографика»

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

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

Шрифт Arial имеет огромное количество преимуществ, он удобочитаем, легко запоминается, а также отлично подходит под классический стиль сайта,

А так же помимо этого мною был использован дополнительный шрифт LOBSTER

Рисунок 7-шрифт Lobster

2.2.3 Цветовая схема

Каждый цвет имеет множество значений. Существует взаимодействие цвета и времени - каждая эпоха выбирает свой цвет: серый - пуританство и послевоенная Британия, Древний Рим - пурпур, как символ власти. Очень большое разнообразие цветов - нация процветает. Существует также школа исцеления с помощью цвета. Впервые над этим задумались древние греки: проходя через окно храма цвет разбивается на спектр, таким образом, человек вбирал тот цвет, который хотел. В Древнем Китае на солнце лежали в красном шелке - излечение следов оспы. В 18 веке в Европе были

В качестве основных цветов мной было рассмотрено несколько вариантов:

Рисунок 8 -цвета сайта

Рисунок 9 основные цвета сайта

Рисунок 10 основные цвета страницы BBQ

2.2.4 Правила использования

Правила использования или гайдлайн

Гайдлайн -- это документ, подробно описывающий ваш бренд, и то как его использовать. Это набор правил и рекомендаций, и самое главное -- готовых дизайн-решений. Содержание:

– приветствие и немного информации о компании;

– логотип, рациональное и эмоциональное обоснование;

– использование логотипа: горизонтальный и вертикальный, цветной и ч/б, исполнение на разных фонах, также на различных видах рекламных носителей и при разных способах изготовления;

– шрифты и цвета;

– элементы оформления: паттерн (фирменный узор), фотографии, фоны, плашки и так далее;

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

2.2.5 Расчет модульной сетки и композиция

Модульная сетка представляет собой набор невидимых направляющих, вдоль которых располагаются элементы web-страницы.

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

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

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



Рисунок 11--разметка сайта

2.2.6 «Макеты типовых, уникальных, вспомогательных страниц»

Рисунок 12 -Макеты страниц сайта

– Выше мной на изображении представлены элементы сайта:

– Верхнее меню, заголовки, доступные программы обучения с описание, пример программы обучения, контактная информация,

2.3 Дизайн-макетирование

Во время работы над дизайном сайта мною были разработаны основные элементы, сгруппированы по разделам, а так же распределены по необходимым частям веб сайт дизайн макетирование

Рисунок 13-Пример макета



3. Веб-верстка

3.1 Инструменты веб-верстки и разработки

В качестве элеменов разработки мною были использованы разнообразны средства.Sublime Text -- проприетарный текстовый редактор. Поддерживает плагины на языке программирования Python. Разработчик позволяет бесплатно и без ограничений ознакомиться с продуктом, однако программа уведомляет о необходимости приобретения лицензии.Он отлично подходит для написания кода программы, а также не нагружает глаза и очень удобен.

В качестве графического редактора мной был выбран Gimp-GNU Image Manipulation Program или GIMP («Гимп») -- свободно распространяемый растровый графический редактор, программа для создания и обработки растровой графики и частичной поддержкой работы с векторной графикой.

3.2 Интерактив и мультимедиа

Интерактив - понятие, которое раскрывает характер и степень взаимодействия между объектами.

Интерактивный сайт - это динамический, постоянно изменяющийся по своему содержанию ресурс. Причем изменения эти производятся непосредственно посетителями сайта.

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

Для создания таких элементов обычно используется язык программирования JavaScript.

В моем проекте можно выделить следующие интерактивные элементы:

-это меню входа на сайта. При наведении на вкладку «Вход»» меня плавно появляется перед пользователем на экране.

При создании мной были использованы элементы java script и css:

Программный код представлен в приложении Д и Е.

3.3 Валидация и тестирование

3.3.1 «CSS и HTML валидация».

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

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

Валидация сайтов - это проверка специальными программами на соответствие HTML-кода страниц сайта и CSS-кода современным стандартам.

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

info

Consider adding a “lang” attribute to the “html” start tag to declare the language of this document.

Строка: 2

TYPE html>

<html>

<head

error

Element “head” is missing a required instance of child element “title”.

Строка: 45

3.3.2 «Юзабилити-тестирование

Рисунок 14 -Примеры программ сайта

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

Рисунок 15 -Пример анимации входа сайта

Во втором случае гость решил поинтересоваться доступными программами обучения на сайте, в ходе которого выбрал 1 из возможных программ:



Заключение

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

Разработана структура сайта и структура, используемой базы данный. Рассмотрены основные сущности и их атрибуты.

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

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

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



Список используемой литературы

1. Томсон Лаура. Разработка Web-приложений на РНР и MySQL: Пер. с англ./Лаура Томсон, Люк Веллинг. - 2-е изд., испр. - СПб: ООО «ДиаСофтЮП», 2003. - 672 с.

2. Котеров Д. В. Самоучитель PHP 4. - СПб.: БХВ-Петербург, 2001. - 576 с.: ил.

3. Модульное программирование на PHP или как написать маленький портал. - www.webscript.ru

4. http://www.cyberforum.ru/ - форум программистов и сисадминов.

5. https://ru.stackoverflow.com - форум программистов и web - разработчиков.

6. https://www.sololearn.com - курсы и уроки по HTML и CSS

7. http://htmlboss.ru/beginner - HTML для начинающих

8. webdesign-master.ru - познавательный сайт для более глубокого ознакомления с web-дизайном и версткой

9. www.codecademy.com -- англоязычный сервис, где можно проверить свои знания на практике.

10. htmlacademy.ru -- русскоязычный сервис, где упор идет на практику + немного теории



Приложение А

Приложение Б



Приложение В

Приложение Г



Приложение Д



Приложение Е

<!DOCTYPE html>

<html>

<head>

<title>Pure Spice</title>

<link rel="preconnect" href="https://fonts.gstatic.com">

<link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet">

<meta name="viewport" content="width=device-width, initial-scale=1">

<style>

body {margin:0;}

.navbar {

overflow: hidden;

background-color: #333; /*цвет текста панели*/

width: 10%;

top: 0;

/* доработал меню реистрации*/

}

.navbar a {

float: left;

display: block;

color: #f2f2f2; /*цвет текста во вкладках*/

text-align: center;

padding: 14px 16px;

text-decoration: none;

font-size: 17px;

}

.navbar a:hover {

background: #ddd;/*цвет текста при наведениии курсора*/

color: black;

}

.main {

padding: 16px;/* размеры откуда включается прокрутка*/

margin-top: 30px;

height: 1350px; /* Используется в данном примере для включения прокрутки */

}

</style>

</head>

<body>

<div class="navbar">

<a href="fixbar.html"><img src="фот/лого2сайта.jpg" width = "50" height= "50" alt="Амброзия">

</a>

<a href="#">Главная</a>

<a href="#">Кулинарная школа</a>

<a href="#">Контакты</a>

<a href="#">Новости</a>

<a href="#">О нас</a>

<a href="#">Учителя</a>

<a href="#">Материалы</a>

<a href="#">Курсы</a>

<a href="#">+79512992116</a>

<a href="#">Настройки</a>

<a href="#contact"><button onclick="document.getElementById('id01').style.display='block'" style="width:auto;">Войти</button></a>

<div id="id01" class="modal">

<form class="modal-content animate" action="/action_page.php">

<div class="imgcontainer">

<span onclick="document.getElementById('id01').style.display ='none'" class="close" title="Close Modal">Ч</span>

<img src="фот/лого2сайта.jpg" width = "300" hight = "300" alt="Ava" class="ava">

</div>

<div class="container">

<label for="uname"><b>Ваше имя</b></label>

<input type="text" placeholder="Enter Username" name="uname" required>

<label for="psw"><b>Пароль</b></label>

<input type="password" placeholder="Enter Password" name="psw" required>

<button type="submit">Войти</button>

<label>

<input type="checkbox" checked="checked" name="remember"> Запомнить меня

</label>

</div>

<div class="container" style="background-color:#f1f1f1">

<button type="button" onclick="document.getElementById('id01').style.display='none'" class="cancelbtn">Назад</button>

<span class="psw"> <a href="#"></a></span>

</div>

</div>

<div class="main">

<div class="основная_картинка">

<div class="черный_фон" width="560"

height="400">

<h1 style="color:white">Кулинарная школа</h1>

<h2 style="color:white">Кулинарные курсы онлайн и офлайн в современной<br>школе в центре Москвы, оборудованной современной<br> техникой. Различные направления обучения<br> от ведущих шефов России и мира для кулинаров-<br>любителей и профессиональных поваров.</h2>

</div>

<div class="черный_фон2">

<h2 style="color: white">Настоящие кулинарные курсы онлайн для тех,кто любит готовить или хочет научиться это делать легко и непринужденно. Готовьте вместе дома впрямом эфире или в записи!</h2>

</div>

</div>

<meta name="viewport" content="width=device-width, initial-scale=1">

<style>

body {

margin: 0;

font-family: Arial, Helvetica, sans-serif;

}

input[type=text], input[type=password] {

width: 100%;

padding: 12px 5px;

margin: 8px 0;

display: inline-block;

border: 1px solid #ccc;

box-sizing: border-box;

}

/* Set a style for all buttons */

button {

background-color: #000000;

color: white;

padding: 10px 10px;

border: none;

cursor: pointer;

width: 100%;

}

button:hover {

opacity: 0.8;

}

/* Extra styles for the cancel button */

.cancelbtn {

width: auto;

padding: 10px 18px;

background-color: #000000;

}

/* Center the image and position the close button */

.imgcontainer {

text-align: center;

margin: 24px 0 12px 0;

position: relative;

}

img.avatar {

width: 40%;

border-radius: 50%;

}

.container {

padding: 16px;

}

span.psw {

float: right;

padding-top: 16px;

}

.modal {

display: none;

z-index: 1;

left: 10px;

top: 0;

width: 100%;

height: 70%;

overflow: auto;

background-color: rgb(0,0,0);

background-color: rgba(0,0,0,0.4);

padding-top: 60px;

position: fixed;

}

.modal-content {

background-color: #fefefe;

margin: 5% auto 15% auto;

border: 1px solid #888;

width: 80%;

}

.close {

position: absolute;

right: 25px;

top: 0;

color: #000;

font-size: 35px;

font-weight: bold;

}

.close:hover,

.close:focus {

color: red;

cursor: pointer;

}

.animate {

-webkit-animation: animatezoom 0.6s;

animation: animatezoom 0.6s

}

@-webkit-keyframes animatezoom {

from {-webkit-transform: scale(0)}

to {-webkit-transform: scale(1)}

}

@keyframes animatezoom {

from {transform: scale(0)}

to {transform: scale(1)}

}

@media screen and (max-width: 300px) {

span.psw {

display: block;

float: none;

}

.cancelbtn {

width: 100%;

}

}

}

head

{margin:0;}

.верхнийлевый{}

.navbar {

overflow: hidden;/*формирование полос прокрутки*/

background-color:black;/*цвет панели навигации*/

position: absolute; /*фиксированная позиция*/

top: 0; /*приоритет расположения*/

width: 1350px;/*размер на странице полосы бара*/

}

.navbar a {

float: left;/*расположение*/

display: block;

color: white;/*цвет букв в панели*/

text-align: center;

padding: 14px 16px;/*размер выделяемой области при наведении мышью*/

text-decoration: none;

font-size: 17px;/*размер кнопки*/

height: 50px;

}

.navbar a:hover {

background:gray;

color: black;

height: 30px;

}

.main {

padding: 16px;

margin-top: 30px;

height: 1700px; /* Используется в данном примере для включения прокрутки */

}

</style>

</head>

<body>

<style>

body {margin:0;}

.основная_картинка{/*тут картинка поваров и свойства класса*/

background:url('фот/фон.jpg');

background-color: grey;

width: 1350px;

height: 600px;

left: -10px;

margin-top:40px;

border: 0px;

position: relative;

}

.вторая_часть_страницы{

width: 1350px;

height: 600px;

border: 2px outset white;

background-color: grey;

background:url('фот/фон2.2.jpg');

position:relative;

}

.нижняя_панель{

width:500;

height: 1200;

border:2px outset white;

background-color:black;

position: relative;

}

.черный_фон{

opacity: 0.6;

background:black;

padding: 5px;

height: 350px;

width: 550px;

}

.черный_фон2{

opacity: 0.7;

background:black;

padding: 5px;

height: 190px;

width: 500px;

position:relative;

left:700px;

right:700px

}

.Фон_еда_окно1{

opacity: 0.9px;

padding: 2px;

height: 500px;

width: 300px;

position:absolute;

left: 100px;

background: black;

top: 30px;

font-family: 'Lobster', cursive;

text-decoration-color:"#A52A2A";

}

.Фон_еда_окно2{

opacity: 0.9;

padding: 2px;

height: 500px;

width:300px;

left:500px;

background: black;

position:absolute;

top: 30px;

font-family: 'Lobster', cursive;

text-decoration-color:"#FFF8DC";

}

.Фон_еда_окно3{

opacity: 0.9;

padding: 2px;

height: 500px;

width:300px;

position:absolute;

left: 900px;

background: black;

top: 30px;

font-family: 'Lobster', cursive;

text-decoration-color:"#A52A2A";

}

.button {

display: inline-block;

border-radius: 4px;

background-color: #A52A2A;

border: none;

color: #FFFFFF;

text-align: center;

font-size: 28px;

padding: 20px;

width: 200px;

transition: all 0.5s;

cursor: pointer;

margin: 5px;

height: 65px;

}

.button span {

cursor: pointer;

display: inline-block;

position: relative;

transition: 0.5s;

}

.button span:after {

content: '\00bb';

position: absolute;

opacity: 0;

top: 0;

right: -20px;

transition: 0.5s;

}

.button:hover span {

padding-right: 25px;

}

.button:hover span:after {

opacity: 1;

right: 0;

}

</style>

<div class="вторая_часть_страницы">

<div class="Фон_еда_окно1">

<img src="фот/десерт мороженное.jpg" width="300" height="300" >

<p style="size:2px;color: #FFF8DC ">

Секреты десертов:новые идеи</p>

<p style="size:2px; color:#FFF8DC;"><font size="3">

Ближайшая группа</font><font color="#A52A2A" size="3">25.05.21</font></p>

<p style="size:3px; color:#FFF8DC;">

Начинающий <font color="#A52A2A" size="3">6</font>

занятий<font color="#A52A2A" size="3">

4500p</font></p>

<button onclick="document.location='C:/Users/Петр/Desktop/лабы/w/2 вкладка.html'"class="button" style="vertical-align:middle"><span>Открыть </span></button>

</div>

<div class="Фон_еда_окно2">

<img src="фот/баклажанззакуски.jpg" width="300" height="300" left="0">

<p style="size:2px; color:#FFF8DC;">

Секреты ПП:как правильно питаться</p>

<p style="size:2px; color:#FFF8DC;"><font size="3">

Ближайшая группа</font><font color="#A52A2A" size="3">03.05.21</font></p>

<p style="size:3px; color:#FFF8DC;">

Начинающий <font color="#A52A2A" size="3">9</font>

занятий<font color="#A52A2A" size="3">

7500p</font></p>

<button onclick="document.location='C:/Users/Петр/Desktop/лабы/w/2 вкладка.html'"class="button" style="vertical-align:middle"><span>Открыть </span></button>

</div>

<div class="Фон_еда_окно3">

<img src="фот/мясо 2.jpg" width="270" height="300">

<p style="font-size:15px; color:#FFF8DC;">BBQ легко и просто</p>

<p style="size:2px; color:#FFF8DC;">

<font size="3">Ближайшая группа </font><font color="#A52A2A" size="3">15.05.21</font></p>

<p style="size:3px; color:#FFF8DC; ">

Начинающий <font color="#A52A2A" size="3"> 6</font>

занятий<font color="#A52A2A" size="3">

5500p</font></p>

<button onclick="document.location='C:/Users/Петр/Desktop/лабы/w/2 вкладка.html'"class="button" style="vertical-align:middle"><span>Открыть </span></button>

</div>

</div>

<div class="нижняя_панель">

<div style="

position:

left: 750px;

top:150px;

soverflow:hidden;">

<h3 style="color: white; size:5">Контакты </h3>

<h3 style="color: white">Поддержка</h3>

<h3 style="color: white">Правовая инф</h3>

<h3 style="color: white">Видеоуроки</h3>

<h3 style="color: white">Лицензия</h3>

<h3 style="color: white">Соглашения</h3>

<h3 style="color: white">Сведения об образовательной организации</h3>

<iframe src="https://yandex.ru/map-widget/v1/-/CCUaaGFuWC"

width="560"

height="400"

frameborder="1"

allowfullscreen="true"

style="position:absolute;

left: 750px;

top:100px">

</iframe>

<h3 style="color: white">Наши партнеры</h3>

<h3 style="color: white">Реструктуризация</h3>

<h3 style="color: white">Поддержка</h3>

<h3 style="color: white">Отзывы</h3>

<h3 style="color: white">Наша команда</h3>

</div>

</div>

</div>

</body>

<script>

var modal = document.getElementById('id01');

window.onclick = function(event) {

if (event.target == modal) {

modal.style.display = "none";

}

}

</script>

</html>

Приложение Ж

<!DOCTYPE html>

<html>

<head>

<link rel="preconnect" href="https://fonts.gstatic.com">

<link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet">

<meta name="viewport" content="width=device-width, initial-scale=1">

<style>

body {margin:0;

font-family: Arial, Helvetica, sans-serif;

}

.button3{

height: 150px;

width: 100px;

right: 300px;

top:-100px;

left: 900px;

position:relative;

}

.button2 {

display: inline-block;

border-radius: 4px;

background-color: #A52A2A;

border: none;

color: #FFFFFF;

text-align: center;

font-size: 25px;

padding: 40px;

width: 250px;

transition: all 0.5s;

cursor: pointer;

margin: 5px;

height: 65px;

}

.button2 span {

cursor: pointer;

display: inline-block;

position: relative;

transition: 0.5s;

}

.button2 span:after {

content: '\00bb';

position: relative;

opacity: 0;

top: 0;

right: -20px;

transition: 0.5s;

}

.button2:hover span {

padding-right: 25px;

}

.button2:hover span:after {

opacity:1;

right:0 ;

}

.основная_картинка{/*тут картинка поваров и свойства класса*/

background:url('фот/фон.jpg');

background-color: grey;

width: 1350px;

height: 600px;

left: -10px;

margin-top:40px;

border: 0px;

position: relative;

}

.нижняя_панель{

width:1350px;

height:700px;

background-color:black;

position: relative;

top: 250px;

left:0px;

}

.navbar {

overflow: hidden;

background-color:black;

position:absolute;

top: 0;

width:1350px;

}

.navbar a {

float: left;

display: block;

color: white;

text-align: center;

padding: 14px 16px;

text-decoration: none;

font-size: 17px;

}

.navbar a:hover {

background:white;

color: black;

}

.main {

padding: 10px;

margin-top: 30px;

margin-left: 0px;

height: 1010px; /*размер метода мвйн общая страница*/

/* Используется в данном примере для включения прокрутки */

}

.вторая_часть_страницы{

width: 1355px;

height: 600px;

background-color: grey;

background:url('фот/мясо фон 2.jpg');

top: 680px;

left: -10px;

position: absolute;

}

.черный_фон4{

opacity: 0.8;

background:black;

padding: 2px;

height: 300px;

width: 550px;

position:relative;

top:100px;

left:50px;

border:12px;

}

.черный_фон5{

opacity: 0.7;

background:black;

padding: 5px;

height: 150px;

width: 500px;

position:relative;

left:700px;

top:70px;

}

.черный_фон{

opacity: 0.8;

background:black;

padding: 5px;

height:200px;

width: 550px;

position: relative;

left: 100px;

top: 15px;

font-family: 'Lobster', cursive;

}

.черный_фон2{

opacity: 0.9;

background:black;

padding: 5px;

height:290px;

width: 550px;

position: relative;

left: 710px;

top: 250px;

font-family: 'Lobster', cursive;

}

.черный_фон3{

opacity: 0.9;

background:black;

padding: 5px;

height:220px;

width: 590px;

position: relative;

left: 33px;

bottom: 0px;

font-family: 'Lobster', cursive;

}

</style>

</head>

<body>

<div class="navbar">

<a href="fixbar.html"><img src="фот/лого2сайта.jpg" width = "50" height= "50" alt="Амброзия">

</a>

<a href="#">Главная</a>

<a href="#">Кулинарная школа</a>

<a href="#">Контакты</a>

<a href="#">Новости</a>

<a href="#">О нас</a>

<a href="#">Учителя</a>

<a href="#">Материалы</a>

<a href="#">Курсы</a>

<a href="#">+79512992116</a>

<a href="#">Настройки</a>

<a href="#contact"><button onclick="document.getElementById('id01').style.display='block'" style="width:auto;">Войти</button></a>

<div id="id01" class="modal">

<form class="modal-content animate" action="/action_page.php">

<div class="imgcontainer">

<span onclick="document.getElementById('id01').style.display ='none'" class="close" title="Close Modal">Ч</span>

<img src="фот/лого2сайта.jpg" width = "300" hight = "300" alt="Ava" class="ava">

</div>

<div class="container">

<label for="uname"><b>Ваше имя</b></label>

<input type="text" placeholder="Enter Username" name="uname" required>

<label for="psw"><b>Пароль</b></label>

<input type="password" placeholder="Enter Password" name="psw" required>

<button type="submit">Войти</button>

<label>

<input type="checkbox" checked="checked" name="remember"> Запомнить меня

</label>

</div>

<div class="container" style="background-color:#f1f1f1">

<button type="button" onclick="document.getElementById('id01').style.display='none'" class="cancelbtn">Назад</button>

<span class="psw"> <a href="#"></a></span>

</div>

</div>

<div class="main">

<div class="основная_картинка">

<div class="черный_фон4" width="560"

height="400">

<h1 style="color:white">Кулинарная школа</h1>

<h2 style="color:white">Кулинарные курсы онлайн и офлайн в современной<br>школе в центре Москвы, оборудованной современной<br> техникой. Различные направления обучения<br> от ведущих шефов России и мира для кулинаров-любителей <br>и профессиональных поваров.</h2>

</div>

<div class="черный_фон5">

<h2 style="color: white">Настоящие кулинарные курсы онлайн для тех,кто любит готовить или хочет научиться это делать легко и непринужденно. Готовьте вместе дома впрямом эфире или в записи!</h2>

</div>

</div>

<meta name="viewport" content="width=device-width, initial-scale=1">

<style>

body {

margin: 0;

font-family: Arial, Helvetica, sans-serif;

}

input[type=text], input[type=password] {

width: 100%;

padding: 12px 5px;

margin: 8px 0;

display: inline-block;

border: 1px solid #ccc;

box-sizing: border-box;

}

/* Set a style for all buttons */

button {

background-color: #000000;

color: white;

padding: 10px 10px;

border: none;

cursor: pointer;

width: 100%;

}

button:hover {

opacity: 0.8;

}

/* Extra styles for the cancel button */

.cancelbtn {

width: auto;

padding: 10px 18px;

background-color: #000000;

}

/* Center the image and position the close button */

.imgcontainer {

text-align: center;

margin: 24px 0 12px 0;

position: relative;

}

img.avatar {

width: 40%;

border-radius: 50%;

}

.container {

padding: 16px;

}

span.psw {

float: right;

padding-top: 16px;

}

.modal {

display: none;

z-index: 1;

left: 10px;

top: 0;

width: 100%;

height: 70%;

overflow: auto;

background-color: rgb(0,0,0);

background-color: rgba(0,0,0,0.4);

padding-top: 60px;

position: fixed;

}

.modal-content {

background-color: #fefefe;

margin: 5% auto 15% auto;

border: 1px solid #888;

width: 80%;

}

.close {

position: absolute;

right: 25px;

top: 0;

color: #000;

font-size: 35px;

font-weight: bold;

}

.close:hover,

.close:focus {

color: red;

cursor: pointer;

}

.animate {

-webkit-animation: animatezoom 0.6s;

animation: animatezoom 0.6s

}

@-webkit-keyframes animatezoom {

from {-webkit-transform: scale(0)}

to {-webkit-transform: scale(1)}

}

@keyframes animatezoom {

from {transform: scale(0)}

to {transform: scale(1)}

}

@media screen and (max-width: 300px) {

span.psw {

display: block;

float: none;

}

.cancelbtn {

width: 100%;

}

}

}

head

{margin:0;}

</style>

<div class="вторая_часть_страницы">

<div class="черный_фон">

<h1><font color="#FFF8DC"><font color="#A52A2A" size="7"> BBQ</font> легко и просто</font> </h1>

<h2><font color="#FFF8DC">Базовый <font color="#A52A2A">с 3 июня по 20 июня</font></font></h2>

<h3><font color="#FFF8DC"><font color="#A52A2A">17:00-18:30 6 </font> занятий <font color="#A52A2A"size="4">чт,вс</font></font></h3>

</div>

<div class="button3">

<button onclick="document.location='C:/Users/Петр/Desktop/лабы/w/2 вкладка.html'"class="button2" style="vertical-align:middle"><span>Открыть </span></button>

</div>

</div>

<div class="черный_фон2">

<h5><font color="#FFF8DC"size="5"><font color="#A52A2A" size="6">О курсе:</font><br>Солнце и Pure Spice School зовут на шашлыки! Ждём вас на нашем новом онлайн курсе по приготовлению летних блюд на гриле. Мясо, рыба и морепродукты на открытом огне, лучшие маринады и идеальные соусы, салаты и восхитительные закуски -- всё, что мы хотим видеть летом на даче и не только.</font></h5>

</div>

<div class="черный_фон3">

<h6><font color="#A52A2A" size="6">Вы узнаете:</font><br>

<font color="#FFF8DC" size="5">тонкости приготовления морепродуктов на открытом огне

какие специи и ингредиенты подходят для маринадов

быстрый способ приготовления лепешек

какие закуски и салаты будут самыми подходящими к загородному столу</font></h6>

</div>

</div>

<div class="нижняя_панель">

<div style="

left: 750px;

top:0px;

soverflow:hidden;">

<h3 style="color: white; size:5">Контакты </h3>

<h3 style="color: white;size:5">Поддержка</h3>

<h3 style="color: white">Правовая информация</h3>

<h3 style="color: white">Видеоуроки</h3>

<h3 style="color: white">Лицензия</h3>

<h3 style="color: white">Соглашения</h3>

<iframe src="https://yandex.ru/map-widget/v1/-/CCUaaGFuWC"

width="560"

height="400"

frameborder="1"

allowfullscreen="true"

style="position:absolute;

left: 750px;

top:0px"

>

</iframe>

<h3 style="color: white">Наши партнеры</h3>

<h3 style="color: white">Поддержка</h3>

</div>

</body>

<script>

var modal = document.getElementById('id01');

window.onclick = function(event) {

if (event.target == modal) {

modal.style.display = "none";

}

}

</script>

</html>

Размещено на Allbest.ru