|
Я искал курс по компьютерной химии. Но в этом курсе "Гипермедиа..." ни слова по химии! |
Опубликован: 09.07.2009 | Доступ: свободный | Студентов: 704 / 228 | Оценка: 4.56 / 4.42 | Длительность: 03:00:00
ISBN: 978-5-9963-0040-2
Специальности: Преподаватель
Теги:
Лекция 4:
Создание стилей для Web-проекта
Создание стилей body, p, a
Итак, создадим css -файл для нашего проекта. В Macromedia Dreamweaver воспользуемся меню File > New, в появившемся окне выберем пункт CSS ( рис. 3.2), затем сразу сохраним файл в корневой каталог под именем oil.css.
Вернемся к html -файлу главной страницы и поставим ему в соответствие только что созданный css -файл. Для этого перед закрывающим тегом </head> добавим следующий тег:
<link rel="stylesheet" type="text/css" href="oil.css">
Теперь все созданные в файле oil.css стили можно применять к любым фрагментам главной страницы.
В css-файлах часто используют комментарии: /* Комментарий */. С их помощью удобно отделять друг от друга стили, описывающие разные фрагменты Web-страницы. Для начала опишем три базовых элемента Web-страницы — теги <body>, <p> и <a>. Стиль body будет отвечать за оформление страницы в целом; в него мы включим установку нулевых отступов, белый цвет фона, гарнитуру "Georgia" для основного текста, как того требует эскиз, черный цвет текста, его размер и междустрочный интервал. В комментариях напишем слово Basic (базовые параметры), затем введем название стиля — body, далее откроем фигурную скобку и перечислим через точку с запятой все необходимые характеристики стиля; по окончании закроем фигурную скобку:
/* Basic */
body {
padding: 0;
margin: 0;
background-color: #ffffff;
font-family: Georgia, Times New Roman, Times, serif;
color: #000000;
font-size: 0.95em;
line-height: 140%;
}Сохраним файл oil.css и просмотрим главную страницу в браузере ( рис. 3.3). Изменения налицо: в предыдущем варианте ( рис. 2.20) не было ни нулевых отступов, ни нужных гарнитуры и междустрочного интервала.
Создадим стиль для тега абзацев <p>, указав в нем внешние отступы сверху и снизу:
p {
margin-bottom: 1em;
margin-top: 0;
}Можно заметить, что Macromedia Dreamweaver несколько упрощает создание стилей, предлагая выбрать необходимую характеристику из выпадающего списка при очередном нажатии клавиши Enter после точки с запятой, а также ее значение после ввода двоеточия ( рис. 3.4).
Теперь настала очередь стиля, описывающего ссылки, т. е. тег <a>. Этот стиль состоит из трех частей: в первой рассматривается ссылка, которую еще не посещали (link), во второй — уже посещенная (visited), в третьей — ссылка в тот момент, когда посетитель навел на нее указатель мыши (hover). Посещенной и непосещенной ссылкам рекомендуется присваивать разные цвета, чтобы пользователю было понятно, на каких страницах он уже побывал; чаще всего непосещенная ссылка имеет синий цвет, а посещенная — фиолетовый. Кроме того, все ссылки стоит подчеркивать — это лучший способ показать, что слово является ссылкой, а не просто частью текста.
Вернемся к эскизу страницы, открытому в редакторе Adobe Photoshop, зайдем в меню выбора основного цвета и возьмем пробу цвета на одной из ссылок, например на словосочетании "нефтеперерабатывающих заводов"; скопируем появившийся шестнадцатеричный код ( Ctrl +C) и вставим его в соответствующий фрагмент стиля:
a:link {
color: #147fdb;
text-decoration: underline;
}Цвета посещенной ссылки и ссылки, на которую наведен указатель мыши, подберем в Adobe Photoshop на наше усмотрение, например:
a:visited {
color: #147fdb;
text-decoration: underline;
}
a:hover {
color: #ff0000;
text-decoration: underline;
}Теперь перейдем к созданию стилей для каждого из фрагментов Web-страницы по отдельности.
Тохир Рахимов