资源描述
单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,*,09用层布局网页教学课件 高教版 中职 网页设计与制作(Dreamweaver CS5),用“层,+CSS,”布局网页,静态网站制作教学资源课件,应用在,网页中的,层,,大多数情况是浮动的,不是绝对定位在浏览器窗口的,下面通过实例来了解一下。,,,实例,8,:,创建如图,3.33,所示用层布局的页面。,,,1,、,单击“插入”工具栏“布局”选项卡中的“插入,Div,标签”按钮,在“插入点”插入“,ID,”层“,box,”,“选择定义规则的位置”是“新建样式表文件”,如图,3.34,所示,单击“新建,CSS,规则”按钮,新建“,ID,”类样式“,#box,”,2,、,ID,为“,box,”的层的,CSS,样式设置如图,3.35,、,3.36,所示。边界左、右自动是为了设置“,box,”层居中显示。,3,、,在“,box,”层里单击“插入”工具栏“布局”选项卡中的“插入,Div,标签”按钮,在“插入点”插入“,ID,”层“,head,”,新建“,ID,”类样式“,#head,”。,4,、,在“方框”中设置“高”:,120,像素,取消掉边界“全部相同”这个默认选项设置“下边界”:,2,像素。,5,、,在“背景”中设置“背景颜色”:“,#eeeeff,”。,在“边框”中设置“样式”:“实线”,“宽度”:“,1,像素”,“颜色”:“,#999999,”,6,、,插入层并设置应用相应的样式:,层“,ID,:,index_left,”的样式:“宽:,180,像素”、“高:,500,像素,”,、“浮动:左对齐”、“背景颜色:,#eeffee,”、“边框样式:实线”“宽度:,1,像素”“颜色:,#999999,”。,层“,ID,:,index_middle,”的样式:“宽:,600,像素”、“高:,500,像素,”,、“浮动:左对齐”、“左边界:,2,像素”、“右边界:,2,像素”、“背景颜色:,#ffffee,”、“边框样式:实线”“宽度:,1,像素”“颜色:,#999999,”。,层“,ID,:,index_right,”的样式:“宽:,180,像素”、“高:,500,像素,”,、“浮动:右对齐”、“背景颜色:,#ffeeee,”、“边框样式:实线”“宽度:,1,像素”“颜色:,#999999,”。,层“,ID,:,bottom,”的样式:“高:,120,像素,”,、“上边界:,2,像素”。“背景颜色:,#eeeeff,”、“边框样式:实线”“宽度:,1,像素”“颜色:,#999999,”。,层的浮动,CSS,样式“方框”中浮动的设置,在页面布局中应用广泛,具有非常重要的作用和地位。举一个小例子,要实现如图,3.37,所示效果。,设置层,index_left,浮动左对齐,层,index_right,浮动右对齐,如果层,index_left,与,index_right,都不设置浮动的话,浏览的效果如图,3.38,所示。,如只设置层,index_left,浮动左对齐,层,index_right,浮动不设置就会出现如图,3.39,所示的两个层重叠的现象。,如只设置层,index_right,浮动右对齐,层,index_left,浮动不设置就会出现如图,3.40,所示现象。,设置层,index_right,、,index_left,浮动都设置左对齐就会出现如,下,现象。,练习:,下列关于层的说法错误的是(,),A,、利用层可以实现网页中的图文混排,B,、层的位置可以任意移动,C,、层中即可以插入文字,也可以插入图片,D,、层位置一旦确定,不能更改,答案:,D,练习,2,:,用层布局如图,3.42,所示的页面,素材在资料包中。,
展开阅读全文