рефераты
Главная

Рефераты по рекламе

Рефераты по физике

Рефераты по философии

Рефераты по финансам

Рефераты по химии

Рефераты по хозяйственному праву

Рефераты по цифровым устройствам

Рефераты по экологическому праву

Рефераты по экономико-математическому моделированию

Рефераты по экономической географии

Рефераты по экономической теории

Рефераты по этике

Рефераты по юриспруденции

Рефераты по языковедению

Рефераты по юридическим наукам

Рефераты по истории

Рефераты по компьютерным наукам

Рефераты по медицинским наукам

Рефераты по финансовым наукам

Рефераты по управленческим наукам

Психология и педагогика

Промышленность производство

Биология и химия

Языкознание филология

Издательское дело и полиграфия

Рефераты по краеведению и этнографии

Рефераты по религии и мифологии

Рефераты по медицине

Рефераты по сексологии

Рефераты по информатике программированию

Краткое содержание произведений

Доклад: Власть народу - относительные размеры шрифтов

Доклад: Власть народу - относительные размеры шрифтов

Bojan Mihelac

Относительные размеры шрифтов делают сайты более удобными для чтения - но польза от этого не велика, если посетители сайта не знают, как реально изменять размеры текста. В Internet Explorer, наиболее распространенном на данный момент браузере, эта возможность спрятана в одном из меню второго уровня, из-за чего изменение размера текста становится чересчур сложной задачей для многих пользователей. Эта задача намного упростится, если на страницах сайта присутствуют кнопки, позволяющие быстро изменить размер шрифта.

К сожалению, в большинстве вариантов таких кнопок игнорируются установки пользователя. В данной статье мы приводим решение, которое позволят менять размера текста, и при этом не вступает в противоречие с настройками пользователя.

CSS

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

/* размер шрифта по-умолчанию */ 

@import url(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 (более подробно эта тема раскрыта в замечательной статье Тода Фарнера (Todd Fahrner) "Размер имеет значение").

/* пример файла 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, Mozilla Firebird 0.7, Opera 7.11, IE 6 Windows, IE 5.2 Mac, и Safari 1.2. Вот и все.

Предупреждение

Не забывайте, в некоторых версиях IE есть баг, из-за которого он начинает странно себя вести, когда перед типом документа DOCTYPE идет декларация XML.

Список литературы

Для подготовки данной работы были использованы материалы с сайта http://www.webmascon.com/


© 2012 Рефераты, курсовые и дипломные работы.