08制作悬停广告教学课件 高教版 中职 网页设计与制作（Dreamweaver CS5） .ppt

08 制作悬停广告教学课件 高教版 中职 网页设计与制作（Dreamweaver CS5）制作悬停广告静态网站制作教学资源课件 网页中的层是可以重叠的，因此设置层与层之间的重叠顺序相当重要，灵活运用层可实现复杂的网页特效。改变层的“Z 轴”属性值时，值越大，该层将向上移动，改为比现有值小的数字时，该层向底层移动。，绘制在网页中固定位置的层：将插入点放置在要创建层的位置，单击“插入”菜单“布局对像”中的“AP Div”命令，就可以插入一个绝对定位的层。绝对定位层，自动生成的样式代码如下：#apDiv1 position:absolute;left:15px;top:13px;width:790px;height:378px;z-index:1;实例7：利用层可以叠加的性能，制作如图所示的网页左侧悬停广告的效果，即滚动浏览器窗口时，该广告图片始终停留在窗口左侧。1.单击“插入”菜单“布局”中的“插入Div 标签”命令，在“插入点”插入“ID”层“box”，设置高：1200px，宽：1000px，左、右边距：自动，在层“box”中插入图像“school_img”，并设置该层左右边距“自动”，即水平居中。2.选择“插入”工具栏“布局”选项卡中的“绘制 AP Div 标签”按钮，拖动鼠标在网页的左侧绘制一个大于图片的层，并插入图像“ad.jpg”，3.层“apDiv1”属性面板如图3.32 所示，在“Z 轴”框中输入“100”，Z 轴值最大的显示在最上方。在“CSS 样式”面板“position”右侧的值列表中，选择“fixed”。4.保存网页，浏览时会发现当用鼠标滚动网页时左侧的广告不会随之移动。相对于浏览器窗口绝对定位层“apDiv1”的样式代码如下：#apDiv1 position:fixed;left:43px;top:56px;width:100px;height:237px;z-index:100;简单介绍层“apDiv1”属性面板中各项的功能：“左”和“上”：用于设置绝对定位层在页面上的位置“Z 轴”：用于设置层的层次属性值，即层的重叠顺序。“可见性”：用于选择默认状态下所创建层的可见性。“default”：不指明层的可见性，但大多数浏览器都会继承该层的父级层的可见性。“inherit”：继承其父级层的可见性。“visible”：显示层及其包含的内容，无论其父级层是否可见。“hidden”：隐藏层及其包含的内容，无论其父级层是否可见。“溢出”：用于指定当层内容超出层尺寸时的处理方法 visible：层内容超出层的范围时可自动增加层尺寸。hidden：层内容超出层的范围时保持层尺寸不变，隐藏超出部分内容。scroll：层内容无论是否超出层的范围时都自动增加滚动条。auto：层内容超出层的范围时自动增加滚动条。“剪辑”选项区的“左”、“右”、“上”、“下”文本框：用于设置层的可视区域。练习：改变层的叠放次序时需调整（）的属性值A、Z-indexB、leftC、rightD、height答案：A