Dreamweaver,CS3网页设计案例教程教学配套课件王春红王瑾瑜主编模块七使用CSS样式和行为.pdf

模块七 使用CSS样式和插入行为 任务一 认识CSS样式表 任务二 管理CSS样式 任务三 认识行为 任务四 常用Dreamweaver内置行为 任务五 插入JavaScript特效 学材小结 任务一 认识CSS样式表 • 要管理一个非常大的网站，使用CSS样式，可以快速格式化整个站点 或多个文档中的字体、图像等网页元素的格式。并且，CSS样式可以 实现多种不能用HTML样式实现的功能。 • 执行【窗口】→【CSS样式】菜单命令，打开“CSS样式”面板。 CSS 样式是Cascading Style Sheets(层叠样式单)的简称，也可以称为“级 联样式表”，它是一种网页制作的新技术，利用它可以对网页中的文 本进行精确的格式化控制。 • 在CSS样式之前，HTML样式被广泛应用，HTML样式用于控制单个 文档中某范围内文本的格式。而CSS样式与之不同，它不仅可以控制 单个文档中的多个范围内文本的格式，而且可以控制多个文档中文本 的格式。 • 要管理一个非常大的网站，使用CSS样式，可以快速格式化整个站点 或多个文档中的字体、图像等网页元素的格式。并且，CSS样式可以 实现多种不能用HTML样式实现的功能。 任务一 认识CSS样式表 新建CSS样式表 • 打开Dreamweaver CS3，新建index7-1.html文件，如图所示。 任务一 认识CSS样式表 新建CSS样式表 • 文档编辑窗口中单击鼠标右键，在弹出的快捷菜单中执行【CSS样 式】→【新建】，如图所示。弹出“新建CSS规则”对话框。 任务一 认识CSS样式表 新建CSS样式表 • 在“新建CSS规则”对话框中“选择器类型”中勾选“类（可用于任何标 签）”单选按钮，在“名称”文本框输入“geci”，在“定义在” 中勾选“对该 文档”单选按钮后单击“确定”按钮。弹出“CSS规则定义”对话框如图所 示。 任务一 认识CSS样式表 新建CSS样式表 • 在“CSS规则定义”对话框中单击“确定”按钮，现在“geci”CSS样式表设 计好了，对应的属性如图所示。 任务一 认识CSS样式表 新建CSS样式表 • 在建“h2”标签CSS样式表如图所示。 • 在“类型”中需要设置的值后如图所示，单击“确定”按钮。 任务一 认识CSS样式表 新建CSS样式表 • 在建“#zuozhe”高级CSS样式表如图所示。 • 在“类型”中需要设置的值后如图所示，单击“确定”按钮。 任务一 认识CSS样式表 新建CSS样式表 • 在“index7-1.html”文件中歌词上鼠标单击后【属性】面板中“样式”下拉 列表框中选择“geci” 。 • 在作曲前面的p中添加 “ id=”zuozhe””如图所 示。 任务一 认识CSS样式表