网页制作与网站设计_DreamweaverCS3表格布局

1、项目项目七七Dreamweaver CS3表格布局 l 内容摘要内容摘要 介绍了表格的创建及其参数设置 介绍了单元格的基本编辑及单元格属性 介绍了选择表格及增加行和列并设置其属性 介绍了布局表格和布局单元格的创建方法 l 学习创建表格方法及在扩展表格模式下编辑表格l 了解表格属性参数及单元格属性参数含义 l 学习选择、添加、删除、拆分、合并表格行列、单元格的方法并能正确设置表格内容的格式 l 掌握布局表格及布局单元格的创建方法及运用布局表格布局页面l 学习目标学习目标任务1表格的创建 1. 任务描述任务描述 在Dreamweaver中表格可以实现将网页划分为不同的部分，实现对元素的准确定位，使

2、得页面中的文本、图像等元素排列得更有条理 2. 任务说明任务说明 本任务主要介绍在标准模式下创建表格，以及使用扩展表格模式编辑表格两个操作。扩展表格模式临时向文档中的所有表格添加单元格边距和间距，以使编辑操作更加容易。利用这种模式，可以选择表格中的项目或精确地放置插入点。 3. 操作步骤操作步骤 （1） 在标准模式下创建表格 1）打开一个网页，光标插入点定位在要放置表格的地方。 2）选择菜单“插入/表格”命令，或单击“插入”工具栏按钮图标，调出“插入表格”对话框，如图7-1所示。3）设置插入表格的行数和列数，如按图7-1参数设置后，得到图7-2所示表格。 图7-1 “插入表格”对话框图7-2

3、3行3列的表格（2）使用扩展表格模式编辑表格 1）选择“查看”菜单下的“表格模式/扩展表格模式”命令，或者单击“布局”选项卡中的“扩展”按钮图标，即可进入扩展表格模式。2）单击文档顶部的“扩展表格模式”条上的“退出”，或单击“布局”选项卡中的“标准”按钮图标退出扩展表格模式，如图7-3所示 。图7-3 扩展表格模式 任务2单元格的基本编辑 1. 任务描述任务描述 规则的表格插入后，有可能还要将它修改成不规则的表，或者调整表格大小 。 2. 任务说明任务说明 单元格是构成表格的基本元素，应熟练掌握单元格的编辑方法。 本任务介绍单元格的选中方法，拆分和合并单元格，单元格的属性的设置 。 3. 操作

4、步骤操作步骤 （1）选中单元格 1）选中一个单元格。 将光标置于要选中的单元格中，按住CTRL键的同时单击该单元格。 将光标置于要选中的单元格中，单击文档窗口底部的“标签选择器”中的标签。 将光标置于要选中的单元格中，按住CTRL+A组合键 2）选中相邻的多个单元格 将光标置于要选中的相邻单元格中的第一个单元格中，按住SHIFT键的同时单击最后一个单元格。 将光标置于要选中的相邻单元格中的第一个单元格中，拖动鼠标至最后一个单元格后再释放鼠标 3）选中不相邻的多个单元格按住CTRL键，用鼠标左键分别点选相应的单元格，则当前单元格即被选中 （2）合并和拆分单元格 1）拆分单元格 选中需要拆分的单元

5、格，执行命令“修改/表格/拆分单元格”，在弹出的“拆分单元格”对话框中输入要拆分的行数和列数。 选中需要拆分的单元格，单击“属性”面板中的“拆分单元格为行或列”按钮,在弹出的对话框中进行相应设置。 2）合并单元格 选中需要合并的单元格，执行命令“修改/表格/合并单元格”。 选中需要合并的单元格，单击“属性”面板中的“合并所选单元格”按钮 （3）设置单元格属性 在文档窗口中选中需要设置的单元格后，在“属性”面板（如图7-7所示）就会显示出相关属性。 属性面板中各个参数的含义如下：1) 格式：用于设置单元格中内容的格式。2) 样式：用于设置单元格中文本的CSS样式。3) 字体和大小：用于设置单元格

6、中文本的字体样式和大小。4) 水平：用于设置单元格中内容的水平对齐方式。5) 垂直：用于设置单元格中内容的垂直对齐方式。6) 不换行：如果不选中该选项，则当单元格中输入的文本长度超过单元格宽度时文本将自动换行，以保持表格单元格的宽度不变。7) 背景：设置当前选中单元格的背景图片，可以直接在后面对话框中输入背景图片路径，也可以点击旁边的文件夹图标选择背景图片所在位置。8) 边框：设置单元格的边框颜色。 图7-7 单元格属性任务3表格的属性设置 1. 任务描述任务描述 表格是处理数据时常用的形式，也是网页的一个重要元素，广泛的应用于数据、资料的显示和处理中。 固定行列的表格制作后，还需增加行和列。

7、 2. 任务说明任务说明 本任务介绍表格的选中方法，增加行和列、删除行和列，表格的属性设置 。3. 操作步骤操作步骤 （1）选择表格 将鼠标移到表格的边框顶部，鼠标旁边出现一个网格，单击可以选择表格，如图6-8所示。 鼠标点击表格内任意一个单元格，单击文档窗口下部标签选择器中的标签按钮，可以选择表格。 右击表格，在出现的快捷菜单中选择命令“表格/选择表格”。 鼠标单击表格内任意一个单元格，点击表示表格宽度的数字旁边的小箭头，选择命令“选择表格”。 1）插入单行或者单列 将光标置于单元格中，单击鼠标右键，从弹出的快捷菜单中选择“表格/插入行”菜单项,即可在选中的单元格上方插入一新行。或者选中单元

8、格后，点击文档窗口菜单“修改/表格/插入行”命令，同样在选中的单元格上方插入一新行。 如果在上述操作中，将快捷菜单命令改为“表格/插入列”，或者将文档窗口菜单命令改为“修改/表格/插入列”，则可在选中的单元格左侧插入一新列。2）插入多行或者多列将光标置于单元格中，单击鼠标右键，从弹出的快捷菜单中选择“表格/插入行或列”菜单项,弹出“插入行或列”对话框。在出现的对话框中，可以选择插入行或者列，以及插入的数量，或者是插入的位置 。（2） 增加行和列 （3） 删除行和列 将光标置于要删除的单元格中，单击鼠标右键，从弹出的快捷菜单中选择“表格/删除行”菜单项可删除光标所在行，如果选择“表格/删除列”

9、菜单项可删除光标所在列。 或者将光标置于要删除的单元格中，单击文档窗口菜单项“修改/表格/删除行”或 “修改/表格/删除列”命令，同样能删除光标所在单元格的行或列。（4）表格的属性 在文档窗口中选中需要设置属性的表格后，在“属性”面板中就会显示出相关属性，如图7-10 所示。 图7-10 表格属性 属性面板中各个参数的含义如下：表格 Id：Id是表格的名字。行和列：用于设置表格的行数和列数。宽：以像素为单位或按浏览器窗口宽度的百分比指定表格的宽度。按钮：用于清除表格的列宽值。按钮：用于清除表格的行高值。按钮：用于将表格的宽度转换成像素。按钮：用于将表格的宽度转换百分比。背景颜色：用于设置表格的

10、背景颜色，可直接在文本框中输入颜色数值，或在颜色拾色器中选择所需颜色。背景图像：用于设置表格的背景图像，可直接在文本框中输入背景图像文件的路径，也可单击旁边的“文件夹图标”按钮，从弹出的“选择图像源文件”对话框中选择所需文件。填充：即单元格的边距，用于设置单元格边界和单元格中内容之间的距离。间距：用于设置单元格之间的距离。对齐：用于设置表格的对齐方式。边框：用于设置表格边框的宽度，以像素为单位。 边框颜色：用于设置边框的颜色。 任务4表格布局 1.1.任务说明任务说明 如果您想像画画一样绘制一个专业的表格，例如沿页的顶部绘制一个单元格放置标题图形，在页的左边绘制另一个单元格放置导航条，在右边绘

11、制第三个单元格放置内容。 要完成这样一个表格，通过“表格布局”操作就可以实现。 2 2任务说明任务说明 在“布局”模式中，使用布局单元格和布局表格可对页面进行布局，也就是使用表格作为基础结构来设计自己的网页。 3. 操作步骤（1）创建布局表格1）在文档窗口中，选择菜单“查看/表格模式/布局模式”选项，可以切换到布局模式。2）在布局模式下，单击“插入”菜单下的“布局对象”选项，选择“布局表格”命令。此时鼠标指针变为“+”形，按住鼠标左键拖动，即可绘制出相应的布局表格。如图6-11所示。3）若要在不重复选择该菜单项的情况下绘制多个布局表格，在绘制布局表格时按住 Ctrl键拖动，只要继续按住 Ctrl键便可以连续绘制出多个布局表格。 4）页上显示的布局表格外框默认为绿色。（2） 创建布局单元格 1） 在布局模式下，单击菜单“插入/布局对象/布局单元格”命令，此时鼠标指针变为“+”