|
Главная Скачать (Download) Dreamweaver CS6 Dreamweaver CS5 Dreamweaver CS4 Dreamweaver 8 Dreamweaver MX 2004 - Рабочая область
Dreamweaver 4- Создание/ открытие документов - Настройка сайта - Компоновка страниц с CSS - Табличный контент - Шаблоны в MX 2004 - Работа с страницами - Настройка серверных приложений - Рабочая область для динамических страниц Уроки (Tutorials) Видеоуроки new!!! Fireworks ЧаВо Документация Статьи Программы и скрипты Бесплатные шаблоны Каталог сайтов Форум Карта сайта Контакты |
Относительные размеры шрифтов Относительные размеры шрифтов делают сайты более удобными для чтения - но польза от этого не велика, если посетители сайта не знают, как реально изменять размеры текста. В 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 } Получившиеся файлы можно посмотреть по данным ссылкам:
Теперь давайте создадим 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--" /> Теперь добавим в нашу HTML-страницу переключатель таблиц стилей, взятый из статьи "
<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> Вот Не забывайте, в некоторых версиях IE есть баг, из-за которого он начинает странно себя вести, когда перед типом документа DOCTYPE идет декларация XML. Автор: Bojan Mihelac
Реклама |
|
|