dreamweaver cs3网页制作 第五章

5.1 创建CSS样式

“CSS样式”的含义

CSS即层叠样式表，是一种格式化网页的标准方式，它通过设置CSS属性使网页元素对象获得不同的效果。 打开“CSS样式”面板

①选择“窗口→CSS样式”命令 ②按Shift+F11键

③单击属性面板上的“CSS”按钮 “CSS样式”面板

“附加样式表”：用来选择要链接或导入的外部样式表文件。 “新建CSS规则”：用来创建新的CSS样式。 “编辑样式”：打开样式表编辑对话框，对当前选中的CSS样式进行编辑。 “删除CSS属性”：删除选定的样式或属性，并从它所应用于的所有元素中删除格式设置。

使用“CSS样式”面板创建CSS样式

打开“CSS样式”面板----单击“新建CSS规则”按钮-----选择CSS样式的类型----- -----选择定义样式的位置-----设置CSS样式的属性------完成样式的创建

“新建CSS规则”对话框

CSS样式的类型

类：创建类属性应用于文本范围或文本块的自定义样式 标签:重新定义特定HTML标签的默认格式设置

高级:为具体某个标签组合或所有包含特定Id属性的标签定义格式设置,默认的“选择器”列表中包括a:active、a:hover、a:link 和 a:visited

定义样式的位置

样式表文件名：将新建的样式添加到该样式表中 新建样式表文件：创建外部样式表

仅对该文档：在当前文档中嵌入样式，不生成新的样式表文件

定义CSS样式的属性

（1）定义CSS样式“类型”属性

“行高”：设置文本所在行的高度，选择“正常”时自动计算字体大小的行高，或输入一个确切的值。 “修饰”：向文本添加下划线、上划线、删除线或使文本闪烁。 （2）定义CSS样式“背景”属性

“背景颜色”和“背景图像”：给选定的对象添加背景颜色和背景图像。 “重复”：设置背景图像的重复方式。 “附件”：设置图像是固定在原始位置还是随内容一起滚动。 （3）定义CSS样式“区块”属性

“单词间距”和“字母间距”：设置单词和字母的间距，选择“值”后可输入数值，并在右边的列表框中选择单位。 “垂直对齐”：设置选中对象相对于上级对象或所在行垂直方向的对齐方式。 “文本对齐”：设置首行文字在对象中的对齐方式。 （4）定义CSS样式“方框”属性

“填充”：指定元素内容与元素边框之间的间距。取消选择“全部相同”选项可设置元素各个边的填充。 “边距”：指定一个元素的边框与另一个元素之间的间距。 （5）定义CSS样式“边框”属性

“样式”：设置边框的样式外观。样式的显示方式取决于浏览器，Dreamweaver 在“文档”窗口中将所有样式呈现为实线。 “宽度”：设置元素边框的粗细。 “颜色”：设置边框的颜色。可分别设置每条边的颜色，但显示方式取决于浏览器。 （6）定义CSS样式“列表”属性

“类型”：设置列表的标记。 “项目符号图像”：为项目符号指定自定义图像。 “位置”：设置列表标记的缩进方式。

（7）定义CSS样式“定位”属性

“类型”：设置对象的位置。 “显示”：设置对象的可见性，包括“继承”、“可见”和“隐藏”。 “Z轴”：设置对象的层叠顺序，包括“自动”和“值”两个选项，值越大，越靠上显示。 “溢出”：设置内容超出容器时的处理方式。 “定位”：设置放置对象的容器大小和位置。 “剪辑”：定义内容的可见区域。 （8）定义CSS样式“扩展”属性

“分页”：设置打印时在样式所控制的对象之前或之后强行分页。 “光标”：设置当指针位于样式所控制的对象上时改变指针图像。 “过滤器”：对样式所控制的对象应用特殊效果。

5.2 应用CSS样式

编辑CSS样式

选择“窗口→CSS样式”命令，打开“CSS样式”面板，选择要编辑的CSS样式，执行以下操作： ①双击要编辑的样式名称

②在“CSS样式”面板的“属性”窗格中编辑 ③单击“CSS样式”面板右下方的“编辑样式”

应用CSS类样式

①选中要应用CSS样式的对象，在“CSS样式”面板中右单击样式名称，在弹出的快捷菜单中选择“套用”命令。 ②对于文本对象，也可以选中文本后，在其“属性”面板的“样式”下拉列表中选择需要的样式名称。

③对于图像、Flash动画、表格等页面对象，可在选中这些对象后，在“属性”面板的“类”下拉列表中选择需要的样式名称。 提示

对于“标签”和“高级”样式，样式定义后将直接被应用到页面中相应的对象中，而“类”样式则必须选择对象并应用后才会生效。

从选定内容删除类样式

选择对象---在“样式”或“类”中选择“无” 删除CSS样式

选择对象--单击“删除样式”或按Del键 重命名CSS样式

选择对象---右单击→“重命名类” 链接外部CSS样式表

“附加样式表”--“浏览”或直接在“文件/URL”框中键入该样式表的路径 提示

创建类样式时，样式名称必须以句点开头，并且可以包含任何字母和数字组合。 样式被编辑修改后，将会自动更新应用该样式的对象。

样式被删除后，应用于该样式的所有对象也将去除所套用的格式。

5.3 添加行为

“行为”的概念

行为是Dreamweaver CS3预置的JavaScript程序库。每个行为包括一个动作和一个事件。

事件是指引发动作产生的条件，即触发动态效果的原因，例如鼠标移到某对象上、单击某对象等。

动作是指事件发生后计算机系统执行的一个动作，即最终完成的动态效果，例如打开浏览器窗口、弹出信息、播放声音等。 “行为”面板

①选择“窗口→行为”命令 ②按Shift+F4快捷键

添加行为

选择添加的对象----打开行为面板----单击“添加行为”-----在弹出菜单中选择动作---- -----设置动作参数-----在“事件”列表中选择事件 更改或删除行为

选择对象--打开行为面板