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

1、第四章，场景4，建立公司的在线电子相册。本章主要介绍如何在Dreamweaver CS5中使用表单。表格是网页中非常重要的元素，它们有两个主要功能：一是合理组织数据，二是布局网页。使用表格可以简单快捷地完成网页布局，但是维护起来比较复杂，所以后期维护较高的页面仍然采用Div CSS布局。在这一章中，建立了一个公司网上电子相册的深入研究形式。具体包括以下内容：插入表格、设置表格和单元格属性、修改嵌套表格的表格布局页面、4.1任务1:规划相册和制作相册目录、4.1.1知识点1插入表格由行、列和单元格三部分组成。在“插入栏”中选择“插入”|“表格”。2选择表格或单元格单击表格的边框线或选择状态栏上的

2、标签。拖动表格(类似于选择文本)。将鼠标放在一行的左侧，单击选择一行或选择状态栏上的标签。将鼠标放在列上，然后单击选择一列。按住Ctrl键单击要选择的单元格，可以选择不连续的单元格。按shift键选择连续的单元格。拖动选择单元以将光标定位在单元格内，拖动鼠标以覆盖要选择的单元格区域或选择状态栏上的标签。3设置表格和单元格属性选择表格后，打开属性检查器，如图所示，您可以设置属性。行数和列数：设置表格中的行数和列数。宽度和高度：设置表格的宽度和高度，可以是像素或百分比。填充(单元格边距):单元格内容与单元格边缘之间的距离。间距(单元格间距):单元格之间的距离。对齐：页面上表格的对齐方式(左、中、右

3、)。边框：表格边框的厚度。类：设置表格的CSS样式。清除行高和列宽：删除表格中所有指定的行高和列宽。表格宽度单位转换：表示单位转换为像素，单位转换为百分比。选择单元格后，打开属性检查器，如图所示，并设置单元格属性。单元格文本的水平和垂直对齐。单元格的宽度和高度。背景颜色，背景图像。不换行：强制单元格不自动换行。单元格合并：选择同一行或同一列中的相邻单元格进行合并。单元格拆分：选择要拆分为多行或多列的单元格。4删除和添加表格行和列(1)删除行或列：选择要删除的行和列，在菜单栏中选择修改|表格|删除行和列或直接按删除键。(2)添加行或列：选择要添加的行或列所在位置的单元格，在菜单栏中选择修改|表格

4、|插入行或列，或者右键单击并在弹出的快捷菜单中选择插入行或列。5嵌套表将另一个表插入到表的单元格中称为嵌套表。此表格的宽度受其所在单元格的宽度限制。通常，嵌套表的宽度被设置为相对单元格宽度的百分比。表格数据的导入具有表格数据特征的文本文件(文本由逗号、制表符、空格和其他符号分隔)以表格的形式导入到Dreamweaver CS5。具体操作：在菜单栏中选择插入|表格对象|导入表格数据，打开导入表格数据对话框，选择材料4文件夹中的文本文件，设置分隔符、表格宽度、边框等。然后单击“确定”。如图所示。表格数据的排序在Dreamweaver CS5中，表格中的数据可以按四种类型进行排序：“笔画”、“数字”

5、、“日期”和“拼音”，并且可以对三个关键字进行排序。具体操作是选择一个表，在菜单栏中选择命令|排序表，在打开的排序表对话框中设置要排序的列、要排序的类型(字母和数字)以及如何排序(升序和降序)，如图所示。(注：第一行数据作为表头，不参与排序)，4.1.2任务和设计效果本任务是为公司制作一套电子相册目录，主要使用表格进行布局，需要使用表格进行创建、修改和单元格属性设置等。效果如图所示。4.1.3制作相册目录1建立一个网站创建一个“公司相册”网站并对材料进行分类。“图像”文件夹放置与主页相关的图片，“页面”文件夹放置除主页之外的其他网页，并建立一个“照片”文件夹，在其中放置子页面的图像。创建一个新

6、的网页，并将名称“index.html”保存为相册目录页。站点结构如图所示。2、设置页面属性点击“属性检查器”中的“页面属性”按钮，在弹出的对话框中设置网页的背景图像，将首页的背景图像设置为“s_body_bg.gif”，文本大小为12像素，文本颜色为#B51C8C，如图所示。3制作专辑标题样式(1)输入标题并设置超文本标记语言格式。在页面中输入标题“公司电子相册”，选择文本，打开属性检查器，将“格式”属性的值设置为“标题2”，如图所示。(2)设置标题“CSS样式”，点击属性检查器中的按钮，点击“编辑规则”，弹出“创建CSS规则”对话框，将选择器类型设置为“标签”，将标签名称设置为“h2”，点

7、击“确定”，弹出“H2 CSS规则定义”对话框，将字体设置为“类型”类别，3插入相册目录所需的表格插入一个6行5列的表格， 宽度为780像素，边距为5，间距为0，边框为5，如图所示。4设置表格样式。右键单击表格边缘，从弹出的快捷菜单中选择“编辑标签”，在弹出的“标签编辑器”中，在“常规”类别中设置“居中对齐”，如左图所示，在“浏览器特定”类别中设置“背景图像”和“边框颜色”，如右图所示。5设置单元格属性选择表格的第二行，在属性检查器中将单元格高度设置为30，背景颜色设置为# 99FFCC，如图所示，并以相同的方式设置第四行和第六行的行高和颜色。选择表格的所有单元格，并在属性检查器中设置水平和垂

8、直对齐。在表格底部插入一行，并合并该行中的所有单元格。将背景颜色设置为#00FF00，单元格高度设置为5像素。切换到代码视图，删除单元格标签之间的“nbsp”，设置表格效果，如图所示。将教材中相应项目的缩略图插入表格的单元格中，并在每个图像下方的单元格中输入图像名称。此时，公司相册的目录页面被编辑。4.1.4工作任务总结本任务是利用表格制作公司相册的目录页。完成此任务后，学习在Dreamweaver CS5中插入表格，设置表格的背景图像和边框颜色等属性，并设置背景颜色、对齐和合并单元格。4.2任务2:制作图片展示页面并链接到网站，4.2.1工作任务和设计效果本任务制作电子相册的图片展示页面并与

9、目录页面建立超链接，图片展示页面的效果如图所示。通过本任务的全面培训，使用表格来布局页面。4.2.2布局页面1新创建的网页保存在站点文件夹的“页面”文件夹下，名为“XML 1 . html”，二级页面的文档属性按照“index.html”设置页面属性的方式进行设置。2插入2行2列，将表格宽度设置为780像素，其他参数设置为0。在表格的属性检查器中设置表格的中心对齐方式。3在第一行的第一个单元格中插入公司徽标，并将其背景颜色设置为白色。如图所示，在第二个单元格中插入标题图片“head.jpg”。4合并第二行的两个单元格，将高度设置为60(与给定的背景图片大小相同)，右键单击选中的单元格，在弹出的

10、快捷菜单中选择“编辑标签”，在弹出的对话框中将单元格的背景图片设置为“head_bg.jpg”，并在单元格中输入广告词的文本，如图所示。5将光标放在表格的末尾，插入一个1列2行的表格，将宽度设置为780像素，并将表格居中对齐。在第一行插入项目介绍图(xm-1.jpg)，将单元格边距设置为20，水平和垂直设置中心，背景图像为“s_main_bg.gif”。以下单元格的高度设置为50像素，背景颜色为紫色“#B71F8E”，水平和垂直居中。在单元格中嵌套一个1行3列的单元格，将宽度设置为140像素，在每个单元格中插入一个导航按钮，并将单元格格式设置为居中对齐，如图所示。6制作1像素黑色表格线框选择以

11、下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”，如图所示。同样，项目2和项目3的缩略图分别链接到xm2.html和xm3.html的页面。2在每个二级页面底部的三个导航按

12、钮上设置导航链接，链接到目录页面“index.html”，链接到上一个二级页面，链接到下一个二级页面，完成公司相册的编辑。4.2.4工作任务总结本工作任务是利用表格、表格属性、单元格数据、表格嵌套等技术和技巧，对相册的二级页面进行布局，并整合第三章中的链接技术，完成相册目录页面与相册内容之间的链接。使用表格布局时，请注意尺寸、边距、边框和填充的准确性，否则布局效果会大大降低。在许多情况下，表格嵌套可以简化布局操作，但是过多的嵌套会使页面膨胀。通常建议嵌套不应超过三个级别。合理使用单元格合并可以减少嵌套的使用。4.4知识的应用和发展。1.常见的页面布局类型如下：“相同”字体：这种结构是互联网上最常见的。使用这种结构时，导航区通常放在页面的顶部，一些内容如广告栏、友情链接、搜索引擎、注册按钮、登陆面板和栏目栏放在页面的两侧，主要内容放在中间，一些网站的基本信息、联系方式和版权放在底部。“工厂”字体：它删除了“相同”字体布局的最右边部分，并为主要内容区域释放了更多空间。“三形”布局：这是一个简单而生动的网页布局，其特征是通过页面上的两个水平色块将整个网页分成三个部分。页面纵向分为三栏，网站内容按照栏目分布在这三栏中。标题文