基于Dreamweaver平台的网页移入切换效果的设计与实现

陈香

(雅安职业技术学院 四川雅安 625000)

随着计算机网络的普及，网站已经成为人们面向世界、认知世界的窗口，随之也越来越多的人喜欢网页设计。Dreamweaver作为一种功能强大、操作简单的网页设计制作软件，深受网页设计者们的喜爱，其中HTML和CSS又是网页设计与制作的核心和基础，也是每个网页设计者都应掌握的必备知识。该文利用HTML和CSS知识探索网页移入切换效果的实践研究，也是把一些非常复杂、难以理解的方法和问题简单化，让网页设计与制作的初学者能够轻松理解并快速掌握怎样进行网页切换设计，并且可以推广应用到更多的布局与效果设计中。

1 Dreamweaver网页制作软件的认识

当前网页制作的软件种类繁多，对于初学者一般推荐使用的网页设计制作软件是Dreamweaver。Dreamweaver 支持多种窗口方式进行网页制作，包括设计、拆分、代码、实时视图，可以根据设计人员喜好来进行选择，对于一个初学者，可以直接利用设计窗口的工具快捷地创建Web 页面，而代码编辑器的使用更适合Web设计开发的高级人员进行网页创作[1]。

Dreamweaver利用对 HTML、CSS、JavaScript等内容的支持，网页设计与制作者可以非常快速地制作网页和建设网站。利用CSS 属性变化制成的动画转换效果，使网页设计生动形象、栩栩如生，还可以精准地控制网页设计的效果。

2 网页中的移入切换效果

网站中合理的页面设计布局可以让信息的传递更直观，使网页更高效、更准确地把页面信息展现给用户。网站中使用移入切换效果，不断切换的页面，不但可以增加网页的动态效果，也可以让网页更加合理编排，同时也可以大大节约页面空间，更合理地展示更多的内容。该文设计的最终效果图如图1 所示，当鼠标分别移动到顶部1、2、3、4 区域时，下方会切换到显示相应的内容；当鼠标移开时，会切换到设置的默认值1内容。

图1 移入切换效果图

对于精通代码编写的技术人员来说，可以利用Dreamweaver 中经典的DIV+CSS 方法编写代码实现这种效果[2]。基于Dreamweaver 软件为基础，用HTML 标签来搭建网页的基本结构，用CSS来控制实现样式，对网页移入切换效果展开探索。

3 制作方法

利用DIV 块元素搭建网页结构，CSS 对块区域进行样式设计[3]，具体以图1为例来进行网页移入切换效果设计研究。首先，打开Dreamweaver 网页制作软件，新建一个空白HTML网页，并保存在站点文件下。

3.1 利用DIV块元素搭建网页，进行网页布局

DIV元素是用来为HTML 文档内大块的内容提供结构和背景的块元素,DIV标签的属性可以实现所包含元素的样式特征，或通过使用样式表来格式化这个块,DIV标签可以把文档分割成功能独立的、不同的部分。HTML文档搭建页面结构最常用的就是DIV块元素[4]。

选择Dreamweaver 代码窗口进行编码设计，首先，在

3.2 设计盒子

4 个div 区域看作是4 个盒子，为了增加每个盒子的区分度,此例中用4 种不同的背景颜色来加以区分,在具体更广泛地移入切换应用中,可以给每个盒子添加不同的具体内容。4 个div 盒子里面分别放两个HTML 元素

3.3 CSS样式表文件设计

CSS 层叠样式表可以定义样式属性如文字大小、字体的颜色、背景颜色、元素位置等。CSS就好比对修建好的房屋进行装修，设计房屋的风格样式等。前面设计盒子内容里面已经介绍了CSS 样式的3种引入方式，这里以HTML网页链入式方式引入CSS样式表。

首先在Dreamweaver 窗口新建一个空白CSS 样式表文件，并保存在站点文件下。在HTML 网页代码窗口用

4个盒子分别应用CSS样式文字颜色属性黑色，字号为40像素，文字居中对齐,设置盒子左浮动。具体代码如下：

盒子完整的大小包括内边距、边框、内容和外边距。为了4 个盒子刚好在大盒子里面正常显示，每个盒子里面两个段落高度加上内外边距的总高度要刚好和大盒子box高度一致，宽度也要一致，所以具体每个段落的宽高度像素设置如下。每个盒子第一个段落应用CSS样式属性高度为40像素，宽度为100像素，行高为40像素，外边距为1像素，鼠标经过是手指形状。第二个段落宽度为408 像素，高度为260 像素，行高260像素可以使文字垂直居中。为了4个盒子里面的第二个段落均放在固定的位置,位置绝对定位，距离box 大盒子的左边距离为0，上边距离为42像素，第二个段落1内容到4内容这4个部分重叠在一起，默认显示红色1内容。具体代码如下。

3.4 移入切换效果设计

接下来利用CSS 样式属性设置CSS 伪类状态，鼠标经过每个盒子top 区域时，设置每个盒子bot 区域的CSS样式层级z-index属性设为9。z-index属性设置是对元素的叠放顺序进行限定，拥有更高值的元素总是会放在属性值较低的元素上面。未设置z-index 属性时，浏览器默认z-index属性值是0，最初设置红色1内容z-index属性为1，所以默认状态是显示红色1内容，否则将显示最后的绿色4内容，因为浏览器解析HTML代码是从上而下依次解析的，如果优先级一样，就会执行最后编写的代码。最后设置鼠标移入CSS伪类状态z-index属性为9，这时z-index属性值9比默认的红色1内容z-index属性值1高，故移入会切换显示效果，所有主流浏览器都支持z-index属性[6-7]。具体代码如下。

网页移入切换效果设计的Dreamweaver 代码窗口设计具体见图2、图3。

图2 HTML网页文件代码

图3 CSS样式表文件

4 结语

当前许多网站会用到更丰富多样化的移入切换效果，实现方法也十分多样化，可以用不同的代码来编写实现，也可以直接在设计窗口用鼠标实现，但是对于喜欢代码设计的网页设计者，会觉得代码编写更简单易行。通过此例，笔者把一些复杂的思想和问题简单化，让设计者能够轻松理解并快速掌握怎样进行网页移入切换效果设计，可以拓展应用到更多样化的网页移入切换效果设计中。