👨🎓學生HTML靜态網頁基礎水準制作👩🎓，頁面排版幹淨簡潔。使用HTML+CSS頁面布局設計,web大學生網頁設計作業源碼，這是一個不錯的旅遊網頁制作，畫面精明，排版整潔，内容豐富，主題鮮明，非常适合初學者學習使用, 這個執行個體比較全面，有助于同學的學習,本文将介紹如何通過從頭開始設計個人網站并将其轉換為代碼的過程來實踐設計。
文章目錄🌰
- 一、網站題目👨🎓
- 二、網站描述✍️
- 三、網站介紹📖
- 四、網站效果🌐
- 五、網站代碼制作部分 📕
- HTML結構代碼🧱
- CSS樣式代碼🏡
- 六、遇到問題及如何解決🔍
- 七、實訓總結😊
- 八、更多幹貨🎁
一、網站題目👨🎓
🚀 旅遊景點介紹、旅遊風景區、家鄉介紹、等網站的設計與制作。
二、網站描述✍️
旅遊景點介紹、旅遊風景區是一個介紹簡介、行政區劃、地理環境、自然環境、教育事業、體育事業、旅遊景點、城市榮譽等等。網站集中主要展示了的地方風土人情，并通過訪客留言，增加遊客的互動體驗。同時，地方旅遊網站裡的每一個網頁都采用了統一的設計風格，以加強城市整體面貌統一的宣傳效果。最重要的是做出旅遊網站獨特的風格，更能吸引浏覽者的眼球。
三、網站介紹📖
網站布局方面：計劃采用目前主流的、能相容各大主流浏覽器、顯示效果穩定的浮動網頁布局結構。
網站程式方面：計劃采用最新的網頁程式設計語言HTML5+CSS3+JS程式語言完成網站的功能設計。并確定網站代碼相容目前市面上所有的主流浏覽器，已達到打開後就能即時看到網站的效果。
網站素材方面：計劃收集各大平台好看的圖檔素材，并精挑細選适合網頁風格的圖檔，然後使用PS做出适合網頁尺寸的圖檔。
網站檔案方面：網站系統檔案種類包含：html網頁結構檔案、css網頁樣式檔案、js網頁特效檔案、images網頁圖檔檔案；
網頁編輯方面：網頁作品代碼簡單，可使用任意HTML編輯軟體（如：
Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、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>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Macao travel</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="web">
<div class="top">
<div class="logo"><img src="images/logo.jpg" /></div>
<div class="nav">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">Introduction</a></li>
<li><a href="scenery.html">Scenery</a></li>
<li><a href="specialty.html">Specialty</a></li>
<li><a href="message.html">Message</a></li>
</ul>
</div>
<div class="sous">
<form>
<input class="inut" />
<button class="btn"></button>
</form>
</div>
</div>
<div class="banner">
<img src="images/banner.jpg" />
</div>
<div class="tit">Introduction to Macao</div>
<div class="tit2">My trip to Macau</div>
<div class="bx01">
<div class="bx01-left"><img src="images/img01.jpg"></div>
<div class="bx01-right">
<p>Macau, the Macau Special Administrative Region of the People's Republic of China. It is bounded by Zhuhai, Guangdong Province to the north, Wan Chai and Hengqin in Zhuhai to the West, and Hong Kong to the east, 60 kilometres away, and the south China Sea to the south.</p>
<p>On December 1,1887, Portugal and the Qing government signed the draft Treaty of Sino-portuguese Conference and the draft Treaty of Sino-Portuguese Treaty of Peking Macao was formally occupied and colonized by diplomatic protocol. On 20 December 1999, the Chinese government resumed the exercise of sovereignty over Macao. After more than 400 years of European civilization, the coexistence of Eastern and Western cultures makes Macao a unique city, leaving a large number of historical and cultural relics. The Historic Centre of Macau officially became a world cultural heritage site on July 15,2005. After Macau's return to China, its economy grew faster and more prosperous than ever, a success story for the One Country, Two Systems.</p>
</div>
</div>
<div class="tit">Beautiful scenery</div>
<div class="tit2">My trip to Macau</div>
<div class="bx02">
<div class="bx02-ner">
<div class="left">
<p>It's beautiful. The perfect combination of modern city and classical architecture style.</p>
<img src="images/box01.jpg">
</div>
<div class="right">
<img src="images/box02.jpg">
<img class="mar20" src="images/box03.jpg">
</div>
</div>
</div>
<div class="foot">
<p>Copyright@2020 Macao travel.All Rights Reserved.</p>
<p>My trip to Macau</p>
</div>
</div>
<embed src="images/aomen.mp3" autostart="true" loop="true" hidden="true"></embed>
</body>
</html> CSS樣式代碼🏡
body{ margin:0 auto; font-size:12px; font-family: Arial, Helvetica, sans-serif; line-height:22px; color:#333; background:#e0ecfa; }
div,p,input,li,h1,h2,h3,h4,h5{ height:auto; margin:0; padding:0px;vertical-align:middle ;}
li{ list-style:none;}
a{ text-decoration:none; color:#000;}
img{ border:0; margin:0; padding:0;}
.web{
width:1140px;
height:auto;
overflow:hidden;
margin:0 auto;
background:#FFF;
padding:0px 30px;
}
.top{
height:55px;
padding-top:15px;
}
.logo{
width:116px;
height:39px;
float:left;
margin-right:50px;
}
.nav{
width:720px;
height:39px;
float:left;
}
.nav ul{
padding:0px;
margin:0;
}
.nav ul li{
height:39px;
line-height:39px;
float:left;
margin:0px 20px;
}
.nav ul li a{
font-size:18px;
color: #000;
}
.sous{
width:140px;
height:39px;
float:right;
}
.inut{
width:110px;
height:39px;
border:none;
border-bottom: 1px solid #000;
float:left;
}
.btn{
width:30px;
height:30px;
background:url(../images/btn.jpg) no-repeat;
border:none;
margin-top:10px;
}
.banner{
width:1140px;
height:400px;
margin-bottom:25px;
}
.tit{
height: 60px;
line-height: 60px;
padding-left: 20px;
font-size: 26px;
color: #464543;
text-align: center;
width: 500px;
margin: 0 auto;
border-bottom: #5990b9 1px solid;
}
.tit2{
height:30px;
line-height:30px;
font-size:14px;
text-align:center;
color:#333;
margin-bottom: 20px;
}
.bx01{ width:100%; height:354px; margin-bottom:20px; }
.bx01-left{ width:400px; height:354px; float:left; margin-right:20px; }
.bx01-right{ width:720px; height:354px; float:left;}
.bx01-right p{line-height:30px;
font-size: 16px;
color: #221e1f;
text-indent: 2em;
margin: 0px;}
.bx02{ width:1140px; height:470px;}
.bx02-ner{ width:1140px; height:420px; margin:0 auto;}
.bx02-ner .left{ width:700px; height:420px; margin-right:20px;float:left; }
.bx02-ner .left p{ font-size:16px; text-align:center; height:40px; line-height:40px;}
.bx02-ner .right{ width:420px; height:420px; float:left;}
.mar20{ margin-top:20px;}
.foot{
height:123px;
background:#588fb8;
padding-top:15px;
}
.foot p{
height:30px;
line-height:30px;
font-size:14px;
color:#FFF;
text-align:center;
}
.banner2{
width:1140px;
height:240px;
margin-bottom:25px;
}
.title {
height: 44px;
line-height: 30px;
padding-left: 30px;
font-size: 18px;
margin-bottom:30px;
border-bottom: #999 2px solid;
font-weight: bold;
text-align:center;
}
.conter{
width:1140px;
height:auto;
overflow:hidden;
margin:0 auto;
}
.abt{ width:100%; min-height:500px; height:auto; overflow:hidden; margin-bottom:30px;}
.shipin{ width:600px; height:400px; margin:0 auto;}
.liuy{
height:450px;
}
.liuy-left {
width: 590px;
height:450px;
float: left;
background: url(../images/box12-1.jpg) no-repeat;
}
.liuy-right {
width: 550px;
height: 450px;
float: left;
}
.l-liuyan {
width: 520px;
margin: 0 auto;
}
.l-liuyan input{ width: 330px;
height: 30px;
border: #cecccc 1px solid;
float: left;
margin-right: 30px;
margin-bottom: 20px;
padding-left: 30px;
font-size: 16px;
float: left;}
.l-liuyan span{ float: left;
line-height: 30px;
font-size: 18px;
width: 120px;
}
.l-anniu {
width: 150px;
height: 55px;
background: #217fc5;
text-align: center;
line-height: 50px;
font-size: 14px;
color: #FFF;
margin: 0 auto;
margin-top: 45px;
margin-bottom: 97px;
}
.jies {
width: 1140px;
margin: 0 auto;
margin-top: 0px;
margin-bottom: 0px;
margin-top: 20px;
margin-bottom: 50px;
}
.lv-box{ height:225px; padding:20px 0px;}
.lv-box img{ width:300px; height:203px; float:left; margin-right:20px;}
.lv-box-r{ width:820px; height:225px; float:left;}
.lv-box .lv-tit{ font-size:16px; height:40px; line-height:40px; font-weight:bold;}
.lv-box p{ font-size:14px; line-height:30px; float:left; text-indent:2em;}
.lv-box a{ color:#000;}
.lv-box span{ height:50px; line-height:50px; float:right; margin-right:20px;}
.lv-box span a{ color:#F00;}
.ncontu {
line-height: 22px;
padding: 0px 12px;
color: #464646;
height: 470px;
width: 1140px;
}
.ncontu ul {
padding:0px;
}
.ncontu ul li {
width: 260px; float: left; height: 280px; overflow:hidden;
margin:0px 10px;
text-align:center;
}
.ncontu ul li p{
line-height:30px;
font-size:14px;
}
.nr {
width: 1140px;
height: auto;
overflow: hidden;
background: #FFF;
padding-top: 20px;
padding-bottom: 20px;
}
.llbx1{ height:250px; }
.llbx1 img{ margin:0px 20px; float:left; }
.llbx1 .wenzi{ width:800px; float:left; }
.llbx1 .wenzi p{ font-size:16px; line-height:30px; text-indent:2em;}
.llbx2{height:250px; }
.llbx2 p{ font-size:16px; line-height:30px;}
.llbx2 img{ float:left; margin:0px 20px;}
.llbx2 .wenzi{ width:650px; float:left; margin-left:20px;}
.llbx2 .wenzi p{ font-size:16px; line-height:30px; text-indent:2em;}
.neir{ width:1140px; height:auto;
overflow:hidden;
margin-bottom:30px;}
.neir img{ float:right; margin-left:20px;}
.neir p{ text-indent:2em; line-height:30px; margin-bottom:20px; font-size:16px;} 六、遇到問題及如何解決🔍
實訓中遇到得困難不少，比如如何收集适合網頁的圖檔素材、如何讓網頁的配色看着更自然更舒适、如何用PS裁剪大小合适的圖檔、以及制作表單時候如何設計等等，最後，通過上網查詢和請教别人得到了很好的解決。
七、實訓總結😊
通過這次網頁設計制作實訓，能夠靈活的運用到所學的知識和技巧制作簡單的網頁，掌握了個人網站建設的技巧和基本網站建設的過程。對于用Dreamweaver、vscode、hbuider等制作網頁更為得心應手。實訓過程中我盡量充分利用老師教過的知識，對所學知識進行了鞏固。為了制作出更好的效果我也翻閱參考了其他資料，學習到了更多的網頁處理技巧。制作網頁的過程中遇到很多的問題，通過查找資料或詢問同學都有得到解決。這次綜合實訓我的收獲很大，學有所用，在實踐的過程中學習鞏固對知識能有更深的記憶。網頁制作是一門很實用的學科，值得我以後進行更深入的學習。這次實訓中我也體會到了自己掌握的技巧太少了，以至于很多想法都沒能實作，在以後的學習過程中我要對網頁制作有更深的了解，做出更為成熟的網頁。
八、更多幹貨🎁
1.如果我的部落格對你有幫助、如果你喜歡我的部落格内容，
請 “👍點贊” “✍️評論” “💙收藏”
一鍵三連哦！
2.
❤️【👇🏻👇🏻👇🏻關注我| 擷取更多源碼 | 優質文章】
帶您學習各種前端插件、3D炫酷效果、圖檔展示、文字效果、以及整站模闆 、大學生畢業HTML模闆 、期末大作業模闆 、等! 「在這裡有好多 前端 開發者，一起探讨 前端 Node 知識，互相學習」！