模块七使用CSS样式和行为PPT.ppt

模块七 使用CSS样式和插入行为,任务一 认识CSS样式表,要管理一个非常大的网站，使用CSS样式，可以快速格式化整个站点或多个文档中的字体、图像等网页元素的格式。并且，CSS样式可以实现多种不能用HTML样式实现的功能。执行【窗口】【CSS样式】菜单命令，打开“CSS样式”面板。CSS样式是Cascading Style Sheets(层叠样式单)的简称，也可以称为“级联样式表”，它是一种网页制作的新技术，利用它可以对网页中的文本进行精确的格式化控制。在CSS样式之前，HTML样式被广泛应用，HTML样式用于控制单个文档中某范围内文本的格式。而CSS样式与之不同，它不仅可以控制单个文档中的多个范围内文本的格式，而且可以控制多个文档中文本的格式。要管理一个非常大的网站，使用CSS样式，可以快速格式化整个站点或多个文档中的字体、图像等网页元素的格式。并且，CSS样式可以实现多种不能用HTML样式实现的功能。,任务一 认识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”。,新建CSS样式表,在作曲前面的中添加“id=”zuozhe”如图所示。,任务一 认识CSS样式表,浏览index7-1.html文件如图所示。,新建CSS样式表,任务二 管理CSS样式,链接到外部CSS样式:在“CSS 样式”面板中，单击“附加样式”按钮。编辑外部CSS样式时，链接到该CSS样式的所有文档全部更新以反映所做的编辑。可以导出文档中包含的CSS样式以创建新的CSS样式表，然后附加或链接到外部样式表以应用那里所包含的样式。,任务二 管理CSS样式,新建跟index7-1.html一样内容的index7-2-1.html文件。,子任务1 修改CSS样式,执行【窗口】【CSS样式】菜单命令，打开“CSS样式”面板如图所示。,任务二 管理CSS样式,在“CSS样式”面板选择“h2”CSS样式后单击“编辑CSS样式”按钮弹出“CSS规格定义”对话框。,子任务1 修改CSS样式,在“CSS规则定义”对话框中“类型”选择背景后“背景图像”导入“bg01.jpg”。单击“确定”按钮。,任务二 管理CSS样式,在“CSS样式”面板选择“#zuozhe”CSS样式后单击“删除CSS样式”按钮。,子任务1 修改CSS样式,在“index7-2-1.html”文件中作曲上鼠标单击后【属性】面板中“样式”下拉列表框中选择“geci”如图所示。,任务二 管理CSS样式,浏览index7-2-1.html文件如图所示。,子任务1 修改CSS样式,任务二 管理CSS样式,新建跟index7-1.html一样内容的index7-2-2.html文件如图所示。,子任务2 设置外部CSS样式,在index7-2-2.html中所有CSS样式删除。,任务二 管理CSS样式,单击“新建CSS样式”按钮弹出“新建CSS规则”对话框。,子任务2 设置外部CSS样式,在“选择器类型”中勾选“标签”单选按钮，在“标签”下拉列表框中选择“h2”，在“定义在”中勾选“新建样式表文件”单选按钮后单击“确定”按钮。弹出“保存样式表文件为”对话框如图所示。,在“文件”文本框中输入“yangshi”后单击“保存”按钮弹出“CSS规则定义”对话框。,任务二 管理CSS样式,单击“新建CSS样式”按钮弹出“新建CSS规则”对话框。,子任务2 设置外部CSS样式,在“选择器类型”中勾选“标签”单选按钮，在“标签”下拉列表框中选择“p”，在“定义在”中勾选“新建样式表文件”单选按钮后选择“yangshi.css”样式表文件，单击“确定”按钮。,任务二 管理CSS样式,p标签CSS样式规则定义后单击“确定”按钮。,子任务2 设置外部CSS样式,浏览index7-2-2.html文件如图所示。,任务二 管理CSS样式,子任务3 连接外部样式,新建index7-2-3.html文件如图所示。,执行【窗口】【CSS样式】菜单命令，打开“CSS样式”面板后单击“附加CSS样式”按钮弹出“链接外部样式文件”对话框。,任务二 管理CSS样式,子任务3 连接外部样式,在“链接外部样式文件”对话框上的单击“浏览”按钮弹出“选择样式表文件”对话框如图所示。,选择“yangshi”样式表文件后单击“确定”按钮；“链接外部样式表”对话框中浏览样式表文件后单击“确定”按钮。,任务二 管理CSS样式,子任务3 连接外部样式,浏览index7-2-3.html文件如图所示。,任务三 认识行为,行为是指在网页中进行的一系列动作，通过这些动作，可以实现用户同网页的交互，也可以通过动作使某个任务被执行。在Dreamweaver中，行为由事件和动作两个基本元素组成。通常动作是一段JavaScript代码，利用这些代码可以完成相应的任务；事件则由浏览器定义，事件可以被附加到各种页面元素上，也可以被附加到HTML标记中，并且一个事件总是针对页面元素或标记而言的。,任务三 认识行为,新建index7-3.html文件后设置“播放声音”和“弹出信息”两个鼠标单击行为，“高亮颜色”和“设置状态栏文本”两个鼠标经过行为。,使用行为,任务三 认识行为,新建index7-3.html文件如图所示。,使用行为,任务三 认识行为,执行【窗口】【行为】菜单命令，打开“行为”面板后index7-3.html上选择“播放歌曲”行。,使用行为,在“行为”面板上的单击“添加行为”按钮显示“系统内置的所有行为”如图所示。选择“播放声音”行为后鼠标单击弹出“播放声音”对话框。,任务三 认识行为,选择歌曲后单击“确定”按钮。在图上的事件改为鼠标单击事件（onClick）。,使用行为,任务三 认识行为,在index7-3.html上选择“弹出信息”行。同样的方法选择“弹出信息”行为后鼠标单击弹出“弹出信息”对话框如图所示。,使用行为,在“消息”文本框输入“欢迎光临”后单击“确定”按钮。对应的事件改为鼠标单击事件（onClick）。,任务三 认识行为,在index7-3.html上选择“高亮颜色”行。同样的方法选择“高亮颜色”行为后鼠标单击弹出“高亮颜色”对话框如图所示。,使用行为,设置好后单击“确定”按钮。对应的事件改为鼠标经过事件（onMouseOver）。,任务三 认识行为,在index7-3.html上选择“设置状态栏文本”行。同样的方法选择“设置状态栏文本”行为后鼠标单击弹出“设置状态栏文本”对话框如图所示。,使用行为,在“消息”文本框输入“大家好！”后单击“确定”按钮。对应的事件改为鼠标经过事件（onMouseOver）。,任务三 认识行为,浏览index7-3.html文件如图所示。,使用行为,任务四 常用Dreamweaver内置行为,Dreamweaver内值行为有调用 JavaScript 行为、改变属性行为、检查浏览器行为、检查插件行为、控制 Shockwave 或 Flash 行为、拖动 AP 元素行为、转到 URL 行为、跳转菜单行为、跳转菜单转到行为、打开浏览器窗口行为、播放声音行为、弹出消息行为、预先载入图像行为、设置导航栏图像行为、设置框架文本行为、设置容器的文本行为、设置状态栏文本行为、设置文本域文字行为、显示-隐藏元素行为、显示弹出菜单行为、交换图像行为、检查表单行为等等。,任务四 常用Dreamweaver内置行为,子任务1 应用交换图像行为,新建index7-4-1.html文件；执行【插入记录】【图像对象】【鼠标经过图像】弹出“插入鼠标经过图像”对话框。,浏览两个不同的图片后单击“确定”按钮。,浏览index7-4-1.html文件。,任务四 常用Dreamweaver内置行为,子任务2 应用检查浏览器行为,新建index7-4-2.html文件；选择一个对象，然后执行【行为】面板的【添加行为】【建议不再使用】【检查浏览器】弹出“检查浏览器”对话框如图所示。,单击“URL”后的“浏览”按钮弹出“选择文件”对话框；然后选择“index7-3.html”后单击“确定”按钮。,任务四 常用Dreamweaver内置行为,子任务2 应用检查浏览器行为,单击“替换URL”后的“浏览”按钮弹出“选择文件”对话框；然后选择“index7-4-1.html”后单击“确定”按钮。,单击“检查浏览器”对话框生的“确定”按钮。浏览index7-4-2.html文件。,任务四 常用Dreamweaver内置行为,子任务3 应用打开浏览器窗口行为,新建index7-4-3.html文件；选择“打开index7-1.html”，然后执行【行为】面板的【添加行为】【打开浏览器窗口】。,单击“浏览”按钮弹出“选择文件”对话框；然后选择“index7-1.html”后单击“确定”按钮。单击“打开浏览器窗口”对话框生的“确定”按钮。浏览index7-4-3.html文件。,任务四 常用Dreamweaver内置行为,子任务4 其他行为,新建index7-4-4.html文件后应用“关闭浏览器”和“改变属性”行为。,任务四 常用Dreamweaver内置行为,子任务4 其他行为,新建index7-4-4.html文件。,任务四 常用Dreamweaver内置行为,子任务4 其他行为,选择“关闭浏览器”文本；然后执行【行为】面板的【添加行为】【调用JavaScript】弹出“调用JavaScript”对话框如图所示。,在JavaScript文本框输入“window.close()”后单击“确定”按钮。,在区域中：改变属性改为：改变属性,任务四 常用Dreamweaver内置行为,子任务4 其他行为,选择“改变属性”文本，然后执行【行为】面板的【添加行为】【改变属性】弹出“改变属性”对话框如图所示。,在“元素类型”下拉列表框中选“p”，在“元素ID”下拉列表框中选“p”gaibian”,在“属性”中勾选“选择”单选按钮，在“选择”下拉列表框中选“backgroundColor”，“新的值”文本框输入“#00FF00”后单击“确定”按钮。,浏览index7-4-4.html文件。,任务五 插入JavaScript特效,JavaScript是一种基于对象和事件驱动并具有安全性的脚本语言。使用他的目的是HTML超文本标记语言一起实现在一个Web页面中与Web客户交互作用。在JavaScript运算符可分为：算术运算符，比较运算符，逻辑运算符，字符串运算符，赋值运算符。在JavaScript中主要有双目运算符和单目运算符。JavaScript是一种比较简单的编程语言，使用方法是向Web页面的HTML文件增加一个脚本，而不需要单独编译解释，当一个支持JavaScript的浏览器打开这个页面时，他会读出一个脚本并执行其命令。可以直接将JavaScript代码加入HTML中。其中表示脚本的开始，使用Language属性定义脚本语言为JavaScript，在标记与之间就可以加入JavaScript脚本。,任务五 插入JavaScript特效,子任务1 跟随鼠标的字符串,新建index7-5-1.html文件，打开代码。,步骤2的代码加入区域中。,步骤3的代码加入区域中。,把改为。,任务五 插入JavaScript特效,子任务1 跟随鼠标的字符串,浏览index7-5-1.html如图所示。,任务五 插入JavaScript特效,子任务2 时钟显示在任意指定位置,新建index7-5-2.html文件，打开代码。,步骤2的代码加入区域中。,把中的内容改为：/调用show5()函数。,任务五 插入JavaScript特效,子任务2 时钟显示在任意指定位置,浏览index7-5-2.html如图所示。,学材小结,本模块主要介绍了定义CSS样式表、如何管理CSS样式表、如何使用外部CSS样式表和行为分类、如何使用内置行为、如何使用JavaScript特效。,