Webразработка с Macromedia Studio MX
Таблицы стилей CSS в Dreamweaver
Как следует из названия, стили, содержащиеся в таблице, спускаются водопадом по всем страницам узла. Если вы представите водопад с пятью уступами, то поймете, как применяются различные уровни стилей и как каждый уровень может быть захлестнут уровнем, находящимся выше его. Стили, установленные на одном уровне таблицы, распространяются на все оставшиеся нижние уровни. Изменение, внесенное на локальном уровне, имеет приоритет перед стилями уровня страницы, которые, в свою очередь, имеют приоритет перед глобальными стилями.
Как уже говорилось, применение таблиц CSS может привести к неоднозначным последствиям ввиду наличия у пользователей разных броузеров и устаревших их версий. Текст, который отлично смотрится в Netscape, может теряться в Internet Explorer. Однако с технической точки зрения ничего плохого о CSS сказать нельзя. Например, программно управляемые страницы, содержащие множество настроек форматирования, могут значительно замедлить загрузку. Если программу вынести во внешний документ, на который указывает страница Dreamweaver MX, процесс можно ускорить. Еще одним способом экономии времени является применение изменений в масштабах всего узла. Что касается шрифтов, то параметр размера в единицах заменяется точными размерами в пиках или точках, которые используются в традиционной полиграфии. Это позволяет задать точный размер шрифта, например 1 пику или 12 точек. Размеры также можно устанавливать и в других единицах измерения (сантиметрах, дюймах, миллиметрах), но когда речь заходит о шрифтах, они могут не приниматься в расчет.
Таблица стилей — это не более чем набор правил. Например, правило можно определить как HI (color: red). Другими словами, это правило гласит, что все заголовки первого уровня должны выделяться красным цветом. В этом примере использован синтаксис CSS. Правила CSS состоят из двух частей: переключателя (HI) и определения (color: red). Переключатель указывает, какой дескриптор будет переключать стиль, а описание сообщает, каким этот стиль должен быть.
Стили CSS могут быть внедренными в HTML, а также содержаться в отдельных файлах, на которые имеется ссылка на страницах. Например, в следующем фрагменте содержится внедренная таблица стилей, которая по очевидным причинам находится перед дескриптором <Body>:
<HTML> <HEAD> <ST Type = "text/ess"> <! - HI (color: red; font-size: 24 pt; font-family: Times New Roman)
-->,
</ST>
В начале программы мы поместили атрибут стиля <ST Type="text/ess">. Старые броузеры не поймут этот дескриптор и просто "пройдут мимо". Весь фрагмент мы обрамили комментарием < ! - - -, / >. Таким образом, броузеры, которые не поддерживают CSS, не будут отображать на экране весь этот нераспознанный фрагмент.
Для того чтобы получить доступ к внешней таблице CSS, программа должна выглядеть следующим образом:
<HTML> <HEAD> <Link Rel="aCSSstylesheet" HREF="Integrationbook.css Type="text/ess"> ...
В данном случае броузер будет искать файл Integrationbook. ess и, если найдет его, будет выполнять инструкции таблицы стилей.
Увидев, как управляется CSS из программы, лучшим способом научиться использовать эти стили будет создание таблицы CSS в Dreamweaver MX. После этого можно открыть программу в любом редакторе HTML, посмотреть, как она составлена, и внести необходимые изменения. Ниже мы создадим внешнюю таблицу стилей, которая укрупняет текст, а после этого применим ее к самому тексту. Аналогичное действие можно осуществлять только с новыми стилями, внедряемыми на страницы.
1. Откройте файл Lorem.htm в папке CSS каталога Chapter 7 Exercise на Web-узле этой книги.
2. Выберите в меню Window=>Css Styles или нажмите комбинацию клавиш <Shift+Fl 1>. Откроется панель CSS Styles. Если панель CSS Styles уже открыта, выберите вкладку CSS.
3. Щелкните на кнопке New Style, и откроется диалоговое окно CSS Style. Присвойте стилю имя .bigitup. (He забудьте про точку!)
4. Установите переключатель Туре в значение Make Custom Style (class) (Рисунок 7.14). После этого установите переключатель Define In в значение New Style Sheet File. После установки переключателя в значение This Document Only стиль будет внедрен на страницу. Присвойте странице имя и не забывайте про расширение . ess.
5. После того как будет создан стиль, вам будет предложено его определить. Выберите в списке категорий значение Туре и установите следующие значения параметров.
|
Установка |
Значение |
|
Font |
Times New Roman, Times, serif |
|
Size |
14 points |
|
Style |
Oblique (это еще один вид курсива) |
|
Line Height |
Normal. Это — главный параметр. Обычно устанавливается на 1 -2 точки больше, чем размер шрифта |
|
Decoration |
Названия этих стилей оформления говорят сами за себя. В данном случае не устанавливайте их |
|
Weight |
Bold |
|
Variant |
Normal. Это — переключатель между прописными, строчными буквами и индексами |
|
Case |
Не обращайте внимание на этот параметр |
|
Color |
FF0000. Щелкните на прямоугольнике цвета, и вы сможете выбрать в палитре нужный цвет |
Если какая-то категория неприменима к странице, просто не обращайте на нее внимание.
6. Когда закончите, диалоговое окно Style Definition для файла .bigitup будет выглядеть так, как на Рисунок 7.15. Щелкните на кнопке ОК.
7. Выделите первый абзац текста и определите на панели Style стиль как .bigitup. Текст станет крупнее, приобретет красный цвет и начертание курсивом.
А сейчас будет показано, как внести локальные изменения. Мы изменим весь жирный текст на странице на начертание Bold Italic и применим к нему синий цвет.
