Dreamweaver MX 2004 CSS概述

css|dreamweaver

· 一.CSS概述

  如今网页的排版格式越来越复杂,很多效果需要通过CSS来实现,Dreamweaver MX 2004在CSS功能设计上做了很大的改进。今天给大家具体谈谈如何使用Dreamweaver MX 2004 CSS功能,我相信当你看完这个教程之后你会觉得CSS使用是那样的简单,而创作出来的效果却是惊人的。

  现代网页制作离不开 CSS技术,采用CSS技术,可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。 用CSS不仅可以做出美观工整令浏览者赏心悦目的网页,还能给网页添加许多神奇的效果。

  创建CSS样式表的过程,就是对各种CSS属性的设置过程,所以了解和掌握属性设置非常重要。在DW MX 2004的CSS样式里包含了W3C规范定义的所有CSS1的属性,把这些属性分为:类型、背景、区块、方框、边框、列表、定位、扩展等八个部分,如下图:


图片较大 请放大后查看

  DW MX 2004 实现CSS属性设置功能是完全可视化的,无需编写代码。下面我们分别详细讲解。 为了便于理解,从开始创建新的 CSS 样式表说起:

  【创建新的 CSS 样式】

  将插入点放在文档中,然后执行以下操作之一打开“新建 CSS 样式”对话框:

  在“CSS 样式”面板(“窗口”>“CSS 样式”)中,单击面板右下角区域中的“新建 CSS 样式”按钮,如下图:

  在文本属性检查器中,从“样式”弹出式菜单中选择“管理样式”,然后在出现的对话框中单击“新建”。

  在“相关 CSS”选项卡(选择“窗口”>“标签检查器”,然后单击“相关 CSS”选项卡)中右键单击,然后从上下文菜单中选择“新建规则”。

  选择“文本”菜单>“CSS 样式”>“新建(N)…”。

  “新建 CSS 样式”对话框随即出现,如下图:

  定义您要创建的 CSS 样式的类型:

  若要创建可作为 class 属性应用于文本范围或文本块的自定义样式,请选择“创建自定义样式 (Class)”,然后在“名称”文本框中输入样式名称。

  注意:类名称必须以句点开头,并且可以包含任何字母和数字组合(例如,.mycss)。如果您没有输入开头的句点,DW MX 2004将自动为您输入。

  若要重定义特定 HTML 标签的默认格式,请选择“重定义标签”,然后在“标签”字段中输入一个 HTML 标签,或从弹出式菜单中选择一个标签。

  若要为具体某个标签组合或所有包含特定 Id 属性的标签定义格式,请选择“使用 CSS 选择器”,然后在“选择器”文本框中输入一个或多个 HTML 标签,或从弹出式菜单中选择一个标签。弹出式菜单中提供的选择器(称作伪类选择器)包括 a:active、a:hover、a:link 和 a:visited。

  选择定义样式的位置:

  若要创建外部样式表,请选择“新建样式表文件”。

  若要在当前文档中嵌入样式,请选择“仅对该文档”。

  单击“确定”。

时间: 2024-10-29 07:21:07

Dreamweaver MX 2004 CSS概述的相关文章

Dreamweaver MX 2004 CSS使用教程概述

css|dreamweaver|教程 本站原创内容,转载请注明出处网页教学网. 一.CSS概述 如今网页的排版格式越来越复杂,很多效果需要通过CSS来实现,Dreamweaver MX 2004在CSS功能设计上做了很大的改进.今天给大家具体谈谈如何使用Dreamweaver MX 2004 CSS功能,我相信当你看完这个教程之后你会觉得CSS使用是那样的简单,而创作出来的效果却是惊人的. 现代网页制作离不开 CSS技术,采用CSS技术,可以有效地对页面的布局.字体.颜色.背景和其它效果实现更加

Dreamweaver MX 2004 CSS使用教程

css|dreamweaver|教程 1.Dreamweaver MX 2004 CSS使用教程之滤镜介绍2 [2005-03-06]     2.Dreamweaver MX 2004 CSS使用教程之CSS滤镜介绍 [2005-03-06]     3.Dreamweaver MX 2004 CSS使用教程之CSS扩展属性 [2005-03-06]     4.Dreamweaver MX 2004 CSS使用教程之CSS定位属性 [2005-03-06]     5.Dreamweaver

Dreamweaver MX 2004 行为概述

dreamweaver · 行为概述 Dreamweaver MX 2004已经成为网页设计者的良好的设计工具,我们在使用过程中你注意到它提供的行为功能了吗?今天在这里我给大家介绍一下其中的行为的使用. Dreamweaver MX 2004提供了丰富的行为,这些行为的设置为网页对象添加一些动态效果和简单的交互功能,为使那些不熟悉JavaScript或VBScript的网页设计师可以方便的设计出通过复杂的JavaScript或VBScript语言才能实现的功能.如果熟悉JavaScript或VB

Dreamweaver MX 2004 CSS边框属性

css|dreamweaver 六.定义 CSS 样式边框属性 使用"CSS 样式定义"对话框的"边框"类别可以定义元素周围的边框的设置(如宽度.颜色和样式). 设置边框样式:在"CSS 样式定义"对话框中,选择"边框"(如下图),然后设置所需的样式属性. (图片较大 请放大后查看) 请注意:下列任意属性如果您认为不重要可以保留为空. 样式:设置边框的样式外观.样式的显示方式取决于浏览器.DW MX 2004在"文档

Dreamweaver MX 2004 CSS方框属性

css|dreamweaver 五.定义 CSS 样式方框属性 使用"CSS 样式定义"对话框的方框(又称盒子)类别可以为控制元素在页面上的放置方式的标签和属性定义设置.可以在应用填充和边距设置时将设置应用于元素的各个边,也可以使用"全部相同"设置将相同的设置应用于元素的所有边. 定义元素在页面上的放置方式:在"CSS 样式定义"对话框中,选择"方框"(如下图),然后设置所需的样式属性. (图片较大 请放大后查看) 如果不设置

Dreamweaver MX 2004 CSS使用教程之CSS类型属性

css|dreamweaver|教程 本站原创内容,转载请注明出处网页教学网. 二.定义CSS的类型属性 使用"CSS 样式定义"对话框中的"类型"类别可以定义 CSS 样式的基本字体和类型设置. 定义 CSS 样式的类型设置: 在"CSS 样式定义"对话框中,选择"类型"(如下图),然后设置所需的样式属性. 以下属性如果不设置可以保留为空. 字体:为样式设置字体.DW MX 2004内置6个系列的英文字体(如下图). 一般英

Dreamweaver MX 2004 CSS使用教程之滤镜介绍2

css|dreamweaver|教程|滤镜 本站原创内容,转载请注明出处网页教学网. 十一.CSS 滤境的详细介绍2 GLOW 属性 [glow属性]对象应用glow 滤镜后,这个对象的边缘就会产生类似发光的效果,这种效果在图像处理软件中做起来比较麻烦,而在DW MX 2004中用CSS的"glow"滤镜来制作却是很简单,而且节约不少字节. "glow"滤镜只有两个参数,一个是"color"是指定发光的颜色,另一个参数是 "streng

Dreamweaver MX 2004 CSS使用教程之CSS扩展属性

css|dreamweaver|教程 本站原创内容,转载请注明出处网页教学网. 九.定义 CSS 样式扩展属性 "扩展"样式属性包括过滤器.分页和光标选项,它们中的大部分效果仅受 Internet Explorer 4.0 和更高版本的支持. 指定扩展属性:在"CSS 样式定义"对话框中,选择"扩展"(如下图),然后设置所需的样式属性. 分页:在打印期间在样式所控制的对象之前或者之后强行分页.选择要在弹出式菜单中设置的选项.此选项不受任何 4.0

Dreamweaver MX 2004 CSS使用教程之边框属性

css|dreamweaver|教程 本站原创内容,转载请注明出处网页教学网. 六.定义 CSS 样式边框属性 使用"CSS 样式定义"对话框的"边框"类别可以定义元素周围的边框的设置(如宽度.颜色和样式). 设置边框样式:在"CSS 样式定义"对话框中,选择"边框"(如下图),然后设置所需的样式属性. 请注意:下列任意属性如果您认为不重要可以保留为空. 样式:设置边框的样式外观.样式的显示方式取决于浏览器.DW MX 200