09用层布局网页教学课件 高教版 中职 网页设计与制作（Dreamweaver CS5） .ppt

《09用层布局网页教学课件 高教版 中职 网页设计与制作（Dreamweaver CS5） .ppt》由会员分享，可在线阅读，更多相关《09用层布局网页教学课件 高教版 中职 网页设计与制作（Dreamweaver CS5） .ppt（15页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、09用层布局网页教学课件 高教版 中职 网页设计与制作（Dreamweaver CS5）用“层+CSS”布局网页静态网站制作教学资源课件静态网站制作教学资源课件应用在网页中的层，大多数情况是浮动的，不是绝对定位在浏览器窗口的，下面通过实例来了解一下。，实例实例8：创建如图3.33所示用层布局的页面。，1、单击“插入”工具栏“布局”选项卡中的“插入Div 标签”按钮，在“插入点”插入“ID”层“box”，“选择定义规则的位置”是“新建样式表文件”，如图3.34所示，单击“新建CSS规则”按钮，新建“ID”类样式“#box”2、ID为“box”的层的CSS样式设置如图 3.35、3.36所示。边界

2、左、右自动是为了设置“box”层居中显示。3、在“box”层里单击“插入”工具栏“布局”选项卡中的“插入Div标签”按钮，在“插入点”插入“ID”层“head”，新建“ID”类样式“#head”。4、在“方框”中设置“高”：120像素，取消掉边界“全部相同”这个默认选项设置“下边界”：2像素。5、在“背景”中设置“背景颜色”：“#eeeeff”。在“边框”中设置“样式”：“实线”，“宽度”：“1像素”，“颜色”：“#999999”6、插入层并设置应用相应的样式：层“ID：index_left”的样式：“宽：180像素”、“高：500像素”、“浮动：左对齐”、“背景颜色：#eeffee”、“边框

3、样式：实线”“宽度：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”、“边框样式：实线”“宽

4、度：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所示的页面，素材在资料包中。