МИНОБРНАУКИ РОССИИ
ФЕДЕРАЛЬНОЕ ГОСУДАРСТВЕННОЕ БЮДЖЕТНОЕ
ОБРАЗОВАТЕЛЬНОЕ УЧРЕЖДЕНИЕ ВЫСШЕГО ОБРАЗОВАНИЯ
«БАШКИРСКИЙ ГОСУДАРСТВЕННЫЙ ПЕДАГОГИЧЕСКИЙ
УНИВЕРСИТЕТ ИМ. М. АКМУЛЛЫ»
ИНСТИТУТ ФИЗИКИ, МАТЕМАТИКИ, ЦИФРОВЫХ И
НАНОТЕХНОЛОГИЙ
Кафедра программирования и вычислительной математики
Направление- Педагогическое образование
Направленность (профиль) физическая культура и профиль по выбору
Курс 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 подключение стиля пользователя делается через меню Сервис > Свойство обозревателя > Кнопка «Оформление»