dreamwaver网页设计第4章

人民邮电出版社2012.2第4章网页设计与美化《网页设计与制作》课件2012.2第4章网页设计与美化4.1制作框架网站4.2层与时间轴的应用4.3利用行为制作动态页面4.4制作表单页面《网页设计与制作》课件2012.24.1制作框架网站框架是一个比较早出现的HTML对象，框架的作用就是把浏览器窗口划分为若干个区域，每个区域可以分别显示不同的网页。使用框架可以非常方便的完成导航工作，而且各个框架之间决不存在干扰问题，所以在模板出现以前框架技术一直普遍应用于页面的导航，它可以使网站导航比较清晰。《网页设计与制作》课件2012.24.1制作框架网站使用框架建设网站的最大的特点是使网站风格能够保持统一。一个网站的众多网页最好都有相同的地方，来做到风格统一。可以把这个相同的部分单独的制作一个页面，作为框架结构的各个子框架的内容给整个站点公用。通过这个方法达到了网站的风格的统一。《网页设计与制作》课件2012.24.1框架的基本操作创建框架集和框架选择框架和框架集保存框架和框架集设置框架集属性设置框架的背景色在框架中设置链接《网页设计与制作》课件2012.2创建框架集和框架框架有两部分组成,即框架集和单个框架。框架集是在一个文档内定义一组框架结构的HTML网页，它定义了一个网页中的框架数目、每个框架的大小、载入每个框架的网页源和每个框架的其他属性等；单个框架指在网页中定义的一个区域，每个区域可以分别显示不同的网页。创建框架集和创建框架是同步进行的。只要创建了框架就一定形成了框架集；同样，创建的框架集就一定具有框架。《网页设计与制作》课件2012.2创建框架页面使用“新建文档”对话框使用菜单命令使用布局面板创建框架页面《网页设计与制作》课件2012.2使用“新建文档”对话框《网页设计与制作》课件2012.2《网页设计与制作》课件2012.2使用菜单命令新建一个空白文档执行“插入”“HTML”“框架”命令，在弹出的子菜单中选择所需的选项《网页设计与制作》课件2012.2使用布局面板创建框架页面以上方法既是创建框架集也是创建框架的。《网页设计与制作》课件2012.2创建框架集创建自定义框架集，可以执行“查看”“可视化助理”“框架边框”《网页设计与制作》课件2012.2选择框架和框架集在文档窗口的设计视图中，在选定了一个框架后，其边框被虚线环绕；在选定了一个框架集后，该框架集内的框架的所有边框都被虚线环绕。选择框架①按住Alt键选择框架②使用框架面板选择框架选择框架集①单击框架的边框②单击“框架”面板中最外层的边框《网页设计与制作》课件2012.2保存框架和框架集在浏览器中预览框架集前，必须保存框架集文件，以及要在框架中显示的所有文档。可以单独保存每个框架集文件和带框架的文档，也可以同时保存框架集文件和框架中出现的所有文档。《网页设计与制作》课件2012.2保存框架集选择框架集之后，进行保存。只保存框架集的框架结构页面是不能完全显示的，还必须将每个框架文档进行保存。保存框架鼠标单击框架文档，进行框架页保存。《网页设计与制作》课件2012.2保存框架集和框架执行“文件”，“保存全部”，将整个框架集保存为index.html接着保存下面的各框架。《网页设计与制作》课件2012.2设置框架属性选定具体框架，利用“属性”面板进行设置。《网页设计与制作》课件2012.2设置框架集属性选定框架集后，利用“属性”面板进行设置。《网页设计与制作》课件2012.2设置框架的背景色将光标置于要改变背景色的框架中执行“修改”“页面属性”命令，打开“页面属性”对话框进行设置《网页设计与制作》课件2012.2在框架中设置链接应用一个框架的一个主要目的是实现框架之间的链接。《网页设计与制作》课件2012.2浮动框架iframe。。。。。/iframe天气预报浮动框架iframesrc=http://m.weather.com.cn/m/pn1/weather.htmwidth=height=marginwidth=0marginheight=0hspace=0vspace=0frameborder=0scrolling=no/iframe《网页设计与制作》课件2012.24.2层与时间轴的应用层是一种HTML元素，可以将它定位到网页的任意位置。层可以包含文字、图像或其他任何可在HTML文档正文中放入的内容。层最主要的特性是它可以悬浮在网页内容之上。换句话说，可以在网页上任意改变层的位置，实现对层的精确定位。正是由于层的这种特性，才利用层实现对网页中的内容进行精确定位。层可以被显示或隐藏，通过程序在网页中控制层的显示或隐藏，实现层上内容的动态交替显示，实现一些特殊的显示效果。层还可以被重叠，因此可以在网页中实现内容的重叠效果。《网页设计与制作》课件2012.2层的基本操作在Dreamweaver中可以直接在网页中插入层。通过“层”面板可以管理文档中的层。使用“层”面板可防止重叠，更改层的可见性，将层嵌套或层叠，以及选择一个或多个层。执行“窗口”“层”命令，或按F2键，打开“层”面板，可以看到所有的层都显示在其中。要更改层的排列次序，可通过修改层的Z值来实现。单击Z列中的数字，为所选层输入新的Z值，即可改变层的排列顺序。《网页设计与制作》课件2012.2层的基本操作插入层设置层的属性选择层调整层的大小移动层《网页设计与制作》课件2012.2插入层将光标置于要插入层的位置，执行“插入”“布局对象”“层”命令设置层的属性选择一个层，执行“窗口”“属性”命令，打开“属性”面板来更改层的属性。《网页设计与制作》课件2012.2选择层选择层的三种方法是：①将光标移动至需选择的层边框，光标变为，单击鼠标左键即可选择该层。②在层的内部单击属性，显示层的选择柄，单击选择柄，即可选择层，如果选择柄不可见，可在该层中的任意位置单击以显示该选择柄。③打开“层”面板，在“层”面板中选择层名称，即可选择该层。按shift可以选择多个层。《网页设计与制作》课件2012.2调整层的大小单击层的边框调整层的大小使用属性面板调整层的大小《网页设计与制作》课件2012.24.3利用行为制作动态页面一般说来，动态网页是通过JavaScript或基于JavaScript的DHTML代码来实现的。包含JavaScript脚本的网页，还能够实现用户与页面的简单交互。但是编写脚本既复杂又专业，需要专门学习，而Dreamweaver提供了“行为”的机制，虽然行为也是基于JavaScript来实现动态网页和交互的，但却不需书写任何代码。在可视化环境中单击几个按钮，填几个选项就可以实现丰富的动态页面效果，实现人与页面的简单交互。《网页设计与制作》课件2012.2利用行为制作动态页面行为的概念使用行为创建动感网页利用脚本制作特效网页《网页设计与制作》课件2012.24.3.1行为的概念行为是目前设计网页的主流技术之一，它强大的网页互动功能，使众多的网页设计者能发挥最大的思维空间，其效果更令网络上的众多浏览者感叹不已。行为是一些JavaScript程序，它由两部分组成：一部分是事件，另一部分是动作。动作是特定的JavaScript程序，只要事件发生，相应的程序就会自动运行。《网页设计与制作》课件2012.2事件事件用于指定选定的行为动作在何种情况下发生。网页窗口事件onMove:移动窗口时发生的事件。onLoad:选定的对象出现在浏览器时发生的事件。onResize:访问者改变窗口的大小时发生的事件。onUnload:访问者退出网页文档时发生的事件。《网页设计与制作》课件2012.2关于鼠标和键盘的事件onClick:用鼠标单击选定元素的一瞬间发生的事件。onFocus:鼠标指针移动到窗口上，即激活之后发生的事件。onMouseDown:单击鼠标右键一瞬间发生的事件。onMouseMove:鼠标指针经过选定元素上方时发生的事件。onMouseOut:鼠标指针经过选定元素之外时发生的事件。onMouseOver:鼠标指针经过选定元素上方时发生的事件。onMouseUp:单击鼠标右键,然后释放时发生的事件。onScroll:访问者在浏览器上移动滚动条的时候发生的事件。onKeyDown:在键盘上按住特定键时发生的事件。onKeyPress:在键盘上按特定键时发生的事件。onKeyUp:在键盘上按下特定键并释放时发生的事件。《网页设计与制作》课件2012.2关于表单的事件onAfterupdate:更新表单文档的内容时发生的事件。onBeforeUpdate:改变表单文档的项目时发生的事件。onChange:访问者修改表单文档的初始值时发生的事件。onReset:将表单文档重设置为初始值时发生的事件。onSubmit:访问者传送表单文档时发生的事件。onSelect:访问者选定文本字段中的内容时发生的事件。《网页设计与制作》课件2012.2其他事件onError:在加载文档的过程中，发生错误时发生的事件。onFilterChange:运用于选定元素的字段发生变化时发生的事件。Onfinish:用功能来显示的内容结束时发生的事件。Onstart:开始应用功能时发生的事件。《网页设计与制作》课件2012.24.3.2使用行为创建动感网页交换图象弹出信息打开浏览器窗口显示-隐藏层检查表单设置状态栏文本转到URL创建跳转菜单《网页设计与制作》课件2012.2交换图象在网络上看到过这样的网页，当鼠标移动到图象上，网页会自动变换成不同的图象，这种方法用来展示产品，效果挺不错。《网页设计与制作》课件2012.2交换图象选中文档中的图片，打开“行为”面板，单击面板上的“+”按钮，在弹出的菜单中选择“交换图象”选项，打开“交换图象”对话框《网页设计与制作》课件2012.2弹出信息弹出信息动作显示一个带有JavaScript警告。“弹出信息”动作不能控制JavaScript警告的外观，这是由访问者的浏览器决定的。如果希望对信息的外观进行更多的控制，可使用“打开浏览器窗口”行为。《网页设计与制作》课件2012.2打开文档，单击窗口左下角的body标签，打开“行为”面板，单击面板上的“+”按钮，在弹出的菜单中选择“弹出信息”选项，打开“弹出信息”对话框注意：将事件设置为onload,表示载入页面时弹出该信息。《网页设计与制作》课件2012.2打开浏览器窗口使用“打开浏览器窗口”动作可以在一个新的窗口中打开URL,可以指定新窗口的属性、特性和名称。打开文档，单击窗口左下角的body标签，打开“行为”面板，单击面板上的“+”按钮，在弹出的菜单中选择“打开浏览器窗口”选项，打开“打开浏览器窗口”对话框《网页设计与制作》课件2012.2“打开浏览器窗口”对话框《网页设计与制作》课件2012.2显示-隐藏层“显示-隐藏层”动作显示、隐藏或恢复层的默认可见性，此动作用于在用户与网页进行交互时显示信息。《网页设计与制作》课件2012.2检查表单选中表单域，打开“行为”面板，单击面板上的“+”按钮，在弹出的菜单中选择“检查表单”选项，打开“检查表单”对话框《网页设计与制作》课件2012.2设置状态栏信息“设置状态栏文本”动作在浏览器窗口底部左侧的状态栏中显示信息。可以使用此动作在状态栏说明链接的目标，而不是显示与之关联的URL。打开文档，单击窗口左下角的body标签，打开“行为”面板，单击面板上的“+”按钮，在弹出的菜单中选择“设置文本”选项，选择“设置状态栏文本”，打开“设置状态栏文本”对话框《网页设计与制作》课件2012.2转到URL利用转到URL动作可在当前窗口或指定的框架中打开一个新页,此动作对通过一次单击更改两个或多个框架的内容特别有用。还可以在时间轴中调用此动作在指定的时间间隔后跳到一个新页。打开文档，单击窗口左下角的body标签或任意对象，打开“行为”面板，单击