Представление для нашего 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).

<53 54 555657 58 59 >

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