dreamwaver网页设计第4章

1、人民邮电出版社人民邮电出版社 2012.2 2012.2网页设计与制作课件网页设计与制作课件 2012.2 2012.2l4.1 制作框架网站制作框架网站l4.2 层与时间轴的应用层与时间轴的应用l4.3 利用行为制作动态页面利用行为制作动态页面l4.4 制作表单页面制作表单页面网页设计与制作课件网页设计与制作课件 2012.2 2012.24.1 制作框架网站制作框架网站l框架是一个比较早出现的框架是一个比较早出现的HTML对象，框架的作对象，框架的作用就是把浏览器窗口划分为若干个区域，每个区用就是把浏览器窗口划分为若干个区域，每个区域可以分别显示不同的网页。使用框架可以非常域可以分别显示不

2、同的网页。使用框架可以非常方便的完成导航工作，而且各个框架之间决不存方便的完成导航工作，而且各个框架之间决不存在干扰问题，所以在模板出现以前框架技术一直在干扰问题，所以在模板出现以前框架技术一直普遍应用于页面的导航，它可以使网站导航比较普遍应用于页面的导航，它可以使网站导航比较清晰。清晰。网页设计与制作课件网页设计与制作课件 2012.2 2012.24.1 制作框架网站制作框架网站l使用框架建设网站的最大的特点是使网站风格能使用框架建设网站的最大的特点是使网站风格能够保持统一。一个网站的众多网页最好都有相同够保持统一。一个网站的众多网页最好都有相同的地方，来做到风格统一。可以把这个相同的部的

3、地方，来做到风格统一。可以把这个相同的部分单独的制作一个页面，作为框架结构的各个子分单独的制作一个页面，作为框架结构的各个子框架的内容给整个站点公用。通过这个方法达到框架的内容给整个站点公用。通过这个方法达到了网站的风格的统一。了网站的风格的统一。网页设计与制作课件网页设计与制作课件 2012.2 2012.24.1 框架的基本操作框架的基本操作l创建框架集和框架创建框架集和框架l选择框架和框架集选择框架和框架集l保存框架和框架集保存框架和框架集l设置框架集属性设置框架集属性l设置框架的背景色设置框架的背景色l在框架中设置链接在框架中设置链接网页设计与制作课件网页设计与制作课件 2012.2

4、2012.2创建框架集和框架创建框架集和框架l框架有两部分组成框架有两部分组成,即框架集和单个框架。框架集是即框架集和单个框架。框架集是在一个文档内定义一组框架结构的在一个文档内定义一组框架结构的HTML网页，它定网页，它定义了一个网页中的框架数目、每个框架的大小、载入义了一个网页中的框架数目、每个框架的大小、载入每个框架的网页源和每个框架的其他属性等；单个框每个框架的网页源和每个框架的其他属性等；单个框架指在网页中定义的一个区域，每个区域可以分别显架指在网页中定义的一个区域，每个区域可以分别显示不同的网页。创建框架集和创建框架是同步进行的。示不同的网页。创建框架集和创建框架是同步进行的。只要

5、创建了框架就一定形成了框架集；同样，创建的只要创建了框架就一定形成了框架集；同样，创建的框架集就一定具有框架。框架集就一定具有框架。网页设计与制作课件网页设计与制作课件 2012.2 2012.2创建框架页面创建框架页面l使用使用“新建文档新建文档”对话框对话框l使用菜单命令使用菜单命令l使用布局面板创建框架页面使用布局面板创建框架页面网页设计与制作课件网页设计与制作课件 2012.2 2012.2使用使用“新建文档新建文档”对话框对话框网页设计与制作课件网页设计与制作课件 2012.2 2012.2网页设计与制作课件网页设计与制作课件 2012.2 2012.2使用菜单命令使用菜单命令l新建

6、一个空白文档新建一个空白文档l执行执行“插入插入”“HTML”“HTML”“框架框架”命令命令，在弹出的子菜单中选择，在弹出的子菜单中选择所需的选项所需的选项网页设计与制作课件网页设计与制作课件 2012.2 2012.2使用布局面板创建框架页面使用布局面板创建框架页面以上方法既是创建框架集也是创建框架的。以上方法既是创建框架集也是创建框架的。网页设计与制作课件网页设计与制作课件 2012.2 2012.2创建框架集创建框架集l创建自定义框架集，可以执行创建自定义框架集，可以执行“查看查看”“可视化助理可视化助理”“框架边框框架边框”网页设计与制作课件网页设计与制作课件 2012.2 2012

7、.2选择框架和框架集选择框架和框架集l在文档窗口的设计视图中，在选定了一个框架后，在文档窗口的设计视图中，在选定了一个框架后，其边框被虚线环绕；在选定了一个框架集后，该其边框被虚线环绕；在选定了一个框架集后，该框架集内的框架的所有边框都被虚线环绕。框架集内的框架的所有边框都被虚线环绕。l选择框架选择框架按住按住Alt键选择框架键选择框架使用框架面板选择框架使用框架面板选择框架l选择框架集选择框架集单击框架的边框单击框架的边框单击单击“框架框架”面板中最外层的边框面板中最外层的边框网页设计与制作课件网页设计与制作课件 2012.2 2012.2保存框架和框架集保存框架和框架集l在浏览器中预览框架

8、集前，必须保存框架集文件，在浏览器中预览框架集前，必须保存框架集文件，以及要在框架中显示的所有文档。可以单独保存以及要在框架中显示的所有文档。可以单独保存每个框架集文件和带框架的文档，也可以同时保每个框架集文件和带框架的文档，也可以同时保存框架集文件和框架中出现的所有文档。存框架集文件和框架中出现的所有文档。网页设计与制作课件网页设计与制作课件 2012.2 2012.2l保存框架集保存框架集选择框架集之后，进行保存。选择框架集之后，进行保存。只保存框架集的框架结构页面是不能完全显示的，只保存框架集的框架结构页面是不能完全显示的，还必须将每个框架文档进行保存。还必须将每个框架文档进行保存。l保

9、存框架保存框架鼠标单击框架文档，进行框架页保存。鼠标单击框架文档，进行框架页保存。网页设计与制作课件网页设计与制作课件 2012.2 2012.2保存框架集和框架保存框架集和框架l执行执行“文件文件”， “保存全部保存全部”，将整个框架集保，将整个框架集保存为存为index.htmll接着保存下面的各框架。接着保存下面的各框架。网页设计与制作课件网页设计与制作课件 2012.2 2012.2设置框架属性设置框架属性l选定具体框架，利用选定具体框架，利用“属性属性”面板进行设置。面板进行设置。网页设计与制作课件网页设计与制作课件 2012.2 2012.2设置框架集属性设置框架集属性l选定框架集

10、后，利用选定框架集后，利用“属性属性”面板进行设置。面板进行设置。网页设计与制作课件网页设计与制作课件 2012.2 2012.2设置框架的背景色设置框架的背景色l将光标置于要改变背景色的框架中将光标置于要改变背景色的框架中l执行执行“修改修改” “页面属性页面属性”命令，打开命令，打开“页面属性页面属性”对话框进行设置对话框进行设置网页设计与制作课件网页设计与制作课件 2012.2 2012.2在框架中设置链接在框架中设置链接l应用一个框架的一个主要目的是实现框架之间的应用一个框架的一个主要目的是实现框架之间的链接。链接。网页设计与制作课件网页设计与制作课件 2012.2 2012.2浮动框

11、架浮动框架l。天气预报浮动框架网页设计与制作课件网页设计与制作课件 2012.2 2012.24.2 层与时间轴的应用层与时间轴的应用l层是一种层是一种HTMLHTML元素，可以将它定位到网页的任意位置。层元素，可以将它定位到网页的任意位置。层可以包含文字、图像或其他任何可在可以包含文字、图像或其他任何可在HTMLHTML文档正文中放入文档正文中放入的内容。的内容。层最主要的特性是它可以悬浮在网页内容之上。层最主要的特性是它可以悬浮在网页内容之上。换句话说，可以在网页上任意改变层的位置，实现对层的换句话说，可以在网页上任意改变层的位置，实现对层的精确定位。正是由于层的这种特性，才利用层实现对网

12、页精确定位。正是由于层的这种特性，才利用层实现对网页中的内容进行精确定位。中的内容进行精确定位。l层可以被显示或隐藏，通过程序在网页中控制层的显示或层可以被显示或隐藏，通过程序在网页中控制层的显示或隐藏，实现层上内容的动态交替显示，实现一些特殊的显隐藏，实现层上内容的动态交替显示，实现一些特殊的显示效果。层还可以被重叠，因此可以在网页中实现内容的示效果。层还可以被重叠，因此可以在网页中实现内容的重叠效果。重叠效果。网页设计与制作课件网页设计与制作课件 2012.2 2012.2层的基本操作层的基本操作l在在Dreamweaver中可以直接在网页中插入层。中可以直接在网页中插入层。l通过通过“层

13、层”面板可以管理文档中的层。使用面板可以管理文档中的层。使用“层层”面面板可防止重叠，更改层的可见性，将层嵌套或层叠，板可防止重叠，更改层的可见性，将层嵌套或层叠，以及选择一个或多个层。以及选择一个或多个层。l执行执行“窗口窗口” “层层”命令，或按命令，或按F2键，打开键，打开“层层”面板，可以看到所有的层都显示在其中。面板，可以看到所有的层都显示在其中。l要更改层的排列次序，可通过修改层的要更改层的排列次序，可通过修改层的Z值值来实现。来实现。单击单击Z列中的数字，为所选层输入新的列中的数字，为所选层输入新的Z值，即可改值，即可改变层的排列顺序。变层的排列顺序。网页设计与制作课件网页设计与

14、制作课件 2012.2 2012.2层的基本操作层的基本操作l插入层插入层l设置层的属性设置层的属性l选择层选择层l调整层的大小调整层的大小l移动层移动层网页设计与制作课件网页设计与制作课件 2012.2 2012.2插入层插入层l将光标置于要插入层的位置，执行将光标置于要插入层的位置，执行“插入插入” “布局对象布局对象” “层层”命令命令 设置层的属性设置层的属性l选择一个层，执行选择一个层，执行“窗口窗口” “属性属性”命令，命令，打开打开“属性属性”面板来更改层的属性。面板来更改层的属性。网页设计与制作课件网页设计与制作课件 2012.2 2012.2选择层选择层l选择层的三种方法是：

15、选择层的三种方法是： 将光标移动至需选择的层边框，光标变为将光标移动至需选择的层边框，光标变为 ，单击，单击鼠标左键即可选择该层。鼠标左键即可选择该层。 在层的内部单击属性，显示层的选择柄在层的内部单击属性，显示层的选择柄 ，单击选，单击选择柄，即可选择层，如果选择柄不可见，可在该层中择柄，即可选择层，如果选择柄不可见，可在该层中的任意位置单击以显示该选择柄。的任意位置单击以显示该选择柄。 打开打开“层层”面板面板，在，在“层层”面板中选择层名称，即面板中选择层名称，即可选择该层。按可选择该层。按shiftshift可以选择多个层。可以选择多个层。网页设计与制作课件网页设计与制作课件 2012

16、.2 2012.2调整层的大小调整层的大小l单击层的边框调整层的大小单击层的边框调整层的大小l使用属性面板调整层的大小使用属性面板调整层的大小网页设计与制作课件网页设计与制作课件 2012.2 2012.24.3 利用行为制作动态页面利用行为制作动态页面l一般说来，动态网页是通过JavaScript或基于JavaScript的DHTML代码来实现的。包含JavaScript脚本的网页，还能够实现用户与页面的简单交互。但是编写脚本既复杂又专业，需要专门学习，而Dreamweaver 提供了“行为”的机制，虽然行为也是基于JavaScript来实现动态网页和交互的，但却不需书写任何代码。在可视化环

17、境中单击几个按钮，填几个选项就可以实现丰富的动态页面效果，实现人与页面的简单交互。网页设计与制作课件网页设计与制作课件 2012.2 2012.2利用行为制作动态页面利用行为制作动态页面l行为的概念行为的概念l使用行为创建动感网页使用行为创建动感网页l利用脚本制作特效网页利用脚本制作特效网页网页设计与制作课件网页设计与制作课件 2012.2 2012.24.3.1 行为的概念行为的概念l行为是目前设计网页的主流技术之一，它强大的网页行为是目前设计网页的主流技术之一，它强大的网页互动功能，使众多的网页设计者能发挥最大的思维空互动功能，使众多的网页设计者能发挥最大的思维空间，其效果更令网络上的众多

18、浏览者感叹不已。间，其效果更令网络上的众多浏览者感叹不已。l行为是一些行为是一些JavaScript程序，它由两部分组成：一部程序，它由两部分组成：一部分是事件，另一部分是动作。动作是特定的分是事件，另一部分是动作。动作是特定的JavaScript程序，只要事件发生，相应的程序就会自程序，只要事件发生，相应的程序就会自动运行。动运行。网页设计与制作课件网页设计与制作课件 2012.2 2012.2事事 件件l事件用于指定选定的行为动作在何种情况下发生。事件用于指定选定的行为动作在何种情况下发生。网页窗口事件网页窗口事件onMove:移动窗口时发生的事件。移动窗口时发生的事件。onLoad:选定

19、的对象出现在浏览器时发生的事件。选定的对象出现在浏览器时发生的事件。onResize:访问者改变窗口的大小时发生的事件。访问者改变窗口的大小时发生的事件。onUnload:访问者退出网页文档时发生的事件。访问者退出网页文档时发生的事件。网页设计与制作课件网页设计与制作课件 2012.2 2012.2关于鼠标和键盘的事件关于鼠标和键盘的事件onClick:用鼠标单击选定元素的一瞬间发生的事件。用鼠标单击选定元素的一瞬间发生的事件。onFocus:鼠标指针移动到窗口上，即激活之后发生的事件。鼠标指针移动到窗口上，即激活之后发生的事件。onMouseDown:单击鼠标右键一瞬间发生的事件。单击鼠标右

20、键一瞬间发生的事件。onMouseMove:鼠标指针经过选定元素上方时发生的事件。鼠标指针经过选定元素上方时发生的事件。onMouseOut:鼠标指针经过选定元素之外时发生的事件。鼠标指针经过选定元素之外时发生的事件。onMouseOver:鼠标指针经过选定元素上方时发生的事件。鼠标指针经过选定元素上方时发生的事件。onMouseUp:单击鼠标右键单击鼠标右键,然后释放时发生的事件。然后释放时发生的事件。onScroll:访问者在浏览器上移动滚动条的时候发生的事件。访问者在浏览器上移动滚动条的时候发生的事件。onKeyDown:在键盘上按住特定键时发生的事件。在键盘上按住特定键时发生的事件。o

21、nKeyPress:在键盘上按特定键时发生的事件。在键盘上按特定键时发生的事件。onKeyUp:在键盘上按下特定键并释放时发生的事件。在键盘上按下特定键并释放时发生的事件。网页设计与制作课件网页设计与制作课件 2012.2 2012.2关于表单的事件关于表单的事件onAfterupdate:更新表单文档的内容时发生的事件。更新表单文档的内容时发生的事件。onBeforeUpdate:改变表单文档的项目时发生的事件。改变表单文档的项目时发生的事件。onChange:访问者修改表单文档的初始值时发生的事件。访问者修改表单文档的初始值时发生的事件。onReset:将表单文档重设置为初始值时发生的事件

22、。将表单文档重设置为初始值时发生的事件。onSubmit:访问者传送表单文档时发生的事件。访问者传送表单文档时发生的事件。onSelect:访问者选定文本字段中的内容时发生的事件。访问者选定文本字段中的内容时发生的事件。网页设计与制作课件网页设计与制作课件 2012.2 2012.2其他事件其他事件onError:在加载文档的过程中，发生错误时发生的事件。在加载文档的过程中，发生错误时发生的事件。onFilterChange:运用于选定元素的字段发生变化时发生运用于选定元素的字段发生变化时发生的事件。的事件。Onfinish:用功能来显示的内容结束时发生的事件。用功能来显示的内容结束时发生的事

23、件。Onstart:开始应用功能时发生的事件。开始应用功能时发生的事件。网页设计与制作课件网页设计与制作课件 2012.2 2012.24.3.2 使用行为创建动感网页使用行为创建动感网页l交换图象l弹出信息l打开浏览器窗口l显示-隐藏层l检查表单l设置状态栏文本l转到URLl创建跳转菜单网页设计与制作课件网页设计与制作课件 2012.2 2012.2交换图象交换图象l在网络上看到过这样的网页，当鼠标移动到图在网络上看到过这样的网页，当鼠标移动到图象上，网页会自动变换成不同的图象，这种方象上，网页会自动变换成不同的图象，这种方法用来展示产品，效果挺不错。法用来展示产品，效果挺不错。网页设计与制

24、作课件网页设计与制作课件 2012.2 2012.2交换图象交换图象l选中文档中的图片，打开选中文档中的图片，打开 “行为行为”面板面板，单击面，单击面板上的板上的“+”“+”按钮按钮，在弹出的菜单中选择，在弹出的菜单中选择“交换图交换图象象”选项，打开选项，打开“交换图象交换图象” ” 对话框对话框网页设计与制作课件网页设计与制作课件 2012.2 2012.2弹出信息弹出信息l弹出信息动作显示一个带有弹出信息动作显示一个带有JavaScriptJavaScript警告。警告。l“弹出信息弹出信息”动作不能控制动作不能控制JavaScriptJavaScript警告的外观，警告的外观，这是由

25、访问者的浏览器决定的。这是由访问者的浏览器决定的。l如果希望对信息的外观进行更多的控制，可使用如果希望对信息的外观进行更多的控制，可使用“打开浏览器窗口打开浏览器窗口”行为。行为。网页设计与制作课件网页设计与制作课件 2012.2 2012.2l打开文档，单击窗口左下角的打开文档，单击窗口左下角的标签标签，打开，打开 “行为行为”面板面板，单击面板上的，单击面板上的“+”“+”按钮按钮，在弹，在弹出的菜单中选择出的菜单中选择“弹出信息弹出信息”选项，打开选项，打开“弹出弹出信息信息” ” 对话框对话框注意：将事件设置为注意：将事件设置为onloadonload, ,表示载入页面时弹出该信息。表

26、示载入页面时弹出该信息。网页设计与制作课件网页设计与制作课件 2012.2 2012.2打开浏览器窗口打开浏览器窗口l使用使用“打开浏览器窗口打开浏览器窗口”动作可以在一个新的窗口动作可以在一个新的窗口中打开中打开URL, ,可以指定新窗口的属性、特性和名称。可以指定新窗口的属性、特性和名称。l打开文档，单击窗口左下角的打开文档，单击窗口左下角的标签标签，打开，打开 “行为行为”面板面板，单击面板上的，单击面板上的“+”“+”按钮按钮，在弹出，在弹出的菜单中选择的菜单中选择“打开浏览器窗口打开浏览器窗口”选项，打开选项，打开“打开浏览器窗口打开浏览器窗口” ” 对话框对话框网页设计与制作课件网

27、页设计与制作课件 2012.2 2012.2“打开浏览器窗口打开浏览器窗口” 对话框对话框网页设计与制作课件网页设计与制作课件 2012.2 2012.2显示显示-隐藏层隐藏层l“显示显示- -隐藏层隐藏层”动作显示、隐藏或恢复层的动作显示、隐藏或恢复层的默认可见性，此动作用于在用户与网页进行默认可见性，此动作用于在用户与网页进行交互时显示信息。交互时显示信息。网页设计与制作课件网页设计与制作课件 2012.2 2012.2检查表单检查表单l选中表单域选中表单域，打开，打开 “行为行为”面板面板，单击面板上，单击面板上的的“+”“+”按钮按钮，在弹出的菜单中选择，在弹出的菜单中选择“检查表单检

28、查表单”选项，打开选项，打开“检查表单检查表单” ” 对话框对话框网页设计与制作课件网页设计与制作课件 2012.2 2012.2设置状态栏信息设置状态栏信息l“设置状态栏文本设置状态栏文本”动作在浏览器窗口底部左侧的状动作在浏览器窗口底部左侧的状态栏中显示信息。可以使用此动作在状态栏说明链接态栏中显示信息。可以使用此动作在状态栏说明链接的目标，而不是显示与之关联的的目标，而不是显示与之关联的URLURL。l打开文档，单击窗口左下角的打开文档，单击窗口左下角的标签标签，打开，打开 “行为行为”面板面板，单击面板上的，单击面板上的“+”“+”按钮按钮，在弹，在弹出的菜单中选择出的菜单中选择“设置

29、文本设置文本”选项，选择选项，选择“设置设置状态栏文本状态栏文本”，打开，打开“设置状态栏文本设置状态栏文本” ” 对话对话框框网页设计与制作课件网页设计与制作课件 2012.2 2012.2转到转到URLl利用转到利用转到URLURL动作可在当前窗口或指定的框架中打动作可在当前窗口或指定的框架中打开一个新页开一个新页, ,此动作对通过一次单击更改两个或多此动作对通过一次单击更改两个或多个框架的内容特别有用。还可以在时间轴中调用此个框架的内容特别有用。还可以在时间轴中调用此动作在指定的时间间隔后跳到一个新页。动作在指定的时间间隔后跳到一个新页。l打开文档，单击窗口左下角的打开文档，单击窗口左下

30、角的标签或任意标签或任意对象对象，打开，打开 “行为行为”面板面板，单击面板上的，单击面板上的“+”“+”按钮按钮，在弹出的菜单中选择，在弹出的菜单中选择“转到转到URLURL”选项，选项，打开打开“转到转到URL” URL” 对话框对话框网页设计与制作课件网页设计与制作课件 2012.2 2012.2“转到转到URL” 对话对话框框网页设计与制作课件网页设计与制作课件 2012.2 2012.2创建跳转菜单创建跳转菜单l跳转菜单是超级链接的一种形式，使用跳转菜单要比跳转菜单是超级链接的一种形式，使用跳转菜单要比其他形式链接节省更多的空间，跳转菜单从菜单发展其他形式链接节省更多的空间，跳转菜单从菜单发展而来，浏览者单击并选择下拉菜单时会跳转到目标网而来，浏览者单击并选择