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

1、第四章第四章 情景情景4建立公司在线电子相册建立公司在线电子相册 本章主要介绍了在Dreamweaver CS5中如何使用表格。表格是网页中非常重要的元素，它的作用主要有两个：一是对数据进行合理的组织，另外一个就是用来布局网页。使用表格可以简单快速的进行网页布局，但是维护起来相对复杂，所以对于后期维护较高的网页还是采用Div+CSS布局。本章内容通过建立某公司在线电子相册深入学习表格。具体涉及以下内容：插入表格设置表格和单元格属性修改表格嵌套表格表格布局页面4.1 任务一：规划相册并且制作相册目录任务一：规划相册并且制作相册目录4.1.1 知识要点知识要点1表格的插入表格的插入 一个表格由行、

2、列、单元格三个部分组成，在“菜单栏”中选择“插入”|“表格”（Ctrl+Alt+T），或者在“插入栏”选择“常用”或“布局”类别单击表格图标，弹出对话框如图所示。2选择表格、单元格选择表格、单元格在表格的边框线上单击或选择状态栏上的标签。拖选表格（类似文本的选择）。将鼠标放置到一行的左侧，单击选择一行或选择状态栏上的标签。将鼠标放置到一列的上面，单击选择一列。按Ctrl键单击需要选择的单元格，可以选择不连续的单元格。按shift键选择连续的单元格。拖动选择单元，将光标定位一个单元格之内，拖动鼠标覆盖需要选择的单元格区域或选择状态栏上的标签。3设置表格和单元格属性设置表格和单元格属性选择表格后，

3、打开“属性检查器”如图所示,可以设置属性。行、列数：设置表格行数和列数。宽、高：设置表格的宽度和高度，单位可以是像素也可以百分比。填充（单元格边距）：单元格里的内容和单元格边的距离。间距（单元格间距）：单元格和单元格之间的距离。对齐方式：表格在页面中的对齐（左、中、右）。边框：表格边框的粗细。类：设置表格的CSS样式。清除行高、列宽：删除表格中所有指定的行高和列宽。表格宽度单位的转换： 表示单位转换为像素， 表示单位转换为百分比。选择单元格后，打开“属性检查器”如图所示，设置单元格属性。单元格文本水平和垂直方向的对齐方式。单元格的宽度和高度。背景颜色、背景图像。不换行：强制单元格不自动换行。单

4、元格合并：选中同行或同列相邻的单元格，进行合并。单元格拆分：选中一个单元格进行拆分成多行或多列。 4删除、添加表格的行和列删除、添加表格的行和列 （1）删除行或列：选择要删除的行、列，在“菜单栏”中选择“修改”|“表格”|“删除行、列”或直接按下“Delete”键。（2）添加行或列：选择要添加的行、列位置的单元格，在“”菜单栏选中择“修改”|“表格”|“插入行、列”，或点击右键，在弹出的快捷菜单中选择“插入行、列”命令。5嵌套表格嵌套表格 在一个表格的单元格内插入另一个表格称为嵌套表格，这个表格的宽度要受它所在单元格的宽度限制，一般嵌套表格的宽度设置的用相对单元格宽度的百分比为单位。6表格式数

5、据的导入表格式数据的导入 将具有表格数据特点的文本文件（文本通过逗号、tab、空格等符号进行分割），以表格的形式导入到Dreamweaver CS5中。具体操作在“菜单栏”中选择“插入”|“表格对象”|“导入表格式数据”命令打开“导入表格式数据”对话框，选择“素材4”文件夹中的的文本文件，设置分隔符、表格宽度、边框等，单击“确定”按钮。如图所示。7表格数据的排序表格数据的排序在Dreamweaver CS5 中可以对表格中的数据排序，可以按“笔画”、“数字”，“日期”和“拼音”四个类型排序，并且可以对三个关键字排序。具体操作是选中表格，在“菜单栏”中选择“命令”|“排序表格”，在打开的“排序表

6、格”对话框中设置为哪列排序，按照什么类型排序（字母和数字），怎么排序（升序降），如图所示。（注：第一行的数据作为表头，不参加排序）4.1.2 工作任务和设计效果工作任务和设计效果 本任务是为某公司制作一套电子相册目录，主要使用表格进行布局，需要使用表格创建和修改以及单元格属性设置等，效果如图 所示。4.1.3 制作相册目录制作相册目录1建立站点 创建一个“公司相册”站点，并且给素材进行分类。“images”文件夹放置主页相关的图片，“pages”文件夹放置除主页以外的其他网页，并且在其中建立一个“photos”文件夹放子页的图像。新建网页，保存命名为“index.html”作为相册目录页，站点

7、结构如图所示。 2设置页面属性 单击“属性检查器”中的“页面属性”按钮，在弹出对话框中设置网页背景图像，设置主页背景图像为“s_body_bg.gif”，文字大小12像素，文字颜色 #B51C8C，如图所示。3制作相册标题样式（1）输入标题并且设置“HTML格式”。在页面中输入标题“公司电子相册”，选择文本，打开“属性检查器”设置“格式”属性的值为“标题2”，如图所示。（2）设置标题“CSS样式” 在“属性检查器”中点击按钮，点击“编辑规则”弹出“新建CSS规则”对话框，设置“选择器类型”为“标签”，标签名称设置为“h2”，点击“确定”后弹出“h2的CSS规则定义”对话框，在“类型”分类设置字

8、体、大小、颜色，如图左所示，在 “区块”分类中设置居中对齐，如图右所示，点击“确定”按钮。3插入相册目录所需表格 插入一个6行5列的表格，宽度为780像素，边距为5，间距为0，边框为5，如图所示。4设置目录表格样式 在表格边线上单击鼠标右键，在弹出的快捷菜单中选择“编辑标签”命令，在弹出的“标签编辑器”中的“常规”分类中设置“居中对齐”，如图左所示，在“浏览器特定”分类中设置“背景图像”和“边框颜色”如图右所示。5设置单元格属性选择表格第二行，在“属性检查器”中设置单元格高为30，背景色为#99FFCC，如图所示，同样地方式设置第四、六行的行高和颜色。选择表格的所有单元格，在“属性检查器”中设

9、置水平、垂直都居中对齐。 在表格最下方插入一行，且合并该行所有单元格，设背景色设为#00FF00，单元格高为5像素。切换到代码视图中，删除单元格标签之间的“ ”，设置完表格效果如图所示。在表格的单元格插入教材提供的素材中的相对应的项目缩略图像，并在每幅图像下面的单元格中输入图像名称，至此公司相册的目录页编辑完成 4.1.4工作任务总结工作任务总结 本工作任务是利用表格制作公司相册目录页面，通过完成这个任务，学习在Dreamweaver CS5插入表格，设置表格的背景图象、边框线的颜色等属性，设置单元格的背景色、对齐方式、合并单元格等表格相关的基本操作。4.2 任务二：制作图像展示页面并

10、且链接网站任务二：制作图像展示页面并且链接网站4.2.1 工作任务和设计效果工作任务和设计效果 本任务制作电子相册的图片展示页面并且建立与目录页面的超级链接，图片展示页面的效果如图所示。 通过本任务综合训练使用表格进行页面的布局。4.2.2 布局页面布局页面1新建网页保存在站点文件夹中的“pages”文件夹下，命名为“xm1.html”，按照“index.html”设置页面属性的方式设置二级页面的文档属性。2插入2行2列表格，设置表格宽度是780像素，其他参数为0。在表格的“属性检查器”中设置表格居中对齐。3在第一行第一个单元格中插入公司标志logo，并且设置其背景色为白色在第二单元格中插入标

11、题图片“head.jpg”，如图所示 。4合并第二行中的两个单元格，设高度为为60（与所给的背景图的尺寸相同），选中单元格单击右键，在弹出的快捷菜单中选择“编辑标签”命令，在弹出的对话框中设置单元格背景图形为“head_bg.jpg”，在单元格中输入广告词文本，如图所示。5光标定位在表格最后，插入1列2行表格，设置宽度780像素，表格居中对齐。在第一行插入项目介绍图（xm-1.jpg），设置单元格边距为20，水平和垂直均设置居中，背景图像为“s_main_bg.gif”。下面单元格设置高度为50像素，背景颜色紫色“#B71F8E”，水平和垂直均设置居中。在单元格内再嵌套一个1行3列表格，设置宽

12、度为140像素，每个单元格插入导航按钮，并且设置单元格格式为居中对齐，如图所示。6制作1像素黑色表格线框选中下面的2行1列表格执行剪切操作，再插入一个1行1列的表格，宽度780像素，背景颜色黑色，单元格边距（填充）为“1px”，表格居中对齐，在当前新表格的单元格中粘贴刚才剪切的表格，并且修改这个表格的宽度为778像素，保存预览效果如图所示。7修改插入的项目大图为xm-2.jpg、xm-3.jpg，分别另存为xm2.html 、xm3.html两个二级页面。 4.2.3 链接所有页面链接所有页面1目录和展示页面链接 在目录页面中，选择“项目1”的缩略图，在链接属性中连接到“xm1.html”，如

13、图所示。使用同样地方式将项目2、项目3的缩略图分别链接到xm2.html、xm3.html页面。2导航的制作在每个二级页面下方的三个导航按钮上设置链接，链接到目录页“index.html”，链接到前面一个二级页面，链接到下一个二级页面，至此公司相册编辑完成。4.2.4工作任务总结工作任务总结 这个工作任务是利用表格、表格属性、单元格数据和表格嵌套等技术和技巧布局相册的二级页面，并且集合第三章的链接技术完成相册目录页和相册内容之间的链接。 使用表格布局时要注意表格尤其要注意尺寸、边距、边框和填充等值的准确，否则布局效果会大打折扣。表格嵌套在很多情况下可以简化布局操作，但是嵌套过多也会使页面臃肿，

14、通常建议嵌套不要超过三层，合理的使用单元格合并可以减少嵌套的使用。4.4 知识运用与拓展知识运用与拓展 1、页面布局常见类型如下、页面布局常见类型如下：“同”字型：这种结构是网上见到最多的，采用这种结构的网页，往往将导航区置于页面顶端，一些如广告条、友情链接、搜索引擎、注册按钮、登陆面板、栏目条等内容置于页面两侧，中间为主体内容，最下面是网站的一些基本信息、联系方式、版权声明等。“厂”字型：它去掉了“同”字形布局的最右边的部分，给主内容区释放了更多空间。“三”字形布局： 这是一种简洁明快的网页布局，这种布局的特点是在页面上由横向两条色块将网页整体分割为3部分。“川”字形布局：整个页面在垂直方向分为三列，网站的内容按栏目分布在这三列中。标