项目4使用表格布局网.ppt
项目4 使用表格布局网页,2,.,.,.,任务2 使用表格制作复杂网页,任务1 使用表格布局制作简单页面,项目4使用表格布局网页,3,任务分析 本项目要完成的制作就是图文并茂的网页。整个页面色彩鲜艳，层次清晰。网页使用了表格布局，在表格中插入了图像、文本等网页元素。,任务1 使用表格布局制作简单页面,4,一表格布局,任务1 使用表格布局制作简单页面,5,二表格的相关属性,任务1 使用表格布局制作简单页面,插入表格后，就可以在“属性”面板中设置表格的相关属性，如图所示。,6,二表格的相关属性,任务1 使用表格布局制作简单页面,表格ID：表格在网页中的唯一标识。,行、列：用于设置表格的行数和列数。,宽：用于设置表格的宽度，单位为像素或百分比。,填充：用于设置单元格中的内容与单元格边框之间的距离。,间距：用于设置单元格与单元格之间的距离。,7,二表格的相关属性,任务1 使用表格布局制作简单页面,对齐：用于设置表格的对齐方式，主要有左对齐、居中对齐和右对齐，默认为左对齐。,边框：用于设置表格边框的宽度。,边框颜色：用于设置表格边框的颜色。,背景颜色：用于设置表格的背景颜色。,背景图像：用于设置表格的背景图像。,8,三单元格的属性,任务1 使用表格布局制作简单页面,单元格是组成表格的最基本单位。单元格属性面板，如图所示。,9,三单元格的属性,任务1 使用表格布局制作简单页面,字体：用于设置单元格中文本的字体。,大小：用于设置单元格中文本的大小。,水平：用于设置单元格内容的水平对齐方式，主要 有左对齐、居中对齐和右对齐，默认为左对齐。,垂直：用于设置单元格内容的垂直对齐方式，主要有顶端、居中、底部、基线四种方式、默认为居中对齐。,宽、高：用于设置单元格的宽度和高度。,10,三单元格的属性,任务1 使用表格布局制作简单页面,背景：用于设置单元格的背景图像。,背景颜色：用于设置单元格的背景颜色。,边框：用于设置单元格边框的颜色。,链接：用于设置单元格中内容的超链接。,11,四任务实施,任务1 使用表格布局制作简单页面,1在Windows环境下使用“我的电脑”或“资源管理器”搜集网页素材。将“素材”文件夹中project04images中的图片文件复制到我们已经 建立的站点文件mwmw中的images文件夹中。,2运行Dreamweaver CS3软件，在example站点中新建一个网页文件，命名为ex01.html。,12,四任务实施,任务1 使用表格布局制作简单页面,3单击“插入”“常用”工具栏上的“表格”按钮，打开“表格”对话框，设置1行1列，宽度为“1000像素”，边框为“0像素”，“单元格边距”和“单元格间距”均为“0像素”，如图所示。单击“确定”按钮，则在编辑区插入了一个1行1列的表格。设置表格ID为“top”。,13,四任务实施,任务1 使用表格布局制作简单页面,4将光标定位在单元格中，设置单元格高度为70。单击“插入”“常用”工具栏上的“图像”按钮，在打开的“选择图像源文件”对话框中选择images文件夹中的图像logo.jpg，单击“确定”，即可将图像插入在当前单元格中。,5选中该表格，在“属性”面板中设置背景颜色为“#333300”，在各单元格中输入文本，如图所示。,14,四任务实施,任务1 使用表格布局制作简单页面,6逐一选中各单元格，设置单元格的高为“50像素”，文本颜色为“#FFFFFF”，对齐方式为水平“居中对齐”。,7逐一选中各单元格中的文本，设置字符大小为12，颜色为白色（#FFFFFF）。,8同样的方法再插入一个1行1列的表格，宽度为“242像素”，边框为“0像素”，单元格边距和单元格间距均为“0像素”。设置表格ID为“pic”。,9将光标定位在单元格中，在“属性”面板中设置水平为“居中对齐”，垂直为“居中”，高度为“288像素”。,15,四任务实施,任务1 使用表格布局制作简单页面,10插入images文件夹中的ct_01.jpg图像。如图所示。,11插入一个2行1列的表格，宽度为“242像素”，边框为“0像素”，单元格间距和边距为“0像素”。设置表格ID为“nav”。,16,四任务实施,任务1 使用表格布局制作简单页面,12选中第一个单元格，设置背景颜色为“#336600”，高度为“30像素”。再输入文本“栏目导航”，设置文本大小为“12”，颜色为“白色（#FFFFFF）”。,11插入一个2行1列的表格，宽度为“242像素”，边框为“0像素”，单元格间距和边距为“0像素”。设置表格ID为“nav”。,17,四任务实施,任务1 使用表格布局制作简单页面,13选中第二个单元格。设置高度为“150”，垂直对齐方式为“居中”。再输入5行文本。选中这些文本，单击“文本”菜单“列表”“项目列表”。如图所示。,14同样的方法制作一个“联系方式”表格。设置表格ID为“cont”。如图所示。第一个单元格的高度为“30”。第二个单元格的高度为“170”。第二个单元格中的文本换行采用Ctrl+Enter方式。,18,四任务实施,任务1 使用表格布局制作简单页面,15同样的方法制作一个2行1列的表格，宽度为“746像素”，边框为“0像素”，单元格边距和单元格间距均为“0像素”。设置表格ID为“company”。,16选中第一个单元格，设置背景颜色为“#336600”，高度为“30像素”。其他设置同前。如图所示。,17在第二个单元格输入文本。设置文本大小为“12”。,19,四任务实施,任务1 使用表格布局制作简单页面,18定位光标到文本起始处，插入图片images文件夹中的datang.jpg。设置图的对齐为“右对齐”。效果如图所示。,20,四任务实施,任务1 使用表格布局制作简单页面,19同样的方法再插入一个1行1列的表格，宽度为“1000像素”，边框为“0像素”，单元格间距和边距为“0像素”。设置表格ID为“bottom”。,20输入文本，设置单元格“对齐”为居中。如图所示。,21保存此文件。,返回,21,任务分析 前面我们将网页中各区块的表格制作完成了。完整的网页结构可参照下图所示。插入此表格后，将前面已经制作完成的表格粘贴到相应的单元格即可。,任务2 使用表格制作复杂网页,22,一使用嵌套表格进行页面设置,任务2 使用表格制作复杂网页,对于表现形式多样、内容丰富、布局相对复杂的网页，可以使用嵌套表格将页面进行划分布置，使页面内容显示更有层次，也便于页面内容的修饰。,23,二选择表格元素的方法,任务2 使用表格制作复杂网页,在使用表格嵌套后，常常会不能准确地选择所需的表格、单元格。此时应该认真理解表格的嵌套层次，通过文档编辑区左下方的“标签选择器”来选择，这是一种较好的选择方法。,24,三.任务实施,任务2 使用表格制作复杂网页,1打开站点example。新建一个空白网页，命名为“company.html”。,2在“属性”面板中单击“页面属性”按钮，在弹出的“页面属性”对话框中进行如图所示的设置。,25,三.任务实施,任务2 使用表格制作复杂网页,3单击“常用”工具栏上的“表格”按钮，打开“表格”对话框，设置5行2列，宽度为“1000像素”，边框为“0像素”，单元格间距和边距为“0像素”，单击“确定”。,4选中该表格，在“属性”面板中设置“对齐”为“居中对齐”，“背景颜色”为“#FFCC00”。,5选中第一行水平方向的两个单元格，右击，在快捷菜单中选择“表格”“合并单元格”。这样第一行就合并成一个单元格了。,6用同样的方法分别将第二、三、五行水平方向的单元格合并。合并单元格后，表格 的效果如任务分析效果图所示。,26,三.任务实施,任务2 使用表格制作复杂网页,7参照任务分析效果图所示的高度值、宽度值和对齐方式，分别设置各单元格的宽度、高度、对齐方式等属性。,8打开ex01.html文件。选中“top”表格，Ctrl+C复制。,9切换到company.html文件，将光标定位在第一个单元格中Ctrl+V粘贴。,10用上面同样的方法，将ex01.html文件中的各表格复制到当前表格的相应位置。,11网页制作完成，保存并浏览。,27,任务2 使用表格制作复杂网页,网页的预览效果,返回,28,Thank You!,
