Файл: Разработка сайта стоматологической клиники (Структура документа).pdf

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

Вы можете применять ссылки как для перемещения по сайту, так и для перемещения от одного сайта к другому.

URL. HTML использует URL (Uniform Resource Locator) для представления гипертекстовых ссылок и ссылок на сетевые сервисы внутри HTML-документа. Первая часть URL (до двоеточия) описывает метод доступа или сетевой сервис. Другая часть URL (после двоеточия) интерпретируется в зависимости от метода доступа. Обычно, два прямых слэша после двоеточия обозначают имя машины:

method://machine-name/path/foo.html

Следующий пример представляет собой вызов HTML-документа index.html с сервера www.softexpress.com с использованием HTTP протокола:

http://www.softexpress.com/index.html

Uniform Resource Locator имеет следующий формат:

method://servername:port/pathname#anchor

Для создания ссылки на языке HTML необходимо написать следующий код:

<A HREF="#named_anchor"> Текст </A>

2.2 Html формы

Современные браузеры позволяют пользователю, заполнив специальную форму, возвращающую полученное значение, осуществлять какие то действия на некотором веб-сервере. Когда форма распознаётся веб-браузером, создается определенные экранные элементы Windows, такие, как текстовые поля, выпадающие меню, прокручиваемые списки, кнопки и т.п. Когда пользователь заполняет форму и нажимает кнопку "Выполнить" (SUBMIT – определенный пользователем тип кнопки, который задается при описании документа), информация, из заполненой пользователем в формы, посылается HTTP-серверу для обработки и анализе другими программами, работающими на сервере.

При создании формы, каждый элемент входных данных имеет тэг <INPUT>. Когда пользователь заполняет данные в элементе формы, сведения располагаются в разделе VALUE этого элемента.

Рассмотрим синтаксис создания форм. Все формы начинаются тэгом <FORM> и заканчиваются тэгом </FORM>.

<FORM METHOD="get|post" ACTION="URL"> Содержимое формы </FORM>

ACTION: ACTION описывает URL-адрес, который будет вызываться для обработки формы. Данный URL-адрес почти всегда указывает на PHP-скрипт, обрабатывающий данную форму.

Тэги формы:

TEXTAREA:

Тэг <TEXTAREA> применяется для того, чтобы дать возможность пользователю вводить более одной строки информации.

Тэг <INPUT> применяется для ввода одной строки текста или одного слова.

CHECKBOX:Используется для простых логических (BOOLEAN) значений. Значение, ассоциированное с именем данного поля, которое будет передаваться в вызываемую CGI-программу, может принимать значение ON или OFF.

HIDDEN:Поля данного типа не отображаются браузером и не дают пользователю изменять присвоенные данному полю по умолчанию значение. Это поле используется для передачи в CGI-программу статической информации, например, ID пользователя, пароля или другой информации.

IMAGE:

Данный тип поля ввода позволяет вам связывать графический рисунок с именем поля. При нажатии мышью на какую-либо часть рисунка будет немедленно вызвана ассоциированная форме CGI-программа. Значения, присвоенные переменной NAME будут выглядеть так - создается две новых переменных: первая имеет имя, обозначенное в поле NAME с добавлением .x в конце имени. В эту переменную будет помещена X-координата точки в пикселях (считая началом координат левый верхний угол рисунка), на которую указывал курсор мыши в момент нажатия, а переменная с именем, содержащимся в NAME и добавленным .y, будет содержать Y-координату. Все значения атрибута VALUE игнорируются. Само описание картинки осуществляется через атрибут SRC и по синтаксису совпадает с тэгом <IMG>.

PASSWORD:

То же самое, что и атрибут TEXT, но вводимое пользователем значение не отображается браузером на экране.

RADIO:

Данный атрибут позволяет вводить одно значение из нескольких альтернатив. Для создания набора альтернатив вам необходимо создать несколько полей ввода с атрибутом TYPE="RADIO" с разными значениями атрибута VALUE, но с одинаковыми значениями атрибута NAME. В CGI-программу будет передано значение типа NAME=VALUE, причем VALUE примет значение атрибута VALUE того поля ввода, которое в данный момент будет выбрано (будет активным). При выборе одного из полей ввода типа RADIO все остальные поля данного типа с тем же именем (атрибут NAME) автоматически станут невыбранными на экране.

RESET:

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

SUBMIT:

Данный тип обозначает кнопку, при нажатии которой будет вызвана CGI-программа (или URL), описанная в заголовке формы. Атрибут VALUE может содержать строку, которая будет высвечена на кнопке.

TEXT:

Данный тип поля ввода описывает однострочное поле ввода. Используйте атрибуты MAXLENGTH и SIZE для определения максимальной длинны вводимого значения в символах и размера отображаемого поля ввода на экране (по умолчанию принимается 20 символов).

VALUE - присваивает полю значение по умолчанию или значение, которое будет выбрано при использовании типа RADIO (для типа RADIO данный атрибут обязателен).

2.3 Добавление стилей в документ

Каскадные таблицы стилей (Cascading Style Sheets, CSS) – это один из способов форматированного отображения содержимого или контента на Web-странице. CSS предоставляет большие возможности в дизайне сайтов.

CSS называют языком стилей, так как он отвечает за оформление HTML-документов. CSS работает с шрифтами, полями, строками, высотой, шириной, рамками и многим другим, определяющим дизайн сайта.

Основным понятием CSS является стиль – т. е. набор правил оформления и форматирования, который может быть применен к различным элементам страницы. В стандартном HTML для присвоения какому-либо элементу определенных свойств (таких, как цвет, размер, положение на странице и т. п.) приходилось каждый раз описывать эти свойства, даже если на одной страничке должны располагаться 10 или 110 таких элементов, ничуть не отличающихся один от другого. Вы должны были десять или сто десять раз вставить один и тот же кусок HTML- кода в страничку, увеличивая размер файла и время загрузки на компьютер просматривающего ее пользователя. К тому же это считается плохим тоном для разработчиков. CSS даёт намного больше возможностей для разработчика и грамотно проработан на сегодняшний день.

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

Информация о стилях может располагаться либо в отдельном файле, либо непосредственно в коде Web-странички. Расположение описания стилей в отдельном файле имеет смысл в случае, если вы планируете применять эти стили к большему, чем одна, количеству страниц. Для этого нужно создать обычный текстовый файл, описать с помощью языка CSS необходимые стили, поместить этот файл на Web-сервере, а в коде Web-страниц, которые будут использовать стили из этого файла, нужно будет сделать ссылку на него. Делается это с помощью тега <LINK>, располагающегося внутри тега <BODY> ваших страниц:

Основные преимущества CSS:

Управление оформлением множества web-страниц с помощью одной таблицы стилей;
Более тонкий контроль над внешним видом web-страниц;
Различное представление для разных устройств (монитор, планшет, смартфон, вывод на печать и т.д.);
Хорошо проработанная технология дизайна.

Модель составления правил CSS-стилей показана на рисунке 2.

Рисунок 2 – Составление правил CSS

Из рисунка 2 можно сказать, что CSS содержит правила, состоящие из двух блоков: селектора и свойств.

Селектор определяет, для какой части Web-страницы назначается стилевое оформление. Далее в фигурных скобках идёт одно или несколько свойств и их значения.

Свойство информирует Web-браузеру о том, что изменить, а значение показывает, какое должно быть это изменение.

Стандартная запись правил CSS:

Селектор { свойство: значение }

Для повышения удобочитаемости кода разработчики часто добавляют пробелы и переносы строк:

Селектор {

свойство: значение

}

Приведем пример объявления селектора, который сообщает браузеру об увеличении размера содержимого тега h1 до 120% по сравнению с текущим размером:

h1{

font-size: 120%

}

В таблице 1 приведены некоторые правила CSS. В столбце «Результат» поясняется, что произойдет после применения данных правил к web-странице.

Таблица 1 – Перечень правил CSS

Селектор	Свойство	Значение	Результат
H1	font-size	120%	Размер шрифта больше текущего значения
P	font-size	90%	Размер шрифта меньше текущего значения

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

Селектор {

свойство: значение;

свойство: значение, значение, значение;

свойство: значение;

}

Для применения правил CSS в HTML-документе, необходимо его подключить. Делается это несколькими способами. Один из них описать правила в теге style:

</style>

Элемент style показывает браузеру о том, что он содержит селекторы CSS, необходимые для форматирования.

Другой способ – подключение файла CSS в теге head, указав путь к файлу:

CSS позволяет разными способами указать к каким тегам Web-страницы применяется стилевое оформление.

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

3. Разработка сайта стоматологической клиники «Вымпел»

3.1 Требования к приложению

На сегодняшний день сайт является обязательным атрибутом многих организаций. Стоматологическая клиника одна из таких организация. Для привлечения большего числа клиентов и разрабатывается сайт.

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

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

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

В дизайне сайта не должны присутствовать:

мелькающие баннеры;
много сливающегося текста.

3.2 Пользовательский интерфейс сайта

При разработке пользовательского интерфейса старались учитывать основные требования к дизайну сайтов. Главная страница созданного сайта показана на рисунке 3.

Рисунок 3 – Главная страница сайта

Как видно из рисунка 3 разработанный сайт стоматологической клиники «Вымпел» имеет в своём дизайне преимущественно светлые цвета. Содержит всю необходимую информацию

Оказываемые услуги;
Новости клиники;
Специалисты клиники;
Контакты.

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

При разработке сайта важно учитывать разрешения экрана пользователей. Из-за слишком маленького разрешение сайт может отобразиться на мониторе не полностью. Какую то часть придется просматривать, используя полосу прокрутки. Слишком большое разрешение приведет к тому, что сайт отобразится слишком мелко. Поэтому при разработке сайта было принято решение адаптировать сайт на среднее разрешение 1280 на 960 пикселей. В этом случае у пользователей будет отображаться нечто среднее на мониторах, что устроит большинство.