Где 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 коды для фото-слайдов)