网页设计与制作_第3版_工业和信息化普通高等教育十二五规划教材立项项目 教学课件 相万让 第4章.pptVIP

第4章 网页设计与美化 第4章 网页设计与美化 4.1 制作框架网站 4.2 层与时间轴的应用 4.3 利用行为制作动态页面 4.4 制作表单页面 4.1 制作框架网站 框架是一个比较早出现的HTML对象，框架的作用就是把浏览器窗口划分为若干个区域，每个区域可以分别显示不同的网页。使用框架可以非常方便的完成导航工作，而且各个框架之间决不存在干扰问题，所以在模板出现以前框架技术一直普遍应用于页面的导航，它可以使网站导航比较清晰。 4.1 制作框架网站 使用框架建设网站的最大的特点是使网站风格能够保持统一。一个网站的众多网页最好都有相同的地方，来做到风格统一。可以把这个相同的部分单独的制作一个页面，作为框架结构的各个子框架的内容给整个站点公用。通过这个方法达到了网站的风格的统一。 4.1 框架的基本操作 创建框架集和框架 选择框架和框架集 保存框架和框架集 设置框架集属性 设置框架的背景色 在框架中设置链接 创建框架集和框架 框架有两部分组成,即框架集和单个框架。框架集是在一个文档内定义一组框架结构的HTML网页，它定义了一个网页中的框架数目、每个框架的大小、载入每个框架的网页源和每个框架的其他属性等；单个框架指在网页中定义的一个区域，每个区域可以分别显示不同的网页。创建框架集和创建框架是同步进行的。只要创建了框架就一定形成了框架集；同样，创建的框架集就一定具有框架。 创建框架页面 使用“新建文档”对话框 使用菜单命令 使用布局面板创建框架页面 使用“新建文档”对话框 使用菜单命令 新建一个空白文档 执行“插入”　　　 “HTML”　　　“框架”命令 ，在弹出的子菜单中选择 所需的选项 创建框架集 创建自定义框架集，可以执行“查看”　　　“可视化助理”　　　“框架边框” 选择框架和框架集 在文档窗口的设计视图中，在选定了一个框架后，其边框被虚线环绕；在选定了一个框架集后，该框架集内的框架的所有边框都被虚线环绕。 保存框架和框架集 在浏览器中预览框架集前，必须保存框架集文件，以及要在框架中显示的所有文档。可以单独保存每个框架集文件和带框架的文档，也可以同时保存框架集文件和框架中出现的所有文档。 保存框架集和框架 执行“文件”， “保存全部”，将整个框架集保存为index.html 接着保存下面的各框架。 设置框架属性 选定具体框架，利用“属性”面板进行设置。 设置框架集属性 选定框架集后，利用“属性”面板进行设置。 设置框架的背景色 将光标置于要改变背景色的框架中 执行“修改” 　　　“页面属性”命令，打开“页面属性”对话框进行设置 在框架中设置链接 应用一个框架的一个主要目的是实现框架之间的链接。 浮动框架 iframe。。。。。/iframe 4.2 层与时间轴的应用 层是一种HTML元素，可以将它定位到网页的任意位置。层可以包含文字、图像或其他任何可在HTML文档正文中放入的内容。层最主要的特性是它可以悬浮在网页内容之上。换句话说，可以在网页上任意改变层的位置，实现对层的精确定位。正是由于层的这种特性，才利用层实现对网页中的内容进行精确定位。 层可以被显示或隐藏，通过程序在网页中控制层的显示或隐藏，实现层上内容的动态交替显示，实现一些特殊的显示效果。层还可以被重叠，因此可以在网页中实现内容的重叠效果。 层的基本操作 在Dreamweaver中可以直接在网页中插入层。 通过“层”面板可以管理文档中的层。使用“层”面板可防止重叠，更改层的可见性，将层嵌套或层叠，以及选择一个或多个层。 执行“窗口” “层”命令，或按F2键，打开“层”面板，可以看到所有的层都显示在其中。 要更改层的排列次序，可通过修改层的Z值来实现。单击Z列中的数字，为所选层输入新的Z值，即可改变层的排列顺序。 层的基本操作 插入层 设置层的属性 选择层 调整层的大小 移动层 插入层 将光标置于要插入层的位置，执行“插入” “布局对象” “层”命令 选择层 选择层的三种方法是： ① 将光标移动至需选择的层边框，光标变为 ，单击鼠标左键即可选择该层。 ② 在层的内部单击属性，显示层的选择柄 ，单击选择柄，即可选择层，如果选择柄不可见，可在该层中的任意位置单击以显示该选择柄。 ③ 打开“层”面板，在“层”面板中选择层名称，即可选择该层。按shift可以选择多个层。 调整层的大小 单击层的边框调整层的大小 使用属性面板调整层的大小 4.3 利用行为制作动态页面 一般说来，动态网页是通过JavaScript或基于JavaScript的DHTML代码来实现的。包含JavaScript脚本的网页，还能够实现用户与页面的简单交互。但是编写脚本既复杂又专业，需要专门学习，而Dreamweav