Все страницы сайта следует оформлять единообразно. Т.е. должны совпадать размер и шрифт основного текста, заголовков, ссылок, цветовая схема и т.д. Расположение основного заголовка и навигационных ссылок не должно меняться от страницы к странице.
При оформлении web-страницы не следует использовать много цветов. Обычно достаточно 3-5 разных цветов: цвет фона, цвет обычного текста, цвет выделенного текста (на который стоит обратить внимание), цвета ссылок (непосещенная, посещенная, активная).
Например, эти страницы оформлены с использованием следующих цветов:
| {FF,FF,CC} | - цвет фона страницы | |
| {00,00,00} | - основной цвет текста | |
| {00,66,66} | - цвет выделенного текста | |
| {00,00,FF} | - цвет непосещенной ссылки | |
| {66,00,66} | - цвет посещенной ссылки | |
| {FF,00,00} | - цвет активной ссылки | |
| {CC,CC,CC} | - цвет фона кода |
Как Вы видите сочетания этих цветов уже достаточно пестро.
Цвета фона и текста следует выбирать следует выбирать так, чтобы текст был легко читаем, не накапливалась бы усталость глаз. Обычно для этого достаточно выбрать цвет фона более блеклым (менее ярким), чем текст.
Для подсветки какого-то участка текста можно выбирать цвета близкие (по какому-либо критерию: цвету или интенсивности) к основному. Сравните выделение следующих двух предложений:
| 1) выделение тем же цветом (желтым), но другой интенсивности. | 2) Выделение другим цветом, но с такой же интенсивностью |
Рекомендуется (но уже редко исполняется) использовать "безопасную палитру цветов" - палитру, цвета которой гарантированно правильно отображают браузеры. В эту палитру входят цвета, цветовые составляющие которых, принимают следующие значения: 00, 33, 66, 99, CC, FF, во всех возможных 216 их сочетаниях.
При использовании фонового рисунка
<body background=...>
обязательно указывайте фоновый цвет <body
bgcolor=...> равный среднему цвету
фонового рисунка, иначе при отключенной
загрузке графики пользователь рискует
увидеть некрасивую страницу.
Шрифтовое оформление можно разнообразить
форматированием текста (полужирный <b>,
курсивный <i>), изменением размера шрифта (лучше
использовать относительные
размеры) и цвета
(<font color=...>) шрифта.
Комбинируйте использование различных стилей: <h1>,
<pre>, <code> и т.д.
Не следует использовать подчеркнутый
текст (<u>),
т.к. по умолчанию подчеркиваются ссылки и у пользователя будет
накапливаться раздражение от непродуктивных щелчков мышью.
Для указания размера шрифта <font size=...>
используйте относительные размеры:
+1, -3, так как
мы не можем предполагать какой размер
шрифта выберет для себя пользователь в
качестве базового.
Не следует жестко задавать вид шрифта
(<font face=...>),
т.к. у пользователя его может не окажеться,
браузер воспользуется наиболее
подходящим шрифтом (по его мнению) и никто
не сможет предугадать как будет выглядеть
страница.
Группируйте текст блоками,
т.е. записывайте его не просто на странице (внутри
области действия тега <body>...</body>),
а внутри тегов <p>...</p>
или <div>...</div>. Это
позволит Вам управлять блоком как целым,
например задавать его выравнивание (параметр
align).
Для перехода на новую строку внутри блока
(параграфа) используйте мягкий разрыв
строки <br>. Для запрета разрыва
слов браузером используйте <nobr>какой-то
текст</nobr> или неразрывный пробел
между словами: слово1 слово2.
Для отображения специальных символов (используются как часть тегов) и дополнительных символов (отсутствуют в выбранной кодировке) используются кодовые названия, например:
| символ | кодовое название |
код десятичный |
код шестнадцатеричный |
описание |
|---|---|---|---|---|
|
- неразрывный пробел | |||
| " | " |
" |
" |
- двойные кавычки |
| < | < |
< |
< |
- открывающая угловая скобка |
| > | > |
> |
> |
- закрывающая угловая скобка |
| & | & |
& |
& |
- амперсант |
При указании ссылки на документ Вашего сайта используйте относительные ссылки. Это позволит в будущем относительно легко сменить hosting (расположение Вашего сайта).
Если ссылка не является основной, т.е указывает
на второстепенную (справочную) информацию
или не на Ваш сайт, то предпочтительнее
ее открывать в новом окне
(параметр <a target=_blank...>).
Всплывающие подсказки
(параметр title) помогут пользователю более осознанно
выбрать ссылку, например
Использование закладок (якорей) в
документе (<a name=имя закладки>)
позволит Вам организовать ссылки на части страницы.
Всплывающие подсказки можно сопоставить не только ссылке, а любому тегу,
например <pre title=...> или <span title=...>.
Сравните,
какие
подсказки
у
разных
слов
в
этом
предложении.
От удобства и качества навигации зависит насколько долго задержится пользователь на сайте.
Навигация на всех страницах сайта должна быть реализована однотипным образом. Пользователь не должен при переходе на другую страницу искать и заново привыкать к изменившемуся расположению навигационных ссылок.
В данной версии навигация по сайту реализована наиболее простым образом: строка текстовых ссылок вверху каждой страницы. Иногда удобно для пользователя продублировать строку ссылок внизу каждой страницы.
Также в начале каждого раздела (в примере один раздел - одна страница) размещен список тем раздела - очень удобно.
В конце каждого подраздела разумно поместить ссылку на оглавление или начало страницы.