第12章布局实现.pptVIP

第6讲 AP DIV层 1-* * * 层布局页面 层的样式 页面布局实例 使用层布局页面 另一种网页布局的方法是使用层。层与div标签类似，但与div标签不同的是层可以浮动在其他网页对象的上面，可以自由拖动层的位置。与其他网页元素不同的是，层具有绝对定位的功能，设置层的位置以后，这个层可以浮动在其他层的上面，不受其他层的约束。上面的层会遮挡下面元素的内容。利用层的这一特点，可以用层来实现网页的布局。 创建层 在设计视图中，单击需要插入层的位置，再选择“插入”｜“布局对象”｜AP?Div命令，即可插入一个层。新插入的层，默认在网页的左上角，没有边框与背景。可以在一个网页中插入多个层，实现网页的布局。网页中插入的层如图所示。 设置层的属性 网页中的层可以独立地设置层的背景颜色、内容、层次等属性。通过对层的设置可以实现很多网页效果。 设置层的Z轴 对层的属性设置时，除了对层的位置、大小、背景进行设置，另一个重要设置是Z轴。层的Z轴指的是层的上下关系。上面的层可以遮盖住下面层的内容。层的Z轴数字较大就会在网页的最上层。 层的样式 层的属性设置，是利用单一对象的CSS样式来实现的。每插入一个层，就会在样式表中新建一个针对这个层的样式，如图所示是“CSS样式”标签中层的样式。 利用层实现网页的布局 分别对多个层进行属性设置，再正确放置层的位置，即可在层中输入内容，实现网页布局的排版。如图所示是经过了属性设置的3个层实现的网页布局设计。在层实现的网页布局中，可以方便地实现网页布局的调整。 层中的样式代码 在进行这些层的设置时，实际上是Dreamweaver 自动生成CSS样式脚本，针对单一层对象进行设置。 使用层制作下拉菜单 下拉菜单的主要特征是两个鼠标事件。当鼠标移动到某一个对象上时，显示菜单；当鼠标移出这一对象时，菜单隐藏。 实例：表格与层布局页面 网页布局的主要的内容与技巧就是把网页的版面分割成不同的区域，然后在区域中输入不同的内容。可以实现网页布局的方法有很多，表格与层的嵌套是网页布局的最常用方法。灵活地使用表格与层，可以实现网页的布局与排版。 实例——“厂”字型布局 网页的布局有很多种。“厂”字型布局是一种很常见的网页布局形式。“厂”字型就是网页的上部有贯通的导航条，左边有竖排的导航内容，右边是网页的主要内容。 实例——DIV+层布局（Web 2.0） 在Web 2.0中，可能需要一些具有复杂功能的网页布局。这样的网页布局单纯使用HTML或CSS样式是无法实现的。 常 见 问 题 在网页布局时，需要注意网站中不同网页布局风格的一致性。在布局时，需要灵活使用表格、层、JavaScript等方法。CSS样式表的使用可以实现美观的布局效果。 网页的基本布局风格问题 在对网页进行布局之前，需要考虑网页的基本布局。网页基本布局就是网页的基本排版风格。例如“厂”字型布局就是一种很常用的网页布局。 在表格布局时表格边框颜色、背景颜色的搭配问题 在使用表格进行布局时，表格、单元格的边框颜色、背景颜色的合理搭配，可以实现很多种美观的页面效果。这些效果可以在表格的“属性”面板中进行属性设置来实现，也可以使用样式进行实现。可以用以下方法来实现表格的布局效果。 在标签式布局中对单元格背景样式控制 在标签式的布局中，有一个重要步骤就是实现标签按钮的背景颜色控制。标签链接的背景颜色随着鼠标的移动而改变，会表现出更好的标签控制效果。 1-*