网页制作基础教程 第2版 作者 邓振杰 第4章.pptVIP

第4章　利用表格设计和制作网页　 本章学习目标 4.1　表格网页实例　4.2　利用Dreamweaver CS3编辑网页表格　4.3　利用HTML编辑网页表格　4.4　表格的应用技巧　 第4章　利用表格设计和制作网页　 本章学习目标 ● 利用Dreamweaver CS3创建表格的方法。 ● 编辑表格的方法。 ● 设置表格属性的方法。 ● 利用HTML编辑表格的方法。 ● 使用表格和布局视图进行页面布局的方法。 4.1 表格网页实例 Dreamweaver CS3提供了强大的制表功能，使得在制作网页的过程中插入表格的操作变得简便、快捷，并可以在表格中插入图片、文字、Flash等各种元素。表格还可以转换成层，当作层来使用（层的知识将在第9章学习）。对已经建立好的表格，可以很容易地修改表格的外观，改变表格中行、列的数量，对表格添加颜色，改变表格对齐方式等操作。下面以制作“天使部落”主页为例介绍创建表格、编辑表格、在表格中添加文字和图片、删除表格等内容，并结合此例介绍设置表格和单元格的属性等方法。 4.2 利用Dreamweaver CS3编辑网页表格 4.2.1 创建表格 1.执行主菜单中的“插入记录”→“表格”命令。 2. 按组合键“Ctrl+Alt+T”。 3.单击插入面板上“常用”选项卡中“插入表格”按钮。 4.2 利用Dreamweaver CS3编辑网页表格 4.2.2 表格的编辑 1．修改表格 （1）调整表格的大小。 （2）选择表格。 （3）调整行高、列宽。 （4）添加/删除行列。 （5）合并单元格。 （6）拆分单元格。 （7）表格的嵌套。 （8）表格的复制。 （9）删除表格。 （10）增加或减少行、列跨度 2．在表格中输入文字和图像 （1）在表格中输入文字。 （2）在表格中插入图像。 （3）导入表格数据文件。 4.2 利用Dreamweaver CS3编辑网页表格 4.2.3 设置表格属性 1．表格整体属性设置 2．行、列和单元格属性设置 4.2 利用Dreamweaver CS3编辑网页表格 4.2.4 表格的排序 按数字排序 按字母排序 4.3 利用HTML编辑网页表格 4.3.1 利用HTML制作示例网页表格 利用HTML同样可以制作网页表格。对于初学者直 接使用HTML代码编制网页表格是件很困难的事， 但是，可以通过Dreamweaver CS3提供的“文档”面 板来查看已经设计好的网页表格的HTML代码，以 帮助用户学习和掌握HTML代码的编写规则及方法。 4.3 利用HTML编辑网页表格 4.3.2 表格的基本构成 （1）TABLE。 （2）TITLE。 （3）CAPTION。 （4）TR。 （5）TD和TH。 （6）META。 4.3 利用HTML编辑网页表格 4.3.3 表格的编辑及属性设置 1．合并单元格 2．边框与分隔线 3．表格的对齐 4．控制表格和单元格的大小 5．设置表格和单元格的背景 6．控制单元格空白 4.4 表格的应用技巧 4.4.1 利用表格制作水平线与垂直线 在对网页布局排版时，有时候会需要一条细线作为分隔线，用一些线型的图像可以完成这项功能，但既费事又占据存储空间。其实，这个小问题用表格就可以很好地解决，只需对表格属性、单元格属性及其源代码稍作修改即可。细线分隔线具体的制作过程如下。 4.4 表格的应用技巧 4.4.1 利用表格制作水平线与垂直线 （1）插入一个一行一列的表格。 （2）在表格“属性”面板中，按照下图所示来设置表 格的属性，即行、列数设为1；宽设为200像素（根据实 际需要来设置其值）；填充、间距设为0；边框设为0。 4.4 表格的应用技巧 4.4.1 利用表格制作水平线与垂直线 （3）按下图所示设置单元格的属性，即高设为1； 宽不设或设为0；背景颜色设为黑色（即为细线的颜色 ，也可以设置为其他颜色）。 4.4 表格的应用技巧 4.4.1 利用表格制作水平线与垂直线 （4）查看源代码，如下图所示，将td/td标记 符中的“nbsp;”（半个空格位）彻底删除，就可以得 到一条水平细线。 4.4 表格的应用技巧 4.4.2 利用表格进行页面布局 1．切换视图 Dreamweaver CS3为设计制作表格提供了两种视图：标准 视图（Standard View）和布局视图（Layout View），前面 介绍的表格创建及编辑过程都是在标准视图下进行的。要切 换到布局视图，可以执行主菜单中的“查看”→“表格模式”→“ 布局模式”命令，也可以在“插入”面板上选择“布局”选项，再 单