dreamwaver网页设计第4章ppt课件

1、第4章 网页设计与美化.第4章 网页设计与美化4.1 制造框架网站4.2 层与时间轴的运用4.3 利用行为制造动态页面4.4 制造表单页面.4.1 制造框架网站框架是一个比较早出现的HTML对象，框架的作用就是把阅读器窗口划分为假设干个区域，每个区域可以分别显示不同的网页。运用框架可以非常方便的完成导航任务，而且各个框架之间决不存在干扰问题，所以在模板出现以前框架技术不断普遍运用于页面的导航，它可以使网站导航比较明晰。.4.1 制造框架网站运用框架建立网站的最大的特点是使网站风格可以坚持一致。一个网站的众多网页最好都有一样的地方，来做到风格一致。可以把这个一样的部分单独的制造一个页面，作为框架

2、构造的各个子框架的内容给整个站点公用。经过这个方法到达了网站的风格的一致。.4.1 框架的根本操作创建框架集和框架选择框架和框架集保管框架和框架集设置框架集属性设置框架的背风光在框架中设置链接.创建框架集和框架框架有两部分组成,即框架集和单个框架。框架集是在一个文档内定义一组框架构造的HTML网页，它定义了一个网页中的框架数目、每个框架的大小、载入每个框架的网页源和每个框架的其他属性等；单个框架指在网页中定义的一个区域，每个区域可以分别显示不同的网页。创建框架集和创建框架是同步进展的。只需创建了框架就一定构成了框架集；同样，创建的框架集就一定具有框架。.创建框架页面运用“新建文档对话框运用菜单

3、命令运用规划面板创建框架页面.运用“新建文档对话框.运用菜单命令新建一个空白文档执行“插入“HTML“框架命令，在弹出的子菜单中选择所需的选项.运用规划面板创建框架页面以上方法既是创建框架集也是创建框架的。.创建框架集创建自定义框架集，可以执行“查看“可视化助理“框架边框.选择框架和框架集在文档窗口的设计视图中，在选定了一个框架后，其边框被虚线环绕；在选定了一个框架集后，该框架集内的框架的一切边框都被虚线环绕。选择框架按住Alt键选择框架运用框架面板选择框架选择框架集单击框架的边框单击“框架面板中最外层的边框.保管框架和框架集在阅读器中预览框架集前，必需保管框架集文件，以及要在框架中显示的一切

4、文档。可以单独保管每个框架集文件和带框架的文档，也可以同时保管框架集文件和框架中出现的一切文档。.保管框架集选择框架集之后，进展保管。只保管框架集的框架构造页面是不能完全显示的，还必需将每个框架文档进展保管。保管框架鼠标单击框架文档，进展框架页保管。.保管框架集和框架执行“文件， “保管全部，将整个框架集保管为index.html接着保管下面的各框架。.设置框架属性选定详细框架，利用“属性面板进展设置。.设置框架集属性选定框架集后，利用“属性面板进展设置。.设置框架的背风光将光标置于要改动背风光的框架中执行“修正 “页面属性命令，翻开“页面属性对话框进展设置.在框架中设置链接运用一个框架的一个

5、主要目的是实现框架之间的链接。.浮动框架。天气预告浮动框架.4.2 层与时间轴的运用层是一种HTML元素，可以将它定位到网页的恣意位置。层可以包含文字、图像或其他任何可在HTML文档正文中放入的内容。层最主要的特性是它可以悬浮在网页内容之上。换句话说，可以在网页上恣意改动层的位置，实现对层的准确定位。正是由于层的这种特性，才利用层实现对网页中的内容进展准确定位。层可以被显示或隐藏，经过程序在网页中控制层的显示或隐藏，实现层上内容的动态交替显示，实现一些特殊的显示效果。层还可以被重叠，因此可以在网页中实现内容的重叠效果。.层的根本操作在Dreamweaver中可以直接在网页中插入层。经过“层面板

6、可以管理文档中的层。运用“层面板可防止重叠，更改层的可见性，将层嵌套或层叠，以及选择一个或多个层。执行“窗口 “层命令，或按F2键，翻开“层面板，可以看到一切的层都显示在其中。要更改层的陈列次序，可经过修正层的Z值来实现。单击Z列中的数字，为所选层输入新的Z值，即可改动层的陈列顺序。.层的根本操作插入层设置层的属性选择层调整层的大小挪动层.插入层将光标置于要插入层的位置，执行“插入 “规划对象 “层命令 设置层的属性选择一个层，执行“窗口 “属性命令，翻开“属性面板来更改层的属性。.选择层选择层的三种方法是： 将光标挪动至需选择的层边框，光标变为 ，单击鼠标左键即可选择该层。 在层的内部单击属

7、性，显示层的选择柄 ，单击选择柄，即可选择层，假设选择柄不可见，可在该层中的恣意位置单击以显示该选择柄。 翻开“层面板，在“层面板中选择层称号，即可选择该层。按shift可以选择多个层。.调整层的大小单击层的边框调整层的大小运用属性面板调整层的大小.4.3 利用行为制造动态页面普通说来，动态网页是经过JavaScript或基于JavaScript的DHTML代码来实现的。包含JavaScript脚本的网页，还可以实现用户与页面的简单交互。但是编写脚本既复杂又专业，需求专门学习，而Dreamweaver 提供了“行为的机制，虽然行为也是基于JavaScript来实现动态网页和交互的，但却不需书写

8、任何代码。在可视化环境中单击几个按钮，填几个选项就可以实现丰富的动态页面效果，实现人与页面的简单交互。.利用行为制造动态页面行为的概念运用行为创建动感网页利用脚本制造特效网页.4.3.1 行为的概念行为是目前设计网页的主流技术之一，它强大的网页互动功能，使众多的网页设计者能发扬最大的思想空间，其效果更令网络上的众多阅读者感慨不已。行为是一些JavaScript程序，它由两部分组成：一部分是事件，另一部分是动作。动作是特定的JavaScript程序，只需事件发生，相应的程序就会自动运转。.事 件事件用于指定选定的行为动作在何种情况下发生。网页窗口事件onMove:移动窗口时发生的事件。onLoa

9、d:选定的对象出现在浏览器时发生的事件。onResize:访问者改变窗口的大小时发生的事件。onUnload:访问者退出网页文档时发生的事件。.关于鼠标和键盘的事件onClick:用鼠标单击选定元素的一瞬间发生的事件。onFocus:鼠标指针移动到窗口上，即激活之后发生的事件。onMouseDown:单击鼠标右键一瞬间发生的事件。onMouseMove:鼠标指针经过选定元素上方时发生的事件。onMouseOut:鼠标指针经过选定元素之外时发生的事件。onMouseOver:鼠标指针经过选定元素上方时发生的事件。onMouseUp:单击鼠标右键,然后释放时发生的事件。onScroll:访问者在浏

10、览器上移动滚动条的时候发生的事件。onKeyDown:在键盘上按住特定键时发生的事件。onKeyPress:在键盘上按特定键时发生的事件。onKeyUp:在键盘上按下特定键并释放时发生的事件。.关于表单的事件onAfterupdate:更新表单文档的内容时发生的事件。onBeforeUpdate:改变表单文档的项目时发生的事件。onChange:访问者修改表单文档的初始值时发生的事件。onReset:将表单文档重设置为初始值时发生的事件。onSubmit:访问者传送表单文档时发生的事件。onSelect:访问者选定文本字段中的内容时发生的事件。.其他事件onError:在加载文档的过程中，发生

11、错误时发生的事件。onFilterChange:运用于选定元素的字段发生变化时发生的事件。Onfinish:用功能来显示的内容结束时发生的事件。Onstart:开始应用功能时发生的事件。.4.3.2 运用行为创建动感网页交换图象弹出信息翻开阅读器窗口显示-隐藏层检查表单设置形状栏文本转到URL创建跳转菜单.交换图象在网络上看到过这样的网页，当鼠标挪动到图象上，网页会自动变换成不同的图象，这种方法用来展现产品，效果挺不错。.交换图象选中文档中的图片，翻开 “行为面板，单击面板上的“+按钮，在弹出的菜单中选择“交换图象选项，翻开“交换图象 对话框.弹出信息弹出信息动作显示一个带有JavaScrip

12、t警告。“弹出信息动作不能控制JavaScript警告的外观，这是由访问者的阅读器决议的。假设希望对信息的外观进展更多的控制，可运用“翻开阅读器窗口行为。.翻开文档，单击窗口左下角的标签，翻开 “行为面板，单击面板上的“+按钮，在弹出的菜单中选择“弹出信息选项，翻开“弹出信息 对话框留意：将事件设置为onload,表示载入页面时弹出该信息。.翻开阅读器窗口运用“翻开阅读器窗口动作可以在一个新的窗口中翻开URL,可以指定新窗口的属性、特性和称号。翻开文档，单击窗口左下角的标签，翻开 “行为面板，单击面板上的“+按钮，在弹出的菜单中选择“翻开阅读器窗口选项，翻开“翻开阅读器窗口 对话框.“翻开阅读

13、器窗口 对话框.显示-隐藏层“显示-隐藏层动作显示、隐藏或恢复层的默许可见性，此动作用于在用户与网页进展交互时显示信息。.检查表单选中表单域，翻开 “行为面板，单击面板上的“+按钮，在弹出的菜单中选择“检查表单选项，翻开“检查表单 对话框.设置形状栏信息“设置形状栏文本动作在阅读器窗口底部左侧的形状栏中显示信息。可以运用此动作在形状栏阐明链接的目的，而不是显示与之关联的URL。翻开文档，单击窗口左下角的标签，翻开 “行为面板，单击面板上的“+按钮，在弹出的菜单中选择“设置文本选项，选择“设置形状栏文本，翻开“设置形状栏文本 对话框.转到URL利用转到URL动作可在当前窗口或指定的框架中翻开一个

14、新页,此动作对经过一次单击更改两个或多个框架的内容特别有用。还可以在时间轴中调用此动作在指定的时间间隔后跳到一个新页。翻开文档，单击窗口左下角的标签或恣意对象，翻开 “行为面板，单击面板上的“+按钮，在弹出的菜单中选择“转到URL选项，翻开“转到URL 对话框.“转到URL 对话框.创建跳转菜单跳转菜单是超级链接的一种方式，运用跳转菜单要比其他方式链接节省更多的空间，跳转菜单从菜单开展而来，阅读者单击并选择下拉菜单时会跳转到目的网页。将光标置于文档中，执行“插入菜单 “表单 “跳转菜单.跳转菜单开场创建跳转菜单插入按钮,翻开 “行为面板，单击面板上的“+按钮，在弹出的菜单中选择“跳转菜单开场选

15、项，翻开“跳转菜单开场 对话框.4.3.3 利用脚本制造特效网页自动显示当前日期 .制造滚动公告.滚动新闻类 - 51js - biyuanbody text-align:center;td font-size:12px; line-height:20px; text-align:left;.marquee width:100%; height:100%; overflow:hidden;.m height:20px;.m2 height:90px; 根本上够用了吧！ function BYMarquee() this.Content = ; /显示内容 this.Speed = 20; /上

16、移速度 this.Object = ; /knowsky marquee容器对象 this.Pause = true; /能否停留 this.Start = function() var o = this.Object; var Pause = this.Pause; var Stop = false; var Stop2 = false; o.onmouSEOver = function() Stop = Stop2 = true; o.onmouseout = function() Stop = Stop2 = false; var BodyHtml = ; for(var i in th

17、is.Content) BodyHtml.push( + this.Contenti.text + ); var Dv = document.createElement(div); Dv.innerHTML = BodyHtml.join(); o.appendChild(Dv); var DvHeight = Dv.offsetHeight; while(Dv.offsetHeight /2 o.offsetHeight) Dv.innerHTML += + Dv.innerHTML; Dv.innerHTML += + Dv.innerHTML; setInterval(function(

18、) if(!Stop) o.scrollTop +; if(o.scrollTop = o.scrollHeight - o.offsetHeight) o.scrollTop = DvHeight - o.offsetHeight; if(Pause) if(o.scrollTop % o.offsetHeight = 0) Stop = true; setTimeout(function() Stop = Stop2; , 3000); , this.Speed); /实例1var marquee1 = new BYMarquee();marquee1.Content = link : #

19、, text : 英法国防部证明两国核潜艇相撞, link : #, text : 中国赴欧采购清单敲定 涉及金额150亿元;marquee1.Object = document.getElementById(marquee1);marquee1.Start();/实例2var marquee2 = new BYMarquee();marquee2.Content = link : #, text : 剑仙李横握锋利嚣张的地铜剑，左右晃动, link : #, text : 他的奴隶【剑仙李】奋起对抗，被他狠狠地教训了一顿！, link : #, text : 我的奴隶 Su.新武将 在奴隶市场输给了 金光灿烂;marquee2.Speed = 10;marquee2.Obj