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

1DreamweaverCS4网页中的特效和表单2教学内容掌握网页中的特殊效果的处理技巧掌握创建表单的方法网页特效在DreamweaverCS4中，可以添加许多网页特效，例如鼠标特效、滚动条和页面特效等。常用的有弹出信息、交换图片、背景音乐、滚动字幕等添加网页特效的方法可以通过“行为”面板在“代码”视图中添加代码3弹出信息弹出信息是指在浏览网页时，鼠标点击对象(图片等)，会弹出信息窗口。弹出信息创建步骤选择网页中的图片打开“行为”面板选择“弹出信息”打开“弹出信息”对话框输入“信息内容”45示例1_弹出信息选择main.html中图片，设置弹出信息。鼠标经过图像鼠标经过图像是指在浏览网页时，鼠标移动到某张图像上时，该图像会切换成另一张图像，移开鼠标时，恢复原来的图像。鼠标经过图像方法1(网页中已插入原始图片)选择网页中图片打开“行为”面板选择“交换图像”打开“交换图像”对话框选择需要交换的图像鼠标经过图像方法2：(网页中无原始图片)选择插入图片的位置选择“插入/图像对象/鼠标经过图像”菜单命令打开“插入鼠标经过图像”对话框设置“原始图像”、“鼠标经过图像”和“链接网页”7示例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”9滚动字幕中的常用参数align表示元素的垂直对齐方式，值可以是top，middle，bottom，默认为middlebgcolor表示运动区域的背景色，值是16进制的RGB颜色，默认为白色behavior表示滚动的方式，值可以是scroll（连续滚动）slide（滑动一次）alternate（来回滚动）direction表示滚动的方向，值可以是left，right，up，down，默认为leftloop表示循环的次数，值是正整数，默认为无限循环scrollamount表示运动速度，值是正整数，默认为6scrolldelay表示停顿时间，值是正整数，默认为0，单位似乎是毫秒height、width表示运动区域的高度和宽度，值是正整数（单位是像素）或百分数，默认width=100%height为标签内元素的高度hspace、vspace表示元素到区域边界的水平距离和垂直距离，值是正整数，单位是像素onmouseover=this.stop()onmouseout=this.start()表示当鼠标以上区域的时候滚动停止，当鼠标移开的时候又继续滚动。marquee标记的默认情况向左滚动无限次，字幕高度是文本高度滚动范围：水平滚动的宽度是当前位置的宽度；垂直滚动的高度是当前位置的高度。11示例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等程序处理后，再将访问者所需的信息传送到客户端的浏览器上。几乎所有网站都应用表单，例如搜索栏、论坛和订单等。19表单对象在DreamweaverCS4中，表单输入类型称为表单对象。可以在网页中插入表单并创建各种表单对象。常用的表单对象有：文本域：接受文本输入，可以单行、多行和密码方式显示复选框：允许在一组选项中选择多个选项单选按钮：代表相互排斥的选择列表/菜单：在菜单或列表中选择选项跳转菜单：在菜单中选择链接对象按钮：在单击时执行操作20创建表单在插入表单对象之前必须先创建表单创建表单步骤选择“插入/表单”菜单命令或(选择“插入”工具栏上“表单”选项)在设计视图中就会生成一个红色虚线框21插入表单对象和属性设置插入表单对象步骤选择“插入/表单对象”菜单命令或(选择“插入/表单”工具栏上相应按钮)表单对象属性设置选择相应的表单对象，就可以在“属性”面板中设置属性22插入文本域表单对象文本域是非常重要的表单对象，可以输入相关信息。点击“插入/表单”工具栏中的“文本域/文本区域”按钮，可以插入文本域表单对象文本域包括了“单行”、“多行”和“密码”3种类型，以适应不同情况下的需要。在属性面板上可以设置：文本域名称、字符宽度、最大字符数\行数、文本域类型、初始值等23插入单选按钮单选按钮提供相互排斥的选项值，在单选按钮组内只能选择一个选项。点击“插入/表单”工具栏中的“单选按钮”按钮，即可在文档中创建一个单选按钮。在属性面板上可以设置：单选按钮名称选定值初始状态24插入单选按钮组点击“插入/表单”工具栏中的“单选按钮组”按钮打开“单选按钮组”窗口，设置单选按钮组单选按钮组名称标签值25插入复选框复选框表单对象，可以限制访问者填写的内容。使收集的信息更加规范，更有利于信息的统计。点击“插入/表单”工具栏中的“复选框”按钮，即可在网页文档中创建复选框。在属性面板上可以设置：复选框名称选定值初始状态26插入复选框组复选框组和按钮和单选按钮组相似，可以一次插入多个选项点击“插入/表单”工具栏中的“复选框组”按钮打开“复选框组”对话框，设置复选框组复选框组名称标签值27插入列表和菜单表单对象列表和菜单也是预定义选择对象的表单对象，使用它们可以在有限的空间内提供多个选项。列表也称为“滚动列表”，提供一个滚动条，允许访问者浏览多个选项，并进行多重选择。菜单也称为“下拉列表框”，仅显示一个选项，该项也是活动选项，访问者只能从菜单中选择一项。点击“插入/表单”工具栏中的“列表/菜单”按钮，即可在网页文档中插入列表/菜单表单28菜单列表添加菜单选项和列表选项插入列表/菜单表单后，在默认情况下是没有菜单选项或列表选项的，可以在“属性”面板中添加菜单选项和列表选项。在“属性”面板中，点击“列表值”按钮，打开“列表值”对话框，添加选项29添加跳转菜单在表单中插入跳转菜单，可以从菜单中选择需要打开的网页或文件点击“插入/表单”工具栏中的“跳转菜单”按钮，打开“插入跳转菜单”对话框，设置文本和跳转对象插入按钮在预览网页文档时，当输入完表单数据后，可以单击表单按钮，提交服务器处理如果对输入的数据不满意，需要重新设置时，可以单击表单按钮，重新输入按钮是标准的浏览器默认按钮样式，它包含需要显示的文本，它包括“提交”和“重置”按钮点击“插入/表单”工具栏中的“按钮”按钮，即可在网页文档中插入按钮31示例7_创建表单和表单对象打开Mysite站点中的网页“pszf.html”，按样张创建表单对象姓名：文本域，单行，宽度为16地址：文本域，单行，宽度为50联系方式：文本域，单行，宽度为50特殊要求：文本域，多行，宽度为50，5行常用链接：跳转菜单，(输入3-4个常用的网页链接)配送方式：单选按钮，选择项(邮寄；快递；自取)，其中勾选“快递”支付方式：列表/菜单，列表值为“网上银行；货到付款；支付卡”，初始化时选定“货到付款”插入“提交信息、重设信息”按钮，动作为提交和重设表单。32示例7_样张3334课堂练习完成示例1-735课后练习实验指导P210：实验30，范例P214：实验31，范例P219：实验32，范例36下周教学内容大作业