|
|
|
Главная Скачать (Download) Dreamweaver CS6 Dreamweaver CS5 Dreamweaver CS4 Dreamweaver 8 Dreamweaver MX 2004 - Рабочая область
Dreamweaver 4- Создание/ открытие документов - Настройка сайта - Компоновка страниц с CSS - Табличный контент - Шаблоны в MX 2004 - Работа с страницами - Настройка серверных приложений - Рабочая область для динамических страниц Уроки (Tutorials) Видеоуроки new!!! Fireworks ЧаВо Документация Статьи Программы и скрипты Бесплатные шаблоны Каталог сайтов Форум Карта сайта Контакты |
Практические советы по созданию CSS в Macromedia Dreamweaver Для начала откроем в Дриме свою HTML страницу для которой нужно создать CSS. Далее откроем окно для создания CSS - Window > CSS или клавишами - Shift+F11. На приложенной ниже картинке показано это окно и что обозначают различные переключатели в нем. В самом верху видны Apply Styles (добавить стиль) и Edit Styles (редактировать стиль), но в данном начальном этапе эти переключатели вам совсем не нужны! Гораздо важнее обратить внимание на низ CSS окна, где видны значки привязки стиля (Attach Style Shits) и нового стиля (New CSS Style). Щелкнув по левому значку можно привязать к вашей HTML страницы уже готовый стиль или импортировать его... Щелкнув по значку, где виден плюс можно самому с нуля начать делать свою каскадную таблицу стилей (CSS) и поверьте мне с помощью этого волшебника Dreamweaver MX это совсем просто! Даже если вы и никогда не читали о том, как делать CSS... Итак, Вы щелкнули по New CSS Style, открылось новое окошко, где сразу следует обратить внимание на нижние переключатели - Define In (определить стиль в отдельный файл) и This Document Only (только в этот документ). Чем отличаются эти переключатели друг от друга? В первом случае (Define In) программа создаст отдельный файл с расширением .css с возможностью потом сохранить его у себя диске компьютера и потом вам надо будет закачать этот CSS файл туда где расположен ваш сайт и привязать его к вашей HTML странице. Во втором случае (This Document Only) программа автоматически внедрит стиль в вашу HTML страницу. Лично я предпочитаю вначале This Document Only, так как можно тестировать страницу у себя на компьютере и просматривать, что получается и уже потом настроив, как надо стили создать отдельный файл с расширением .css удалив из кода внедренный стиль... Идем дальше! Я бы вначале вам рекомендовал задать стили отдельным HTML тегам и для этого надо щелкнуть на Redefine HTML Tag (пересмотреть HTML теги). Возникает вопрос - почему? К примеру я задал тегу <body> цвет фона страницы, а тегу <blockquote> размер и цвет шрифта, который будет обозначать какие-то важные абзацы в тексте страницы... Теги можно выбирать открыв список тегов в самом верху. Тут только не надо переусердствовать Ладно, после того, как задали значения отдельным HTML тегам, можно теперь создать стили для меню или отдельных таблиц вашей страницы. Если к тому времени Вы не дали имени вашему стилю, то щелкнув по Use CSS Selector (использовать CSS селектор) можно выбрать готовые уже стили, которые обычно задают значения для ссылок на вашей странице - link (неактивная ссылка), visited (посещенная ссылка), hover (при наведении), active (активная ссылка). Если Вы задали ранее имя вашему стилю, то щелкнув по Make Custom Style (class) тут же откроется окно в котором можно выбрать для вашего стиля нужные значения. Перечислю самые нужные, которые обычно применяют - шрифт (Type), цветовой фон (Background), рамки (Border). Что бы не делать это краткий обзор слишком утомительным не буду рассказывать подробно про все нюансы. Скажу лишь о самом часто применяемом на мой взгляд значении в CSS - Border. Тут можно задать границы для таблицы или ячейки совершенно не применяя графику! Это очень важно, так как очень облегчает вес вашей страницы и естественно она быстрее грузится с вытекающими отсюда последствиями... Можно задавать стиль (Style) границ для верхней части таблицы или ячейки - Top, правой - Right, низа Bottom и левой стороны - Left. Кроме этого ширину (Width) границы и цвет (Color). Стилей можно создать несколько, к примеру один для таблицы с меню, а другой для для таблицы с новостями... Добавлять в код стили можно очень просто! Выделите нужный вам тег, а потом щелкните по вашему созданному стилю в окне CSS. В приложенной ниже картинке я выделил тег <table>. И смотрите на следующей картинке, как будет выглядеть это тег, после того, как к нему будет привязан ваш стиль. В данном случае мой стиль имеет название unnamed1 в коде же это будет прописано вот так - <table width="100%" border="0" cellpadding="3" cellspacing="0" class="unnamed1"> Не забывайте, что переключившись с Apply Styles (добавить стиль) на Edit Styles (редактировать стиль) в окне стилей можно тут же и редактировать ваши стили... Автор - sandro
Реклама |
|
я обычно задаю стили кроме вышеуказанных еще и таким тегам, как <b> или еще <table>, если вдруг надо задать отличительный цвет таблицам... 
