网页工作设计与制作第11章.pdfVIP

第 11 章 框架布局 一、知识要点 1、利用框架布局 2、框架布局与表格布局进行区别 3、结合 Firewors、FLASH 制作网页图片和动画 4、CSS 样式 5、行为 6、第三方扩展 二、例题分析 例 11.1： 步骤一：建站点 在 D 或 E 盘新建一个文件夹，再在这个文件夹中新建一个图像文件夹，在 Dreamweaver 中再将第一个文 件夹新建为站点。图像文件夹设置为站点默认图像文件夹。（文件夹、图像用英文或数字命名） 步骤二：框架集首页的创建及保存，设置框架集的及框架的各种属性。 1、 点击 Dreamweaver 菜单命令“文件/新建”，在常规选项卡中选择“框架集”，在框架集类别中选择“上 方固定，下方固定”，新建一个框架网页，分成上中下三个区域。 2、 选择菜单命令 “查看/可视化助理/框架边框”（打上勾），使框架边框在编辑窗口中可见。注意，重 新打开该框架网页，若看不到框架边框，再执行该命令。 3、 在编辑窗口中，将鼠标放在框架之间的边框上，点击该边框就可以选中整个框架集，编辑窗口中框 架边框呈虚线；或者 “窗口/其它/框架”打开框架面板，单击框架集边框（粗三维边框）也能选中框架集， 编辑窗口中框架边框呈虚线。 4、 在选中框架集之后，在属性面板中设置框架组 “边框：否，边框宽度：0”，最重要的是设置各框架 的大小，如左下图所示； 高 65 像素 宽 132 像素 宽相对* 高相对* 高相对* 高 20 像素 5、 在中间的框架中点击一下鼠标，即将光标置于该框架中，再点击菜单命令 “修改/框架页/拆分右框 架”，把中间的框架区域拆分为左右两部分。在编辑窗口中，将鼠标放在中间左右两框架之间的边框上，点击 该边框就可以选中中间框架组，编辑窗口中中间框架组边框呈虚线，编辑窗口中整个框架集未成虚线；（或 在框架面板中选择）。 6、 在选中中间框架组之后，在属性面板中设置框架组“边框：否，边框宽度：0”最重要的是设置各框 架的大小，如右上图所示。 7、 点击菜单命令 “文件/保存全部”，首先保存框架集文件，整个框架集边框显示为虚线，index.htm, 接着依次保存框架中的其它页面，保存对应页面时，该页面都将以虚线框起来，上面部分保存为 top.htm,左 边部分保存为 left.htm，右边部分保存为main.htm，下面部分保存为bottom,htm.。 8、 点击菜单命令 “窗口/其它/框架”打开框架面板，单击上面的的框架，即选中该框架，在编辑窗口 中呈虚线，在属性面板中设置“框架名称：使用默认值 topframe，滚动：否，不能调整大小：复选框选中打 勾，边框：否，边界宽度：0，边界宽度：0； 9、 选中左边框架，在属性面板中设置 “框架名称；leftframe”，其余属性与上面框架（topframe）一 样；选中下面框架，在属性面板中设置 “框架名称；使用默认值 bottomframe，其余属性与上面框架 （topframe）一样。 10、 选中右边框架，在属性面板中设置“框架名称：使用默认值 mainframe，滚动：默认，不能调整大 小； 注意：除了在框架面板中选择某个框架，还可以按住 ALT 键，用鼠标在编辑窗口相应框架中点击，选中框架。 11、 点击菜单命令“文件/保存全部”，将所做的属性修改存起来。 步骤三：制作顶部框架 topframes 的框架页面文件 top.htm。 1、将光标置于顶部框架中，在页面空白处单击鼠 标右键选择 “页面属性”命令或点击菜单命令 “修改/页面属性”，在弹出的页面属性对话框中定 义左边界、顶部边界都为 0。 2、在顶部框架中插入一个 2 行