Название: Власть народу - относительные размеры шрифтов
Вид работы: доклад
Рубрика: Информатика и программирование
Размер файла: 14.82 Kb
Скачать файл: referat.me-133826.docx
Краткое описание работы: Относительные размеры шрифтов делают сайты более удобными для чтения - но польза от этого не велика, если посетители сайта не знают, как реально изменять размеры текста.
Власть народу - относительные размеры шрифтов
BojanMihelac
Относительные размеры шрифтов делают сайты более удобными для чтения - но польза от этого не велика, если посетители сайта не знают, как реально изменять размеры текста. В InternetExplorer, наиболее распространенном на данный момент браузере, эта возможность спрятана в одном из меню второго уровня, из-за чего изменение размера текста становится чересчур сложной задачей для многих пользователей. Эта задача намного упростится, если на страницах сайта присутствуют кнопки, позволяющие быстро изменить размер шрифта.
К сожалению, в большинстве вариантов таких кнопок игнорируются установки пользователя. В данной статье мы приводим решение, которое позволят менять размера текста, и при этом не вступает в противоречие с настройками пользователя.
CSS
В качестве первого шага создадим CSS-файл с основными стилями, в котором будут использоваться относительные размеры шрифтов в сочетании с размером шрифта, установленном на машине пользователя по-умолчанию. Для этого размеры мы будем задавать в процентах или в em-ах.
/* размер шрифта по-умолчанию */
@importurl(small.css);
/* Совместимые с Netscape 4 размеры шрифтов */
body, div, p, th, td, li, dd {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
}
h1 {
font-size: 130%;
font-weight: bold;
}
h2 {
font-size: 110%;
font-weight: bold;
}
Теперь создадим пять альтернативных стилей, где используются определенные в спецификации CSS абсолютные размеры: "xx-small", "x-small", "small", "medium", и "large". В любом браузере коэффициент масштабирования между ними должен быть 1.2, как это рекомендует стандарт CSS2. Также следует учесть и обойти проблемы масштабирования в IE5 и Opera (более подробно эта тема раскрыта в замечательной статье Тода Фарнера (ToddFahrner) "Размер имеет значение").
/* пример файла xx-small.css */
body,
body div,
body p,
body th,
body td,
body li,
body dd {
font-size: xx-small;
voice-family: ""}"";
voice-family: inherit;
font-size: x-small
}
html>body,
html>body div,
html>body p,
html>body th,
html>body td,
html>body li,
html>body dd {
font-size: x-small
}
Получившиесяфайлыможнопосмотретьподаннымссылкам: xx-small.css, x-small.css, small.css, medium.css, large.css.
HTML
Теперь давайте создадим HTML-документ и подключим к нему основной и альтернативный CSS-файлы, присвоив альтернативным файлам имена "A--", "A-", "A", "A+" и "A++" в порядке возрастания.
<link rel="stylesheet" href="style.css"
type="text/css" />
<link rel="alternate stylesheet"
type="text/css" href="large.css" title="A++" />
<link rel="alternate stylesheet"
type="text/css" href="medium.css" title="A+" />
<link rel="alternate stylesheet"
type="text/css" href="small.css" title="A" />
<link rel="alternate stylesheet"
type="text/css" href="x-small.css" title="A-" />
<link rel="alternate stylesheet"
type="text/css" href="xx-small.css" title="A--" />
JavaScript
ТеперьдобавимвнашуHTML-страницупереключательтаблицстилей, взятыйизстатьи "Alternative Style: Working With Alternate Style Sheets".
<script
language="JavaScript1.2"
src="styleswitcher.js"
type="text/javascript">
</script>
Сами кнопки реализуем вот так:
<form name="font_select" action="GET">
<input
type="button"
onclick="javascript:fontsizedown();"
value=" font - "/>
<input
type="button"
onclick="javascript:fontsizeup()"
value=" font + "/>
</form>
Вот исходный код переключателя стилей, а вот полностью рабочий пример, протестированный в Mozilla 1.6, MozillaFirebird 0.7, Opera 7.11, IE 6 Windows, IE 5.2 Mac, и Safari 1.2. Вот и все.
Предупреждение
Не забывайте, в некоторых версиях IE есть баг, из-за которого он начинает странно себя вести, когда перед типом документа DOCTYPE идет декларация XML.
Похожие работы
-
Продвижение сайта: ссылки
Ссылки, которые другие веб-мастера ставят на ваш сайт - это один из важнейших факторов, учитываемых поисковыми системами при ранжировании, то есть при определении места вашего сайта при выдаче по поисковым запросам.
-
Оптимизация сайта: ошибки
Очень часто в дизайне сайта используется графический заголовок (шапка), то есть картинка во всю ширину страницы, содержащая, как правило, логотип компании, название и некоторую другую информацию.
-
SEO: черные методы
Интернет постоянно развивается, а вместе с ним постоянно растет рынок Интернет рекламы. Становится все больше продвигаемых сайтов и все сложнее находить действительно качественные ресурсы для размещения ссылок.
-
Wiki как движок обычного сайта
Не секрет, что на настоящий момент традиционные cms переживают что-то типа кризиса. Новых технологий как бы и нет, новых направлений - тоже. В основном, cms тихо совершенствуются и "наращивают мясо" функциональности.
-
Выбор хостинга с базами данных
Какой тип веб-сайтов зависит от информации из баз данных? Сайты, предлагающие сформированные по условиям пользователя страницы наполненные богатым и динамичным содержанием. Сайты, которые автоматически ищут и предлагают товары on-line.
-
Поиск - простой и видимый
Поиск - жизненно важен для пользователей, с его помощью они работают со сложными веб-сайтами. Лучшие веб-сайты предлагают поле простого поиска на главной странице и отказываются от продвинутого поиска и использования рамок поиска.
-
Три способа улучшить юзабилити внешних поисковых серверов
Воспроизведение процесса поиска по логам. Ролевой поиск. Тест на юзабилити.
-
Работа с диалоговыми окнами
Принципы работы стандартных диалоговых окон открытия, закрытия, сохранения файла. Особенности использования общего диалога для функций шрифтов, цветов, печати, справочной системы. Обобщение методов настройки цвета, фона формы. Анализ метода ShowColor.
-
Оптмизация сайта: мета теги
Тег «TITLE». Мета-тег Desciption. Мета-тег Keywords.
-
Проверочный список для веб-стандартов
Для разных людей термин "веб-стандарты" означает разные вещи. Для некоторых это просто "страницы без таблиц", для других - "правильный код". Однако веб-стандарты это нечто намного большее.