114. Откройте файл index.htm и выполните Window, CSS Styles, чтобы открыть справа панель CSS Styles (если панель не открыта).
115. Щелкните на кнопке New CSS Style, в разделе Selector Type выберите Tag, в разделе Define in — New Style Sheet File, в списке Tag укажите элемент body. Нажмите OK.
На этом шаге проводится подготовка к переопределению тега <body>. Для этого программа Dreamweaver должна определить, что создаваемый стиль переопределяет HTML-тег и не является пользовательским. Группа переключателей Define in позволяет определить место хранения стиля: только в файле index.htm (если активен переключатель This document only) или во внешней таблице стилей (при активной опции New Style Sheet File).
Преимущество хранения стилей во внешней таблице заключается в том, что несколько страниц сайта могут ссылаться на один и тот же файл. Это означает, что изменение, внесенное во внешний файл, повлияет на все страницы, которые на него ссылаются.
116. В диалоговом окне Save Style Sheet File As убедитесь, что открыта папка enisey и создайте новую папку с именем css. Дважды щелкните на новой папке, чтобы открыть ее. Назовите файл enisey.css и нажмите Save.
117. В списке Font категории Type выберите Verdana, Arial, Helvetica, sans-serif, а в списке Size — 10 points (но не pixels!). Нажмите OK.
Теперь следует задать настройки по умолчанию для всего текста на странице. Как внешний вид текста может определяться стилем тега <body>, если текст находится внутри других наборов тегов, например, <p> или <h1>? Благодаря механизму наследования (inheritance) . Теги, вложенные внутрь других тегов, наследуют (теоретически) стили своих родительских тегов. Поскольку все содержимое страницы расположено внутри тега <body>, оно должно наследовать информацию о стилях CSS, заданных для этого тега.
Означает ли это, что текст, размещенный внутри тега <h1>, будет отформатирован шрифтом Verdana с размером 10 пунктов? Нет, поскольку по умолчанию браузеры имеют свои инструкции для форматирования тега <h1>. Если эти инструкции конфликтуют со стилем тега <body>, они перекрывают его. Конфликты форматирования решаются за счет приоритетности стилей. Как правило, чем ближе к тексту расположен тег, тем больший вес имеют его атрибуты форматирования. Поскольку содержимое элемента <h1> ближе к тегам <h1>, чем к тегу <body>, форматирование тега <h1> является более приоритетным.
118. Щелкните на кнопке New CSS Style, выберите Tag, в разделе Define in выберите enisey.css. В списке Tag выберите td и нажмите OK.
119. В меню Font выберите Verdana, Arial, Helvetica, sans serif, в списке Size укажите 10 points. Нажмите OK.
В Dreamweaver изменение не будет заметно, однако устаревшие версии браузеров будут правильно отображать размер. В Netscape 4.x, например, текст внутри тега <td>, по какой-то странной причине, не наследует форматирование, определенное для тега <body>. Это, разумеется, ошибка. Этот шаг позволяет устранить ее.
120. Сохраните и закройте index.htm. Откройте файл tours.htm. Этот документ имеет более сложную структуру и содержит теги <h1>, <h2>, <h3> и несколько элементов <a>.
121. На панели CSS Styles нажмите Attach Style Sheet (Присоединить таблицу стилей), после чего выберите enisey.css, расположенный в папке css, и нажмите Open. Убедитесь, что выбран вариант Add as Link и нажмите OK.
Прежде чем приступить к определению новых стилей, следует присоединить к странице уже созданную таблицу стилей. В противном случае, будет создана вторая таблица стилей, а нужна одна таблица, на которую будут ссылаться все файлы сайта.
122. В итоге, весь текст на странице станет отображаться шрифтом Verdana, размер обычного текста будет равен 10 пунктам. Эти изменения свидетельствуют о том, что таблица стилей присоединена и применена. Однако заголовки выглядят не очень эффектно, так что стоит сделать их цветными.
123. Нажмите кнопку New CSS Style. Переопределить элемент h1 в таблице enisey.css, установив: Size — 18 points; Weight— bold; Color — #33CC33. Нажмите OK. Нажмите F12. Должен измениться заголовок.
124. Переопределите тег <h2> при помощи настроек: Size — 16 points; Weight — bold; Color — #646482. Нажмите F12. Названия континентов на странице станут темно-фиолетовыми.
125. Переопределите тег <h3> при помощи параметров: Size — 14 points; Weight — bold. Эта настройка изменит внешний вид названий путешествий на странице tours.htm. Различия будут небольшими.
126. Переопределите тег <a> при помощи : Decoration — underline (подчеркнутое); Color — #447832. Нажмите F12.
127. Сохраните и закройте tours.htm.
Итак, переопределение всех HTML-тегов, использованных на сайте, завершено. Теперь прикрепим таблицу стилей enisey.css ко всем оставшимся страницам.
128. Поочередно откройте страницы about.htm, contact.htm и profiles.htm и воспользуйтесь кнопкой Attach Style Sheet, расположенной на панели CSS Styles, чтобы прикрепить таблицу стилей enisey.css к каждой из этих страниц. Просмотрите содержимое всех страниц, чтобы убедиться, что стили действительно применены (кнопка F12).