Методические материалы для лабораторного практикума "Основы создания интерактивных сайтов"

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

МИНОБРНАУКИ РОССИИ

ФЕДЕРАЛЬНОЕ ГОСУДАРСТВЕННОЕ БЮДЖЕТНОЕ

ОБРАЗОВАТЕЛЬНОЕ УЧРЕЖДЕНИЕ ВЫСШЕГО ОБРАЗОВАНИЯ

«БАШКИРСКИЙ ГОСУДАРСТВЕННЫЙ ПЕДАГОГИЧЕСКИЙ

УНИВЕРСИТЕТ ИМ. М. АКМУЛЛЫ»

ИНСТИТУТ ФИЗИКИ, МАТЕМАТИКИ, ЦИФРОВЫХ И

НАНОТЕХНОЛОГИЙ

Кафедра программирования и вычислительной математики

Направление- Педагогическое образование

Направленность (профиль) физическая культура и профиль по выбору

Курс IV, группа ПОФК-ИНФ 41-16 очная форма обучения

Курсовая работа

По дисциплине «Теория и методика обучения информатике»

«Методические материалы для лабораторного практикума «основы создания интерактивных сайтов»

Алибаев Аданис Ирнисович

Научный руководитель: к.п.н., доцент Баринова Н. А.

Уфа 2020



СОДЕРЖАНИЕ

ВВЕДЕНИЕ

ГЛАВА 1. HTML, CSS

1.1 HTML

1.2 CSS

ГЛАВА 2. JAVASCRIPT(JS)

ГЛАВА 3. PHP

ГЛАВА 4. СОЗДАНИЕ ИНТЕРАКТИВНОГО САЙТА

4.1 Шапка сайта

4.2 Раздел со слайдами, в виде “гармошки”, реализованный при помощи CSS стилей

4.3 Карточки людей, добавляющие тени при наведении на них, с ссылками на социальную сеть

4.4 Слайдер с картинками, реализованный на JavaScript

4.5 Форма обратной связи посетителя с администратором, реализованный на PHP

ЗАКЛЮЧЕНИЕ

СПИСОК ИСПОЛЬЗОВАННОЙ ЛИТЕРАТУРЫ

ПРИЛОЖЕНИЕ



ВВЕДЕНИЕ

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

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

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

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

Создание интерактивных web-сайтов может включать следующие этапы:

1) определение целей и задач интерактивного web-сайта;

2) разработка концепции интерактивного web-сайта;

3) выбор средств реализации интерактивных возможностей сайта;

4) разработка дизайн-макета сайта, верстка шаблона, программная реализация;

5) создание интерактивных компонентов;

6) наполнение сайта контентом

7) проверка интерактивных компонентов на соответствие поставленным целям и задачам;

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

Тема курсовой работы - создание интерактивного сайта.

Для этого мы разберем примеры создания и внедрения на сайт следующих интерактивных компонентов на сайте:

Навигационная шапка с переходами на разделы сайта;

Раздел со слайдами, в виде “гармошки”, реализованный при помощи css стилей;

Карточки людей, добавляющие тени при наведении на них, с ссылками на соц.сети;

Слайдер с картинками, реализованный на JavaScript;

Форма обратной связи посетителя с администратором, реализованный на PHP.

Данные примеры реализации компонентов являются основными и наиболее встречающимися на интерактивных сайтах.

Объект исследования: создание интерактивного сайта.

Предмет исследования: HTML, CSS, JavaScript, PHP.

Методы исследования:

- Теоретические - изучение и анализ литературы, классификации, анализ документов;

- Практические - экспериментальное создание сайта.

Структура представлена в содержании курсовой работы.



ГЛАВА 1. HTML, CSS

1.1 HTML

HTML (HyperText Markup Language - язык гипертекстовой разметки) не является языком программирования; это язык разметки, используемый для определения структуры веб-страниц, посещаемых пользователями. Они могут иметь сложную или простую структуру, всё зависит от замысла и желания веб-разработчика. HTML состоит из ряда элементов, которые вы используете для того, чтобы охватить, обернуть или разметить различные части содержимого, чтобы оно имело определенный вид или срабатывало определенным способом. Встроенные тэги могут преобразовать часть содержимого в гиперссылку, по которой можно перейти на другую веб-страницу, выделить курсивом слова и так далее. Если мы хотим, чтобы строка отобразилась в таком же виде, мы можем определить её, как "параграф", заключив её в теги элемента "параграф" (<p>),

Структура HTML-документов:

Основными частями элемента являются:

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

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

Содержимое: Как видно, в нашем случае содержимым является простой текст.

Элемент: открывающий тег + закрывающий тег + содержимое = элемент.

Вы также можете вкладывать элементы внутрь других элементов -- это называется вложенностью. Если мы хотим подчеркнуть что-то важное, мы можем заключить слово в элемент <strong> , который означает, что это слово крайне важно в данном контексте.

Блочные и строчные элементы:

Существует две важных категории элементов в HTML, которые стоит знать -- элементы блочного уровня и строчные элементы.

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

Строчные элементы -- это те, которые содержатся в элементах блочного уровня и окружают только малые части содержимого документа, не целые абзацы и группировки контента. Строчные элементы не приводят к появлению новой строки в документе: они обычно встречаются внутри абзаца текста, например, элемент <a> (ссылка) или акцентирующие элементы вроде <em> или <strong>.

<em>Первый</em><em>второй</em><em>третий</em>

<p>четвертый</p><p>пятый</p><p>шестой</p>

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

Атрибуты:

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

Атрибут должен иметь:

Пробел между атрибутом и именем элемента (или предыдущим атрибутом, если у элемента уже есть один или несколько атрибутов).

Имя атрибута и следующий за ним знак равенства.

Значение атрибута, заключенное в кавычки.

Структура HTML-документа

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Тестовая страница</title>

</head>

<body>

<p>Это -- моя страница</p>

</body>

</html>

<html></html>: Элемент <html> содержит в себе всё содержимое на всей странице, и иногда его называют "корневой элемент".

<head></head>: Элемент <head>. Данный элемент выступает в качестве контейнера для всего содержимого, которое вы хотите включить в HTML документ, но не хотите показывать посетителям вашей страницы. Он включает такие вещи, как ключевые слова и описание страницы, которые вы хотели бы показывать в поисковых запросах, CSS для стилизирования вашего контента, объявление поддерживаемого набора символов и многое другое. Вы узнаете больше об этом из следующей статьи данного руководства.

<meta charset="utf-8">: Этот элемент устанавливает в качестве символьной кодировки для вашего документа utf-8 , который включает большинство символов из всех известных человечеству языков. По существу, теперь страница сможет отобразить любой текстовый контент, который вы сможете в неё вложить. Нет причин не устанавливать эту кодировку, это также позволит избежать некоторых проблем позднее.

<title></title>: Элемент <title>. Этот элемент устанавливает заголовок вашей страницы, который появляется во вкладке браузера, загружающей эту страницу, также это заглавие используется при описании страницы, когда вы сохраняете её в закладках или избранном.

<body></body>: Элемент <body>. Он содержит весь контент, который вы хотите показывать посетителям вашей страницы, -- текст, изображения, видео, игры, проигрываемые аудио дорожки или что-то ещё.

1.2 CSS

Стилем или CSS (Cascading Style Sheets, каскадные таблицы стилей) называется набор параметров форматирования, который применяется к элементам документа, чтобы изменить их внешний вид. Возможность работы со стилями издавна включают в развитые издательские системы и текстовые редакторы, тем самым позволяя одним нажатием кнопки придать тексту заданный, заранее установленный вид. Теперь это доступно и создателям сайта, когда цвет, размеры текста и другие параметры хранятся в определенном месте и легко «прикручиваются» к любому тегу. Еще одним преимуществом стилей является то, что они предлагают намного больше возможностей для форматирования, чем обычный HTML

После знакомства с HTML разработчики сайтов разделяются на две основные категории. Одна часть считает, что с помощью HTML на сайте можно создавать всё или практически всё, другая же понимает, что в целом средств разметки недостаточно для оформления веб-документов. Действительно, HTML лишь первый этап в процессе обучения созданию сайтов. Следующим шагом является изучение стилей или CSS (Cascading Style Sheets, каскадные таблицы стилей).

Различают несколько типов стилей, которые могут совместно применяться к одному документу. Это стиль браузера, стиль автора и стиль пользователя. Стиль браузера -Оформление, которое по умолчанию применяется к элементам веб-страницы браузером. Это оформление можно увидеть в случае «голого» HTML, когда к документу не добавляется никаких стилей. Например, заголовок страницы, формируемый тегом <H1>, в большинстве браузеров выводится шрифтом с засечками размером 24 пункта.Cтиль автора-Стиль, который добавляет к документу его разработчик. В примере 1.2 показан один из возможных способов подключения авторского стиля. Стиль пользователя- это стиль, который может включить пользователь сайта через настройки браузера. Такой стиль имеет более высокий приоритет и переопределяет исходное оформление документа. В браузере Internet Explorer подключение стиля пользователя делается через меню Сервис > Свойство обозревателя > Кнопка «Оформление»

Набор правил css:

Вся структура называется набором правил (но зачастую для краткости "правило" ). Отметим также имена отдельных частей:

Селектор (Selector)

Имя HTML элемента в начале набора правил. Он выбирает элемент(ы) для применения стиля (в данном случае, элементы p ). Для стилизации другого элемента, просто измените селектор.

Объявление (Declaration)

Единственное правило, например color: red; указывает, какие из свойств элемента вы хотите стилизовать.

Свойства (Properties)

Способы, которыми вы можете стилизовать определенный HTML элемент (в данном случае, color является свойством для элементов <p>). В CSS вы выбираете, какие свойства вы хотите затронуть в вашем правиле.

Значение свойства (Property value)

Справа от свойства, после двоеточия, у нас есть значение свойства, который выбирает одно из множества возможных значений для данного свойства (существует множество значений color, помимо red).

Важные части синтаксиса:

Каждый набор правил (кроме селектора) должен быть обернут в фигурные скобки ({}).

В каждом объявлении необходимо использовать двоеточие (:), чтобы отделить свойство от его значений.

В каждом наборе правил вы должны использовать точку с запятой (;), чтобы отделить каждое объявление от следующего.

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

p {

color: red;

width: 500px;

border: 1px solid black;

}

Способы подключения css к документу

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

когда описание стилей находится в отдельном файле, оно может быть подключено к документу посредством элемента <link>, включённого в элемент <head>:

<!DOCTYPE html>

<html>

<head>

.....

<link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>

.....

</body>

</html>

когда файл стилей размещается отдельно от родительского документа, он может быть подключён к документу инструкцией @import в элементе<style>:

<!DOCTYPE html>

<html>

<head>

.....

<style media="all">

@import url(style.css);

</style>

</head>

</html>

когда стили описаны внутри документа, они могут быть включены в элемент <style>, который, включается в элемент <head>:

<!DOCTYPE html>

<html>

<head>

.....

<style>

body {

color: red;

}

</style>

</head>

<body>

.....

</body>

</html>

когда стили описаны в теле документа, они могут располагаться в атрибутах отдельного элемента

<!DOCTYPE>

<html>

<head>

.....

</head>

<body>

<p style="font-size: 20px; color: green; font-family: arial, helvetica, sans-serif">

.....

</p>

</body>

</html>

В первых двух случаях к документу применены внешние стили, а во вторых -- внутренние стили.

Для добавления CSS к XML-документу последний должен содержать специальную ссылку на файл стилей:

<?xml-stylesheet type="text/css" href="style.css"?>



ГЛАВА 2. JAVASCRIPT(JS)

Программы на этом языке называются скриптами. Они могут встраиваться в HTML и выполняться автоматически при загрузке веб-страницы.

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

Это отличает JavaScript от другого языка - Java.

Современный JavaScript - это «безопасный» язык программирования. Он не предоставляет низкоуровневый доступ к памяти или процессору, потому что изначально был создан для браузеров, не требующих этого. Возможности JavaScript сильно зависят от окружения, в котором он работает. Например, Node.JS поддерживает функции чтения/записи произвольных файлов, выполнения сетевых запросов и т.д. В браузере для JavaScript доступно всё, что связано с манипулированием веб-страницами, взаимодействием с пользователем и веб-сервером.

Например, в браузере JavaScript может:

Добавлять новый HTML-код на страницу, изменять существующее содержимое, модифицировать стили.

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

Отправлять сетевые запросы на удалённые сервера, скачивать и загружать файлы (технологии AJAX и COMET).

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

Запоминать данные на стороне клиента («local storage»).

Структура кода

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

В нашем коде может быть столько инструкций, сколько мы захотим. Инструкции могут отделяться точкой с запятой. Например, здесь мы разделили сообщение «Привет Мир» на два вызова alert:

alert('Привет'); alert('Мир');

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

alert('Привет');

alert('Мир');

Точка с запятой:

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

Так тоже будет работать:

alert('Привет')

alert('Мир')

В этом случае JavaScript интерпретирует перенос строки как «неявную» точку с запятой. Это называется автоматическая вставка точки с запятой.

В большинстве случаев новая строка подразумевает точку с запятой. Но «в большинстве случаев» не значит «всегда»!

В некоторых ситуациях новая строка всё же не означает точку с запятой. Например:

alert(3 +

1

+ 2);

Код выведет 6, потому что JavaScript не вставляет здесь точку с запятой. Интуитивно очевидно, что, если строка заканчивается знаком "+", значит, это «незавершённое выражение», поэтому точка с запятой не требуется. И в этом случае всё работает, как задумано.

Но есть ситуации, где JavaScript «забывает» вставить точку с запятой там, где она нужна.

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

Встраивание в веб страницы

Для добавления JavaScript-кода на страницу можно использовать теги <script></script>[Спецификация 6], которые рекомендуется, но не обязательно, помещать внутри контейнера <head>. Контейнеров <script> в одном документе может быть сколько угодно. Атрибут «type='text/javascript'» указывать необязательно, данное значение используется по умолчанию[52].

Скрипт, выводящий модальное окно с классической надписью «Hello, World!» внутри браузера:

<script type="application/javascript">

alert('Hello, World!');

</script>

Спецификация HTML описывает набор атрибутов, используемых для задания обработчиков событий[Спецификация 7]. Пример использования:

<a href="delete.php" onclick="return confirm('Вы уверены?'); return false;">

Удалить

</a>

В приведённом примере при нажатии на ссылку функция confirm('Вы уверены?'); вызывает модальное окно с надписью «Вы уверены?», а return false; блокирует переход по ссылке. Разумеется, этот код будет работать только если в браузере есть и включена поддержка JavaScript, иначе переход по ссылке произойдёт без предупреждения.

Использование кода JavaScript в контексте разметки страницы расценивается в рамках ненавязчивого JavaScript как плохая практика. Аналогом (при условии снабжения ссылки идентификатором alertLink)

<a href="delete.php" id="alertLink">

Удалить

</a>

приведённого примера может являться, например, следующий фрагмент JavaScript:

window.onload = function() {

var linkWithAlert = document.getElementById("alertLink");

linkWithAlert.onclick = function() {

return confirm('Вы уверены?');

};

};

Есть и третья возможность подключения JavaScript -- написать скрипт в отдельном файле, а потом подключить его с помощью конструкции

<head>

<script type="application/javascript" src="http://Путь_к_файлу_со_скриптом">

</script>

</head>

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

необязательный атрибут type для указания MIME-типа содержимого.

В запросе комментариев RFC-4329, определяющем[53] MIME-тип, соответствующий JavaScript, указано:

Медиатипы

application/javascript,

application/ecmascript,

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

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

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

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

необязательный атрибут async указывает, что получение скрипта происходит асинхронно, а выполнение будет произведено сразу по завершении скачивания. Очерёдность выполнения скриптов не гарантируется.

При этом атрибут language (language="JavaScript"), несмотря на его активное использование , относится к не рекомендуемым (deprecated), отсутствует в DTD, поэтому считается некорректным.



ГЛАВА 3. PHP

PHP: переменные, операторы языка, типы данных. Что такое «переменное»? Можно сказать, что это небольшой сейф, который хранит в себе информацию - текст, число, массив или значение другой переменной. Имя переменной в php должно состоять из букв латинского алфавита, имя переменной также может содержать цифры и символы подчеркивания, но имя переменной не должно начинаться с цифр, то - есть переменная может содержать цифры, но не может начинаться с цифр. Это необходимо запомнить и знать.

Переменные в PHP всегда начинаются со знака доллара:

- $name;

- $adonis_alibaev;

- $maradona12.

Переменные $myname и $Myname это разные переменные, то есть учитывается регистр.

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

Пример:

- $name = «Иванов»;

- $age = 1986.

В языке PHP, как и в других языках программирования, есть операторы. Они выполняют специальные операции в коде PHP. Например, при использовании знака равенства ( = ), чтобы присвоить значение переменной, используется оператор присваивания.

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

Операторы вывода:

Чтобы вывести что - то на экран мы должны воспользоваться оператором вывода echo.

Давайте рассмотрим конкретный пример, выведем на экран значений переменных.

<?php

$name = "Сергей";

$age = 1986;

echo $name;

echo "<br>";

echo $age;

echo "<br>";

echo "Меня зовут $name, я родился в $age году.";

?>

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

PHP поддерживает восемь простых типов данных.

Четыре скалярных типа:

boolean (логический);

integer (целый);

float (с плавающей точкой);

string (строковый).

Два смешанных типа:

array (массив);

object (объект).

И два специальных типа:

resource (ресурс);

NULL.

В PHP не принято явное объявление типов переменных. Предпочтительнее, чтобы это делал сам интерпретатор во время выполнения программы в зависимости от контекста, в котором используется переменная. Рассмотрим по порядку все перечисленные типы данных.

Циклы. В PHP существует несколько конструкций, позволяющих выполнять повторяющиеся действия в зависимости от условия. Это циклы while, do..while. While - простой цикл. Он предписывает PHP выполнять команды блока выполнения до тех пор, пока выражение вычисляется как True (здесь, как и в if, происходит приведение выражения к логическому типу). Значение выражения проверяется каждый раз в начале цикла, так что, даже если его значение изменилось в процессе выполнения блока_выполнения, цикл не будет остановлен до конца итерации (т.е. пока все команды блока_выполнения не будут исполнены).

<?

//эта программа напечатает все четные цифры

$i = 1;

while ($i < 10) {

if ($i % 2 == 0) print $i;

// печатаем цифру, если она четная

$i++;

// и увеличиваем $i на единицу

}

?>

«do...while»

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

Структура:

do {блок_выполнения} while (выражение);

<?

// эта программа напечатает число 12, несмотря на то

// что условие цикла не выполнено

$i = 12;

do{

if ($i % 2 == 0) print $i;

// если число четное, то печатаем его

$i++;

// увеличиваем число на единицу

}while ($i<10)

?>



ГЛАВА 4. СОЗДАНИЕ ИНТЕРАКТИВНОГО САЙТА

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

Где index.html - основной файл, html-документ

Mail.php - php файл, необходимый для реализации формы обратной связи на сайте

Script.js - Javascript файл с написанным скриптом для слайдера

Style.css - файл для создания стилей

4.1 Шапка сайта

интерактивный сайт слайдер картинка

HTML И CSS коды шапки представлены в Приложении 1

Как можно заметить, в классе “logo” присутсвует логотип сайта. Для того, чтобы он добавился на страницу необходимо в созданной папке img, которая хранится в одной директории с файлом index.html добавить файл logo.jpg с нашим логотипом. Логотипом нашей страницы послужил логотип БГПУ. Так же присутствуют так называемые “якоря” - #photo, #agents, #slide, #form_message, которые в последующем буду перемещать нашу страницу к выбранным разделам

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

.menu li a:hover:not(.logo){

background: #f6f5f4;

border-radius: 3px;

Таким образом, шапка нашего сайта примет вид:

И при наведении:

4.2 Раздел со слайдами, в виде “гармошки”, реализованный при помощи CSS стилей

HTML и CSS код данного раздела представлены в приложении 2.

Главная идея заключается в том, чтобы создать вложенную структуру, которая позволит нам легко переместить соответствующие слайды гармошки на одну сторону, то есть перемещение одного слайда повлечет за собой перемещение всех его внутренних слайдов (вложенных элементов). У каждого числа будет изображение, радио-кнопка для управления «открытия» слайда, и заголовок.

Каждый элемент article будет иметь класс, помогающий нам определить, на какую высоту нам нужно будет расширить элемент (оптимальным вариантом было бы использовать значение «auto» в качестве значения высоты расширенного элемента, но беда в том, что тогда мы не сможем получить нужную нам анимацию)

CSS код будет выглядеть следующим образом:

Мы зададим слайдеру значение ширины и спрячем излишки с помощью overflow:hidden. За это будет отвечать селектор по название .ia-container

У каждого числа останется значение равное 50 пикселям (видимая часть). Это и должно быть их относительное положение к их родительскому элементу. Это приводит к тому, что слайдер выглядит как гармошка. Ширина числа равна 335 пикселей, как и ширина изображения внутри. Мы зададим этому элементу (селектор .ia-container figure)переход, чтобы он двигался более плавно.

Изображение будет иметь ширину равную 100%, чтобы оно полностью заполняло элемент. За это будет отвечать селектор ia-container img

Первый элемент будет расположен с самого левого края, и мы выставим параметр !important, так как мы будем использовать media queries, и нам нужно будет, чтобы самая левая часть всегда представляла собой 0. Позиция будет выставлена на относительную для того, чтобы мы могли задать высоту слайдера(селектор ia-container > figure)

Каждая из радио-кнопок будет покрывать видимую часть слайда. Мы выставим параметр уровня плотности отображения на 0, чтобы её невозможно было увидеть, но можно было по ней кликнуть. Параметр z-index должен быть высоким, чтобы он был расположен поверх всего остального( селектор ia-container input)

Когда мы кликаем по элементу ввода или выделяем его, нам нужно, чтобы он исчез. На самом деле, мы можем добавить нечто вроде width: 0px, но ввиду странного поведения в браузере Chrome нам придется сохранить этот элемент в правой части (следующий элемент не хочет запускать эффект при наведении, если мы не производим наведение по текущему элементу). Нам также нужно, чтобы смежные элементы переместились влево в сопровождении эффекта перехода(селекторы ia-container input:checked и ia-container input:checked ~ figure)

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

Заголовок элемента будет покрывать весь элемент темным прозрачным наложением, и элемент span изначально будет размещен поверх верхней части элемента(ia-container figcaption и ia-container figcaption span)

Когда мы выделяем слайд, мы убираем наложение за счет выставления параметра уровня плотности отображения RGBa-цвета на 0(ia-container input:checked + figcaption, ia-container input:checked:hover + figcaption)

Span-элемент потихоньку появится, и переместится с верхней части с небольшой задержкой (сначала должен открыться слайд, ia-container input:checked + figcaption span)

Так как после последнего слайда больше ничего нет, нам больше не нужно, чтобы задержка была такой длинной (последней радио-кнопке мы задали id ia-selector-last)( .ia-container #ia-selector-last:checked + figcaption span)

Когда мы наводим курсор мыши на видимую часть закрытого слайда, нам нужно, чтобы происходил небольшой эффект. Но так как радио-кнопка покрывает эту часть (она находится поверх других элементов), мы воспользуемся смежным родственным комбинатором (.ia-container input:hover + figcaption ):

Все последующие смежные элементы выделенного элемента ввода должны получить меньшее значение z-index, опять же, для того чтобы предотвратить нежелательное поведение приложения в браузере Chrome(.ia-container input:checked ~ figure input)

Таким образом наша гармошка будет выглядеть следующим образом:

В качестве текста был использован “текст-рыба”, как и в последующих примерах.



4.3 Карточки людей, добавляющие тени при наведении на них, с ссылками на социальную сеть

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

Карточки в данном блоке были размещены при помощи flexbox. При наведении на саму карточку и соц.сети добавляется тень и изменяется цвет иконок. Это реализовано с помощью функции hover.

На странице данный блок выглядит как:



4.4 Слайдер с картинками, реализованный на JavaScript

HTML и CSS код данного раздела представлены в приложении 4.

4 блока со слайдами. Задний фон - заранее скачанные изображения и кнопка для переключения между слайдами. JavaScript код представлен так же в приложении 4.

В комментариях к коду указаны основные моменты и действие скрипта.

Вид блока слайда на странице:



4.5 Форма обратной связи посетителя с администратором, реализованный на PHP

PHP файл будет обрабатывать запросы пользователей на сервере. Он должен, проверить, все ли необходимые поля были заполнены и если все нормально, отправить сообщение. PHP код данного раздела представлены в приложении 5.Так же там,в комментариях, расписаны основные переходы и функции в программе и создадим простую форму для отправки в html и оформим её в css(приложение 5). Форма на сайте примет следующий вид:



ЗАКЛЮЧЕНИЕ

1. Были изучены такие языки как HTML,CSS,PHP и JavaScript их основы, базовый синтаксис.

2. Применены приобретенные знания на создание интерактивного сайта.

3. Создана навигационная шапка на языках HTML и CSS с переходами на разделы сайта.

4. Разработан раздел со слайдами “гармошка”, написанный при помощи CSS стилей.

5. Создан интерактивный раздел с карточками людей.

6. Создан слайдер картинок, работающий при помощи функции в JS.

7. Выполнена форма обратной связи посетителя сайта с администратором. Работа форма реализована на PHP.



СПИСОК ИСПОЛЬЗОВАННОЙ ЛИТЕРАТУРЫ

1. Олевинский М. А. Веб-аналитика. Сравнение систем веб-аналитики // In situ.-- 2015. -- № 4. -- С.2-3.

2. Савельева И. П., Никулин Д. Н. Оценка эффективности интернетрекламы с помощью систем веб-аналитики // Вестник Южно-Уральского государственного университета: Экономика и менеджмент, 2014. - № 3(8). - С. 5-6.

3. Шурчкова Ю. В. Стратегия интеллектуального лидерства при осуществлении маркетинговых коммуникаций в сети интернет. // Креативная экономика, 2011. - № 11. - С.5-6

4. Alexei White. Major JavaScript Engines // JavaScript Programmer's Reference. -- Indianapolis, IN 46256: Wiley Publishing, Inc., 2009. -- P. 12--13. -- (Programmer's Reference)

5. JavaScript Основы для Начинающих - Полный Курс за 6 часов [2020]

6. Nicholas C. Zakas. Next-Generation JavaScript Engines // High Performance JavaScript / Editor: Mary E. Treseler. -- 1st ed. -- 1005 Gravenstein Highway North, Sebastopol, CA 95472: O'Reilly Media, 2010. -- P. xiii.



ПРИЛОЖЕНИЕ

Приложение 1 (HTML и CSS коды для шапки сайта)

<nav>

<ul class="menu touch">

<li>

<a class="logo" href="#"><img src="img/logo.jpg" alt=""/></a>

</li>

<li><a href="#photo">БГПУ</a></li>

<li><a href="#agents">Лучшие выпускники</a></li>

<li><a href="#slide">Слайд</a></li>

<li><a class="contacts" href="#form_message">Обратная связь</a></li>

</ul>

</nav>

</header>

* {

padding: 0;

margin: 0;

font-family: "Roboto Condensed", sans-serif;

}

html {

overflow: auto;

}

.body{

background: #f6f5f4;

}

nav {

display: flex;

justify-content: center;

margin: auto;

max-width: 1400px;

width: 100%;

}

.menu {

padding: 0;

margin: 0;

height: 50px;

width: 1200px;

display: flex;

flex-direction: row;

justify-content: space-around;

align-items: center;

background: #606770;

list-style-type: none;

}

.menu li a {

color: #fff;

text-decoration: none;

align-self: center;

font-size: 13px;

padding: 10px 15px;

transition: background 0.2s linear;

}

.menu li a:hover:not(.logo){

background: #f6f5f4;

border-radius: 3px;

}

Приложение 2(HTML и CSS код для слайда-гармошки)

<div class="ia-container" id="photo">

<figure>

<img src="img/1.jpg" alt="image01" />

<input type="radio" name="radio-set" checked="checked" />

<figcaption><span>БГПУ - </span></figcaption>

<figure>

<img src="img/2.jpg" alt="image02" />

<input type="radio" name="radio-set" />

<figcaption><span>Башкирский</span></figcaption>

<figure>

<img src="img/3.jpg" alt="image03" />

<input type="radio" name="radio-set" />

<figcaption><span>Государственный</span></figcaption>

<figure>

<img src="img/4.jpg" alt="image04" />

<input type="radio" name="radio-set" />

<figcaption><span>Педагогический</span></figcaption>

<figure>

<img src="img/5.jpg" alt="image05" />

<input type="radio" name="radio-set" />

<figcaption><span>Университет</span></figcaption>

</figure>

</figure>

</figure>

</figure>

</figure>

</div>

.ia-container {

width: 685px;

margin: 20px auto;

overflow: hidden;

box-shadow: 1px 1px 4px rgba(0,0,0,0.08);

border: 7px solid rgba(255,255,255,0.6);

}

.ia-container figure {

position: absolute;

top: 0;

left: 50px; /* width of visible piece */

width: 335px;

box-shadow: 0 0 0 1px rgba(255,255,255,0.6);

transition: all 0.3s ease-in-out;

}

.ia-container > figure {

position: relative;

left: 0 !important;

}.ia-container img {

display: block;

width: 100%;

}

.ia-container input {

position: absolute;

top: 0;

left: 0;

width: 50px;

height: 100%;

cursor: pointer;

border: 0;

padding: 0;

opacity: 0;

z-index: 100;

-webkit-appearance: none;

-moz-appearance: none;

appearance: none;

}

.ia-container input:checked{

width: 5px;

left: auto;

right: 0px;

}

.ia-container input:checked ~ figure {

left: 335px;

transition: all 0.7s ease-in-out;

}

.ia-container figcaption {

width: 100%;

height: 100%;

background: rgba(87, 73, 81, 0.1);

position: absolute;

top: 0px;

transition: all 0.2s linear;

}

.ia-container figcaption span {

position: absolute;

top: 40%;

margin-top: -30px;

right: 20px;

left: 20px;

overflow: hidden;

text-align: center;

background: rgba(87, 73, 81, 0.3);

line-height: 20px;

font-size: 18px;

opacity: 0;

text-transform: uppercase;

letter-spacing: 4px;

font-weight: 700;

padding: 20px;

color: #fff;

text-shadow: 1px 1px 1px rgba(0,0,0,0.1);

}

.ia-container input:checked + figcaption,

.ia-container input:checked:hover + figcaption{

background: rgba(87, 73, 81, 0);

}

.ia-container input:checked + figcaption span {

transition: all 0.4s ease-in-out 0.5s;

opacity: 1;

top: 50%;

}.ia-container #ia-selector-last:checked + figcaption span {

transition-delay: 0.3s;

}

.ia-container input:hover + figcaption {

background: rgba(87, 73, 81, 0.03);

}

.ia-container input:checked ~ figure input{

z-index: 1;

}

Приложение 3 (HTML и CSS коды для карточек людей)

<section class="agents" id="agents">

<div class="wrapper">

<h2>Лучшие выпускники</h2>

<p>Lorem ipsum dolor sit amet consectetur adipisicing.</p>

<p>

Lorem ipsum dolor sit amet consectetur adipisicing elit. <br />

Officiis voluptatibus repellat recusandae.

</p>

<div class="agent-cards">

<div class="agent-card">

<img src=".//img/agent.jpg" alt="" />

<div class="agent-info">

<p>Agent</p>

<div class="agent-block">

<p class="agent-name">И.И.Иванов</p>

<div class="social">

<i class="fab fa-twitter"></i>

<i class="fab fa-facebook"></i>

<i class="fab fa-instagram"></i>

</div>

</div>

</div>

</div>

<div class="agent-card">

<img src=".//img/agent.jpg" alt="" />

<div class="agent-info">

<p>Agent</p>

<div class="agent-block">

<p class="agent-name">И.И.Петров</p>

<div class="social">

<i class="fab fa-twitter"></i>

<i class="fab fa-facebook"></i>

<i class="fab fa-instagram"></i>

</div>

</div>

</div>

</div>

<div class="agent-card">

<img src=".//img/agent.jpg" alt="" />

<div class="agent-info">

<p>Agent</p>

<div class="agent-block">

<p class="agent-name">И.И.Сидоров</p>

<div class="social">

<i class="fab fa-twitter"></i>

<i class="fab fa-facebook"></i>

<i class="fab fa-instagram"></i>

</div>

</div>

</div>

</div>

</div>

</div>

</section>

.wrapper {

margin: 0 auto;

max-width: 1100px;

width: 100%;

}

.agents {

background: #f6f5f4;

padding-top: 60px;

margin-top: -30px;

}

.agents h2 {

font-size: 40px;

margin-bottom: 20px;

}

.agents p {

font-size: 13px;

line-height: 30px;

}

.agents p:nth-child(3) {

margin-bottom: 60px;

}

.agent-block {

display: flex;

justify-content: space-between;

}

.social i {

margin-right: 32px;

position: relative;

top: 7px;

color: #000;

}

.social i:hover {

color: #ffcc01;

}

.social i:last-child {

margin-right: 18px;

}

.agent-card {

max-width: 360px;

background: #fff;

box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);

}

.agent-card:hover {

box-shadow: 0 0 10px rgba(0, 0, 0, 0.7);

}

.agent-info {

padding-top: 10px;

padding-left: 25px;

}

.agent-name {

color: #ffcc01;

}

.agent-cards {

display: flex;

justify-content: space-between;

padding-bottom: 95px;

}

Приложение 4 (HTML, CSS и JavaScript коды для фото-слайдов)

<section class="wrapper">

<div class="slider" id="slide">

<div class="slider__wrapper">

<div class="slider__item">

<div style="height: 250px; background-image: url(img/slide1.jpg);">Слайд №1</div>

</div>

<div class="slider__item">

<div style="height: 250px; background-image: url(img/slide2.jpg);">Слайд №2</div>

</div>

<div class="slider__item">

<div style="height: 250px; background-image: url(img/slide3.jpg);">Слайд №3</div>

</div>

<div class="slider__item">

<div style="height: 250px; background-image: url(img/slide4.jpg);">Слайд №4</div>

</div>

</div>

<a

class="slider__control slider__control_left"

href="#"

role="button"

></a>

<a

class="slider__control slider__control_right slider__control_show"

href="#"

role="button"

></a>

</section>

<div class="wrapper">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo similique ad nisi deleniti vitae nihil minus error, temporibus sint distinctio, tempore quia perspiciatis ullam, qui eum iure quod. Sapiente eveniet eos odio animi nulla, reiciendis maiores dolore obcaecati error impedit consectetur, cupiditate numquam in officia fugiat harum quos non dolorem? Voluptates ex quis nostrum repellat eos sapiente dolore amet, reiciendis, assumenda ut illo. Id beatae non, voluptatem voluptates ipsam ab eius laudantium provident numquam necessitatibus porro dolorem soluta officiis, nemo ducimus rerum dicta vel modi, eum optio quos! Eos autem quod dolorum, quas, vel fugit aliquid laudantium consectetur doloremque rerum repellendus corporis nam possimus amet. Vel nostrum voluptas saepe distinctio adipisci ipsam, facilis magnam nam, quisquam sint vero libero vitae rem eos quo aperiam deleniti nihil exercitationem nesciunt veritatis earum dicta. Deserunt voluptatem voluptatibus esse, explicabo libero magni fugiat, doloremque, corrupti tenetur omnis facere nemo sequi maxime eos repudiandae voluptates!</div>

</div>

<div class="wrapper">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo similique ad nisi deleniti vitae nihil minus error, temporibus sint distinctio, tempore quia perspiciatis ullam, qui eum iure quod. Sapiente eveniet eos odio animi nulla, reiciendis maiores dolore obcaecati error impedit consectetur, cupiditate numquam in officia fugiat harum quos non dolorem? Voluptates ex quis nostrum repellat eos sapiente dolore amet, reiciendis, assumenda ut illo. Id beatae non, voluptatem voluptates ipsam ab eius laudantium provident numquam necessitatibus porro dolorem soluta officiis, nemo ducimus rerum dicta vel modi, eum optio quos! Eos autem quod dolorum, quas, vel fugit aliquid laudantium consectetur doloremque rerum repellendus corporis nam possimus amet. Vel nostrum voluptas saepe distinctio adipisci ipsam, facilis magnam nam, quisquam sint vero libero vitae rem eos quo aperiam deleniti nihil exercitationem nesciunt veritatis earum dicta. Deserunt voluptatem voluptatibus esse, explicabo libero magni fugiat, doloremque, corrupti tenetur omnis facere nemo sequi maxime eos repudiandae voluptates!</div>

</div>

.slider {

position: relative;

overflow: hidden;

}

.slider__wrapper {

display: flex;

transition: transform 0.6s ease;

}

.slider__item {

flex: 0 0 50%;

max-width: 50%;

}

.slider__control {

position: absolute;

top: 50%;

display: none;

align-items: center;

justify-content: center;

width: 40px;

color: #fff;

text-align: center;

opacity: 0.5;

height: 50px;

transform: translateY(-50%);

background: rgba(0, 0, 0, .5);

}

.slider__control_show {

display: flex;

}

.slider__control:hover,

.slider__control:focus {

color: #fff;

text-decoration: none;

outline: 0;

opacity: .9;

}

.slider__control_left {

left: 0;

}

.slider__control_right {

right: 0;

}

.slider__control::before {

content: '';

display: inline-block;

width: 20px;

height: 20px;

background: transparent no-repeat center center;

background-size: 100% 100%;

}

.slider__control_left::before {

background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");

}

.slider__control_right::before {

background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");

}

.slider__item>div {

line-height: 250px;

font-size: 50px;

text-align: center;

}

'use strict';

var multiItemSlider = (function () {

return function (selector, config) {

var

_mainElement = document.querySelector(selector), // основный элемент блока

_sliderWrapper = _mainElement.querySelector('.slider__wrapper'), // обертка для .slider-item

_sliderItems = _mainElement.querySelectorAll('.slider__item'), // элементы (.slider-item)

_sliderControls = _mainElement.querySelectorAll('.slider__control'), // элементы управления

_sliderControlLeft = _mainElement.querySelector('.slider__control_left'), // кнопка "LEFT"

_sliderControlRight = _mainElement.querySelector('.slider__control_right'), // кнопка "RIGHT"

_wrapperWidth = parseFloat(getComputedStyle(_sliderWrapper).width), // ширина обёртки

_itemWidth = parseFloat(getComputedStyle(_sliderItems[0]).width), // ширина одного элемента

_positionLeftItem = 0, // позиция левого активного элемента

_transform = 0, // значение транфсофрмации .slider_wrapper

_step = _itemWidth / _wrapperWidth * 100, // величина шага (для трансформации)

_items = []; // массив элементов

// наполнение массива _items

_sliderItems.forEach(function (item, index) {

_items.push({ item: item, position: index, transform: 0 });

});

var position = {

getMin: 0,

getMax: _items.length - 1,

}

var _transformItem = function (direction) {

if (direction === 'right') {

if ((_positionLeftItem + _wrapperWidth / _itemWidth - 1) >= position.getMax) {

return;

}

if (!_sliderControlLeft.classList.contains('slider__control_show')) {

_sliderControlLeft.classList.add('slider__control_show');

}

if (_sliderControlRight.classList.contains('slider__control_show') && (_positionLeftItem + _wrapperWidth / _itemWidth) >= position.getMax) {

_sliderControlRight.classList.remove('slider__control_show');

}

_positionLeftItem++;

_transform -= _step;

}

if (direction === 'left') {

if (_positionLeftItem <= position.getMin) {

return;

}

if (!_sliderControlRight.classList.contains('slider__control_show')) {

_sliderControlRight.classList.add('slider__control_show');

}

if (_sliderControlLeft.classList.contains('slider__control_show') && _positionLeftItem - 1 <= position.getMin) {

_sliderControlLeft.classList.remove('slider__control_show');

}

_positionLeftItem--;

_transform += _step;

}

_sliderWrapper.style.transform = 'translateX(' + _transform + '%)';

}

// обработчик события click для кнопок "назад" и "вперед"

var _controlClick = function (e) {

if (e.target.classList.contains('slider__control')) {

e.preventDefault();

var direction = e.target.classList.contains('slider__control_right') ? 'right' : 'left';

_transformItem(direction);

}

};

var _setUpListeners = function () {

// добавление к кнопкам "назад" и "вперед" обрботчика _controlClick для событя click

_sliderControls.forEach(function (item) {

item.addEventListener('click', _controlClick);

});

}

// инициализация

_setUpListeners();

return {

right: function () { // метод right

_transformItem('right');

},

left: function () { // метод left

_transformItem('left');

}

}

}

}());

var slider = multiItemSlider('.slider')

Приложение 5 (HTML, CSS и PHP коды для формы обратной связи)

<form name="form" action="mail.php" method="post" id="form_message">

<h2>Форма обратной связи.</h2>

<p> <div class="titles">Ваше имя*</div> <input class="input" name="name" type="text"/> </p>

<p> <div class="titles">Электронная почта*</div> <input class="input" name="email" type="text"/> </p>

<p> <div class="titles">Тема сообщения</div> <input class="input" name="subjects" type="text"/> </p>

<p> <div class="titles">Текст сообщения:</div><textarea name="message" cols="22" rows="5" /></textarea></p>

<p><input id="submit" value="Отправить" type="submit" /></p>

</form>

<script src="script.js"></script>

.titles{

width: 140px;

display: flex;

justify-content: center;

flex-direction: column;

}

#form_message{

box-shadow: 0 0 10px rgba(0,0,0,0.5);

border-radius: 5px;

margin:10px;

padding: 10px;

width: 300px;

height:300px;

}

#form_message input,textarea{

border-radius: 5px;

width: 170px;

}

#submit{

height: 50px;

float: right;

}

#form_message h2{

text-align: center;

}

<meta charset="UTF-8" />

<?php

if (isset($_POST['name']) && $_POST['name'] != "")//если существует атрибут NAME и он не пустой то создаем переменную для отправки сообщения

$name = $_POST['name'];

else die ("Не заполнено поле \"Имя\"");//если же атрибут пустой или не существует то завершаем выполнение скрипта и выдаем ошибку пользователю.

if (isset($_POST['email']) && $_POST['email'] != "") //тут все точно так же как и в предыдущем случае

$email = $_POST['email'];

else die ("Не заполнено поле \"Email\"");

if (isset($_POST['subjects']) && $_POST['subjects'] != "")

$sub = $_POST['subjects'];

else die ("Не заполнено поле \"Тема\"");

if (isset($_POST['message']) && $_POST['message'] != "")

$body = $_POST['message'];

else die ("Не заполнено поле \"Сообщение\"");

$address = "Cheburilka@gmail.com";//адрес куда будет отсылаться сообщение для администратора