《網(wǎng)頁(yè)設(shè)計(jì)課程設(shè)計(jì)報(bào)告.doc》由會(huì)員分享，可在線(xiàn)閱讀，更多相關(guān)《網(wǎng)頁(yè)設(shè)計(jì)課程設(shè)計(jì)報(bào)告.doc（11頁(yè)珍藏版）》請(qǐng)?jiān)谘b配圖網(wǎng)上搜索。
1、中華名吃網(wǎng)站設(shè)計(jì)與制作課程設(shè)計(jì)說(shuō)明書(shū) 軟件學(xué)院 2011級(jí)軟件技術(shù)1班112410111 張通課 程 設(shè) 計(jì) 報(bào) 告課程名稱(chēng): 網(wǎng) 頁(yè) 設(shè) 計(jì) 設(shè)計(jì)題目 my campus 院（系）: 電氣信息工程學(xué)院 專(zhuān)業(yè)年級(jí): 2010 級(jí) 學(xué) 號(hào): 10102 姓 名: 指導(dǎo)教師: 周 改 云 2012 年12 月 08日9目 錄my campus網(wǎng)站設(shè)計(jì)報(bào)告書(shū)11 作品簡(jiǎn)介12設(shè)計(jì)方案23 實(shí)現(xiàn)過(guò)程33.1站點(diǎn)的創(chuàng)建和結(jié)構(gòu)組織33.2庫(kù)項(xiàng)目的創(chuàng)建33.3樣式的創(chuàng)建33.4模板的創(chuàng)建和應(yīng)用43.5超級(jí)鏈接的創(chuàng)建63.6技術(shù)難點(diǎn)及解決方法74作品特色85參考文獻(xiàn)9My campus網(wǎng)站設(shè)計(jì)報(bào)告書(shū)1 作品簡(jiǎn)
2、介設(shè)計(jì)思想:我覺(jué)得我最熟悉的是我的校園，最?lèi)?ài)的也是我的校園，我在這里生活，在這里求學(xué)，我享受這里的一切。網(wǎng)站主題:本網(wǎng)站背景基本上沒(méi)有，我引用了好多照片為素材，以學(xué)院本有的綠色為主顏色，搭配有彩圖，動(dòng)漫圖片。本網(wǎng)頁(yè)多以廠(chǎng)字形為主，其左是圖片，右邊是文字介紹，這樣能使瀏覽者更能清楚的了解我的校園。2設(shè)計(jì)方案先對(duì)網(wǎng)站進(jìn)行需求分析，并根據(jù)需求確定網(wǎng)站的布局類(lèi)型和配色方案，寫(xiě)網(wǎng)站策劃書(shū)，畫(huà)出網(wǎng)站的鏈接結(jié)構(gòu)和層次結(jié)構(gòu)圖。本網(wǎng)站是根據(jù)廣大瀏覽者的心理需求而制定的，主要以廠(chǎng)子形和同字形為布局類(lèi)型，其配色主要以黃色為背景，適當(dāng)?shù)牡胤接旨恿思t色，白色等色彩。然后根據(jù)網(wǎng)站策劃收集相關(guān)素材，并根據(jù)需要精心整理或制作
3、素材；接著使用Dreamweaver創(chuàng)建站點(diǎn)，并組織好站點(diǎn)的結(jié)構(gòu)；緊跟著創(chuàng)建庫(kù)項(xiàng)目、模板和樣式，并將庫(kù)項(xiàng)目和樣式應(yīng)用于模板；使用模板創(chuàng)建首頁(yè)、一級(jí)頁(yè)面和二級(jí)頁(yè)面，創(chuàng)建合適的超級(jí)鏈接；添加合適的圖、文、多媒體或行為；檢查、完善網(wǎng)站；書(shū)寫(xiě)課程設(shè)計(jì)報(bào)告書(shū)。3 實(shí)現(xiàn)過(guò)程3.1站點(diǎn)的創(chuàng)建和結(jié)構(gòu)組織首先在我的電腦除C盤(pán)以外的盤(pán)區(qū)建立以英文命名的文件夾，然后在所建好好的文件夾下命名HTML、SOUND等文件夾。打開(kāi)DREAMWEAVER，在標(biāo)題欄點(diǎn)擊新建站點(diǎn)，取名站點(diǎn)名，選擇剛才已經(jīng)建好的文件夾。站點(diǎn)結(jié)構(gòu)圖如圖2：圖2 站點(diǎn)結(jié)構(gòu)3.2庫(kù)項(xiàng)目的創(chuàng)建我為了方便起見(jiàn)創(chuàng)建了一個(gè)庫(kù)，就是自己的學(xué)號(hào)和姓名，還有聯(lián)系站長(zhǎng)
4、鏈接。庫(kù)的作用在于重復(fù)使用和頻繁更新內(nèi)容。點(diǎn)擊資源面板，選擇庫(kù)項(xiàng)目，點(diǎn)擊下面的小加號(hào)添加新庫(kù)，再添加好的庫(kù)后編輯庫(kù)名，雙擊庫(kù)在里面輸入你想要的內(nèi)容，然后保存，則在庫(kù)被自動(dòng)保存在站點(diǎn)的library文件夾中。3.3樣式的創(chuàng)建我創(chuàng)建的樣式名稱(chēng)分別是：CLJ、texe、tupian等。clj屬于高級(jí)樣式，text和tupian均屬于類(lèi)樣式，具有調(diào)整字體和文字前面的圖片作用，美化網(wǎng)頁(yè)，給瀏覽者以視覺(jué)上的舒服，另外樣式具有批量生產(chǎn)，方便省時(shí)。clj的作用是鼠標(biāo)經(jīng)過(guò)，點(diǎn)擊后出現(xiàn)不同顏色，可以使瀏覽者看出哪些是已經(jīng)看過(guò)的那些還沒(méi)有看。Clj樣式的主要?jiǎng)?chuàng)建步驟是：在css面板中點(diǎn)擊css面板，點(diǎn)擊下面的的小號(hào)
5、，選擇高級(jí)按鈕，把clj存儲(chǔ)在common文件夾中，點(diǎn)擊link，出現(xiàn)一個(gè)對(duì)話(huà)框，調(diào)整字號(hào)，無(wú)線(xiàn)下劃線(xiàn)，選擇連接時(shí)的顏色為黑色，點(diǎn)擊確定，以同樣的方法創(chuàng)建hover和visit，鼠標(biāo)放到上面是白色，點(diǎn)擊后是藍(lán)色3.4模板的創(chuàng)建和應(yīng)用在實(shí)現(xiàn)過(guò)程中，本人創(chuàng)建了2個(gè)模板，模板的布局分別采用“廠(chǎng)”字形和“同”字形。模板創(chuàng)建的主要步驟：點(diǎn)擊資源面板，選擇模版，點(diǎn)擊下面的加號(hào)，創(chuàng)建模版，然后單擊標(biāo)題欄的文件，新建文件，點(diǎn)擊模版，選擇你所建的模版雙擊便可創(chuàng)建新的網(wǎng)頁(yè)。模板效果如圖3和圖4： 圖3 模板1效果圖 圖4 模板2效果圖電子郵件鏈接是輸入郵箱鏈接是輸入mailto：e-mail地址3.6技術(shù)難點(diǎn)及解
6、決方法實(shí)現(xiàn)過(guò)程中技術(shù)難點(diǎn)主要有一下幾個(gè)：難點(diǎn)1：一些特效代碼較難改寫(xiě)；解決方法是：查閱資料請(qǐng)教同學(xué)難點(diǎn)2：框架命名困難，解決方法是：翻閱課本，自己反復(fù)演示4作品特色我的網(wǎng)站特色主要有一下幾個(gè)：1：顯示隱藏層，點(diǎn)擊上面的圖片下面的內(nèi)容會(huì)改變.在山水中原頁(yè)面中2：框架在框架的頁(yè)面中打開(kāi)任意的網(wǎng)頁(yè)內(nèi)容會(huì)在主頁(yè)面打開(kāi)，該效果在在魅力中原頁(yè)面中3.圓柱圖片，點(diǎn)擊主頁(yè)上的圖片其圖片會(huì)自動(dòng)的向左或向右滾動(dòng)，這個(gè)效果在首頁(yè)頁(yè)面中4.層動(dòng)畫(huà)，圖片會(huì)自動(dòng)的滾動(dòng)，效果就是引人注目，這個(gè)效果在注冊(cè)會(huì)員頁(yè)面中。5.聯(lián)系站長(zhǎng),點(diǎn)擊郵箱的聯(lián)系方式，5參考文獻(xiàn)1 顏虹. 中文版Dreamweaver應(yīng)用基礎(chǔ)教程.上?？茖W(xué)普及出版社，20102 彭宗勤.Dreamweaver網(wǎng)頁(yè)制作使用教程.清華大學(xué)出啊版社，20083 黃愛(ài)娟DreamweaverCS5完全自學(xué)一本通電子
網(wǎng)頁(yè)設(shè)計(jì)課程設(shè)計(jì)報(bào)告.doc
