《网页设计与制作_第3版_工业和信息化普通高等教育十二五规划教材立项项目 教学课件 相万让 第4章》由会员分享，可在线阅读，更多相关《网页设计与制作_第3版_工业和信息化普通高等教育十二五规划教材立项项目 教学课件 相万让 第4章（56页珍藏版）》请在金锄头文库上搜索。
1、在线教务辅导网：http:/,教材其余课件及动画素材请查阅在线教务辅导网,QQ:349134187 或者直接输入下面地址：,http:/,第4章 网页设计与美化,第4章 网页设计与美化,4.1 制作框架网站 4.2 层与时间轴的应用 4.3 利用行为制作动态页面 4.4 制作表单页面,4.1 制作框架网站,框架是一个比较早出现的HTML对象，框架的作用就是把浏览器窗口划分为若干个区域，每个区域可以分别显示不同的网页。使用框架可以非常方便的完成导航工作，而且各个框架之间决不存在干扰问题，所以在模板出现以前框架技术一直普遍应用于页面的导航，它可以使网站导航比较清晰。,4.1 制作框架网站,使用框架
2、建设网站的最大的特点是使网站风格能够保持统一。一个网站的众多网页最好都有相同的地方，来做到风格统一。可以把这个相同的部分单独的制作一个页面，作为框架结构的各个子框架的内容给整个站点公用。通过这个方法达到了网站的风格的统一。,4.1 框架的基本操作,创建框架集和框架 选择框架和框架集 保存框架和框架集 设置框架集属性 设置框架的背景色 在框架中设置链接,创建框架集和框架,框架有两部分组成,即框架集和单个框架。框架集是在一个文档内定义一组框架结构的HTML网页，它定义了一个网页中的框架数目、每个框架的大小、载入每个框架的网页源和每个框架的其他属性等；单个框架指在网页中定义的一个区域，每个区域可以分
3、别显示不同的网页。创建框架集和创建框架是同步进行的。只要创建了框架就一定形成了框架集；同样，创建的框架集就一定具有框架。,创建框架页面,使用“新建文档”对话框 使用菜单命令 使用布局面板创建框架页面,使用“新建文档”对话框,使用菜单命令,新建一个空白文档 执行“插入” “HTML” “框架”命令 ，在弹出的子菜单中选择 所需的选项,使用布局面板创建框架页面,以上方法既是创建框架集也是创建框架的。,创建框架集,创建自定义框架集，可以执行“查看” “可视化助理” “框架边框”,选择框架和框架集,在文档窗口的设计视图中，在选定了一个框架后，其边框被虚线环绕；在选定了一个框架集后，该框架集内的框架的所
4、有边框都被虚线环绕。,选择框架 按住Alt键选择框架 使用框架面板选择框架,选择框架集 单击框架的边框 单击“框架”面板中最外层的边框,保存框架和框架集,在浏览器中预览框架集前，必须保存框架集文件，以及要在框架中显示的所有文档。可以单独保存每个框架集文件和带框架的文档，也可以同时保存框架集文件和框架中出现的所有文档。,保存框架集选择框架集之后，进行保存。只保存框架集的框架结构页面是不能完全显示的，还必须将每个框架文档进行保存。 保存框架鼠标单击框架文档，进行框架页保存。,保存框架集和框架,执行“文件”， “保存全部”，将整个框架集保存为index.html 接着保存下面的各框架。,设置框架属性
5、,选定具体框架，利用“属性”面板进行设置。,设置框架集属性,选定框架集后，利用“属性”面板进行设置。,设置框架的背景色,将光标置于要改变背景色的框架中 执行“修改” “页面属性”命令，打开“页面属性”对话框进行设置,在框架中设置链接,应用一个框架的一个主要目的是实现框架之间的链接。,浮动框架,。,4.2 层与时间轴的应用,层是一种HTML元素，可以将它定位到网页的任意位置。层可以包含文字、图像或其他任何可在HTML文档正文中放入的内容。层最主要的特性是它可以悬浮在网页内容之上。换句话说，可以在网页上任意改变层的位置，实现对层的精确定位。正是由于层的这种特性，才利用层实现对网页中的内容进行精确定
6、位。 层可以被显示或隐藏，通过程序在网页中控制层的显示或隐藏，实现层上内容的动态交替显示，实现一些特殊的显示效果。层还可以被重叠，因此可以在网页中实现内容的重叠效果。,层的基本操作,在Dreamweaver中可以直接在网页中插入层。 通过“层”面板可以管理文档中的层。使用“层”面板可防止重叠，更改层的可见性，将层嵌套或层叠，以及选择一个或多个层。 执行“窗口” “层”命令，或按F2键，打开“层”面板，可以看到所有的层都显示在其中。 要更改层的排列次序，可通过修改层的Z值来实现。单击Z列中的数字，为所选层输入新的Z值，即可改变层的排列顺序。,层的基本操作,插入层 设置层的属性 选择层 调整层的大
7、小 移动层,插入层,将光标置于要插入层的位置，执行“插入” “布局对象” “层”命令,设置层的属性,选择一个层，执行“窗口” “属性”命令，打开“属性”面板来更改层的属性。,选择层,选择层的三种方法是： 将光标移动至需选择的层边框，光标变为 ，单击鼠标左键即可选择该层。 在层的内部单击属性，显示层的选择柄 ，单击选择柄，即可选择层，如果选择柄不可见，可在该层中的任意位置单击以显示该选择柄。 打开“层”面板，在“层”面板中选择层名称，即可选择该层。按shift可以选择多个层。,调整层的大小,单击层的边框调整层的大小 使用属性面板调整层的大小,4.3 利用行为制作动态页面,一般说来，动态网页是通过
8、JavaScript或基于JavaScript的DHTML代码来实现的。包含JavaScript脚本的网页，还能够实现用户与页面的简单交互。但是编写脚本既复杂又专业，需要专门学习，而Dreamweaver 8提供了“行为”的机制，虽然行为也是基于JavaScript来实现动态网页和交互的，但却不需书写任何代码。在可视化环境中单击几个按钮，填几个选项就可以实现丰富的动态页面效果，实现人与页面的简单交互。,利用行为制作动态页面,行为的概念 使用行为创建动感网页 利用脚本制作特效网页,4.3.1 行为的概念,行为是目前设计网页的主流技术之一，它强大的网页互动功能，使众多的网页设计者能发挥最大的思维空
9、间，其效果更令网络上的众多浏览者感叹不已。,行为是一些JavaScript程序，它由两部分组成：一部分是事件，另一部分是动作。动作是特定的JavaScript程序，只要事件发生，相应的程序就会自动运行。,事 件,事件用于指定选定的行为动作在何种情况下发生。,4.3.2 使用行为创建动感网页,交换图象 弹出信息 打开浏览器窗口 弹出式菜单 显示-隐藏层 检查表单 设置状态栏文本 转到URL 创建跳转菜单,交换图象,在网络上看到过这样的网页，当鼠标移动到图象上，网页会自动变换成不同的图象，这种方法用来展示产品，效果挺不错。,交换图象,选中文档中的图片，打开 “行为”面板，单击面板上的“+”按钮，在
10、弹出的菜单中选择“交换图象”选项，打开“交换图象” 对话框,弹出信息,弹出信息动作显示一个带有JavaScript警告。 “弹出信息”动作不能控制JavaScript警告的外观，这是由访问者的浏览器决定的。 如果希望对信息的外观进行更多的控制，可使用“打开浏览器窗口”行为。,打开文档，单击窗口左下角的标签，打开 “行为”面板，单击面板上的“+”按钮，在弹出的菜单中选择“弹出信息”选项，打开“弹出信息” 对话框,注意：将事件设置为onload, 表示载入页面时弹出该信息。,打开浏览器窗口,使用“打开浏览器窗口”动作可以在一个新的窗口中打开URL,可以指定新窗口的属性、特性和名称。,打开文档，单击
11、窗口左下角的标签，打开 “行为”面板，单击面板上的“+”按钮，在弹出的菜单中选择“打开浏览器窗口”选项，打开“打开浏览器窗口” 对话框,“打开浏览器窗口” 对话框,弹出式菜单,当网页内容太多时，应用弹出式菜单，既可以节省版面，同时又显得富有动感。,选中文字，设置其为空链接，打开 “行为”面板，单击面板上的“+”按钮，在弹出的菜单中选择“弹出式菜单”选项，打开“弹出式菜单” 对话框,显示-隐藏层,“显示-隐藏层”动作显示、隐藏或恢复层的默认可见性，此动作用于在用户与网页进行交互时显示信息。,检查表单,选中表单域，打开 “行为”面板，单击面板上的“+”按钮，在弹出的菜单中选择“检查表单”选项，打开
12、“检查表单” 对话框,设置状态栏信息,“设置状态栏文本”动作在浏览器窗口底部左侧的状态栏中显示信息。可以使用此动作在状态栏说明链接的目标，而不是显示与之关联的URL。,打开文档，单击窗口左下角的标签，打开 “行为”面板，单击面板上的“+”按钮，在弹出的菜单中选择“设置文本”选项，选择“设置状态栏文本”，打开“设置状态栏文本” 对话框,转到URL,利用转到URL动作可在当前窗口或指定的框架中打开一个新页,此动作对通过一次单击更改两个或多个框架的内容特别有用。还可以在时间轴中调用此动作在指定的时间间隔后跳到一个新页。,打开文档，单击窗口左下角的标签或任意对象，打开 “行为”面板，单击面板上的“+”
13、按钮，在弹出的菜单中选择“转到URL”选项，打开“转到URL” 对话框,“转到URL” 对话框,创建跳转菜单,跳转菜单是超级链接的一种形式，使用跳转菜单要比其他形式链接节省更多的空间，跳转菜单从菜单发展而来，浏览者单击并选择下拉菜单时会跳转到目标网页。,跳转菜单开始,创建跳转菜单 插入按钮,打开 “行为”面板，单击面板上的“+”按钮，在弹出的菜单中选择“跳转菜单开始”选项，打开“跳转菜单开始” 对话框,4.3.3 利用脚本制作特效网页,自动显示当前日期 制作滚动公告,自动显示当前日期和时间,在-之间输入相关代码,4.4 制作表单页面,使用表单可以与站点的访问者进行交互并从用户那里收集信息。表单从用户那里收集信息后，将这些信息提交给服务器进行处理。,目前表单主要用来进行意见调查、在线查询、网上购物、在线申请等。在表单中经常出现的字段有：单行文本框、多行滚动文本框、单选框、复选框、下拉列表框和按钮。,创建表单对象,在创建表单对象之前，首先必须在页面中插入表单。,表单对象单行文本框多行滚动文本框单选框复选框下拉列表框按钮,插入表单之后，可以看到有个红色的虚线框就表示表单的范围，如果需要插入表单对象则应该在该区域之内插入。,
