Dreamweaver网页设计电子教案(全)完整版课件整套教学课件.ppt

第第1 1章章第第1 1章章 走进走进 Dreamweaver Dreamweaver 网页基本概念网页基本概念 认识认识DreamweaverDreamweaver 网页的构成元素网页的构成元素 网页的设计与规划网页的设计与规划本章学习知识点本章学习知识点上上一一张张下下一一张张返返回回第第1 1章章1.1 1.1 第一个主页：基本操作第一个主页：基本操作 本章内容目录本章内容目录1.2 1.2 学生成绩表：表格的应用学生成绩表：表格的应用 1.3 1.3 学生成绩分类汇总学生成绩分类汇总:表格综合应用表格综合应用 1.4 1.4 图片应用：网上花店图片应用：网上花店 1.5 1.5 小说封面：图像映射小说封面：图像映射 1.6 1.6 层的使用：使用层的使用：使用层层编排网页编排网页 1.7 1.7 框架技术：星座介绍框架技术：星座介绍 1.8 1.8 插入插入Java AppletJava Applet：焰火晚会：焰火晚会 第第1 1章章1.9 1.9 插入插入FlashFlash：在线游戏：在线游戏 本章内容目录本章内容目录1.10 1.10 插入视频和声音插入视频和声音 1.11 1.11 本章小结本章小结1.12 1.12 本章习题本章习题第第1 1章章1.1 1.1 基本操作基本操作 1.1.1网页的基本概念网页：通常是HTML格式（文件扩展名为.html或.htm）。网页通常用图像来提供图画，网页要透过网页浏览器来阅读。HTML语言：HTML的全称是HyperTextMarkupLanguage，中文翻译为“超文本标记语言”。它的特点是用语言来设计网页，但是其实质和通过Dreamweaver可视化软件设计页面是一致的。示例：北京航空航天大学图书馆主页HTML代码结合可视化设计第第1 1章章超文本标记“容器”页头“容器”这对标签之间是该超文本文档文档头。对该超文本文档的定义、说明、描述等都在这部份。主体部份“容器”这对标签之间是该超文本文档的具体内容。该网页要传送的信息基本上都在这一部份。第第1 1章章1.1.2第一个网页的制作HelloWorld!1.启动Dreamweaver2.新建网页文档3.在编辑窗口中输入文字4.按F12键观察效果第第1 1章章1.2 学生成绩表学生成绩表 1.2.1表格的基本概念1.2.2插入表格的三种方法表格是网页中最重要的工具之一。作为一个基本的网页构成应该以表格为基础，搭配其他的辅助排版工具，使页面达到最佳的设计效果。第第1 1章章1.2.3表格的属性设置第第1 1章章1.2.4制作学生成绩表通过设置输入表格对话框来制作一个表格在表格内的各个单元格内，插入文本，并且选择居中对齐第第1 1章章1.3 1.3 学生成绩分类汇总学生成绩分类汇总1.3.1基本概念和操作v增加行和列单击一个单元格，执行菜单修改-表格-插入行，则在光标所在行的上面插入新的一行。同样，执行修改-表格-插入列，则在光标左侧插入新的一列增加多行或者列v执行修改-表格-插入行或列v在弹出对话框中设置第第1 1章章无论文本、图像、动画等，一切在网页中可以插入的对象，在表格或者单元格中都可以插入。插入方法基本相同，将光标置于表格或者单元格中，就可以执行相应的操作所插入的对象，同样可以在属性面板中进行编辑表格的嵌套可插入对象的类型第第1 1章章vDreamwaver8 内置了多种基于颜色搭配的表格样式，可以从中选择合适的样式来使用。v执行菜单 命令-格式化表格制作格式化表格第第1 1章章1.3.2制作成绩列表首先插入一个7行6列的表格将第一行的单元格合并第第1 1章章设置表格的颜色第一行设置颜色为黄色，RGB值为#FFFF00第一行一下设置颜色为绿色，RGB值为#CCFF00第第1 1章章插入表格内容删除行高和列宽第第1 1章章1.4 1.4 网上花店网上花店图像是网页设计中不可或缺的重要组成部分。但作为网页设计人员应该考虑到网页的大小，从而照顾到各种用户的需求。下面这个例子就来介绍如何对网页图像进行处理，使得在保持图形美丽与网站风格搭配的基础之上，力求图片能够变得更小。设置图像大小 设置图像超链接 设置图像对齐方式 设置图像替换 低分辨率载入 1.4.1基本概念第第1 1章章新建表格，并将光标置于某一个单元格内。在属性面板中，单击浏览文件按钮，弹出选择文件对话框。选择插入图片。当插入的图片不在站点根目录或者其子目录中，则软件会提示是否需要复制一份拷贝文件到相应的根文件夹中。1.4.2上机操作第第1 1章章进行图文混排的时候，也就是需要选择在表格同一单元格内，既要插入图片，也要插入文字，选择其两者之间的对齐方式。加入文本替换，可以实现当浏览者把鼠标定位于某个网页元素上的时候，自动弹出说明文本，帮助浏览者理解。第第1 1章章最终完成的网页效果图第第1 1章章1.5 1.5 小说封面小说封面图像映射：一种在页面上局部区域链接的功能。这些形状区域可以称作“热点”或“热区”。当用户单击某个“热点”时，就完成指定的任务，这个任务可以是进入超链接地址，也可以是激发某中网页行为。虚拟连接：在网页设计的初期，往往并不需要真正实现某些标题或者图片的连接，仅仅提示设计者在后续的工作中需要实现此功能。在属性面板的链接文本框内插入字符“#”即可。1.5.1基本概念第第1 1章章插入图片，并且为图片中的某一个区域绘制对应的“图像映射”，也就是热区。1.5.2上机操作绘制后的效果第第1 1章章1.6 1.6 层的使用层的使用1.6.1基本概念层相当于一个容器，可以包含所有在HTML文件中出现的元素。这里要注意和Photoshop的层不是一个概念。用户可以随便将这个容器放置在页面的任何位置，从而使层中的元素在页面中的地位达到像素级的精确度。层还可以与许多高级特性相连。例如，时间轴动画功能就必须用到层；行为控制层的显示和隐藏，也可以对层进行操作和控制，熟练使用这些功能可以做出生动有趣的效果。第第1 1章章1.6.2上机操作鼠标在编辑窗口的背景上，单击鼠标右键，弹出右键菜单，选择页面属性。第第1 1章章插入多个层，注意连续绘制多个层的技巧：按下Ctrl键，并画出层。在编辑窗口的左上角对应地显示层的图标。在各个层内插入对应的图像文件，完成制作。第第1 1章章1.7 1.7 星座介绍星座介绍框架主要用于将浏览器划分为多个窗口，在各个窗口中显示多个不同的HTML文档。通过设定这些文档之间的相互关系，从而实现文档导航和文档操作的目的。1.7.1基本概念框架技术主要有两种类型的元素：一是框架集，另外一个是框架。基于框架技术制作的BBS第第1 1章章1.7.2上机操作制作一个基本框架框架在框架的左侧插入12行1列的表格，在右侧插入2行1列的表格第第1 1章章在左侧的表格中插入星座图片和文字在右侧插入文字内容，并且保存框架各个部分。第第1 1章章1.8 1.8 焰火晚会焰火晚会Java是一种程序设计语言，JavaApplet（Java程序）是在Java的基础上形成的，它通过写入HTML语句中，在网页中执行一定的任务。JavaApplet可看作是媒体的一种，所以可以用插入媒体的方式写进网页。1.8.1基本概念JavaApplet在Dreamweaver中的显示形式第第1 1章章在编辑窗口中插入一个1行1列的表格，并且在表格内插入JavaApplet。插入的方法：将光标置于表格单元格内，并且切换到“代码视图”在代码视图中插入JavaScript语句,注意插入的位置不要随意更换。1.8.2上机操作第第1 1章章将本例需要的声音文件，以及实现JavaApplet所以需要的一些文件拷贝到对应的网页目录中。实现后的效果如图所示。用户如果需要在黑夜中的焰火效果，请修改此代码：将其改变为第第1 1章章1.9 FLASH1.9 FLASH游戏游戏1.9.1基本概念Flash是网络矢量动画的领跑者。文件小巧，速度快，特效精美，支持流媒体和强大的交互功能，成为网页中最流行的动画格式。Flash源文件：（*.fla）该文件类型是使用flash制作软件创建的项目源文件，这种文件只能在flash制作软件中打开，具有再次编辑的功能。Flash电影文件：（*.swf）一种导出的flash文件，这种文件能够在浏览器中直接播放，但是不能够再次编辑。Dreamweaver中可以制作一些简单的Flash文件并且插入到网页对象中，但是还是建议读者能学习使用FlashMX来制作更为专业的Flash文件。第第1 1章章1.9.2上机操作绘制表格，并且在第一个单元格内插入一个Flash按钮。在其右侧插入Flash文本。第第1 1章章插入Flash游戏文件制作好的Flash游戏网页第第1 1章章1.10 1.10 插入音频和视频插入音频和视频v网页中插入的主要音频格式vMidi或Mid，MusicalInstrumentDigitalinterface直译为“乐器数字接口”，为大多数浏览器支持，且不需要插件。声音品质很好，且文件较小。但是Mid文件不可以被录制，且必须使用特殊的硬件和软件在计算机上合成。vWav较高的声音质量，能够为大多数浏览器支持，且不需要插件。但文件较大。vAif或aiff较高质量，和wav相近。1.10.1基本概念第第1 1章章v视频常见格式Mpeg或Mpgv一种压缩比例较大的活动图像和声音的视频压缩标准，也是VCD光盘所使用的标准。Aviv一种MS windows操作系统所使用的多媒体文件格式WmvvWindows操作系统自带的媒体播放器Windows media player所使用的文件格式RmvReal公司推广的一种多媒体文件格式，具有很好的压缩性能，网络中应用最广泛的格式之一。MovvApple公司推广的多媒体文件格式第第1 1章章1.10.2上机操作插入音频文件以类似的操作插入视频文件，并且按下F12进行预览第第1 1章章1.11 总结提高总结提高本章是Dreamweaver学习的基本章节，重点是介绍了Dreamweaver软件，以及插入图片、文本、表格、层、框架、Java小程序以及灵活多样的Flash文件。这些网页的基本零件在各个实例的制作过程中遇到过，通过这些训练，大家就可以尝试着制作自己的个人主页等简单的网页。但是由于缺少了CSS样式排版，缺少了ASP支持，缺少了数据库的连接，这里制作出的网页还只是一个静态的没有支持的简单网页。如何使用上面提到的知识进一步提升大家的网页制作水平，就需要读者认真地学习后续章节。在此，笔者鼓励读者在课余多多浏览观察制作的好的网页，并且多练习，多模仿。第第1 1章章1.12 本章习题本章习题 一、填空题1创建超链接地址可以链接到不同的目标，在网页中创建超链接的目标有：_、_、_、_等。2在网页中使用的图像格式主要有_、_、_、3种。3若要在调整图像尺寸时保持其宽高比，在拖动图像右下角点的同时，按住_键。4表格一般被划分为_、_、_ 3部分。5框架是由两种元素_和_组成。第第1 1章章二、选择题1创建虚拟链接使用的符号是：_A.B.#C.$D.*2GIF格式的图像的有点有_A.支持动画格式 B.持透明图标 C.无损压缩方式 D.支持24位真彩色3单元格中可以插入的对象有_A.文本B.图像 C.Flash动画D.JavaApplet4两个命名围巾Layer1和Layer2的层完全叠加在一起，要保证Layer1覆盖层Layer2，之需要设置Layer1的Z值_Layer2的Z索引值即可。A.大于 B.小于 C.等于D.都可以第第2 2章章第第2 2章章 CSS样式表与模板样式表与模板 认识认识CSSCSS 使用使用CSSCSS编辑器编辑器 背景样式的定义背景样式的定义 滤镜的使用滤镜的使用本章学习知识点本章学习知识点上上一一张张下下一一张张返返回回第第2 2章章2.12.1文字和图像的处理：生日贺卡文字和图像的处理：生日贺卡 本章内容目录本章内容目录2.2 CSS2.2 CSS样式：独具风格的主页样式：独具风格的主页 2.3 2.3 对文字运用对文字运用CSSCSS滤镜：蓝色生死恋滤镜：蓝色生死恋2.4 2.4 对图像运用对图像运用CSSCSS滤镜：图片滤镜滤镜：图片滤镜 2.5 2.5 层模板：海底世界层模板：海底世界 2.6 2.6 库项目的应用：公司主页库项目的应用：公司主页 2.72.7总结提高总结提高2.82.8本章习题本章习题 第第2 2章章2.1.1基本概念2.12.1文字和图像的处理：生日贺卡文字和图像的处理：生日贺卡 CSS(Cascading Sytle Sheet，层叠样式表)是用于增强和控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。CSS样式表也为他们提供的展示效果的项目给予更多的灵活性。属性，例如颜色、背景、边界、边框和许多的更多都能被所有的元素所应用。定义CSS样式 使用CSS样式对文本样式进行修改第第2 2章章打开已经准备好的网页素材2.1.2上机操作打开【CSS样式】面板第第2 2章章打开【新建CSS样式】对话框，了解各个部分的功能运用CSS样式表制作一张生日贺卡的文本样式和背景样式。使得页面上的字体为“幼圆”，大小为“中”,颜色为浅蓝，粗细为“细体”，并且有闪烁的效果。文本样式的定义。第第2 2章章修改前的效果修改后的效果第第2 2章章2.2 CSS2.2 CSS样式：独具风格的主页样式：独具风格的主页 2.2.1基本概念层叠样式表比较简单、灵活、易学，能支持任何浏览器。可以使用HTML标签或命名的方式定义，除可控制一些传统的文本属性外，例如字体、字号、颜色等，还可以控制一些比较特别的HTML属性，例如对象位置、图片效果、鼠标指针等。使用CSS面板灵活应用CSS样式对网页内容进行修改第第2 2章章2.2.2上机操作执行【窗口】|【CSS样式】选项，打开【CSS样式】面板，单击按钮，弹出【链接外部样式表】对话框执行【窗口】|【CSS样式】选项，打开【CSS样式】面板，单击按钮，弹出【链接外部样式表】对话框，如图2.10所示，从外部已有的CSS样式表中选择一个分配给当前的页面。点击【浏览】后，在弹出的【选择样式表文件】对话框中选择CSS文件。如图2.13所示。第第2 2章章对比添加CSS样式前后，网页的差别添加CSS样式前添加CSS样式后第第2 2章章2.3 2.3 对文字运用对文字运用CSSCSS滤镜：蓝色生死恋滤镜：蓝色生死恋2.3.1基本概念CSS滤镜实际上是CSS一个新的扩展部分，使用这种技术简单的语法就可以把可视化的滤镜和转换效果添加到一个标准的HTML元素上，例如图片、文本、以及其他一些对象，为页面添加一些丰富的变化。右侧为一些常用的滤镜，以及其功能说明。Alpha设置透明效果BlendTrans设置混合过渡效果Blur设置模糊效果Chroma将指定颜色设为透明DropShadow设置投影阴影FlipH设置水平翻转FlipV设置垂直翻转Glow设置发光效果Gray产生灰阶Invert设置反转底片效果Light设置灯光投影效果Mask设置蔗遮罩效果RevealTrans设置显示过渡效果Shadow设置阴影效果Wave设置水平与垂直波动效果Xray设置X光照效果第第2 2章章CSS滤镜常用的Alpha滤镜Blur滤镜FlipV滤镜FlipH滤镜第第2 2章章2.3.2上机操作输入“蓝色生死恋”文本在【类型】下将文字颜色选为白色，便于查看效果。在【扩展】下的【过滤器】中列出的就是所有的CSS滤镜，选择Glow滤镜，它可以使文字产生边缘发光的效果。本例中我们设置Glow(Color=red,Strength=8)，即颜色为红色（Red），发光强度为8，然后单击【确定】。第第2 2章章我们还可以利用Blur滤镜制作动感字，它的语法格式为Blur(Add=?,Direction=?,Strength=?)。我们定义Blur(Add=1,Direction=90,Strength=150)通过把过滤器设置为DropShadow(Color=6699cc,OffX=4,OffY=4,Positive=1)来产生如图2.20所示的阴影字第第2 2章章CSS不仅可以对文字进行样式的修改，还可以对表格进行修改。l 区块样式的修改：精确定义整段文本中文字的字距，对齐方式等属性l方框样式的修改：大表格的外面加一条细细的边框，可以使用边框样式边框样式的修改：定义特定元素的大小及其与周围元素的间距等属性2.4 2.4 对图像运用对图像运用CSSCSS滤镜：图片滤镜滤镜：图片滤镜 2.4.1基本概念第第2 2章章区块定义方框定义边框定义第第2 2章章2.4.2上机操作初始状态执行【窗口】|【CSS样式】选项，打开【CSS样式】面板，单击按钮，在弹出的对话框中作出选择选择，然后单击【确定】按钮。在【盒子】下的【边界】选项中，去掉【全部相同】选项前面的勾，将【右】和【下】选为“自动”。将【边框】下的【宽度】选项设为“细”，【颜色】的值设为FF0000。第第2 2章章将【扩展】下的【过滤器】设为Alpha(Opacity=30)最终的网页效果图第第2 2章章层是最早在图形图象处理中提出的一个概念，由于层的运用使得平面设计师在处理图像时可以多层操作、任意组合，从而大大提高了工作效率，也使创作出的效果更加丰富。Dreamweaver中的层概念与图像处理中层的概念不同，但它们都有一个共同点，就是层的重叠性。Dreamweaver中的层可以理解为浮动在网页上的一层透明纸，它可以被准确地定位于网页的任意位置，并且可以设置大小。作为一种网页元素定位技术，使用层可以以像素为单位精确定位页面元素。层还可以相互嵌套层，子层会继承父层的特征，如可见性、移动等。层在Dreamweaver中被认为是一个对象，这样就具有更多的特性，如制作动画、触发动作。如果要构建一个十分酷的网页，层的作用不能忽视。而对于层的应用。2.5.1基本概念2.5 2.5 层模板：海底世界层模板：海底世界 第第2 2章章2.5.2上机操作打开要插入层的页面插入层，并且在层中插入图片和文本第第2 2章章执行【文件】【另存为模板】命令打开【另存为模板】对话框中，在【站点】下拉列表中设置模板保存的站点，并定义模板名称后，单击【保存】按钮即可把当前网页转换为模板，同时将模板另存到选择的站点中网页最终的效果第第2 2章章2.6 2.6 库项目的应用：公司主页库项目的应用：公司主页 2.6.1基本概念在站点中，除了具有相同外观的许多页面外，还有一些需要经常更新的页面元素，例如版权声明、站点导航栏，这些内容与模板不同，它们只是页面中的一部分，在各个页面中的摆放位置可能不同，但内容却是一致的。那么，可以将这种内容保存为一个库文件，在需要的地方插入，在需要的时间快速更新。库与模板的作用一样，也是一种保证网页中的部件能够重复使用的工具。模板重复使用的是网页的一部分结构，而库则提供了一种重复使用网页对象的方法。第第2 2章章2.6.2上机操作使用库面板，首先执行【窗口】|【资源】命令，调出【资源】面板，单击左侧的库按钮，切换到库面板。单击库面板右下角的【新建库项目】按钮 双击新建的库项目，打开库项目编辑窗口第第2 2章章为一个鲜花礼品公司的主页创建并编辑库项目。公司已经设计好的主页，直接将网页中现有的对象元素转换为库文件执行【修改】|【库】|【增加对象到库】命令，将选中的内容转化为库项目选中内容反白，同时，库项目内容出现在【库】列表中，提示给新建的库文件命名第第2 2章章制作一个网页，并且选定插入点插入刚才保存的库项目，立即显示效果第第2 2章章2.7 总结提高总结提高本章重点介绍了DreamweaverMX中CSS样式表的使用，同时介绍了层和库的概念和使用。CSS样式表是网页设计中一种非常重要的技术，目前获得了广泛的使用，其发展势头势不可挡。CSS样式表的出现可以说是网页排版中的一次革命性进步。建议用户在初步掌握了创建和应用样式的方法后，直接学习并使用CSS语言编写样式表文件。由于层对象与动态效果有着密切的关系，因此完全掌握层技术是建立网页动态效果的关键。虽然层技术的应用并不复杂，但在页面中如何使用才是关键。第第2 2章章2.8 本章习题本章习题 一、填空题1如果想把一幅图象水平翻转应该用_，垂直翻转可以用_，想把整个图象制作成底片效果可以用_。2层的优点有：_A精确定位B.插入自如C加速浏览D.可叠加性3可以使用几种方法创建嵌套层？4网页制作中有些需要经常更新的页面元素，在各个页面中的摆放位置可能不同，但内容是一致的，这时可以把它们制作成_以提高制作和维护的效率。第第2 2章章5库有哪些作用？创建库项目的方法有哪些？6创建一个库项目，库项目的内容为你的电话号码和电子邮件地址。7设计一个网页，其内容为：床前明白光疑是地上霜举头望明月低头思故乡要求：将这首诗置于一个1行1列的表格中诗文内容字体为楷体，颜色为#00FF00，网页背景颜色为#FFFF99。表格的边框设为蓝色。三、问答题第第3 3章章第第3 3章章 行为与时间轴行为与时间轴 了解行为的含义了解行为的含义 掌握添加行为的方法掌握添加行为的方法 了解行为的类型了解行为的类型 掌握掌握网页动画的基本制作网页动画的基本制作本章学习知识点本章学习知识点上上一一张张下下一一张张返返回回第第3 3章章3.1 3.1 检查浏览器：自动链接主页检查浏览器：自动链接主页 本章内容目录本章内容目录3.2 3.2 跳转菜单：网络导航跳转菜单：网络导航 3.3 3.3 播放音乐：在线音乐点播播放音乐：在线音乐点播 3.4 3.4 拖动拖动层层：拼图游戏：拼图游戏 3.5 3.5 显示隐藏层：情人节礼物显示隐藏层：情人节礼物 3.6 3.6 时间轴的应用：飞翔时间轴的应用：飞翔 3.7 3.7 时间轴的应用：倒计时牌时间轴的应用：倒计时牌 3.8 3.8 行为与层技术结合：下拉式导航栏行为与层技术结合：下拉式导航栏 第第3 3章章本章内容目录本章内容目录3.9 3.9 时间轴与行为的结合：滑出式正文区时间轴与行为的结合：滑出式正文区 3.10 3.10 本章小结本章小结 3.11 3.11 本章习题本章习题第第3 3章章3.1 检查浏览器：自动链接主页检查浏览器：自动链接主页 3.1.1基本概念Dreamweaver的行为是运行在网页浏览器中的Javascript代码，设计者可以将这些行为放置在网页文档中。行为由事件和该事件所触发的动作所组成，通过行为的设置可以方便浏览者与网页之间进行交互。浏览者浏览网页过程中，浏览器对浏览者的行为作出某种回应，产生了消息，这就是事件。而动作是预先编写好的JavaScipt代码，由这些代码完成对事件的回应。Dreamweaver可以制作很多网页特效，但是这些特效在一些低版本的浏览器中无法正常显示，甚至干扰浏览者用户正常地阅读网页内容。检查浏览器操作可以自动地对浏览者的浏览器版本进行判断，这样可以为不同的浏览者订做不同的显示效果，让所有到网页的客人都感到满意。第第3 3章章插入表格，在表格内插入文字，并为文字插入“#”虚拟链接3.1.2上机操作单击【行为】浮动面板上的按钮，打开下拉菜单为文本添加动作。在下拉菜单中，选择【检查浏览器】动作。右击事件栏下的【onLoad】，单击右侧出现按钮，单击【显示事件】|【IE4.0】命令。再次单击按钮，打开下拉菜单，并且选择【onClick】事件，意味着当浏览者用鼠标点击这个链接时，将触发检查浏览器的动作第第3 3章章在打开的【检查浏览器】对话框中选对这个动作进行设置。这里的设置基本上采用了默认设置，即在正常状态下，跳转到默认的URL地址；而当浏览器版本过低，则跳转备用URL地址。单击【URL】对应的文本框后的【浏览】按钮，设置默认跳转网页第第3 3章章3.2 跳转菜单：网络导航跳转菜单：网络导航 3.2.1基本概念跳转菜单是非常重要的一种导航方式，经常可以在商务网站中看到它为各种门类不同的商品制作导航。网页的跳转菜单是文档内的弹出菜单，对站点访问者课件，并列出链接到文档或文件的选项。可以创建到整个Web站点上文档的链接、电子右键链接、到图形的链接，也可以创建到可以在浏览器打开的任何文件类型的链接。跳转菜单可包含三个基本部分：（可选）菜单选择提示，如菜单项类别说明，或一些提示信息等。（可选）“前往”按钮。（必需）所链接菜单项的列表：用户选择某个选项，则链接的文档或文件被打开。第第3 3章章3.2.2上机操作在【插入】快捷工具栏中选择【表单】，单击【跳转菜单】按钮。单击【窗口】|【行为】命令，打开【行为】浮动面板。鼠标左键单击编辑窗口内的跳转菜单，在行为面板中会出现设置好的行为。双击【行为】面板中【动作】栏下的【跳转菜单】动作，重新弹出【跳转菜单】对话框 第第3 3章章3.3 播放音乐：在线音乐点播播放音乐：在线音乐点播 3.3.1基本概念第一章介绍过在网页中插入媒体的方法，而这里则介绍如何使用行为来播放音乐，提供给用户与网页交互的机制。第第3 3章章3.3.2上机操作使用【地图】工具中的【矩形热点工具】和【圆形热点工具】绘制地图热点选中绘制好的矩形热点地图，单击菜单【窗口】|【行为】，在【行为】浮动面板中单击按钮，并在下拉菜单中选择第二项【播放声音】。在弹出的【播放声音中】，选择扩展名为“.mid”的音乐文件。这里默认的驱动动作发生的事件为【onClick】在编辑窗口中出现插件图标第第3 3章章3.4 拖动拖动层层：拼图游戏：拼图游戏 3.4.1基本概念 层不仅是在制作网页的过程中能够被设计师拖动，在网页生成后，层以及层中插入的内容也可以随之被移动。这样，层就能够被用来完成不同的任务.在拼图过程中，网页可以根据拼图放置的位置，在50像素区域内表示有效；而在拼图完成后，网页能通过JavaScript代码对拼图结果做出正确与否的判断。第第3 3章章3.4.2上机操作给出一幅原始的图像，作为参照物；绘制一个蓝色的背景区域，提示读者将拼图图片放置于目标的蓝色区域位置使用Fireworks或者其它软件，将原始的图片切割成不同的部分。第第3 3章章绘制层，并且将之前切割出来的每一个小图片插入到层中移动层，拖动刚插入的三个层到正确的位置上，在接下来的步骤要添加行为，所以要尽量地准确。第第3 3章章插入JavaScript脚本。将光标重新置于右上角插入三个层的单元格内，选择【插入】快捷栏中的【脚本】按钮。弹出如图3.17所示的对话框，在【语言】下拉菜单中选择【JavaScript】，并且在【内容】文本框中定义变量。代码内容为“v_Layer2=false;v_Layer3=false;v_Layer4=false;”。第第3 3章章添加拖动层行为。在编辑窗口左下角单击【body】标签选中整个页面，在菜单中选择【窗口】|【行为】|【拖动层】第第3 3章章设置“拖动层”动作的参数。在弹出的【拖动层】对话框中设置拖动层行为的基本参数，如图3.19所示。首先选择层为“Layer2”，单击【取得目前位置】按钮第第3 3章章按图3.19所示步骤3所示，单击【高级选项卡】，设置“拖动层”的高级参数。其中【呼叫JavaScript】后的文本框中需要填入“v_Layer2=false；”，而在【放下时：呼叫JavaScipt】后的文本框中填入“v_Layer2true；”重复上述步骤，为三个层添加“拖动层”动作第第3 3章章插入一个按钮。在网页右下角的表格内插入一个表单按钮。由于这里只是用按钮来触发一段JavaScript脚本，所以不需要用到表单。在此就不必插入标签，当出现提示询问是否需要添加表单标签，请选择【否】为按钮添加【调用JavaScript】行为，文本框中输入脚本：if(v_Layer2=true&v_Layer3=true&v_Layer4=true)confirm(拼图正确);elsealert(拼图错误,再试一下);第第3 3章章打乱三个层，为网页游戏的浏览者制造一些难度，增加游戏的乐趣读者根据本教材提供的素材，完成拼图其它部分的制作，最终的效果如图所示。第第3 3章章3.5 显示隐藏层：情人节礼物显示隐藏层：情人节礼物 3.5.1基本概念“显示隐藏层”动作显示、隐藏或恢复一个或多个层的默认可见性。此动作用于在用户与页进行交互时显示信息。“显示隐藏层”还可用于创建预先载入层，即一个最初挡住页的内容的较大的层，在所有页组件都完成载入后该层即消失所有通过层可以设置的效果都可以通过“显示隐藏层”设置出突然显示的效果，可以给浏览者一种意想不到的效果。第第3 3章章3.5.2上机操作通过设置页面属性来修改网页背景结合第一章制作“焰火晚会”的方法，添加JavaApplet到网页中之后添加一个表单按钮，作为焰火的触发器。但鼠标单击按钮后，JavaApplet开始工作，显示焰火效果第第3 3章章继续添加【显示隐藏层】动作。鼠标左键单击【按钮】按钮，打开【行为】浮动面板，添加“显示隐藏层”动作。设置事件为“onClick”，发生行为为显示层Layer1当网页浏览者单击此按钮后，触发焰火的效果，就可以的到一份意外的惊喜。第第3 3章章3.6 时间轴的应用：飞翔时间轴的应用：飞翔 3.6.1基本概念 时间轴的作用非常重要，在静态的网页中，虽然没有ASP代码为网页提供数据库的支持，也不象JavaApplet通过程序来实现动态图景的变换。时间轴只是简单地把网页中的内容记录先来，把内容的位置，大小记录到时间轴面板中，这样在网页生成后，就按照播放动画片的形式，以每秒固定的播放帧数来进行图像放映，达到动态的效果。时间轴的作用就是在网页中制作动画，使用时间轴创建的动画要比ActiveX、扩展插件或者Java Applet等更加有效，脚本代码运行更稳定。第第3 3章章3.6.2上机操作设置背景图像插入个层，并且在层中插入图像，为这个飞翔网页中添加演员第第3 3章章在事件轴内插入对象。在【属性】面板下有一个【时间轴】面板，平时都处于关闭状态，此时左击【时间轴】文字，随机其面板弹起。将层Layer3和层Layer4拖动到时间轴内。方法是左击各个层左上角的标签，按住不要松手，拖动至时间轴面板内合适的位置调整时间轴添加【播放时间轴】行为，单击事件栏内的按钮，打开下拉菜单，并且选择【onLoad】事件第第3 3章章3.7 时间轴的应用：倒计时牌时间轴的应用：倒计时牌 3.7.1基本概念与尝试使用一个时间轴控制页面上的所有操作相比，使用单独的事件轴分别用来控制页面中不同的离散的部分会更容易一些。比如一个页面中有很多的活动元素，每个元素的触发条件都是不同的。这一节演示多个时间轴的协调、连续工作。第第3 3章章3.7.2上机操作创建四个层，在层内分别写入“1”“2”“3”“4”“发射！”第第3 3章章设置行为，当装载网页的时候，将除“”以外的各个层都隐藏设置时间轴，当一段时间后，交替地隐藏层第第3 3章章3.8 行为与层技术结合：下拉式导航栏行为与层技术结合：下拉式导航栏 3.8.1基本概念 网页在展示中往往遇到面积有限的问题，如何在一个窗口大的区域内插入更多的导航呢？使用下拉式菜单是一个很好的选择。这种菜单平时是折叠收紧的，只有浏览者进行了某种操作的时候，菜单才打开。l对嵌套层添加行为l使用时间轴对下拉速度进行限制第第3 3章章3.8.2上机操作绘制嵌套层插入表格和文字。在父层中插入表格，并设置宽度和高度以及背景，然后在表格内为文字设置好样式第第3 3章章设置子层,添加文本。并且将子层添加到时间轴上。打开【时间轴】面板，按鼠标左键拖动子层，也就是Layer2，拖动到时间轴的合适位置后，松开左键后则添加完毕添加多个时间轴，并且重复以上的步骤第第3 3章章3.9 时间轴与行为的结合：滑出式正文区时间轴与行为的结合：滑出式正文区 3.9.1基本概念 时间轴和行为配合使用，可以制作互动性强，表现形式也更为丰富的网页。现在制作“滑出正文区”来把这Dreamweaver两大核心技术用到一起。如果正文慢慢浮现在屏幕上，再结合适合文字的音乐作为背景，确能提高浏览者对网页的兴趣。第第3 3章章3.9.2上机操作插入嵌套层插入一幅背景图像在子层中插入文本，并且设置文本属性。并且将子层移动到父层的最下方：子层的顶端与父层的底端平齐。打开【时间轴】面板。将子层拖入到时间轴面板中，并且拖动时间线到第400帧第第3 3章章左击时间线的最后一帧。回到编辑窗口内，拖动层至顶端，使Layer2的最下端在Layer1的最上端以上。有一条直线连接在Layer2的左上角播放时间轴Timeline1的行为添加【停止时间轴】行为，设置事件为“onMouseOver”。继续添加【播放事件轴】设置事件为“onMouseOut”第第3 3章章3.10 总结提高总结提高 本章通过讲述“行为”和“时间轴”的应用实例，介绍给了读者大部分的“行为”操作。但是这里要提醒读者使用“行为”的时候要注意确保合理和恰当，建议读者在同一个网页中不要使用过多的“行为”。这里主要是因为“行为”其本质是代码，当同时使用多个行为时，难免会出现个别变量在不同的行为中重复使用造成冲突，结果造成网页无法正常显示。而时间轴动画主要是通过设置随时间变化的层的位置、大小、可见性和叠放顺序来创建动画。第第3 3章章3.11 本章习题本章习题 （1）一个行为是由_和_两部分组成的。（2）行为可以绑定到连接、图像、表单元素或者多种其它HTML元素中的任何一种，但是不能将行为绑定到_。（3）动作是一段预先编写好的_源程序。（4）使用_动作在打开当前网页的同时，还可以再打开一个新的窗口。A.弹出信息B.播放声音C.显示弹出菜单D.打开浏览器窗口（5）“跳转菜单”和“跳转菜单开始”行为有什么区别，分别使用什么情况？（6）关于时间轴的行为有_、_和_。第第4 4章章第第4 4章章 动态网页动态网页(ASP)(ASP)与数据库与数据库 表单的制作与使用表单的制作与使用 脚本语言的使用脚本语言的使用 在网页中嵌入程序代码在网页中嵌入程序代码 基本对象和函数的应用基本对象和函数的应用本章学习知识点本章学习知识点上上一一张张下下一一张张返返回回第第4 4章章4.1 4.1 表单的基本操作：用户注册表单的基本操作：用户注册本章内容目录本章内容目录4.2 4.2 嵌入脚本语言：人际关系测试嵌入脚本语言：人际关系测试4.3 4.3 嵌入嵌入ASPASP语言：留言本语言：留言本4.4 Request4.4 Request对象和函数应用：石头剪刀布对象和函数应用：石头剪刀布4.5 Application4.5 Application和和SessionSession对象：计数器对象：计数器4.6 4.6 数据库的应用：登陆系统数据库的应用：登陆系统4.7 4.7 小结小结4.8 4.8 本章习题本章习题 第第4 4章章4.1 4.1 表单的基本操作：用户注册表单的基本操作：用户注册1表单的概念及用途2表单的基本参数1.Name2.Method3.Action它的语法格式：3表单的相关语法使用时的语法格式：Request.Form（element）（index）Count第第4 4章章4制作实例使自己制作的表单通过设置表单参数实现信息的传递第第4 4章章4.2 嵌入脚本语言：人际关系测试嵌入脚本语言：人际关系测试 脚本语言的基本概念及用途2脚本语言与程序语言以及静态页面语言之间的不同程序中用到脚本语言时所需做的说明如：说明之后的一段脚本语言是javascript。脚本语言使原本静态的页面变得动态、活泼，富有生气第第4 4章章4.3 嵌入嵌入ASP语言：留言本语言：留言本 ASP语言的基本概念及特征2加入ASP语言的页面被访问时实际的执行过程3ASP与HTML工作原理的不同ASP代码使所有任务都交给后台处理，从而起到保护源代码作用第第4 4章章4.4 Request对象和函数应用对象和函数应用石头剪刀布石头剪刀布 Request对象的基本概念及功能2Request对象的数据集合、属性、方法Form,QueryString,ServerVariable,Cookies,ClientCertific