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

《模块七 使用CSS样式和行为PPT.ppt》由会员分享，可在线阅读，更多相关《模块七 使用CSS样式和行为PPT.ppt（47页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、模块七模块七 使用使用CSS样式和插入行为样式和插入行为任务四任务四 常用常用Dreamweaver内置行为内置行为任务一任务一 认识认识CSS样式表样式表任务二任务二 管理管理CSS样式样式 任务三任务三 认识行为认识行为学材小结学材小结任务五任务五 插入插入JavaScript特效特效 任务一任务一 认识认识CSS样式表样式表要管理一个非常大的网站，使用CSS样式，可以快速格式化整个站点或多个文档中的字体、图像等网页元素的格式。并且，CSS样式可以实现多种不能用HTML样式实现的功能。执行【窗口】【CSS样式】菜单命令，打开“CSS样式”面板。CSS样式是Cascading Style S

2、heets(层叠样式单)的简称，也可以称为“级联样式表”，它是一种网页制作的新技术，利用它可以对网页中的文本进行精确的格式化控制。在CSS样式之前，HTML样式被广泛应用，HTML样式用于控制单个文档中某范围内文本的格式。而CSS样式与之不同，它不仅可以控制单个文档中的多个范围内文本的格式，而且可以控制多个文档中文本的格式。要管理一个非常大的网站，使用CSS样式，可以快速格式化整个站点或多个文档中的字体、图像等网页元素的格式。并且，CSS样式可以实现多种不能用HTML样式实现的功能。任务一任务一 认识认识CSS样式表样式表打开Dreamweaver CS3，新建index7-1.html文件，

3、如图所示。新建新建CSSCSS样式表样式表任务一任务一 认识认识CSS样式表样式表文档编辑窗口中单击鼠标右键，在弹出的快捷菜单中执行【CSS样式】【新建】，如图所示。弹出“新建CSS规则”对话框。新建新建CSSCSS样式表样式表任务一任务一 认识认识CSS样式表样式表在“新建CSS规则”对话框中“选择器类型”中勾选“类（可用于任何标签）”单选按钮，在“名称”文本框输入“geci”，在“定义在”中勾选“对该文档”单选按钮后单击“确定”按钮。弹出“CSS规则定义”对话框如图所示。新建新建CSSCSS样式表样式表任务一任务一 认识认识CSS样式表样式表在“CSS规则定义”对话框中单击“确定”按钮，现

4、在“geci”CSS样式表设计好了，对应的属性如图所示。新建新建CSSCSS样式表样式表任务一任务一 认识认识CSS样式表样式表 在建“h2”标签CSS样式表如图所示。新建新建CSSCSS样式表样式表在“类型”中需要设置的值后如图所示，单击“确定”按钮。任务一任务一 认识认识CSS样式表样式表在建“#zuozhe”高级CSS样式表如图所示。新建新建CSSCSS样式表样式表在“类型”中需要设置的值后如图所示，单击“确定”按钮。任务一任务一 认识认识CSS样式表样式表在“index7-1.html”文件中歌词上鼠标单击后【属性】面板中“样式”下拉列表框中选择“geci”。新建新建CSSCSS样式表

5、样式表在作曲前面的中添加“id=”zuozhe”如图所示。任务一任务一 认识认识CSS样式表样式表浏览index7-1.html文件如图所示。新建新建CSSCSS样式表样式表任务二任务二 管理管理CSS样式样式链接到外部CSS样式:在“CSS 样式”面板中，单击“附加样式”按钮。编辑外部CSS样式时，链接到该CSS样式的所有文档全部更新以反映所做的编辑。可以导出文档中包含的CSS样式以创建新的CSS样式表，然后附加或链接到外部样式表以应用那里所包含的样式。任务二任务二 管理管理CSS样式样式新建跟index7-1.html一样内容的index7-2-1.html文件。子任务子任务1 1 修改修

6、改CSSCSS样式样式执行【窗口】【CSS样式】菜单命令，打开“CSS样式”面板如图所示。任务二任务二 管理管理CSS样式样式在“CSS样式”面板选择“h2”CSS样式后单击“编辑CSS样式”按钮弹出“CSS规格定义”对话框。子任务子任务1 1 修改修改CSSCSS样式样式在“CSS规则定义”对话框中“类型”选择背景后“背景图像”导入“bg01.jpg”。单击“确定”按钮。任务二任务二 管理管理CSS样式样式在“CSS样式”面板选择“#zuozhe”CSS样式后单击“删除CSS样式”按钮。子任务子任务1 1 修改修改CSSCSS样式样式在“index7-2-1.html”文件中作曲上鼠标单击后

7、【属性】面板中“样式”下拉列表框中选择“geci”如图所示。任务二任务二 管理管理CSS样式样式浏览index7-2-1.html文件如图所示。子任务子任务1 1 修改修改CSSCSS样式样式任务二任务二 管理管理CSS样式样式新建跟index7-1.html一样内容的index7-2-2.html文件如图所示。子任务子任务2 2 设置外部设置外部CSSCSS样式样式在 index7-2-2.html中所有CSS样式删除。任务二任务二 管理管理CSS样式样式单击“新建CSS样式”按钮弹出“新建CSS规则”对话框。子任务子任务2 2 设置外部设置外部CSSCSS样式样式在“选择器类型”中勾选“标

8、签”单选按钮，在“标签”下拉列表框中选择“h2”，在“定义在”中勾选“新建样式表文件”单选按钮后单击“确定”按钮。弹出“保存样式表文件为”对话框如图所示。在“文 件”文 本 框 中 输 入“yangshi”后单击“保存”按钮弹出“CSS规则定义”对话框。任务二任务二 管理管理CSS样式样式单击“新建CSS样式”按钮弹出“新建CSS规则”对话框。子任务子任务2 2 设置外部设置外部CSSCSS样式样式在“选择器类型”中勾选“标签”单选按钮，在“标签”下拉列表框中选择“p”，在“定义在”中勾选“新建样式表文件”单选按钮后选择“yangshi.css”样式表文件，单击“确定”按钮。任务二任务二 管理

9、管理CSS样式样式p标签CSS样式规则定义后单击“确定”按钮。子任务子任务2 2 设置外部设置外部CSSCSS样式样式浏 览 index7-2-2.html文件如图所示。任务二任务二 管理管理CSS样式样式子任务子任务3 3 连接外部样式连接外部样式新建index7-2-3.html文件如图所示。执行【窗口】【CSS样式】菜单命令，打开“CSS样式”面板后单击“附加CSS样式”按钮弹出“链接外部样式文件”对话框。任务二任务二 管理管理CSS样式样式子任务子任务3 3 连接外部样式连接外部样式在“链接外部样式文件”对话框上的单击“浏览”按钮弹出“选择样式表文件”对话框如图所示。选择“yangsh

10、i”样式表文件后单击“确定”按钮；“链接外部样式表”对话框中浏览样式表文件后单击“确定”按钮。任务二任务二 管理管理CSS样式样式子任务子任务3 3 连接外部样式连接外部样式浏览index7-2-3.html文件如图所示。任务三任务三 认识行为认识行为 行为是指在网页中进行的一系列动作，通过这些动作，可以实现用户同网页的交互，也可以通过动作使某个任务被执行。在Dreamweaver中，行为由事件和动作两个基本元素组成。通常动作是一段JavaScript代码，利用这些代码可以完成相应的任务；事件则由浏览器定义，事件可以被附加到各种页面元素上，也可以被附加到HTML标记中，并且一个事件总是针对页面

11、元素或标记而言的。任务三任务三 认识行为认识行为新建index7-3.html文件后设置“播放声音”和“弹出信息”两个鼠标单击行为，“高亮颜色”和“设置状态栏文本”两个鼠标经过行为。使用行为使用行为任务三任务三 认识行为认识行为新建index7-3.html文件如图所示。使用行为使用行为任务三任务三 认识行为认识行为执行【窗口】【行为】菜单命令，打开“行为”面板后index7-3.html上选择“播放歌曲”行。使用行为使用行为在“行为”面板上的单击“添加行为”按钮显示“系统内置的所有行为”如图所示。选择“播放声音”行为后鼠标单击弹出“播放声音”对话框。任务三任务三 认识行为认识行为选择歌曲后单

12、击“确定”按钮。在图上的事件改为鼠标单击事件（onClick）。使用行为使用行为任务三任务三 认识行为认识行为在index7-3.html上选择“弹出信息”行。同样的方法选择“弹出信息”行为后鼠标单击弹出“弹出信息”对话框如图所示。使用行为使用行为在“消息”文本框输入“欢迎光临”后单击“确定”按钮。对应的事件改为鼠标单击事件（onClick）。任务三任务三 认识行为认识行为在index7-3.html上选择“高亮颜色”行。同样的方法选择“高亮颜色”行为后鼠标单击弹出“高亮颜色”对话框如图所示。使用行为使用行为设置好后单击“确定”按钮。对应的事件改为鼠标经过事件（onMouseOver）。任务三

13、任务三 认识行为认识行为在index7-3.html上选择“设置状态栏文本”行。同样的方法选择“设置状态栏文本”行为后鼠标单击弹出“设置状态栏文本”对话框如图所示。使用行为使用行为在“消息”文本框输入“大家好！”后单击“确定”按钮。对应的事件改为鼠标经过事件（onMouseOver）。任务三任务三 认识行为认识行为浏览index7-3.html文件如图所示。使用行为使用行为任务四任务四 常用常用Dreamweaver内置行为内置行为Dreamweaver内值行为有调用 JavaScript 行为、改变属性行为、检查浏览器行为、检查插件行为、控制 Shockwave 或 Flash 行为、拖动

14、AP 元素行为、转到 URL 行为、跳转菜单行为、跳转菜单转到行为、打开浏览器窗口行为、播放声音行为、弹出消息行为、预先载入图像行为、设置导航栏图像行为、设置框架文本行为、设置容器的文本行为、设置状态栏文本行为、设置文本域文字行为、显示-隐藏元素行为、显示弹出菜单行为、交换图像行为、检查表单行为等等。任务四任务四 常用常用Dreamweaver内置行为内置行为子任务子任务1 1 应用交换图像行为应用交换图像行为新建index7-4-1.html文件；执行【插入记录】【图像对象】【鼠标经过图像】弹出“插入鼠标经过图像”对话框。浏览两个不同的图片后单击“确定”按钮。浏览index7-4-1.htm

15、l文件。任务四任务四 常用常用Dreamweaver内置行为内置行为子任务子任务2 2 应用检查浏览器行为应用检查浏览器行为新建index7-4-2.html文件；选择一个对象，然后执行【行为】面板的【添加行为】【建议不再使用】【检查浏览器】弹出“检查浏览器”对话框如图所示。单击“URL”后的“浏览”按钮弹出“选择文件”对话框；然后选择“index7-3.html”后单击“确定”按钮。任务四任务四 常用常用Dreamweaver内置行为内置行为子任务子任务2 2 应用检查浏览器行为应用检查浏览器行为单击“替换URL”后的“浏览”按钮弹出“选择文件”对话框；然后选择“index7-4-1.htm

16、l”后单击“确定”按钮。单击“检查浏览器”对话框生的“确定”按钮。浏览index7-4-2.html文件。任务四任务四 常用常用Dreamweaver内置行为内置行为子任务子任务3 3 应用打开浏览器窗口行为应用打开浏览器窗口行为新建index7-4-3.html文件；选择“打开index7-1.html”，然后执行【行为】面板的【添加行为】【打开浏览器窗口】。单击“浏览”按钮弹出“选择文件”对话框；然后选择“index7-1.html”后单击“确定”按钮。单击“打开浏览器窗口”对话框生的“确定”按钮。浏览index7-4-3.html文件。任务四任务四 常用常用Dreamweaver内置行为

17、内置行为子任务子任务4 4 其他行为其他行为新建index7-4-4.html文件后应用“关闭浏览器”和“改变属性”行为。任务四任务四 常用常用Dreamweaver内置行为内置行为子任务子任务4 4 其他行为其他行为新建index7-4-4.html文件。任务四任务四 常用常用Dreamweaver内置行为内置行为子任务子任务4 4 其他行为其他行为选择“关闭浏览器”文本；然后执行【行为】面板的【添加行为】【调用JavaScript】弹出“调用JavaScript”对话框如图所示。在JavaScript文本框输入“window.close()”后单击“确定”按钮。在区域中：改变属性改为：改变

18、属性 任务四任务四 常用常用Dreamweaver内置行为内置行为子任务子任务4 4 其他行为其他行为选择“改变属性”文本，然后执行【行为】面板的【添加行为】【改变属性】弹出“改变属性”对话框如图所示。在“元素类型”下拉列表框中选“p”，在“元素ID”下拉列表框中选“p”gaibian”,在“属性”中勾选“选择”单选按钮，在“选择”下拉列表框中选“backgroundColor”，“新的值”文本框输入“#00FF00”后单击“确定”按钮。浏览index7-4-4.html文件。任务五任务五 插入插入JavaScript特效特效JavaScript是一种基于对象和事件驱动并具有安全性的脚本语言。

19、使用他的目的是HTML超文本标记语言一起实现在一个Web页面中与Web客户交互作用。在JavaScript运算符可分为：算术运算符，比较运算符，逻辑运算符，字符串运算符，赋值运算符。在JavaScript中主要有双目运算符和单目运算符。JavaScript是一种比较简单的编程语言，使用方法是向Web页面的HTML文件增加一个脚本，而不需要单独编译解释，当一个支持JavaScript的浏览器打开这个页面时，他会读出一个脚本并执行其命令。可以直接将JavaScript代码加入HTML中。其中表示脚本的开始，使用Language属性定义脚本语言为JavaScript，在标记与之间就可以加入JavaS

20、cript脚本。任务五任务五 插入插入JavaScript特效特效子任务子任务1 1 跟随鼠标的字符串跟随鼠标的字符串新建index7-5-1.html文件，打开代码。步骤2的代码加入区域中。步骤3的代码加入区域中。把改为。任务五任务五 插入插入JavaScript特效特效子任务子任务1 1 跟随鼠标的字符串跟随鼠标的字符串浏览index7-5-1.html如图所示。任务五任务五 插入插入JavaScript特效特效子任务子任务2 2 时钟显示在任意指定位置时钟显示在任意指定位置新建index7-5-2.html文件，打开代码。步骤2的代码加入区域中。把中的内容改为：/调用show5()函数。任务五任务五 插入插入JavaScript特效特效子任务子任务2 2 时钟显示在任意指定位置时钟显示在任意指定位置浏览index7-5-2.html如图所示。学材小结学材小结本模块主要介绍了定义CSS样式表、如何管理CSS样式表、如何使用外部CSS样式表和行为分类、如何使用内置行为、如何使用JavaScript特效。