用表格和框架布局网.ppt

桂林电子科技大学信息科技学院信息工程系 第9章 用表格和框架布局网页 桂林电子科技大学信息科技学院信息工程系 本章知识技能要点 p 表格在网页中的作用 p 表格的创建与编辑 p 利用表格对页面进行布局 p 利用布局模式对页面进行布局 p Dreamweaver8中框架的创建方法 p 超链接框架目标的指定 p 框架和框架页的基本操作 桂林电子科技大学信息科技学院信息工程系 9.1 网页中的表格 桂林电子科技大学信息科技学院信息工程系 9.1 网页中的表格 常见操作： p 在网页中插入表格 p 向表格中添加数据 p 导入外部数据 p 表格的编辑与修改 桂林电子科技大学信息科技学院信息工程系 9.1 网页中的表格 表格大小相 关设定 设定页首的 位置 设定附 加功能 桂林电子科技大学信息科技学院信息工程系 9.1 网页中的表格 将EXCEL文件导入DW数据窗口的方法： p 导入的电子表格请符合下面的三种情况 1. 是从本系统导出的模板 2. 在excel另存为csv(逗号分隔)类型的文件； 3. 在excel另存为文本文件(制表符分隔,即tab分隔)类型 的文件 p 选择“文件”菜单“导入”“表格式数据”命令，或者选 择“插入”菜单“表格对象”“导入表格式数据”命令， 弹出“导入表格式数据”对话框，指定要导入的数据文件 、定界符及其他选项。 定界符：设定界线的符号 桂林电子科技大学信息科技学院信息工程系 9.2 布局模式 单击“插入”栏“布局”类中的“布局模式”按钮，进入布局模式 。 桂林电子科技大学信息科技学院信息工程系 9.3 框架网页的制作 框架网页的作用是将数个网页同时集中在同一个网页呈 现，也称为框架集(Frameset)网页。 9.3.19.3.1 框架的基本概念框架的基本概念 parisdiary.htm parisdiarymain.htm parisdiarytopmenu.htm parisdiaryleftmenu.htm 桂林电子科技大学信息科技学院信息工程系 9.3 框架网页的制作 以ch9文件夹中ch-08文件夹的素材为例。 可先建立一个名为paris的站点。 一、分割框架 9.3.2 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 框架网页的制作 桂林电子科技大学信息科技学院信息工程系 9.3 框架网页的制作 四、保存框架组 桂林电子科技大学信息科技学院信息工程系 9.3 框架网页的制作 桂林电子科技大学信息科技学院信息工程系 课堂练习9-1 要求用表格布局分别实现网页设计与制作教程 P235第1题和第2题的页面效果，相应的图片素材和效果等 资料分别位于exercisech9-1中的ch9-1-1和ch9-1-2文 件夹。 （注：对于第1题，考虑能否用DW的网站相册功能实现相 应的图片显示效果） 桂林电子科技大学信息科技学