Dreamweaver教程之div篇.pdf

DREAMWEAVER 教程 DIV标签的多种布局方式 该教程为天津理工大学华信软件学院科技协会的Dreamweaver CS4 教程。该篇教程讲的是 div标签的使用。 作者：王宜帅。 DREAMWEAVER 教程 1.了解DIV标签 div 标签几乎算是一个万能的标签，在div 里面你可以放任何元素。一般，在进行布局时，都 会将元素放置在div 里面。接下来我们针对下图讲解两种布局方式。 该网页的HTML 代码如下： 1 2.设置 CSS 在开始各部分的CSS 之前，我们先在新建立的CSS 文件中写入如下代码： 其中，*是全部的意思。这段代码的意思就是整个网页中的元素的padding 和margin 都是0。因 为，我们这个网页中的元素比较多，而且大量用到图片，所以我们需要取消默认值，在需要的时候我 们自己去设置。 接下来，我们就可以开始写本站快讯部分的CSS 了。根据上面的HTML 代码，很明显，我们需 要设置两个CSS，分别是div 和图片的。所以，我们分别用id 和类去设置。不过，由于该网页元素较 多，且大量用到图片，我们设置CSS 时要详细。比如宽度、高度，我们需要进行计算。例如宽度， 我们要在标题图片和三图片加边界中取最大值。以此类推。 2 这时效果如图： 接下来就是第二部分的CSS。这部分的CSS，我们就需要分三部分去设置了，分别是div 、ul、li 的。在这里，我们分别用id、复合内容、复合内容去设置。我们在设置div 的宽度时，为了美观，使 其宽度加上边界宽度与上一div 保持一致。代码、效果如下： 接下来，就是第三部分了。这部分很明显也是两部分，而且那几个图片也很明显可以用类设置。 这里，我们前三个用类，最后一个用绝对定位。需要注意的是，在用绝对定位时，它是向上寻找设置 为相对定位的，以相对定位的单位为参照系。所以，这里，我们需要将d3div 设置为相对定位。在这 里说一下，任何元素不加以注明，都是默认相对定位的。代码如下： 3 我们可以注意一下圈出来的部分，这是写绝对定位时必须用到的。我们可以看一下 img4 的效果： 在圈的部分，有一个小框框，表示我们可以拖动它到我们想要的位置。 这样来说，这个网页就算完成了。 总代码和效果如下： 4 5 6