整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
【作者主頁——獲取更多優(yōu)質(zhì)源碼】
【web前端期末大作業(yè)——畢設(shè)項目精品實戰(zhàn)案例(1000套)】
文章目錄
一、網(wǎng)站題目?
旅游景點介紹、旅游風(fēng)景區(qū)、家鄉(xiāng)介紹、等網(wǎng)站的設(shè)計與制作。
二、網(wǎng)站描述??
旅游景點介紹、旅游風(fēng)景區(qū)是一個介紹簡介、行政區(qū)劃、地理環(huán)境、自然環(huán)境、教育事業(yè)、體育事業(yè)、旅游景點、城市榮譽等等。網(wǎng)站集中主要展示了的地方風(fēng)土人情，并通過訪客留言，增加游客的互動體驗。同時，地方旅游網(wǎng)站里的每一個網(wǎng)頁都采用了統(tǒng)一的設(shè)計風(fēng)格，以加強城市整體面貌統(tǒng)一的宣傳效果。最重要的是做出旅游網(wǎng)站獨特的風(fēng)格，更能吸引瀏覽者的眼球。
三、網(wǎng)站介紹
網(wǎng)站布局方面：計劃采用目前主流的、能兼容各大主流瀏覽器、顯示效果穩(wěn)定的浮動網(wǎng)頁布局結(jié)構(gòu)。
網(wǎng)站程序方面：計劃采用最新的網(wǎng)頁編程語言HTML5+CSS3+JS程序語言完成網(wǎng)站的功能設(shè)計。并確保網(wǎng)站代碼兼容目前市面上所有的主流瀏覽器，已達到打開后就能即時看到網(wǎng)站的效果。
網(wǎng)站素材方面：計劃收集各大平臺好看的圖片素材，并精挑細選適合網(wǎng)頁風(fēng)格的圖片，然后使用PS做出適合網(wǎng)頁尺寸的圖片。
網(wǎng)站文件方面：網(wǎng)站系統(tǒng)文件種類包含：html網(wǎng)頁結(jié)構(gòu)文件、css網(wǎng)頁樣式文件、js網(wǎng)頁特效文件、網(wǎng)頁圖片文件；
網(wǎng)頁編輯方面：網(wǎng)頁作品代碼簡單，可使用任意HTML編輯軟件（如：、、 、 、、Text 、++ 等任意html編輯軟件進行運行及修改編輯等操作）。
其中：
（1）html文件包含：其中index.html是首頁、其他html為二級頁面；
（2）css文件包含：css全部頁面樣式,文字滾動, 圖片放大等；
（3）js文件包含：js實現(xiàn)動態(tài)輪播特效, 點擊事件等等（個別網(wǎng)頁中運用到j(luò)s代碼）。
四、網(wǎng)站效果
網(wǎng)站設(shè)計制作的重點是對網(wǎng)頁整體設(shè)計的布局和對網(wǎng)頁整體內(nèi)容的選題。
網(wǎng)站設(shè)計方面：計劃實現(xiàn)簡潔大氣的網(wǎng)頁設(shè)計效果。
網(wǎng)站功能方面：計劃實現(xiàn)各個頁面之間的鏈接跳轉(zhuǎn)功能、鼠標懸停在文字上的變色功能、簡單的首頁動態(tài)圖片切換功能、簡單的表單提交功能。
五、網(wǎng)站代碼制作部分
（1）網(wǎng)站首頁布局確定好各個板塊的內(nèi)容，并使用了DIV+CSS布局。另外首頁使用到的知識主要有圖片插入、圖片動態(tài)切換、導(dǎo)航條、利用CSS固定字體、文字大小、文字顏色、背景顏色。
（2）頁面使用了DIV+CSS布局，使用到的知識主要有圖片插入、導(dǎo)航條、利用CSS固定字體、文字大小、文字顏色、背景顏色。
（3）表單部分頁面使用了DIV+CSS布局，使用到的知識主要有運用了form表單、input文本框和input提交按鈕，完成表單信息收集。利用CSS設(shè)置input提交按鈕文字大小和顏色。
HTML結(jié)構(gòu)代碼
<html>
<head>
<title>中國夢title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="css/style.css" rel="stylesheet" type="text/css">
head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" style=" text-align:center; cursor:sw-resize">
<table id="__01" width="980" height="808" border="0" cellpadding="0" cellspacing="0" style="text-align:left; margin:0px auto;">
<tr>
<td colspan="5">
<img src="images/index_01.jpg" width="980" height="205" alt="">td>
tr>
<tr>
<td colspan="5">
<img src="images/index_02.jpg" width="980" height="38" alt="">td>
tr>
<tr>
<td rowspan="5">
<img src="images/index_03.jpg" width="37" height="562" alt="">td>
<td width="216" height="463" rowspan="3" align="center" valign="top" class="dh">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="dhtable">
<tr>
<td align="center"><a href="index-2.html" class="hover">首頁a>td>
tr>
<tr>
<td align="center"><a href="Templates/jianzhuziliao.html">建筑資料a>td>
tr>
<tr>
<td align="center"><a href="Templates/gugongcangpin.html">故宮藏品a>td>
tr>
<tr>
<td align="center"><a href="Templates/gujiziliao.html">古籍資料a>td>
tr>
<tr>
<td align="center"><a href="Templates/gugongsan.html">故宮三大殿a>td>
tr>
<tr>
<td align="center"><a href="Templates/gugongsi.html">故宮四門a>td>
tr>
<tr>
<td align="center"><a href="Templates/mingqinggt.html">明清宮廷a>td>
tr>
<tr>
<td align="center"><a href="Templates/wenwu.html">文物保護a>td>
tr>
<tr>
<td align="center"><a href="Templates/lianxiwomen.html">聯(lián)系我們a>td>
tr>
<tr>
<td align="center"><a href="#" onClick="alert('感謝您的收藏！')">收藏我們a>td>
tr>
table>
td>
<td rowspan="4">
<img src="images/index_05.jpg" width="21" height="480" alt="">td>
<td width="670" height="241" valign="top" class="wh">
<p> 舊稱紫禁城。于明代永樂十八年（1420年）建成，建成后3月即失火燒毀，20年后重建。是明、清兩代的皇宮，兩代24位皇帝在此處理政務(wù)和生活起居的地方。它是漢族宮殿建筑之精華，無與倫比的古代建筑杰作，世界現(xiàn)存最大、最完整的木質(zhì)結(jié)構(gòu)的古建筑群。故宮全部建筑由"前朝"與"內(nèi)廷"兩部分組成，四周有城墻圍繞。四面由筒子河環(huán)抱。城四角有角樓。四面各有一門，正南是午門，為故宮的正門。故宮被譽為世界五大宮之首（北京故宮、法國凡爾賽宮、英國白金漢宮、美國白宮和俄羅斯克里姆林宮）。p>
td>
<td rowspan="5">
<img src="images/index_07.jpg" width="36" height="562" alt="">td>
tr>
<tr>
<td>
<img src="images/index_08.jpg" width="670" height="24" alt="">td>
tr>
<tr>
<td width="670" height="198" valign="top">
<table width="100%" border="0" cellspacing="5" cellpadding="0" class="tp">
<tr>
<td><img src="images/in01.jpg" width="209" height="157">故宮內(nèi)殿td>
<td><img src="images/in02.jpg" width="209" height="157">晴天景色td>
<td><img src="images/in03.jpg" width="209" height="157">雪天景色td>
tr>
table>
td>
tr>
<tr>
<td>
<img src="images/index_10.jpg" width="216" height="17" alt="">td>
<td>
<img src="images/index_11.jpg" width="670" height="17" alt="">td>
tr>
<tr>
<td colspan="3"> td>
tr>
table>
body>
html>
CSS樣式代碼
/* CSS Document */
*{ padding:0px; margin:0px;}
img{ border:none;}
body{ font-size:12px; line-height:24px; background:url(../images/bg.jpg) repeat-x #ae0000;}
.dh{ background:url(../images/index_04.jpg) no-repeat; padding:20px 30px;}
.dh a{ color:#480201; text-decoration:none; font-size:14px; font-weight:bold; display:block; width:157px; height:33px; background:#f6b213; line-height:33px; margin:5px 0px;}
.dh a:hover{ background:#e9c9c8;}
.dh a.hover{ background:#e9c9c8;}
.wh{ padding:70px 40px 0px; background:url(../images/index_06.jpg) no-repeat;}
p{ font-size:18px; line-height:24px; padding:0px; margin:0px;}
.tp tr td{ background:#480201; padding:5px; text-align:center; color:#fff; font-size:12px; line-height:25px;}
.tp tr td img{ display:block;}
.tp tr td a{ color:#fff; text-decoration:none;}
.wh2{ background:#e9c9c8; border:1px solid #610000; padding:20px;}
.wh2 div{ margin:20px 0px;}
.tit{ background:url(../images/tit.jpg) no-repeat; height:35px; color:#fff; padding-left:50px; font-size:13px;}
.tit a{ color:#fff; text-decoration:none;}
.tit a.tit_bg{ color:#f6b213; font-weight:bold;}
.jp{ border-bottom:1px solid #8f5654; border-right:1px solid #8f5654; margin-top:20px;}
.jp tr td{ border-left:1px solid #8f5654; border-top:1px solid #8f5654; line-height:30px; font-size:12px; padding-left:10px;}
.fh{ float:right; margin:20px 0px; width:100px; height:30px; display:block; text-align:center; line-height:30px; background:#000; color:#fff;}
h4{ padding:0px; margin:0px;}
.sj{ margin:20px 0px; font-size:12px; text-align:center; line-height:25px;}
.sj img{ display:block;}
六、遇到問題及如何解決
實訓(xùn)中遇到得困難不少，比如如何收集適合網(wǎng)頁的圖片素材、如何讓網(wǎng)頁的配色看著更自然更舒適、如何用PS裁剪大小合適的圖片、以及制作表單時候如何設(shè)計等等，最后，通過上網(wǎng)查詢和請教別人得到了很好的解決。
七、實訓(xùn)總結(jié)
通過這次網(wǎng)頁設(shè)計制作實訓(xùn)，能夠靈活的運用到所學(xué)的知識和技巧制作簡單的網(wǎng)頁，掌握了個人網(wǎng)站建設(shè)的技巧和基本網(wǎng)站建設(shè)的過程。對于用、、等制作網(wǎng)頁更為得心應(yīng)手。實訓(xùn)過程中我盡量充分利用老師教過的知識，對所學(xué)知識進行了鞏固。為了制作出更好的效果我也翻閱參考了其他資料，學(xué)習(xí)到了更多的網(wǎng)頁處理技巧。制作網(wǎng)頁的過程中遇到很多的問題網(wǎng)站制作，通過查找資料或詢問同學(xué)都有得到解決。這次綜合實訓(xùn)我的收獲很大，學(xué)有所用，在實踐的過程中學(xué)習(xí)鞏固對知識能有更深的記憶。網(wǎng)頁制作是一門很實用的學(xué)科網(wǎng)站制作，值得我以后進行更深入的學(xué)習(xí)。這次實訓(xùn)中我也體會到了自己掌握的技巧太少了，以至于很多想法都沒能實現(xiàn)，在以后的學(xué)習(xí)過程中我要對網(wǎng)頁制作有更深的了解，做出更為成熟的網(wǎng)頁。
八、更多干貨
1.如果我的博客對你有幫助、如果你喜歡我的博客內(nèi)容，請 “點贊” “??評論” “收藏” 一鍵三連哦！
2.??【關(guān)注我| 獲取更多源碼 | 優(yōu)質(zhì)文章】 帶您學(xué)習(xí)各種前端插件、3D炫酷效果、圖片展示、文字效果、以及整站模板 、大學(xué)生畢業(yè)HTML模板 、期末大作業(yè)模板 、等! 「在這里有好多 前端 開發(fā)者，一起探討 前端 Node 知識，互相學(xué)習(xí)」！
3.以上內(nèi)容技術(shù)相關(guān)問題歡迎一起交流學(xué)習(xí)
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
