资源描述
单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,单击此处编辑母版标题样式,Dreamweaver CS3,网页设计培训教程,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,单击此处编辑母版标题样式,*,第,5,课 用表格规范网页,本课要点,具体要求,本课导读,上机练习,本课要点,表格的创建及基本编辑,表格属性设置,具体要求,掌握普通表格及嵌套表格的创建方法,熟悉表格和单元格的选择方法,熟悉单元格的合并、拆分及删除方法,熟悉表格及单元格属性的设置方法,熟悉表格内容的添加方法,本课导读,表格在日常办公中很常见，它能使数据的显示更清晰明了，网页中的表格还有更重要的作用,进行页面布局。表格可以将网页分割为很多组合在一起的小块，既加快了网页的加载速度，又使网页整齐而美观。,5.1,创建及编辑表格,页面布局是网页制作的宏观设置，使用表格进行页面布局是其中最常用的手段。,5.1,创建及编辑表格,知识讲解,典型案例,制作“我的课程表”表格,知识讲解,表格是进行页面布局时非常有用的工具。利用表格进行页面布局，可以将图像或文本放置在表格的各个单元格中，从而精确控制其位置。,知识讲解,1.,创建表格,2.,编辑表格,1.,创建表格,在,Dreamweaver CS3,中，表格分为普通表格和嵌套表格。普通表格即是传统意义上的表格，嵌套表格是在表格的某个单元格内插入的表格，即表格之中再嵌套表格。,1,）创建普通表格,2,）创建嵌套表格,2.,编辑表格,表格创建好后，可以对表格进行合并或拆分单元格、删除或添加行（或列）等编辑操作。在表格中添加图像和文本等内容后，根据实际需要，也可对表格的大小等进行调整。,1,）选择整个表格,2,）选择行或列,3,）选择单元格,4,）拆分单元格,5,）合并单元格,6,）添加行或列,7,）删除行或列,典型案,例,例,制作“,我,我的课,程,程表”,表,表格,案例目,标,标,本案例,主,主要练,习,习创建,表,表格和,添,添加简,单,单的内,容,容。,典型案,例,例,制作“,我,我的课,程,程表”,表,表格,操作思,路,路,（,1,）创建,一,一个,5,行,6,列的表,格,格。,（,2,）将第,1,列的前,两,两个单,元,元格合,并,并，将,第,第,1,行的后,5,个单元,格,格合并,。,。,（,3,）在第,3,行的后,5,个单元,格,格中各,插,插入一,个,个,4,行,1,列的嵌,套,套表格,，,，在第,4,行的后,5,个单元,格,格中各,插,插入一,个,个,2,行,1,列的嵌,套,套表格,。,。,（,4,）在相,应,应单元,格,格中添,加,加文本,或,或图像,。,。,典型案,例,例,制作“,我,我的课,程,程表”,表,表格,操作步,骤,骤,具体操,作,作步骤,请,请教师,参,参照软,件,件和书,中,中内容,进,进行讲,解,解。,典型案,例,例,制作“,我,我的课,程,程表”,表,表格,案例小,结,结,本案例,利,利用表,格,格创建,了,了一个,“,“我的,课,课程表,”,”网页,，,，运用,了,了创建,表,表格、,合,合并单,元,元格、,输,输入文,本,本以及,插,插入图,像,像等知,识,识。在,DreamweaverCS3,中，表,格,格内容,的,的对齐,方,方式默,认,认为“,左,左对齐,”,”，而,在,在,IE,浏览器,中,中则为,“,“居中,对,对齐”,，,，所以,在,在,Dreamweaver,和,IE,浏览器,中,中的效,果,果有一,定,定差别,，,，为了,避,避免因,表,表格内,容,容的默,认,认对齐,方,方式不,同,同而引,起,起浏览,效,效果与,预,预期效,果,果的不,同,同，需,要,要在设,计,计网页,时,时为表,格,格设置,属,属性，,下,下面我,们,们就来,学,学习怎,样,样设置,表,表格属,性,性。,5.2,表格属,性,性设置,要使表,格,格美观,，,，需要,对,对表格,及,及单元,格,格的属,性,性进行,设,设置，,如,如设置,边,边框线,颜,颜色和,单,单元格,的,的对齐,方,方式等,。,。,5.2,表格属,性,性设置,知识讲,解,解,典型案,例,例,美化“,我,我的课,程,程表”,表,表格,知识讲,解,解,表格的,属,属性很,多,多，包,括,括表格,的,的宽度,、,、高度,，,，表格,包,包含的,行,行数、,列,列数，,表,表格中,各,各单元,格,格间的,距,距离，,单,单元格,中,中内容,与,与单元,格,格边框,线,线间的,距,距离以,及,及是否,有,有边框,、,、边框,线,线粗细,和,和表格,背,背景颜,色,色等，,下,下面分,别,别进行,讲,讲解。,知识讲,解,解,1.,设置表,格,格属性,2.,设置单,元,元格属,性,性,1.,设置表,格,格属性,要进行,表,表格属,性,性设置,，,，需先,选,选中表,格,格。选,中,中表格,后,后，在,【,属性,】,面板可,进,进行表,格,格的属,性,性设置,。,。,2.,设置单,元,元格属,性,性,除了可,以,以设置,整,整个表,格,格的属,性,性外，,还,还可对,表,表格的,单,单元格,、,、行或,列,列的属,性,性进行,设,设置。,选,选择要,设,设置属,性,性的单,元,元格、,行,行或列,后,后，其,【,属性,】,面板如,图,图所示,。,。,在单元,格,格的,【,属性,】,面板中,，,，可以,对,对单元,格,格中的,文,文本进,行,行属性,设,设置，,其,其设置,方,方法与,普,普通文,本,本相同,。,。另外,，,，还可,以,以对单,元,元格的,对,对齐方,式,式、宽,和,和高及,是,是否换,行,行等进,行,行设置,。,。,典型案,例,例,美化“,我,我的课,程,程表”,表,表格,案例目,标,标,本案例,主,主要练,习,习表格,属,属性及,单,单元格,属,属性的,设,设置。,典型案,例,例,美化,“,“我,的,的课,程,程表,”,”表,格,格,操作,思,思路,（,1,）设,置,置第,1,层（,外,外层,）,）表,格,格的,属,属性,。,。,（,2,）设,置,置第,1,层表,格,格的,单,单元,格,格属,性,性。,（,3,）设,置,置第,2,层（,嵌,嵌套,）,）表,格,格的,属,属性,。,。,（,4,）设,置,置第,2,层表,格,格的,单,单元,格,格属,性,性。,典型,案,案例,美化,“,“我,的,的课,程,程表,”,”表,格,格,操作,步,步骤,具体,操,操作,步,步骤,请,请教,师,师参,照,照软,件,件和,书,书中,内,内容,进,进行,讲,讲解,。,。,典型,案,案例,美化,“,“我,的,的课,程,程表,”,”表,格,格,案例,小,小结,本案,例,例练,习,习美,化,化表,格,格，,包,包括,对,对表,格,格属,性,性（,如,如表,格,格边,框,框粗,细,细、,边,边框,颜,颜色,、,、间,距,距、,填,填充,、,、对,齐,齐方,式,式和,高,高度,等,等）,及,及单,元,元格,属,属性,（,（如,单,单元,格,格的,对,对齐,方,方式,和,和单,元,元格,高,高度,等,等）,进,进行,设,设置,。,。通,过,过这,些,些设,置,置，,可,可以,使,使创,建,建的,表,表格,及,及其,内,内容,的,的显,示,示效,果,果更,好,好。,5.3,上机,练,练习,“个,人,人简,历,历”,网,网页,的,的制,作,作,“个,人,人简,历,历”,网,网页,的,的美,化,化,“个,人,人简,历,历”,网,网页,的,的制,作,作,本练,习,习将,利,利用,表,表格,进,进行,页,页面,布,布局,。,。,“个,人,人简,历,历”,网,网页,的,的制,作,作,操作,思,思路,在,DreamweaverCS3,中创,建,建一,个,个,9,行,1,列、,宽,宽度,为,为,605,像素,、,、边,框,框为,1,像素,、,、其,余,余值,保,保持,默,默认,设,设置,的,的表,格,格。,将素,材,材图,像,像“,1px.gif”,复制,到,到保,存,存网,页,页文,档,档的,位,位置,。,。,在第,3,行中,插,插入,图,图像,“,“,1px.gif”,。,在第,4,8,行中,分,分别,插,插入,宽,宽度,为,为,90%,的嵌,套,套表,格,格。,将各,嵌,嵌套,表,表格,的,的第,2,行中,的,的单,元,元格,合,合并,，,，在,合,合并,后,后的,单,单元,格,格中,分,分别,插,插入,宽,宽度,为,为,80%,的嵌,套,套表,格,格。,输入,文,文本,，,，然,后,后对,文,文本,的,的属,性,性进,行,行设,置,置。,“个,人,人简,历,历”,网,网页,的,的美,化,化,本练,习,习将,对,对节中,制,制作,的,的“,个,个人,简,简历,”,”网,页,页进,行,行美,化,化。,“个,人,人简,历,历”,网,网页,的,的美,化,化,操作,思,思路,将“,个,个人,简,简历,.html”,网页,另,另存,为,为“,个,个人,简,简历,2.html,”,”,。,选中,最,最外,层,层表,格,格，,设,设置,填,填充,、,、间,距,距和,边,边框,值,值分,别,别为,“,“,0”,、“,2”,和“,0”,，背,景,景颜,色,色和,边,边框,颜,颜色,均,均为,“,“,#FFFFFF”,。,设置,最,最外,层,层表,格,格,9,行单,元,元格,的,的水,平,平对,齐,齐方,式,式均,为,为“,居,居中,对,对齐,”,”、,第,第,1,行的垂,直,直对齐,方,方式为,“,“顶端,对,对齐”,、,、第,2,6,行的垂,直,直对齐,方,方式为,“,“居中,对,对齐”,。,。,设置第,1,，,2,，,3,，,9,行单元,格,格的背,景,景颜色,。,。,“个人,简,简历”,网,网页的,美,美化,继续设,置,置所有,第,第,2,层嵌套,表,表格的,填,填充、,间,间距和,边,边框值,分,分别为,“,“,0”,、“,3”,和“,1”,，边框,颜,颜色为,“,“,#FFFFFF”,。,设置所,有,有第,2,层嵌套,表,表格中,各,各单元,格,格的水,平,平对齐,方,方式以,及,及背景,颜,颜色。,设置所,有,有第,3,层嵌套,表,表格中,各,各单元,格,格的水,平,平对齐,方,方式以,及,及背景,颜,颜色。,演讲完,毕,毕，谢,谢,谢观看,！,！,
展开阅读全文