Файл: Разработка сайта кинотеатра «Дружба» (ГЛАВА 1. АНАЛИТИЧЕСКАЯ ЧАСТЬ).pdf

<strong> </strong> – так же как и тэг <b></b> показывает текст жирным. Но в отличие от последнего заставляет программы для чтения с экрана (например, для слепых) читать слово громче, с нажимом.

<br> – тэг разрыва строки. Заканчивает текущую строку и начинает оставшийся текст с новой строки ниже. Строки располагаются вплотную друг под другом. В отличие от большинства тэгов не имеет закрывающегося тэга.

<p> </p> – тэг делает отбивку абзаца: заканчивает текущую строку, пропускает строку и начинает новую строку. Пустая строка зрительно разделяет абзацы. Требуется открывающий и закрывающий тэг, но современные программы обозреватели понимают и одиночный тэг.

<div> </div> – Используется для логического выделения блока HTML-документа. В современном сайтостроении используется как удобный контейнер для объектов страницы, которым легко динамически манипулировать – перемещать, регулировать отступы и т.п. Находящиеся между начальным и конечным тегами текст или HTML-элементы по умолчанию оформляются как отдельный параграф.

Параметр align – предназначен для центрирования текста. Используется в тэгах <p> </p>, <font></font> , <div> </div> и т.д. Может иметь значения: center (выравнивание по центру), left (выравнивание по левому краю), right (выравнивание по правому краю) и justify (выравнивание по ширине). Необходимо учесть, что последнее значение не работает в старых версиях браузеров.

<hr> – одиночный тэг, который вставляет в документ горизонтальную линию. Параметры тэга: align, size, width (длина линии), color, noshade (определяет способ закраски линии как сплошной. Атрибут не требует указания значения. Без данного атрибута линия отображается объемной).

<a> </a> – тэг создания гиперссылок. С помощью ссылки можно перейти от одного фрагмента текста, к другому; от одной страницы, к другой. Ссылкой может быть, как текст, так и картинка. Этот тэг применяют с параметрами href или name. В тэге надо указать путь к файлу от данного файла или полный адрес URL. Иногда бывает нужно сделать ссылку не на другой документ, а внутри того же документа – закладку, которую ещё называют якорем. Создаётся такая закладка с помощью атрибута name. Текст, куда необходимо сослаться нужно сделать закладкой: <a name= “text”>Фрагмент текста</a>. Тогда ссылка к этому фрагменту текста прописывается так: <a href= “#text”> Сошлёмся на фрагмент текста</a>. Ссылаться так же можно на свой почтовый адрес. Выглядеть это будет так: <a href="mailto:pochta@mail.ru"> Написать мне </a>. В этом тэге используются так же параметры: link (цвет ссылки), alink (цвет активной ссылки), vlink (цвет уже посещенной ссылки).

<img src> – тэг размещения изображения. В этом тэге нужно прописать путь к картинке:<img src= “Путь к картинке”>. Этот тэг может содержать большое количество разнообразных параметров. Параметры width и height определяют ширину и высоту картинки. Параметр border указывает, какой толщины должна быть граница вокруг картинки. С помощью параметра alt задаётся описание картинки. В этом тэге, как и во многих других используется параметр align, для выравнивания картинки. Параметр vspace – задаёт расстояние между текстом и рисунком по вертикали. Расстояние задаётся в пикселях. Параметр hspace – задаёт расстояние между текстом и рисунком по горизонтали. Тоже в пикселях.

<table> </table> – тэги создания таблицы. Таблица состоит из строк и столбцов, поэтому, надо указать ещё и их с помощью тэгов <tr></tr> и <td></td>. Сначала задаются строки, а потом в каждой строке столбцы. Фон таблицы можно задать с помощью атрибута bgcolor. Фон можно задать для таблицы в целом, для ряда, для столбца (в пределе одного ряда). Параметры width и height используются здесь для того, чтобы задать ширину и высоту либо для всей таблицы, либо для одного ряда или столбца. Расположение содержимого ячеек задаётся с помощью атрибута valing. Этот атрибут может иметь следующие значения: middle (содержимое будет находиться в середине ячейки), top (содержимое будет находиться наверху), bottom (содержимое будет находиться внизу). Для таблиц так же существуют параметры colspan и rowspan. Colspan – определяет количество столбцов, на которые простирается данная ячейка, а rowspan – количество рядов. С помощью атрибута cellspacing можно либо избавиться от расстояния между ячейками (если он равен нулю), либо увеличить пространство между ними. Рамка для таблицы задаётся с помощью атрибута border.

<li> </li> – с помощью этого тэга задаются списки. У тэга <li> есть параметр type. Если параметру задать значение disk, то список будет прописан с помощью закрашенных кружочков. При значении circle, кружочки не будут закрашиваться. А если задать значение square, то вместо кружочков, буду квадратики. В списках используют так же тэг <ul> </ul>. С помощь него текст будет сдвигаться вправо. Чтобы отступ был больше надо вкладывать тэг <ul> в самого себя. Тэг <ol> </ol> создаёт упорядоченный список. Между начальным и конечным тегами должны присутствовать один или несколько элементов LI , обозначающих отдельные пункты списка. Атрибут start определяет первое число, с которого начинается нумерация пунктов. Type – определяет стиль нумерации пунктов. Может иметь значения:

"A" – заглавные буквы A, B, C ...

"a" – строчные буквы a, b, c ...

"I" – большие римские числа I, II, III ...

"i" – маленькие римские числа i, ii, iii ...

"1" – арабские числа 1, 2, 3 ...

<frameset> </frameset> – создаёт фрейм-документ. Фреймы (frames) используются для разбивки окна браузера на несколько областей, каждая из которых представляет собой отдельный html-документ (фрейм). Как правило, фреймы используются для облегчения навигации по сайту, создания навигационного меню. Тем не менее, большинство разработчиков избегают использования фреймов: обозреватели испытывают сложности при печати фреймовых документов; роботы поисковых систем не знают, какие составляющие фреймовых документов нужно включать в результаты поиска Фрейм создаётся вместо тела документа, т.е. элемент <body> в документе не используется. Тэг <frame> прописывается, чтобы сообщить браузеру какие документы и в каком ряду будут. Для создания фреймов используют параметр row, который определяет количество и размеры горизонтальных фреймов в окне браузера. В качестве значения задается список размеров фреймов через запятую. Параметр cols – определяет количество и размеры вертикальных фреймов в окне браузера. Размеры задаются так же, как и в предыдущем атрибуте rows. Параметр border используется здесь для определения ширины рамок фреймов в пикселях. Данный атрибут действует только в браузерах Netscape. Frameborder – определяет наличие рамок у содержащихся внутри frameset фреймов. Scrolling – параметр тэга <frame>. Он может принимать несколько значений: no – это значит совсем не будет полосы прокрутки, ни при каких обстоятельствах; yes – это значит полоса прокрутки будет всегда; auto – полоса прокрутки появиться только тогда, когда она нужна. Marginheight определяет ширину (в пикселах) верхнего и нижнего полей фрейма, а marginwidth определяет ширину левого и правого полей фрэйма.

<form> </form> – используется для создания заполняемой формы. Внутри элемента form разрешается использовать большинство html-элементов. Атрибут name определяет имя формы. Action – обязательный атрибут. Определяет URL, по которому будет отправлено содержимое формы.

<input> – является элементом формы. Предназначен для ввода данных с веб-страницы. Имеет несколько типов, которые отвечают за внешний вид поля и тип вводимой информации.

Таблицы стилей CSS

Стили – это набор параметров, задающие внешнее представление некоторого объекта в той или иной среде.

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

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

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

Синтаксис и принцип работы CSS:

В CSS в отличие от HTML нет ни элементов, ни атрибутов, ни тегов. Основной структурной единицей здесь является правило, которое определяет, как будет выглядеть тот или иной элемент в документе.

Правило имеет следующую структуру:

Как видно из рисунка, сначала записывается так называемый селектор, показывающий к какому html-тегу (тегам) применяется то или иное свойство. Далее, непосредственно за селектором, пишется блок объявления стилей, который обязательно заключается в фигурные скобки. Каждое объявление в свою очередь состоит из свойства и его значения. После свойства ставится двоеточие. Правило может содержать в себе несколько объявлений. В таком случае они должны быть отделены друг от друга точкой с запятой.

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

Цвет и фон в CSS

Основными свойствами цвета и фона в CSS являются:

color –цвет элементов
background-color - цвет фона
background-image - повторяющееся фоновое изображение.
background-repeat - порядок повторения фонового изображения
background-position - расположение фонового изображения

Свойство COLOR

Задает основной цвет (цвет переднего плана) того или иного элемента.

Свойство BACKGROUND-COLOR

Задает фоновый цвет элемента. В отличие от html, в котором фоновый цвет можно использовать только для страницы или ячейки таблицы (т.е. имеющих атрибут bgcolor) в CSS, фоновый цвет можно задавать для чего угодно: для таблиц, заголовков, параграфов, ссылок и др. Тут главное правильно определить, что нам нужно.

Свойство BACKGROUND

Служит для сокращенной записи всех выше рассмотренных свойств. Порядок свойств этого элемента следующий:

background-color_background-image_background-repeat_background-attachment _background-position

Т.е. просто записывается пять значений свойств через пробел.

Шрифты в CSS

За шрифты в CSS отвечают следующие свойства:

font-family – семейство шрифтов
font-style – стиль шрифта (normal, italic, oblique)
font-weight – толщина (normal, bold)
font-size – размер шрифта в пикселях

Текст в CSS

Свойства CSS отвечающие за форматирование текста.

text-align – выравнивание текста (left,right, сenter, justify)
text-decoration – оформление текста (none, underline, overline, line-through)
text-indent – красная строка
text-transform – меняет регистр слов (capitalize, uppercase, lowercase, none)
letter-spacing – расстояние между буквами в пикселях
word-spacing– расстояние между словами в пикселях

Ссылки в CSS

В CSS можно описать 4 вида ссылок:

A:link {... стиль оформления обычной ссылки...}
A:active {... стиль оформления ссылки в момент нажатия...}
A:visited {... стиль оформления посещенной ссылки...}
А:hover {... стиль оформления ссылки, на которую наведен указатель мыши...}

ГЛАВА 2. ПРАКТИЧЕСКАЯ ЧАСТЬ

2.1 Постановка задачи

Разработать web-сайт «Кинозал Дружба». Сайт должен представлять набор связанных между собой веб-страниц. На страницах должны быть размещены элементы интерфейса, позволяющие использовать современные методы размещения информации в Интернете. Элементы интерфейса должны быть понятны в использовании и концентрировать внимание пользователя на информации, а не на ее оформлении.

Сайт должен соответствовать следующим параметрам:

Современный дизайн. Цветовая гамма, градиентные заливки, четко читаемый шрифт, фон сайта и отдельных блоков, составная разметка. Страницы должны соответствовать современным представлениям о красоте сайта и следовать тенденциям сайтостроения последних лет. В частности, для этого должен быть использовать адаптивный дизайн, модульная структура представления информации. Модули должны содержать разделы, которые индексируются популярными поисковыми системами Yandex и Google. Страницы должны быть не перегружены обилием информации. Графические элементы должны обладать свойствами интерактивности, не приводящими к избыточному количеству перезагрузок страницы.
Основное генерируемое меню. Основное меню должно содержать ссылки на страницы, либо являться группой для нескольких страниц.
Поддержка HTML 5 и CSS 3. Код сайта должен поддерживать использование функций и команд последних версий языков HTMLи CSS. В частности,HTML5 CSS 3. Также верстка страниц не должна содержать ошибок валидации, это плохо сказывается на поисковую выдачу сайта.
Адаптивный дизайн. Верстка сайта должна быть адаптивной под самые популярные разрешения экранов. Функциональность сайта не должна зависеть от разрешения экрана.
Поддержка ОС. Сайт должен одинаково стабильно и без изменения внешнего вида (потери функциональности, цветов, шрифтов) работать на устройствах под управлением наиболее распространенных операционных систем. В частности, Windows, Windows Mobile, iOs, Androud.
Совместимость с браузерами. Сайт должен быть протестирован на совместимость с наиболее распространенными современными браузерами. А именно, Internet Explorer, Firefox, Opera, Safari, Chrome.