《利用表格设计和制作网页.ppt》由会员分享，可在线阅读，更多相关《利用表格设计和制作网页.ppt（25页珍藏版）》请在三一文库上搜索。
1、中国计划出版社 网页制作精品课程 第 3 章 利用表格设计和制作网页 3.1 表格网页实例 3.2 利用Dreamweaver MX编辑网页表 格 3.3 利用HTML编辑网页表格 3.4 表格的应用技巧 中国计划出版社 网页制作精品课程 在网页的设计制作中，表格（Table）是 一个重要的网页元素，主要用来在页面上 布局数据和图像，使页面中的信息布局合 理、简洁。另外，在网页设计制作中，表 格还有一个重要作用，就是对网页进行排 版。 中国计划出版社 网页制作精品课程 3.1 表格网页实例 表格化的页面在不同平台、不同分辨率 的浏览器里都能显示出原有的布局和对齐 。图4-1所示的是“天使部落”
2、网页利用表格 进行布局的页面效果。 中国计划出版社 网页制作精品课程 图4-1 “天使部落”主页 中国计划出版社 网页制作精品课程 3.2 利用Dreamweaver MX 编辑网页表格 3.2.1 创建表格 表格主要由以下3个基本元素组成。 行（Row）：表格在水平方向上的组成 元素。 中国计划出版社 网页制作精品课程 列（Column）：表格在竖直方向上的组 成元素。 单元格（Cell）：表格中的最小的独立 存放数据的区域。 中国计划出版社 网页制作精品课程 另外，还有以下几个概念需要掌握 。 边框（Border）：单元格四周的界 线标志。 表格间距（Cellspace）：定义内部 表格线
3、的宽度。 表格间隙（Cellpad）：相邻的单元 格之间的间隙。 中国计划出版社 网页制作精品课程 在Dreamweaver MX中，创建表格 有以下4种方式。 执行主菜单中的“插入”“表格”命 令。 按组合键Ctrl+Alt+T。 单击插入面板上“常用”选项卡中的“ 插入表格”按钮。 单击插入面板上“表格”选项卡中的“ 插入表格”按钮。 中国计划出版社 网页制作精品课程 使用上述4种方式中任意一种方法都 将打开如图3-2所示的“插入表格”对话框 。 图图3-2 “3-2 “插入表格插入表格” ”对话框对话框 中国计划出版社 网页制作精品课程 对话框中各选项含义如下。 行数：初次指定表格的总行
4、数。 列数：初次指定表格的总列数。 单元格填充：指定单元格的大小， 以像素为单位。 单元格间距：指定单元格之间的距 离，以像素为单位。 中国计划出版社 网页制作精品课程 宽度：指定表格的宽度，以百分比或 像素为单位（百分比用于根据浏览器窗 口的大小来自动调整表格的宽度）。 边框：指定表格边界的宽度，以像素 为单位（如果在浏览器窗口中不显示表 格的边框，则定义为0）。 中国计划出版社 网页制作精品课程 3.2.2 表格的编辑 1修改表格 （1）调整表格的大小 图3-4 利用“属性”面板调整表格的大小 中国计划出版社 网页制作精品课程 （2）调整行高、列宽 （3）合并单元格 （4）拆分单元格 （5
5、）表格的嵌套 （6）表格的复制 （7）删除表格 （8）增加或减少行、列跨度 中国计划出版社 网页制作精品课程 2在表格中输入文字和图像 向表格中输入的内容主要是文字和图 片两种形式。 （1）在表格中输入文字 （2）在表格中插入图像 中国计划出版社 网页制作精品课程 3.2.3 设置表格属性 1表格整体属性设置 图3-11 表格“属性”面板 中国计划出版社 网页制作精品课程 2行、列和单元格属性设置 图3-12 表格的行、列和单元格“属性”面板 中国计划出版社 网页制作精品课程 3.2.4 表格的排序 在表格的应用中，常要对表格中的一 组数据进行排序。在Dreamweaver MX 中可以实现按
6、数字的排序和按字母的排 序 。 中国计划出版社 网页制作精品课程 3.2.5 表格的格式化 Dreamweaver MX为表格提供了17种 表格格式模板，可以从中选择一种方案 快速应用到用户设计的表格中。 中国计划出版社 网页制作精品课程 图4-14 “格式化表格”对话框 中国计划出版社 网页制作精品课程 3.3 利用HTML编辑 网页表格 3.3.1 利用HTML制作示例网页表格 利用HTML同样可以制作网页表格。对 于初学者直接使用HTML代码编制网页表 格是件很困难的事情，但是，可以通过 Dreamweaver MX提供的“文档”面板来查 看已经设计好的网页表格的HTML代码， 以帮助用
7、户学习和掌握HTML代码的编写 规则及方法。 中国计划出版社 网页制作精品课程 3.3.2 表格的基本构成 通常在HTML中创建一个普通的表格 应包括以下标记符。 （1）TABLE （2）TITLE （3）CAPTION （4）TR （5）TD和TH （6）META 中国计划出版社 网页制作精品课程 3.3.3 表格的编辑及属性设置 1合并单元格 2边框与分隔线 3表格的对齐 4控制表格和单元格的大小 5设置表格和单元格的背景 6控制单元格空白 中国计划出版社 网页制作精品课程 3.4 表格的应用技巧 3.4.1 利用表格制作水平线与垂直线 在对网页布局排版时，有时候会需要一 条细线作为分隔线
8、，用一些线型的图像可 以完成这项功能，但既费事又占据存储空 间。其实，这个小问题用表格就能很好的 实现，只需对表格属性、单元格属性及其 源代码稍作修改即可。 中国计划出版社 网页制作精品课程 3.4.2 利用表格进行页面布局 Dreamweaver MX为此提供了一种新 的网页排版视图布局视图（Layout View），在这种视图模式下，用户可以 通过绘制布局表格和布局单元格，从而 可以像在一张白纸上用笔来规划网页的 布局，并可在布局单元格中插入文本和 图像，通过移动布局表格和布局单元格 的位置来精确地定位网页上的文本和图 像。 中国计划出版社 网页制作精品课程 1切换视图 2绘制布局表格 3编辑和设置布局表格