Похожие статьи

Создание сайта с помощью фреймов (60,32%)
Из огромного количества сайтов сети многие используют фреймы для тех или иных целей. Да фреймы можно использовать и с толком для сайта. С другой стороны неправильная реализация фреймов — огромная ошибка…

Введение в оформление текстов для веб (50%)
Эта статья — попытка разрешить проблемы и рассказать о подводных камнях, связанных с публикацией текстов в сети, а также сформулировать несколько принципов создания удобных и простых для чтения веб-страниц…

Имитация гиперссылок с помощью JavaScript (44,44%)
С помощью JavaScript и CSS мы будем делать ссылки, невидимые для поисковых систем, но вполне видимые для пользователей. Код может пригодиться для тех разделов сайта, где нельзя быть уверенным в «объективности» ссылки от посетителя, и для самостоятельной расстановки ссылок веб-мастером, если он не хочет поднимать популярность других сайтов…

Автор: Земсков Юрий
www.ComputerLibrary.info

Написано для «CHIP Special»

Дата публикации 18-08-2005 19:10
Статья просмотрена 11281 раз

Оформление текста — задача на первый взгляд простая, но только на первый взгляд. На деле необходимо учесть множество параметров: гарнитура, размер, цвет шрифта, длина строки, высота строки (интерлиньяж), выравнивание, отступы и поля (свободное пространство). Все эти параметры свойственны и верстке бумажных изданий, однако в Сети есть своя специфика — вы не можете ни в чем быть уверены, необходимо гибко подбирать параметры для максимального количества посетителей.

Итак, сверстаем текст, который удобно читать.

Оформление текста с помощью CSS - пример

Текст оформлен средствами каскадных таблиц стилей (CSS). В раздел <head> XHTML-документа помещен следующий код:

<style type="text/css">
p {
font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
font-size: 0.8em;
line-height: 150%;
color: #000;
}

p.serif {
font-family: Georgia, "Times New Roman", Times, serif;
}

h1 {
font: bold 1.2em Verdana, Tahoma, Arial, Helvetica, sans-serif;
letter-spacing: 0.2em;
text-transform: uppercase;
}
</style>

Определимся с основным текстом, каждый абзац которого определяется в XHTML тегами <p></p>. Выбрана следующая последовательность шрифтов: Verdana, если этот шрифт отсутствует у посетителя, тогда Tahoma, далее Arial, Helvetica и, в крайнем случае, любой рубленый шрифт. Размер шрифта задан в относительных единицах (em) и составляет 80% от настроек браузера по умолчанию.

Межстрочный интервал — 150%. По умолчанию в браузерах используется высота строки 120%, однако, это не оптимальное для удобочитаемости значение. В конце концов, экономить бумагу нет необходимости, а размер экрана по вертикали ничем не ограничен и стоит задать больший интерлиньяж — 150% в самый раз.

Последним для тега <p> в нашем CSS-коде определен цвет шрифта — шрифт основного текста должен быть черным. Красный шрифт оставим для идеологических и дизайнерских изысков. Удобочитаемый текст должен быть черного цвета на белом или светлом фоне. Мы используем рубленые шрифты, т. к. они лучше смотрятся на мониторе. Однако для приверженцев шрифтов с засечками создан класс "serif". На картинке он снизу (<p class="serif">).

Первыми указаны рубленный Verdana и шрифт с засечками Georgia, т. к. эти шрифты специально оптимизированы для вывода на экран, а не для печати, как многие другие.

Заголовок верстаем жирным рубленым шрифтом размером 120% от заданного по умолчанию. Расстояние между буквами (разрядка) заголовка — 20% от размера шрифта. Все буквы заглавные. Это должно положительно сказаться на заметности заголовка, который — в силу своих обязанностей — должен привлекать внимание.

Подробнее теория оформления текстов для веб-сайтов изложена в следующих материалах:

  1. Введение в оформление текстов для веб.
  2. Доступность текста в сети — определяем размер шрифта для верстки.
  3. Оформление текстов для веб — вопросы юзабилити.
Похожие статьи

Проверка полей формы с помощью JavaScript (44,44%)
В целях безопасности всегда необходимо проверять введенные пользователем данные. Проверка клиентским JavaScript легко обходится отключением js в браузере и предназначена она не для борьбы со злоумышленниками, а для помощи тем, кто случайно допустил ошибку. Тоже очень благородное занятие :) Согласитесь?…

Создание всплеска посещаемости сайта с помощью программы Add2Board (41,24%)
Часто встает задача создать кратковременный всплеск посещаемости сайта для привлечения внимания целевой аудитории к новинкам, новостям сайта. Такие события, как поступление новых позиций товаров, сезонные скидки и т.п. имеют короткий период актуальности. Поэтому, освещение событий и рекламные кампании должны носить кратковременный, но массовый характер…

Психологические тесты в сети (40,68%)
Разобраться в компьютере могут многие, разобраться в самом себе уже значительно сложнее. Сегодняшний выпуск обзоров посвящен психологическим тестам в сети. Возможно, эти тесты помогут нам разобраться в себе, нажать свой собственный ctrl + alt + delete и краем глаза посмотреть, что же там такое творится…

Версия сайта для печати средствами CSS (40,58%)
Допустим, у нас есть серьезный бизнес-сайт, с серьезными клиентами. А серьезные люди, как правило, консервативны; они больше доверяют бумаге — там и подпись поставить можно и у нотариуса заверить… В общем, непременно нужна качественная версия сайта для печати. Благодаря CSS решение этой задачи не составит большого труда…

Использование интернет-форумов (39,34%)
В последнее время практически на любом сайте присутствует форум, где можно просто поговорить «за жисть», попросить помощи в решении какой-либо проблемы или самому помочь с решением. Одним словом, кладезь человеческих знаний, необходимо только подобрать ключик… Эта статья подскажет, как освоиться на интернет-форуме…

← Раздел «Вебмастеру: Дизайн и верстка» | Комментарии (2) →

Ваше имя: 

Цифры с картинки:
Включите графику в браузере

Ваши комментарии:

Все поля формы обязательны для заполнения.
Комментарий: Любые HTML-теги в сообщениях запрещены.
Гиперссылки в комментариях не работают — добавлять спам бесполезно!
Максимальная длина комментария — 5000 символов.
Комментарии, не имеющие отношения к статье, будут удалены.

 

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

КРОМЕ юзабилити и дизайна: содержательный сайт Любой веб-ресурс сегодня раздираем двумя мощными силами - на первый взгляд, непреодолимыми и несовместимыми одновременно. С одной стороны, юзабилити и интерфейс требуют простоты, логичности и доступности – в общем, голого функционального минимализма. С другой стороны, развивающиеся веб-стандарты и технологии способствуют расцвету новых подходов к…

Сквозная навигация Сквозная навигация — это система связей (гиперссылок), облегчающих движение пользователя по сайту. Речь идёт о максимально возможном переплетении данных. Кроме того, наличие такой связи характеризует сайт как информативный. Считаю, будет правильным выделить несколько типов связи: связь между сервисами; вокруг события;…

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

Цветной scrollbar — да или нет… В последнее время, в связи с приходом CSS в массы, особую популярность среди начинающих webmaster'ов получила возможность изменять цвет scrollbar'а окна браузера. Эта функция привлекла людей своей простотой, и нетребовательностью в знании языка. Все что остается сделать, это заменить цвета частей scrollbar'а по своему вкусу…

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