ch07-使用表格布局页面.pptx

Dreamweaver CS5网页设计与制作基础教程,第7章 使用表格布局页面,7.1 创建表格,7.1.1 表格的基本概念 7.1.2 插入表格 7.1.3 在表格中输入内容,7.1.1 表格的基本概念,表格就是由一些粗细不同的横线和竖线构成的，横的叫做行，竖的叫做列，由行和列相交的一个个方格称为单元格。单元格是表格的基本单位，每一个单元格都是一个独立的正文输入区域，可以输入文字和图形，并单独进行排版和编辑。,7.1.2 插入表格,在菜单栏中，选择【插入】【表格】菜单项，弹出【表格】对话框，在该对话框中，可以设置表格的行数、列数、表格宽度、单元格间距、边距和边框粗细等选项。,7.1.3 在表格中输入内容,表格创建完成后，可以向表格中添加内容，在表格中添加的内容可以包括文本、图像或数据等内容。,7.2 设置表格及单元格属性,7.2.1 设置表格属性 7.2.2 设置单元格的属性 7.2.3 设置列与行的属性,7.2.1 设置表格属性,设置表格属性可以使用网页文档的属性面板，在文档中插入表格之后选中当前表格，在属性面板中可以对表格进行相关设置。,7.2.2 设置单元格的属性,在Dreamweaver CS5中，不但可以设置行或列的属性，还可以设置单元格的属性。,7.2.3 设置列与行的属性,启动Dreamweaver CS5，绘制表格，首先，需要选中表格对象的行与列，在属性面板中即可对表格的行与列进行相关的设置。,7.3 编辑与调整表格结构,7.3.1 选择表格及单元格 7.3.2 调整表格和单元格的大小 7.3.3 增加和删除表格的行和列 7.3.4 拆分单元格 7.3.5 合并单元格 7.3.6 剪切、复制、粘贴表格,7.3.1 选择表格及单元格,1. 选择表格 启动Dreamweaver CS5，单击表格上的任意一个边线框，可以选择表格；或者将光标置于表格内的任意位置，在菜单栏中，选择【修改】【表格】【选择表格】菜单项，即可完成选择表格的操作。 2. 选择单元格 选择单个单元格：将鼠标指针移动到表格区域，按住键盘上的【Ctrl】键，当指针变成 形状时，单击鼠标左键，即可选中所需要的单元格。,7.3.2 调整表格和单元格的大小,在文档中，插入表格以后，可以改变比阿哥的宽度和高度，将鼠标指针移动到表格内部，当鼠标指针变成双箭头形状时，单击并拖动鼠标左键，即可调整表格的大小。,7.3.3 增加和删除表格的行和列,打开Dreamweaver CS5，绘制表格。 将鼠标光标放置在第1行单元格中，在菜单栏中，选择【修改】【表格】【插入行】菜单项，即可插入行。 将鼠标光标放置在第1行单元格中，在菜单栏中，选择【修改】【表格】【插入列】菜单项，即可插入列。 将鼠标光标当中于准备要删除行的任意一个单元格，在菜单栏中，选择【修改】【表格】【删除行】菜单项，即可完成删除行的操作。,7.3.4 拆分单元格,打开Dreamweaver CS5，绘制表格，将鼠标光标，放置于准备拆分的单元格中，在菜单栏中，选择【修改】【表格】【拆分单元格】菜单项。 弹出【拆分单元格】对话框，设置参数，单击【确定】按钮。 此时，可以看到单元格已经被拆分，通过以上步骤即可完成拆分单元格的操作。,7.3.5 合并单元格,打开Dreamweaver CS5，绘制一个表格，选中准备合并的单元格，在菜单栏中，选择【修改】【表格】【合并单元格】菜单项，即可将多个单元格合并成一个单元格。,7.3.6 剪切、复制、粘贴表格,复制表格的方法与复制文本对象的方法相同，首先，选中多个单元格对象，在菜单栏中，选择【编辑】【拷贝】菜单项，即可复制表格。 鼠标光标定位于准备粘贴单元格的位置，在菜单栏中，选择【编辑】【粘贴】菜单项，即可将所复制的多个对象粘贴到当前表格中。 剪切表格的方法与剪切文本对象的方法相同，首先，选中准备剪切的多个单元格对象，在菜单栏中，选择【编辑】【剪切】菜单项，即可剪切表格。,7.4 表格数据的处理,7.4.1 排序表格 7.4.2 导入导出表格数据,7.4.1 排序表格,启动Dreamweaver CS5，在菜单栏中，选择【文件】【打开】菜单项，打开素材文件。 将鼠标指针移动到表格的上边框或下边框，当鼠标指针变成网格形状 时，单击鼠标指针即可选中全部表格。 在菜单栏中，选择【命令】【排序表格】菜单项。 弹出【排序表格】对话框，设置参数，单击【确定】按钮。 此时，在窗口中已经将表格排序，通过以上步骤即可完成排序表格的操作。,7.4.2 导入导出表格数据,启动Dreamweaver CS5，在菜单栏中，选择【插入】【表格对象】【导入表格数据】菜单项，如图7-44所示。 弹出【导入表格数据】对话框，单击【数据文件】文本框右边的【浏览】字样，选择数据文件，在【定界符】文本框中，选择【逗点】，单击【确定】按钮。 此时，已经将文件导入到窗口中，通过以上步骤即可完成导入表格式数据的操作方法。,7.5 使用样式控制数据表格,7.5.1 表格模型 7.5.2 表格标题 7.5.3 表格样式控制,7.5.1 表格模型,网页设计中，页面布局是一个重要的部分，Dreamweaver CS5提供了多种方法来创建和控制网页布局，最普通的方法就是使用表格，使用表格可以简化页面布局设计过程、导入表格化数据、设计页面分栏及定位页面上的文本和图像等。,7.5.2 表格标题,capt