Материал: Форматирование текста

Вопрос, как построить эту колонку многих ставит в тупик. Однако существуют старинные правила верстки текста. Итак, если отводить малую колонку под текст, то ее размер можно высчитать следующим образом. Выбрать гарнитуру, кегль, начертание и написать следующую фразу:

абвгдежзийклмнопрстабвгдежзийклмнопрст

Именно такая ширина является оптимальной для данного шрифта.

При использовании колонки для размещения ссылок следует держать ее ширину от 130 до 150 пикселей. Немного, но и немало.

2.4 Стилистическое форматирование текста

Элементы контента на странице должны иметь единый стиль оформления, чтобы страница была адекватно воспринимаема и легко читабельна. Это касается в основном шрифта и цветов, но и отступы не исключение. Размер шрифта должен быть достаточно большой, а если требуется использовать маленький шрифт, то обязательно стоит предусмотреть возможность изменения его размера, например, использование em вместо px для указания размера шрифта в вёрстке.

Заголовки.

Существуют 6 уровней заголовков, которыми не стоит пренебрегать, ведь очень часто электронный документ (в данном случае веб-сайт) может быть многоуровневым и все уровни заголовков могут быть востребованы. Хотя использование всего «спектра» заголовков может привести к тому, что пользователь запутается в уровнях. Поэтому трёх уровней заголовков в тексте будет достаточно. Заголовки самых верхних уровней лучше оставить для форматирования заголовочных надписей для различных блоков и заголовка сайта и страницы.

Рекомендуется для заголовков самых верхних уровней использовать большого размера шрифт и достаточно контрастный цвет. Спускаясь по уровню заголовков следует постепенно снижать их яркость, приближаясь к цвету основного текста. Делается это для того, чтобы мелкие заголовки были более читаемы. Например, если зелёный цвет один из основных цветов на сайте, то рекомендуется в графическом редакторе изобразить градиент, где с одной стороны будет располагаться ваш зелёный цвет, а с другой стороны - цвет основного текста (рис. 6).

Рисунок 6 - Цвета заголовков различного уровня

Дело в том, что чем ярче и светлее цвет текста, тем он меньше контрастирует со светлым фоном. Для заголовков верхнего уровня яркость шрифта, а значит его низкая цветовая контрастность, компенсируется их размером и контрастом формы. По мере уменьшения размера, уменьшается контраст формы, а значит уменьшается удобочитаемость, поэтому следует это компенсировать контрастом цвета, т. е. цвет заголовков делать более тёмным (рис. 7).

Рисунок 7 - Пример цветового оформления заголовков

Если стиль сайта подразумевает использование нескольких цветов, то можно их взять, расположить в порядке яркости и применить для заголовков. Разные оттенки одного цвета допустимы. Но если использовать для всех шести заголовков разные по спектру цвета, то содержимое будет слишком пёстро оформлено и это будет мешать. Последний шестой заголовок, является заголовком самого низкого уровня и, в принципе, может даже не отличаться от основного текста ни цветом, ни размером. Можно просто сделать его жирным.

Размеры.

Размеры заголовков и текстовых блоков должны быть рассчитаны так, чтобы, во-первых, заголовки разного уровня были легко отличимы, т. е. различия должны быть настолько контрастны, насколько это возможно в определённом диапазоне. Но слишком большой контраст размера породит разобщённость элементов - этого следует избегать.

Размер самих блоков текста зависит от размера шрифта. Как правило, наиболее удобен для чтения блок текста шириной в 65 символов, поэтому для больших объёмов текста не подходит резиновая вёрстка. Высота абзаца, желательно, не должна превышать 7 строк.

Отступы.

Количество пустого места прямо пропорционально читабельности - это уже достаточно известное правило. Сейчас наиболее актуален дизайн в так называемом стиле «Web 2.0», который, если не брать во внимание закруглённые углы, глянец, отражения, а только форматирование текста, по сути представляет собой наглядный пример того, как должен выглядеть удобный для чтения сайт.

Веб-дизайн унаследовал компактную вёрстку от газет и журналов, где каждая страница имела определённую и весьма немаленькую цену. И сейчас в газетах стараются на одну страницу поместить как можно больше. По началу в веб-дизайне поступали точно так же.

Примеры перегруженных сайтов .

Но постепенно дизайнеры стали понимать, что пространство на веб-сайте не ограничено, а значит можно делать больше отступов. Больше отступов - глазам больше места для отдыха. «Стены текста» и обилие многоколончатых текстовых блоков раздражают глаза.

Стандартная вёрстка 90х - 3-6 колонок с небольшими отступами и чёткими разделительными линиями или фонами.

Современная вёрстка - 1-3 колонки с большими отступами и не всегда с очевидными делениями. Очень часто разделение блоков реализуется за счёт больших отступов и/или слабых границ и фонов.

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

Примеры не перегруженных сайтов

Высота строки должна быть не слишком большой, чтобы не спутать её с разделением абзаца и не слишком маленькой, чтобы текст не перестал быть нечитабельным. Рекомендуются пропорции от 3×2 до 5×3. Например, если размер шрифта равен 12px, то высоту строки можно ставить 18-20 px.

Раньше, в печати, абзацы отделяли красными строками. В печати это допустимо, поскольку с бумаги читать гораздо легче, чем с экрана. В электронных документах для разделения абзацев используют отступы между самими абзацами. Отступы дают возможность легко отличить, где заканчивается абзац, не только в начале строки, но и в её конце.

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

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

Таблицы.

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

Рамку таблицы можно создать двумя способами:

·   использовать свойство border и border-collapse: collapse для таблицы;

·   использовать разный фон для таблицы и ячеек таблицы, при этом border-collapse: separate, а расстояние между ячейками задаётся с помощью border-spacing.

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

В идеале, каждая нечётная строка таблицы должна отличаться фоном от чётной строки.

Не стоит так же забывать и про заголовок самой таблицы.

Цитаты.

Существует три вида элементов, отвечающих за размещение цитат на веб-странице:

<blockquote> - блок цитаты. Блочный элемент, как правило используемый для публикации большого объёма цитируемого текста;

<cite> - источник цитаты;

<q> - короткая цитата.

В основном используют только <blockquote> для вывода целого блока цитируемого текста. Источник этой большой или короткой строчной (<q>) цитаты если и указывают, то только не в элементе <cite>, а зря. Элементы <q> и <cite> не такие сложные в понимании и использовании, чтобы их не любить. Блок цитаты традиционно отображается со втяжкой, источник цитаты - курсивом, а элемент <q> помещает текст в кавычки, которые на самом деле не кавычки а знаки дюйма.

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

Источник цитаты, не обязательно должен отображаться курсивом, чаще всего в качестве указания источника используется ссылка. Следует ссылку помещать в элемент <cite> и соответственно форматировать так, чтобы было понятно, что это ссылка. Можно слегка изменить, чтобы источник цитаты как-то отличался от обычной ссылки.

Если источник цитаты не опубликован в Интернете, его следует выделить особым способом, например, добавить пунктирное подчёркивание, добавить подсказку (tooltip) с разъяснением, где конкретно взят источник, слегка изменить цвет или даже сделать его жирным, но курсив будет неуместен.

Если у блока цитаты есть втяжка, то она должна быть с обоих сторон (слева и справа), причём такая, чтобы не было ощущения отрыва от всего стиля и слишком сильной концентрации текста в центре. В тоже время, втяжка не должна быть слишком маленькой, чтобы не возникало ощущение небрежности. Уместно использование графических кавычек в начала и в конце блока цитаты, а так же изменение цвета фона всего блока и добавления границ.

Списки.

Списки бывают упорядоченные (<ol>) и неупорядоченные (<ul>). Упорядоченные, обычно, отображаются с нумерованным арабскими цифрами маркером. Неупорядоченные могут быть с маркерами вида: закрашенный кружочек, незакрашенный кружочек, закрашенный квадратик (как вижу, так и называю) или любой другой рисунок.

Начнём, с того, что уясним, что же такое список. Проведём аналогию с рукописным текстом. Если в тексте имеется перечисление, то это можно назвать списком. Причём если последовательность перечисленных элементов не зависит от какого-то определённого логического порядка, то этот список является неупорядоченным. Если же от перестановки перечисленных элементов ломается смысл, то такой список называется упорядоченным.

Отображение списка в несколько строк предназначено для более удобного и наглядного восприятия. Для списка слегка меняются правила орфографии и пунктуации, но не настолько кардинально. Знаки препинания должны ставиться так, как будто этот список написан в предложении в одну строчку (рис. 8).

Рисунок 8 - Пример списка

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

Упорядоченный список больше подходит для текста технической направленности. Но можно и художественный текст представить в виде упорядоченного списка, только придётся его привести к более строгому виду.

Заключение

Текст занимает 60-65 % Всемирной паутины. Способ подачи этой информации неоспоримо важен, однако большое значение имеет и заинтересованность посетителя в той информации, которую он ищет.

Человек согласится читать все что угодно, если у него есть к этому стимул. Ресурсов, которые могут не обращать внимания на то, как они ведут себя по отношению к пользователям, весьма немного.

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

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

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

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

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

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

Список литературы

1. HTML. Самоучитель: Н. Комолова, Е. Яковлева - Москва, Питер, 2011 г.- 288 с.

2. Веб-Дизайн: книга Стива Круга или "не заставляйте меня думать!": Стив Круг - Санкт-Петербург, Символ-Плюс, 2008 г.- 224 с.

3. Веб-дизайн. Анализ удобства использования веб-сайтов по движению глаз: Якоб Нильсен, Кара Перниче - Санкт-Петербург, Вильямс, 2010 г.- 496 с.

4. Веб-дизайн. Книга Дж. Гарретта. Элементы опыта взаимодействия: Дж. Гарретт - Москва, Символ-Плюс, 2008 г.- 192 с.

5. Веб-дизайн: С. В. Киселев, С. В. Алексахин, А. В. Остроух - Москва, Академия, 2009 г.- 64 с.

6. Веб-дизайн: книга Дмитрия Кирсанова: Дмитрий Кирсанов - Санкт-Петербург, Символ-Плюс, 2006 г.- 376 с.

7. Веб-мастеринг на 100%. HTML, CSS, JavaScript, PHP, CMS, AJAX, раскрутка: Петр Ташков - Москва, Питер, 2010 г.- 512 с.

8. Графический дизайн в XXI векe: Шарлотта и Питер Филь - Санкт-Петербург, АСТ, Астрель, 2008 г.- 192 с.

9. Изучаем HTML, XHTML и CSS: Эрик Фримен, Элизабет Фримен - Москва, Питер, 2010 г.- 656 с.

10.Изучаем веб-дизайн: Этан Вотролл и Джефф Сьярто - Москва, Эксмо, 2010 г.- 496 с.

11.Интуитивный веб-дизайн: Сьюзан Уэйншенк - Санкт-Петербург, Эксмо, 2011 г.- 160 с.

12.Проектирование веб-интерфейсов: Билл Скотт, Тереза Нейл - Москва, Символ-Плюс, 2010 г.- 352 с.

13.Разработка веб-сайта. Взаимодействие с заказчиком, дизайнером и программистом: Д. Браун - Санкт-Петербург, Питер, 2009 г.- 336 с.

14.Современный веб-дизайн. Рисуем сайт, который продает: Ю. А. Сырых - Москва, Вильямс, 2008 г.- 304 с.

15.Создание Web-сайтов. Основное руководство: Мэтью МакДональд - Москва, Эксмо, 2010 г.- 768 с.

16.Создание веб-сайта для чайников (+ CD-ROM): Дэвид Кроудер - Москва, Диалектика, Вильямс, 2009 г.- 352 с.

17.Создание веб-страниц для чайников. Полный справочник: Ричард Вагнер, Ричард Мансфилд - Москва, Вильямс, 2010 г.- 544 с.

18.Создание веб-страниц для чайников: Бад Смит - Санкт-Петербург, Диалектика, 2009 г.- 288 с.

19.Что такое графический дизайн?: Квентин Ньюарк - Санкт-Петербург, АСТ, Астрель, 2005 г.- 256 с.

ПРИЛОЖЕНИЕ А