【正文】 20504班畢業(yè)設(shè)計(jì)國(guó)慶專題 商業(yè)網(wǎng)站設(shè)計(jì)（上海宜鑫） 361 羅海新畢業(yè)論文 20 參 考 文 獻(xiàn) 《網(wǎng)頁(yè)設(shè)計(jì)與制作》 ?????????????????? 清華大學(xué)出版社 《 javascript 實(shí)用教程》 ???????????????? 高等教育出版社 《網(wǎng)站建設(shè)與重構(gòu)案例分析》 ?????????????? 高等 教育出版社 《 ASP 動(dòng)態(tài)網(wǎng)站開發(fā)教程（第二版）》 ??????????? 清華大學(xué)出版社 《電子商務(wù)網(wǎng)站建設(shè)教程》??????????????? 清華大學(xué)出版社 20504班畢業(yè)設(shè)計(jì)國(guó)慶專題 商業(yè)網(wǎng)站設(shè)計(jì)（上海宜鑫） 361 羅海新畢業(yè)論文 21 老師評(píng)語(yǔ)及評(píng)分 指導(dǎo)教師的評(píng)語(yǔ)及評(píng)分（占總成績(jī)的 50％） 評(píng)閱教師的評(píng)語(yǔ)及評(píng)分（占總成績(jī)的 20％） 答辯小組的通過意見及評(píng)分（占總成績(jī)的 30％） 。 感謝各小組的同學(xué)大力幫助和協(xié)作，感謝他們?cè)诋厴I(yè)設(shè)計(jì)時(shí)給我的幫助和支持，感謝他們?cè)敢夂臀也⒓缱鲬?zhàn)一同完成畢業(yè)設(shè)計(jì)，感謝，再次感謝。 其次，我要感謝和我一起做畢業(yè)設(shè)計(jì)的同學(xué)，然后，我還要感謝大學(xué)三年來(lái)所有的老師，為我們打下電子商務(wù)專業(yè)知識(shí)的基礎(chǔ)；同時(shí)我還要 感謝所有的同學(xué)們，正是因?yàn)橛辛四銈兊闹С趾凸膭?lì)。我的設(shè)計(jì)較為復(fù)雜煩瑣，但是 朱希偉和范華淮 老師仍然細(xì)心地糾正設(shè)計(jì)中的錯(cuò)誤。 在這里，首先我要感謝我的畢業(yè)設(shè)計(jì)指導(dǎo)老師 朱希偉、范華淮 老師。 我想 ,不管以后從事什么工作 ,這種經(jīng)驗(yàn)是永遠(yuǎn)寶貴的。并按照要求完成畢業(yè)答辯工作，在這期間寫好畢業(yè)論文至少要 5000 字以上（需要源代碼的地方，必須寫明白源代碼，以及為什么要這么 做）。一步步地做下去之后，你會(huì)發(fā)現(xiàn)要做出來(lái)并不難，只不過每每做一會(huì)兒會(huì)發(fā)現(xiàn)一處錯(cuò)誤要修改，就這樣在不斷的修改調(diào)試，再修改再調(diào)試。 第 4 周：實(shí)以前的三步都是為這一步作的鋪墊。而后進(jìn)行頁(yè)面切割、優(yōu)化、導(dǎo)出網(wǎng)頁(yè)在用 CSS 樣式表來(lái)美化頁(yè)面，使用DHTML 或者 javascript、 vbscript 來(lái)實(shí)現(xiàn)客戶端的動(dòng)態(tài)效果。 第 3 周：通過上面的過程，已經(jīng)積累了不少資料，對(duì)所選的題目也大概有了一些了解，這一步就是在這樣一個(gè)基礎(chǔ)上，綜合已有的資料來(lái)更透徹的分析題目?？傊?，不管通 過哪種方式查的資料都是有利用價(jià)值的，要一一記錄下來(lái)以備后用。 20504班畢業(yè)設(shè)計(jì)國(guó)慶專題 商業(yè)網(wǎng)站設(shè)計(jì)（上海宜鑫） 361 羅海新畢業(yè)論文 19 第 2 周：題目確定后就是找資料了。好比走路，這開始的第一步是具有決定意義的，第一步邁向何方，需要慎重考慮。 第 1 周：明確畢業(yè)設(shè)計(jì)任務(wù)，進(jìn)行系統(tǒng)調(diào)研及文獻(xiàn)資料的檢索與閱讀，制定實(shí)習(xí)與工作計(jì)劃，提出課題總體設(shè)計(jì)方案；指導(dǎo)教師審查開題報(bào)告，然后進(jìn)行系統(tǒng)分析，完成畢業(yè)設(shè)計(jì)詳細(xì)設(shè)計(jì)方案。畢業(yè)設(shè)計(jì)不僅是對(duì)前面所學(xué)知識(shí)的一種檢驗(yàn)，而且也是對(duì)自己能力的一種提高。 時(shí)至今日，將近一個(gè)月的畢業(yè)設(shè)計(jì)終于可以畫上一個(gè)句號(hào)了，但是現(xiàn)在回想起來(lái)做畢業(yè)設(shè)計(jì)的整個(gè)過程，頗有心得，其中有苦也有甜，不過樂趣盡在其中。這次做畢業(yè)設(shè)計(jì)就不一樣了 ,是把以前所學(xué)的各種知識(shí)加以綜合地應(yīng)用 ,而且內(nèi)容多而復(fù)雜 ,有一定的難度。 同時(shí)通過了本次的畢業(yè)設(shè)計(jì)，也使得我感覺自己對(duì)所學(xué)知識(shí)的重要性，也發(fā)現(xiàn)自己學(xué)的知識(shí)在綜合運(yùn)用能力還差得遠(yuǎn)，但總體在完成這次上也有了一點(diǎn)進(jìn)步，使所學(xué)的知識(shí)和實(shí)踐知識(shí)融合在一起，也在處理問題上有了提高，同時(shí)也鞏固了所學(xué)的知識(shí)和技能。在剛拿到這個(gè)課題時(shí)，的確心里很沒底，看那些商業(yè)網(wǎng)站的設(shè)計(jì)方案都不知從和入手，在指導(dǎo)老師的指導(dǎo)下，經(jīng)過幾天的認(rèn)真分析和查有關(guān)資料才有了點(diǎn)頭緒 .此次畢業(yè)設(shè)計(jì)是我們所許的理論知識(shí)和實(shí)踐知識(shí)的一次實(shí)地驗(yàn)證，培養(yǎng)我們綜合運(yùn) 用已學(xué)理論知識(shí)和技能、分析問題、解決問題的能力。對(duì)原本不是很熟悉的 Photoshop，現(xiàn)在更進(jìn)一步的了解。 通過這次商業(yè)網(wǎng)站畢業(yè)設(shè)計(jì)使我掌握了商業(yè)網(wǎng)站 建設(shè)的基本方法和思路，為今后的學(xué)習(xí)和工作打下了一定的基礎(chǔ)，在畢業(yè)設(shè)計(jì)過程中的總結(jié)如下：最后，通過這次畢業(yè)設(shè)計(jì)使我了解了商業(yè)網(wǎng)站論文的寫作規(guī)范，熟悉了網(wǎng)站建設(shè)和圖片處理等相關(guān)軟件的應(yīng)用。 全部完成以后利用 Dreamweaver 自帶的 FTP 工具或者 FTP 客戶端軟件，將做好的整站傳到服務(wù)器上進(jìn)行測(cè)試，查看頁(yè)面的鏈接、有無(wú)錯(cuò)別字以及網(wǎng)頁(yè)的下載速度測(cè)試，涉及到數(shù)據(jù)庫(kù)的部分，要保證數(shù)據(jù)的安全。 可以先利用 Dreamweaver 自帶的測(cè)試功能對(duì)網(wǎng)站進(jìn)行內(nèi)部測(cè)試來(lái)發(fā)現(xiàn)和修改基本的問題，以保證整個(gè)網(wǎng)站的所有網(wǎng)頁(yè)均正確無(wú)誤，否則進(jìn)行遠(yuǎn)程調(diào)試 會(huì)比較復(fù)雜。 img name=index_03 src=images/ width=121 height=26 border=0 alt=… 成長(zhǎng)之路 …/a/td !表明 成長(zhǎng)之路 導(dǎo)航翻轉(zhuǎn)效果 ???????????? td img src=images/ width=86 height=26 alt=/td ???????????? 20504班畢業(yè)設(shè)計(jì)國(guó)慶專題 商業(yè)網(wǎng)站設(shè)計(jì)（上海宜鑫） 361 羅海新畢業(yè)論文 17 tr !表明 表格標(biāo)記 td height=75 colspan=9 align=left valign=top bgcolor=CB0F03 id=textpaibanp br !表明 換行標(biāo)記 p文本內(nèi)容 /p !表明 文本分段 p align=right 資 料 來(lái) 源 ： 宜 鑫 第 一 小 組 編 輯 ： a href= target=_blankevoy/a 圖片整理： a href= target=_blankxiaozhu/a 071013/p/td /tr !表明 表格結(jié)束標(biāo)記 ?????????? tr td height=32 colspan=2blockquote pspan class=norepeat【版權(quán)所有】：上海宜鑫實(shí)業(yè)股份有限責(zé)任公司 Copyrigth169。)。, 39。 ???? onmouseup=changeImages(39。)。, 39。!表明文檔主體開始 ,body/body之間的內(nèi)容顯示在瀏覽器正文中 ! ImageReady Slices () !表明導(dǎo)航翻轉(zhuǎn)效果 table id=Table_01 width=1002 height=635 border=0 cellpadding=0 cellspacing=0 align=center ???????? a href= !表明有鏈接到頁(yè)面 — onmouseover=changeImages(39。 fontweight: bold。 color: FEDA91。 !表明文本 css樣式字體大小為 12 號(hào)字 padding: 15px。 !表明文本 css 樣式行間距為 25 像數(shù) fontfamily: Times New Roman, Times, serif。 } textpaiban { backgroundrepeat: norepeat。 !表明聯(lián)系我們導(dǎo)航翻轉(zhuǎn)效果 preloadFlag = true。 function preloadImages() { if () { index_03_Over = newImage(images/)。 return rslt。 charset=gb2312 ! ImageReady Preload Script () !表明 javascript 腳本 script type=text/javascript ! function newImage(arg) { if () { rslt = new Image()。特別是顏色和字體。同時(shí)要注意 CSS 樣式在排版時(shí)的靈活應(yīng)用方法。包括排 版、文字樣式設(shè)置、導(dǎo)航翻轉(zhuǎn)（動(dòng)畫導(dǎo)航可以在 Flash 里完成，或者 photoshop 里完成）。 （優(yōu)化的原則：保持圖像質(zhì)量盡可能清晰的同時(shí)，減小文件的容量） （否則可能會(huì)出現(xiàn)顏色的不連續(xù)） JPG或者 PNG格式，因?yàn)橹挥?GIF格式才能存儲(chǔ)動(dòng)畫（當(dāng)然在 Flash里做動(dòng)畫除外） 下圖為在 Photoshop 中給切片或者圖像映像制作翻轉(zhuǎn)圖像的過程： 下圖為在 Photoshop 中給切片或者圖像映像制作動(dòng)畫翻轉(zhuǎn)的過程： （注：靜態(tài)翻轉(zhuǎn)圖像和動(dòng)畫形式翻轉(zhuǎn)圖像的制作都是由圖層復(fù)合所完成的，首先給按鈕制作兩種樣式，當(dāng)正常情況下顯示第一種樣式，當(dāng)鼠標(biāo)放上去的時(shí)候，通過圖層的20504班畢業(yè)設(shè)計(jì)國(guó)慶專題 商業(yè)網(wǎng)站設(shè)計(jì)（上海宜鑫） 361 羅海新畢業(yè)論文 13 顯示和隱藏來(lái)顯示第二種按鈕樣式效果【如果是動(dòng)畫翻轉(zhuǎn)圖像最好在 Flash 軟件里完成】）。 切割的方法和技巧 ： （防止下載的時(shí)候只下載一幅圖的一部分，這樣就失去了圖的意義） ，把背景切除，用背景色填充 ，就切下一像素存為 GIF圖像，利用背景平鋪形成漸變 20504班畢業(yè)設(shè)計(jì)國(guó)慶專題 商業(yè)網(wǎng)站設(shè)計(jì)（上海宜鑫） 361 羅海新畢業(yè)論文 12 ，參考線放在色彩的消失的邊緣，沿著參考線進(jìn)行切割相對(duì)比較精確。如果網(wǎng)頁(yè)設(shè)計(jì)者的技術(shù)很精湛，但沒有靈活的創(chuàng)作能力，作品就會(huì)顯得很呆板；在制作網(wǎng)頁(yè)過 程中一定要注意技術(shù)與藝術(shù)的組合。 LOGO 設(shè)計(jì) +裝飾（突出喜慶的氣氛）