基于Dreamweaver平臺的網頁移入切換效果的設計與實現

陳香

(雅安職業技術學院 四川雅安 625000)

隨著計算機網絡的普及，網站已經成為人們面向世界、認知世界的窗口，隨之也越來越多的人喜歡網頁設計。Dreamweaver作為一種功能強大、操作簡單的網頁設計制作軟件，深受網頁設計者們的喜愛，其中HTML和CSS又是網頁設計與制作的核心和基礎，也是每個網頁設計者都應掌握的必備知識。該文利用HTML和CSS知識探索網頁移入切換效果的實踐研究，也是把一些非常復雜、難以理解的方法和問題簡單化，讓網頁設計與制作的初學者能夠輕松理解并快速掌握怎樣進行網頁切換設計，并且可以推廣應用到更多的布局與效果設計中。

1 Dreamweaver網頁制作軟件的認識

當前網頁制作的軟件種類繁多，對于初學者一般推薦使用的網頁設計制作軟件是Dreamweaver。Dreamweaver 支持多種窗口方式進行網頁制作，包括設計、拆分、代碼、實時視圖，可以根據設計人員喜好來進行選擇，對于一個初學者，可以直接利用設計窗口的工具快捷地創建Web 頁面，而代碼編輯器的使用更適合Web設計開發的高級人員進行網頁創作[1]。

Dreamweaver利用對 HTML、CSS、JavaScript等內容的支持，網頁設計與制作者可以非?？焖俚刂谱骶W頁和建設網站。利用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 結語

當前許多網站會用到更豐富多樣化的移入切換效果，實現方法也十分多樣化，可以用不同的代碼來編寫實現，也可以直接在設計窗口用鼠標實現，但是對于喜歡代碼設計的網頁設計者，會覺得代碼編寫更簡單易行。通過此例，筆者把一些復雜的思想和問題簡單化，讓設計者能夠輕松理解并快速掌握怎樣進行網頁移入切換效果設計，可以拓展應用到更多樣化的網頁移入切換效果設計中。