4.4 Параметры отображения страниц учебника

Как уже отмечалось, все настройки отображения находятся в файле "st.css".

Настройки полей слева и справа текста определяются параметрами: margin-left:40pt; margin-right:40pt. Для заголовков Н3 и Н5 отступ слева увеличен до 50pt чтобы выделить их из остального текста, отступ для Н4 установлен в 50%, что отличает заголовки глав от заголовков разделов: margin-left:50%. Для этого же типа заголовков введен другой цвет - COLOR:#880000.

Для остальных параметров текста используется первая строка файла:

p{line-height:80%;text-indent:25pt;text-align:justify;margin-left:40pt;margin-right:40pt;font-family:Comic Sans MS,Verdana;font-size:20px}, где

text-indent:25pt - первый отступ строки абзаца

text-align:justify - выравнивание текста по ширине

font-size:20px - размер шрифта

font-family:Comic Sans MS,Verdana - выбор семейства первого и второго шрифта

line-height:80% - расстояние между строками текста (используется для содержания)

Для основного текста на последний параметр расстояние другое и задано во второй строке:

div p{line-height:110%;}

Для отображения таблиц использованы две следующие строки:

td {line-height:150%; text-align:center; margin:40pt; font-family: Comic Sans MS, Verdana; font-size:16px}

div td {text-align:center; margin:40pt; font-family:Comic Sans MS,Verdana;font-size:20px}

В таблицах предпочтительно выравнивание по центру, поэтому здесь text-align:center.

Чтобы выделение важных участков текста было более заметным, а курсив не портил общий вид текста, использована строка:

div i {COLOR:#880000; font-style:normal;}

4.5 Оживление ссылок

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

A:link{COLOR:#00cc33;TEXT-DECORATION:none;font-size:20px}

A:hover{COLOR:#00cc33;FONT-WEIGHT:bold;font-size:20px}

Как только курсор наводится на ссылку начинает срабатывать настройка второй строки - FONT-WEIGHT:bold, текст становится шире.

Для подзаголовков содержания добавлен ещё и эффект смещения ссылки влево, что вместе с увеличением размера шрифта создаёт эффект раздвижения.

Рисунок 4.2 - Отображение ссылок в обычном состоянии

Рисунок 4.3 - Отображение ссылки при наведении курсора

При прочтении книги желательно отличать неизученные главы от разделов уже прочитанных. Для этого тоже можно использовать CSS. Добавляется ещё одна строка:

A:visited{COLOR:#006633;TEXT-DECORATION:none;font-size:20px}.

Теперь, цвет непосещённой ссылки (непрочитанного раздела) - светло-зелёный, а посещённой - сине-зелёный. (рисунок 4.4)

Рисунок 4.4 - Различия посещённых и непосещённых ссылок