? 【作者主頁——獲取更多優質源碼】
? 【學習資料/簡歷模板/面試資料/ 網站設計與制作】
?
文章目錄
一、網站題目?
旅游景點介紹、旅游風景區、家鄉介紹、等網站的設計與制作。
二、網站描述??
旅游景點介紹、旅游風景區是一個介紹簡介、行政區劃、地理環境、自然環境、教育事業、體育事業、旅游景點、城市榮譽等等。網站集中主要展示了的地方風土人情,并通過訪客留言,增加游客的互動體驗。同時,地方旅游網站里的每一個網頁都采用了統一的設計風格,以加強城市整體面貌統一的宣傳效果。最重要的是做出旅游網站獨特的風格,更能吸引瀏覽者的眼球。
三、網站介紹
網站布局方面:計劃采用目前主流的、能兼容各大主流瀏覽器、顯示效果穩定的浮動網頁布局結構。
網站程序方面:計劃采用最新的網頁編程語言HTML5+CSS3+JS程序語言完成網站的功能設計。并確保網站代碼兼容目前市面上所有的主流瀏覽器,已達到打開后就能即時看到網站的效果。
網站素材方面:計劃收集各大平臺好看的圖片素材,并精挑細選適合網頁風格的圖片,然后使用PS做出適合網頁尺寸的圖片。
網站文件方面:網站系統文件種類包含:html網頁結構文件、css網頁樣式文件、js網頁特效文件、images網頁圖片文件;
網頁編輯方面:網頁作品代碼簡單,可使用任意HTML編輯軟件(如:、、Vscode 、Sublime 、、Text 、Notepad++ 等任意html編輯軟件進行運行及修改編輯等操作)。
其中:
(1)html文件包含:其中index.html是首頁、其他html為二級頁面;
(2)css文件包含:css全部頁面樣式,文字滾動, 圖片放大等;
(3)js文件包含:js實現動態輪播特效, 點擊事件等等(個別網頁中運用到js代碼)。
四、網站效果
網站設計制作的重點是對網頁整體設計的布局和對網頁整體內容的選題。
網站設計方面:計劃實現簡潔大氣的網頁設計效果。
網站功能方面:計劃實現各個頁面之間的鏈接跳轉功能、鼠標懸停在文字上的變色功能、簡單的首頁動態圖片切換功能、簡單的表單提交功能。
五、網站代碼制作部分
(1)網站首頁布局確定好各個板塊的內容,并使用了DIV+CSS布局。另外首頁使用到的知識主要有圖片插入、圖片動態切換、導航條、利用CSS固定字體、文字大小、文字顏色、背景顏色。
(2)頁面使用了DIV+CSS布局,使用到的知識主要有圖片插入、導航條、利用CSS固定字體、文字大小、文字顏色、背景顏色。
(3)表單部分頁面使用了DIV+CSS布局,使用到的知識主要有運用了form表單、input文本框和input提交按鈕,完成表單信息收集。利用CSS設置input提交按鈕文字大小和顏色。
HTML結構代碼
DOCTYPE html>
<!--[if gt IE 8]><!--> <html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>國際酒店title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/superfish.css">
<link rel="stylesheet" href="css/bootstrap-datepicker.min.css">
<link rel="stylesheet" href="css/cs-select.css">
<link rel="stylesheet" href="css/cs-skin-border.css">
<link rel="stylesheet" href="css/themify-icons.css">
<link rel="stylesheet" href="css/flaticon.css">
<link rel="stylesheet" href="css/icomoon.css">
<link rel="stylesheet" href="css/flexslider.css">
<link rel="stylesheet" href="css/style.css">
<script src="js/modernizr-2.6.2.min.js">script>
head>
<body>
<div id="fh5co-wrapper">
<div id="fh5co-page">
<div id="fh5co-header">
<header id="fh5co-header-section">
<div class="container">
<div class="nav-header">
<a href="#" class="js-fh5co-nav-toggle fh5co-nav-toggle"><i>i>a>
<h1 id="fh5co-logo"><a href="index.html">hotela>h1>
<nav id="fh5co-menu-wrap" role="navigation">
<ul class="sf-menu" id="fh5co-primary-menu">
<li><a href="index.html">網站首頁a>li>
<li><a href="hotel.html">房間介紹a>li>
<li><a href="services.html">服務介紹a>li>
<li><a class="active" href="blog.html">新聞中心a>li>
<li><a href="contact.html">聯系我們a>li>
ul>
nav>
div>
div>
header>
div>
<div class="fh5co-parallax" style="background-image: url(images/slider1.jpg);" data-stellar-background-ratio="0.5">
<div class="overlay">div>
<div class="container">
<div class="row">
<div class="col-md-12 col-md-offset-0 col-sm-12 col-sm-offset-0 col-xs-12 col-xs-offset-0 text-center fh5co-table">
<div class="fh5co-intro fh5co-table-cell">
<h1 class="text-center">新聞中心h1>

<p>關注我們的新聞,了解最新活動和優惠p>
div>
div>
div>
div>
div>
<div class="news-content container">
<h2>聽說一種深海珍寶游到了彩蝶谷h2>
<p class="news-time"><i class="icon icon-calendar">i>2017/6/1p>
<img src="images/image-1.jpg"/>
<p>
都說龍躉全身是寶,不同部位適合烹制不同菜式,彩蝶谷美食廊素來以出品風味混搭、菜式做法多樣而聞名,這次的龍躉系列當然也不會讓老饕們失望,大廚以“燜燉焗蒸”等多種烹飪方式,為您帶來十多款龍躉菜式,深海珍寶好多美味?小編近水樓臺先嘗味,您就暫時要“望梅止渴”,看著小編上圖啦!
p>
<p>
粵語常說“飲頭啖湯”,注重食補健康的嶺南人,尤其重視正式上菜前的暖場湯水,這道“天麻燉龍躉頭”,用的是最為營養滋補的龍躉頭,斬件加上天麻和其它配料入甕慢火燉煮,將魚頭豐富的膠原和鮮味釋放,加上淡淡的藥材湯料的清香,味道清甜不油膩,最適合這種炎熱的天氣。
p>
<p>
對美味的追求不只是大人的權利,這道“芙蓉蛋白蒸龍躉肉”特別適合小孩子,師傅以精湛刀法加工龍躉魚,片片均勻,沒有一絲骨頭;蛋白加入龍躉骨熬制的魚湯打勻,放入魚片同蒸?;鸷蚩刂埔〉胶锰?,魚片剛熟,芙蓉蛋白嫩滑,每一口都是鮮美魚肉和蛋白,絕對是小孩子下飯的好選擇。
p>
div>
<footer id="footer" class="fh5co-bg-color">
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="copyright">
<p>© 2016 All Rights Reserved.
p>
<img src="images/gw.jpg" />
div>
div>
<div class="col-md-8">
<div class="row">
<div class="col-md-3">
<h3>快速鏈接h3>
<ul class="link">
<li><a href="index.html">網站首頁a>li>
<li><a href="#">房間介紹a>li>
<li><a href="#">服務介紹a>li>
<li><a href="#">新聞中心a>li>
<li><a href="#">聯系我們a>li>
ul>
div>
<div class="col-md-3">
<h3>特色服務h3>
<ul class="link">
<li><a>餐廳、酒吧a>li>
<li><a>接送、泳池a>li>
<li><a>Spa、健身a>li>
ul>
div>
<div class="col-md-6">
<h3>訂閱h3>
<p>
特色服務和齊全的設施等著你的到來
p>
<form action="#" id="form-subscribe">
<div class="form-field">
<input type="email" placeholder="郵箱" id="email">
<input type="submit" id="submit" value="發送">
div>
form>
div>
div>
div>
div>
div>
footer>
div>
div>
<script src="js/jquery-2.1.4.min.js">script>
<script src="js/hoverIntent.js">script>
<script src="js/superfish.js">script>
<script src="js/bootstrap.min.js">script>
<script src="js/jquery.waypoints.min.js">script>
<script src="js/jquery.countTo.js">script>
<script src="js/jquery.stellar.min.js">script>
<script src="js/bootstrap-datepicker.min.js">script>
<script src="js/classie.js">script>
<script src="js/selectFx.js">script>
<script src="js/jquery.flexslider-min.js">script>
<script src="js/custom.js">script>
body>
html>
CSS樣式代碼
/* Default custom select styles */
div.cs-select {
display: inline-block;
vertical-align: middle;
position: relative;
text-align: left;
background: #fff;
z-index: 100;
width: 100%;
max-width: 500px;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
div.cs-select:focus {
outline: none; /* For better accessibility add a style for this in your skin */
}
.cs-select select {
display: none;
}
.cs-select span {
display: block;
position: relative;
cursor: pointer;
padding: 1em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Placeholder and selected option */
.cs-select > span {
padding-right: 3em;
}
.cs-select > span::after,
.cs-select .cs-selected span::after {
speak: none;
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.cs-select > span::after {
content: '\25BE';
right: 1em;
}
.cs-select .cs-selected span::after {
content: '\2713';
margin-left: 1em;
}
.cs-select.cs-active > span::after {
-webkit-transform: translateY(-50%) rotate(180deg);
transform: translateY(-50%) rotate(180deg);
}
div.cs-active {
z-index: 200;
}
/* Options */
.cs-select .cs-options {
position: absolute;
overflow: hidden;
width: 100%;
background: #fff;
visibility: hidden;
}
.cs-select.cs-active .cs-options {
visibility: visible;
}
.cs-select ul {
list-style: none;
margin: 0;
padding: 5px 0;
width: 100%;
font-size: 16px;
}
.cs-select ul span {
padding: 1em;
color: #777;
}
.cs-select ul li.cs-focus span {
background-color: #ddd;
}
/* Optgroup and optgroup label */
.cs-select li.cs-optgroup ul {
padding-left: 1em;
}
.cs-select li.cs-optgroup > span {
cursor: default;
}
六、遇到問題及如何解決
實訓中遇到得困難不少,比如如何收集適合網頁的圖片素材、如何讓網頁的配色看著更自然更舒適、如何用PS裁剪大小合適的圖片、以及制作表單時候如何設計等等,最后,通過上網查詢和請教別人得到了很好的解決。
七、實訓總結
通過這次網頁設計制作實訓,能夠靈活的運用到所學的知識和技巧制作簡單的網頁,掌握了個人網站建設的技巧和基本網站建設的過程。對于用、vscode、hbuider等制作網頁更為得心應手。實訓過程中我盡量充分利用老師教過的知識,對所學知識進行了鞏固。為了制作出更好的效果我也翻閱參考了其他資料,學習到了更多的網頁處理技巧。制作網頁的過程中遇到很多的問題,通過查找資料或詢問同學都有得到解決。這次綜合實訓我的收獲很大,學有所用,在實踐的過程中學習鞏固對知識能有更深的記憶。網頁制作是一門很實用的學科,值得我以后進行更深入的學習。這次實訓中我也體會到了自己掌握的技巧太少了,以至于很多想法都沒能實現,在以后的學習過程中我要對網頁制作有更深的了解,做出更為成熟的網頁。