Oformlenie_shkolnogo_saita

Методические рекомендации
для педагогов и учащихся
образовательных учреждений
Дизайн и оформление
школьного сайта
г.о. Новокуйбышевск, 2008 год
Уважаемые педагоги и учащиеся!
Предлагаем вашему вниманию методические рекомендации, в которых
освещены приемы разработки дизайна и оформления школьного сайта.
Показаны примеры правильного оформления сайтов и приведены советы для
достижения наилучшего результата при разработке дизайна сайта.
Надеемся, что данная информация будет востребована вами при работе над
школьным сайтом. Вы сможете получить дополнительную информацию из
методических
пособий
«Представительский
сайт
образовательного
учреждения», «Сайт школы в программе MS FrontPage» и «Создание
школьного сайта».
Желаем вам успехов в работе и достижения положительных
результатов.
Надеемся на дальнейшее сотрудничество!
2
Содержание:
1. Каким должен быть дизайн школьного сайта _____________________4
2. Представление о дизайне сайта _________________________________4
3. Рекомендации по организации и дизайну сайта ___________________11
4. Типичные ошибки сайтостроителей _____________________________ 13
4. Литература ___________________________________________________24
3
1. Каким должен быть дизайн школьного сайта
Это наиболее важная проблема. Обычно ученики, занимающиеся созданием сайта,
имели опыт по созданию "Домашних страничек". Но школьный сайт, в отличие от
"домашней странички" должен выглядеть профессионально, следовательно, дизайн
должен соответствовать следующим требованиям:

сайт должен правильно отображаться, независимо от типа браузера и
разрешения экрана посетителя;

сайт не должен содержать ничего, что может затруднять его просмотр.

Повторение навигации на каждой странице сайта.
Не рекомендуется:

использование java скриптов, которые могут затруднить просмотр сайта. Это
может быть неудачное сочетание цвета фона и текста, использование
пестрого
фона,
java
скрипты
типа
“Вращающиеся
ссылки
меню”,
“Переливающиеся ссылки”, “Летающий текст”, блокирующие правую кнопку
мыши, окошки типа alert при загрузке страницы, или при переходе по ссылке;

использование большого количества графики, flash-анимации, т.к. это
существенно увеличивает время загрузки сайта. Исходя из этих соображений,
размер одной загружаемой страницы не должен превышать 40 КБ, а если сайт
сделан во flash, то необходимо сделать альтернативную HTML версию сайта;

помещение важной информации, такой как, навигационное меню в
графическом виде, т.к. у посетителя может быть отключена загрузка
рисунков;
2. Представление о дизайне сайта
Дизайн — художественное конструирование предметного мира. Применительно к
сайтостроению, предметами художественного конструирования являются: шрифт, блоки
текста, изображения, панель навигации и т.д. Как красиво расположить разнородные
элементы на одной странице, как достичь наилучших результатов восприятия
информации, как доставить посетителю эстетическое удовольствие? Все эти задачи и
должен решать дизайн сайта.
4
Фактически, необходимо разработать дизайн одной страницы, так как весь сайт будет
строиться по единому шаблону. Обратитесь к учителю ИЗО для помощи в разработке
дизайна.
Компоновка информации
Основным элементом разметки страницы сайта являются таблицы. На странице можно
разместить сколько угодно таблиц всех форм и размеров. Смело вкладывайте одну
таблицу в другую для достижения необходимого эффекта. Контроль над размером,
количеством и расположением ячеек каждой таблицы позволяет очень эффективно
использовать место на странице. Каждая ячейка таблицы является «контейнером» для
хранения информации, текста, рисунка и т.д.
Каждая таблица в языке HTML обладает набором следующих свойств:

шириной и высотой:
 определяемой браузером по содержанию страницы,
 задаваемой в процентах или в пикселях

шириной границ в пикселях;

отступом текста от границы в пикселях;

промежутком между ячейками в пикселях.

фоновым изображением ячейки;
Профессиональный дизайнер может сложными таблицами точно в пикселях компоновать
экран графическими и текстовыми блоками. Однако, как правило, сайт должен обладать в
первую
очередь
информативностью,
поэтому
сложный
дизайн
редко
бывает
целесообразным в плане трудозатрат.
Учащимся предлагается следующий вариант размещения информации на странице,
которая будет использоваться как шаблон для всех остальных страниц сайта (таблица 1).
5
Таблица 1. Табличный вариант размещения информации на странице
логотип
название
Разделы:
Главная
Наши учителя
Наши ученики
Наши родители
Контакты
Карта сайта
_______
© выходные данные
Основное содержание
Разделы подменю:
Подраздел 1 | Подраздел 2 | Подраздел 3
В таком случае стиль сайта выдерживается на всех его страницах, меняется только текст и
графика в поле основного содержания. Преимущество такого расположения элементов в
том, что пользователь всегда знает, на каком сайте он находится и в любой момент может
перейти на тот или иной раздел или подраздел, не возвращаясь на главную страницу.
Навигационное меню может размещаться также сверху страницы.
6
Пример:
Предлагаем пример web-страницы, разработанной в программе MS FrontPage.
Аналогичный результат может быть получен и в программе Dreamweaver.
Этапы создания web-страницы:
1. Рисуем (на бумаге) таблицу расположения информации на web-странице:
Фото школы
Название сайта
Логотип
Разделы:
Новости:
Анонсы:
Главная
Наши учителя
Наши ученики
Наши родители
Контакты
2. Создаем папку для сайта.
3. Подбираем фотографии и оптимизируем их в программе PhotoShop. Создаем базу
фотографий в папке IMAGES (эта папка должна быть вложена в папку сайта).
4. Запускаем редактор MS FrontPage.
5. Создаем таблицу (такую же, как на бумаге) в редакторе MS FrontPage.
6. Оформляем таблицу (выбираем фон для страницы и для отдельных ячеек).
7. Добавляем графику (фото школы, название) из папки IMAGES
8. Создаем панель навигации сайта (перечень всех разделов).
9. Сохраняем web-страницу под именем index.htm
10. Копируем страницу (количество копий равно количеству разделов сайта, каждая
копия - новая страница). Все страницы, полученные путем копирования, должны
быть размещены в папке сайта.
11. Заполняем информацией все страницы сайта.
12. Вставляем и форматируем текст.
13. Вставляем графику (все графические элементы должны быть в папке IMAGES).
14. Настраиваем гиперссылки на каждой странице отдельно.
7
Компоненты оформления
Композиция
Композиция
—
построение
художественного
произведения,
обусловленное
его
содержанием и характером. Композиция является важнейшим элементом художественной
формы, придающим произведению единство и цельность. Композиционное построение
включает в себя:

выяснение центра композиции и подчинение ему других частей произведения;

объединение отдельных частей произведения в гармоническом единстве;

соподчинение и группировка с целью достичь выразительности и пластической
целостности произведения.
Для пользователя Интернет страница не должна «разваливаться» на отдельные части, при
первом взгляде не нее должно создаваться впечатление единого целого. Добиться этого
можно грамотным размещением элементов дизайна на странице. Нужно учесть, что на
странице будут некоторые служебные компоненты: элементы навигации, рекламные
баннеры, формы для взаимодействия с пользователем, надписи и пр. — все это должно
уложиться в общую композицию страницы. Например, способ отображения кнопок и их
месторасположение на странице существенно влияют на качество сайта. Если
пользователь не может найти кнопку, поскольку ни один элемент страницы на кнопку не
похож, скорее всего, он откажется от дальнейшего просмотра сайта. Кроме того,
необходимо помнить не только о внешнем виде интерактивных элементов, но и о их
месторасположении на странице. С помощью предложенного табличного варианта
размещения элементов сайта вы сможете решить эту проблему.
Цветовая гамма
Цветовая
гамма
—
ряд
гармонически
взаимосвязанных
цветовых
оттенков
художественного произведения. Различают теплые, горячие, холодные, яркие, блеклые,
светлые и другие цветовые гаммы.
8
Выбор цветов зависит от личных предпочтений и концепции сайта. Рекомендуем
ограничить палитру цветов. Выберите главный цвет графических элементов и размывайте
его от темного до светлого, добавьте в палитру также контрастный цвет (например, для
фона). Цвет текста должен контрастировать с цветом фона для максимально удобного
чтения. Обычно темный текст на светлом фоне читать легче, чем светлый текст на темном
фоне. Текст приглушенного тона читать легче, чем фосфоресцирующий. Используйте
яркие цвета только для заголовков и подзаголовков, а спокойные приглушенные тона для
основного текста.
Примечание. Цветовая гамма задается для всего сайта через таблицу стилей одним СSS
файлом (Cascading Style Sheets — каскадные таблицы стилей).
Шрифты
Шрифт должен служить задачам восприятия информации. На сайте должен быть
одинаковый стиль оформления текста (заголовки разных уровней, эпиграфы, цитаты,
ссылки и т.д.).
Читать текст с экрана — изощренная пытка, если пользователю приходиться
всматриваться в ярко-белый, фосфоресцирующий экран, пытаясь разглядеть мельчайшие
буквы. С помощью различных вариантов шрифтов можно передавать настроение: радость,
досаду и др.
Шрифты с засечками (маленькие черточки по краям букв) создают впечатление
стабильности, безопасности, профессионализма — это лучший выбор для серьезного
сайта. Шрифты с засечками используют для печати больших фрагментов текста.
Шрифты без засечек создают впечатление передового мышления, стремительности.
Шрифты без засечек используют для печати заголовков и небольших фрагментов текста.
Шрифты фиксированной ширины (Courier New) используются для блоков текста особого
содержания, имитирующих нажатия на клавиши клавиатуры или печатной машинки,
например, для кодов программ.
В пределах одного сайта не обязательно использовать шрифты, только одного типа.
Лучше всего использовать несколько шрифтов в зависимости от назначения: один — для
заголовка, другой — для подзаголовков, еще один — для основного текста. Но применять
9
больше трех-четырех шрифтов нецелесообразно. Определите стиль для каждого из
описанных выше элементов, и последовательно используйте его на всех страницах сайта.
Примечание. Чтобы ваша страница смотрелась одинаково на любом компьютере, вне
зависимости от того, установлен на нем используемый вами шрифт или нет, используйте
только стандартные шрифты Times New Roman, Arial, Courier New
Задание: Нарисуйте эскиз вашего сайта на листе бумаги. Продумайте, какую цветовую
гамму вы будете использовать.
Графика
Использование
графики
должно
быть
оправданным,
графика
должна
четко
соответствовать содержанию сайта. Переизбыток графики и анимации отвлекает от
основного содержания, переключая внимание посетителей сайта, затрудняет загрузку
страницы. Графика занимает основной объем трафика веб-страниц. Одна фотография в
килобайтах занимает место в десятки раз большее, чем лист текста A4. Графика
обязательно должна быть оптимизирована! Используйте повторяющиеся изображения, так
как компьютер сохраняет один раз загруженные файлы во временных папках для
экономии времени загрузки.
Графические элементы требуют для работы с собой знаний форматов GIF и JPEG, а также
навыков владением графическими редакторами. К графическим элементам отн6осятся
элементы навигации (кнопки), линии, фотографии, рисунки, анимация. Графические
средства
могут
информационные
являться
части
элементами
и
для
привлекать
разделения
внимание
страницы
пользователей
на
отдельные
к
отдельным
информативным областям.
В веб-дизайне большие фотографии и сложные рисунки, занимающие весь экран,
выглядят плохо. Кроме того, большие фотографии будут долго загружаться. Чаще всего
сканированные изображения или полученные из Интернета графические объекты
нуждаются в дополнительном редактировании в графическом редакторе (наприме, Adobe
Photoshop).
Под редактированием изображения понимается:

обрезка части изображения;

регулировка контрастности и яркости;
10

регулировка цветового баланса;

изменение размера изображения;

регулировка объема изображения.
Основная задача при создании графических элементов для веб-сайта состоит в
максимизации качества графики при минимизации размера файла. Чем выше качество
изображения и, тем больше размер файла и дольше время загрузки. В программе Adobe
Photoshop есть возможность достичь компромисса между качеством изображения и его
объемом, путем настройки параметров оптимизации в диалоговом окне специальной
функции Save for Web (Сохранить для Веб). Для реализации поставленных задач принято
использовать форматы GIF и JPEG. Выбор формата полностью зависит от типа
сохраняемого изображения. Алгоритм сжатия JPEG основан на избирательном восприятии
информации человеческим глазом и позволяет сжимать фотографии в 20?50 раз, усредняя
цвета малых участков изображения. При этом резкие переходы между цветами могут
размываться. Для сохранения простых контрастных изображений (например, кнопки,
сканированные таблицы), а также анимированных изображений используется формат GIF.
В формате GIF сохраняют рисунки с небольшим количеством цветов. Сжатие файлов
происходит за счет уменьшения количества индексированных цветов. Всего в формате
GIF их 256, но иногда для рисунка бывает достаточно и четырех. Еще одна особенность
формата GIF – возможность сохранения объекта с прозрачным фоном.
3. Рекомендации по организации и дизайну сайта.
Тематические разделы
Для удобного доступа к информации сайт нужно разумно организовать. Все
предполагаемое содержание нужно разбить на основные темы (разделы сайта),
содержащие одну или несколько HTML-страниц. Каждый раздел при большом количестве
информации удобно разделить на несколько подразделов.
Компоновка информации
Основным элементом разметки страницы сайта являются таблицы. На странице можно
разместить сколько угодно таблиц всех форм и размеров. Смело вкладывайте одну
таблицу в другую для достижения необходимого эффекта. Контроль над размером,
количеством и расположением ячеек каждой таблицы позволяет очень эффективно
11
расположить информацию на странице. Каждая ячейка таблицы является «контейнером»
для хранения информации, текста, рисунка и т.д.
Навигация
На каждой странице сайта необходима панель навигации, внешний вид которой не
меняется при смене страниц. Панель навигации позволяет посетителю сайта целиком
видеть его логические блоки. Пункты меню навигации должны отображать основные
логические блоки сайта. Они должны быть краткими и лаконичными, чтобы не занимать
много экранного места. Помните, что пользователь должен иметь возможность быстро и
эффективно
перемещаться
по
страницам
сайта.
Чтобы
помочь
пользователю
сориентироваться, схема навигации должна представлять собой простую, наглядную
карту «дорог» всего сайта, с указанием места — «вы находитесь здесь». При
планировании сайта, необходимо предусмотреть такую схему навигации, чтобы от
страницы к странице пользователь мог перемещаться, сделав минимум щелчков кнопкой
мыши. Простейший способ уменьшить количество щелчков — поместить на все страницы
одинаковый набор навигационных ссылок. Если веб-сайт имеет много разделов, можно
сгруппировать ссылки подразделов в раскрывающееся меню. В дальнейшем элементами
навигации могут быть кнопки, ссылки и пр. Панель навигации обычно располагается в
левой или верхней части страницы. Далее на каждой странице сайта размещайте панель
навигации в одной и той же области страницы. Таким образом, пользователю не придется
каждый раз искать нужные кнопки. Все интерактивные элементы должны быть
выполнены в едином стиле.
При разработке сайта образовательного содержания, необходимо обратить внимание
также на интерактивные элементы. На сайте должны быть гостевая книга, форум, где
посетители сайта могли бы пообщаться между собой, выразить свое мнение, задать
вопросы. Только активно обновляемый и популярный сайт пользуется авторитетом и
поддержкой пользователей. Если не обеспечено развитие сайта, бессмысленно заводить
гостевые
книги
и
прочие
интерактивные
формы
общения.
Результат
будет
отрицательным, т.е. в гостевой книге будут накапливаться различные критические
замечания, вовсе не придающие значимости информационному ресурсу.
Содержание сайта и оформление
Как недостаток, так и избыток текста на странице считается большим минусом. Лучше
разбить большой текст на фрагменты или же разметить его гиперссылками. Плохо
12
смотрятся (очень медленно загружаются) страницы, переполненные графикой. Полное
отсутствие графики производит впечатление недоделанности.
Контактная информация
В каком городе находится ваша школа, телефон, адрес электронной почты, имя и отчество
контактного лица - все это надо обязательно не забывать отражать на сайте. Относитесь к
сайту, как к серьезному средству информации. Поместите контактную информацию в
самые посещаемые места на сайте, в частности, на стартовую страницу index.htm.
Представление о дизайне сайта
Дизайн — художественное конструирование предметного мира. Применительно к
сайтостроению, предметами художественного конструирования являются: шрифт, блоки
текста, изображения, панель навигации и т.д. Как красиво расположить разнородные
элементы на одной странице, как достичь наилучших результатов восприятия
информации, как доставить посетителю эстетическое удовольствие? Все эти задачи и
должен решать дизайн сайта.
Фактически, необходимо разработать дизайн одной страницы, так как весь сайт будет
строиться по единому шаблону. Обратитесь к учителю ИЗО для помощи в разработке
дизайна.
4. Типичные ошибки сайтостроителей
Дизайн
Стиль оформления
Отсутствие единого стиля оформления страниц
Суть погрешности: на разных страницах используются разные дизайнерские приёмы для
показа содержимого.
Примеры

Разный вид заголовочной части страниц (логотип, заголовок сайта, заголовок
страницы).

Разные виды навигационных элементов и их расположения на страницах.
13

Разные способы выравнивания однотипных элементов (слева, справа, по центру, по
ширине).

Разные способы выделения однотипных элементов (курсив, жирность, цвет, размер,
подчеркивание, разрядка, инверсия).

Разный фон.

Разный шрифт основного текста.

Разный цвет и размер шрифта основного текста.
Отсутствие логотипа
Логотип — своего рода пиктограмма сайта.
Логотип выполняют, как правило, в графическом виде и размещают в левом верхнем углу
каждой страницы сайта. Получается, что логотипом, как печатью, штампуют все
страницы.
На всех страницах, кроме Главной, логотип должен быть ссылкой на Главную
(общепринятое интерфейсное правило).
Так как логотип является пиктограммой, то к его изображению применимы правила,
принятые для пиктограмм:

Изображение должно быть связано с содержимым сайта.

Условное, запоминающееся изображение.

Минимум деталей.

Небольшой размер.
Логотип — это пиктограмма сайта по смыслу слова и по интерфейсной нагрузке этого
навигационно-идентифицирующего средства. Нехорошо в качестве логотипа помещать
миниатюру с фотографией школы.
Обязательным правилом должно быть снабжение логотипа и заголовка сайта (если он
выполнен в графике) соответствующими alt-надписями. Тогда их заметят и те, кто
выключил графику, а также сетевые роботы. Вообще, любой текст, «замурованный» в
графику, должен иметь alt-надпись, буквально его повторяющую.
На вторых страницах в качестве alt-надписи на логотипе может быть текст «На Главную».
На Главной странице — «Логотип сайта Название сайта».
14
Логотип и заголовок сайта должны поддерживать друг друга или даже быть одной
картинкой.
Замечание. Посмотрим в левый верхний угол окна приложений Word, Photoshop,
The Bat!, других. Мы видим пиктограмму (логотип) продукта!
Вот откуда, вероятно, логотипы появились на сайтах, вот чем определилось их
место. Это такое место, которое видно без прокруток при любом размере окна.
Кроме того, логотип стал на сайтах общепринятым навигационным средством —
переходом на Главную страницу.
Многих людей раздражают сайты, в которых верхний левый угол не чувствителен к
мышиному щелчку (на вторых страницах). Нельзя лишать пользователя привычного
интерфейсного действия.
Большинство хороших сайтов в Интернет имеют логотип.
Отсутствие заголовка сайта
Заголовок, как и логотип, является инвариантным (постоянным) элементом каждой
страницы сайта.
Заголовок сайта размещают в самом верху каждой страницы рядом с логотипом.
Логотип и заголовок на каждой странице сайта однозначно говорят пользователю о его
положении во всемирной сети. Листая страницы, пользователь цепляется за заголовок и
логотип как за дорожный знак, указывающий на зону одного интернетовского узла.
Постоянные элементы страницы (к которым, кроме заголовка и логотипа, относится ещё и
главное меню) должны крепко держать свое место на экране и не смещаться при листании
страниц.
Заголовок сайта может быть выполнен в графическом виде. В этом случае alt-надпись
должна в точности повторять текст заголовка.
Отсутствие заголовка страницы
Заголовок
страницы
должен
располагаться
ниже
заголовка
сайта
или
ниже
горизонтального меню, если оно имеется под заголовком сайта.
15
Заголовок страницы отвечает на вопрос посетителя: «Где я?»
Если заголовок страницы выполнен в графическом виде, то alt-надпись должна в точности
повторять текст заголовка.
Заголовок окна должен повторять заголовок страницы.
Название окна не совпадает с заголовком страницы
Заголовок окна должен повторять заголовок страницы.
Это очень удобно, когда окно с сайтом свёрнуто в кнопку на Панели задач: на этой кнопке
пользователь видит заголовок текущей страницы.
Заголовок окна заносится в папку Избранных сайтов, когда пользователь делает закладку
на текущую страницу средствами браузера.
Заголовок окна — дополнительная подсказка пользователю о его текущем положении на
сайте.
Иногда в состав заголовка окна включают и название сайта. В таком случае название
страницы рекомендуется записывать первым, чтобы пользователь увидел его даже в очень
узких окнах и смог прочитать, если сайт свёрнут в кнопку на Панели задач.
Примеры

Заголовок окна: О гимназии
Заголовок страницы: О гимназии.

Заголовок окна: О гимназии < Гимназия 29
Заголовок страницы: О гимназии.
Заголовок окна дополнительно сообщает, что текущая страница является прямым
потомком страницы Гимназия 29.

Заголовок окна: Базовое < Образование < Гимназия 29
Заголовок страницы: Базовое.
Заголовок окна сообщает, что текущая страница — потомок страницы Образование,
которая в свою очередь — потомок страницы Гимназия 29.

Заголовок окна: Углубленное < Образование < Гимназия 29
Заголовок страницы: Углубленное.
16
Заголовок окна дополнительно показывает путь к текущей страницы от корня сайта.
Многочисленные выделения одного и того же информационного элемента
Для текстового выделения используют:

особый шрифт;

другой размер шрифта;

цвет (не рекомендуется);

курсив;

жирность.
Но не всё сразу! Очень важно не «пережать» выделение, иначе оно будет «бить» по глазам
читателя.
Это пример ужасного выделения.
НЕ СЛЕДУЕТ ВЫДЕЛЯТЬ ТЕКСТ ПРОПИСНЫМИ БУКВАМИ. ЧТЕНИЕ ТАКОГО
ФРАГМЕНТА ВЕСЬМА ЗАТРУДНИТЕЛЬНО.
Выделять цветом и (или) подчеркиванием не рекомендуется. Ведь так традиционно
выделяются ссылки.
Это выделение очень похоже на ссылку
Не надо дополнительно выделять гиперссылки. В них есть уже два выделения (цвет,
подчеркивание). Накладывать третье (размер), четвёртое (жирность), пятое (курсив) —
совсем ни к чему.
Никогда не используйте для выделений обычного текста теги Hn. Эти теги предназначены
для выделения только заголовков.
Ещё несколько примеров плохих выделений:
Пример плохого выделения
Программа,
которая
смотреть
Комментарий
позволяет
гипертекстовые Курсив,
документы,
жирность,
заглавные
называется буквы.
БРАУЗЕРОМ.
Программа,
которая
позволяет Шрифт, размер, цвет.
17
смотреть
гипертекстовые
документы, называется браузером.
Программа,
которая
смотреть
позволяет
гипертекстовые
документы,
называется
б р а у з е р о м.
Разрядка, подчёркивание и цвет
(похожие на гиперссылку).
Как выделять правильно
Самое лучшее выделение — курсив. Оно мягкое, не утомляет глаза:
Программа, которая позволяет смотреть гипертекстовые документы,
называется браузером.
Если курсивное начертание кажется слишком слабым, используют повышенную
жирность:
Программа, которая позволяет смотреть гипертекстовые документы,
называется браузером.
Особый случай — заголовки. Обычно их выделяют жирностью и повышенным кеглем.
Иногда дополнительно рубленым шрифтом.
Размер заголовка играет важную роль — он задает иерархическую структуру текста и
кодируется при помощи тега Hn:
Заголовок H1
Заголовок H2
Заголовок H3
Заголовок H4
Заголовок H5
Заголовок H6
Дополнительные правила
При выделении текстовых фрагментов пользуйтесь следующими правилами:

кавычки должны быть того же начертания и цвета, что и заключенный в них текст;
18

скобки, заключающие выделенный фрагмент, должны иметь начертание и цвет
основного текста;

знаки препинания, следующие за выделенным фрагментом, должны иметь начертание
и цвет основного текста.
Единообразие выделений
Решите, что именно вы будете выделять на страницах сайта. Если вы решили выделять
новые термины курсивом, так и делайте до конца приложения. Не переходите время от
времени на жирность или цвет.
Слишком большие массивы выделений
Каждое написанное слово кажется важным. Поэтому выделить хочется всё. Но когда
выделений слишком много, получается обратный эффект: внимание привлекает
невыделенное место:
В этом тексте выделены все слова, кроме слова липучка. Но именно
это слово и привлекает внимание!
Рекомендации по выделениям
Среди всех способов выделений самое употребительное — курсив:
В этом тексте курсивом выделено слово мягкость. Курсивное
выделение,
действительно,
не
нагружает
чрезмерно
глаза
пользователя.
Выделение жирностью используют для установки сильных акцентов. «Жирное» слово
пользователь прочитает сразу, перед чтением всего текста, так оно бросается в глаза:
В этом тексте жирностью выделено слово магнит. Это слово
притягивает внимание пользователя.
Ко всем остальным способам выделения нужно относиться с большой осторожностью:
легко пустить петуха. Особенно, когда один фрагмент выделяется несколькими способами
сразу.
Особый случай — заголовки. Часто их выделяют жирностью, повышенным кеглем и
дополнительно рубленым шрифтом.
19
Размер заголовка играет важную роль — он задает иерархическую структуру текста и
кодируется при помощи тега Hn.
Выделение стилем, типичным для ссылок
Выделять синим цветом и (или) подчеркиванием категорически не рекомендуется. Ведь
так традиционно выделяются ссылки.
Это выделение очень похоже на ссылку.
Следует отметить, что в современном дизайне ссылки часто выделяют цветом, а
подчеркивание появляется на время зависания над ссылкой курсора. Поэтому любое
цветовое выделение будет похоже на ссылку.
Вывод: на сайтах следует избегать цветовых выделений.
Более двух разных шрифтов (гарнитур)
Нормально, когда на странице всего один шрифт. При этом лучше не задавать шрифт
специально, а положиться на умолчание браузера. Как правило, браузер будет выводить
текст пропорциональным серифным (с засечками) шрифтом Times New Roman.
Для заголовков можно использовать рубленый (без засечек) шрифт, такой как Arial.
Следует отметить, что не все шрифты хорошо сочетаются друг с другом. Шрифты Times и
Arial отлично сочетаются. Именно поэтому они были выбраны в качестве основных
шрифтов Windows.
Дизайнеры на экране (и в книгах) стараются не использовать более 2 шрифтов.
Исключением является только запись на экран (страницу книги) программных кодов. Их
принято выводить моноширинным шрифтом, таким как Courier (третий шрифт
стандартного шрифтового набора Windows).
Образцы шрифтов показаны на рис. 7.1.
20
Рис 7.1. Образцы шрифтов
Фиксированный размер шрифта, который не нельзя изменить в браузере
У разных пользователей разные предпочтения ко всему на свете.
Одним нравится читать мелкий шрифт, другие предпочитают читать крупный.
Есть и такие, которым мелкий шрифт не позволяет читать зрение. Им нужен
очень крупный шрифт.
Разработчики браузеров учли разные вкусы и физические возможности пользователей,
предусмотрев в интерфейсах своих продуктов настройку размера шрифта.
Так, например, в браузере Internet Explorer такая настройка выполняется через меню
Вид/Размер шрифта. Аналогичная операция в браузере Mozilla Firefox может быть
выполнена при помощи клавиатурных аккордов Ctrl + + и Ctrl + -.
Когда разработчик сайта задаёт на своих страницах фиксированный размер шрифта,
закрывая изменение размера в браузере, он выступает в роли Карабаса Барабаса,
заставляющего марионеток плясать под свою дудку.
Редкому пользователю это понравится, другим же сайт будет просто не по глазам.
Зафиксировать размер шрифта можно при помощи CSS-свойства font-size, использовав
абсолютные размерные значения:

Типографские значения: pt (пункты), pc (пики);

Экранное значение: px (пикселы).

Геометрические значения: in (дюймы), cm (сантиметры), mm (миллиметры).
Например, текст следующего абзаца выводится при помощи кода «<P style="fontsize:6pt"> Текст с размером 6 пунктов.».
21
Текст с размером 6 пунктов.
Если увеличить шрифт на странице при помощи браузера, то весь текст укрупнится,
кроме так заданного абзаца.
Не кодируйте размер шрифта в абсолютных единицах на своих сайтах.
Самое лучшее, вообще не задавать размер. Тогда браузер будет выводить на страницу
текст среднего размера, который пользователь при желании может легко изменить (в
нужную сторону).
Для размерных выделений можно безопасно использовать теги SMALL и BIG.
Следующие CSS-свойства «чувствительны» к изменению размера шрифта в браузере:

Мнемонические размеры: xx-small, x-small, small, medium, large x-large, xx-large.

Относительные указания: smaller, larger.

Указание в процентах по отношению к размеру шрифта родителя (например, fontsize:150%).
Текст следующего абзаца выводится при помощи кода «<P style="font-size:75%"> Размер
шрифта на 25% меньше.».
Размер шрифта на 25% меньше.
Если увеличить шрифт на такой странице при помощи браузера, то текст предыдущего
абзаца укрупнится также.
В классическом HTML для управления размером шрифта можно использовать атрибут
size тега FONT. Этот приём кодирования также чувствителен к управлению размером
шрифта в браузере.
В качестве значений атрибута можно задавать целые числа от 1 до 7:
size=1 size=2 size=3 size=4 size=5 size=6 size=7
Или числа со знаком от -2 до +4 (за 0 принимается «нормальный» размер, то есть размер,
который браузер использует по умолчанию; сам 0 задавать нельзя):
size=-2 size=-1 size=+1 size=+2 size=+3 size=+4
22
Очень большие абзацы
Длинные абзацы всегда читать сложно, особенно, если это не художественное, а
техническое изложение.
Читать с экрана труднее, чем со страниц бумажной книги. Поэтому экранные абзацы
должны быть очень короткими.
Не рекомендуется записывать абзацы длиннее 4-5 строк в расчёте на 80-символьные
строки.
23
5. Литература

Якушина Е.В. Изучаем Интернет. Создаем WEB-страничку. - СПб.: Питер-пресс,
2000. - 256 с.

Якушина Е.В. Интернет для школьников и начинающих пользователей. Под
редакцией к.п.н. А.А. Журина. (серия "От игры к делу"). - М.: Аквариум, 1997. 256 с.

Якушина Е.В. Словарь по HTML

Монахов М.Ю., Воронин А.А. Создаем школьный сайт в Интернете. – М.:БИНОМ,
2005.-128 с.

Дуванов А.А. Основы практического web-дизайна. – Информатика, 2005.

Учебник по HTML http://savdv.narod.ru/uchebnik.htm

Алленова Н. Учебник по html , css и формам. http://htmlbook.narod.ru/
24