129. Откройте index.htm. Убедитесь, что в правой части страницы есть раздел Traveler’s Journal. Раздел Traveler’s Journal состоит из трех частей: заголовка, имени автора и текста статьи. Заголовок заключен в теги заголовка, а текст статьи размечен тегами <p>, – так что в обоих случаях HTML-разметка отображает содержимое достаточно хорошо. Имя автора не так просто отнести к какой-то категории. Оно выделено с помощью полужирного начертания с использованием тега <strong>. Однако выделяется имя не потому, что оно является более значимым или информативным, чем остальной текст, а оттого, что выполняет другую функцию – содержит сведения об авторе. Поскольку в HTML не существует тега <author_byline>, здесь как нельзя лучше подойдет пользовательский стиль.
130. Нажмите кнопку New CSS Style. В разделе Selector Type укажите Class и убедитесь, что в группе переключателей Define in выбран файл enisey.css. В поле Name введите .author. Нажмите OK.
131. Установите значение параметра Weight — bold, Color — #00CC66, и нажмите OK.
Элемент, к которому прикреплен этот стиль (названный .author), будет просто выделяться при помощи полужирного начертания (в данном случае элементом является тег <p>).
Точка перед именем класса означает, что стиль не переопределяет все теги <p> (или другие теги, к которым он применяется), а определяет подчиненность стиля HTML-тегу. На практике это позволяет определить внешний вид некоторых тегов <p>. В данном случае требуется именно эта особенность, поскольку только отдельные абзацы предназначены для ввода сведений об авторе.
Другое преимущество пользовательских стилей заключается в том, что они применяются к различным элементам HTML. Например, класс .author можно применить не только к тегам <p>, но и к тегам <span> или <div>.
В этом случае нет необходимости определять другую информацию, например, шрифт или его размер, поскольку она уже указана в родительском теге (в данном случае, в тегах <td> и <body>). Так что все, что требуется от стиля, – наследовать всю информацию о внешнем виде и выделять текст с помощью полужирного начертания.
132. Создайте новый класс с именем .navhead со следующими параметрами: Size — 12 points; Weight — bold; Color — #505748. Этот стиль будет применен к заголовку, расположенному вверху навигационной панели в левом столбце файла index.htm.
133. Создайте новый класс .caption с единственным параметром Style — italic.
Этот стиль будет использоваться для всех подписей к изображениям на сайте. На данный момент они отформатированы при помощи тегов <em>. Большинство браузеров выделяет текст, помещенный между этими тегами, курсивом. И снова .caption описывает содержимое лучше, чем тег <em>, и создание этого стиля позволит управлять внешним видом всех подписей на сайте.
К этому моменту на панели CSS Styles (CSS-стили) должно присутствовать девять стилей.
134. В документе index.htm щелкните в любом месте текста Изучите сайт вверху навигационной панели. Щелкните МП на теге <strong> в селекторе тегов, а затем в контекстном меню выберите пункт Remove Tag. Это действие удалит из кода тег <strong>, не уничтожая содержимое документа. Он больше не нужен, поскольку созданный ранее класс .navhead уже имеет встроенный параметр bold. Следует убедиться, что при щелчке указатель мыши наведен на селектор тегов, а не на текст страницы.
135. В селекторе тегов щелкните на теге <p>, а затем в раскрывающемся списке Style на панели Property Inspector выберите пункт navhead. Заголовок будет обновлен не только в режиме Design, – новый стиль отобразится и в исходном коде, и в самом селекторе тегов.
136. Удалить теги <em> , расположенные вокруг подписи к фотографии с изображением буддистского храма в Японии. После чего примените к абзацу класс .caption.
При использовании режима Design никаких изменений вы не увидите, поскольку удаляемый тег <em> выделяет текст при помощи курсивного начертания, а применение прикрепляемого стиля .caption приводит к такому же результату. Изменения отобразятся в селекторе тегов и в исходном коде.
137. Удалите теги <strong> вокруг имени автора Виолетта Касс и прикрепите к этому абзацу класс .author. Внешний вид страницы снова изменится, и класс отобразится в селекторе тегов и в исходном коде.
138. Сохраните и закройте index.htm. Работа над оформлением страницы index.htm закончена. Все изменения, вносимые на страницу с этого момента, будут влиять на ее содержимое и функциональное назначение, но не на дизайн.
139. Поочередно откройте файлы about.htm и contact.htm и у всех подписей к изображениям замените теги <em> классом .caption. Сохраните и закройте обе страницы.