龍敏敏

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

?

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

龍敏敏

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

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

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

一、Dreamweaver網(wǎng)頁(yè)設(shè)計(jì)軟件的特點(diǎn)

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

（一）靈活的編寫(xiě)方式

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

（二）可視化編輯界面

Dreamweaver是一種所見(jiàn)即所得的HTML編輯器，可實(shí)現(xiàn)頁(yè)面元素的插入和生成?？梢暬庉嫮h(huán)境大量減少了代碼的編寫(xiě)，同時(shí)亦保證了其專業(yè)性和兼容性。

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

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

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

三、制作方法

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

（一）插入表格

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

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

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

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

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

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

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

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

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

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

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

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

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

在時(shí)間軸的行為欄的第1幀處單擊：

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

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

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

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

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

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

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

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

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

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

四、結(jié)論

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

參考文獻(xiàn)：

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

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

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

中圖分類號(hào)：TP399

文獻(xiàn)標(biāo)識(shí)碼：A

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

收稿日期：＊2016－03－01

作者簡(jiǎn)介：龍敏敏（1979-），女,湖南祁東人，講師，研究方向：計(jì)算機(jī)教育教學(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