存檔資料 成績：

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

1.2 課程設(shè)計(jì)的目的
1．通過綜合實(shí)訓(xùn)進(jìn)一步鞏固、深化和擴(kuò)展學(xué)生的理論知識。

（1） 掌握規(guī)劃網(wǎng)站的內(nèi)容結(jié)構(gòu)、目錄結(jié)構(gòu)、鏈接結(jié)構(gòu)的方法。

（2） 熟練掌握網(wǎng)頁制作軟件Dreamweaver的基本操作；

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

3．培養(yǎng)學(xué)生運(yùn)用所學(xué)的理論知識和技能解決網(wǎng)站開發(fā)過程中所遇到的實(shí)際問題的能力及其基本工作素質(zhì)。

4．培養(yǎng)學(xué)生理論聯(lián)系實(shí)際的工作作風(fēng)、嚴(yán)肅認(rèn)真的科學(xué)態(tài)度以及獨(dú)立工作的能力

第二章 網(wǎng)站系統(tǒng)分析
2.1首頁分析

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

2.2子網(wǎng)頁分析
（一）井岡山簡介子網(wǎng)頁

從上述結(jié)構(gòu)圖中可出：井岡山簡介樣式也不是過于簡單，它有二級縱向?qū)Ш綑?#xff0c;背景圖片，背景色的改變以及版權(quán)信息等。
從總體上來看，模版的結(jié)構(gòu)還是很清晰的。

（二）革命歷史子網(wǎng)頁

從上述結(jié)構(gòu)圖中可出：它有二級縱向?qū)Ш綑?#xff0c;背景圖片，背景色的改變以及版權(quán)信息等。
二級縱向?qū)Ш綑?#xff0c;背景色和背景圖片之間的融合度較高。

（三）旅游在線子網(wǎng)頁

從上述結(jié)構(gòu)圖中可出：它有二級縱向?qū)Ш綑?#xff0c;表格，按鈕，下拉列表，特殊符號，超鏈接,背景圖片，背景色的改變以及版權(quán)信息等。
它有一部分是參考了井岡山市人民政府網(wǎng)，形式也是非常的豐富。其中用CSS3美化的表格很有特點(diǎn)

(四)網(wǎng)站登錄子網(wǎng)頁

從上述結(jié)構(gòu)圖中可出：它有圖片,按鈕,邊框，背景圖片，背景色的改變以及版權(quán)信息等。
自然而簡單,樸素而真實(shí)。

第三章 網(wǎng)頁模塊結(jié)構(gòu)設(shè)計(jì)
3.1.導(dǎo)航欄模塊：
運(yùn)用第五章所學(xué)知識，為文字添加超鏈接標(biāo)簽,
將文字用 *< nav >*標(biāo)簽括起來，在代碼視圖中選中前面輸入的文字，插入Navigation對話框，在ID選項(xiàng)處填寫menu。再為導(dǎo)航欄設(shè)置相應(yīng)樣式，使之成為一個(gè)漂亮的導(dǎo)航欄。其中首頁還有二級導(dǎo)航欄m_li，s_1。

其中的HTML如下：

其中CSS的如下：

預(yù)覽效果：

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

其中的HTML如下：

其中CSS代碼如下：

預(yù)覽效果：

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

其中的HTML如下：

其中CSS代碼如下：

CSS代碼續(xù)上：

效果預(yù)覽：

3.4.項(xiàng)目列表模塊：
運(yùn)用第三章所學(xué)知識先插入

• 項(xiàng)目列表，在其中插入若干個(gè)
• 標(biāo)簽對，輸入文字，每個(gè)列表項(xiàng)后的日期文字需要單獨(dú)設(shè)置，使用標(biāo)簽對括起來，最后利用CSS美化。

其中的HTML如下：

其中CSS代碼如下：

CSS代碼續(xù)上：

效果預(yù)覽：

3.5.片展示模塊：
在

標(biāo)簽對中插入若干圖片，將圖片大小設(shè)置統(tǒng)一，利用設(shè)置圖片預(yù)覽的行為

其中的HTML如下：

其中CSS代碼如下：

預(yù)覽效果：

第四章 網(wǎng)頁實(shí)現(xiàn)設(shè)計(jì)
4.1.首頁設(shè)計(jì)代碼及預(yù)覽效果:
其中的HTML如下:

其中CSS代碼如下：

預(yù)覽效果：

4.2.家鄉(xiāng)簡介子網(wǎng)頁設(shè)計(jì)代碼:
其中的HTML如下:

其中CSS代碼如下：

預(yù)覽效果：

4.3.革命歷史子網(wǎng)頁設(shè)計(jì)代碼:
其中的HTML如下:

其中CSS代碼如下：

預(yù)覽效果：

4.4.旅游在線子網(wǎng)頁設(shè)計(jì)代碼：
其中的HTML如下:

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

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。