电子教案第5章.pptVIP

本章学习方法指引 在本章中，我们将随着范例网站的分解任务，学习如何利用表格、框架、模板、CSS和DIV技术实现各种元素在网页页面上的排版、定位以及如何将站点内各网页构建成一个有联系的、风格统一的整体。 在本章的实验课中，同学们可以为自己的网页作品的页面内元素进行排版定位，并综合使用多种技术将站点内的各栏目页相互连接并统一风格、形成整体结构。初步完成自己的作品站点！ 5.1表格的相关知识 表格是网页上元素进行布局配置的主要方法之一。 范例网站“新疆之旅”的“相关信息”模块即是使用Dreamweaver制作表格的案例。（请观察教材所附光盘中的“范例网站完成版\travelinfo.html文件） 5.1表格的相关知识--案例1基础表格 1.选择“插入” →“表格”,在表格对话框中进行设置。 5.1表格的相关知识--案例1基础表格 备注 表格的宽度有两种设置单位：“百分比”和“像素” “单元格边距” 表示单元格的内容与格边的距离 “单元格间距”表示表格内部各个单元格之间的间隙。 在“边框”、“单元格边距”和“单元格间距” 属性中设置输入“0”，可以制作出无边框表格。 5.1表格的相关知识--案例1基础表格 2.在属性面板设置表格单元格的背景颜色 3.在属性面板设置行高列宽 备注 如何选中表格的单元格、行、列。 利用标签选择面板选中表格中的元素 4.建立CSS样式,为表格添加边框线颜色和表格背景色。 5.在表格中输入文字 6.设置表格的对齐方式 5.1表格的相关知识--案例2嵌套表格 “嵌套结构表格”是指一个表格位于另一表格的单元格中。 1.制作外层表格 新建一个表格 为其建立CSS样式 设置左列宽度为50% 备注：表格的列宽可以设为 固定数值，也可以设为 百分比 5.1表格的相关知识--案例2嵌套表格 2.制作内层小表格 将光标放置在外表的第一个单元格中，并插入小表格。 为其建立CSS样式。 设置其左侧单元格宽度为130。 将内层表格复制到外层表格的其他单元格内。 5.1表格的相关知识--案例3不规则表格 外层大表格是一个两行三列的基本表，内嵌的小表格是一个不规则表格 ，小表格可用先插入规则表后“合并/拆分单元格”的方法制作。 5.1表格的相关知识--扩展知识 给表格或单元格加上背景图片 建立CSS样式“.tablebk”，选择某图片作为背景图片。 可选择套用至整表或某些单元格区域。 5.1 表格的相关知识--课后练习与思考 动手实做 制作无框线表格 分析思考 分析“边框线颜色、背景色、单元格颜色”这些颜色的设置与不同的边距、间距的设置来相互搭配所产生的各种不同效果。 5.2 利用框架进行网页布局 框架页面通过框架将浏览器窗口划分为多个独立的区域，在每个区域可以单独显示不同的网页，每个区域可以有独立的滚动条。 范例网站“新疆之旅”的“驴友游记”模块即为使用Dreamweaver制作框架页面的实例。（请观察教材所附光盘中的“\范例网站完成版\ xinjiangwebxinjiangdiary.html”文件） 5.2利用框架进行网页布局 常用的框架结构 5.2利用框架进行网页布局 框架的结构 框架由框架页和框架集组成 框架页就是网页中被分隔开的各个部分，每部分都是一个完整的网页，这些网页共同组成了框架集。 框架集（也称为框架组，Frameset）实际上也是一个网页文件，用于定义框架的结构、数量、尺寸等属性。 访问一个框架（集）网页的方法，跟访问一个普通网页的方法相同。 5.2利用框架进行网页布局--案例 制作简单框架网页“潜水与摄影” 5.2利用框架进行网页布局--案例 操作步骤(先建立名文件夹) 1.选择“文件”→“新建”命令，选中“示例中的页” ，并选中“框架页” ，选择需要的框架类型后单击“创建”按钮。此时，系统会自动打开“框架标签辅助功能属性”对话框，你可为每个框指定一个标题或采用默认的标题。 2.选择“文件”→“框架集另存为” ，保存上步新建的框架网页（于新建的文件夹中，并加以命名，如：frameexample）。 3.设置框架的宽和高。 此步需要使用到“框架面板”。 5.2利用框架进行网页布局--案例 4.为各框架指定内部需要放置的网页文件。 5.为框架做好链接。 链接目标中的mainframe、topframe和leftframe指代的是当前页面上的各个框架名称。 6.保存框架 在“框架”面板中单击框架集的最外端边框，以选取框架集，选择“文件”→“保存全部”命令，框架集文件和各个框架页的修改都会被保存。 5.2利用框架进行网页布局--扩展知识 框架的嵌套 嵌套框架是在已经存在的框架中插入一个框架。一个框架集文件可以包含多个嵌套框架集。 具体方法是：打开一