41、Dreamweaver网页布局实用指南

Dreamweaver网页布局实用指南

1. AP元素基础

在网页设计中，AP（Absolutely Positioned）元素的定位方式有相对定位和绝对定位之分。相对定位中，设置元素的“Top”属性为100像素，是指该元素相对于HTML文档中原本应出现位置向下偏移100像素，而非距离浏览器窗口顶部100像素。而绝对定位能够让元素精确地出现在页面的特定位置，例如，将绝对定位元素的“Top”和“Left”属性分别设置为100像素和150像素，该元素就会出现在距离浏览器窗口顶部100像素、左侧边缘150像素的位置。

需要注意的是，当一个 <div> 嵌套在另一个具有相对或绝对定位设置的 <div> 中时，浏览器会根据父 <div> 的位置来计算子元素的位置。例如，一个AP元素距离页面顶部300像素，其中嵌套的一个绝对定位元素“Top”位置为20像素，那么该元素实际距离页面顶部320像素。

1.1 Clip属性

Clip属性可以隐藏AP元素除指定矩形区域外的部分。不过，在大多数情况下，应尽量避免使用该属性，因为它除了用于动画特效外，实用性较低。例如，将一个大图形放入AP元素中，若只想显示其中一小部分，使用Clip属性时，浏览器仍需下载整个图形，而不是仅下载裁剪区域。因此，最好一开始就准备好合适尺寸的小图形，这样可以节省流量。

虽然可以使用JavaScript移动裁剪区域，营造出类似聚光灯在AP元素上移动的效果，但Dreamweaver并不支持这一功能，此类效果通常使用Edge Animate等程序来实现。Clip属性有