第三章-网页的排版和布局(三).pptVIP

实例 2创建完整的框架网页 3、制作左侧框架页面内容 步骤1 选择左侧框架，插入4行1列表格，对齐方式为居中对齐 步骤2 在第1行插入图像index-4_14.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列的表格，填充为4，间距为2，对齐方式为居中对齐 步骤3 在第1行第1列单元格中，插入4smalling.jpg，在第2行第1列中，插入3行1列表格，设置填充为2，间距为2 ，输入相应文字，大小为13像素 实例 2创建完整的框架网页 4、制作右侧框架页面内容 步骤4 依照以上步骤，完成页面 5、保存文档，进行预览。 实例 3创建嵌入式框架 嵌套框架集：插入在一个框架之内的框架集。大部分使用框架的网页实际都是使用嵌套框架。 实例 3创建嵌入式框架 创建嵌入式框架 1.打开素材文件index.html 2、光标定位在要插入嵌套框架的位置，选择菜单栏中插入\标签，打开标签选择器对话框，选择HTML标签\页元素\iframe,打开标签编辑器-Iframe对话框，选择源文件qianru.html，完成添加。 3、设置宽度为548，高度为470，插入嵌入式框架。 4.保存全部，预览效果。 实例4 插入预定义框架集 参考步骤 1.新建“上方固定，左侧嵌套”框架页面 2.头部框架：设置页面属性，左右边距0像素。选中头部框架（Alt）在源文件中选择top1.html; 3.左侧框架：同理修改页面属性，源文件选择left1.html; 4.右侧框架：同理修改页面属性，源文件选择right1.html; 5.保存全部，预览。 第三章 网页的排版和布局(三) ——使用框架布局网页 计算机与信息学院 顶部框架（topframe）· 主框架（mainframe） 底部框架（bottomframe） 左框架 （leftframe） 3.4.1 框架网页概述 框架由框架集和框架组成。 框架是布局工具，用框架把浏览器窗口划分成若干个部分，每个框架都是浏览器窗口中的一个区域，它可以显示独立内容的 HTML 文档。 框架集也是 HTML 文件，它定义一组框架的布局和属性，包括框架的数目、框架的大小和位置以及在每个框架中初始显示的页面的 URL。 框架的最常见用途就是导航。一组框架通常包括一个含有导航条的框架和另一个要显示主要内容页面的框架。 3.4.1 框架网页概述 框架的优点： （1）访问者的浏览器不需要为每个页面重新加载与导航相关的图形。 （2）每个框架都具有自己的滚动条。 （3）各个页面之间的逻辑关系可以很好的表示出来。 框架也有以下缺点： （1）可能难以实现不同框架中各元素的精确图形对齐。 （2）有些浏览器可能不支持框架。 所以使用框架布局时，通常还与表格、层等结合使用。 3.4.2 创建框架和框架集 1、创建框架和框架集 选择预定义的框架集将自动设置创建布局所需的框架集和框架，是创建基于框架布局的最简单的方法。 1）菜单栏：菜单\新建，在新建文档对话框中,类别中选择框架集，即可直接创建框架网页 2）插入栏：布局 3）菜单栏：插入\HTML\ 框架 框架集：frameset 框架：frames 框架集图标的蓝色区域表示当前文档，而白色区域表示将显示其它文档的框架。 3.4.2 创建框架和框架集 预定义的框架集 选择预定义的框架集将自动设置创建布局所需的框架集和框架，是迅速创建基于框架布局的最简单方法。（三种方法） 3.4.2 创建框架和框架集 自定义框架集 1）首先在菜单栏中设置查看\可视化助理\框架边框，再通过拖曳4条边可以直接生成框架集。 （对比：+Alt） 2）菜单栏中修改/框架集，从子菜单选择拆分项 框架允许嵌套，即大框架中包含了两个或者多个小框架。 3.4.2 创建框架和框架集 2、保存框架和框架集 在浏览器中预览框架集之前，必须保存框架集文件以及在框架中要显示的所有文档。 既可以单独保存，也可以同时保存所有文档。 1）保存所有框架集文件和框架文件 方法：菜单栏中文件\保存全部。若未保存过，则出现另存为对话框，可根据文档窗口中出现的粗线边框的提示一步步保存，直至保存完所有框