Опубликован: 09.07.2009 | Доступ: свободный | Студентов: 707 / 230 | Оценка: 4.56 / 4.42 | Длительность: 03:00:00
ISBN: 978-5-9963-0040-2
Специальности: Преподаватель
Лекция 4:

Создание стилей для Web-проекта

< Лекция 3 || Лекция 4: 1234 || Лекция 5 >

Создание стилей body, p, a

Итак, создадим css -файл для нашего проекта. В Macromedia Dreamweaver воспользуемся меню File > New, в появившемся окне выберем пункт CSS ( рис. 3.2), затем сразу сохраним файл в корневой каталог под именем oil.css.

Создание нового css-файла

Рис. 3.2. Создание нового 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) не было ни нулевых отступов, ни нужных гарнитуры и междустрочного интервала.

Главная страница после создания стиля body

увеличить изображение
Рис. 3.3. Главная страница после создания стиля body

Создадим стиль для тега абзацев <p>, указав в нем внешние отступы сверху и снизу:

p {
margin-bottom: 1em;
margin-top: 0;
}

Можно заметить, что Macromedia Dreamweaver несколько упрощает создание стилей, предлагая выбрать необходимую характеристику из выпадающего списка при очередном нажатии клавиши Enter после точки с запятой, а также ее значение после ввода двоеточия ( рис. 3.4).

Выпадающий список с css-характеристиками

увеличить изображение
Рис. 3.4. Выпадающий список с css-характеристиками

Теперь настала очередь стиля, описывающего ссылки, т. е. тег <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-страницы по отдельности.

< Лекция 3 || Лекция 4: 1234 || Лекция 5 >
Тохир Рахимов
Тохир Рахимов

Я искал курс по компьютерной химии. Но в этом курсе "Гипермедиа..." ни слова по химии!