Представление для нашего Web‑сайта, часть 1

Изучив гору теории, приступим к практике. Начнем создавать представление для нашего первого Web‑сайта.

Все стили, которые мы применим к Web‑страницам, поместим во внешнюю таблицу стилей main.css. Создадим ее и поместим в корневой папке Web‑сайта. После чего привяжем ее ко всем Web‑страницам, входящим в него. Как мы помним из главы 7 , это выполняется с помощью тега <LINK>.

Для главной Web‑страницы index.htm этот тег будет выглядеть так:

Для всех Web‑страниц, хранящихся в папке tags, он будет таким:

Внесем в HTML‑код всех Web‑страниц этот тег и сохраним их.

В тегах <LINK>, привязывающих таблицу стилей к Web‑страницам, мы указали относительные интернет‑адреса. Это позволит нам просматривать Web‑страницы, открывая их в Web‑обозревателе без использования Web‑сервера. Так проще.

Теперь наполним нашу первую таблицу стилей нужными стилями. Но сначала определимся, что мы хотим создать. Опишем параметры шрифта и фона наших Web‑ страниц обычным, "человеческим" языком.

Концепция Web 2.0, о которой говорилось в главе 1 , определяет специфические требования к шрифту и фону Web‑страниц. Это тонкие и достаточно крупные шрифты без засечек, приглушенные цвета, обычный (неграфический) или однотонный графический фон. Остальные характеристики, как говорится, по вкусу.

Исходя из этого, для Web‑страницы мы зададим такие параметры.

– Шрифт абзацев – Verdana. Если таковой отсутствует на клиентском компьютере, применим шрифт Arial.

– Шрифт заголовков – Arial. Это позволит нам дополнительно выделить заголовки, сделать их отличными от обычных абзацев.

– Размер шрифта абзацев – 12 пунктов.

– Размер шрифта заголовков первого уровня – 20 пунктов. Размер шрифта заголовков второго уровня – 18 пунктов. Размер шрифта заголовков шестого уровня – 12 пунктов. Шрифт заголовков всех уровней – обычной насыщенности.

– Размер шрифта в таблицах – 10 пунктов. Пусть таблицы также будут отличаться от обычного текста.

– Размер шрифта больших цитат – 10 пунктов. Пусть и цитаты выглядят по‑другому.

– Шрифт больших цитат – курсивный.

– Размер шрифта тега адреса – 10 пунктов. Сведения об авторских правах тоже должны отличаться. К тому же их традиционно пишут мелким шрифтом.

– Шрифт тега адреса – курсивный.

– Цвет текста – #3B4043 (очень‑очень темный, почти черный).

– Цвет фона – #F8F8F8 (очень‑очень светлый, почти белый).

НА ЗАМЕТКУ

Для подбора цветов можно порекомендовать замечательные библиотеки цветовых тем Web‑сайтов, доступных по интернет адресам http://www.tarusa.ru/~golovan и http://avy.ru . Так, автор выбрал тему "Капли дождя" из рубрики "Сине‑голубые"; цвета из этой темы он и будет применять в дальнейшем.

Осталось написать CSS‑код в соответствии с изложенным (листинг 8.2).

<15 16 171819 20 21 >

Дата добавления: 2015-05-19; просмотров: 640;