【文章內(nèi)容簡介】 片動態(tài)切換及點擊切換的效果，能起到宣傳推廣以及吸引大眾眼球的作用。（如圖14）圖14 特效圖片Javascript語言：script type=text/javascript src=/scriptSCRIPT src= type=text/javascript/SCRIPTSCRIPT type=text/javascript var _c = _h = 0。$(document).ready(function () { $(39。play li39。).click(function(){ var i = $(this).attr(39。alt39。) 1。 clearInterval(_h)。 _c = i。 //play()。 change(i)。 }) $(pic img).hover(function(){clearInterval(_h)}, function(){play()})。 play()。})function play(){ _h = setInterval(auto(), 8000)。 }function change(i){ $(39。play li39。).css(39。backgroundcolor39。,39。00000039。).eq(i).css(39。backgroundcolor39。,39。FF300039。).blur()。 $(pic img).fadeOut(39。slow39。).eq(i).fadeIn(39。slow39。)。}function auto(){ _c = _c 6 ? 0 : _c + 1。 change(_c)。}/SCRIPTstyle type=text/css.img_switch { WIDTH:400px。 HEIGHT: 300px。 overflow:hidden。 margintop: 0。 marginright: auto。 marginbottom: 0。 marginleft: auto。}.img_switch_content { HEIGHT: 300px。 position:relative。 width: 400px。 float: left。}.img_switch_text {width: 262px。position: absolute。zindex:5。 bottom:5px。left:12px。HEIGHT: 15px。 zindex:10000 !important}.number_nav {DISPLAY: inline。FLOAT: left。}.number_nav UL {font:12px Arial, Helvetica, sansserif。padding: 0px。MARGIN: 0px。LISTSTYLETYPE: none。color:fff。}.number_nav UL LI {float: left。fontweight: bold。background: 000。float: left。marginright: 8px。width: 23px。cursor: pointer。lineheight: 17px。height: 17px。textalign: center。filter:alpha(opacity=75)。mozopacity:。opacity: 。}pic {OVERFLOW: hidden}/style五、網(wǎng)站測試（一）網(wǎng)站鏈接測試網(wǎng)站完成之后，開始網(wǎng)站的鏈接測試。從首頁開始，測試每一個鏈接，確保沒有一個錯誤鏈接，沒有一個空鏈接。（二）頁面檢查 檢查每一張頁面，在二級子頁中，為保證三次點擊能到達指定頁面，在文章上方加入頁面導(dǎo)航條，方便大眾瀏覽網(wǎng)頁。（如圖15）圖15 二級頁面導(dǎo)航（三）代碼檢查 檢查每一張頁面的代碼，同時檢查外部樣式CSS代碼，刪去不需要的代碼，整合類似代碼，確保網(wǎng)站中沒有多余的代碼。給每一個圖片加上alt屬性，便于搜索引擎搜索到圖片文件。（四）站點文件夾精簡 完成所有網(wǎng)站檢查后，開始文件夾的精簡，刪除沒有用到的文字圖片等內(nèi)容。使站點文件夾中不存在不必要的文件。六、總結(jié)經(jīng)過3個月的制作，我總算完成了畢業(yè)設(shè)計——精致膳食養(yǎng)身網(wǎng)。當(dāng)初毅然決定選擇網(wǎng)站設(shè)計作為畢業(yè)設(shè)計，原因是因為大一時期我曾經(jīng)做過網(wǎng)站，初步了解了制作網(wǎng)站的大致流程。但在跟導(dǎo)師溝通過后，才發(fā)現(xiàn)原來這次的網(wǎng)站需要運用DIV+CSS的開發(fā)技術(shù)，而不是我所熟悉的table布局，從那時就一直很擔(dān)心，從沒聽過DIV和CSS的我，能夠做出讓老師滿意的畢業(yè)設(shè)計嗎？暑假來臨，在放假之前我已經(jīng)同老師確定了精致膳食養(yǎng)身這一主題，但我并沒有立即開始搜集資料開始網(wǎng)站的制作，因為當(dāng)時，我甚至還沒搞清楚DIV是什么，CSS是什么！趁著放假，我去了書店，買回一本關(guān)于DIV+CSS網(wǎng)頁布局的書。可是問題又來了，我不能明白書里的內(nèi)容到底是什么。雖然很想放棄，但是不行，只能繼續(xù)研究。在這期間，我不止看了買的書，也經(jīng)常在網(wǎng)上查看一些別人做的網(wǎng)站，當(dāng)然，也通過向老師提問并獲得了解答。功夫不負(fù)有心人，我總算能大概了解，如何運用DIV+CSS布局一個完整的網(wǎng)站。終于，在完成了老師要求的開題報告后，我開始了網(wǎng)站資料的搜集。我在網(wǎng)絡(luò)上找到了一些很棒的關(guān)于養(yǎng)身的網(wǎng)站，那些網(wǎng)站的內(nèi)容都十分全面，給了我很好的借鑒機會，讓我補充了很多關(guān)于養(yǎng)身的知識。資料收集完畢，就要開始本次畢業(yè)設(shè)計的重頭戲了——網(wǎng)站制作。首先，我先在Photoshop里設(shè)計出了我的網(wǎng)站首頁，在色彩方面，我選擇了清新自然的綠色為主色調(diào)，顏色明快柔和，界面美觀簡潔。清新的綠色也能讓瀏覽者產(chǎn)生視覺上的放松；漢書文字設(shè)計出的logo也成功的讓我的網(wǎng)頁別具一格；導(dǎo)航條加上我所中意的懸停效果，也能使導(dǎo)航具有動態(tài)的效果。網(wǎng)站主要內(nèi)容的設(shè)計是讓我花了一些時間的，我希望能在首頁中凸顯我的網(wǎng)站內(nèi)容，因此，在首頁我放置了四個模塊，體現(xiàn)了每個子頁面最新更新的內(nèi)容，若以后我將網(wǎng)站設(shè)計為動網(wǎng)，首頁的內(nèi)容也可及時更新。設(shè)計稿完成后，通過老師的指點修改后，我正式開始了網(wǎng)站的制作。這次我依然使用了Macromedia Dreamweaver 8這個軟件，在網(wǎng)頁制作上，這個軟件還是十分方便的。由于前一段時間的學(xué)習(xí)，制作網(wǎng)頁顯得不是那么的困難，很快，我便做好了網(wǎng)站的首頁，在IE8瀏覽器里的效果也沒有出現(xiàn)偏差。但我也不敢大意，以前老師說過，網(wǎng)站在不同的瀏覽器里的效果很有可能出現(xiàn)偏差，讓我們一定注意，因此我也下載了360等其他幾個瀏覽器，瀏覽之后的結(jié)果——出現(xiàn)偏差了！在ie6里首頁上的兩個圖片之間出現(xiàn)了問題。剛遇到這一類型的問題我也不知道怎么解決，只能向老師請教。經(jīng)過老師的指點，說是要將圖片的CSS屬性設(shè)置為img{display:block。}，加上這個屬性后再去瀏覽網(wǎng)頁，果然，問題解決了。之后的子頁制作過程中，我依然遇到了許許多多的小問題，但在網(wǎng)上搜尋答案及詢問老師后，都能得到答案，終于在十月中旬完成了網(wǎng)站的設(shè)計。制作了精致膳食養(yǎng)身網(wǎng)給了我很大的收獲，不僅學(xué)習(xí)了很多關(guān)于網(wǎng)頁的專業(yè)知識，也再次認(rèn)識到學(xué)習(xí)的重要性及團結(jié)協(xié)作的重要性，因為在網(wǎng)站制作過程中，不僅僅是老師，同學(xué)也給予了我很大的幫助。在此，鄭重感謝老師以及同學(xué)們。這次的網(wǎng)站制作，也將是我難忘的經(jīng)歷。致 謝 在本次論文設(shè)計過程中，芮文艷老師對該畢業(yè)設(shè)計從選題，構(gòu)思到最后定稿的各個環(huán)節(jié)給予細(xì)心指引