第4章情景4——建立公司在线电子相册.ppt

2、设置页面布局如图所示: 第四章 情景4 建立公司在线电子相册 本章主要介绍了在Dreamweaver CS5中如何使用表格。表格是网页中非常重要的元素，它的作用主要有两个：一是对数据进行合理的组织，另外一个就是用来布局网页。使用表格可以简单快速的进行网页布局，但是维护起来相对复杂，所以对于后期维护较高的网页还是采用Div+CSS布局。本章内容通过建立某公司在线电子相册深入学习表格。 具体涉及以下内容： 插入表格 设置表格和单元格属性 修改表格 嵌套表格 表格布局页面 4.1 任务一：规划相册并且制作相册目录 4.1.1 知识要点 1．表格的插入 一个表格由行、列、单元格三个部分组成，在“菜单栏”中选择“插入”|“表格”（Ctrl+Alt+T），或者在“插入栏”选择“常用”或“布局”类别单击表格图标，弹出对话框如图所示。 2．选择表格、单元格 在表格的边框线上单击或选择状态栏上的table标签。 拖选表格（类似文本的选择）。 将鼠标放置到一行的左侧，单击选择一行或选择状态栏上的tr标签。 将鼠标放置到一列的上面，单击选择一列。 按Ctrl键单击需要选择的单元格，可以选择不连续的单元格。 按shift键选择连续的单元格。 拖动选择单元，将光标定位一个单元格之内，拖动鼠标覆盖需要选择的单元格区域或选择状态栏上的td标签。 3．设置表格和单元格属性 选择表格后，打开“属性检查器”如图所示,可以设置属性。 行、列数：设置表格行数和列数。 宽、高：设置表格的宽度和高度，单位可以是像素也可以百分比。 填充（单元格边距）：单元格里的内容和单元格边的距离。 间距（单元格间距）：单元格和单元格之间的距离。 对齐方式：表格在页面中的对齐（左、中、右）。 边框：表格边框的粗细。 类：设置表格的CSS样式。 清除行高、列宽：删除表格中所有指定的行高和列宽。 表格宽度单位的转换： 表示单位转换为像素， 表示单位转换为百分比。 选择单元格后，打开“属性检查器”如图所示，设置单元格属性。 单元格文本水平和垂直方向的对齐方式。 单元格的宽度和高度。 背景颜色、背景图像。 不换行：强制单元格不自动换行。 单元格合并：选中同行或同列相邻的单元格，进行合并。 单元格拆分：选中一个单元格进行拆分成多行或多列。 4．删除、添加表格的行和列 （1）删除行或列：选择要删除的行、列，在“菜单栏”中选择“修改”|“表格”|“删除行、列”或直接按下“Delete”键。 （2）添加行或列：选择要添加的行、列位置的单元格，在“”菜单栏选中择“修改”|“表格”|“插入行、列”，或点击右键，在弹出的快捷菜单中选择“插入行、列”命令。 5．嵌套表格 在一个表格的单元格内插入另一个表格称为嵌套表格，这个表格的宽度要受它所在单元格的宽度限制，一般嵌套表格的宽度设置的用相对单元格宽度的百分比为单位。 6．表格式数据的导入 将具有表格数据特点的文本文件（文本通过逗号、tab、空格等符号进行分割），以表格的形式导入到Dreamweaver CS5中。具体操作在“菜单栏”中选择“插入”|“表格对象”|“导入表格式数据”命令打开“导入表格式数据”对话框，选择“素材4”文件夹中的的文本文件，设置分隔符、表格宽度、边框等，单击“确定”按钮。如图所示。 7．表格数据的排序 在Dreamweaver CS5 中可以对表格中的数据排序，可以按“笔画”、“数字”，“日期”和“拼音”四个类型排序，并且可以对三个关键字排序。具体操作是选中表格，在“菜单栏”中选择“命令”|“排序表格”，在打开的“排序表格”对话框中设置为哪列排序，按照什么类型排序（字母和数字），怎么排序（升序降），如图所示。（注：第一行的数据作为表头，不参加排序） 4.1.2 工作任务和设计效果 本任务是为某公司制作一套电子相册目录，主要使用表格进行布局，需要使用表格创建和修改以及单元格属性设置等，效果如图 所示。 4.1.3 制作相册目录 1．建立站点 创建一个“公司相册”站点，并且给素材进行分类。“images”文件夹放置主页相关的图片，“pages”文件夹放置除主页以外的其他网页，并且在其中建立一个“photos”文件夹放子页的图像。新建网页，保存命名为“index.html”作为相册目录页，站点结构如图所示。 2．设置页面属性 单击“属性检查器”中的“页面属性”按钮，在弹出对话框中设置网页背景图像，设置主页背景图像为“s_body_bg.gif”，文字大小12像素，文字颜色 #B51C8C，如图所示。 3．制作相册标题样式 （1）输入标题并且设置“HTML格式”。 在页面中输入标题“公司电子相册”，选择文本，打开“属