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

Presentation on theme: "项目4 使用表格布局网页."— Presentation transcript:

1 项目4 使用表格布局网页

2 任务1 使用表格布局制作简单页面 任务2 使用表格制作复杂网页 项目4 使用表格布局网页 ...... ...... ......

3 任务1 使用表格布局制作简单页面 任务分析 本项目要完成的制作就是图文并茂的网页。整个页面色彩鲜艳，层次清晰。网页使用了表格布局，在表格中插入了图像、文本等网页元素。

4 任务1 使用表格布局制作简单页面 一．表格布局
任务1 使用表格布局制作简单页面 一．表格布局 使用表格进行页面布局，能很好的控制文本、图像等网页元素在页面上出现的位置。设计过程中根据不同的内容将整个页面划分为若干个表格，通过设置表格和单元格的属性值，实现对页面元素的准确定位，可以达到整齐划一的页面显示效果。

5 任务1 使用表格布局制作简单页面 二．表格的相关属性 插入表格后，就可以在“属性”面板中设置表格的相关属性，如图所示。

6 任务1 使用表格布局制作简单页面 二．表格的相关属性 表格ID：表格在网页中的唯一标识。 行、列：用于设置表格的行数和列数。
任务1 使用表格布局制作简单页面 二．表格的相关属性 表格ID：表格在网页中的唯一标识。 行、列：用于设置表格的行数和列数。 宽：用于设置表格的宽度，单位为像素或百分比。 填充：用于设置单元格中的内容与单元格边框 之间的距离。 间距：用于设置单元格与单元格之间的距离。

7 任务1 使用表格布局制作简单页面 二．表格的相关属性 对齐：用于设置表格的对齐方式，主要有左对齐、 居中对齐和右对齐，默认为左对齐。
任务1 使用表格布局制作简单页面 二．表格的相关属性 对齐：用于设置表格的对齐方式，主要有左对齐、 居中对齐和右对齐，默认为左对齐。 边框：用于设置表格边框的宽度。 表格中既设置了背景颜色又设置了背景图像时，背景图像将会遮住背景颜色的显示。 边框颜色：用于设置表格边框的颜色。 背景颜色：用于设置表格的背景颜色。 背景图像：用于设置表格的背景图像。

8 任务1 使用表格布局制作简单页面 三．单元格的属性 单元格是组成表格的最基本单位。单元格属性面板，如图所示。

9 任务1 使用表格布局制作简单页面 三．单元格的属性 字体：用于设置单元格中文本的字体。 大小：用于设置单元格中文本的大小。
任务1 使用表格布局制作简单页面 三．单元格的属性 字体：用于设置单元格中文本的字体。 大小：用于设置单元格中文本的大小。 水平：用于设置单元格内容的水平对齐方式，主要 有左对齐、居中对齐和右对齐，默认为左对齐。 垂直：用于设置单元格内容的垂直对齐方式，主要有 顶端、居中、底部、基线四种方式、默认为居中对齐。 宽、高：用于设置单元格的宽度和高度。

10 任务1 使用表格布局制作简单页面 三．单元格的属性 背景：用于设置单元格的背景图像。 背景颜色：用于设置单元格的背景颜色。
任务1 使用表格布局制作简单页面 三．单元格的属性 背景：用于设置单元格的背景图像。 背景颜色：用于设置单元格的背景颜色。 边框：用于设置单元格边框的颜色。 链接：用于设置单元格中内容的超链接。

11 任务1 使用表格布局制作简单页面 四．任务实施 1．在Windows环境下使用“我的电脑”或“资源管理器”搜集网页素材。
任务1 使用表格布局制作简单页面 四．任务实施 1．在Windows环境下使用“我的电脑”或“资源管理器”搜集网页素材。 将“素材”文件夹中project04\images中的图片文件复制到我们已经 建立的站点文件mwmw中的images文件夹中。 2．运行Dreamweaver CS3软件，在example站点中新建一个网页 文件，命名为ex01.html。

12 任务1 使用表格布局制作简单页面 四．任务实施 3．单击“插入”→“常用”工具栏上的“表格”按钮，打
任务1 使用表格布局制作简单页面 四．任务实施 3．单击“插入”→“常用”工具栏上的“表格”按钮，打 开“表格”对话框，设置1行1列，宽度为“1000像素”， 边框为“0像素”，“单元格边距”和“单元格间距”均 为“0像素”，如图所示。单击“确定”按钮，则在编辑 区插入了一个1行1列的表格。设置表格ID为“top”。

13 任务1 使用表格布局制作简单页面 四．任务实施 4．将光标定位在单元格中，设置单元格高度为70。单击“插入”→“常用”工具栏上的
任务1 使用表格布局制作简单页面 四．任务实施 4．将光标定位在单元格中，设置单元格高度为70。单击“插入”→“常用”工具栏上的 “图像”按钮 ，在打开的“选择图像源文件”对话框中选择images文件夹中的图像 logo.jpg，单击“确定”，即可将图像插入在当前单元格中。 5．选中该表格，在“属性”面板中设置背景颜色为“#333300”，在各单元格中输入 文本，如图所示。

14 任务1 使用表格布局制作简单页面 四．任务实施 6．逐一选中各单元格，设置单元格的高为“50像素”，文本颜色为“#FFFFFF”，对齐
任务1 使用表格布局制作简单页面 四．任务实施 6．逐一选中各单元格，设置单元格的高为“50像素”，文本颜色为“#FFFFFF”，对齐 方式为水平“居中对齐”。 7．逐一选中各单元格中的文本，设置字符大小为12，颜色为白色（#FFFFFF）。 8．同样的方法再插入一个1行1列的表格，宽度为“242像素”，边框为“0像素”，单元 格边距和单元格间距均为“0像素”。设置表格ID为“pic”。 9．将光标定位在单元格中，在“属性”面板中设置水平为“居中对齐”，垂直为“居中”， 高度为“288像素”。

15 任务1 使用表格布局制作简单页面 四．任务实施 10．插入images文件夹中的ct_01.jpg图像。如图所示。
任务1 使用表格布局制作简单页面 四．任务实施 10．插入images文件夹中的ct_01.jpg图像。如图所示。 11．插入一个2行1列的表格，宽度为“242像素”，边框为“0像素”，单元格间距和边距 为“0像素”。设置表格ID为“nav”。

16 任务1 使用表格布局制作简单页面 四．任务实施 12．选中第一个单元格，设置背景颜色为“#336600”，高度为“30像素”。再输入文本
任务1 使用表格布局制作简单页面 四．任务实施 12．选中第一个单元格，设置背景颜色为“#336600”，高度为“30像素”。再输入文本 “栏目导航”，设置文本大小为“12”，颜色为“白色（#FFFFFF）”。 11．插入一个2行1列的表格，宽度为“242像素”，边框为“0像素”，单元格间距和边距 为“0像素”。设置表格ID为“nav”。

17 任务1 使用表格布局制作简单页面 四．任务实施 13．选中第二个单元格。设置高度为“150”，垂直对齐
任务1 使用表格布局制作简单页面 四．任务实施 13．选中第二个单元格。设置高度为“150”，垂直对齐 方式为“居中”。再输入5行文本。选中这些文本，单击 “文本”菜单→“列表”→“项目列表”。如图所示。 14．同样的方法制作一个“联系方式”表格。设置表格ID 为“cont”。如图所示。第一个单元格的高度为“30”。 第二个单元格的高度为“170”。第二个单元格中的文本 换行采用Ctrl+Enter方式。

18 任务1 使用表格布局制作简单页面 四．任务实施 15．同样的方法制作一个2行1列的表格，宽度为“746像素”，边框为“0像素”，单元格
任务1 使用表格布局制作简单页面 四．任务实施 15．同样的方法制作一个2行1列的表格，宽度为“746像素”，边框为“0像素”，单元格 边距和单元格间距均为“0像素”。设置表格ID为“company”。 16．选中第一个单元格，设置背景颜色为“#336600”，高度为“30像素”。其他设置 同前。如图所示。 17．在第二个单元格输入文本。设置文本大小为“12”。

19 任务1 使用表格布局制作简单页面 四．任务实施 18．定位光标到文本起始处，插入图片images文件夹中的datang.jpg。设置图的
任务1 使用表格布局制作简单页面 四．任务实施 18．定位光标到文本起始处，插入图片images文件夹中的datang.jpg。设置图的 对齐为“右对齐”。效果如图所示。

20 任务1 使用表格布局制作简单页面 四．任务实施 19．同样的方法再插入一个1行1列的表格，宽度为“1000像素”，边框为“0像素”，
任务1 使用表格布局制作简单页面 四．任务实施 19．同样的方法再插入一个1行1列的表格，宽度为“1000像素”，边框为“0像素”， 单元格间距和边距为“0像素”。设置表格ID为“bottom”。 20．输入文本，设置单元格“对齐”为居中。如图所示。 21．保存此文件。 返回

21 任务2 使用表格制作复杂网页 任务分析 前面我们将网页中各区块的表格制作完成了。完整的网页结构可参照下图所示。插入此表格后，将前面已经制作完成的表格粘贴到相应的单元格即可。

22 任务2 使用表格制作复杂网页 一．使用嵌套表格进行页面设置 对于表现形式多样、内容丰富、布局相对复杂的网页，
任务2 使用表格制作复杂网页 一．使用嵌套表格进行页面设置 对于表现形式多样、内容丰富、布局相对复杂的网页， 可以使用嵌套表格将页面进行划分布置，使页面内容显示 更有层次，也便于页面内容的修饰。

23 任务2 使用表格制作复杂网页 二．选择表格元素的方法 在使用表格嵌套后，常常会不能准确地选择所需的
任务2 使用表格制作复杂网页 二．选择表格元素的方法 在使用表格嵌套后，常常会不能准确地选择所需的 表格、单元格。此时应该认真理解表格的嵌套层次， 通过文档编辑区左下方的“标签选择器”来选择，这是 一种较好的选择方法。

24 任务2 使用表格制作复杂网页 三. 任务实施 1．打开站点example。新建一个空白网页，命名为“company.html”。
任务2 使用表格制作复杂网页 三. 任务实施 1．打开站点example。新建一个空白网页，命名为“company.html”。 2．在“属性”面板中单击“页面属性”按钮， 在弹出的“页面属性”对话框中进行如图 所示的设置。

25 任务2 使用表格制作复杂网页 三. 任务实施 3．单击“常用”工具栏上的“表格”按钮，打开“表格”对话框，设置5行2列，宽度为
任务2 使用表格制作复杂网页 三. 任务实施 3．单击“常用”工具栏上的“表格”按钮，打开“表格”对话框，设置5行2列，宽度为 “1000像素”，边框为“0像素”，单元格间距和边距为“0像素”，单击“确定”。 4．选中该表格，在“属性”面板中设置“对齐”为“居中对齐”，“背景颜色”为“#FFCC00”。 5．选中第一行水平方向的两个单元格，右击，在快捷菜单中选择“表格”→“合并单元格”。 这样第一行就合并成一个单元格了。 6．用同样的方法分别将第二、三、五行水平方向的单元格合并。合并单元格后，表格 的效果如任务分析效果图所示。

26 任务2 使用表格制作复杂网页 三. 任务实施 7．参照任务分析效果图所示的高度值、宽度值和对齐方式，分别设置各单元格的宽度、
任务2 使用表格制作复杂网页 三. 任务实施 7．参照任务分析效果图所示的高度值、宽度值和对齐方式，分别设置各单元格的宽度、 高度、对齐方式等属性。 8．打开ex01.html文件。选中“top”表格，Ctrl+C复制。 9．切换到company.html文件，将光标定位在第一个单元格中Ctrl+V粘贴。 10．用上面同样的方法，将ex01.html文件中的各表格复制到当前表格的相应位置。 11．网页制作完成，保存并浏览。

27 任务2 使用表格制作复杂网页 网页的预览效果 返回

28 Thank You !