Добавлен: 28.03.2023
Просмотров: 257
Скачиваний: 2
font-size – устанавливается размер шрифта.
Font - можно указывать все свойства шрифта в одном стилевом правиле.
Основные параметры абзаца (и элементов типа "Box")
text-align: [left|right|center|justify] - выравнивание
text-indent: number - отступ красной строки
line-height: number -интерлиньяж
letter-spacing: number - трекинг
padding-left: number - отступ от текста слева
padding-right: number - отступ от текста справа
padding-top: number - отступ от текста сверху
padding-bottom: number - отступ от текста снизу
margin-left: number - отступ от границы слева
margin-right: number- отступ от границы справа
margin-top: number - отступ от границы сверху
margin-bottom: number - отступ от границы снизу
Различные спецификации CSS разбиваются на уровни (версии): CSS 3.1, CSS 95, CSS 98 и CSS NT. Каждый уровень CSS подразумевает более развёрнутый предыдущий уровень, что требует полной совместимости между уровнями.
CSS первого уровня предоставляет следующие возможности.
Параметры шрифтов. Возможности по заданию гарнитуры и размера шрифта, а также его стиля - обычного, курсивного или полужирного.
Цвета. Спецификация позволяет определять цвета текста, фона, рамок и других элементов страницы.
Атрибуты текста. Возможность задавать межсимвольный интервал, расстояние между словами и высоту строки (то есть межстрочные отступы).
Выравнивание для текста, изображений, таблиц и других элементов.
Свойства блоков, такие как высота, ширина, внутренние (padding) и внешние (margin) отступы и рамки. Так же в спецификацию входили ограниченные средства по позиционированию элементов, такие как float и clear.
Уровень CSS2 основан на CSS1 с сохранением обратной совместимости за несколькими исключениями. Добавление к функциональности:
Блочная вёрстка. Появились относительное, абсолютное и фиксированное позиционирование. Позволяет управлять размещением элементов по странице без табличной вёрстки.
Типы носителей. Позволяет устанавливать разные стили для разных носителей (например монитор, принтер, КПК).
Звуковые таблицы стилей. Определяет голос, громкость и т. д. для звуковых носителей (например для слепых посетителей сайта).
Страничные носители. Позволяет, например, установить разные стили для элементов на чётных и нечётных страницах при печати.
Расширенный механизм селекторов.
Указатели.
Генерируемое содержимое. Позволяет добавлять содержимое, которого нет в исходном документе, до или после нужного элемента.
Консорциум Всемирной паутины (W3C) больше не поддерживает CSS2 и рекомендует использовать CSS2.1. В данный момент ведется активная разработка CSS 3, которая должна стать настоящим прорывом в развитии каскадных таблиц стилей.
Мы рассмотрели основные теоретические сведения, касающиеся применения таблиц стилей.
Полученные сведения рассмотрим на примере создания стилей для данного сайта.
Прежде чем начать создавать стили, нужно решить, какие они должны быть: встроенные, внутренние или внешние. В предыдущем разделе были рассмотрены эти разновидности, их достоинства и недостатки. Исходя из этого, можно сделать вывод, что для данного сайта нужно создать внешние стили. Это объясняется тем, что сайт имеет большое количество страниц, и чтобы для каждой отдельно не приходилось создавать стиль, мы создадим одну таблицу стилей и будем применять для всех страниц.
Сначала пишем наименование селектора, к которому будем применять указанные свойства.
Например, body.
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
background: #FFFFFF url('bg-KLASS.gif') left top repeat-x;
margin: 0 auto;
font-size: 12px; /*размер шрифта*/
text-align: left;
}
Далее в скобках идёт свойство CSS и через двоеточие значение параметра.
Сначала зададим свойства шрифта:
font: 100% Verdana, Arial, Helvetica, sans-serif;
После двоеточия перечисляем значения параметров. В данном случае перечислены несколько типов шрифтов. Это делается для того, чтобы в случае, когда какой-то браузер не сможет отобразить первый тип - Verdana, то в этом случае отобразится тип Arial, если не отображается и Arial, то Helvetica, а sans-serif обозначает обычный шрифт без засечек.
margin: 0 - означает, что ни слева, ни справа нет отступов.
padding: 0 - аналогично, нет отступов, только рассматриваются верх и них.
background: #FFFFFF url('bg-KLASS.gif') left top repeat-x;
С помощью этого свойства можно несколько свойств указать в одном селекторе.
#FFFFFF - означает, что фон будет белого цвета.
url('bg-KLASS.gif') - это значит, что рисунок bg-KLASS.gif вставлен в качестве фонового изображения.
left top - позиционируется фоновое изображение от верхнего левого угла.
repeat-x - рисунок повторяется по горизонтали.
font-size: 12px - задаёт размер шрифта.
text-align: left - выравнивает текст слева.
Таким образом, создавался стиль для каждого блока на странице сайта.
JavaScript - это относительно простой объектно-ориентированный язык, предназначенный для создания небольших клиентских и серверных приложений для Internet. Программы, написанные на языке JavaScript, включаются в состав HTML-документов и распространяются вместе с ними. Программы просмотра (браузеры - от англ. browser) типа Netscape Navigator и Microsoft Internet Explorer распознают встроенные в текст документа программы-вставки (script-коды) и выполняют их. Таким образом, JavaScript - интерпретируемый язык программирования. Примерами программ на JavaScript могут служить программы, проверяющие введённые пользователем данные или выполняющие какие-то действия при открытии или закрытии документа. Такие программы могут реагировать на действия пользователя - нажатие кнопок «мыши», ввод данных в экранной форме или перемещение «мыши» по странице. Более того, JavaScript-программы могут управлять самим браузером и атрибутами документа.
JavaScript позволяет контролировать работу браузера. Например, объект Window поддерживает методы, позволяющие выводить на экран всплывающие диалоговые окна, создавать, открывать и закрывать новые окна браузера, задавать режимы прокрутки и размеры окон и т.д.
JavaScript позволяет взаимодействовать с содержимым документов. Объект Document и содержащиеся в нем объекты позволяют программам читать части HTML-документа и иногда взаимодействовать с ними. Сам текст прочитать невозможно, но можно, например, получить список гипертекстовых ссылок, имеющихся в данном документе. На текущий момент широкие возможности взаимодействия с содержимым документов обеспечивает объект Form и объекты, которые он может содержать: Button, Checkbox, Hidden, Password, Radio, Reset, Select, Submit, Text и Textarea.
JavaScript обеспечивает взаимодействие с пользователем. Важной особенностью этого языка является реализованная в нем возможность определять обработчики событий - произвольные порции кода, которые выполняются при наступлении конкретных событий (обычно действий пользователя). JavaScript позволяет использовать в качестве обработчиков событий любые новые предварительно заданные функции.
Кроме основных средств - HTML, CSS, JavaScript - использовались дополнительные средства, программы для создания сайта, в частности для создания графической и текстовой части.
Графическая часть сайта создавалась с использованием самого известного графического редактора - Adobe Photoshop. Он позволяет редактировать старые изображения и создавать новые.
При создании графики для данного сайта были использованы следующие его возможности:
Редактирование фотографий, так как сайт содержит большое количество фотографий. Под редактированием тут понимается ретуширование, цветокоррекция, трансформация и т.д.
Создание элементов дизайна (рис. 1 «Верхняя шапка web-страницы»).
Рис.1. «Верхняя шапка web-страницы».
2.2. Структура системы
Структура сайта представляет собой определённое расположение разделов, позволяющее посетителям быстро переходить от одной страницы к другой, не делая более 3-4 кликов. Грамотно разработанная структура даёт возможность разместить на сайте максимум полезной информации, которая будет легко доступна посетителям и не потребует больших временных затрат для её нахождения и усвоения.
Меню сайта состоит из следующих пунктов:
- О программе;
- Новости;
- Галерея;
- Участники;
- Курсы;
- Полезные ссылки.
Данное меню имеется в начале страницы. И в самом тексте страницы разделы каждого пункта меню расписаны подробнее. Такая структура позволяет без проблем находить нужную информацию и вернуться обратно на главную страницу.
Архитектура сайта - структура страниц и программной части сайта. Архитектура помогает визуально представить все разделы сайта, что очень важно в процессе разработки. Владельцу сайта сразу видно, какие именно разделы включены в web-сайт, дизайнеру видно, какие страницы надо разработать и сверстать, райтер знает, каким контентом наполнять конкретные разделы.
Сайт информационного портала hp имеет следующую архитектуру (см. рис.2. «Архитектура сайта»).
Рис.2. «Архитектура сайта»
Из каждой страницы сайта можно попасть в другую посредством верхнего меню. Исключением являются сторонние сайты, например, сайты учебных заведений (см. рис.3. «Страница «Участники проекта»»), являющихся участниками данного проекта. Если зайти на сайт любого из этих учебных заведений, обратно можно вернуться лишь кнопкой «назад» в браузере.
Рис.3. Страница «Участники проекта»
В данном разделе были рассмотрены основные средства и инструменты, с помощью которых создавался сайт. Это HTML, CSS, JavaScript, Photoshop. По данным средствам были получены теоретические сведения, на основе которых можно приступить к практической части, в частности, разработке стилей.
3. Разработка стилей сайта
3.1. Концепция внешнего вида и ее изменения
Концепция внешнего вида сайта – специально разрабатываемое, комплексное представление будущего внешнего вида сайта. Концепция очерчивает основные характеристики дизайна, которые определяют вид графики, цветовое содержание, размещение отдельных художественных элементов и т.д. (см. Рис.4. «Оформление сайта стилем «классический»).
Рис.4. «Оформление сайта стилем «классический».
Основные структурные элементы на главной страницы сайта расположены в две колонки.
Для оформления web-сайта применяется основной стиль под названием «классический», приведем ниже его CSS-код:
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
background: #FFFFFF url('bg-KLASS.gif') left top repeat-x;
margin: 0 auto;
font-size: 12px;
text-align: left;
}
.contentcontainer #container {
width: 860px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
height: auto;
padding: 0px 5px 10px;
}
.contentcontainer #header {
padding: 3px 0px 0px 0px;
position: inherit;
}
.contentcontainer #header h1 {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 52px;
font-weight: bold;
letter-spacing: -2px;
color: #BBDDEE;
line-height: 100%;
margin: 25px 0px 0px 0px;
padding: 0px;
}
#header a {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-size: 13px;
}
#header a:hover {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #F00;
font-size: 13px;
text-decoration: none;
}
.contentcontainer #mainContent {
padding: 0px 0px 0px 0px;
margin: 65px 0px 15px 0px;
}
.contentcontainer #footer {
background: #FFFFFF url('bg01-KLASS.gif') left top repeat-x;
clear: both;
}
.contentcontainer #footer p {
padding: 15px 0;
color: #FFF;
text-align: right;
width: 860px;
margin: 0 auto;
}
.contentcontainer #logo {
margin: 0px 0px 0px 0px;
}
a {
color: #27048B;
text-decoration: none;
}
a:hover {
color: purple;
text-decoration: none;
}
#topmenu {
width: 860px;
float: left;
padding: 15px 0px 0px 5px;
margin: 0px 0px 0px 0px;
padding: 0px;
font-size: 12px;
}
#topmenu ul {
display: inline;
margin: 0px;
padding: 0px;
}
#topmenu li {
display: inline;
list-style: none;
margin: 0px;
padding: 0px;
}
#topmenu li a {
display: block;
color: #000099;
font-weight: bold;
text-decoration: none;
float: left;
padding: 16px 13px 13px 5px;
}
#topmenu li a:hover {
padding: 16px 13px 6px 5px;
border-bottom: 3px solid #CCFFFF;
color: #CCFFFF;
}
#leftContent {
width: 300px;
padding: 0px 0px;
float: left;
}
.posted {
background: url('dotted1.gif') left bottom repeat-x;
padding-bottom: 10px;
}
.small {
font-family: Arial;
font-size: 11px;
}
#PChanger {
display: block;
border: 0px;
text-align: center;
vertical-align: middle;
padding: 3px;
}
#mainContent h2, #rightContent h2 {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 22px;
text-decoration: none;
font-weight: bold;
color: #660066;
margin: 0px;
}
#rightContent {
margin: 0px 0px 0px 335px;
}
.first {
text-indent: 0;
}
h3{
color: #27048B;
text-decoration: none;
text-indent: 20px;
}
a.large{
font-family: Verdana,Helvetica,sans-serif;
font-size: 12px;
font-weight: bold;
}
По заданию на проект мы разработали три вида стиля, каждый из которых имеет уникальное название, это «классический», «академический» и «современный». На основе построенного CSS-файла классического стиля мы меняем некоторые значения в двух остальных CSS-файлах. Изменения произошли в цветовом оформлении, тексте, позиционировании элементов стиля, отступы от краёв элементов и блоков и т.д.
В итоге мы создали три вида стилей, которые необходимо подключить к HTML-документу для дальнейшей работы со стилями.
Подключение стилей к HTML-документу
Каскадные таблицы стилей подключаются к HTML-документу с помощью тега <link>, который имеет параметры:
REL - определяет отношения между текущим документом и файлом, на который делается ссылка;