Rambler's Top100
Главная
Скачать (Download)
Dreamweaver CS6
Dreamweaver CS5
Dreamweaver CS4
Dreamweaver 8
Dreamweaver MX 2004
Dreamweaver 4
Уроки (Tutorials)
Видеоуроки new!!!

Fireworks
ЧаВо
Документация
Статьи
Программы и скрипты
Бесплатные шаблоны
Каталог сайтов
Форум
Карта сайта
Контакты

http://www.luxuriamoda.ru/ летние платья интернет магазин с доставкой.

Уроки - Создание гостевой книги в Macromedia Dreamweaver
[1 2 3 4 5 6 7 8]

- Создание CSS

- Создание статической страницы
[1 2]

- Создание выпадающего меню

- Редактирование кода
[1 2]


главная > уроки >

Практические советы по созданию 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> размер и цвет шрифта, который будет обозначать какие-то важные абзацы в тексте страницы... Теги можно выбирать открыв список тегов в самом верху. Тут только не надо переусердствовать Smile я обычно задаю стили кроме вышеуказанных еще и таким тегам, как <b> или еще <table>, если вдруг надо задать отличительный цвет таблицам...

Ладно, после того, как задали значения отдельным 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
Источник - fire-mx.narod.ru

главная > уроки >

Реклама

Простой конкурс с денежными призами!



Вакансии ткс в пензе vacuum-press.ru.

Rambler's Top100 Рейтинг@Mail.ru