基于Dreamweaver平臺(tái)的網(wǎng)頁(yè)移入切換效果的設(shè)計(jì)與實(shí)現(xiàn)

陳香

(雅安職業(yè)技術(shù)學(xué)院 四川雅安 625000)

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

1 Dreamweaver網(wǎng)頁(yè)制作軟件的認(rèn)識(shí)

當(dāng)前網(wǎng)頁(yè)制作的軟件種類繁多，對(duì)于初學(xué)者一般推薦使用的網(wǎng)頁(yè)設(shè)計(jì)制作軟件是Dreamweaver。Dreamweaver 支持多種窗口方式進(jìn)行網(wǎng)頁(yè)制作，包括設(shè)計(jì)、拆分、代碼、實(shí)時(shí)視圖，可以根據(jù)設(shè)計(jì)人員喜好來(lái)進(jìn)行選擇，對(duì)于一個(gè)初學(xué)者，可以直接利用設(shè)計(jì)窗口的工具快捷地創(chuàng)建Web 頁(yè)面，而代碼編輯器的使用更適合Web設(shè)計(jì)開發(fā)的高級(jí)人員進(jìn)行網(wǎng)頁(yè)創(chuàng)作[1]。

Dreamweaver利用對(duì) HTML、CSS、JavaScript等內(nèi)容的支持，網(wǎng)頁(yè)設(shè)計(jì)與制作者可以非?？焖俚刂谱骶W(wǎng)頁(yè)和建設(shè)網(wǎng)站。利用CSS 屬性變化制成的動(dòng)畫轉(zhuǎn)換效果，使網(wǎng)頁(yè)設(shè)計(jì)生動(dòng)形象、栩栩如生，還可以精準(zhǔn)地控制網(wǎng)頁(yè)設(shè)計(jì)的效果。

2 網(wǎng)頁(yè)中的移入切換效果

網(wǎng)站中合理的頁(yè)面設(shè)計(jì)布局可以讓信息的傳遞更直觀，使網(wǎng)頁(yè)更高效、更準(zhǔn)確地把頁(yè)面信息展現(xiàn)給用戶。網(wǎng)站中使用移入切換效果，不斷切換的頁(yè)面，不但可以增加網(wǎng)頁(yè)的動(dòng)態(tài)效果，也可以讓網(wǎng)頁(yè)更加合理編排，同時(shí)也可以大大節(jié)約頁(yè)面空間，更合理地展示更多的內(nèi)容。該文設(shè)計(jì)的最終效果圖如圖1 所示，當(dāng)鼠標(biāo)分別移動(dòng)到頂部1、2、3、4 區(qū)域時(shí)，下方會(huì)切換到顯示相應(yīng)的內(nèi)容；當(dāng)鼠標(biāo)移開時(shí)，會(huì)切換到設(shè)置的默認(rèn)值1內(nèi)容。

圖1 移入切換效果圖

對(duì)于精通代碼編寫的技術(shù)人員來(lái)說，可以利用Dreamweaver 中經(jīng)典的DIV+CSS 方法編寫代碼實(shí)現(xiàn)這種效果[2]。基于Dreamweaver 軟件為基礎(chǔ)，用HTML 標(biāo)簽來(lái)搭建網(wǎng)頁(yè)的基本結(jié)構(gòu)，用CSS來(lái)控制實(shí)現(xiàn)樣式，對(duì)網(wǎng)頁(yè)移入切換效果展開探索。

3 制作方法

利用DIV 塊元素搭建網(wǎng)頁(yè)結(jié)構(gòu)，CSS 對(duì)塊區(qū)域進(jìn)行樣式設(shè)計(jì)[3]，具體以圖1為例來(lái)進(jìn)行網(wǎng)頁(yè)移入切換效果設(shè)計(jì)研究。首先，打開Dreamweaver 網(wǎng)頁(yè)制作軟件，新建一個(gè)空白HTML網(wǎng)頁(yè)，并保存在站點(diǎn)文件下。

3.1 利用DIV塊元素搭建網(wǎng)頁(yè)，進(jìn)行網(wǎng)頁(yè)布局

DIV元素是用來(lái)為HTML 文檔內(nèi)大塊的內(nèi)容提供結(jié)構(gòu)和背景的塊元素,DIV標(biāo)簽的屬性可以實(shí)現(xiàn)所包含元素的樣式特征，或通過使用樣式表來(lái)格式化這個(gè)塊,DIV標(biāo)簽可以把文檔分割成功能獨(dú)立的、不同的部分。HTML文檔搭建頁(yè)面結(jié)構(gòu)最常用的就是DIV塊元素[4]。

選擇Dreamweaver 代碼窗口進(jìn)行編碼設(shè)計(jì)，首先，在

3.2 設(shè)計(jì)盒子

4 個(gè)div 區(qū)域看作是4 個(gè)盒子，為了增加每個(gè)盒子的區(qū)分度,此例中用4 種不同的背景顏色來(lái)加以區(qū)分,在具體更廣泛地移入切換應(yīng)用中,可以給每個(gè)盒子添加不同的具體內(nèi)容。4 個(gè)div 盒子里面分別放兩個(gè)HTML 元素

3.3 CSS樣式表文件設(shè)計(jì)

CSS 層疊樣式表可以定義樣式屬性如文字大小、字體的顏色、背景顏色、元素位置等。CSS就好比對(duì)修建好的房屋進(jìn)行裝修，設(shè)計(jì)房屋的風(fēng)格樣式等。前面設(shè)計(jì)盒子內(nèi)容里面已經(jīng)介紹了CSS 樣式的3種引入方式，這里以HTML網(wǎng)頁(yè)鏈入式方式引入CSS樣式表。

首先在Dreamweaver 窗口新建一個(gè)空白CSS 樣式表文件，并保存在站點(diǎn)文件下。在HTML 網(wǎng)頁(yè)代碼窗口用

4個(gè)盒子分別應(yīng)用CSS樣式文字顏色屬性黑色，字號(hào)為40像素，文字居中對(duì)齊,設(shè)置盒子左浮動(dòng)。具體代碼如下：

盒子完整的大小包括內(nèi)邊距、邊框、內(nèi)容和外邊距。為了4 個(gè)盒子剛好在大盒子里面正常顯示，每個(gè)盒子里面兩個(gè)段落高度加上內(nèi)外邊距的總高度要?jiǎng)偤煤痛蠛凶觔ox高度一致，寬度也要一致，所以具體每個(gè)段落的寬高度像素設(shè)置如下。每個(gè)盒子第一個(gè)段落應(yīng)用CSS樣式屬性高度為40像素，寬度為100像素，行高為40像素，外邊距為1像素，鼠標(biāo)經(jīng)過是手指形狀。第二個(gè)段落寬度為408 像素，高度為260 像素，行高260像素可以使文字垂直居中。為了4個(gè)盒子里面的第二個(gè)段落均放在固定的位置,位置絕對(duì)定位，距離box 大盒子的左邊距離為0，上邊距離為42像素，第二個(gè)段落1內(nèi)容到4內(nèi)容這4個(gè)部分重疊在一起，默認(rèn)顯示紅色1內(nèi)容。具體代碼如下。

3.4 移入切換效果設(shè)計(jì)

接下來(lái)利用CSS 樣式屬性設(shè)置CSS 偽類狀態(tài)，鼠標(biāo)經(jīng)過每個(gè)盒子top 區(qū)域時(shí)，設(shè)置每個(gè)盒子bot 區(qū)域的CSS樣式層級(jí)z-index屬性設(shè)為9。z-index屬性設(shè)置是對(duì)元素的疊放順序進(jìn)行限定，擁有更高值的元素總是會(huì)放在屬性值較低的元素上面。未設(shè)置z-index 屬性時(shí)，瀏覽器默認(rèn)z-index屬性值是0，最初設(shè)置紅色1內(nèi)容z-index屬性為1，所以默認(rèn)狀態(tài)是顯示紅色1內(nèi)容，否則將顯示最后的綠色4內(nèi)容，因?yàn)闉g覽器解析HTML代碼是從上而下依次解析的，如果優(yōu)先級(jí)一樣，就會(huì)執(zhí)行最后編寫的代碼。最后設(shè)置鼠標(biāo)移入CSS偽類狀態(tài)z-index屬性為9，這時(shí)z-index屬性值9比默認(rèn)的紅色1內(nèi)容z-index屬性值1高，故移入會(huì)切換顯示效果，所有主流瀏覽器都支持z-index屬性[6-7]。具體代碼如下。

網(wǎng)頁(yè)移入切換效果設(shè)計(jì)的Dreamweaver 代碼窗口設(shè)計(jì)具體見圖2、圖3。

圖2 HTML網(wǎng)頁(yè)文件代碼

圖3 CSS樣式表文件

4 結(jié)語(yǔ)

當(dāng)前許多網(wǎng)站會(huì)用到更豐富多樣化的移入切換效果，實(shí)現(xiàn)方法也十分多樣化，可以用不同的代碼來(lái)編寫實(shí)現(xiàn)，也可以直接在設(shè)計(jì)窗口用鼠標(biāo)實(shí)現(xiàn)，但是對(duì)于喜歡代碼設(shè)計(jì)的網(wǎng)頁(yè)設(shè)計(jì)者，會(huì)覺得代碼編寫更簡(jiǎn)單易行。通過此例，筆者把一些復(fù)雜的思想和問題簡(jiǎn)單化，讓設(shè)計(jì)者能夠輕松理解并快速掌握怎樣進(jìn)行網(wǎng)頁(yè)移入切換效果設(shè)計(jì)，可以拓展應(yīng)用到更多樣化的網(wǎng)頁(yè)移入切換效果設(shè)計(jì)中。