项目九Div-布局搜索网页-PPT

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,点击此处结束放映,Dreamweaver 8中文,版,版网页制,作,作基础,王占成,项目九Div,布,布局搜索网,页,页,任务一,布局页眉,任务二,布,布局主体,实训 使,用,用Div布,局,局“神搜”,网,网页,任务三,布,布局页脚,层和Div,标,标签这两个,布,布局工具具,有,有非常独特,的,的功能，即,可,可以显示、,隐,隐藏及自由,浮,浮动。由于,层,层和Div,标,标签使用的,是,是同一个标,签,签“”，故,本,本项目统称Div布局,。,。本项目以,搜,搜索网页为,例,例，介绍使,用,用Div布,局,局网页的基,本,本方法。,任务一,布,布局页眉,需要掌握的,内,内容主要有,：,：,1、创建层,2、【层】,面,面板,3、选定层,4、层【属,性,性】面板,5、移动层,6、调整层,的,的大小,7、层的对,齐,齐操作,可以通过以,下,下途径来创,建,建层。,（1）在主,菜,菜单中选择,【,【插入】,【,【布局对象,】,】【层】,命,命令。,（2）将【,插,插入】【,布,布局】面板,上,上的,（,（绘,制,制层）按钮,拖,拖曳到文档,窗,窗口松开鼠,标,标。,（3）在【,插,插入】【,布,布局】面板,中,中单击,（,（,绘,绘制层）按,钮,钮，在文档,窗,窗口中按住,鼠,鼠标左键并,拖,拖曳可绘出,一,一个自定义,大,大小的层。,如,如果按住Ctrl键不,放,放，按住鼠,标,标左键拖曳,可,可在文档窗,口,口中连续绘,制,制多个层。,1、创建层,在【层】面,板,板中可以实,现,现以下操作,。,。,（1）双击,层,层的名称，,可,可以对层进,行,行重命名。,（2）单击,层,层后面的数,字,字可以修改,层,层的z轴顺,序,序，数字大,的,的将位于上,层,层。,（3）勾选,【,【防止重叠,】,】复选框可,以,以禁止层重,叠,叠。,（4）在层,的,的名称前面,有,有一个眼睛,图,图标，单击,眼,眼睛图标可,显,显示或隐藏,层,层。,（5）单击,层,层名称可以,选,选定层，按,住,住Shift键不放，,依,依次单击层,可,可以选中多,个,个层。,2、【层】,面,面板,选定层还有,以,以下几种方,法,法：,（1）在【,层,层】面板中,单,单击层的名,称,称选定层。,（2）单击,文,文档中的,图,图标来选定,层,层。如果没,有,有显示该图,标,标，可以在,【,【首选参数,】,】对话框的,【,【不可见元,素,素】分类中,勾,勾选【层锚,记,记】复选框,。,。,（3）将光,标,标置于层内,，,，然后在文,档,档窗口底部,标,标签条中选,择,择“”标签,。,。,（4）单击,层,层的边框线,来,来选定层。,（5）如果,要,要选定两个,以,以上的层，,只,只要按住Shift键,，,，然后逐个,单,单击层手柄,或,或在【层】,面,面板中逐个,单,单击层的名,称,称即可。,3、选定层,根据需要设,置,置层【属性,】,】的相关参,数,数。其中【,Z,轴】用来设,置,置在垂直平,面,面的方向上,层,层的顺序号,，,，【溢出】,用,用来设置层,内,内容超过层,大,大小时的显,示,示方式，【,剪,剪辑】用来,设,设置层的哪,一,一部分是可,见,见的。,4、层【属,性,性】面板,层具有很强,的,的灵活性，,可,可以随意移,动,动到页面中,的,的任何位置,。,。移动层的,方,方法有很多,：,：,（1）可以,使,使用鼠标进,行,行拖曳；,（2）也可,以,以先选中层,然,然后按键盘,上,上的方向键,进,进行移动（,每,每按1次方,向,向键移动1,个,个像素，如,果,果按住Shift键1,次,次移动10,个,个像素）；,（3）还可,以,以在【属性,】,】面板的【,左,左】和【上,】,】文本框中,输,输入数值进,行,行精确定位,。,。,5、移动层,可以根据需,要,要调整层的,大,大小，其方,法,法有：,（1）使用,鼠,鼠标直接拖,曳,曳；,（2）在【,属,属性】面板,的,的【宽】和,【,【高】文本,框,框中输入精,确,确数值；,（3）还可,以,以将所有选,择,择层的宽度,和,和高度变为,最,最后选择的,层,层的宽度和,高,高度。当选,择,择多个层时,，,，最后选择,的,的层四周的,控,控制点将以,实,实心显示，,其,其他的层四,周,周的控制点,将,将以空心显,示,示。,6、调整层,的,的大小,如果需要对,多,多个层进行,对,对齐操作，,直,直接用鼠标,拖,拖动层可能,不,不太精确，,通,通常需要使,用,用对齐层的,功,功能来实现,。,。方法是：,首,首先选择需,要,要对齐的层,，,，然后在主,菜,菜单的【修,改,改】【排,列,列顺序】中,选,选择【左对,齐,齐】、【右,对,对齐】【对,齐,齐上缘】或,【,【对齐下缘,】,】命令，即,可,可将所有选,择,择的层以最,后,后选择的层,为,为标准进行,对,对齐操作。,7、层的对,齐,齐操作,任务二,布,布局主体,需要掌握的,内,内容主要有,：,：,1、插入Div标签的,方,方法,2、层与Div标签的,转,转换,3、Div,标,标签居中显,示,示的方法,在主菜单中,选,选择【插入,】,】【布局,对,对象】【Div标签,】,】命令，或,在,在【插入】,【布局】,面,面板中单击,（,（插入Div标签）按,钮,钮打开【插,入,入Div标,签,签】对话框,进,进行设置插,入,入即可。,1、插入Div标签的,方,方法,在【插入】,【布局】,面,面板中有两,个,个按钮，一,个,个是（插,入,入Div标,签,签）按钮，,另,另一个是,（,（,绘,绘制层）按,钮,钮。在源代,码,码中，它们,使,使用的是同,一,一个标签,“”。在,绘,绘制层时，,层,层同时被赋,予,予了CSS,样,样式，而插,入,入Div标,签,签时，需要,再,再单独创建CSS样式,对,对它进行控,制,制。实际上,，,，层与Div标签是同,一,一个网页元,素,素不同的表,现,现形态，通,过,过CSS样,式,式可使两者,间,间相互转换,。,。例如，在,【,【CSS规,则,则定义】对,话,话框的【定,位,位】分类中,，,，将【类型,】,】选项设置,为,为“绝对”,，,，即表示层,，,，否则即为Div标签,，,，这是层与Div标签,转,转换的关键,因,因素。,2,、,、,层,层,与,与Div,标,标,签,签,的,的,转,转,换,换,使,用,用Div,标,标,签,签,布,布,局,局,网,网,页,页,，,，,它,它,的,的,对,对,齐,齐,方,方,式,式,只,只,有,有,“,“,左,左,对,对,齐,齐,”,”,和,和,“,“,右,右,对,对,齐,齐,”,”,，,，,如,如,果,果,要,要,使,使Div,标,标,签,签,居,居,中,中,显,显,示,示,，,，,可,可,以,以,将,将,它,它,的,的,边,边,界,界,，,，,特,特,别,别,是,是,左,左,边,边,界,界,和,和,右,右,边,边,界,界,设,设,置,置,为,为,“,“,自,自,动,动,”,”,即,即,可,可,。,。,3,、,、Div,标,标,签,签,居,居,中,中,显,显,示,示,的,的,方,方,法,法,任,务,务,三,三,布,布,局,局,页,页,脚,脚,需,要,要,掌,掌,握,握,的,的,内,内,容,容,主,主,要,要,有,有,：,：,1,、,、,改,改,变,变,层,层,的,的,z,轴,顺,顺,序,序,2,、,、,层,层,的,的,重,重,叠,叠,和,和,嵌,嵌,套,套,3,、,、,层,层,与,与,表,表,格,格,的,的,转,转,换,换,1,、,、,改,改,变,变,层,层,的,的,z,轴,顺,顺,序,序,改,变,变,层,层,的,的z,轴,轴,顺,顺,序,序,方,方,法,法,：,：,（1,）,）,可,可,以,以,在,在,【,【,属,属,性,性,】,】,面,面,板,板,中,中,设,设,置,置z,轴,轴,值,值,；,；,（2,）,）,也,也,可,可,以,以,在,在,【,【,层,层,】,】,面,面,板,板,中,中,直,直,接,接,修,修,改,改z,轴,轴,值,值,；,；,（3,）,）,还,还,可,可,以,以,用,用,鼠,鼠,标,标,指,指,向,向,需,需,要,要,改,改,变,变,序,序,号,号,的,的,层,层,，,，,并,并,按,按,下,下,鼠,鼠,标,标,左,左,键,键,向,向,上,上,或,或,向,向,下,下,进,进,行,行,拖,拖,曳,曳,，,，,当,当,拖,拖,曳,曳,到,到,希,希,望,望,插,插,入,入,的,的,两,两,层,层,之,之,间,间,时,时,会,会,出,出,现,现,一,一,条,条,横,横,线,线,，,，,释,释,放,放,鼠,鼠,标,标,左,左,键,键,，,，,各,各,个,个,层,层,的,的z,轴,轴,顺,顺,序,序,会,会,做,做,相,相,应,应,的,的,改,改,变,变,。,。,2,、,、,层,层,的,的,重,重,叠,叠,和,和,嵌,嵌,套,套,层,可,可,以,以,重,重,叠,叠,，,，,层,层,的,的,重,重,叠,叠,是,是,有,有,次,次,序,序,的,的,，,，,这,这,个,个,次,次,序,序,通,通,常,常,用,用,z,轴,顺,顺,序,序,来,来,表,表,示,示,。,。,其,其,值,值,可,可,为,为,正,正,可,可,为,为,负,负,，,，,也,也,可,可,以,以,是,是,“,“0,”,”,，,，,数,数,值,值,最,最,大,大,的,的,在,在,最,最,顶,顶,层,层,。,。,层,层,的,的,重,重,叠,叠,为,为,制,制,作,作,一,一,些,些,特,特,殊,殊,效,效,果,果,提,提,供,供,了,了,非,非,常,常,方,方,便,便,的,的,途,途,径,径,。,。,层,还,还,可,可,以,以,嵌,嵌,套,套,。,。,但,但,嵌,嵌,套,套,和,和,重,重,叠,叠,是,是,不,不,一,一,样,样,的,的,。,。,嵌,嵌,套,套,的,的,子,子,层,层,与,与,父,父,层,层,是,是,有,有,一,一,定,定,关,关,系,系,的,的,，,，,而,而,重,重,叠,叠,的,的,层,层,除,除,视,视,觉,觉,上,上,会,会,有,有,一,一,些,些,联,联,系,系,外,外,，,，,没,没,有,有,其,其,他,他,关,关,系,系,。,。,创,创,建,建,嵌,嵌,套,套,层,层,首,首,先,先,必,必,须,须,有,有,一,一,个,个,父,父,层,层,，,，,然,然,后,后,将,将,光,光,标,标,置,置,于,于,层,层,当,当,中,中,，,，,再,再,插,插,入,入,一,一,个,个,层,层,就,就,是,是,嵌,嵌,套,套,层,层,。,。,也,也,可,可,以,以,按,按,住,住Ctrl,键,键,，,，,在,在,【,【,层,层,】,】,面,面,板,板,中,中,将,将,某,某,一,一,层,层,拖,拖,曳,曳,到,到,另,另,一,一,层,层,上,上,面,面,，,，,形,形,成,成,嵌,嵌,套,套,层,层,。,。,在,在,【,【,层,层,】,】,面,面,板,板,中,中,可,可,以,以,看,看,到,到,，,，,嵌,嵌,套,套,层,层,是,是,呈,呈,树,树,状,状,结,结,构,构,表,表,示,示,的,的,，,，,而,而,且,且,子,子,层,层,与,与,父,父,层,层,的,的z,轴,轴,顺,顺,序,序,是,是,一,一,样,样,的,的,。,。,层,层,嵌,嵌,套,套,时,时,并,并,不,不,意,意,味,味,着,着,子,子,层,层,必,必,须,须,在,在,父,父,层,层,里,里,面,面,，,，,它,它,不,不,受,受,父,父,层,层,的,的,限,限,制,制,。,。,当,当,子,子,层,层,发,发,生,生,位,位,移,移,时,时,，,，,父,父,层,层,并,并,不,不,发,发,生,生,任,任,何,何,变,变,化,化,，,，,但,但,是,是,当,当,父,父,层,层,发,发,生,生,位,位,移,移,时,时,，,，,子,子,层,层,却,却,会,会,随,随,着