Два совета по применению таблиц стилей CSS в DreamWeaver
Автор：Eve Cole
Время обновления：2009-05-31 21:17:47
1. Удалите подчеркивание гиперссылки и измените цвет при наведении курсора мыши на гиперссылку:
По умолчанию гиперссылки на веб-страницах, созданных с помощью DreamWeaver, подчеркиваются, что выглядит не очень красиво. Чтобы удалить эти раздражающие подчеркивания, во многих газетах и журналах используется метод, заключающийся в ручном добавлении фрагмента кода в исходный код HTML. На самом деле, в DreamWeave можно легко удалить подчеркивания ссылок. Сначала создайте случайную ссылку в окне документов DreamWeaver. Вы можете видеть, что эта ссылка будет подчеркнута. Как убрать это подчеркивание?
1. Нажмите «Текст» | «Стили CSS» | «Редактировать таблицу стилей…» в строке меню (или нажмите сочетание клавиш Ctrl+Shift+E), чтобы открыть диалоговое окно «Редактировать таблицу стилей».
2. Нажмите «Новый», а затем в диалоговом окне «Новый стиль» нажмите кнопку «Использовать селектор CSS».
3. Введите a в поле «Селектор» и нажмите «ОК».
4. Затем появится диалоговое окно «Определение стиля CSS». В оформлении класса «Тип» установите флажок «Нет», затем нажмите «ОК», а затем нажмите «Готово». Вы сразу заметите, что подчеркивание ссылки исчезло в Окне документов. Так как же заставить ссылку менять цвет при наведении на нее курсора мыши? Повторите шаги первый и второй выше. Затем щелкните стрелку раскрывающегося списка рядом с пунктом «Селектор», выберите «a:hover» и нажмите «ОК». В появившемся диалоговом окне «Определение стиля для: наведения» выберите любой цвет в цвете класса «Тип» (например, выберите красный), затем нажмите «ОК», а затем нажмите «Готово» для завершения. Нажмите F12 для предварительного просмотра и наведите указатель мыши на ссылку. Ссылка становится красной? Если только что в диалоговом окне «Определение стиля для: hover» в классе Backgroud вы выберете зеленый цвет фона, то когда вы наведете указатель мыши на гиперссылку, ссылка не только станет красной, но и также будет зеленый фон. Фактически, с помощью диалогового окна определения стиля CSS вы также можете добиться большего количества специальных эффектов. Друзья, которые заинтересованы, возможно, захотят об этом подумать.
2. Создайте многоразовую внешнюю таблицу стилей CSS. Если после использования DreamWeaver для создания стиля CSS на определенной веб-странице вы хотите применить этот стиль к другой веб-странице, вам не придется заново создавать стиль CSS. Когда вы создаете внешний файл таблицы стилей CSS (внешнюю таблицу стилей CSS), вы можете вызывать стили в этом файле таблицы стилей по своему желанию в будущем. Чтобы облегчить управление, сначала создайте в папке, где находится сайт, новую папку с именем CSS, которая специально используется для размещения внешних файлов таблиц стилей (ее расширение — css).
1. Нажмите Ctrl+Shift+E в окне документа, чтобы открыть диалоговое окно «Редактировать таблицу стилей». 2. Нажмите «Ссылка».
3. Во всплывающем диалоговом окне «Ссылка на внешнюю таблицу стилей» нажмите «ОБЗОР» и найдите только что созданную папку CSS.
4. В столбце «Имя файла» окна «Выбор файла таблицы стилей» введите *.css (* может быть любое имя). Обратите внимание, что в настоящее время в папке CSS нет файла таблицы стилей. Новое имя. введите в поле «Имя файла» имя нового внешнего файла таблицы стилей. Например, введите title.css и нажмите «Выбрать | ОК».
5. В диалоговом окне «Редактировать таблицу стилей» будет добавлен title.css (ссылка), дважды щелкните его.
6. Во всплывающем окне «title.css» нажмите «Новый».
7. В диалоговом окне «Новый стиль» нажмите кнопку «Создать собственный стиль (класс)». 8. Введите имя в столбце «Имя», например myheadline, и нажмите «ОК».
9. В следующем диалоговом окне «Определение стиля для .myheadline в title.css» выполните различные настройки, такие как шрифт и цвет, и нажмите «ОК», когда закончите. Если вы хотите создать новый стиль, снова нажмите «Новый», повторите шаги 6, 7, 8 и 9 и, наконец, нажмите «Сохранить» | «Готово», и будет создан внешний файл таблицы стилей title.css. Все стили в title.css будут перечислены в подменю «ТЕКСТ» | «Стили CSS» в строке меню. Если вы хотите вызвать этот файл title.css на других веб-страницах, просто повторите шаги с 1 по 3, описанные выше, а затем введите title.css в столбце «Имя файла» окна «Выбрать файл таблицы стилей». Нажмите «Выбрать» | «ОК» | «Готово», все стили в title.css появятся в подменю «Текст» | «Стили CSS» в строке меню веб-страницы, и вы сможете их применить. на эту веб-страницу эти стили.
