基于Dreamweaver平台的网页移入切换效果的
设计与实现
陈香
(雅安职业技术学院  四川雅安  625000)
摘要：随着计算机网络的飞速发展，网页设计与制作也越来越被人们所关注。对于当前网页设计制作软件，Dreamweaver被广泛推荐使用，功能强大、操作十分简单，深受网页设计者们的喜爱。页面上使用移入切换效果，可以增加网页的动态效果，网页布局更加合理，节约页面空间，显示更多的内容。该文以Dream‐weaver为基础，利用Dreamweaver中经典的DIV+CSS方法编写代码实现这种切换效果展开研究，探索了DIV 块元素搭建网页结构，CSS对块区域进行样式设计，最后实现移入切换效果。通过此例让设计者能够轻松理解并快速掌握怎样进行网页移入切换效果设计，也可以拓展应用到更多样化的设计中。
关键词：Dreamweaver 网页设计 移入切换 实践与研究
中图分类号：P208文献标识码：A 文章编号：1672-3791(2023)03-0014-04
Design and Implementation of Web Page Move-in Transition
Effect Based on Dreamweaver Platform
CHEN Xiang
(Ya'an Polytechnic College, Ya'an, Sichuan Province, 625000 China)
Abstract:With the rapid development of computer network, web design and production are more and more con‐cerned by people. For the current web design and production software, Dreamweaver is widely recommended to use, as a powerful and easy-to-use web design software, it is deeply loved by web designers. Using the move-in transition effect on the page can increase the dynamic effect of the page, make the page layout more reasonable, save page space, and display more content. Based on Dreamweaver, this paper uses the classic DIV+CSS method in Dreamweaver to write code to achieve this transition effect. It explores the DIV block elements to build the web page structure, CSS to style the block area, and finally to achieve the move-in transition effect. Through this ex‐ample, designers can easily understand and quickly master how to design web page move-in transition effects, and can also expand and apply to more diversified designs.
Key Words: Dreamweaver; Web design; Move-in transition; Practice and research
随着计算机网络的普及，网站已经成为人们面向世界、认知世界的窗口，随之也越来越多的人喜欢网页设计。Dreamweaver作为一种功能强大、操作简单的网页设计制作软件，深受网页设计者们的喜爱，其中HTML和CSS又是网页设计与制作的核心和基础，也是每个网页设计者都应掌握的必备知识。该文利用HTML和CSS知识探索网页移入切换效果的实践研究，也是把一些非常复杂、难以理解的方法和问题简单化，让网页设计与制作的初学者能够轻松理解并快速掌握怎样进行网页切换设计，并且可以推广应用到更多的布局与效果设计中。
1 Dreamweaver网页制作软件的认识
当前网页制作的软件种类繁多，对于初学者一般推荐使用的网页设计制作软件是Dreamweaver。Dreamweaver支持多种窗口方式进行网页制作，包括
DOI：10.16661/jki.1672-3791.2207-5042-6986
作者简介： 陈香（1985—），女，本科，讲师，研究方向为计算机应用技术。
设计、拆分、代码、实时视图，可以根据设计人员喜好来进行选择，对于一个初学者，可以直接利用设计窗口的工具快捷地创建Web页面，而代码编辑器的使用更适合Web设计开发的高级人员进行网页创作[1]。
Dreamweaver利用对 HTML、CSS、JavaScript等内容的支持，网页设计与制作者可以非常快速地制作网页和建设网站。利用CSS属性变化制成的动画转换效果，使网页设计生动形象、栩栩如生，还可以精准地控制网页设计的效果。
2 网页中的移入切换效果
网站中合理的页面设计布局可以让信息的传递更直观，使网页更高效、更准确地把页面信息展现给用户。网站中使用移入切换效果，不断切换的页面，不但可以增加网页的动态效果，也可以让网页更加合理编排，同时也可以大大节约页面空间，更合理地展示更多的内容。该文设计的最终效果图如图1所示，当鼠标分别移动到顶部1、2、3、4区域时，下方会切换到显示相应的内容；当鼠标移开时，会切换到设置的默认值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代码窗口进行编码设计，首先，在<body>标签里面插入一个div标签进行布局，应用类名box。把一个div区域比喻成一个装东西的容器，后面叫作盒子。盒子模型（Box Model）就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个盒子都由元素的内容（content）、内边距（padding）、边框（border）和外边距（margin）这4个属性组成，盒子模型允许我们在其他元素和周围元素边框之间的空间放置元素。其次，在box这个大盒子里面插入4对div标签，均应用类名content。类名即为HTML元素的class属性值。具体代码如下。
<div class="box">
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
</div>
3.2  设计盒子
4个div区域看作是4个盒子，为了增加每个盒子的区分度，此例中用4种不同的背景颜来加以区分, 在具体更广泛地移入切换应用中，可以给每个盒子添加不同的具体内容。4个div盒子里面分别放两个HTML元素<p>标签定义段落。使用CSS修饰网页元素时，常用的引入方式有3种：第一种是行内式，通过开始标签内定义style属性来设置元素的样式；第二种是内嵌式，CSS代码写在<style>双标记之间，<style>双标记要放在HTML文档的<head>头部标记中；第三种是链入式，通过<link/>单标记将外部样式表文件链接到HTML文档中，外部样式表文件是将所有的样式放在一个或多个以.css为扩展名的单独表文件。这里直接用CSS样式行内式引入方式设计盒子背景颜，第一个盒子设计css样式style属性为红背景，第二个盒子设计css样式style属性为蓝背景，第三个盒子设计css样式style属性为黄背景，第四个盒子设计css样式style属性为绿背景。每个盒子里面的两个段落第一个段落均应用类
名top，第二个段落均应用类名bot。第一个盒子第一个段落文字内容输入1，第二个段落文字内容输入1内容；第二个盒子第一个段落文字内容输入2，第二个段落文字内容输入2
html网页设计教程(推荐)
内容；第三个盒子第一个段落文字内容输入3，第二个段落文字内容
输入3内容；第四个盒子第一个段落文字内容输入4，
第二个段落文字内容输入4内容。为了盒子下方默认图1  移入切换效果图
效果显示红1内容，第一个盒子css样式层级z-index 属性设为1。具体代码如下。
<div class="box">
<div class="content">
<p class="top" >1</ p>
<p class="bot" >1内容</p>
</div>
<div class="content">
<p class="top" >2</ p>
<p class="bot" >2内容</p>
</div>
<div class="content">
<p class="top" >3< /p>
<p class="bot" >3内容</p>
</div>
<div class="content">
<p class="top" >4</ p>
<p class="bot" >4内容</p>
</div>
</div>3.3  CSS样式表文件设计
CSS层叠样式表可以定义样式属性如文字大小、字体的颜、背景颜、元素位置等。CSS就好比对修建好的房屋进行装修，设计房屋的风格样式等。前面设计盒子内容里面已经介绍了CSS样式的3种引入方式，这里以HTML网页链入式方式引入CSS样式表。
首先在Dreamweaver窗口新建一个空白CSS样式表文件，并保存在站点文件下。在HTML网页代码窗口用<link/>标签链入新建的CSS样式表文件。最后在CSS样式表里进行CSS样式表属性设置，首先重置浏览器内外边距，均设为0。其次设置box大盒子的宽度为408像素，高度为304像素，边框为黑2个像素的单实线，上下外边距为50个像素，水平居中，位置为相对定位[5]。具体代码如下。
*{ margin:0; padding:0;}
.box{ width:408px; height:304px; border:2px black solid; margin:50px auto; position:relative; }
4个盒子分别应用CSS样式文字颜属性黑，字号为40像素，文字居中对齐，设置盒子左浮动。具体代码如下：
. content {color: black;font-size:40px;text-align: center;float:left;}
盒子完整的大小包括内边距、边框、内容和外边距。为了4个盒子刚好在大盒子里面正常显示，每个盒子里面两个段落高度加上内外边距的总高度要刚好和大盒子box高度一致，宽度也要一致，所以具体每个段落的宽高度像素设置如下。每个盒子第一个段落应用CSS
样式属性高度为40像素，宽度为100像素，行高图2    HTML网页文件代码
为40像素，外边距为1像素，鼠标经过是手指形状。第二个段落宽度为408像素，高度为260像素，行高260像素可以使文字垂直居中。为了4个盒子里面的第二个段落均放在固定的位置，位置绝对定位，距离box大盒子的左边距离为0，上边距离为42像素，第二个段落1内容到4内容这4个部分重叠在一起，默认显示红1内容。具体代码如下。
. content .top {height:40px;width: 100px; line-height: 40px; cursor:pointer; margin:1px; }
. content .bot { width:408px; height:260px;line-height:260px; position:absolute; left:0; top:42px;}
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]。具体代码如下。
. content:hover .bot{ z-index:9; }
网页移入切换效果设计的Dreamweaver代码窗口设计具体见图2、图3。
4 结语
当前许多网站会用到更丰富多样化的移入切换效果，实现方法也十分多样化，可以用不同的代码来编写实现，也可以直接在设计窗口用鼠标实现，但是对于喜欢代码设计的网页设计者，会觉得代码编写更简单易行。通过此例，笔者把一些复杂的思想和问题简单化，让设计者能够轻松理解并快速掌握怎样进行网页移入切换效果设计，可以拓展应用到更多样化的网页移入切换效果设计中。
参考文献
[1]宋丽娜，史笑颜，刘西杰，等.HTML+CSS+JavaScript网
页制作从入门到精通[M].4版.北京：人民邮电出版社,2021.
[2]黑马程序员.HTML+CSS+JavaScript网页制作案例
教程[M].2版.北京：人民邮电出版社,2021.
[3]黑马程序员.网页设计与制作项目教程（HTML+CSS+
JavaScript）[M].2版.北京：人民邮电出版社,2022. [4]黑马程序员.网页设计与制作项目教程[M].北京：人
民邮电出版社,2017.
[5]乔·卡萨博纳.HTML5与CSS3基础教程[M].9版.
北京：人民邮电出版社,2021.
[6]邵宝军.翻转课堂教学模式在初级长拳第三路教学
中的实证研究[D].哈尔滨：哈尔滨体育学院,2022.
[7]林强.基于Cesium的岛屿高精度地理信息系统及关
键技术设计[D].南京：南京邮电大学,2021.
图3  CSS样式表文件

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。