Приднестровская поддержка XOOPS
Следующим этапом после написания таблицы стилей для крупной печати является создание масштабируемого макета страницы. Данная концепция получила широкое распространение благодаря Джо Кларку (Joe Clark); она состоит в изменении структуры страницы путем расположения всех ее элементов в одну колонку с помощью CSS и использовании контрастных цветов.1 Это особенно важно для пользователей, использующих функцию увеличения масштаба страницы в современных браузерах (поскольку при этом крупнее становится не только текст, но и все остальные элементы страницы) или пользующихся специальными программами, подобными экранной лупе, для облегчения зрительного восприятия текста. При увеличении масштаба страницы таким
способом боковые панели смещаются за пределы поля зрения, в результате чего на странице остается только основной контент.
Благодаря увеличению размера шрифта и отображению светлого текста на темном фоне (такое сочетание облегчает восприятие информации) при использовании масштабируемого макета пользователям со слабым зрением будет гораздо удобнее работать с сайтом. Таблица стилей, создающая масштабируемый макет страницы, с которой мы работали на протяжении этой главы, может содержать нижеследующие правила,
а на рис. 8.7 показан вид страницы при просмотре в браузере.
Рис. 8.7. Вид страницы с применением таблицы стилей для zoom layout (DEMO)
body, html {
margin: 1em 2em 2em 2em;
padding: 0;
font-size: 140%;
background-color: #333;
color: #FFFFFF;
}
#navigation ul {
list-style: none;
margin: 0;
padding: 0;
border: none;
}
#navigation li {
float:left;
width: 20%;
}
#navigation li a:link, #navigation li a:visited {
color: #FFFF00;
}
#navigation li a:hover {
text-decoration:none;
}
#content {
padding: 1em 0 0 0;
clear:left;
}
#content p, #content li {
line-height: 1.6em;
}
#content h1, #content h2 {
font: 140% Georgia, "Times New Roman", Times, serif;
color: #FFFFFF;
background-color: transparent;
}
#content h2 {
font: 120% Georgia, "Times New Roman", Times, serif;
}
Отправитель | Нити |
---|
12 пользователь(ей) активно (2 пользователь(ей) просматривают Инструкции)
Участников: 0 Гостей: 12 далее... |