1、第三章 网页的排版和布局(三)使用框架布局网页,计算机与信息学院,顶部框架（topframe）,主框架（mainframe）,底部框架（bottomframe）,左框架（leftframe）,3.4.1 框架网页概述,框架由框架集和框架组成。框架是布局工具，用框架把浏览器窗口划分成若干个部分，每个框架都是浏览器窗口中的一个区域，它可以显示独立内容的 HTML 文档。框架集也是 HTML 文件，它定义一组框架的布局和属性，包括框架的数目、框架的大小和位置以及在每个框架中初始显示的页面的 URL。 框架的最常见用途就是导航。一组框架通常包括一个含有导航条的框架和另一个要显示主要内容页面的框架。,3
2、.4.1 框架网页概述,框架的优点：（1）访问者的浏览器不需要为每个页面重新加载与导航相关的图形。 （2）每个框架都具有自己的滚动条。（3）各个页面之间的逻辑关系可以很好的表示出来。框架也有以下缺点：（1）可能难以实现不同框架中各元素的精确图形对齐。（2）有些浏览器可能不支持框架。所以使用框架布局时，通常还与表格、层等结合使用。,3.4.2 创建框架和框架集,1、创建框架和框架集选择预定义的框架集将自动设置创建布局所需的框架集和框架，是创建基于框架布局的最简单的方法。1）菜单栏：菜单新建，在新建文档对话框中,类别中选择框架集，即可直接创建框架网页2）插入栏：布局3）菜单栏：插入HTML 框架框
3、架集： 框架：框架集图标的蓝色区域表示当前文档，而白色区域表示将显示其它文档的框架。,3.4.2 创建框架和框架集,预定义的框架集选择预定义的框架集将自动设置创建布局所需的框架集和框架，是迅速创建基于框架布局的最简单方法。（三种方法）,3.4.2 创建框架和框架集,自定义框架集1）首先在菜单栏中设置查看可视化助理框架边框，再通过拖曳4条边可以直接生成框架集。 （对比：+Alt）2）菜单栏中修改/框架集，从子菜单选择拆分项 框架允许嵌套，即大框架中包含了两个或者多个小框架。,3.4.2 创建框架和框架集,2、保存框架和框架集在浏览器中预览框架集之前，必须保存框架集文件以及在框架中要显示的所有文档
4、。既可以单独保存，也可以同时保存所有文档。1）保存所有框架集文件和框架文件 方法：菜单栏中文件保存全部。若未保存过，则出现另存为对话框，可根据文档窗口中出现的粗线边框的提示一步步保存，直至保存完所有框架文件。,3.4.2 创建框架和框架集,2）保存框架或框架集文件 方法：文件保存框架或框架另存为； 也可右键单击文档选项卡进行选择,3.4.3 选择框架和框架集,1、在文档窗口选择框架具体方法：1）将光标定位在需要选择的框架中，按住键单击鼠标左键，框架边框内侧出现虚线，即可选择该框架。2）在菜单栏中选中窗口框架，出现框架浮动面板组，即可选择所需框架。,3.4.3 选择框架和框架集,2、在文档窗口选
5、择框架集具体方法：1）在文档窗口中，单击框架集中的两个框架之间的边框2）在“框架”浮动面板中单击围绕框架集的边框3）利用标签选择器,3.4.4 设置框架和框架集属性,利用框架的属性面板可以定义：框架名称、源文件、页面边距等属性利用框架集的属性面板可以定义：边线颜色、宽度等属性,3.4.4 设置框架和框架集属性,1、设置框架属性,框架名称：命名当前框架源文件：确定框架的源文档，或利用浏览功能选取文件滚动：设置框架内的内容显示不下时是否出现滚动条不能调整大小：限定框架尺寸，防止用户拖动框架边框边界宽度：左右边距；边界高度：上下边框边框：控制当前框架边框，边框颜色：设置与当前框架相邻的所有框架的边框
6、颜色,3.4.4 设置框架和框架集属性,2、设置框架集属性,边框：设置是否有边框。默认：有浏览器端的设置决定边框宽度：设置整个框架集的边框宽度，单位为像素边框颜色：设置整个框架集的边框颜色行或列：由框架接的结构决定单位：包括像素、百分比、相对,3.4.4 设置框架和框架集属性,3、改变框架中网页的背景颜色可以将各个框架的背景颜色设置为不同颜色方法：鼠标定位于需要修改背景颜色的框架中，打开页面属性对话框，选择所需要的颜色,实例 1,实例1,main,top,left,实例 1,1、添加并设置框架集步骤1 选择“上方固定，左侧嵌套”框架集，创建框架集页面步骤2 选择左侧框架，在页面属性对话框中，设
7、置文本大小12像素，文本颜色#2E7383，背景颜色#D8ECE6步骤3 同理设置topframe文本大小16像素；mainframe文本大小12像素，文本颜色#2E7383，背景颜色#D8ECE6,实例 1,2、制作顶部框架页面内容步骤1 光标定位在顶部框架中，插入1行2列，宽度为778的表格，设置第1列宽度为200步骤2 定位到第1列单元格中，插入logo.gif图像，对齐方式为居中对齐步骤3 定位到第2列单元格中，插入1行11列，宽度为100%的表格，设置第1列宽度为42，插入图片dh_01.gif,在第3.5.7.9列单元格中插入图像dh_03.gif,在第11列中插入图像dh_06.
8、gif,实例 1,2、制作顶部框架页面内容步骤4 设置第2.6.8.10列单元格的背景为dh_02.gif，设置第4列单元格的背景为dh_04.gif步骤5 在第2.4.6.8.10列单元格中输入相应的文字，并设置对齐方式为剧中对齐。,实例 1,3、制作左侧框架页面内容步骤1 选择左侧框架集，设置其列宽为200像素步骤2 将光标定位在左侧框架中，插入11行1列表格，宽度为180像素步骤3 在第1列单元格中插入图像title.gif,在第3.5.7.9.11行单元格中插入line2.gif，在第2.4.6.8.10行单元格中输入相应的文字，设置单元格的高度为25,实例 1,4、制作主框架页面内容
9、步骤1 在主框架中，插入4行1列，宽度为550像素的表格，设置第1行单元格的高度为25，输入文本“HOME武侠小说金庸”，并设置对齐方式为右对齐步骤2 在第2行单元格中插入图像line3.gif图像，并设置高度为20步骤3 在第3行单元格中，插入7行4列，宽度为100%的表格，在第1.3列中插入金庸的14部小说的图像，在第2.4列中输入相应的文字。5、保存全部，进行预览,实例 2 创建完整的框架网页,实例2,实例 2创建完整的框架网页,1、添加并设置框架集步骤1 新建“上方固定，左侧嵌套”的框架网页，步骤2 选择保存全部，框架集名称为index.html，依次保存右侧框架为right.html
10、，左侧框架为left.html，头部框架top.html，直至全部保存完整。,实例 2创建完整的框架网页,2、制作顶部框架页面内容步骤1 光标定位于头部框架中，打开页面属性对话框，将左边距、上边距、右边距、下边距设置为0像素步骤2 插入2行2列表格，对齐方式为居中对齐；选择第1行单元格，合并单元格，并插入图像top.jpg；将光标定位为第2行第1列单元格中，插入图像index-4_4.jpg；第2行第2列单元格，插入index-4.jpg,实例 2创建完整的框架网页,3、制作左侧框架页面内容步骤1 选择左侧框架，插入4行1列表格，对齐方式为居中对齐步骤2 在第1行插入图像index-4_14.
11、jpg，第2行插入图像index-4_15.jpg，第3行设置其背景图像为index-4_16.jpg，高为180，垂直方向设置为顶端。步骤3 在背景图像上，插入5行1列的表格，高为150像素，对齐方式为居中对齐，其背景图像为menu.jpg，分别在单元格中输入相应文字，大小为13像素，文本颜色为#FFFFFF，对齐方式为居中对齐步骤4 在第4行单元格中，插入图像index-4_17.jpg,实例 2创建完整的框架网页,4、制作右侧框架页面内容步骤1 选择右侧框架，插入2行1列表格，对齐方式设置为剧中对齐，在第1行单元格插入index-4_17.jpg步骤2 在第2行单元格插入4行3列的表格，
12、填充为4，间距为2，对齐方式为居中对齐步骤3 在第1行第1列单元格中，插入4smalling.jpg，在第2行第1列中，插入3行1列表格，设置填充为2，间距为2 ，输入相应文字，大小为13像素,实例 2创建完整的框架网页,4、制作右侧框架页面内容步骤4 依照以上步骤，完成页面5、保存文档，进行预览。,实例 3创建嵌入式框架,嵌套框架集：插入在一个框架之内的框架集。大部分使用框架的网页实际都是使用嵌套框架。,实例 3创建嵌入式框架,创建嵌入式框架1.打开素材文件index.html2、光标定位在要插入嵌套框架的位置，选择菜单栏中插入标签，打开标签选择器对话框，选择HTML标签页元素iframe,打开标签编辑器-Iframe对话框，选择源文件qianru.html，完成添加。3、设置宽度为548，高度为470，插入嵌入式框架。4.保存全部，预览效果。,实例4 插入预定义框架集,参考步骤1.新建“上方固定，左侧嵌套”框架页面2.头部框架：设置页面属性，左右边距0像素。选中头部框架（Alt）在源文件中选择top1.html;3.左侧框架：同理修改页面属性，源文件选择left1.html;4.右侧框架：同理修改页面属性，源文件选择right1.html;5.保存全部，预览。,
