如何在網(wǎng)頁中制作圖片切換效果

龍敏敏

（衡陽廣播電視大學(xué)，　湖南　衡陽　421001）

?

如何在網(wǎng)頁中制作圖片切換效果

龍敏敏

（衡陽廣播電視大學(xué)，湖南衡陽421001）

摘要：幾乎所有的大中型網(wǎng)站中都在首頁中使用圖片切換效果。不斷自動切換的畫面，不但能增加網(wǎng)頁中的動態(tài)效果，使頁面顯得更加生動活潑，吸引大家的注意力，而且能大大節(jié)約頁面空間，能得在有限的空間中顯示更多的內(nèi)容。

關(guān)鍵詞：圖片切換；時間軸；行為

一、Dreamweaver網(wǎng)頁設(shè)計軟件的特點

Dreamweaver是國內(nèi)外普遍應(yīng)用的專用網(wǎng)頁設(shè)計軟件，其“所見即所得”的可視化網(wǎng)站功能，在網(wǎng)頁設(shè)計與制作領(lǐng)域中用戶最多、應(yīng)用最廣、功能最強大，它集網(wǎng)頁設(shè)計、網(wǎng)站開發(fā)和站點管理功能于一身，具有可視化、支持多平臺和跨瀏覽器的特性。作為一款優(yōu)秀的網(wǎng)頁設(shè)計軟件，Dreamweaver自身具有許多出色設(shè)計理念，例如行為、時間軸和資源等，可以讓用戶無需手寫代碼，就能輕松地創(chuàng)建各種動態(tài)效果，使頁面顯得更加生動，引人注目。

（一）靈活的編寫方式

Dreamweaver具有靈活編寫網(wǎng)頁的特點，將“設(shè)計”和“代碼”編輯器合二為一，在設(shè)計窗口中還精化了源代碼，能幫助用戶按工作需要定制自己的用戶界面。

（二）可視化編輯界面

Dreamweaver是一種所見即所得的HTML編輯器，可實現(xiàn)頁面元素的插入和生成。可視化編輯環(huán)境大量減少了代碼的編寫，同時亦保證了其專業(yè)性和兼容性。

二、網(wǎng)頁中的圖片切換

在大量的網(wǎng)站中都會看到這樣的效果：首頁中有3—10幅圖片自動循環(huán)不斷切換，在圖片下方有數(shù)字，當(dāng)切換到哪張圖片時，相應(yīng)的數(shù)字會突出顯示；當(dāng)鼠標(biāo)移到圖片上或數(shù)字上時停止變換，鼠標(biāo)移開時繼續(xù)切換；另外，在每張圖片上也可以添加鏈接。

對于精通代碼編寫的人員來說，可以編寫代碼如Javascript語言在頁面中實現(xiàn)這種效果，但是對于不會寫代碼的人如何實現(xiàn)呢?Dreamweaver通過時間軸和行為面板配合實現(xiàn)這種效果，其中：利用時間軸實現(xiàn)圖片自動切換；利用行為控制時間軸的停止和播放、轉(zhuǎn)到指定的幀、實現(xiàn)層屬性的改變，幫助編程能力差的用戶實現(xiàn)同樣的效果。

三、制作方法

這里，以制作3張圖片切換效果為例來說明，首先準(zhǔn)備好3張圖片。

（一）插入表格

在網(wǎng)頁中，插入一個400*300的2行1列的表格，可設(shè)置邊框為1，邊框顏色為藍色。

（二）添加圖片至?xí)r間軸

在上方單元格中插入第一張圖片，利用時間軸來實現(xiàn)圖片的自由變換，時間軸中的對象可以是層或圖像。將該圖片拖到時間軸Timeline1中，并將該動畫條延長至90幀。接著，分別在第30幀、第60幀處添加關(guān)鍵幀，并分別將第30幀和第60幀處的圖片源改為第二張圖片和第三張圖片，最后一幀即第90幀的圖片源保持第一張圖片不變，并選擇“自動播放”和“循環(huán)”復(fù)選框。這樣，3張圖片自由切換效果便實現(xiàn)了。

（三）添加圖片對應(yīng)的數(shù)字

在下方單元格中，插入一個1行3列右對齊的嵌入表格，在該嵌入表格的3個單元格中分別插入3個div標(biāo)簽，分別命名為v1，v2，v3，在這3個div標(biāo)簽中分別輸入1、2、3，這里使用div標(biāo)簽是為了后面對標(biāo)簽的背景顏色的改變以及標(biāo)簽中數(shù)字大小和顏色的改變?？梢允褂肔ayer層來實現(xiàn)將數(shù)字放在圖片的右下角處還是放在圖片的下方。

（四）鼠標(biāo)放在圖片上時停止切換

接下來，制作鼠標(biāo)移到圖片上時圖片停止變換，以便瀏覽者仔細觀看該圖片的內(nèi)容，鼠標(biāo)移開時繼續(xù)變換的效果。選擇圖片，添加行為“時間軸”—“停止時間軸”，選擇要停止的時間軸名稱Timeline1，確定；再添加行為“時間軸”—“播放時間軸”，選擇要播放的時間軸Timeline1后，確定。將這兩個動作的事件分別改為OnMouseOver、OnMouseOut，即當(dāng)鼠標(biāo)移上去時停止時間軸的播放，當(dāng)鼠標(biāo)移開時繼續(xù)時間軸的播放。

（五）鼠標(biāo)放在數(shù)字上時切換到相應(yīng)的圖片并停止切換

另外，還要設(shè)置鼠標(biāo)移到數(shù)字上時切換到相應(yīng)的圖片并停止時間軸。瀏覽者可以選擇任意一個數(shù)字，可以隨即切換到該數(shù)字對應(yīng)的圖片，非常方便，這樣用戶可以迅速進行切換，快速查看自己想要的內(nèi)容，不用等它一個一個按順序播放。

方法為：選擇數(shù)字“1”，添加行為“時間軸”—“轉(zhuǎn)到時間軸幀”，在對話框中選擇要轉(zhuǎn)到的時間軸Timeline1，“前往幀：”欄中填1，即表示轉(zhuǎn)到第1幀，也就是切換到第一幅圖片，確定，再將事件改為OnMouseOver，即鼠標(biāo)放上去時轉(zhuǎn)到第1幀；再添加行為“時間軸”—“停止時間軸”，選擇Timeline1，事件改為OnMouseOver，即鼠標(biāo)放上去在轉(zhuǎn)到第1幀的同時并且停止時間軸；添加行為“時間軸”—“播放時間軸”，選擇Timeline1，事件改為OmMouseOut，即鼠標(biāo)移開時繼續(xù)播放時間軸。按照相同的方法為數(shù)字“2”和“3”各自添加這3種行為，不同的是，在“轉(zhuǎn)到時間軸幀”的“前往幀：”欄中分別填30和60，表示轉(zhuǎn)到第30、60幀，即切換到第二幅和第三幅圖片。

（六）切換到圖片時相應(yīng)的數(shù)字突出顯示

至此，圖片的整體切換效果其實已經(jīng)出來了，最后再設(shè)置數(shù)字的顯示效果。原始狀態(tài)下所有數(shù)字的顏色為黑色（#000000），無背景，大小為12像素。無論圖片怎么變換，數(shù)字的屬性不會有任何改變，這樣用戶根本就不會知道當(dāng)前到底播放到第幾幅圖了，自己想要隨意切換當(dāng)然也不方便。這里，要設(shè)置當(dāng)自動切換到某個圖片時，相應(yīng)的數(shù)字要突出顯示，或者鼠標(biāo)移到某個數(shù)字上時，該數(shù)字也要突出顯示，比如數(shù)字顏色變?yōu)榘咨?，背景顏色變?yōu)榧t色，數(shù)字大小放大變?yōu)?4像素，其他數(shù)字則顯示為原始狀態(tài)。

實現(xiàn)的方法為：

在時間軸的行為欄的第1幀處單擊：

a)添加行為“改變屬性”，選擇對象類型“DIV”，命名對象選擇“v1”，屬性欄中選擇“style.fontsize”，值設(shè)為14（字號設(shè)為14）；

b)添加行為“改變屬性”，選擇對象類型“DIV”，命名對象選擇“v1”，屬性欄中選擇“style.color”，值設(shè)為#ffffff（顏色設(shè)為白色）；

c)添加行為“改變屬性”，選擇對象類型“DIV”，命名對象選擇“v1”，屬性欄中選擇“style. backgroundcolor”，值設(shè)為#ff0000（v1背景顏色設(shè)為紅色）；

d)添加行為“改變屬性”，選擇對象類型“DIV”，命名對象選擇“v2”，屬性欄中選擇“style.fontsize”，值設(shè)為12；

e)添加行為“改變屬性”，選擇對象類型“DIV”，命名對象選擇“v2”，屬性欄中選擇“style.color”，值設(shè)為#000000（文字顏色設(shè)為黑色）；

f)添加行為“改變屬性”，選擇對象類型“DIV”，命名對象選擇“v2”，屬性欄中選擇“style. backgroundcolor”，值設(shè)為transparent（v2背景顏色設(shè)為透明）；

g)添加行為“改變屬性”，選擇對象類型“DIV”，命名對象選擇“v3”，屬性欄中選擇“style.fontsize”，值設(shè)為12；

h)添加行為“改變屬性”，選擇對象類型“DIV”，命名對象選擇“v3”，屬性欄中選擇“style.color”，值設(shè)為#000000；

i)添加行為“改變屬性”，選擇對象類型“DIV”，命名對象選擇“v3”，屬性欄中選擇“style. backgroundcolor”，值設(shè)為transparent（v3背景顏色設(shè)為透明）。

這樣，在行為欄的第1幀處會出現(xiàn)“—”號，表示該處添加了行為。接下來，在時間軸的行為欄的第30幀和第60幀處分別添加第1幀處類似的行為，或者將第1幀處的行為拷貝到30幀和60幀處再進行適當(dāng)?shù)男薷募纯伞?/p>

四、結(jié)論

現(xiàn)在幾乎所有的中大型網(wǎng)站中都會用到圖片切換效果，實現(xiàn)的方法也是多種多樣，比如可以使用不同的腳本代碼來實現(xiàn)，鼠標(biāo)操作的方法自然也有很多種。本文介紹的這種方法雖然在步驟上有點繁瑣，產(chǎn)生的代碼會比較長，但是比較容易理解，對于即使沒有厚實編程功底的設(shè)計人員來說，操作起來也比較簡單。

參考文獻：

[1]藝博，張明真.《網(wǎng)頁設(shè)計與制作—Macromedia Dreamweaver 8》.北京：高等教育出版社,2007.

[2]王錦等.《Dreamweaver MX 2004中文版基礎(chǔ)教程》.北京：機械工業(yè)出版社,2005.

（責(zé)任編輯：魏樹峰）

中圖分類號：TP399

文獻標(biāo)識碼：A

[文章編號]1671－802X(2016)02－0061－03

收稿日期：＊2016－03－01

作者簡介：龍敏敏（1979-），女,湖南祁東人，講師，研究方向：計算機教育教學(xué)。E-mail:714773919@qq.com.

Picture Switching Effect in Webpage Design

LONG Min-min
(Hengyang Radio&TV University,Hengyang 421001,Hunan)

Abstract:Almost all the major websites use picture switching effects on their first page.The switching pictures can not only enhance the dynamic and lively effects but also attract viewers’attention.The pictures also save much page room and enable it to display more contents in the limited space.

Key words:picture switching;time axle;behavior