Я искал курс по компьютерной химии. Но в этом курсе "Гипермедиа..." ни слова по химии! |
Создание стилей для 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-страницы по отдельности.