ПЗ Мешкова (1228308), страница 5
Текст из файла (страница 5)
После нажатия на ссылку «Ответить на вопрос» под необходимым вопросом появляется форма для заполнения ответа доктора (рисунок 38).
Рисунок 38 – Форма для заполнения ответа доктора
После того, как доктор ответит на вопрос пользователя и нажмет на кнопку «Ответить», страница автоматически обновится и ответ на вопрос будет доступен как на странице «Вопрос-ответ» в режиме администратора (рисунок 39), так и на странице «Вопрос ответ в режиме пользователя» (рисунок 40).
Рисунок 39 – Отображение ответа доктора в режиме администратора
Рисунок 40 – Отображение ответа доктора в режиме пользователя
Дата и время ответа на вопрос доктора формируются автоматически, исходя из текущего времени в данном часовом поясе.
Следующая страница в пункте меню веб-сайта в режиме администратора – «Отзывы». На данной странице администратор может удалить один отзыв, несколько отзывов или все отзывы. Механизм удаления аналогичен механизму удаления на странице «Вопрос-ответ» в режиме администратора. Удаление отзывов необходимо для того, чтобы у администратора была возможность удалить неуместные отзывы. Интерфейс страницы «Отзывы» в режиме администратора представлен на рисунке 41.
Рисунок 41 – Интерфейс страницы «Отзывы» в режиме
администратора
Программный код базовых страниц web-сайта представлен в приложении А.
3.4 Использование современных стандартов HTML5 и CSS3
3.4.1 Стандарт HTML5
Каждый документ, имеющий расширение «.html» должен начинаться с указания типа документа. При использовании стандарта HTML5 используется следующее обозначение типа документа:
<!DOCTYPE html>
Предыдущие версии HTML имели несколько типов DOCTYPE.
В стандарте HTML5 введены специальные семантические тэги, которые позволяют поисковым системам и браузерам определять структурные единицы страницы сайта такие как: заголовок, панель меню и «подвал».
Для определения заголовка сайта используется тэг «header». Пример использования тэга «header» в коде главной страницы web-сайта:
<header>
<div id="logopic">
<img id="logo" src = "images/logo.jpg" >
</div>
<hr>
</header>
Для определения навигационного меню используется тэг «nav». Пример использования в листинге главной страницы web-сайта:
<nav>
<div class="ssilki" id="thissilk" onClick="window.location='0main.html'">
<p>Главная</p>
</div>
<div class="ssilki" id="ssilkcolor" onClick="window.location='1price.html'">
<p>Услуги и цены </p>
</div>
<div class="ssilki" id="ssilkcolor" onClick="window.location='2collectiv.html'">
<p>Коллектив</p>
</div>
<div class="ssilki" id="ssilkcolor" onClick="window.location='3zapis.html'">
<p>Запись на прием</p>
</div>
<div class="ssilki" id="ssilkcolor" onClick="window.location='4contact.html'">
<p>Контакты</p>
</div>
<div class="ssilki" id="ssilkcolor" onClick="window.location='5vopros.php'">
<p>Вопрос-ответ</p>
</div>
<div class="ssilki" id="ssilkcolor" onClick="window.location='6otziv.php'">
<p>Отзывы</p>
</div>
</nav>
Для определения «подвала» сайта используется тэг «footer». Пример использования тэга «footer» в коде главной страницы web-сайта:
<footer>
<p class="footext"> Создание сайта © Мешкова Мария 2015 </p>
<div id="vhodadm" onClick="window.location='vhod.html'">
<p id="vhtext"> Вход для администратора </p>
</div>
</footer>
В формате HTML5 появились новые возможности для использования форм заполнения на сайте.
Для поля ввода телефонного номера в форме в стандарте HTML5 используется тэг «input type=tel». Пример использования на странице «Запись на прием» в режиме пользователя web-сайта ООО «Партнер»:
<input id="teleph" name="teleph" type="tel" required
placeholder="Пример: +1-234-567-89-10" size="30" maxlength="16">
Также в данном фрагменте кода используются новые атрибуты стандарта HTML5 для форм заполнения:
– required – атрибут указывает, что данное поле обязательно для заполнения;
– placeholder – атрибут показывает подсказку для пользователя в поле ввода.
Также в стандарте HTML5 стало возможным располагать элементы вне формы, но указывать, что они относятся к данной форме. Для этого используется атрибут «form». Пример использования в коде страницы «Вопрос-ответ» в режиме администратора:
echo '<input type="checkbox" name="dels[]" id="check" form="delete" value="'.$val.'"> </input>'
Атрибут формы «autofocus» в стандарте HTML5 при загрузке страницы делает поле заполнения активным (курсор для заполнения находится в данном поле). Пример использования в коде страницы «Запись на прием» в режиме пользователя:
<input id="fam" name="fam" type="text" autofocus required size="30"> </input>
Элемент формы «date» позволяет пользователю выбрать дату в календаре, либо написать вручную в формате «день.месяц.год» (рисунок 42).
Рисунок 42 – Реализация элемента формы «date»
Пример использования в коде страницы «Запись на прием» в режиме пользователя:
<input id="datebirth" name="datebirth" type="date"> </input>
3.4.2 Стандарт CSS3
Стандарт CSS3 позволяет делать цвет фона блока прозрачным, при этом не делая прозрачным содержимое блока с помощью атрибута «RGBA», где «RGB» – это цвет из палитры цветов «RGB», а «A» – это прозрачность. Прозрачность принимает значения от 0 до 1, где значение «1» – полностью непрозрачный элемент, а значение «0» – полностью прозрачный элемент. Пример использования в коде каскадных таблиц стилей главной страницы сайта:
hr
{background:rgba(100, 149, 237, 0.92);}
Стандарт CSS3 позволяет создавать элементы со сглаженными углами (рисунок 43) с помощью свойства «border-radius» (радиус границы).
Рисунок 43 – Сглаженные углы у формы заполнения на
странице «Запись на прием» в режиме пользователя
Пример использования в коде каскадных таблиц стилей страницы «Запись на прием» в режиме пользователя:
fieldset
{
height:425px;
width: 300px;
float:left;
background:rgba(153, 204, 255, 0.9);
border-radius: 10px;
border: 2px solid #0B0B61;
margin: 5px;
}
Для переноса слов, выходящих за рамки отведенного для них блока в стандарте CSS3 используется свойство «word-wrap». Пример использования свойства в коде каскадных таблиц стилей страницы «Отзывы» в режиме пользователя:
#maintext
{
font-family:arial;
font-size:12px;
color:#0B0B61;
text-align:left;
margin:7px 3px;
word-wrap: break-word;
}
Для эффектов перехода в стандарте CSS3 используется свойство «transition». В разрабатываемом web-сайте данное свойство применяется следующим образом: при наведении курсора мыши на телефон клиники, расстояние между символами надписи плавно увеличиваются и плавно меняется цвет этих символов. На рисунке 44 представлен телефон клиники в обычном виде, а на рисунке 45 представлен телефон клиники при наведении на него курсора мыши.
Рисунок 44 – Телефон клиники в
обычном виде
Рисунок 45 – Телефон клиники при
наведении на него курсора мыши
Данный эффект реализован с помощью псевдокласса «hover». Пример кода каскадных таблиц стилей всех страниц сайта в режиме пользователя:
#tel
{
margin-top:-20px;
margin-right:2%;
margin:2%;
font-family:arial;
font-size:14pt;
font-weight:bold;
color:#0B0B61;
}
#tel:hover
{
color:#6495ED;
letter-spacing:2px;
cursor: pointer;
transition-duration: 1s;
transition-property: color,letter-spacing;
}
#tel:not(:hover)
{
transition-duration: 1s;
transition-property: color,letter-spacing;
}
Атрибут «transition-duration» отвечает за время выполнения данного эффекта, атрибут «transition-property» указывает на свойства, к которым необходимо применить эффект перехода.
3.5 Адаптивная верстка web-сайта
В настоящее время сеть Интернет доступна практически повсеместно, поэтому пользователи могут заходить на сайты не только с компьютеров, но и с других устройств, например, планшетов или смартфонов. Поэтому при разработке сайта необходимо учитывать данную особенность, потому что экраны разных устройств имеют разное разрешение.
Для того, чтобы веб-сайт отображался корректно на разных устройствах используют технологию адаптивной блочной верстки, которая адаптируется под разрешение устройства и выводит на экран веб-сайт с необходимыми для данного разрешения параметрами.
Для того, чтобы применить адаптивную верстку веб-сайт сначала тестируют на мониторах с различным разрешением, а затем прописывают отдельно необходимые элементы, которые отображаются некорректно при различном разрешении, используя правило «@media». С помощью данного правила можно прописывать код каскадных таблиц стилей для отдельных элементов используя:
– промежуток разрешений (правила будут выполняться только в указанных пределах):
@media (max-width: 1296px) and (min-width: 961px)
– максимальное разрешение (правила будут выполняться, пока разрешение не превысит указанное максимальное разрешение):
@media (max-width: 960px)
– минимальное разрешение (правила будут выполняться, начиная с указанного минимального разрешения):
@media (min-width: 1367px)
В остальных случаях страница отображается исходя из общего кода каскадных таблиц стилей. При использовании правила «@media» не нужно прописывать весь код каскадных таблиц стилей для страницы, достаточно прописать один элемент или необходимое свойство элемента. Также для одной страницы может быть прописано несколько файлов с кодом каскадных таблиц стилей. В данном веб-сайте используется такой механизм, потому что веб-сайт выполнен в едином стиле. Поэтому общие элементы оформления страницы считываются из общего для всех страниц веб-сайта файла каскадных таблиц стилей, а индивидуальные свойства этих элементов и прочие элементы прописаны в индивидуальном файле каскадных таблиц стилей.
Пример кода языка разметки гипертекста HTML для обращения к каскадным таблицам стилей:
<link rel="stylesheet" type="text/css" href="foreach.css">
<link rel="stylesheet" type="text/css" href="0main.css">
Также при использовании адаптивной верстки применяют относительные единицы измерения, которые определяют размер элемента относительно значения другого размера, например, проценты или пикселы. При использовании процентов размер элемента зависит от размена экрана монитора, а при использовании пикселов размер элемента зависит от разрешения устройства и его технических характеристик.
Пример использования относительных единиц измерения в коде каскадных таблиц стилей:
header
{
position:relative;
height:200px;
width: 100%;
![](https://s.studizba.com/z.php?f=/templates/si/i/noavatar.png&w=100&h=100&t=1"){kind=avatar}
