Перед тем как заняться управлением шрифтом познакомимся с самим понятием "шрифт" и его атрибутами. Если эта теоретическая часть вам неинтересна - переходите сразу к управлению.
Текст - это основной элемент в любом дизайне, и выбор неподходящих шрифтов или их неумное использование ясно демонстрируют, что дизайнер пока еще не достиг высот мастерства. Текст существует в самых разнообразных формах и размерах. Шрифт может быть тонким или толстым, вертикальным или наклонным. Шрифты объединяются в семейства со специфическими характеристиками.Разберемся в основных понятиях.
Слово шрифт (font) сохранилось со времен типографской печати. Сейчас оно часто не очень правильно используется как синоним слова гарнитура (typeface). Для Web-дизайна шрифты группируются по семействам и гарнитурам. Семейство гарнитур (type family) означает специфический набор шрифтов. Как и в других семействах, у каждой группы есть свои отличительные признаки. Семейства гарнитур объединяют гарнитуры со специфическими свойствами. Наиболее распространены следующие семейства гарнитур:
Гарнитура (typeface) указывает на шрифт внутри семейства. Для указанных ранее семейств можно назвать такие гарнитуры:
Не надоело заниматься
теорией? Можно сразу перейти к практике.
Посмотрите, как выглядит текст в HTML-документе, созданный при помощи этих гарнитур
SerifУвы! Фокус не удался! В качестве рукописного шрифта не подошел ни один из имеющихся в моем распоряжении. Та же неудача при попытке использовать декоративные шрифты. Надо разбираться!
Шрифты могут иметь разные начертания (forms). Начертание
определяет насыщенность, ширину и наклон шрифта.
Например:
Times New Roman
Helvetica is a Sans-Serif Font
Courier is a Monospaced Font
Westminster is a
decorative font
Впрочем, я не уверена,
что Westminster относится к семейству декоративных гарнитур. А шрифтов,
относящихся к рукописным, и являющих себя таковыми в тексте HTML-документе,
я пока не нашла.
Надо разбираться!
Некоторые шрифты выглядят темными и толстыми, а другие - легкими и тонкими. Кроме того, есть некое "среднее" сложение, соответствующее средней насыщенности (weight) и виду шрифта. Насыщенность указывается в названии шрифта, а именно:
А вот как выглядят шрифты разной насыщенности в HTML-документе:
Times Roman: Simplistic & Unadorned.Для сравнения:
Увы! Почуствовать разницу
в изображениях, созданных с помощью шрифтов BauhausLightCTT и
BauhausCTT Bold, я сама смогла при помощи броузера MS Internet
Explorer 5.0 (Windows 98).
Использование броузера MS Internet Explorer 3.0 (Windows NT 4.0) привело
к изображению всех примеров шрифтов одним и тем же шрифтом.
Pragmatica
PragmaticaCondC
Наклоны шрифта бывают следующие:
Arial Italic
Увы! Опять неудача с примерами!
Надо разбираться!
Следует помнить, что в подавляющем большинстве случаев, независимо от компьютерной платформы в Web-броузерах по умолчанию установлен шрифт Times New Roman размером 12 пунктов.
Cовет
Очень важно использовать шрифт разных размеров, но не менее важно сохранять единство оформления. Если один заголовок набран шрифтом Arial, 24 пункта, то так же должны быть оформлены и остальные заголовки.
Не надоело заниматься теорией? Можно сразу перейти к практике.
Интерлиньяжем (leading) называется расстоянии между строками. Интерлиньяж влияет на удобочитаемость текста. Для каждой гарнитуры существует свое оптимальное соотношение между размером интерлиньяжа и размером шрифта.
Cовет
По соображениям удобочитаемости в строке текста должно располагаться не более 8-12 слов.
Кернинг (kerning) - это расстояние между отдельными символами.
В отличие от моноширинных шрифтов, где все символы занимают одинаковое
место, шрифты с пропорциональной шириной литер требуют подбора
оптимального интервала между определенными парами символов.
Символы, из которых состоят слова этого предложения, были тщательно
разработаны так, чтобы все они хорошо подходили друг к другу.
В хорошем шрифте будет задано точное расстояние для как можно большего
количества пар символов. Вся эта информация содержится в так называемой
таблице кернинга (kerning table). О качестве шрифта часто судят по числу
пар, содержащихся в таблице кернинга.
Трекинг (tracking) позволяет изменять межсимвольные и
межсловные интервалы. Как и кернинг, трекинг влияет на удобочитаемость
текстового фрагмента.
Cовет
Нестандартные значения трекинга следует использовать только для декоративного текста или для небольших фрагментов. Основной текст требует нормального трекинга, чтобы оставаться привлекательным и удобным для читателя.
Cовет
Как и при выборе размера и гарнитур, при работе с цветом следует проявлять чувство меры - не стоит подавлять посетителей вашего Web-узла страницами с 10 различными цветами. На практике достаточно всего двух цветов - одного для заголовков и примечаний и еще одного для основного текста, - чтобы ненавязчиво раскрасить ваш дизайн.
Светлый шрифт более мягок, чем полужирный, который буквально
выпирает из страницы.
При создании текста для Web-страниц многие дизайнеры используют более
темный цвет для заголовков первого уровня и затем более светлый оттенок
(или другой цвет) для заголовков последующих уровней. Этот прием
создает визуальную структуру: чем более жирным шрифтом оформлен
заголовок, тем больше веса придается информации, которая в нем
содержится.
Технология Web постоянно развивается, предоставляя все большие возможности Web-дизайнеру управления такими элементами дизайна , как начертание, цвет, размер шрифтов, контекст гиперссылок. Одна из новых технологий, обогащающих средства создания Web-сайтов - Каскадные (многоуровневые) таблицы стилей.
По умолчанию броузеры заполняют фон сплошным цветом, определеннным
настройкой броузера: серым, белым или черным. Имеет смысл принудительно
зафиксировать цвет фона или создать фоновое изображение. В противном
случае возможен вариант, когда пользователю придется разбирать темно-
синий текст на черном фоне.
Фоновый цвет задается в теге <body>.
Цвет фона определяется атрибутом bgcolor тега
<body>. Например, тег задающий светло желтый цвет фона,
имеет вид:
<body bgcolor="#ffffcc">
Иначе желтый цвет фона можно задать так:
<body bgcolor="yellow">
Можно задать и цвет текста. Для этого используется атрибут тега <body>. Например, зададим желтый цвет фона и синий цвет для текста.
<body bgcolor="yellow" text="blue">
Посмотрим, что получится!
Для установления цвета фона и цвета текста рациональнее воспользоваться таким средством, как каскадные таблицы стилей.
Для указания цвета можно использовать его наименование (разумеется "in a good english way", неважно прописными или строчными буквами), либо его шестнадцатиричный код. В вышеприведенных примерах использовались оба варианта.
Цвет | Имя цвета | Шестнадцатиричное представление | |
---|---|---|---|
Черный | BLACK | #000000 | |
NAVY | #000089 | ||
SILVER | #C0C0C0 | ||
Синий | BLUE | #0000FF | |
MAROON | #800000 | ||
Пурпурный | PURPLE | #800080 | |
Красный | RED | #FF0000 | |
FUCHSIA | #FF00FF | ||
Зеленый | GREEN | #008000 | |
TEAL | #008080 | ||
LIME | #00FF00 | ||
AQUA | #00FFFF | ||
OLIVE | #808000 | ||
Серый | GRAY | #808080 | |
Желтый | YELLOW | #FFFF00 | |
Белый | WHITE | #FFFFFF |
Формат шестнадцатиричного кода цвета прост.
Как известно, любой цвет состоит из трех основных составляющих - красной,
зеленой и синей (R - red, G - green, B - blue). Каждая составляющая
цвета характеризуется яркостью - целым числом (от 0 до 255) в
шестнадцатиричной системе счисления.
Самая низкая яркость - 0, а самая высокая - 255.
В шестнадцатиричной системе счисления самой низкой яркости
соответствует 00, а самой высокой - FF.
Поэтому, для того, чтобы задать "чистый" красный цвет наивысшей яркости,
следует записать код цвета #FF0000.
Черный цвет в шестнадцатиричном коде следует записать как #000000 (все
составляющие минимальной яркости.
Светло-серый код можно задать, определив все составляющие одинаковой
яркости - #e0e0e0. Если нужен оттенок потемнее, то можно задать код
#808080
Совет
Не следует использовать одинаковый или близкий цвет для фона и
текста.
Не забывайте, что цвет, задаваемый в тегах <body> и
<font>, а также в атрибуте background табличных
тегов выглядит по разному на различных платформах и в различных броузерах.
Поэтому, вам не стоит полагаться на то, что любой пользователь увидет ваш
сайт в той же цветовой гамме, каким видете его вы на экране своего компьютера.
При оформлении текста, чтобы отделить один раздел от другого,
нередко используются разделительные полосы. Можно задать ширину,
толщину и способ выравнивания разделительной полосы.
Разделительная полоса задается тегом <HR>. Этот тег имеет
следующие атрибуты:
Рассмотрим пример!
Это обычная полоса, заданная без указания атрибутов.
Это полоса толщиной 5 пиксель зеленого цвета. Способ выравнивания - по умолчанию CENTER.
Это полоса толщиной 1 пиксель темно-синего цвета. Способ выравнивания - LEFT.
Это полоса толщиной 10 пиксель красного цвета. Способ выравнивания - RIGHT.
Вам не кажется, что с выравниванием разделительной полосы пока не получается? Она упорно располагается посередине страницы, игнорируя значения атрибутов выравнивания LEFT и RIGHT.
Это - полоса толщиной 10 и шириной 200 пиксель.
А это - полоса толщиной 5 пиксель, заданная с атрибутом NOSHADE
В HTML-коде вышеприведнный пример записан так:
<p>Это обычная полоса, заданная без указания атрибутов.</p> <hr> <p>Это полоса толщиной 5 пиксель зеленого цвета. Способ выравнивания - по умолчанию CENTER.</p> <hr size=5 color="Green"> <p>Это полоса толщиной 1 пиксель темно-синего цвета. Способ выравнивания - LEFT. </p> <hr color="Navy" size=1 align="left"> <p>Это полоса толщиной 10 пиксель красного цвета. Способ выравнивания - RIGHT. </p> <hr color="Red" size=10 align="right"> <p>Это - полоса толщиной 10 и шириной 200 пиксель.</p> <hr size=10 width=200> <p>А это - полоса толщиной 5 пиксель, заданная с атрибутом NOSHADE</p> <hr size=5 NOSHADE>
Описание вида разделительной полосы можно задать в
таблице стилей , причем какое вашей душе угодно!
Впрочем, использование разделительной полосы вы могли неоднакратно
наблюдать на страницах этого сайта. Например все Советы
отделяются от основного текста разделительной полосой.
Еще один вариант использования разделительной полосы:
Задав равные небольшие значения для высоты и ширины в теге <hr>,
получаем квадратик, который можно использовать для разделения частей
страницы как маркер при создании списков и даже как элемент гипертекста,
по которому надо щелкать мышью. Однако, в этом случае требуются специальные
средства позиционирования элементов. Для этого следует воспользоваться
таблицами стилей .
Эффект прокручивания текста в заданном поле называется
"бегущей" строкой.
Для создания "бегущей" строки используется тег <marquee>.
Характеристики "бегущей" строки задаются следующими атрибутами:
Совет
Соотношение между длиной текста, размером шрифта и скоростью перемещения, при которых "бегущая" строка будет выглядеть хорошо сдедует подбирать опытным путем.
HTML-код этого сообщения, прокручиваемого на экране бесконечно справо налево имеет следующий вид:
<marquee behavior="scroll" align="top" direction="left" bgcolor="Lime" width="100%" height="50" hspace="5" vspace="5" scrollamount="5" scrolldelay="100">Не следует увлекаться использованием "бегущей" строки. Это утомляет!</marquee>
Рекомендуется задавать в "бегущей" строке полезную информацию. Например, напомнить вашему читателю, какое нынче столетье на дворе.
Для того, чтобы определить текущие дату и время пришлось создать скрипт.
HTML поддерживает три вида списков, а именно:
Рассмотрим их подробнее.
Для этого вида списков используются теги <ul> и <li> . Внимание! Тег <ul> обязательно требует применения парного закрывающего тега </ul> , а тег </li> может быть опущен. В литературе указывается, что с помощью атрибута TYPE можно менять вид маркера. Ниже приводятся примеры использования маркированных списков.
<ul> <li>Первый элемент маркированного списка</li> <li>Второй элемент маркированного списка</li> <li>Третий элемент маркированного списка</li> </ul>
Сначала моя попытка изменить форму маркера потерпела неудачу.
В этом случаае я указывала тип маркера прописными буквами.
Когда же я при указании типа маркера применила нижний регистр, то все вышло!
Смотрите сами!
<ul TYPE=""square"> <li>Первый элемент маркированного списка</li> <li>Второй элемент маркированного списка</li> <li>Третий элемент маркированного списка</li> </ul>
Помните! Для указания типа маркера надо использовать нижний регистр.
Для создания нумерованных списков используются теги <ol> и <li>. Как и в случае с маркированными спиисками тег <ol> является обязательным, а тег <li>. часто может быть опущен. Атрибут тега нумерованного списка TYPE позволяет указать вид нумерации, а именно - арабскими цифрами TYPE="1" , римскими цифрами большими TYPE="I" и маленькими TYPE="i" и латинскими прописными TYPE="A" и строчными буквами TYPE="a" .
Нумерация арабским цифрами назначается по умолчанию. TYPE=1Ниже приведены примеры использования нумерованных списков.
<ol> <li>Первый элемент списка</li> <li>Второй элемент списка</li> <li>Третий элемент списка</li> </ol>
<ol TYPE="a"> <li>Первый элемент списка</li> <li>Второй элемент списка</li> <li>Третий элемент списка</li> </ol>
В данном случае начнем нумерацию с третьей буквы латинского алфавита C, для чего используем атрибут START="3"
<ol TYPE="a" START="3"> <li>Первый элемент списка</li> <li>Второй элемент списка</li> <li>Третий элемент списка</li> </ol>
<ol TYPE="i" > <li>Первый элемент списка</li> <li>Второй элемент списка</li> <li>Третий элемент списка</li> </ol>
<dl> <dt>Тег UL</dt> <dd>Создает нумерованный, или маркированный список</dd> <dt>Тег OL</dt> <dd>Создает нумерованный список</dd> <dt>Тег LI</dt> <dd>Используется как в нумерованном, так и в маркированном списке для назначения элементов списка</dd> <dt>Тег DL</dt> <dd>Создает список словарного типа, или список определений</dd> <dt>Тег DT</dt> <dd>Задает термин списка</dd> </dl>
Списки можно вкладывать один в другой. Например,
<ol> <li>Первый элемент списка</li> <li> Второй элемент списка <ul> <li>Первый вложенный элемент списка</li> <li>Второй вложенный элемент списка</li> </ul> </li> <li>Третий элемент списка</li> </ol>
В списках также можно использовать теги заголовков и абзацев.
Возврат в начало страницы&буквенный_эквивалентФормат цифрового эквивалента:
код_ASCIIНапример, символ < можно вставить в документ как символ & и код#60.
Полный список символов, поддержка которых включена в HTML, можно найти на Web-узле Консорциума W3C, обратившись по адресу http://www.w3.org/TR/REC-html40/sgml/entities.html
Cовет
Броузер Netscape Navigator 4.0 "не понимает" формат буквенного эквивалента. Поэтому, рекомендуется использовать формат цифрового эквивалента.