第11讲_网页中的多媒体和特效

1、1网页中的特效和表单网页中的特效和表单2 2q教师：柳青 q电子信箱： Lq办公室：信息楼B418q电话： 677038523q站点q网页属性设置q将框架网页index.html标题设置为“E派网上冲印店”q将main.html网页中“链接颜色”、“已访问过的链接颜色”均设为#FFFFFF，链接始终无下划线4q掌握网页中的特殊效果的处理技巧q掌握创建表单的方法q在Dreamweaver CS4中，可以添加许多网页特效，例如鼠标特效、滚动条和页面特效等。常用的有弹出信息、交换图片、背景音乐、滚动字幕等q添加网页特效的方法q可以通过“行为”面板q在“代码”视图中添加代码5q弹出信息是指在浏览网页时

2、，鼠标点击对象(图片等)，会弹出信息窗口。q弹出信息创建步骤q选择网页中的图片q打开“行为”面板q选择“弹出信息”q打开“弹出信息”对话框q输入“信息内容”67q选择main.html中图片，设置弹出信息。q鼠标经过图像是指在浏览网页时，鼠标移动到某张图像上时，该图像会切换成另一张图像，移开鼠标时，恢复原来的图像。q鼠标经过图像方法1(网页中已插入原始图片)q选择网页中图片q打开“行为”面板q选择“交换图像”q打开“交换图像”对话框q选择需要交换的图像q鼠标经过图像方法2： (网页中无原始图片)q选择插入图片的位置q选择“插入/图像对象/鼠标经过图像”菜单命令q打开“插入鼠标经过图像”对话框q

3、设置“原始图像”、“鼠标经过图像”和“链接网页”9q设置“smsc.html”网页中鼠标经过图像特效q选择图片q打开“行为”面板q选择“交换图像”q打开“交换图像”对话框q设置“pic1.jpg”与该图片交换(pic1.jpg在SC3文件夹中)q在网页tk.html中设置鼠标经过图像特效q原始图像为“xj1.jpg”，鼠标经过图像为“xj2.jpg”q点击图像能打开“main.html”网页q图像大小设置为宽210，高260q滚动字幕是指在网页中来回移动的文字q滚动字幕是通过快速标签编辑器来创建q选中文字q打开“修改”菜单，选择“快速标签编辑器”q打开“快速标签编辑器”q输入代码11qalig

4、n 表示元素的垂直对齐方式，值可以是top，middle，bottom，默认为middleqbgcolor 表示运动区域的背景色，值是16进制的RGB颜色，默认为白色qbehavior 表示滚动的方式，值可以是scroll（连续滚动）slide（滑动一次）alternate（来回滚动）qdirection 表示滚动的方向，值可以是left，right，up，down，默认为left qloop 表示循环的次数，值是正整数，默认为无限循环qscrollamount 表示运动速度，值是正整数，默认为6qscrolldelay 表示停顿时间，值是正整数，默认为0，单位似乎是毫秒qheight、wid

5、th 表示运动区域的高度和宽度，值是正整数（单位是像素）或百分数，默认width=100% height为标签内元素的高度qhspace、vspace 表示元素到区域边界的水平距离和垂直距离，值是正整数，单位是像素qonmouseover=this.stop() onmouseout=this.start() 表示当鼠标以上区域的时候滚动停止，当鼠标移开的时候又继续滚动。q标记的默认情况q向左滚动无限次，字幕高度是文本高度q滚动范围：水平滚动的宽度是当前位置的宽度；垂直滚动的高度是当前位置的高度。13q在网页“main.htm”表格插入一行，并添加文字“欢迎光临E派网上冲印店”q选中文字，在“

6、快速标签编辑器”中输入代码qqSpry特效几乎可以应用于HTML页面中的任何元素，使用这些特效可以实现使网页元素发光、缩小、淡化、高光等效果。qSpry特效的行为包括显示/渐隐、遮帘、增大/收缩、高亮颜色、晃动、滑动、挤压等。q打开行为面板q选择“效果”中特效q设置鼠标事件q设置点击网页main.html中图片设置Spry特效q增大/收缩q设置增大效果从10%变化到100%；事件为“onMouseOver”q显示/渐隐q设置渐隐效果；事件为“onClick”q晃动q事件为“onClick”增大效果增大效果渐隐效果渐隐效果晃动效果晃动效果q层是带有CSS样式的Div或Span代码，用于网页元素的

7、精确定位。由于一个页面中可以拥有多个层，而不同的层之间可以相互重叠，通过设置透明度来决定每个层是否可见或者可见的程度，因而层可用来实现许多特效。q层就像是包含文字或图像等元素的胶片，按顺序叠放在一起，组合成页面的最终效果。层可以精确地定位页面上的元素，并且在层中可以加入文本、图像、表格、插件等元素，还可以插入嵌套层。q所谓AP Div，是指存放文本、图像、表单和插件等网页内容的容器。qAP Div最主要的特性就是它是浮动在网页内容之上的，可以在（不影响其他网页元素情况下）网页上任意改变其位置，实现对AP Div的准确定位；把页面元素放入AP Div中可以使用户对页面操作的布局更加轻松。qAP

8、Div元素其他特点qAP Div元素可以重叠，所以在网页中可以实现网页内容的重叠效果（如立体字）qAP Div元素可以被显示或隐藏，可以实现网页导航中的下拉菜单，图片的可控显示或隐藏q可以通过应用时间轴使其移动和变换，这样在层中旋转一些图片或文本，就能够实现动画效果。 q在工具栏中，选择“布局”标签，点击“绘制AP Div”按钮q在网页上插入Ap Divq在Ap Div框中插入对象(文字、图像等)q通过属性面板设置属性q打开wscy.html网页q在网页上插入Ap Div元素q在Ap Div框中输入文字“网上冲印管理”q设置Ap Div元素，可见性为“hidden”，背景色为“#FFFF99”

9、q设置Ap Div元素“显示/隐藏”行为q选择Ap Div元素上方图片，打开行为面板，选择“显示-隐藏”行为，打开“显示-隐藏元素”对话框，选择“显示”按钮，把行为面板上事件设置为“onMouseOver”q选择Ap Div元素上方图片，打开行为面板，选择“显示-隐藏”行为，打开“显示-隐藏元素”对话框，选择“隐藏”按钮，把行为面板上事件设置为“onMouseOut”q表单允许服务器端的程序处理用户端输入的信息q表单在网页中时提供给访问者填写信息的区域，从而可以收集客户端信息，使网页更加具有交互的功能。q表单一般被设置在一个HTML文档中，访问者填写相关信息后提交表单，表单内容会自动从客户端的

10、浏览器传送到服务器上，经过服务器上的ASP或CGI等程序处理后，再将访问者所需的信息传送到客户端的浏览器上。q几乎所有网站都应用表单，例如搜索栏、论坛和订单等。21q在Dreamweaver CS4中，表单输入类型称为表单对象。可以在网页中插入表单并创建各种表单对象。q常用的表单对象有：q文本域：接受文本输入，可以单行、多行和密码方式显示q复选框：允许在一组选项中选择多个选项q单选按钮：代表相互排斥的选择q列表/菜单：在菜单或列表中选择选项q跳转菜单：在菜单中选择链接对象q按钮：在单击时执行操作22q在插入表单对象之前必须先创建表单q创建表单步骤q选择“插入/表单”菜单命令q或(选择“插入”工

11、具栏上“表单”选项)q在设计视图中就会生成一个红色虚线框23q插入表单对象步骤q选择“插入/表单对象”菜单命令q或(选择“插入/表单”工具栏上相应按钮)q表单对象属性设置q选择相应的表单对象，就可以在“属性”面板中设置属性24q文本域是非常重要的表单对象，可以输入相关信息。q点击“插入/表单”工具栏中的“文本域/文本区域”按钮，可以插入文本域表单对象q文本域包括了“单行”、“多行”和“密码”3种类型，以适应不同情况下的需要。q在属性面板上可以设置：q文本域名称、字符宽度、最大字符数行数、文本域类型、初始值等25q单选按钮提供相互排斥的选项值，在单选按钮组内只能选择一个选项。q点击“插入/表单”

12、工具栏中的“单选按钮”按钮，即可在文档中创建一个单选按钮。q在属性面板上可以设置：q单选按钮名称q选定值q初始状态26q点击“插入/表单”工具栏中的“单选按钮组”按钮q打开“单选按钮组”窗口，设置单选按钮组q单选按钮组名称q标签q值27q复选框表单对象，可以限制访问者填写的内容。使收集的信息更加规范，更有利于信息的统计。q点击“插入/表单”工具栏中的“复选框”按钮，即可在网页文档中创建复选框。q在属性面板上可以设置：q复选框名称q选定值q初始状态28q复选框组和按钮和单选按钮组相似，可以一次插入多个选项q点击“插入/表单”工具栏中的“复选框组”按钮q打开“复选框组”对话框，设置复选框组q复选框

13、组名称q标签q值29q列表和菜单也是预定义选择对象的表单对象，使用它们可以在有限的空间内提供多个选项。q列表也称为“滚动列表”，提供一个滚动条，允许访问者浏览多个选项，并进行多重选择。q菜单也称为“下拉列表框”，仅显示一个选项，该项也是活动选项，访问者只能从菜单中选择一项。q点击“插入/表单”工具栏中的“列表/菜单”按钮，即可在网页文档中插入列表/菜单表单30q插入列表/菜单表单后，在默认情况下是没有菜单选项或列表选项的，可以在“属性”面板中添加菜单选项和列表选项。q在“属性”面板中，点击“列表值”按钮，打开“列表值”对话框，添加选项31q在表单中插入跳转菜单，可以从菜单中选择需要打开的网页或

14、文件q点击“插入/表单”工具栏中的“跳转菜单”按钮，打开 “插入跳转菜单”对话框，设置文本和跳转对象q在预览网页文档时，当输入完表单数据后，可以单击表单按钮，提交服务器处理q如果对输入的数据不满意，需要重新设置时，可以单击表单按钮，重新输入q按钮是标准的浏览器默认按钮样式，它包含需要显示的文本，它包括“提交”和“重置”按钮q点击“插入/表单”工具栏中的“按钮”按钮，即可在网页文档中插入按钮 33q新建网页“biaodan.html”，按样张创建表单和表单对象浏览视图设计视图q打开Mysite站点中的网页“pszf.html”，按样张创建表单对象q姓名：文本域，单行，宽度为16q地址：文本域，单行，宽度为50q联系方式：文本域，单行，宽