網(wǎng)頁設(shè)計(jì)與制作報(bào)告.doc

桂林理工大學(xué)課程設(shè)計(jì)說明（2015 2016 學(xué)年第一學(xué)期） 課程名稱 ： 網(wǎng)絡(luò)前端技術(shù)應(yīng)用 班 級(jí)： 網(wǎng)絡(luò)15-2 班_ 學(xué) 號(hào) ： _姓 名 ：_孫淑宇_ 成 績 ：_ 目錄第一章 網(wǎng)站主題說明21、主題說明22、網(wǎng)站設(shè)計(jì)的目的23、網(wǎng)站設(shè)計(jì)的思路24、站點(diǎn)地圖說明3第二章 使用技術(shù)及運(yùn)行環(huán)境的說明31、表格的使用32、層的使用43、運(yùn)用Photoshop工具44、CSS樣式45、熱點(diǎn)鏈接46、框架使用57、文字移動(dòng)效果5第三章 課程設(shè)計(jì)的心得與體會(huì)5第四章 主頁說明7第五章 分頁說明9第六章 版權(quán)說明11我美麗的家鄉(xiāng)-河南魯山一、網(wǎng)站主題說明1、 主題說明 網(wǎng)站主題：我美麗的家鄉(xiāng)河南魯山2、網(wǎng)站設(shè)計(jì)的目的 通過綜合實(shí)訓(xùn)進(jìn)一步鞏固，深化和加強(qiáng)我們的的理論知識(shí)與專業(yè)技能。（1）、進(jìn)一步熟悉和掌握網(wǎng)站建設(shè)的基本流程和技術(shù)規(guī)范；（2）、鞏固運(yùn)用Dreamweaver網(wǎng)頁制作軟件制作靜態(tài)網(wǎng)頁的知識(shí)；（3）、鞏固綜合運(yùn)用Dreamweaver獨(dú)立設(shè)計(jì)一個(gè)內(nèi)容完整、圖文并茂、技術(shù)運(yùn)用得當(dāng)?shù)木W(wǎng)站；（4）、具備獨(dú)立撰寫實(shí)訓(xùn)報(bào)告的基本能力；（5）、在網(wǎng)頁設(shè)計(jì)的實(shí)踐中培養(yǎng)分析問題、解決問題的能力，培養(yǎng)我們的創(chuàng)新能力和團(tuán)隊(duì)意識(shí)；（6）、培養(yǎng)我們理論聯(lián)系實(shí)際的工作作風(fēng)、嚴(yán)肅認(rèn)真的科學(xué)態(tài)度以及獨(dú)立工作的能力，樹立自信心；（7）、為今后從事網(wǎng)站開發(fā)、維護(hù)和管理奠定基礎(chǔ)。3、網(wǎng)站設(shè)計(jì)的思路 利用禪意花園的優(yōu)秀布局設(shè)計(jì)，再加入自己的想法和思路。以我美麗的家鄉(xiāng)河南魯山為主題，介紹了家鄉(xiāng)的人文，經(jīng)濟(jì)，美食。并插入音樂，給人以欣賞和聆聽的美的體驗(yàn)，以下為具體設(shè)計(jì)思路：1、站點(diǎn)規(guī)劃，搜集資料。確定網(wǎng)站主題內(nèi)容，規(guī)劃站點(diǎn)結(jié)構(gòu)，從網(wǎng)上搜索相關(guān)資料（圖片、文字等）。2、進(jìn)行主頁設(shè)計(jì)。構(gòu)思主頁布局，進(jìn)行主頁標(biāo)題圖片的設(shè)計(jì)，進(jìn)行主頁其余圖片的設(shè)計(jì)和頁面內(nèi)容的錄入，最后進(jìn)行主頁的整體優(yōu)化設(shè)計(jì)。3、圖片設(shè)計(jì)。主頁圖片設(shè)計(jì)和其余頁面動(dòng)畫設(shè)計(jì)，充分運(yùn)用所掌握技術(shù)，效果好。4、綜合優(yōu)化。鏈接正確、得當(dāng)。5、網(wǎng)站測(cè)試并遞交。在瀏覽器中對(duì)完成的網(wǎng)站逐頁打開測(cè)試，包括鏈接正確與否，頁面打開時(shí)間，圖片和動(dòng)畫不丟失。6、音樂的插入。正確插入音樂，調(diào)節(jié)音樂盒子大小。4、站點(diǎn)地圖說明主頁經(jīng)濟(jì)人文物產(chǎn)簡介地理歷史水美山美人更美二、使用技術(shù)及運(yùn)行環(huán)境的說明（1）、表格的使用設(shè)計(jì)網(wǎng)頁時(shí)，插入表格的目的一般是為了能在網(wǎng)頁中控制文字、圖片在網(wǎng)頁中的位置。利用表格可以實(shí)現(xiàn)不同的布局模式，而且可以保證當(dāng)瀏覽器改變頁面字體大小時(shí)保持頁面布局不變，這是很重要的，因?yàn)榫W(wǎng)頁設(shè)計(jì)者總是希望自己的作品能夠真實(shí)地展現(xiàn)在瀏覽者面前，而利用表格可以確保這種效果。（2）、層的使用 在這次網(wǎng)頁設(shè)計(jì)過程中，使用了大量層，因?yàn)樗`活好用，可以隨便拖動(dòng)，變大變小都很方便。圖層最大的特點(diǎn)是可以重疊，并且可以設(shè)置每個(gè)圖層是否可見，同時(shí)也能自定義各圖層之間的關(guān)系。（3） 、運(yùn)用Photoshop工具 圖片的插入和設(shè)置背景圖像是兩個(gè)不同的概念，當(dāng)然可以達(dá)到相同的效果，這是很基本的知識(shí)運(yùn)用，也用了很多次，但是當(dāng)圖像較小時(shí)在層中插入更方便些，因?yàn)樽鳛楸尘皶r(shí)圖片會(huì)重復(fù)出現(xiàn)造成混亂的局面，但圖片過小時(shí)，用層將之拉寬大就會(huì)使圖片變模糊、嚴(yán)重變形，不但沒能美化頁面反而帶來了負(fù)面影響，此時(shí)借助Photoshop工具來編輯圖片。文本的插入在層內(nèi)或框架內(nèi)完成較好，但不能設(shè)置為藝術(shù)字體，運(yùn)用Photoshop工具來輔助完成，其實(shí)很多地方都可以用到Photoshop工具特別是一些要表現(xiàn)獨(dú)特設(shè)計(jì)畫面的地方。（4）、CSS樣式 瀏覽網(wǎng)頁時(shí)，經(jīng)?？吹骄W(wǎng)頁的導(dǎo)航條是由文字制作的。這是因?yàn)槲淖峙c圖像相比，文字的下載速度更快一些。但加上連接的文字可能會(huì)改變它的顏色和樣式，和網(wǎng)頁整體不協(xié)調(diào)，所以這次網(wǎng)頁設(shè)計(jì)中利用了C樣式來定義文字的統(tǒng)一樣式，并與網(wǎng)頁融為一體，讓網(wǎng)頁看以來更統(tǒng)一。（5） 、熱點(diǎn)鏈接 在打開帶有圖片的網(wǎng)頁時(shí)，有時(shí)看到這樣的情況：當(dāng)鼠標(biāo)指向圖片的不同部位是，可以打開不同的超級(jí)鏈接，這種技術(shù)我們稱之為網(wǎng)頁圖片熱點(diǎn)鏈接。熱點(diǎn)鏈接經(jīng)常出現(xiàn)在一個(gè)網(wǎng)站的導(dǎo)航頁里，熱點(diǎn)鏈接不僅可以將整張圖片作為鏈接的連載體，還可以將圖片的某一部分設(shè)為鏈接，這要通過設(shè)置影像地圖來實(shí)現(xiàn)。熱點(diǎn)鏈接的原理就是利用HTML語言在圖片上定義形狀的區(qū)域，然后給這些區(qū)域加上鏈接，這些區(qū)域被稱做熱點(diǎn)。而在本次設(shè)計(jì)中，通過利用Dreamweaver中的熱區(qū)制作技術(shù)，實(shí)現(xiàn)創(chuàng)建熱點(diǎn)鏈接的效果。（6）、框架的使用 在網(wǎng)頁設(shè)計(jì)中，框架可以將窗口分割成幾個(gè)不同的小窗口，各個(gè)窗口包含不同的網(wǎng)頁，并且在替換窗口中的網(wǎng)頁文件時(shí)不會(huì)影響到其他窗口中的網(wǎng)頁?？蚣茏钇胀ǖ挠锰幘褪菍㈨撁鎰澐殖蔀橐粋€(gè)導(dǎo)航區(qū)和一個(gè)內(nèi)容區(qū)?？蚣芗且粋€(gè)使用框架定義網(wǎng)頁的文件?？蚣芗斜４媪岁P(guān)于頁面中的框架尺寸、位置以及每個(gè)框架中作為內(nèi)容載入的所有文件名得信息。用框架制成的網(wǎng)頁，如UntitledFrameset-9.html所示。（7）、文字移動(dòng)效果在設(shè)計(jì)網(wǎng)頁中插入代碼從右向左移，從而就可以實(shí)現(xiàn)文字從右向左移動(dòng)的效果了。三、課程設(shè)計(jì)心得與體會(huì)這次網(wǎng)頁設(shè)計(jì)實(shí)戰(zhàn)篇以介紹我的家鄉(xiāng)為主題的個(gè)人網(wǎng)站設(shè)計(jì)完成后，我收獲了很多，感觸也很深。 我最大的感受就是理論不用于實(shí)踐終究是理論，說得難聽點(diǎn)那根本就是紙上談兵，止于理論的學(xué)習(xí)，將來是沒多少成績的，有前途發(fā)展的話也必將是少了更為之錦上添花的一筆。 當(dāng)然也深刻認(rèn)識(shí)了一點(diǎn)，那就是我們所學(xué)的知識(shí)雖說是很基礎(chǔ)很根本，但沒有根基怎么能建好別墅呢?所以說基礎(chǔ)知識(shí)是很重要的，我們?cè)趯W(xué)習(xí)過程中不能小看而去忽略它，它是一筆財(cái)富，能引導(dǎo)我們看得更遠(yuǎn)飛得更高。 通過這次設(shè)計(jì)，我發(fā)現(xiàn)一個(gè)很普遍的問題：我們往往是眼高手低，學(xué)習(xí)這些知識(shí)時(shí)覺得它就是小菜一樁，但現(xiàn)在真的驗(yàn)證了“看花容易繡花難” 這句話，當(dāng)我們著手實(shí)踐時(shí)就不像我們想象中的那么簡單了，每一個(gè)細(xì)節(jié)都需要注意，稍有不慎頁面就在預(yù)覽中變了樣，因此更需要我們細(xì)心和耐心地去完成，也就兩個(gè)字概括認(rèn)真，只有認(rèn)真對(duì)待才會(huì)從骨子里學(xué)到東西，才學(xué)到心里去了。 我覺得這次確實(shí)是很有意義的一次檢測(cè)，本來自我感覺良好的，結(jié)果實(shí)戰(zhàn)時(shí)還是存在很多問題的，平時(shí)學(xué)起來覺得很輕松就以為掌握了所學(xué)知識(shí)，但現(xiàn)在都忘記很多細(xì)節(jié)是怎么樣的了，因此開始著手時(shí)有些障礙，但我下定決心把以前的實(shí)驗(yàn)內(nèi)容都溫習(xí)一遍，遇到不懂的就及時(shí)查資料，比如翻閱資料書，百度，也可以請(qǐng)教同學(xué)，一起討論，相互學(xué)習(xí)，于是最后也如魚得水，水到渠成，因此得到一個(gè)非常重要的結(jié)論只要自己想學(xué)只要自己有那份執(zhí)著與毅力，虛心的請(qǐng)教，勤于查閱相關(guān)資料就一定會(huì)有收獲的，真的當(dāng)今沒有什么知識(shí)是用不著的，在哪，哪里都是知識(shí)，只要自己持有高度的學(xué)習(xí)熱忱。當(dāng)然，我們?cè)趯W(xué)習(xí)過程中一定要及時(shí)鞏固、練習(xí)，掌握了也不一定熟悉，熟能生巧啊！我們應(yīng)該吸取這個(gè)教訓(xùn)，否則即使我們最終達(dá)到了目的，但我們走了很多彎路，而不是事半功倍的結(jié)果了。不過最終，經(jīng)過長久的堅(jiān)持與不斷的琢磨，看到了自己辛苦后的成果，盡管這還有很多不足，但看著它我心里充滿著喜悅，一分耕耘一分收獲，這永遠(yuǎn)是真理。 完成自己的作品后我也觀賞了其他同學(xué)的作品，對(duì)比起來，各有千秋，當(dāng)然能從其中發(fā)現(xiàn)很多值得我去學(xué)習(xí)的地方，比如說有的頁面布局很好，有的頁面內(nèi)容很充實(shí)，看起來很有感覺，也可以稱之為網(wǎng)站了。從對(duì)比中，我學(xué)到了很多，能讓我揚(yáng)長避短，吸取他人之精華，去除他人之糟粕。這次作業(yè)對(duì)于我來說不是一項(xiàng)任務(wù)而是一種享受，因?yàn)槲野l(fā)現(xiàn)我越來越喜歡它，不管別人說做這件事做到多晚做得有多累，我都沒覺得，甚至還越做越興奮。對(duì)于一個(gè)女生來說，特別是對(duì)于一個(gè)對(duì)電腦不感興趣的女生來說，我覺得這是我最大的收獲，很感謝老師能給我們這次機(jī)會(huì)，我想我應(yīng)該更加努力，抓住機(jī)會(huì)把它學(xué)通學(xué)精。四、主頁說明主頁主要從五個(gè)方面來介紹了家鄉(xiāng)，簡介、人文、經(jīng)濟(jì)、物產(chǎn)。其中人文又分山美和水美兩個(gè)部分。以下為主頁圖片和相關(guān)代碼：主頁圖片主頁相關(guān)代碼五、分頁說明分主要是從家鄉(xiāng)簡介的地理優(yōu)勢(shì)和悠久而歷史文化來介紹的，還有河南魯山的山美。例如：國家5A級(jí)景區(qū)堯山，4A級(jí)畫眉谷，3A級(jí)景區(qū)好運(yùn)谷等。水美。例如：龍?zhí)秿{，魯山森林灣水上樂園，通天河景區(qū)，亞龍灣水上樂園，魯山黃姑浴溫泉，還有冬季的天龍地滑雪世界。最后的物產(chǎn)介紹了具有代表性的全蟲、張良腰帶、猴頭菌、桐油、青花瓷等。還有美食：攬鍋菜、羊肉燴面、羊雜湯等。二級(jí)頁面相關(guān)圖片二級(jí)頁面部分代碼6、 版權(quán)說明所有素材圖片均為以我美麗的家鄉(xiāng)河南魯山為主題的網(wǎng)站所有，收集整理而來，素材圖片的版權(quán)歸 網(wǎng)絡(luò)15-2班作者：孫淑宇所有，本站僅做個(gè)人收藏展示，不提供高分辨率商業(yè)圖片。本站圖片素材只供大家欣賞和個(gè)人作品制作使用，嚴(yán)禁用作商業(yè)用途！如有侵犯您的版權(quán)，請(qǐng)來信告知，我將立即撤消！ （百度）所有提供下載的軟件和資源均為軟件或程序作者提供和網(wǎng)友推薦收集整理而來，僅供學(xué)習(xí)和研究使用。如有侵犯你的版權(quán)，請(qǐng)聯(lián)系我，本站將立即改正。(百度)不保證提供的下載資源的準(zhǔn)確性、安全性和完整性；下載后請(qǐng)自行檢查是否帶有病毒，同時(shí)百度也不承擔(dān)用戶