电子商务网页制作07课件.ppt

1、主编：谢嵘框架主要由两大部分组成：框架集（Frameset）和普通框架（Frame）。使用框架技术，可以将不同的页面文档在同一个浏览器窗口中显示出来。整个浏览器窗口被分为几个不同的部分，每个部分独立地显示一个网页文件，这样的每个部分就成为一个框架。框架的功能有点像Windows操作系统的“资源管理器”，在窗口的一边显示目录，另一边显示内容，因此，框架技术经常被用于实现页面文档的导航。项目项目7 7 应用框架技术应用框架技术 项目导学项目导学 体验活动一：体验活动一：创建一个简单的框架页面创建一个简单的框架页面活动任务：创建一个简单的框架页面。活动指导：架页面本身不包含可视内容，它只是一个展示页

2、面内容的容器，因此框架的布局成为框架网页设计的关键技术。有两种方法创建框架集，一种是自定义，一种是通过DW预定义框架集创建。下面我们使用预定义的框架集。项目项目7 7 应用框架技术应用框架技术 体验活动一：体验活动一：创建一个简单的框架页面创建一个简单的框架页面活动步骤：1.在Dreamweaver CS4中新建页面。2.在“文件”菜单下点选“新建”命令，在弹出的对话框中选择示例页右侧的“框架页”，此处选择“上方固定，左侧嵌套”。项目项目7 7 应用框架技术应用框架技术 体验活动一：体验活动一：创建一个简单的框架页面创建一个简单的框架页面活动步骤：3.在弹出的“框架标签辅助功能属性”对话框中单

3、击“确定”，此时，主框架被指定为“mainFrame”，标题为“mainFrame”。4.创建好的框架页面如图所示。项目项目7 7 应用框架技术应用框架技术 体验活动二：体验活动二：框架和框架集的拆分与删除框架和框架集的拆分与删除活动任务：我们创建框架页面之后，可以根据实际需要对框架页面进行拆分、删除等操作。活动指导：要给框架页面增加新框架，就像是拆分表格的单元格一样，把一个框架分为两个框架。若框架页面看起来太乱，可删除某些框架。要删除一个框架，可先单击该框架选择它，再选择“框架”菜单中的“删除框架”命令即可。项目项目7 7 应用框架技术应用框架技术 体验活动二：体验活动二：框架和框架集的拆分

4、与删除框架和框架集的拆分与删除活动步骤：1.在框架页面的右端添加框架，单击边框选择框架页，光标定位于mainframe中。或者按Alt键后，在框架中单击，选择框架。还可以在“框架”面板上选择，。2.在“修改”菜单下选择“框架集/拆分右框架”命令，将mainframe分成了左右两个框架。项目项目7 7 应用框架技术应用框架技术 体验活动二：体验活动二：框架和框架集的拆分与删除框架和框架集的拆分与删除活动步骤：3.如果不需要该框架，只需选中框架边线，鼠标此时变成双向箭头 ，拖动鼠标和其他边框线重合即可删除框架。项目项目7 7 应用框架技术应用框架技术 体验活动三：体验活动三：选择框架与框架集选择框

5、架与框架集活动任务：在编辑窗口中完成选择框架和框架集操作。活动指导：针对不同的框架进行编辑，首先我们要选择框架，接下来完成如何选择框架和框架集的操作。项目项目7 7 应用框架技术应用框架技术 体验活动三：体验活动三：选择框架与框架集选择框架与框架集活动步骤：1.在编辑窗口中选择框架边线，此时框架边线变为虚线，即可选中。2.如果要选择框架，只需在框架面板中单击mainframe框架即可。项目项目7 7 应用框架技术应用框架技术 活动小结活动小结完成体验活动后，填写下表 项目项目7 7 应用框架技术应用框架技术 操作类型操作类型操作步骤操作步骤拆分框架网页删除框架网页选择框架选择框架集体验活动四：

6、体验活动四：框架网页的保存框架网页的保存活动任务：保存框架和框架集。活动指导：创建好的框架网页保存和一般网页保存有不同之处，他们可以单独保存框架集和带框架的文档也将其同时保存。项目项目7 7 应用框架技术应用框架技术 体验活动四：体验活动四：框架网页的保存框架网页的保存活动步骤：1.在文档中选择框架集，再选择“文件”菜单中的保存框架选项，或者CTRL+S快捷键。2.在弹出的“另存为”对话框中，选择保存路径，输入保存名称，单击“保存”按钮，将框架保存在指定路径中。项目项目7 7 应用框架技术应用框架技术 体验活动四：体验活动四：框架网页的保存框架网页的保存活动步骤：3.如果保存与一组框架关联的所

7、有文件，只需选择“文件”菜单中的“保存全部”命令即可。4.弹出的“另存为”对话框中，选择保存路径，输入保存名称，单击“保存”按钮。项目项目7 7 应用框架技术应用框架技术 活动小结活动小结完成体验活动四后，填写下表 项目项目7 7 应用框架技术应用框架技术 操作方法操作方法异同点异同点保存为一个文件保存全部的关联文件相关知识相关知识1.在面板中选中整个框架集，可使“属性”面板变为“框架集属性”面板。此时编辑对象为框架集，“行：2 列：1”则是将整个框架视为一个2行1列的表格。2.在边框选项中选择“是”、“否”来决定浏览器浏览时是否显示框架边框。项目项目7 7 应用框架技术应用框架技术 相关知识

8、相关知识3.边框颜色参数项，可以设置框架边框的颜色，也可以在文本框中直接输入颜色数据4.在边框宽度参数项中输入一个数字表示边框宽度，输入“0”，表示无边框。项目项目7 7 应用框架技术应用框架技术 相关知识相关知识5.值参数项表示指定行或列的大小；单位参数项指定所选择的行或列是以像素为单位的固定大小，还是显示为浏览器窗口的百分比，或是扩展或缩小以填充窗口中的剩余空间。6.使用属性面板可以查看和设置框架属性。选中某框架，在窗口下端就出现了框架各属性。项目项目7 7 应用框架技术应用框架技术 相关知识相关知识7.在框架名称文本框里出现的名称，将被超链接和脚本引用。8.在源文件文本框里出现的文本，将

9、用来指定当前打开的HTML文件的相对路径和文件名称。项目项目7 7 应用框架技术应用框架技术 相关知识相关知识9.滚动参数：它用来选择框架是否要滚动条。选择“是”，表示要滚动条；选择“否”表示不要滚动条；选择“默认”表示采用默认状态，一般是“默认”状态。10.边框参数：它用来确定当前框架是否显示边框。当此处的设置于框架集“属性”的设置矛盾时，以此处设置为准。项目项目7 7 应用框架技术应用框架技术 相关知识相关知识11.边界宽度和边界高度：“边界宽度”以像素为单位，设置边框与内容左右之间的距离；“边界高度”以像素为单位，设置边框与内容上下之间的距离。12.边框颜色参数：它表示与当前框架比邻的所有框架颜色，框架集的边框颜色将以此项选择设置为准 项目项目7 7 应用框架技术应用框架技术