2.3.2 Описание программных модулей
В HTML коде главной страницы, представленном в приложении А, содержатся блоки <div>, в которых прописано содержание сайта.
Блок <div id="maket"> является основным блоком и содержит подблоки <div id=" header1">, <div id=" header2">, <div id="left">, <div id="content">, <div id="footer">.
Блок <div id=" header1">, представленный в соответствии с рисунком 8, является шапкой сайта, содержит заголовок и изображения, на одном из которых находится ссылка, указывающая на официальный сайт Еловского муниципального района.
Рисунок 8 – Блок <div id=" header1">
Блок <div id=" header2">, представленный в соответствии с рисунком 9, содержит таблицу, в которой располагаются текущее время и изображение.
Рисунок 9 – Блок <div id=" header2">
Блок <div id="left">, представленный в соответствии с рисунком 10, содержит меню сайта.
Рисунок 10 – Блок <div id="left">
Блок <div id="content">, представленный в соответствии с рисунком 11, является главным и содержит основную информацию сайта.
Рисунок 11 – Блок <div id="content">
Блок <div id="footer">, представленный в соответствии с рисунком 12, располагается в нижней части сайта, в которой принято публиковать информацию о разработчиках сайта и адрес электронной почты, при этом пользователи ресурса могут направить администраторам сайтов свои предложения и пожелания.
Рисунок 12 – Блок <div id="footer">
В css.css коде, представленном в приложении Б, содержится оформление и расстановка блоков <div>.
Блоки body, html, представленные в соответствии с рисунком 13, содержат фон сайта, поля и отступы web-страницы.
Рисунок 13 – Блоки body, html
#maket, представленный в соответствии с рисунком 14, данный блок описывает высоту, цвет, тень и отступы блока <div id="maket">.
Рисунок 14 – Блок #maket
#header1, представленный в соответствии с рисунком 15, данный блок описывает высоту, поля справа и лева, фон блока <div id=" header1">.
Рисунок 15 – Блок #header1
#header2, представленный в соответствии с рисунком 16, данный блок описывает поля отступы, цвет текста, границы и фон блока <div id=" header2">.
Рисунок 16 – Блок #header2
#left, представленный в соответствии с рисунком 17, данный блок описывает ширину, обтекание, отступы, тень блока <div id="left">.
Рисунок 17 – Блок #left
#content, представленный в соответствии с рисунком 18, данный блок описывает поля и отступы блока <div id="content">.
Рисунок 18 – Блок #content
#footer, представленный в соответствии с рисунком 19, данный блок описывает фон, поля, тень блока <div id="footer">.
Рисунок 19 – Блок #footer
В style.css коде, представленном в приложении В, содержится оформление и расстановка блоков <div>.
Пример style.css кода представлен в соответствии с рисунком 20.
Рисунок 20 – Код «style.css»
p.a1 задает оформление текста тега <p> класса <class="a1">.
p.a2 задает оформление текста тега <p> класса <class="a2">.
p.a3 задает оформление текста тега <p> класса <class="a3">.
.s задает оформление текста тега <s>.
.s1 задает оформление текста тега <s1>.
.s2 задает оформление текста тега <s2>.
В menu.css коде, представленном в приложении Г, содержится оформление и расстановка блоков <div>.
#nav, представленный в соответствии с рисунком 21, устанавливает оформление меню.
Рисунок 21 – Блок #nav
#nav, #nav ul, представленный в соответствии с рисунком 22, убирает маркер списка, обнуляет внутренние отступы, задает ширину.
Рисунок 22 – Блоки #nav, #nav ul
#nav ul, представленный в соответствии с рисунком 23, устанавливает относительное позиционирование.
Рисунок 23 – Блок #nav ul
#nav li a, представленный в соответствии с рисунком 24, задает стили меню.
Рисунок 24 – Блок #nav li a
#nav li a + img, представленный в соответствии с рисунком 25, задает оформление пунктов меню.
Рисунок 25 – Блок #nav li a + img
#nav li a:hover, представленный в соответствии с рисунком 26, устанавливает параметры основных пунктов меню.
Рисунок 26 – Блок #nav li a:hover
#nav ul li a, представленный в соответствии с рисунком 27, устанавливает параметры для подменю.
Рисунок 27 – Блок #nav ul li a
#nav ul li a:hover, представленный в соответствии с рисунком 28, устанавливает параметры при наведении указателя на пункты (ссылки) подменю.
Рисунок 28 – Блок #nav ul li a:hover
В wrem.css коде, представленном в приложении Д, содержится оформление и расстановка блоков <div>.
.clock, #Date, clock ul, clock ul li, #point, @-webkit-keyframes mymove, @-moz-keyframes mymove устанавливает стиль для блока с текущим временем.
Пример wrem.css кода представлен в соответствии с рисунком 29.
Рисунок 29 – Код «wrem.css»
В galereya.css коде, представленном в приложении Е, содержится оформление и расстановка блоков <div>.
.gallery a img, представлен в соответствии с рисунком 30, устанавливает оформление фотографии (рамка, округленные углы).
Рисунок 30 – Блок .gallery a img
.gallery a img:hover, представлен в соответствии с рисунком 31, устанавливает позиционирование фотографий.
Рисунок 31 – Блок .gallery a img:hover
.gallery a:focus img, представлен в соответствии с рисунком 32, устанавливает фокусирование при раскрытии фотографии.
Рисунок 32 – Блок .gallery a:focus img
.gallery a, представлен в соответствии с рисунком 33, устанавливает цвет, стиль и толщину внешней границы на всех четырех сторонах элемента.
Рисунок 33 – Блок .gallery a
В galereya1.css коде, представленном в приложении Ж, содержится оформление и расстановка блоков <div>.
Пример galereya1.css кода представлен в соответствии с рисунком 34.
Рисунок 34 – Код «galereya1.css»
В album.css коде, представленном в приложении З, содержится оформление и расстановка блоков <div>.
Пример album.css кода представлен в соответствии с рисунком 35.
Рисунок 35 – Код «аlbum.css»
В mail.php коде, представленном в приложении И, содержится описание обратной связи.
Пример mail.php кода представлен в соответствии с рисунком 36.
Рисунок 36 – Код «mail.php»