Учебник Macromedia Dreamweaver (стр. 78 из 135)
Чтобы удалить ссылку на внешнюю таблицу стилей, воспользуйтесь все той же кнопкой Remove.
Выше мы рассматривали, как можно привязать к Web-странице еще одну таблицу стилей. Это можно было сделать в диалоговом окне Edit Style Sheet. Однако это совсем не обязательно — то же самое вы можете выполнить, нажав кнопку Attach Style Sheet (рис. 10.33) в правом нижнем углу панели CSS Styles либо выбрав пункт Attach Style Sheet, расположенный в контекстном и дополнительном меню этой же панели. Также этот пункт находится в подменю CSS Styles меню Text и контекстном меню окна документа. При выборе этого пункта на экране появится диалоговое окно Select File, где вы сможете выбрать нужный файл. После нажатия кнопки Select выбранная таблица стилей будет тотчас привязана к странице.
Рис. 10.32. Содержимое внешней таблицы стилей 10.2.сss в диалоговом окне Edit Style Sheet
Рис. 10.33. КнопкаAttach Style Sheet панелиCSS Styles
Если вы считаете, что сделали удачную внутреннюю таблицу стилей, и хотите сохранить ее в отдельном файле как внешнюю (экспортировать таблицу стилей), то Dreamweaver поможет вам и в этом случае. Для этого выберите пункт Export Style Sheet, расположенный в контекстном и дополнительном меню панели CSS Styles. Также этот пункт располагается в подменю CSSStyles, находящемся в меню Text и контекстном меню окна документа. После выбора этого пункта на экране появится стандартное диалоговое окно сохранения файла Windows. Введите имя файла и нажмите кнопку сохранения.
Поддержка внутренних стилей
Вот мы и выяснили все о том, как Dreamweaver поддерживает внутренние и внешние таблицы стилей. А что же внутренние стили? А с внутренними стилями ситуация сложнее.
Дело в том, что Dreamweaver поддерживает внутренние стили не полностью. Он отображает на экране результаты их применения, но не предлагает никаких удобных инструментов для создания внутренних стилей и управления ими. По мнению автора, это самый большой и досадный его недостаток. Так что, если вы хотите привязать к какому-либо элементу страницы внутренний стиль, то вам придется править HTML-код вручную либо пользоваться диалоговым окном Tag Editor. Как это сделать?
Давайте рассмотрим работу с внутренними стилями на примере. Откроем все ту же нашу многострадальную страницу 10.2.htm, раскрасим текст заголовка в зеленый цвет, а текст, выделенный курсивом, увеличим в размерах на одну ступень. И сделаем мы это разными способами.
Сначала займемся курсивным текстом. Выделите его, щелкнув по нужной кнопке секции тегов, и выберите в контекстном меню пункт Edit Tag <название тега>. После этого выберите в списке, расположенном в левой части диалогового окна Tag Editor, пункт Style Sheet/Accessibility. Окно примет вид, показанный на рис. 10.34.
Рис. 10.34. Диалоговое окно Tag Editor (выбрана вкладка Style Sheet/Accessibility)
Собственно определение тега вводится в поле ввода Style. Введите в него текст font-size: larger. И нажмите кнопку ОК. После этого шрифт курсивного текста увеличится в размерах — наш внутренний стиль работает!
Теперь примемся за заголовок. И используем мини-редактор HTML, описанный еще в главе 2 этой книги. Конечно, можно работать в режиме отображения кода окна документа. Но мини-редактор HTML несколько удобнее, т. к. вы можете видеть одновременно и саму страницу, и нужный фрагмент кода.
Поместите текстовый курсор в текст заголовка и выберите в контекстном меню пункт Edit Tag <H1>... Результат этого действия показан на рис. 10.35.
Вставьте в тег <H1> атрибут STYLE и присвойте ему значение color: #00FF00;. Должно получиться так, как показано на рис. 10.36.
Рис. 10.35. Мини-редактор HTML, отображающий HTML-код тега <Н1>
Рис. 10.36. Измененный HTML-код в мини-редакторе HTML
Теперь закройте мини-редактор, нажав клавишу <Enter>. (Нажатие клавиши <Esc> позволит вам отменить сделанные изменения.) И посмотрите на заголовок. Он позеленел, но не от злости, а от того, что мы применили к нему встроенный стиль.
Так что вы можете создавать в Dreamweaver и встроенные стили. Однако имейте в виду, что в этом случае вам придется полагаться только на свое знание HTML и CSS — Dreamweaver почти не автоматизирует ваш труд. А узнать побольше о HTML и CSS вам помогут интерактивные руководства, поставляемые вместе с этой замечательной программой.
Таблицы стилей и шаблоны
А теперь представим такую ситуацию. Вы прочитали о замечательных возможностях таблиц стилей и решили переделать свой сайт Sample site 3 с использованием таблиц стилей. Вы задали таблицу стилей (внешнюю или внутреннюю) для шаблона, сохранили его и обновили все основанные на нем Web-страницы. Все у вас получилось, и, кажется, ничто не предвещает беды...
Но вот вы открыли одну из основанных на шаблоне страниц и решили создать для нее внутреннюю таблицу стилей, дополняющую ту, что находится в шаблоне. Но как это сделать? Ведь внутренняя таблица стилей записывается в HTML-заголовок страницы, куда, как было сказано ранее, хода нет!
Не думайте об этом! Используйте те же, уже знакомые вам, инструменты для создания новых стилей. Единственное: вы не можете переопределить
атрибуты стилей, заданные в таблице, что находится в шаблоне, иначе это вызовет неразрешимый конфликт. За исключением этого, вы полностью свободны!
Дело в том, что при создании шаблона Dreamweaver MX создает еще одну изменяемую область по имени head. Эта изначально пустая область находится в HTML-заголовке страницы, внутри тега <HEAD>. Когда вы создаете в Web-странице внутреннюю или привязываете к ней внешнюю таблицу стилей, необходимый код помещается как раз в эту область. Вы можете посмотреть HTML-код страницы, основанной на шаблоне, и убедиться в этом сами.
Временные таблицы стилей
Еще одна из новых возможностей Dreamweaver MX — это поддержка так называемых временных таблиц стилей. Временные таблицы стилей действуют не все время, а только тогда, когда вы редактируете свою Web-страницу в среде Dreamweaver (таблицы времени редактирования), но не действуют в Web-обозревателе. Другие таблицы могут, наоборот, быть отключены, когда вы редактируете страницу в Dreamweaver (таблицы времени просмотра), а действовать только в Web-обозревателе. Иногда такие таблицы стилей бывают полезны.
Как же работать с временными таблицами стилей? Очень просто!
Выберите пункт Design Time Style Sheets в контекстном или дополнительном меню панели CSS Styles. Этот пункт также доступен в подменю CSS Styles контекстного меню окна документа и меню Text. На экране появится диалоговое окно Design Time Style Sheets (рис. 10.37).
Рис. 10.37. ДиалоговоеокноDesign Time Style Sheets
В этом окне находятся два списка. В списке Show Only at Design Time перечислены таблицы стилей времени редактирования. В списке Hide at DesignTime перечислены таблицы стилей времени просмотра. Точнее, не сами таблицы стилей, а имена файлов, в которых они сохранены.
Чтобы добавить файл в один из списков, нажмите кнопку со знаком "плюс", находящуюся над ним. После этого вам останется выбрать нужный файл в диалоговом окне Select File и нажать кнопку открытия.
Чтобы удалить файл из списка, выберите его и нажмите кнопку со знаком "минус", находящуюся над списком.
После нажатия кнопки OK Dreamweaver примет ваши указания к сведению. Причем, немедленно.
Для примера вы можете открыть страницу 10.2.htm и задать в качестве таблицы времени редактирования 10.1.htm, а в качестве таблицы времени просмотра — 10.2.htm. Получившийся результат показан на рис. 10.38.
Рис. 10.38. Страница 10.2.htm, для которой были заданы временные таблицы, в окне документа Dreamweaver и в окне Web-обозревателя
Недостатки таблиц стилей и их преодоление
Настала пора поговорить о недостатках таблиц стилей. Всего их два:
· сравнительная "молодость" стандарта CSS, из-за которой его поддерживают только сравнительно новые программы Web-обозревателей, выпущенные после 1997 года;
· крайняя несовместимость между реализациями поддержки таблиц стилей в разных Web-обозревателях, в основном в старых версиях Internet Explorer и Navigator.
Теперь рассмотрим эти недостатки подробнее.
Как мы уже говорили, CSS — довольно молодой стандарт. Он был принят в 1997 году, уже после того, как многие разработчики выпустили на рынок свои программы Web-обозревателей. Конечно, наиболее популярные из них в то время — Internet Explorer и Navigator — вскорости обзавелись поддержкой недавно принятого стандарта. Но очень и очень многие программы не знали о его существовании. И такие "неграмотные" программы используются до сих пор, в частности, в США и Европе, на множестве старых компьютеров, которые там все еще в ходу.
Так какие же Web-обозреватели поддерживают таблицы стилей?
Во-первых, это, конечно, популярнейший Microsoft Internet Explorer. Полная поддержка стандарта CSS появилась в нем, начиная с версии 4.0, хотя некоторые элементы, как говорят, поддерживались еще в приснопамятной 3.0. (Помнится, эта версия принимала файлы таблиц стилей с расширением ess за видеофильмы. С чего бы это?) Версии 5.0 и 5.5 поддерживают расширенный набор атрибутов стилей, как стандартных, так и фирменных, не определенных в стандарте. Полное описание атрибутов стилей, поддерживаемых Internet Explorer, вы можете найти на сайте Microsoft для разработчиков: http://msdn.microsoft.com. Поверьте — их очень много, и среди них есть совсем уж экзотические. И Dreamweaver поддерживает далеко не все из них.