👨🎓学生HTML静态网页基础水平制作👩🎓，页面排版干净简洁。使用HTML+CSS页面布局设计,web大学生网页设计作业源码，这是一个不错的旅游网页制作，画面精明，排版整洁，内容丰富，主题鲜明，非常适合初学者学习使用, 这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。
🏀 精彩专栏推荐👇🏻👇🏻👇🏻
💝 【作者主页——🔥获取更多优质源码】
💝 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】
文章目录🌰
- 一、网站题目👨🎓
- 二、网站描述✍️
- 三、网站介绍📖
- 四、网站效果🌐
- 五、网站代码制作部分 📕
- 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 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="x-ua-compatible" content="ie=7" />
<meta name="keywords" content="武汉旅游网,武汉,旅游">
<meta name="description" content="武汉旅游网">
<title>武汉旅游网</title>
<link href="css/layout.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/changeImages.js"></script>
</head>
<body>
<div id="container">
<div id="head">
<div id="head_inner">
<div id="logo"><img src="images/logo.png" width="260" height="50" border="0"/></div>
<div id="head_inner_top"><a onclick="javascript:window.external.AddFavorite('http://www.domain.com','武汉旅游网')" href="#"><font color="#ffffff">添加收藏</font></a> <a onclick="javascript:this.style.behavior='url(#default#homepage)';this.setHomePage(window.location);" href="#"><font color="#ffffff">设为首页</font></a> <a href="map.html">武汉地图</a></div></div>
<div id="nav_menu"><a href="index.html" title="">首页</a> <a href="news.html">行业动态</a> <a href="scenic.html"> 景点资讯</a> <a href="food.html">美食资讯</a> <a href="hotel.html">酒店资讯</a> <a href="guide.html">旅游指南</a> <a href="photography.html">摄影展示</a> <a href="contact.html">联系方式</a></div>
</div>
<div id="mainbody">
<div id="view_bar">
<!-- <img src="images/bar.jpg" width="1000" height="320" border="0"/> -->
<script language="javascript" type="text/javascript">ImageShow();</script>
</div>
<div id="main_layout">
<div id="main_layout_left">
<div id="main_layout_left_tit"><a class="cls_a" href="news.html" title="more">行业动态</a></div>
<div class="info_list">
<ul>
<li><a href="show.html">我国将建立旅游业“黑名单” </a>(2012-10-28)</li>
<li><a href="show.html">充分发挥旅游景区廉政教育功能</a>(2012-10-28)</li>
<li><a href="show.html">湖北省门票管理新规出台</a>(2012-10-28)</li>
<li><a href="show.html">全国180家景区门票国庆降价</a>(2012-10-28)</li>
<li><a href="show.html">国家旅游局领导检查假日旅游准备工作</a>(2012-10-28)</li>
<li><a href="show.html">我国旅游业向民间资本全方位开放</a>(2012-10-28)</li>
<li><a href="show.html">中国旅游卡宣传推广启动仪式在京举办</a>(2012-10-28)</li>
<li><a href="show.html">抓质量就是抓旅游业的长远发展</a>(2012-10-28)</li>
</ul>
</div>
</div>
<div id="main_layout_right">
<div id="main_layout_right_tit"><a class="cls_a" href="scenic.html" title="more">景点资讯</a></div>
<div id="main_layout_right_container">
<div class="info_list">
<ul>
<li><a href="#">武汉市深入推进标准化创建工作</a>(2012-10-28)</li>
<li><a href="#">武汉赴西安推介“大江大湖大武汉”</a>(2012-10-28)</li>
<li><a href="#">武汉将现全球最高跨江摩天轮</a>(2012-10-28)</li>
<li><a href="#">2012中国武汉国际旅游节大盘点 </a>(2012-10-28)</li>
<li><a href="#">我国将建立旅游业“黑名单” </a>(2012-10-28)</li>
<li><a href="#">我国旅游业向民间资本全方位开放</a>(2012-10-28)</li>
<li><a href="#">中国旅游卡宣传推广启动仪式在京举办</a>(2012-10-28)</li>
<li><a href="#">抓质量就是抓旅游业的长远发展</a>(2012-10-28)</li>
</ul>
</div>
</div>
</div>
<div id="main_layout_middle">
<div id="main_layout_middle_tit"><a class="cls_a" href="scenic1.html" title="more">景点推荐</a></div>
<div id="main_layout_middle_container">
<div class="cont_pic"><a href="#"><img src="images/scenic.jpg" width="200" height="175" /></a></div>
<div class="cont_text">黄鹤楼位于湖北省武汉市。江南四大名楼之一，国家旅游胜地四十佳。素有“天下江山第一楼”之美誉。冲决巴山群峰，接纳潇湘云水，浩荡长江在三楚腹地与其最长支流汉水交汇，造就了武汉隔两江而三镇互峙的伟姿。这里地处江汉平原东缘，鄂东南丘陵...</div>
</div>
</div>
</div>
<div id="clr"></div>
</div>
<div id="view_layout">
<div id="view_layout_tit"><a class="cls_a" href="photography.html" title="more">摄影展示</a></div>
<div class="view_list">
<ul>
<li><a href="#"><img src="images/view_1.jpg" alt="黄鹤楼" border="0" width="192" height="150"></a></li>
<li><a href="#"><img src="images/view_2.jpg" alt="东湖" border="0" width="192" height="150"></a></li>
<li><a href="#"><img src="images/view_3.jpg" alt="省博物馆" border="0" width="192" height="150"></a></li>
<li><a href="#"><img src="images/view_4.jpg" alt="归元寺" border="0" width="192" height="150"></a></li>
<li><a href="#"><img src="images/view_5.jpg" alt="长江大桥" border="0" width="192" height="150"></a></li>
</ul>
</div>
</div>
<div id="links_layout">
友情链接: <a href="#">湖北旅游网</a> <a href="#">湖南旅游网</a> <a href="#">河南旅游网</a> <a href="#">北京旅游网</a> <a href="#">上海旅游网</a> <a href="#">天津旅游网</a> <a href="#">重庆旅游网</a> <a href="#">香港旅游网</a> <a href="#">厦门旅游网</a> <a href="#">台湾旅游网</a>
</div>
</div>
<div id="foot">
<div class="cr">
服务热线: 027-55555555 传真: 027-66666666<br>
Powered by: <span class="color_green">Dai Lulu</span> Email: <a href="mailto:service@domain.com" title="Contact Email">service@domain.com</a>
<div class="xhtml">
<a href="http://validator.w3.org/check?uri=referer" target="_blank">XHTML 1.0</a> | <a href="http://jigsaw.w3.org/css-validator/check/referer" target="_blank">CSS</a> | <a href="#" target="_blank">RSS</a> | <a href="#" target="_blank">V3.2</a>
</div>
</div>
</div>
</div>
</body>
</html>
CSS样式代码🏡
/* Home page stylesheet
* Description:
* This is the default Cascading Style Sheets.
* The style is compatibility in the mainstream of current browsers.
* The style is normally displayed in the most of modern monitors.
* Author: , Date:
* Copyright (c)
*/
/*** Styles Start ***/
/*Basic Style*/
*{margin:0 auto;}
body {font-family:"宋体",Arial,Verdana; font-size:12px; margin:0;background:#fff;background:url('../images/bg.png') repeat-x;}
a:link,a:visited {color:#4b4b4b; font-size:12px; text-decoration:none;}
a:hover {color:#00c; font-size:12px; text-decoration:none;}
img {border:0;}
button {margin:0;padding:0;font-size:12px;height:26px;}
form {margin:0;}
/*Body container style*/
#container {margin:0 auto;padding:0;width:1000px;}
/*Top div style*/
#head {margin:0;padding:0;width:1000px;}
#logo {float:left;margin:20px 0 0 20px;width:200px;height:50px;}
#head_inner {margin:0;padding:0;width:1000px;height:82px;background:url('../images/top.jpg') no-repeat;}
#head_inner_top {margin:20px 50px 0 0;padding:0;text-align:right;}
#head_inner_top a:link,#head_inner_top a:visited {color:#fff;font-size:13px;text-decoration:none;}
#head_inner_top a:hover {color:#fdf;text-decoration:underline;}
#nav_menu {margin:0;padding:0;width:1000px;height:40px;line-height:40px;text-align:center;background-color:#0080cc; }
#nav_menu a:link,#nav_menu a:visited {color:#fff;font-size:14px;text-decoration:none;}
#nav_menu a:hover {color:#fdf;text-decoration:none;}
/*Mainbody div style*/
#mainbody {margin:0;padding:0;width:1000px;background:#fff;}
/**Mainbody Layout div style*/
#view_bar {margin:0;padding:0;width:1000px;height:320px;background:#fff;}
#main_layout {margin:10px auto;padding:0;width:1000px;}
#main_layout_left {float:left;width:300px;height:235px;border:#cfcfef 1px solid;}
#main_layout_left_tit {margin:10px 0 0 10px;padding:0;height:22px;}
#main_layout_middle{margin-left:305px;_margin-left:300px;width:388px;height:235px;border:#cfcfef 1px solid;}
#main_layout_middle_tit {margin:10px 0 0 10px;padding:0;font-size:14px;height:22px;}
#main_layout_middle_container {margin:12px 0 0 10px;padding:0;width:368px;}
.cont_pic {float:left;width:135px;}
.cont_text {float:right; margin:0;width:160px;color:#333;font-size:12px;line-height:20px;}
#main_layout_right {float:right;width:300px;height:235px;border:#cfcfef 1px solid;}
#main_layout_right_tit {margin:10px 0 0 10px;padding:0;font-size:14px;height:22px;}
#main_layout_right_container {margin:0px;}
#view_layout {margin:0;padding:0;width:998px;height:195px;border:#cfcfef 1px solid;}
#view_layout_tit {margin:10px 0 0 10px;padding:0;font-size:14px;height:22px;}
#view_layout ul li {margin-left:5px;padding:0;float:left;list-style-type:none;}
#links_layout {margin-top:10px;padding-left:10px;width:988px;font-size:14px;height:40px;line-height:40px;border:#cfcfef 1px solid;}
#links_layout a:link,#links_layout a:visited {color:#333;font-size:14px;text-decoration:none;}
#links_layout a:hover {color:#33c;font-size:14px;text-decoration:none;}
.cls_a:link,.cls_a:visited {color:#000;font-size:14px;text-decoration:none;}
.cls_a:hover {color:#33c;font-size:14px;text-decoration:none;}
.info_list {margin:5px auto;padding:0;}
.info_list ul {}
.info_list ul li {margin:0;padding:0 0 0 15px;height:24px;line-height:24px;list-style-type:none;background:url('../images/list_ico.gif') 5px 11px no-repeat;}
.info_list ul li span {float:right;margin-right:20px;}
.info_list ul li a:link,.info_list a:visited {color:#4b4b4b;text-decoration:none;}
.info_list ul li a:hover {color:#33c;text-decoration:none;}
.info_list_n {margin:3px 0;padding:0;}
.info_list_n ul {}
.info_list_n ul li {margin-left:0px;margin-left:10px\9;padding-left:5px;height:28px;line-height:28px;list-style-type:square;}
.info_list_n ul li a:link,.info_list_n a:visited {color: #333;text-decoration: none;}
.info_list_n ul li a:hover {color: #33c;text-decoration: underline;}
/*list pages style*/
#cls_layout_tit {margin-top:10px;padding:0;height:22px;font-size:14px;}
.cls_info_list {margin-top:10px;padding:0;color:#333;}
.cls_info_list ul {margin: 0;padding: 0;list-style-type: none;}
.cls_info_list ul li {font-size:12px;color:#333;line-height:27px;border-bottom:#aaaaee 1px dashed;}
.cls_pic_list {margin-top:10px;padding:0;color:#333;}
.cls_pic_list ul {margin: 0;padding: 0;list-style-type: none;}
.cls_pic_list ul li {padding: 2px;float:left;}
#pages_info {margin-top: 10px;;padding: 0;}
#cls_cont {margin-top:15px;padding:0;min-height:300px;_height:300px;color:#333;border:#cfcfef 1px solid;}
#cls_cont_p {margin:0px;padding:20px;font-family:Arial,Verdana,"宋体";font-size:14px;height:22px;line-height:22px;}
/*show pages style*/
.info_title {margin:0 auto;padding-top:16px;color:#66c;font-size:16px;font-family:'黑体';font-weight:normal;width:900px;height:28px;white-space:nowrap;text-overflow:ellipsis; overflow: hidden;text-align:center;border-bottom:#ccccef 1px solid;}
.info_other {margin:0 auto;padding-top:10px;color:#99b;font-size:12px;height:20px;text-align:center;}
.info_imgs {margin:3px 0 3px 0;padding:0;text-align:center;vertical-align:middle;}
.info_imgs img {vertical-align:middle;}
.info_body {margin:20px auto;width:900px;padding:0;color:#333;font-size:14px;line-height:22px;word-wrap:break-word;text-align:left;overflow:hidden;}
#layout_links {margin-top:10px;padding:0;width:240px;}
#layout_links p {line-height:20px;width:190px;border-bottom:#cfcfef 1px dotted;}
#layout_links a:link,#layout_links a:visited {color:#4b4b4b;text-decoration:none;}
#layout_links a:hover {color:#333;text-decoration:none;}
/*Bottom div style*/
#foot {font-family:Arial,Verdana,"宋体";margin-top:10px;padding:0;width:1000px;height:80px;border-top:#e5e5e5 1px solid;clear:both;background:#fff;}
.cr {margin-top:10px;padding:0;line-height:18px;text-align:center;color:#333333;}
.clr {clear: both;}
.clr:after {content:".";height:0;visibility:hidden;display:block;clear:both;}
/*Other additional style*/
.picshow {z-index:1000; position:relative; background-color:#e4f2fa; width:1000px; height:320px;}
.picshow_main {position:relative; width:1000px; height: height:320px;}
.picshow_main .imgbig {filter: progid:dximagetransform.microsoft.wipe(gradientsize=1.0,wipestyle=4, motion=forward;); width:1000px; height:320px;}
.picshow_change {position:absolute;height:50px;right:10px;top:260px;}
.picshow_change img {width:50px; height:35px;}
.picshow_change a {float:left; margin-right:5px; display:block; -display:inline; border:#000 1px solid;}
a.ax {border-color: #555;}
a.ax:hover {border-color: #000;}
a.ax img {filter: alpha(opacity=40); opacity: 0.3; -moz-opacity: 0.3;}
a.ax:hover img {filter: alpha(opacity=100); opacity: 1.0; -moz-opacity: 1.0;}
a.bx {border-color: #000;}
a.bx:hover {border-color: #000;}
/*tags*/
table {border-collapse:collapse; border-spacing:0;}
address,caption,cite,code,dfn,em,strong,th,var {font-style:normal;font-weight:normal; }
ol,ul {list-style:none;}
caption,th {text-align:left;}
h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal;}
q:before,q:after {content:'';}
abbr,acronym {border:0; }
button{line-height:1.2;vertical-align:middle;cursor:pointer;}
strong{font-weight:800;}
/*** Styles End ***/
六、遇到问题及如何解决🔍
实训中遇到得困难不少，比如如何收集适合网页的图片素材、如何让网页的配色看着更自然更舒适、如何用PS裁剪大小合适的图片、以及制作表单时候如何设计等等，最后，通过上网查询和请教别人得到了很好的解决。
七、实训总结😊
通过这次网页设计制作实训，能够灵活的运用到所学的知识和技巧制作简单的网页，掌握了个人网站建设的技巧和基本网站建设的过程。对于用Dreamweaver、vscode、hbuider等制作网页更为得心应手。实训过程中我尽量充分利用老师教过的知识，对所学知识进行了巩固。为了制作出更好的效果我也翻阅参考了其他资料，学习到了更多的网页处理技巧。制作网页的过程中遇到很多的问题，通过查找资料或询问同学都有得到解决。这次综合实训我的收获很大，学有所用，在实践的过程中学习巩固对知识能有更深的记忆。网页制作是一门很实用的学科，值得我以后进行更深入的学习。这次实训中我也体会到了自己掌握的技巧太少了，以至于很多想法都没能实现，在以后的学习过程中我要对网页制作有更深的了解，做出更为成熟的网页。
八、更多干货🎁
1.如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！
2.❤️【👇🏻👇🏻👇🏻关注我| 获取更多源码 | 优质文章】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！
3.以上内容技术相关问题😈欢迎一起交流学习👇🏻👇🏻👇🏻🔥
