3章节利用表格设计和制作网页.pptVIP

第 3 章 利用表格设计和制作网页 ; 在网页的设计制作中，表格（Table）是一个重要的网页元素，主要用来在页面上布局数据和图像，使页面中的信息布局合理、简洁。另外，在网页设计制作中，表格还有一个重要作用，就是对网页进行排版。 ;3.1 表格网页实例;图4-1 “天使部落”主页 ;3.2 利用Dreamweaver MX编辑网页表格; 列（Column）：表格在竖直方向上的组成元素。 单元格（Cell）：表格中的最小的独立存放数据的区域。 ; 另外，还有以下几个概念需要掌握。 边框（Border）：单元格四周的界线标志。 表格间距（Cellspace）：定义内部表格线的宽度。 表格间隙（Cellpad）：相邻的单元格之间的间隙。; 在Dreamweaver MX中，创建表格有以下4种方式。 执行主菜单中的“插入”→“表格”命令。 按组合键Ctrl+Alt+T。 单击插入面板上“常用”选项卡中的“插入表格”按钮。 单击插入面板上“表格”选项卡中的“插入表格”按钮。; 使用上述4种方式中任意一种方法都将打开如图3-2所示的“插入表格”对话框。; 对话框中各选项含义如下。 行数：初次指定表格的总行数。 列数：初次指定表格的总列数。 单元格填充：指定单元格的大小，以像素为单位。 单元格间距：指定单元格之间的距离，以像素为单位。; 宽度：指定表格的宽度，以百分比或像素为单位（百分比用于根据浏览器窗口的大小来自动调整表格的宽度）。 边框：指定表格边界的宽度，以像素为单位（如果在浏览器窗口中不显示表格的边框，则定义为0）。;3.2.2 表格的编辑 1．修改表格 （1）调整表格的大小 ;（2）调整行高、列宽 （3）合并单元格 （4）拆分单元格 （5）表格的嵌套 （6）表格的复制 （7）删除表格 （8）增加或减少行、列跨度;2．在表格中输入文字和图像 向表格中输入的内容主要是文字和图片两种形式。 （1）在表格中输入文字 （2）在表格中插入图像;3.2.3 设置表格属性 1．表格整体属性设置;2．行、列和单元格属性设置;3.2.4 表格的排序 在表格的应用中，常要对表格中的一组数据进行排序。在Dreamweaver MX中可以实现按数字的排序和按字母的排序 。;3.2.5 表格的格式化 Dreamweaver MX为表格提供了17种表格格式模板，可以从中选择一种方案快速应用到用户设计的表格中。 ;图4-14 “格式化表格”对话框 ;3.3 利用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.2 利用表格进行页面布局 Dreamweaver MX为此提供了一种新的网页排版视图——布局视图（Layout View），在这种视图模式下，用户可以通过绘制布局表格和布局单元格，从而可以像在一张白纸上用笔来规划网页的布局，并可在布局单元格中插入文本和图像，通过移动布局表格和布局单元格的位置来精确地定位网页上的文本和图像。;1．切换视图 2．绘制布局表格 3．编辑和设置布局表格