網(wǎng)頁設計與制作報告.doc

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