存檔資料 成績：

目錄
1.1課程設計的要求 1.利用網頁制作軟件Dreamweaver制作出一個家鄉網站 2.家鄉網站設計至少含有三個子網頁 3.每個子網頁中都應包含導航欄，版權信息等 4.美食網站中應存在站內搜索，和登錄窗口 2
1.2 課程設計的目的 2
第二章 網站系統分析 4
2.1首頁分析 4
2.2子網頁分析 5
井岡山簡介 5
行政區劃 5
自然資源 5
地理氣候 5
第三章 網頁模塊結構設計 10
1.導航欄模塊： 10
2.站內搜索模塊: 14
3.登錄界面模塊： 17
4.項目列表模塊： 21
5.片展示模塊： 26
第四章 網頁實現設計 30
1.首頁設計代碼及預覽效果: 30
2.家鄉簡介子網頁設計代碼: 32
3.革命歷史子網頁設計代碼: 36
4.旅游在線子網頁設計代碼： 37
第五章 課程設計心得 37
第六章 參考文獻（資料） 37
致 謝 38
第一章 課程設計要求及目的
1.1課程設計的要求
1.利用網頁制作軟件Dreamweaver制作出一個家鄉網站 2.家鄉網站設計至少含有三個子網頁 3.每個子網頁中都應包含導航欄，版權信息等 4.美食網站中應存在站內搜索，和登錄窗口

1.2 課程設計的目的
1．通過綜合實訓進一步鞏固、深化和擴展學生的理論知識。

（1） 掌握規劃網站的內容結構、目錄結構、鏈接結構的方法。

（2） 熟練掌握網頁制作軟件Dreamweaver的基本操作；

2．訓練和培養學生獲取信息和處理信息的能力，充分培養和提高學生的動手能力，學會通過網站、書籍、素材光盤等方式收集所需的文字資料、圖像資料、flash動畫和網頁特效等。

3．培養學生運用所學的理論知識和技能解決網站開發過程中所遇到的實際問題的能力及其基本工作素質。

4．培養學生理論聯系實際的工作作風、嚴肅認真的科學態度以及獨立工作的能力

第二章 網站系統分析
2.1首頁分析

從上述結構圖中可出：主頁是非常豐富的，內容比較多。在主頁也有二級導欄，總體以紅色背景為主，符合家鄉的特點。
同時，它有兩大部分組成。一、頁頭頁腳的設計；主要完成頁面的結構分析，搭建框架切割效果圖以及頁頭頁腳的制作。然后整出了頁面整體的效果。二、導航欄側邊欄設計，主要是在第一步的基礎上，然后繼續完成網站導航欄側邊欄的設計。并且增加了一個JS文件。值得注意的一個細節是，許多板塊之間基本上是無縫對接。還有一個比較普遍的一個思想是鼠標劃過和停留超鏈接的時候，它的樣式是發生了改變。

2.2子網頁分析
（一）井岡山簡介子網頁

從上述結構圖中可出：井岡山簡介樣式也不是過于簡單，它有二級縱向導航欄，背景圖片，背景色的改變以及版權信息等。
從總體上來看，模版的結構還是很清晰的。

（二）革命歷史子網頁

從上述結構圖中可出：它有二級縱向導航欄，背景圖片，背景色的改變以及版權信息等。
二級縱向導航欄，背景色和背景圖片之間的融合度較高。

（三）旅游在線子網頁

從上述結構圖中可出：它有二級縱向導航欄，表格，按鈕，下拉列表，特殊符號，超鏈接,背景圖片，背景色的改變以及版權信息等。
它有一部分是參考了井岡山市人民政府網，形式也是非常的豐富。其中用CSS3美化的表格很有特點

(四)網站登錄子網頁

從上述結構圖中可出：它有圖片,按鈕,邊框，背景圖片，背景色的改變以及版權信息等。
自然而簡單,樸素而真實。

第三章 網頁模塊結構設計
3.1.導航欄模塊：
運用第五章所學知識，為文字添加超鏈接標簽,
將文字用 *< nav >*標簽括起來，在代碼視圖中選中前面輸入的文字，插入Navigation對話框，在ID選項處填寫menu。再為導航欄設置相應樣式，使之成為一個漂亮的導航欄。其中首頁還有二級導航欄m_li，s_1。

其中的HTML如下：

其中CSS的如下：

預覽效果：

3.2.站內搜索模塊:
參照課本第九章所學知識，插入搜索文本框。由于表單部分通常是需要和服務器端進行交互，因此在此使用表單元素,在此依次輸入“站內搜索”插入一個文本字段和一個 “圖像按鈕”表單元素，并設置相應屬性。然后css美化！

其中的HTML如下：

其中CSS代碼如下：

預覽效果：

3.3.登錄界面模塊：
參照課本第九章所學知識，插入搜索文本框。由于表單部分通常是需要和服務器端進行交互，因此在此使用表單元素,在此依次輸入“站內搜索”插入一個文本字段和一個 “圖像按鈕”表單元素，并設置相應屬性。然后css美化！

其中的HTML如下：

其中CSS代碼如下：

CSS代碼續上：

效果預覽：

3.4.項目列表模塊：
運用第三章所學知識先插入

• 項目列表，在其中插入若干個
• 標簽對，輸入文字，每個列表項后的日期文字需要單獨設置，使用標簽對括起來，最后利用CSS美化。

其中的HTML如下：

其中CSS代碼如下：

CSS代碼續上：

效果預覽：

3.5.片展示模塊：
在

標簽對中插入若干圖片，將圖片大小設置統一，利用設置圖片預覽的行為

其中的HTML如下：

其中CSS代碼如下：

預覽效果：

第四章 網頁實現設計
4.1.首頁設計代碼及預覽效果:
其中的HTML如下:

其中CSS代碼如下：

預覽效果：

4.2.家鄉簡介子網頁設計代碼:
其中的HTML如下:

其中CSS代碼如下：

預覽效果：

4.3.革命歷史子網頁設計代碼:
其中的HTML如下:

其中CSS代碼如下：

預覽效果：

4.4.旅游在線子網頁設計代碼：
其中的HTML如下:

第五章 課程設計心得
我在本次網頁設計中，收獲頗多。我在這次實踐中，同時也是一次學習的機會，寫上了人生中的第一份網頁課程設計報告。
首先，我會先建好一個主頁的模板，然后做好主體。在整個過程中，我在不斷地修改，不斷地完善。我覺得細節決定成敗，在各個模塊中，注意細節，到具體的每一步。腳踏實地！然后，在這過程中，難免會遇到困難，自己深思熟慮了之后，還是不知道的話，要不恥下問，多問問老師，同學，多交流，共進步！另外，網上資源也很多，可以參考一下。最后，也要注重實用性，特別是外觀，外觀美會給人帶來更好的感覺！
總體來說，我在本次網頁課程設計中，得到的經驗是不少的，在以后的學習中，更加注重于實踐！

第六章 參考文獻（資料）
[1] 宜亮.DIV+CSS網頁樣式與布局實戰詳解（配光盤）[M].北京：清華大學出版社，2013.
[2] 明日科技.HTML5從入門到精通[M].北京：清華大學出版社，2012.
[3] 前沿科技.精通CSS+DIV網頁樣式布局[M].北京：人民郵電出版社，2007.
[4] 陸凌牛.html5+css3權威指南[M].北京:電子機械出版社,2013.
[5]宋靈香.21天學通html5+css3[M].北京:電子工業出版社,2016.
[6]http://www.runoob.com,菜鳥教程.
[7]http://www.w3school.com, w3school.
[8] http://www.jgs.gov.cn/.

總結

以上是生活随笔為你收集整理的Dreamweaver网页课设做家乡网站的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。