整合營銷服務(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)站里的每一個網(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)站代碼兼容目前市面上所有的主流瀏覽器，已達(dá)到打開后就能即時看到網(wǎng)站的效果。
網(wǎng)站素材方面：計劃收集各大平臺好看的圖片素材，并精挑細(xì)選適合網(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)功能、鼠標(biāo)懸停在文字上的變色功能、簡單的首頁動態(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)代碼
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" style="overflow: auto; overflow-x:hidden;">
<head>
<title>開心旅游網(wǎng)title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="css/screen.css" />
<script src="js/jquery.min.js">script>
<script src="js/jquery.flexslider-min.js">script>
<script type="text/javascript">
$(window).load(function() {
$('.flexslider').flexslider();
});
script>
<link rel="stylesheet" href="css/lrtk.css" type="text/css" media="screen" />
head>
<body>
<div class="wrapper">
<div class="top">
<div class="top_link"><a href="#">設(shè)為首頁a> | <a href="#" class="link2">加入收藏a>div>
div>
<div class="nav">
<ul>
<li><a href="index.html">網(wǎng)站首頁a>li>
<li><a href="lvyouwh.html">南京旅游a>li>
<li><a href="njms.html">南京美食a>li>
<li><a href="jingdian.html">蘇州旅游a>li>
<li><a href="meishi.html">蘇州美食a>li>
<li><a href="fengjing.html">昆明旅游a>li>
<li><a href="kmms.html">昆明美食a>li>
ul>
div>
<div id="banner">
<div class="flexslider">
<ul class="slides">
<li><a href="#"> <img src="image/ad1.jpg" width="1010" />a> li>
<li><a href="#"> <img src="image/j2.jpg" width="1010" />a> li>
<li><a href="#"> <img src="image/j3.jpg" width="1010" />a> li>
<li><a href="#"> <img src="image/j4.jpg" width="1010" />a> li>
ul>
div>
div>
<div class="content">
<div class="sidebar">
<div class="pro_box">
<div class="jj_cp2">
<h3>旅游景點h3>
div>
<ul class="pro_list">
<li><a href="jingdian_1.html">金雞湖a>li>
<li><a href="jingdian_2.html">拙政園a>li>
<li><a href="jingdian_3.html">周莊a>li>
<li><a href="jingdian_4.html">同里古鎮(zhèn)a>li>
ul>
div>
<div class="pro_box">
<div class="jj_cp2">
<h3>特色美食h3>
div>
<ul class="pro_list">
<li><a href="meishi_1.html">太湖梅鱭a>li>
<li><a href="meishi_2.html">太湖白蝦a>li>
<li><a href="meishi_3.html">采芝齋糖果a>li>
<li><a href="meishi_4.html">松鼠桂魚a>li>
ul>
div>
div>
<div class="main_con">
<div class="chanp_box">
<div class="jj_cp">
<h3>旅游景點h3>
div>
<div class="show_box">
<div class="show_panel">
<ul id="show_list">
<li> <a href="#"><img alt="" src="image/j1.jpg" width="164" height="168" /><span>景點展示span>a> <a href="#"><img alt="" src="image/j2.jpg" width="164" height="168" /><span>景點展示span>a> <a href="#"><img alt="" src="image/j3.jpg" width="164" height="168" /><span>景點展示span>a> <a href="#"><img alt="" src="image/j4.jpg" width="164" height="168" /><span>景點展示span>a> li>
ul>
div>
div>
div>
<div class="chanp_box">
<div class="jj_cp">
<h3>特色美食h3>
div>
<div class="show_box">
<div class="show_panel">
<ul id="show_list">
<li> <a href="#"><img alt="" src="image/m1.jpg" width="164" height="168" /><span>特色美食span>a> <a href="#"><img alt="" src="image/m2.jpg" width="164" height="168" /><span>特色美食span>a> <a href="#"><img alt="" src="image/m3.jpg" width="164" height="168" /><span>特色美食span>a> <a href="#"><img alt="" src="image/m5.jpg" width="164" height="168" /><span>特色美食span>a> li>
ul>
div>
div>
div>
<div class="jj_box">
<div class="jj_cp">
<h3>開心旅游網(wǎng)南概況h3>
div>
<div class="jj_cloumn"> <a href="#"><img alt="" src="image/1.jpg" width="237" height="166"/>a>
<div class="jj_txt">
<p>開心旅游網(wǎng)主要介紹南京，蘇州河昆明的旅游景點和特色美食。帶您領(lǐng)略旅游的無限開心一刻。p>
<p>蘇州，古稱吳，簡稱蘇，又稱姑蘇、平江等，中國華東地區(qū)特大城市之一，位于江蘇省東南部、長江以南、太湖東岸、長江三角洲中部，是江蘇省省轄市。p>
<p>蘇州歷史悠久，是國家首批24個歷史文化名城之一。蘇州有文字記載的歷史已逾四千年，是吳文化的發(fā)祥地和集大成者，歷史上長期是江南地區(qū)的政治經(jīng)濟文化中心，蘇州是天下四聚之一，蘇州城始建于公元前514年，歷史學(xué)家顧頡剛先生經(jīng)過考證，認(rèn)為蘇州城為中國現(xiàn)存最古老的城市。p>
<p>南京文化古跡遍布，從中可以探尋歷史的源頭：中山陵依山而建，結(jié)構(gòu)嚴(yán)整，觀之而生一股浩然之氣；夫子廟建筑群古色古香，漫步其間，讓你體味明清時代的市井繁榮；中華門氣勢宏偉，設(shè)計巧妙，置身城內(nèi)，壁壘森然，耳邊似有戰(zhàn)馬嘶鳴；此外還有靈谷寺、石象路、三國東吳所筑石頭城遺址、明代朱元璋的陵墓（明孝陵）以及革命紀(jì)念地雨花臺等，引人遐思無限。p>
<p>昆明，別稱"春城"，是云南省會，云南省唯一的特大城市和西南地區(qū)第三大城市（僅次于成都、重慶），是云南省政治、經(jīng)濟、文化、科技、交通中心，西部地區(qū)重要的中心城市和旅游、商貿(mào)城市，亦是中國面向東南亞、南亞、東盟開放的重要樞紐城市。p>
div>
div>
div>
div>
div>
div>
<div class="foot">
<div class="copyright">
<p>版權(quán)所有©開心旅游網(wǎng)p>
<p><a href="http://mail.qq.com/">聯(lián)系我們a><a href="http://www.baidu.com/" target="_blank"> 友情鏈接a>p>
div>
div>
body>
html>
CSS樣式代碼
/* Browser Resets */
.flex-container a:active,
.flexslider a:active {
outline: none;
}
.slides,
.flex-control-nav,
.flex-direction-nav {
margin: 0;
padding: 0;
list-style: none;
}
/* FlexSlider Necessary Styles
*********************************/
.flexslider {
width: 100%;
margin: 0;
padding: 0;
}
.flexslider .slides>li {
display: none;
}
/* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides img {}
.flex-pauseplay span {
text-transform: capitalize;
}
/* Clearfix for the .slides element */
.slides:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
html[xmlns] .slides {
display: block;
}
* html .slides {
height: 1%;
}
/* No JavaScript Fallback */
/* If you are not using another script, such as Modernizr, make sure you
* include js that eliminates this class on page load */
.no-js .slides>li:first-child {
display: block;
}
/* FlexSlider Default Theme
*********************************/
.flexslider {
position: relative;
margin-top: 10px;
padding-top: 10px;
margin-left: 10px;
zoom: 1;
}
.flexslider .slides {
zoom: 1;
}
.flexslider .slides>li {
position: relative;
}
/* Suggested container for "Slide" animation setups. Can replace this with your own, if you wish */
.flex-container {
zoom: 1;
position: relative;
}
/* Caption style */
/* IE rgba() hack */
.flex-caption {
background: none;
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000, endColorstr=#4C000000);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000, endColorstr=#4C000000);
zoom: 1;
}
.flex-caption {
width: 96%;
padding: 2%;
position: absolute;
left: 0;
bottom: 0;
background: rgba(0, 0, 0, .3);
color: #fff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
font-size: 14px;
line-height: 18px;
}
/* Direction Nav */
.flex-direction-nav li a {
width: 52px;
height: 52px;
margin: -13px 0 0;
display: block;
background: url(../image/bg_direction_nav.png) no-repeat 0 0;
position: absolute;
top: 150px;
cursor: pointer;
text-indent: -9999px;
}
.flex-direction-nav li a.next {
background-position: -52px 0;
right: -51px;
}
.flex-direction-nav li a.prev {
background-position: 0 0;
left: -60px;
}
.flex-direction-nav li a.disabled {
opacity: .3;
filter: alpha(opacity=30);
cursor: default;
}
/* Control Nav */
.flex-control-nav {
width: 100%;
position: absolute;
bottom: -30px;
*bottom: -0px;
*bottom: -0px\9;
text-align: center;
}
.flex-control-nav li {
margin: 0 0 0 5px;
display: inline-block;
zoom: 1;
*display: inline;
}
.flex-control-nav li:first-child {
margin: 0;
}
.flex-control-nav li a {
width: 13px;
height: 13px;
display: block;
background: url(../image/bg_control_nav.png) no-repeat 0 0;
cursor: pointer;
text-indent: -9999px;
}
.flex-control-nav li a:hover {
background-position: 0 -13px;
}
.flex-control-nav li a.active {
background-position: 0 -26px;
cursor: default;
}
六、遇到問題及如何解決
實訓(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)頁的過程中遇到很多的問題，通過查找資料或詢問同學(xué)都有得到解決。這次綜合實訓(xùn)我的收獲很大，學(xué)有所用，在實踐的過程中學(xué)習(xí)鞏固對知識能有更深的記憶。網(wǎng)頁制作是一門很實用的學(xué)科，值得我以后進行更深入的學(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ā)者網(wǎng)站制作，一起探討 前端 Node 知識，互相學(xué)習(xí)」！
3.以上內(nèi)容技術(shù)相關(guān)問題歡迎一起交流學(xué)習(xí)
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
