Добавлен: 29.06.2023
Просмотров: 268
Скачиваний: 9
СОДЕРЖАНИЕ
1 Современные технологии создания сайтов
1.1 Статически и динамические сайты
1.2 Системы управления контентом
2 Разработка веб-страницы туристического предприятия
2.1 Программное обеспечения для разработки веб-страницы
2.2 Язык гипертекстовой разметки HTML
<head>
<title>Заголовок страницы</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="description" content="описание сайта">
<meta name="keywords" content="ключевые слова">
</head>
В тегах <body>...</body> заключается отображаемая информация (тело) страницы: текст, изображения, таблицы, звук, видео, объекты (например, flash-проигрыватель), javascript-программы, таблицы стилей (css) и т.д [13].
HTML-документ рекомендуется всегда завершать закрывающим тегом </html> и тем самым сигнализировать браузеру о завершении документа. Это полезная информация может быть использована, например, при обрыве связи во время загрузки страницы. Тогда отсутствие тега </html> может означать неполную загрузку страницы. На практике встречается и много других случаев, когда важно иметь корректную разметку страницы для исключения неверного отображения содержания документа в исключительных ситуациях [25].
Текст HTML-документа, как правило, представляет собой непосредственно текст и ссылки, ведущие либо на отдельные фрагменты того же документа, либо на другие документы.
Рисунок 6 – Структура документа HTML
Пример: простейший HTML-документ (рис. 7).
Рисунок 7 – Пример простого HTML-документа
Для создания заголовков в HTML используются теги:
<h1></h1> - заголовок 1 уровня;
<h2></h2> - заголовок 2 уровня;
<h3></h3> - заголовок 3 уровня;
<h4></h4> - заголовок 1 уровня;
<h5></h5> - заголовок 1 уровня;
<h6></h6> - заголовок 1 уровня.
На рис. 8 показано отображение заголовков разного уровня в браузере.
Рисунок 8 – Отображение заголовков в браузере
HTML есть возможность создавать нумерованные и маркированные списки [42].
Тег <ol>...</ol> - создает нумерованный список элементов/
Атрибуты:
start="N" - начать нумерацию с числа N;
type="..." -определяет формат нумерации:
1 - арабские цифры (по умолчанию);
A - прописные буквы (A, B, C);
а - строчные буквы (a, b, c);
I - прописные римские цифры (I, II, III);
i - строчные римские цифры (i, ii, iii).
Тег <ul>...</ul> - создает маркированный список элементов.
Атрибут:
type="..." - определяет формат маркера:
disk - диск (по умолчанию);
circle – окружность;
square – квадрат.
<li>...</li> - задает элемент списка в нумерованном или маркированном списке
Атрибуты:
type="..." - формат номера или маркера (см. описание <ol> и <ul>);
value="N" - задает номер элемента списка.
Примеры создания отображения списка показаны на рис. 9-10.
Рисунок 9 – Создание списка в HTML
Рисунок 10 – Отображение списка в браузере
Для создания ссылок используется тег <a>...</a>.
Обязательный атрибут href указывает абсолютный или относительный адрес, на который ведет ссылка. Ссылка может указывать на HTML- документ, изображение, файл для сохранения на диск и пр. Текст ссылки записывается между открывающим и закрывающим тегом [17].
Абсолютный адрес содержит в себе имя хоста и полный путь к ресурсу, например: http://www.example.com/docs/about.html. С помощью абсолютного адреса можно ссылаться на любой открытый ресурс в Интернете. Если нужно поставить ссылку на главную страницу сайта, указывают его адрес и слеш.
Пример для абсолютного адреса:
HTML-код: <А href="http://www.yandex.ru">Яндекс</A>
В браузере ссылка обычно представляется как подчеркнутый текст. При клике по ссылке браузер загружает страницу, указанную в атрибуте href.
Также для документов, расположенных на одном сайта, можно использовать относительный адрес.
Рисунок 11 - Пример файловой структуры
Например, чтобы поставить ссылку из файла file1.html на файл file2.html (рис. 10), необходим следующий HTML-код:
<A href="folder1/file2.html">file2.html</A>
А чтобы ссылка в файле file2.html указывала на file1.html:
<А href="../file1.html">file1.html</A>
Две точки (..) означают переход к родительскому каталогу.
Для файлов в пределах одного сайта рекомендуется использовать только относительные пути. В этом случае ссылки сохранят работоспособность при изменении адреса сайта, переносе в другую папку и т.п.
Для открытия ссылки в новом окне используется атрибут target со значением _blank.
Пример: <a href="http://ya.ru/" target="_blank">Яндекс</a>.
2.3 Каскадные таблицы стилей CSS
Внешний вид веб-страницы задавался с помощью каскадных таблиц стилей. CSS предназначен для манипулирования разметкой, поскольку именно применение стилей позволяет осуществлять групповую замену шрифта, цвета, размера и взаимного расположения элементов, разделив разметку и внешний вид как таковой.
CSS используется применительно к языкам разметки HTML и XHTML, но может также применяться к любым XML-документам, например, к SVG или XUL.
Ключевое понятие в CSS — селектор — представляет собой правило для использования стиля. Браузер для каждого элемента пытается применить стиль в соответствии с заданным правилом. Стиль содержит набор свойств.
Различают простые селекторы, которые будут использованы для указанного элемента, в приведенном ниже примере — к любому заголовку h1, h2, h3:
- h1 {font-family:sans-serif}
- h2 {font-family:sans-serif}
- h3 {font-family:sans-serif}
Селекторы групп:
h1, h2, h3 {font-family: sans-serif}
Этот фрагмент эквивалентен предыдущему фрагменту, состоящему из трех простых фрагментов [16].
Селекторы класса:
*.firstclass{ color: green } - все элементы, имеющие class=firstclass
или
.firstclass{ color: green } - все элементы, имеющие class=firstclass
а также
Hl.firstclass{ color: green } - только элементы H1, имеющие class=firstclass
Селекторы идентификатора ID:
- h1#chapter1 { font-family: sans-serif } - для <h1 id="chapter1">...</h1>
- #chapter1 { font-family: sans-serif } - для любого элемента с id="chapter1"
Селекторы атрибутов:
- h1[class] { font-family: sans-serif } - элемент имеет class
- h1[class="fancy"] { font-family: sans-serif } - элемент имеет class="fancy"
- *[title] { font-family: sans-serif } - любой элемент, имеющий заголовок
Селектор потомков (устанавливает иерархию применения):
tr h1 { font-family: sans-serif } - <tr><td><h1>...</h1></td></tr>
Псевдоклассы (особый вид динамических атрибутов, которые изменяются в зависимости от определенных действий):
- a:link - ссылки, которые не были посещены
- a:visited - посещенные ссылки
- a:hover - выделенная в данный момент ссылка
- a:active - активные ссылки.
При оформлении страницы доступны следующие семейства (family) шрифтов:
- Serif — шрифт с засечками. Обычно используется при бумажной печати. Наиболее используемый шрифт — Times;
- Sans-serif — шрифт без засечек. Подходит для заголовков. Наиболее часто применяемые шрифты этого семейства — Arial, Helvetica, Verdana;
- Monospace — шрифт, который обеспечивает равную ширину символов. Служит для вывода примеров кода, поскольку внешний вид этого текста будет соответствовать текстовой консоли. Наиболее распространен шрифт Courier;
- Fantasy, Cursive — декоративные и курсивные шрифты. Не рекомендуются к применению, поскольку шрифты этой группы необязательно присутствуют в компьютере, на котором будут просматривать html-страницу.
Выбор шрифта осуществляется свойством font-family. Пример использования семейств стилей:
- <p style=”font-family: serif”>Serif: Образец текста</р>
- <р style=”font-family: sans-serif”>Sans-serif: Образец текста</p>
- <p style=”font-family: cursive”>Cursive: Образец текста</p>
- <p style=”font-family: fantasy”>Fantasy: Образец текста</p>
- <p style=”font-family: monospace”>Monospace: Образец текста</p>
Свойство font-family может содержать перечисление шрифтов:
p{font-family:”Times New Roman”, Times, serif;}
В этом случае браузер последовательно будет пытаться найти соответствующий шрифт в системе. Если конкретный шрифт не будет найден (в примере "Times New Roman”, Times), то будет применен шрифт, назначенный для serif-семейства по умолчанию [5].
Можно указать начертание шрифта с использованием свойства font-style. Допустимые значения этого свойства:
font-style: normal | italic | oblique | inherit
где normal — обычное начертание; italic — курсив (имитация рукописного шрифта); oblique — наклонный шрифт (образован наклоном обычного).
Размер шрифта задается с помощью свойства font-size. Его возможные значения:
- larger и smaller — константы, определяющие относительный размер;
- xx-small, x-small, small, medium, large, x-large, xx-large — константы, определяющие абсолютный размер;
- ЧИСЛО % — число, определяющее размер в процентах от шрифта родительского элемента;
- ЧИСЛО px — число, определяющее размер в пикселах. Кроме того, размер шрифта указывается в специальных единицах: em (высота элемента, равная размеру текущего шрифта), ex (высота символа х), пункты (pt).
Толщина шрифта регулируется с помощью свойства font-weight (рис. 12, 13):
font-weight: normal | bold | bolder | lighter | 100, 200.. 900
Здесь normal — обычная толщина; bold — жирный шрифт; bolder — предельно жирный шрифт; lighter — тонкий шрифт; 100 — тонкий шрифт; 400 — соответствует нормальному; 700 — жирному.
Свойство color задает цвет шрифта (рис. 6, 7). Можно указать цвет по его названию на английском языке (red, green, lime) или задать точное значение цвета в системах RGB, HSL, а также в RGBA, HSLA, для которых добавлен канал прозрачности. Полный перечень допустимых значений свойства color приведен в спецификации (см. http://www.w3.org/TR/css3-color/).
Рисунок 12 – Определение стилей для текста в блоке body
Рисунок 13 – Определение стилей для заголовков сайта
Выбор цветовой схемы является очень важным этапом создания дизайна сайта. Фон элементов может быть задан однородным цветом, одиночным или мозаично расположенным.
Используются следующие свойства фона:
- background-color — однородный цвет константой или кодом в одной из допустимых систем цветности. Пример (рис. 14):
header .navbar-default { background-color: #fff;}
Рисунок 14 – Определение фонового цвета для навигационного меню верхней части сайта
- background-image — фоновое изображение. Пример:
body {background-image:url('paper.gif');}
- background-repeat — флаг мозаичного размножения изображения. Пример:
body {
background-image:url('gradient2.png');
background-repeat:repeat-x;
}
- background-attachment — указание на то, будет ли изображение смещаться при скроллировании или будет оставаться на месте. Пример:
background-attachment:fixed;
- background-position — свойство, определяющее позицию размещения изображения на устройстве отображения. Пример:
body
{
background-image:url('img tree.png'); background-repeat:no-repeat; background-position:right top;
}
В соответствии со спецификацией (см. http://www.w3.org/TR/ css3-text/) текст может быть подвергнут преобразованиям при отображении, например, таким как:
- изменение регистра букв (capitalize | uppercase | lowercase);
- изменение пробелов (collapse | preserve | preserve-breaks);
- ограничение длины строки;
- формирование переносов слов;
- форматирование текста;
- выравнивание и разреживание;
- отступы;
- декорирование.
Сейчас в основе модели визуализации элементов на странице лежит блочная модель, которая описывает прямоугольники, формирующиеся вокруг всех элементов в соответствии с их иерархией в дереве элементов документа
В соответствии с блочной моделью для любого элемента имеются область самого элемента (content), внутренние поля (padding), рамка или граница (border), внешние границы (margin). Для каждой области может быть задан размер. Наличие внутреннего поля позволяет сформировать рамку на заданном расстоянии от содержимого элемента; наличие внешнего поля — установить отступ между рядом расположенными элементами [17].
В CSS любой элемент имеет свойства width и height, которые устанавливают размер «содержимого» элемента в процентах, пикселах. Кроме того, значения этих свойств могут быть вычислены.
Размер отступа задается свойствами 'padding-top', 'padding-right', 'padding-bottom', 'padding-left' или единственным свойством padding, которому указывается один общий размер отступа или последовательно отступ сверху, справа, снизу, слева.
Пример:
.container {
padding:0 20px 0 20px;
}
Рисунок 15 – Определение отступов для блока container
Граница представляет собой видимое обрамление элемента с указанным начертанием, цветом и толщиной. Граница может быть задана единственным свойством border или отдельно для каждой стороны блока: 'border-top', 'border-right', 'border-bottom', 'border-left'. Указываются толщина, тип начертания границы и цвет [25].
Пример: header .nav .caret {
border-bottom-color: #f5f5f5;
border-top-color: #f5f5f5;}
При расчете размеров блока необходимо помнить про толщину границы. Внешнее прозрачное поле может быть задано либо единственным свойством 'margin' с указанием одинакового размера границы для всех сторон, либо перечислением размеров по каждой из сторон, либо с использованием свойств 'margin-top', 'margin-right', 'margin-bottom', 'margin-left' для каждой из сторон в отдельности. Пример: