【文章內容簡介】 片動態(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五、網站測試（一）網站鏈接測試網站完成之后，開始網站的鏈接測試。從首頁開始，測試每一個鏈接，確保沒有一個錯誤鏈接，沒有一個空鏈接。（二）頁面檢查 檢查每一張頁面，在二級子頁中，為保證三次點擊能到達指定頁面，在文章上方加入頁面導航條，方便大眾瀏覽網頁。（如圖15）圖15 二級頁面導航（三）代碼檢查 檢查每一張頁面的代碼，同時檢查外部樣式CSS代碼，刪去不需要的代碼，整合類似代碼，確保網站中沒有多余的代碼。給每一個圖片加上alt屬性，便于搜索引擎搜索到圖片文件。（四）站點文件夾精簡 完成所有網站檢查后，開始文件夾的精簡，刪除沒有用到的文字圖片等內容。使站點文件夾中不存在不必要的文件。六、總結經過3個月的制作，我總算完成了畢業(yè)設計——精致膳食養(yǎng)身網。當初毅然決定選擇網站設計作為畢業(yè)設計，原因是因為大一時期我曾經做過網站，初步了解了制作網站的大致流程。但在跟導師溝通過后，才發(fā)現(xiàn)原來這次的網站需要運用DIV+CSS的開發(fā)技術，而不是我所熟悉的table布局，從那時就一直很擔心，從沒聽過DIV和CSS的我，能夠做出讓老師滿意的畢業(yè)設計嗎？暑假來臨，在放假之前我已經同老師確定了精致膳食養(yǎng)身這一主題，但我并沒有立即開始搜集資料開始網站的制作，因為當時，我甚至還沒搞清楚DIV是什么，CSS是什么！趁著放假，我去了書店，買回一本關于DIV+CSS網頁布局的書?？墒菃栴}又來了，我不能明白書里的內容到底是什么。雖然很想放棄，但是不行，只能繼續(xù)研究。在這期間，我不止看了買的書，也經常在網上查看一些別人做的網站，當然，也通過向老師提問并獲得了解答。功夫不負有心人，我總算能大概了解，如何運用DIV+CSS布局一個完整的網站。終于，在完成了老師要求的開題報告后，我開始了網站資料的搜集。我在網絡上找到了一些很棒的關于養(yǎng)身的網站，那些網站的內容都十分全面，給了我很好的借鑒機會，讓我補充了很多關于養(yǎng)身的知識。資料收集完畢，就要開始本次畢業(yè)設計的重頭戲了——網站制作。首先，我先在Photoshop里設計出了我的網站首頁，在色彩方面，我選擇了清新自然的綠色為主色調，顏色明快柔和，界面美觀簡潔。清新的綠色也能讓瀏覽者產生視覺上的放松；漢書文字設計出的logo也成功的讓我的網頁別具一格；導航條加上我所中意的懸停效果，也能使導航具有動態(tài)的效果。網站主要內容的設計是讓我花了一些時間的，我希望能在首頁中凸顯我的網站內容，因此，在首頁我放置了四個模塊，體現(xiàn)了每個子頁面最新更新的內容，若以后我將網站設計為動網，首頁的內容也可及時更新。設計稿完成后，通過老師的指點修改后，我正式開始了網站的制作。這次我依然使用了Macromedia Dreamweaver 8這個軟件，在網頁制作上，這個軟件還是十分方便的。由于前一段時間的學習，制作網頁顯得不是那么的困難，很快，我便做好了網站的首頁，在IE8瀏覽器里的效果也沒有出現(xiàn)偏差。但我也不敢大意，以前老師說過，網站在不同的瀏覽器里的效果很有可能出現(xiàn)偏差，讓我們一定注意，因此我也下載了360等其他幾個瀏覽器，瀏覽之后的結果——出現(xiàn)偏差了！在ie6里首頁上的兩個圖片之間出現(xiàn)了問題。剛遇到這一類型的問題我也不知道怎么解決，只能向老師請教。經過老師的指點，說是要將圖片的CSS屬性設置為img{display:block。}，加上這個屬性后再去瀏覽網頁，果然，問題解決了。之后的子頁制作過程中，我依然遇到了許許多多的小問題，但在網上搜尋答案及詢問老師后，都能得到答案，終于在十月中旬完成了網站的設計。制作了精致膳食養(yǎng)身網給了我很大的收獲，不僅學習了很多關于網頁的專業(yè)知識，也再次認識到學習的重要性及團結協(xié)作的重要性，因為在網站制作過程中，不僅僅是老師，同學也給予了我很大的幫助。在此，鄭重感謝老師以及同學們。這次的網站制作，也將是我難忘的經歷。致 謝 在本次論文設計過程中，芮文艷老師對該畢業(yè)設計從選題，構思到最后定稿的各個環(huán)節(jié)給予細心指引