Работа с таблицами стилей в Dreamweaver. Создание стилей.
Вы уже много узнали о таблицах стилей. И, наверно, вас уже давно мучает вопрос: а что же Dreamweaver? Поддерживает ли он работу с таблицами стилей? И если поддерживает, то насколько? И почему автор не упомянул об этом ни слова, а все заваливал нас примерами на этом ужасном и ни капельки не понятном HTML? Неужели нам все-таки придется создавать стили вручную?!!
Успокойтесь. Все в порядке. Dreamweaver прекрасно поддерживает и внешние, и внутренние таблицы стилей и позволяет вам создавать стили, "понятные" самым последним на момент его выхода в свет Web-обозревателям. А применять созданные стили к элементам страницы вообще проще простого.
Но зачем же понадобилось столько исходного кода? Для того чтобы вы поняли, что такое таблицы стилей и как они работают. А разъяснить это проще всего на примерах, написанных на языках HTML и CSS. К тому же, знать языки HTML и CSS Web-дизайнеру совсем не вредно, наоборот, полезно. Лишние знания – багаж необременительный и зачастую оказывающийся совсем не лишним.
В этом есть, правда, еще один резон. Дело в том, что Dreamweaver не поддерживает удобное создание и присвоение элементам страницы встроенных стилей. Единственный способ создавать их – вводить вручную в мини-редакторе HTML или пользоваться диалоговым окном Tag Editor, описанным в главе 2.
Создание стилей
Перед тем как начать экспериментировать со стилями, откройте Web-страницу 1.1.htm, созданную нами в самом начале изучения Dreamweaver. Над ее содержимым мы и будем издеваться. Только пересохраните ее под именем 10.2.htm, выбрав пункт Save As в меню File или нажав комбинацию клавиш CTRL + SHIFT + S.
Вся работа со стилями протекает в панели CSS Styles Dreamweaver, показанной на рис. 10.3. Чтобы вызвать ее на экран, либо выберите в меню Window пункт CSS Styles, либо нажмите комбинацию клавиш SHIFT + F11.
Рис. 10.3. Панель CSS Styles
Чтобы создать новый стиль, выберите пункт New CSS Style контекстного или дополнительного меню либо нажмите одноименную кнопку (рис. 10.4), расположенную в правом нижнем углу панели CSS Styles. Также вы можете активизировать окно документа и выбрать пункт New style подменю CSS Styles контекстного меню или одноименный пункт одноименного подменю, находящегося в меню Text. В результате любого из этих действий на экране появится диалоговое окно New CSS Style, показанное на рис. 10.5.
Рис. 10.4. Кнопка New CSS Style
Рис. 10.5. Диалоговое окно New CSS Style