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

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,模块七 使用,CSS,样式和插入行为,任务四 常用,Dreamweaver,内置行为,任务一 认识,CSS,样式表,任务二 管理,CSS,样式,任务三 认识行为,学材小结,任务五,插入,JavaScript,特效,任务一 认识,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-21.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,特效。,