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

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