第6章 CSS与行为教学课件 网页制作基础教程（Dreamweaver CS6 第2版） .pptx

《第6章 CSS与行为教学课件 网页制作基础教程（Dreamweaver CS6 第2版） .pptx》由会员分享，可在线阅读，更多相关《第6章 CSS与行为教学课件 网页制作基础教程（Dreamweaver CS6 第2版） .pptx（28页珍藏版）》请在得力文库 - 分享文档赚钱的网站上搜索。

1、第6章 CSS与行为教学课件 网页制作基础教程（Dreamweaver CS6 第2版）工信版主 编 黄洪杰 电子工业出版社电子工业出版社网页制作基础教程网页制作基础教程(Dreamweaver CS6(Dreamweaver CS6 第第2 2版版)电子教案电子教案第第6 6章章 CSSCSS与行为与行为项目项目1 1 使用使用CSSCSS子项目子项目1 CSS1 CSS概述概述CSS是Cascading Style Sheets（层叠样式表单）的简称。对于设计者来说它是一个非常灵活的工具，它允许设计者在HTML文档中加入样式，不但不必再把繁杂的样式定义编写在文档结构中，而且可以将所有关于文

2、档的样式指定内容全部脱离出来，在行内定义，在标题中定义，甚至作为外部样式文件供HTML调用。CSS是当前网页设计中不可缺少的技术，子项目子项目2 2 使用使用CSSCSS设置行间距设置行间距单击窗口右边“浮动面板”中“CSS”，在打开的面板中单击 ，在弹出菜单中选择“新建”命令，在“新建CSS规则”对话框中输入：.hangjv，作为样式名称，注意前面一个小数点，目的是避免与其他标记混淆。选择“定义在”为“（新建样式表文件）”，单击“确定”按钮。子项目子项目2 2 使用使用CSSCSS设置行间距设置行间距在弹出“hangjv的CSS样式定义”对话框中，单击行高右边的，在下拉选项中选择“（值）”，

3、然后再将文本框中的“（值）”删掉，输入“20”，将行高值设为20像素，单击“确定”按钮。子项目子项目2 2 使用使用CSSCSS设置行间距设置行间距此时，在“CSS”面板中可以发现，出现了名为huangjv.css的一个样式，右击样式表中的样式“hangjv”，在弹出的快捷菜单中选择“应用”，光标所在段落文字的行间距变成20像素。子项目子项目3 3 使用使用CSSCSS去掉文本超链接去掉文本超链接下划线下划线重复上述操作步骤，在“新建CSS规则”对话框中，选择器类型选择“复合内容（基于选择的内容）”，单击“选择器名称”右边下拉框的，在下拉选项中选择“a:link”，这表示对超链接进行操作，单击

4、“确定”按钮。选择“a:hover”，表示鼠标指向链接时的效果；选择“a:active”，表示链接激活时的效果；选择“a:visited”，表示已点击过的链接效果。子项目子项目3 3 使用使用CSSCSS去掉文本超链接去掉文本超链接下划线下划线在“a:link的CSS样式定义”对话框中，选择“none”（也就是无），单击“确定”按钮。此时，可以发现热区文字下的下划线已经消失子项目子项目4 4 使用使用CSSCSS滤镜处理图片滤镜处理图片1.Alpha滤镜滤镜新建一个CSS，在“新建CSS规则”对话框中，选择器类型选择“类（可应用于任何HTML元素）”，单击“选择器名称”中输入“.alpha”作

5、为名字，单击“确定”按钮。子项目子项目4 4 使用使用CSSCSS滤镜处理图片滤镜处理图片1.Alpha滤镜滤镜在弹出的“.alpha的CSS规则定义”对话框中，选择左边“分类”下的“扩展”。然后在右边区域选择Filter（滤镜），在弹出的下拉菜单中选择“Alpha(Opacity=?,FinishOpacity=?,Style=?,StartX=?,StartY=?,FinishX=?,FinishY=?)”，子项目子项目4 4 使用使用CSSCSS滤镜处理图片滤镜处理图片1.Alpha滤镜滤镜各个参数的含义如下：Opacity：透明度的级别，可以从0取到100，0表示完全透明，100表示不

6、透明；FinishOpacity：设置渐变透明效果时，结束时的透明度。值可以从0取到100；Style：渐变透明度的样式。当值为0时，代表同意形状，1代表线形，2代表放射形，3代表长方形；StartX,StartY,FinishX,FinishY：表示渐变透明度的开始和结束坐标。此处，更改各值为：Alpha(Opacity=30,FinishOpacity=100,Style=1)，单击“确定”按钮。子项目子项目4 4 使用使用CSSCSS滤镜处理图片滤镜处理图片1.Alpha滤镜滤镜将鼠标指针移动到图片上，单击鼠标右键，在弹出的快捷菜单上选择“CSS样式”下的“alpha”。预览网页，可以看

7、到效果。子项目子项目4 4 使用使用CSSCSS滤镜处理图片滤镜处理图片2.Wave滤镜滤镜新建一个CSS，在“新建CSS规则”对话框中，选择器类型选择“类（可应用于任何HTML元素）”，单击“选择器名称”中输入“.wave”作为名字，单击“确定”按钮。子项目子项目4 4 使用使用CSSCSS滤镜处理图片滤镜处理图片2.Wave滤镜滤镜在弹出的“.wave的CSS规则定义”对话框中，选择左边“分类”下的“扩展”。然后在右边区域选择Filter（滤镜），在弹出的下落菜单中选择“Wave(Add=?,Freq=?,LightStrength=?,Phase=?,Strength=?)”。子项目子项

8、目4 4 使用使用CSSCSS滤镜处理图片滤镜处理图片2.Wave滤镜滤镜各个参数的含义如下：Add：是否显示原对象。0代表不显示，非0显示原对象；Freq：设置波动的个数；LightStrength：设置波动效果的亮度，0代表最弱，100代表最强；Phase：设置波动的起始角度。值从0到100，25代表90度，依次类推；Strength：柏杜摇摆幅度。此处，更改各值为：Wave(Add=0,Freq=3,LightStrength=10,Phase=25,Strength=10)，单击“确定”按钮。子项目子项目4 4 使用使用CSSCSS滤镜处理图片滤镜处理图片2.Wave滤镜滤镜鼠标指针移

9、动到图片上，单击鼠标右键，在弹出的快捷菜单上选择“CSS样式”下的“wave”。预览网页，可以发现图片发生变化。项目项目2 2 使用行为使用行为子项目子项目1 1 行为概述行为概述所谓“行为”，就是响应网页中的某一事件而采取的一个动作。事件可以是鼠标的移动，网页的打开与关闭、键盘的使用等，动作可以是弹出问候语、刷新页面、播放声音、检查用户浏览器等。在网页中添加行为即可将该行为附加到整个文档中。一个事件可以关联多个动作，每个动作执行的先后次序由浮动面板中行为的排列顺序决定。子项目子项目2 2 使用行为设置状态栏信息使用行为设置状态栏信息在浮动面板的“行为”选项卡中，单击 ，在弹出的菜单中，选择“

10、设置文本”下的“设置状态栏文本”命令。在弹出的“设置状态栏文本”对话框中，输入“欢迎您参加悦览读书俱乐部”，单击“确定”按钮。子项目子项目2 2 使用行为设置状态栏信息使用行为设置状态栏信息行为选项卡中出现“设置状态栏文本”的行为，预览网页，可以看到相应效果。子项目子项目3 3 使用行为弹出对话框使用行为弹出对话框采用“弹出信息”行动：单击窗口右下角的按钮 ，在“行为”选项卡中单击，在弹出的菜单中选择“弹出信息”，在打开的“弹出信息”对话框中，输入要显示的信息，单击“确定”按钮。子项目子项目3 3 使用行为弹出对话框使用行为弹出对话框采用“调用JavaScript”行为：重复第一种方法，在 下

11、拉菜单中选择命令“调用JavaScript”，在打开的“调用JavaScript”对话框中输入“alert（请确认您所使用的浏览器为IE5.5以上版本，否则无法正常显示网页的动态效果！）”，最后单击“确定”按钮。子项目子项目4 4 使用行为弹出网页窗口使用行为弹出网页窗口首先新建一个网页文件“hello.htm”子项目子项目4 4 使用行为弹出网页窗口使用行为弹出网页窗口用前面的方法为主页添加行为，在下拉菜单中选择“打开浏览器窗口”命令，在“打开浏览器窗口”对话框中，单击“浏览”窗口，打开“选择文件”对话框，选中“hello.htm”文件。子项目子项目4 4 使用行为弹出网页窗口使用行为弹出网页窗口在“打开浏览器窗口”对话框中，输入弹出窗口的大小以及窗口名称，窗口大小的值并不是网页窗口的实际大小，而是它显示时的大小。单击“确定”按钮。子项目子项目4 4 使用行为弹出网页窗口使用行为弹出网页窗口在浏览器中预览该网页，可以看到在打开主页的同时，弹出小窗口“hello.html”。