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