§20. Шрифтовое оформление

Кегльшрифта на странице зависит от двух факторов:

1. базовый кегль, устанавливаемый в настройках броузера, который может быть практически любым;

2. относительный размер, устанавливаемый в HTM тегами SMALL, BIG, FONT с атрибутом size от 1 до 7.

При отсутствии этих тегов текст набирается базовым кеглем. Теги фактически определяют степень отклонения от базового кегля.

При нерасчетном базовом кегле «распухание» текста может существенно нарушить пропорции страницы, привести к нестыковке фона, элементов переднего плана и вообще всей графики. Желательно провести проверку компоновки при разных размерах базового кегля и в разных версиях броузеров. Страница должна выдерживать без существенных потерь увеличение базового кегля минимум в два раза [7, с.217].

Шрифт. Если невозможно переслать выбранный шрифт на компьютер пользователя, то желательно перечислить в теге FONT (атрибут FACE) возможные гарнитуры в порядке предпочтения.

Необходимо знать, какие шрифты (вернее обобщенные шрифтовые типы) можно с наибольшей вероятностью встретить в броузере пользователя.

Кроме используемого по умолчанию шрифта с засечками (обычно Times Roman), любая графическая операционная система поддерживает рубленый (Arial для Windows) и моношириный ( Gourier для Windows), причем, в Web-дизайне рубленый шрифт используется наиболее часто.

С учетом названий рубленых шрифтов в разных операционных системах можно привести такой пример записи в HTML: <FONT face = "Arial, Geneva, Helvetica">.

Цветатекста, фона и ссылок устанавливается тегом BODY, они могут быть в принудительном порядке проигнорированы пользователем, установившим свои параметры цвета в броузере. Поэтому желательно либо не указывать эти три параметра вообще, либо указывать все три во избежание конфликта с установленными в броузере по умолчанию.

При применении фонового изображения (атрибут BACKGROUND тега BODY) цвет фона должен быть приблизительно равен цвету среднестатистического пиксела фонового изображения по двум причинам: 1) пользователи, отключившие графику, сохраняют приемлемый контраст текста и фона; 2) не будет цветового скачка в момент загрузки фона на страницу.

Цвета, устанавливаемые тегом FONT (атрибут color), имеют приоритет по отношению к цветам тега BODY и установкам броузера. Этим тегом можно изменить цвет ссылок, употребив его с атрибутом color внутри тега А.

Ссылки. Поскольку наличие ссылок может заметно влиять на дизайн сайта, желательно следовать некоторым правилам их оформления (как разновидностей текстового выделения):

1. длину ссылки следует ограничить совершенно необходимым минимумом (слово или словосочетание, а не вся фраза);

2. ссылочным лучше делать слово (словосочетание), допускающее произнесение с логическим ударением;

3. не допускается разметка ссылок поверх стандартных средств текстовых выделений (см. гл. 1, § 4).

§21. Нешрифтовое оформление

Абзацы. Броузеры традиционно не делают красной строки, отделяя абзацы пустой строкой. Однако ее можно имитировать, заменив тег Р тегом BR со следующей за ним горизонтальной распоркой – невидимой графической вставкой или несколькими незарываемыми пробелами &nbsp . Хотя лучше не жертвовать членением на абзацы в угоду традиционному полиграфическому начертанию.

Таблицыэто основной инструмент размещения материала в плоскости средствами HTML.

Если речь не идет о чисто визуальном эффекте позиционирования, таблица может нести и информационную (чисто табличную) функцию. В этом случае нужны визуальные средства, выделяющие столбцы и ячейки. В стандарте HTML это атрибут border.

Его недостатки: 1) линейки нельзя провести выборочно (либо нет, либо все); 2) линейки псевдотрехмерны, т. е. непригодны для серьезного дизайна.

Для решения проблемы можно воспользоваться следующими эффектами: 1) ячейки можно залить собственным фоновым цветом; 2) можно применить «подсветку строк» через одну (слегка полосатая таблица books.ru); 3) можно «обмануть» HTML, вставляя узкие (1 2 пиксела) столбцы (строки), залитые нужным цветом – фактически, плоские линейки.

Использование таблиц «не по назначению». Для текста использование таблицы – инструмент, позволяющий устанавливать поля, ширину колонки и применять многоколонную верстку.

Часто таблицы используются для позиционирования графики.

С помощью таблиц осуществляют позиционирование относительно границ окна броузера: вся страница заключается в таблицу, чтобы исключить влияние нетабличного материала.

Недостатки:

1. невозможность точного контроля внешних полей;

2. длительность загрузки, т.к. страница не выведется на экран, пока не загрузятся все ячейки таблицы; эта задержка может быть уменьшена, если заранее сообщить броузеру размеры всех без исключения изображений в теге IMG; это обязательное требование жесткого табличного дизайна;

3. невозможность наложения элементов друг на друга (отрицательное расстояние между абзацами).

Для выхода из положения иногда используют неповторяющееся фоновое изображение (весь экран). Это чисто художественный прием. Адресация фону значимой информации со ссылками совершенно недопустимо. У фона нет ALT-текста, и пользователи неграфических броузеров его не увидят.

Распорки. Интервал вокруг всех ячеек одновременно можно менять атрибутами тега TABLE. Но для того, чтобы раздвинуть не заданное расстояние лишь пару объектов, нужны распорки.

Распорка из однопиксельного CIF изобретена Дэвидом Сигелем (www.dsigel.com). При масштабировании его до размеров, указанных в HTML-коде, получается распорка требуемых размеров. HTML-файлы могут содержать сколь угодно ссылок на этот единственный CIF. Следует не забывать указывать ALT-текст для всех распорок, уважая пользователя неграфического броузера.

Как любая графическая вставка, распорка подобна буквам текста. Она может раздвигать материал, отодвигать строки. Вставленная в отдельную ячейку таблицы, она передает свою ширину или высоту соответствующим строке или столбцу.

Однако для горизонтальных раздвижек лучше пользоваться неразрываемым пробелом; его ширина пропорциональна текущему кеглю шрифта.

Общие рекомендации по использованию таблиц

1. Если нужны строго определенные ширина и высота, лучше использовать распорки, не полагаясь на надежность воспроизведения точных размеров ячеек.

2. Лучше указать общую ширину таблицы (100% для «резинового» дизайна и 580 пикс. для жесткого табличного). Без пиксельного задания таблица может необъяснимо «распухнуть» при объединении ячеек [7].

3. При объединении ячеек по горизонтали ширины соответствующих столбцов должны быть жестко заданы распорками в других ячейках.

4. Не стоит объединять ячейки по вертикали: использование встроенных таблиц дает более качественный результат.

5. Для отладки таблицы можно

• ввести «ненулевой» border;

• сделать распорки видимыми.

«Отливка в GIF». Используется для жесткого задания нужного шрифта, точной подгонки интерлиньяжа, наложения текста на графику и т.д. ради независимости дизайна от капризов броузера.

Чаще всего такие графические файлы используются для заголовков, панелей навигации, выделенных фрагментов текста. Такой аккуратный текст часто вступает в конфликт с ближайшим обычным текстом, искаженным броузером пользователя.

При «отливке текста в GIF» его необходимо полностью воспроизвести его в ALT-тексте.