Rambler's Top100
, : |

! : http://dreamweaver.net.ru/new-forum/

| FAQ | | |

Практические советы по созданию CSS в Дриме...

 
  ,         .     ,        .     Форум Macromedia Dreamweaver -> Советы
 
sandro
Модератор

Модератор


: 53

: 21.08.2004
: 95

: 11, 2005 8:38 am     : Практические советы по созданию CSS в Дриме...

Для начала откроем в Дриме свою HTML страницу для которой нужно создать CSS. Далее откроем окно для создания CSS - Window > CSS или клавишами - Shift+F11.
На приложенной ниже картинке показано это окно и что обозначают различные переключатели в нем.
[img:6b2d188d8a]http://protichka.ru/image_1/css-1.gif[/img:6b2d188d8a]
В самом верху видны Apply Styles (добавить стиль) и Edit Styles (редактировать стиль), но в данном начальном этапе эти переключатели вам совсем не нужны! Гораздо важнее обратить внимание на низ CSS окна, где видны значки привязки стиля (Attach Style Shits) и нового стиля (New CSS Style).
Щелкнув по левому значку можно привязать к вашей HTML страницы уже готовый стиль или импортировать его...
Щелкнув по значку, где виден плюс можно самому с нуля начать делать свою каскадную таблицу стилей (CSS) и поверьте мне с помощью этого волшебника Dreamweaver MX это совсем просто! Даже если вы и никогда не читали о том, как делать CSS...
Итак, Вы щелкнули по New CSS Style, открылось новое окошко, где сразу следует обратить внимание на нижние переключатели - Define In (определить стиль в отдельный файл) и This Document Only (только в этот документ). Чем отличаются эти переключатели друг от друга?
[img:6b2d188d8a]http://protichka.ru/image_1/css-2.gif[/img:6b2d188d8a]
В первом случае (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>.
[img:6b2d188d8a]http://protichka.ru/image_1/css-3.gif[/img:6b2d188d8a]
И смотрите на следующей картинке, как будет выглядеть это тег, после того, как к нему будет привязан ваш стиль. В данном случае мой стиль имеет название unnamed1 в коде же это будет прописано вот так - <table width="100%" border="0" cellpadding="3" cellspacing="0" class="unnamed1">
[img:6b2d188d8a]http://protichka.ru/image_1/css-4.gif[/img:6b2d188d8a]
Не забывайте, что переключившись с Apply Styles (добавить стиль) на Edit Styles (редактировать стиль) в окне стилей можно тут же и редактировать ваши стили...
admin
Администратор

Администратор


: 40

: 10.08.2004
: 1717
: Ukraine

: 13, 2005 6:34 am     :

С разрешения автора разместил этот урок в разделе [url=http://dreamweaver.net.ru/tutorials/css.php]"Уроки (Tutorials) по Macromedia Dreamweaver"[/url].
Денис
Модератор

Модератор


: 42

: 21.08.2004
: 1490
: Санкт-Петербург

: 14, 2005 7:34 pm     :

sandro, как всегда - на высоте... Так держать!
Timur
Новичок

Новичок


: 33

: 01.07.2006
: 1

: 01, 2006 11:59 pm     :

Приветы всем.
Помогите плз.
Как в дриме сделать так, чтобы ссылке, скажем в тексте, отличались по цвету, от общих ссылок?
Заранее спасибо.
OldFornit
Модератор

Модератор


: 36

: 12.05.2005
: 846

: 02, 2006 2:07 pm     :

Timur ():
Приветы всем.
Помогите плз.
Как в дриме сделать так, чтобы ссылке, скажем в тексте, отличались по цвету, от общих ссылок?
Заранее спасибо.

1. Читайте правила. Рекомендую задать вопрос в соответствующем разделе.
2. Тема уже неоднократно обсуждалась. Подсказка - использовать классы.
:   
  ,         .     ,        .     Форум Macromedia Dreamweaver -> Советы : GMT + 2
1 1

 


Powered by phpBB © 2001, 2005 phpBB Group
phpBB


/ : 136342 / 0

Rambler's Top100 @Mail.ru