第十一讲-网页中的多媒体和特效

第十一讲_网页中的多媒体和特效2DreamweaverCS4网页中的特效和表单3教学内容掌握网页中的特殊效果的处理技巧掌握创建表单的方法网页特效在DreamweaverCS4中，可以添加许多网页特效，例如鼠标特效、滚动条和页面特效等。常用的有弹出信息、交换图片、背景音乐、滚动字幕等添加网页特效的方法可以通过“行为”面板在“代码”视图中添加代码4弹出信息弹出信息是指在浏览网页时，鼠标点击对象(图片等)，会弹出信息窗口。弹出信息创建步骤选择网页中的图片打开“行为”面板选择“弹出信息”打开“弹出信息”对话框输入“信息内容”56示例1_弹出信息选择main.html中图片，设置弹出信息。鼠标经过图像鼠标经过图像是指在浏览网页时，鼠标移动到某张图像上时，该图像会切换成另一张图像，移开鼠标时，恢复原来的图像。鼠标经过图像方法1(网页中已插入原始图片)选择网页中图片打开“行为”面板选择“交换图像”打开“交换图像”对话框选择需要交换的图像鼠标经过图像方法2：(网页中无原始图片)选择插入图片的位置选择“插入/图像对象/鼠标经过图像”菜单命令打开“插入鼠标经过图像”对话框设置“原始图像”、“鼠标经过图像”和“链接网页”8示例2_鼠标经过图像1设置“smsc.html”网页中鼠标经过图像特效选择图片打开“行为”面板选择“交换图像”打开“交换图像”对话框设置“pic1.jpg”与该图片交换(pic1.jpg在SC3文件夹中)示例3_鼠标经过图像2在网页tk.html中设置鼠标经过图像特效原始图像为“xj1.jpg”，鼠标经过图像为“xj2.jpg”点击图像能打开“main.html”网页图像大小设置为宽210，高260滚动字幕滚动字幕是指在网页中来回移动的文字滚动字幕是通过快速标签编辑器来创建选中文字打开“修改”菜单，选择“快速标签编辑器”打开“快速标签编辑器”输入代码<marqueebehavior=“alternate”bgcolor=“#339900”style=“color:#FFFFFF”>10滚动字幕中的常用参数align表示元素的垂直对齐方式，值可以是top，middle，bottom，默认为middlebgcolor表示运动区域的背景色，值是16进制的RGB颜色，默认为白色behavior表示滚动的方式，值可以是scroll（连续滚动）slide（滑动一次）alternate（来回滚动）direction表示滚动的方向，值可以是left，right，up，down，默认为leftloop表示循环的次数，值是正整数，默认为无限循环scrollamount表示运动速度，值是正整数，默认为6scrolldelay表示停顿时间，值是正整数，默认为0，单位似乎是毫秒height、width表示运动区域的高度和宽度，值是正整数（单位是像素）或百分数，默认width=100%height为标签内元素的高度hspace、vspace表示元素到区域边界的水平距离和垂直距离，值是正整数，单位是像素onmouseover=this.stop()onmouseout=this.start()表示当鼠标以上区域的时候滚动停止，当鼠标移开的时候又继续滚动。<marquee>标记的默认情况向左滚动无限次，字幕高度是文本高度滚动范围：水平滚动的宽度是当前位置的宽度；垂直滚动的高度是当前位置的高度。12示例4_滚动字幕在网页“main.htm”表格插入一行，并添加文字“欢迎光临E派网上冲印店”选中文字，在“快速标签编辑器”中输入代码<marqueebehavior=“alternate”bgcolor=“#339900”style=“color:#FFFFFF”>Spry特效Spry特效几乎可以应用于HTML页面中的任何元素，使用这些特效可以实现使网页元素发光、缩小、淡化、高光等效果。Spry特效的行为包括显示/渐隐、遮帘、增大/收缩、高亮颜色、晃动、滑动、挤压等。在网页中插入Spry特效打开行为面板选择“效果”中特效设置鼠标事件示例5_Spry特效设置点击网页main.html中图片设置Spry特效增大/收缩设置增大效果从10%变化到100%；事件为“onMouseOver”显示/渐隐设置渐隐效果；事件为“onClick”晃动事件为“onClick”增大效果渐隐效果晃动效果层层是带有CSS样式的Div或Span代码，用于网页元素的精确定位。由于一个页面中可以拥有多个层，而不同的层之间可以相互重叠，通过设置透明度来决定每个层是否可见或者可见的程度，因而层可用来实现许多特效。层就像是包含文字或图像等元素的胶片，按顺序叠放在一起，组合成页面的最终效果。层可以精确地定位页面上的元素，并且在层中可以加入文本、图像、表格、插件等元素，还可以插入嵌套层。ApDiv特点所谓APDiv，是指存放文本、图像、表单和插件等网页内容的容器。APDiv最主要的特性就是它是浮动在网页内容之上的，可以在（不影响其他网页元素情况下）网页上任意改变其位置，实现对APDiv的准确定位；把页面元素放入APDiv中可以使用户对页面操作的布局更加轻松。APDiv元素其他特点APDiv元素可以重叠，所以在网页中可以实现网页内容的重叠效果（如立体字）APDiv元素可以被显示或隐藏，可以实现网页导航中的下拉菜单，图片的可控显示或隐藏可以通过应用时间轴使其移动和变换，这样在层中旋转一些图片或文本，就能够实现动画效果。在网页中插入ApDiv元素在工具栏中，选择“布局”标签，点击“绘制APDiv”按钮在网页上插入ApDiv在ApDiv框中插入对象(文字、图像等)通过属性面板设置属性示例6_ApDiv元素打开wscy.html网页在网页上插入ApDiv元素在ApDiv框中输入文字“网上冲印管理”设置ApDiv元素，可见性为“hidden”，背景色为“#FFFF99”设置ApDiv元素“显示/隐藏”行为选择ApDiv元素上方图片，打开行为面板，选择“显示-隐藏”行为，打开“显示-隐藏元素”对话框，选择“显示”按钮，把行为面板上事件设置为“onMouseOver”选择ApDiv元素上方图片，打开行为面板，选择“显示-隐藏”行为，打开“显示-隐藏元素”对话框，选择“隐藏”按钮，把行为面板上事件设置为“onMouseOut”表单的基础知识表单允许服务器端的程序处理用户端输入的信息表单在网页中时提供给访问者填写信息的区域，从而可以收集客户端信息，使网页更加具有交互的功能。表单一般被设置在一个HTML文档中，访问者填写相关信息后提交表单，表单内容会自动从客户端的浏览器传送到服务器上，经过服务器上的ASP或CGI等程序处理后，再将访问者所需的信息传送到客户端的浏览器上。几乎所有网站都应用表单，例如搜索栏、论坛和订单等。20表单对象在DreamweaverCS4中，表单输入类型称为表单对象。可以在网页中插入表单并创建各种表单对象。常用的表单对象有：文本域：接受文本输入，可以单行、多行和密码方式显示复选框：允许在一组选项中选择多个选项单选按钮：代表相互排斥的选择列表/菜单：在菜单或列表中选择选项跳转菜单：在菜单中选择链接对象按钮：在单击时执行操作21创建表单在插入表单对象之前必须先创建表单创建表单步骤选择“插入/表单”菜单命令或(选择“插入”工具栏上“表单”选项)在设计视图中就会生成一个红色虚线框22插入表单对象和属性设置插入表单对象步骤选择“插入/表单对象”菜单命令或(选择“插入/表单”工具栏上相应按钮)表单对象属性设置选择相应的表单对象，就可以在“属性”面板中设置属性23插入文本域表单对象文本域是非常重要的表单对象，可以输入相关信息。点击“插入/表单”工具栏中的“文本域/文本区域”按钮，可以插入文本域表单对象文本域包括了“单行”、“多行”和“密码”3种类型，以适应不同情况下的需要。在属性面板上可以设置：文本域名称、字符宽度、最大字符数\行数、文本域类型、初始值等24插入单选按钮单选按钮提供相互排斥的选项值，在单选按钮组内只能选择一个选项。点击“插入/表单”工具栏中的“单选按钮”按钮，即可在文档中创建一个单选按钮。在属性面板上可以设置：单选按钮名称选定值初始状态25插入单选按钮组点击“插入/表单”工具栏中的“单选按钮组”按钮打开“单选按钮组”窗口，设置单选按钮组单选按钮组名称标签值26插入复选框复选框表单对象，可以限制访问者填写的内容。使收集的信息更加规范，更有利于信息的统计。点击“插入/表单”工具栏中的“复选框”按钮，即可在网页文档中创建复选框。在属性面板上可以设置：复选框名称选定值初始状态27插入复选框组复选框组和按钮和单选按钮组相似，可以一次插入多个选项点击“插入/表单”工具栏中的“复选框组”按钮打开“复选框组”对话框，设置复选框组复选框组名称标签值28插入列表和菜单表单对象列表和菜单也是预定义选择对象的表单对象，使用它们可以在有限的空间内提供多个选项。列表也称为“滚动列表”，提供一个滚动条，允许访问者浏览多个选项，并进行多重选择。菜单也称为“下拉列表框”，仅显示一个选项，该项也是活动选项，访问者只能从菜单中选择一项。点击“插入/表单”工具栏中的“列表/菜单”按钮，即可在网页文档中插入列表/菜单表单29菜单列表添加菜单选项和列表选项插入列表/菜单表单后，在默认情况下是没有菜单选项或列表选项的，可以在“属性”面板中添加菜单选项和列表选项。在“属性”面板中，点击“列表值”按钮，打开“列表值”对话框，添加选项30添加跳转菜单在表单中插入跳转菜单，可以从菜单中选择需要打开的网页或文件点击“插入/表单”工具栏中的“跳转菜单”按钮，打开“插入跳转菜单”对话框，设置文本和跳转对象插入按钮在预览网页文档时，当输入完表单数据后，可以单击表单按钮，提交服务器处理如果对输入的数据不满意，需要重新设置时，可以单击表单按钮，重新输入按钮是标准的浏览器默认按钮样式，它包含需要显示的文本，它包括“提交”和“重置”按钮点击“插入/表单”工具栏中的“按钮”按钮，即可在网页文档中插入按钮

32示例7_创建表单和表单对象打开Mysite站点中的网页“pszf.html”，按样张创建表单对象姓名：文本域，单行，宽度为16地址：文本域，单行，宽度为50联系方式：文本域，单行，宽度为50特殊要求：文本域，多行，宽度为50，5