用表格和框架布局网页.pptVIP

桂林电子科技大学信息科技学院信息工程系 第 9 章 用表格和框架布局网页 桂林电子科技大学信息科技学院信息工程系 本章知识技能要点 表格在网页中的作用 表格的创建与编辑 利用表格对页面进行布局 利用布局模式对页面进行布局 Dreamweaver8 中框架的创建方法 超链接框架目标的指定 框架和框架页的基本操作 桂林电子科技大学信息科技学院信息工程系 9.1 网页中的表格 桂林电子科技大学信息科技学院信息工程系 9.1 网页中的表格 常见操作： ? 在网页中插入表格 ? 向表格中添加数据 ? 导入外部数据 ? 表格的编辑与修改 桂林电子科技大学信息科技学院信息工程系 9.1 网页中的表格 表格大小相 关设定 设定页首的 位置 设定附 加功能 桂林电子科技大学信息科技学院信息工程系 9.1 网页中的表格 将 EXCEL 文件导入 DW 数据窗口的方法： ? 导入的电子表格请符合下面的三种情况 1. 是从本系统导出的模板 2. 在 excel 另存为 csv( 逗号分隔 ) 类型的文件； 3. 在 excel 另存为文本文件 ( 制表符分隔 , 即 tab 分隔 ) 类型 的文件 ? 选择“文件”菜单 → “导入” → “表格式数据”命令， 或者选择“插入”菜单 → “表格对象” → “导入表格式 数据”命令，弹出“导入表格式数据”对话框，指定要 导入的数据文件、定界符及其他选项。 定界符：设定界线的符号 桂林电子科技大学信息科技学院信息工程系 9.2 布局模式 单击“插入”栏“布局”类中的“布局模式”按钮，进入布 局模式。 桂林电子科技大学信息科技学院信息工程系 9.3 框架网页的制作 框架网页的作用是将数个网页同时集中在同一个网页呈 现，也称为框架集 (Frameset) 网页。 9.3.1 框架的基本概念 parisdiary.htm parisdiarymain.htm parisdiarytopmenu.htm parisdiaryleftmenu.htm 桂林电子科技大学信息科技学院信息工程系 9.3 框架网页的制作 以 ch9 文件夹中 ch-08 文件夹的素材为例。 可先建立一个名为 paris 的站点。 一、分割框架 9.3.2 框架网站的制作 桂林电子科技大学信息科技学院信息工程系 9.3 框架网页的制作 1 、在站点 paris 中新建页面 parisdiary.htm ，将框架一分为三。 桂林电子科技大学信息科技学院信息工程系 9.3 框架网页的制作 关于每个框架的命名： 这里， 左框架名为： leftFrame ，上框架名为： topFrame ，右框 架名为： mainFrame 。 注：可以通过框架属性面板对框架重新命名。 桂林电子科技大学信息科技学院信息工程系 9.3 框架网页的制作 2 、设置框架属性 桂林电子科技大学信息科技学院信息工程系 9.3 框架网页的制作 常用设置方法： 单击框架面板中框架的边框，选择框架集， 然后在属性检查器中设置此框架集的属性。 （可参考《网页制作教程》 P157 ）选择“窗口”菜单 → “框架”，可弹出“框架”面板 以设置右边框为例： 桂林电子科技大学信息科技学院信息工程系 9.3 框架网页的制作 二、指定各框架的框架内容 以设置左侧框架为例： 左侧设置完成后的效果 topFrame 的链接为： parisdiarytopmenu.htm mainFrame 的链接为： parisdiarymain.htm 桂林电子科技大学信息科技学院信息工程系 9.3 框架网页的制作 三、指定链接框架 未调整前的预览效果 桂林电子科技大学信息科技学院信息工程系 9.3 框架网页的制作