项目4使用表格布局网.pptVIP

项目4 使用表格布局网页 任务1 使用表格布局制作简单页面 任务1 使用表格布局制作简单页面 任务1 使用表格布局制作简单页面 任务1 使用表格布局制作简单页面 任务1 使用表格布局制作简单页面 任务1 使用表格布局制作简单页面 任务1 使用表格布局制作简单页面 任务1 使用表格布局制作简单页面 任务1 使用表格布局制作简单页面 任务1 使用表格布局制作简单页面 任务1 使用表格布局制作简单页面 任务1 使用表格布局制作简单页面 任务1 使用表格布局制作简单页面 任务1 使用表格布局制作简单页面 任务1 使用表格布局制作简单页面 任务1 使用表格布局制作简单页面 任务1 使用表格布局制作简单页面 任务1 使用表格布局制作简单页面 任务2 使用表格制作复杂网页 任务2 使用表格制作复杂网页 任务2 使用表格制作复杂网页 任务2 使用表格制作复杂网页 任务2 使用表格制作复杂网页 任务2 使用表格制作复杂网页 任务2 使用表格制作复杂网页 ...... ...... ...... 任务2 使用表格制作复杂网页 任务1 使用表格布局制作简单页面 项目4 使用表格布局网页 任务分析 本项目要完成的制作就是图文并茂的网页。整个页面色彩鲜艳，层次清晰。网页使用了表格布局，在表格中插入了图像、文本等网页元素。 一．表格布局 使用表格进行页面布局，能很好的控制文本、图像等网页元素在页面上出现的位置。设计过程中根据不同的内容将整个页面划分为若干个表格，通过设置表格和单元格的属性值，实现对页面元素的准确定位，可以达到整齐划一的页面显示效果。 二．表格的相关属性 插入表格后，就可以在“属性”面板中设置表格的相关属性，如图所示。 二．表格的相关属性 表格ID：表格在网页中的唯一标识。 行、列：用于设置表格的行数和列数。 宽：用于设置表格的宽度，单位为像素或百分比。 填充：用于设置单元格中的内容与单元格边框 之间的距离。 间距：用于设置单元格与单元格之间的距离。 二．表格的相关属性 对齐：用于设置表格的对齐方式，主要有左对齐、 居中对齐和右对齐，默认为左对齐。 边框：用于设置表格边框的宽度。 边框颜色：用于设置表格边框的颜色。 背景颜色：用于设置表格的背景颜色。 背景图像：用于设置表格的背景图像。 表格中既设置了背景颜色又设置了背景图像时，背景图像将会遮住背景颜色的显示。 三．单元格的属性 单元格是组成表格的最基本单位。单元格属性面板，如图所示。 三．单元格的属性 字体：用于设置单元格中文本的字体。 大小：用于设置单元格中文本的大小。 水平：用于设置单元格内容的水平对齐方式，主要 有左对齐、居中对齐和右对齐，默认为左对齐。 垂直：用于设置单元格内容的垂直对齐方式，主要有 顶端、居中、底部、基线四种方式、默认为居中对齐。 宽、高：用于设置单元格的宽度和高度。 三．单元格的属性 背景：用于设置单元格的背景图像。 背景颜色：用于设置单元格的背景颜色。 边框：用于设置单元格边框的颜色。 链接：用于设置单元格中内容的超链接。 四．任务实施 1．在Windows环境下使用“我的电脑”或“资源管理器”搜集网页素材。 将“素材”文件夹中project04\images中的图片文件复制到我们已经 建立的站点文件mwmw中的images文件夹中。 2．运行Dreamweaver CS3软件，在example站点中新建一个网页 文件，命名为ex01.html。 四．任务实施 3．单击“插入”→“常用”工具栏上的“表格”按钮，打 开“表格”对话框，设置1行1列，宽度为“1000像素”， 边框为“0像素”，“单元格边距”和“单元格间距”均 为“0像素”，如图所示。单击“确定”按钮，则在编辑 区插入了一个1行1列的表格。设置表格ID为“top”。 四．任务实施 4．将光标定位在单元格中，设置单元格高度为70。单击“插入”→“常用”工具栏上的 “图像”按钮 ，在打开的“选择图像源文件”对话框中选择images文件夹中的图像 logo.jpg，单击“确定”，即可将图像插入在当前单元格中。 5．选中该表格，在“属性”面板中设置背景颜色为“#333300”，在各单元格中输入 文本，如图所示。 四．任务实施 6．逐一选中各单元格，设置单元格的高为“50像素”，文本颜色为“#FFFFFF”，对齐 方式为水平“居中对齐”。 7．逐一选中各单