基于HTML旅游网站设计与实现 途游网站制作 学生DW静态旅游网页设计 html静态旅游风景区网页设计制作 web前端课程设计 web前端课程设计代码 web课
原创基于HTML旅游网站设计与实现 途游网站制作 学生DW静态旅游网页设计 html静态旅游风景区网页设计制作 web前端课程设计 web前端课程设计代码 web课
原创
👨🎓静态网站的编写主要是用 HTML DⅣV+ CSSJS等来完成页面的排版设计👩🎓，一般的网页作业需要融入以下知识点：div布局、浮动定位、高级css、表格、表单及验证、js轮播图、音频视频Fash的应用、uli、下拉导航栏、鼠标划过效果等知识点，学生网页作业源码，制作水平和原创度都适合学习或交作业用，记得点赞。
💝 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】
@TOC
<hr>
一、网站题目👨🎓
🚀 旅游景点介绍、旅游风景区、家乡介绍、等网站的设计与制作。
<hr>
二、网站描述✍️
旅游景点介绍、旅游风景区是一个介绍简介、行政区划、地理环境、自然环境、教育事业、体育事业、旅游景点、城市荣誉等等。网站集中主要展示了的地方风土人情，并通过访客留言，增加游客的互动体验。同时，地方旅游网站里的每一个网页都采用了统一的设计风格，以加强城市整体面貌统一的宣传效果。最重要的是做出旅游网站独特的风格，更能吸引浏览者的眼球。
<hr>
三、网站介绍📖
网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。
网站程序方面：计划采用最新的网页编程语言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代码）。
四、网站效果🌐
网站设计制作的重点是对网页整体设计的布局和对网页整体内容的选题。
网站设计方面：计划实现简洁大气的网页设计效果。
网站功能方面：计划实现各个页面之间的链接跳转功能、鼠标悬停在文字上的变色功能、简单的首页动态图片切换功能、简单的表单提交功能。
<hr>
五、网站代码制作部分 📕
（1）网站首页布局确定好各个板块的内容，并使用了DIV+CSS布局。另外首页使用到的知识主要有图片插入、图片动态切换、导航条、利用CSS固定字体、文字大小、文字颜色、背景颜色。
（2）页面使用了DIV+CSS布局，使用到的知识主要有图片插入、导航条、利用CSS固定字体、文字大小、文字颜色、背景颜色。
（3）表单部分页面使用了DIV+CSS布局，使用到的知识主要有运用了form表单、input文本框和input提交按钮，完成表单信息收集。利用CSS设置input提交按钮文字大小和颜色。
HTML结构代码🧱
<!DOCTYPE HTML>
<html>
<head>
<title>Home</title>
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/responsiveslides.css" rel="stylesheet" type="text/css" media="all">
</head>
<body>
<!-- 顶部区域logo以及导航栏 -->
<div class="header">
<div class="wrap">
<div class="logo">
<a href="index.html">途游</a>
</div>
<div class="top-nav">
<ul>
<li class="active"><a href="index.html">主页</a></li>
<li><a href="about.html" >关于</a></li>
<li><a href="services.html">美食</a></li>
<li><a href="contact.html">反馈</a></li>
</ul>
</div>
<div class="clear"> </div>
</div>
</div>
<div class="clear"> </div>
<div class="banner">
<ul class="banner-content" id="banner-content">
<li><img src="img/1.jpeg" ></li>
<li><img src="img/2.jpeg" ></li>
<li><img src="img/3.jpeg" ></li>
<li><img src="img/4.jpeg" ></li>
<li><img src="img/5.jpeg" ></li>
</ul>
<ul class="btn-list" id="btn-list">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<!-- 内容区域 -->
<div class="content">
<div class="content_top">
<div class="wrap">
<h1><a href="#">欢迎</a></h1>
<p>这是一个旅游网站，这里会给你推荐丽江的各种类型的旅游景点，当地特色，美食等...</p>
<span><a class="learnmore" href="#">GO!</a></span>
</div>
</div>
<div class="content-grids">
<div class="wrap">
<div class="grid">
<a href="#"><img src="img/5.jpeg" title="image-name" /></a>
<h3>丽江蓝月谷瀑布</h3>
<p>蓝月谷地处云南省丽江市玉龙纳西族自治县玉龙雪山东麓，俗称“白水河”，以其巍峨壮美的雪山、湛蓝如玉的湖水与雄齐秀丽的峡谷风光享誉世界，因湖水湛蓝、山谷呈月牙状而得名，相传是英国作家詹姆斯·希尔顿笔下《消失的地平线》中蓝月亮山谷的原型。</p>
<a class="button">了解更多</a>
</div>
<div class="grid">
<a href="#"><img src="img/6.jpeg" title="image-name" /></a>
<h3>泸沽湖旅游景区</h3>
<p>泸沽湖古称鲁窟海子，又名左所海，俗称亮海。纳西族摩梭语“泸”为山沟，“沽”为里，意即山沟里的湖。泸沽湖旅游景区四周崇山峻岭，一年有三个月以上的积雪期。森林资源丰富，山清水秀，泸沽湖被当地摩梭人奉为“母亲湖”。也被人们誉为“蓬莱仙境”。
</p>
<a class="button">了解更多</a>
</div>
<div class="grid last-grid">
<a href="#"><img src="img/7.jpeg" title="image-name" /></a>
<h3>蓝月谷</h3>
<p>蓝月谷地处云南省丽江市玉龙纳西族自治县玉龙雪山东麓，俗称“白水河”，以其巍峨壮美的雪山、湛蓝如玉的湖水与雄齐秀丽的峡谷风光享誉世界，因湖水湛蓝、山谷呈月牙状而得名，相传是英国作家詹姆斯·希尔顿笔下《消失的地平线》中蓝月亮山谷的原型。</p>
<a class="button">了解更多</a>
</div>
<div class="clear"> </div>
</div>
</div>
<div class="specials">
<div class="wrap">
<div class="specials-heading">
<h3>丽江推荐景点</h3>
</div>
<div class="specials-grids">
<div class="special-grid">
<img src="img/8.jpeg" width="200px" height="250px" title="image-name" />
<a href="#">丽江蓝月谷</a>
<p>烟花姹紫嫣红 , 转瞬即逝犹如昙花一现。时间飞逝,花开花谢,云卷云舒,记住当前的美好时光,每天带给自己阳光和笑容</p>
</div>
<div class="special-grid">
<img src="img/9.jpeg" width="200px" height="250px" title="image-name" />
<a href="#">丽江古城</a>
<p>丽江古城内的街道依山傍水修建，以红色角砾岩铺就，有四方街、木府、五凤楼、黑龙潭、文昌宫、王丕震纪念馆、雪山书院、王家庄基督教堂、方国瑜故居、白马龙潭寺、顾彼得旧居、净莲寺、普贤寺、接风楼、十月文学馆、红军长征过丽江指挥部纪念馆、丽江古城历史文化展示馆、丽江古城徐霞客纪念馆等景点。丽江为第二批被批准的中国历史文化名城之一，是中国以整座古城申报世界文化遗产获得成功的两座古城之一。</p>
</div>
<div class="special-grid spe-grid">
<img src="img/10.jpeg" width="200px" height="250px" title="image-name" />
<a href="#">丽江古城</a>
<p>自景区恢复营业之日起至2020年12月31日，全国医护工作者凭本人执业医师证、护士资格证及身份证到丽江古城休养度假，即可免费入住参与“宿暖逆行者”活动的客栈。</p>
</div>
<div class="clear"> </div>
</div>
</div>
</div>
<div class="testmonials">
<div class="wrap">
<div class="testmonial-grid">
<h3>感谢浏览</h3>
<p>感谢各位的浏览，这里推荐的是丽江的风景丽江市位于云贵高原与青藏高原的连接部位，地势西北高而东南低，最高点为玉龙雪山主峰，属低纬暖温带高原山地季风气候，境内水利资源丰富，动植物种类繁多，为云南省重点林区、中国水电西电东送基地之一。</p>
<a href="#"> 回到顶部</a>
</div>
</div>
</div>
</div>
<div class="clear"> </div>
<!-- 底部区域 -->
<div class="footer">
<div class="wrap">
<div class="footer-grids">
<div class="footer-grid">
<h3>丽江</h3>
<p>丽江古城又叫大研镇，它由大研、白沙、束河三部分组成，大研古城是它们的集中代表，所以人们常常把它叫作大研古城或大研镇。而且大研古城位于丽江盆地的中心，古城的西南角耸立着酷似书天巨笔的文笔锋，丽江盆地则象一方碧玉做成的大砚台。</p>
</div>
<div class="footer-grid">
<h3>最近文章</h3>
<ul>
<li><a href="#">丽江古城</a></li>
<li><a href="#">茶马古道</a></li>
<li><a href="#">玉龙雪山</a></li>
<li><a href="#">蓝月谷</a></li>
</ul>
</div>
<div class="footer-grid">
<h3>帮助</h3>
<ul>
<li><a href="#">获取更多内容</a></li>
<li><a href="#">对页面不了解 </a></li>
<li><a href="#">其他推荐</a></li>
<li><a href="#">对网页更多了解 </a></li>
</ul>
</div>
<div class="footer-grid footer-lastgrid">
<h3>联系我们</h3>
<p>可以通过电话，QQ，邮件</p>
<div class="footer-grid-address">
<p>座机:0311-85268579</p>
<p>QQ: xxx</p>
<p>Email:<a class="email-link" href="#">xxx@qq.com</a></p>
</div>
</div>
<div class="clear"> </div>
</div>
</div>
</div>
<!-- 底部版权区 -->
<div class="clear"> </div>
<div class="copy-right">
<p>Copyright © <a>xxx</a><a></a></p>
</div>
</body>
<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
</html>CSS样式代码🏡
/* 设置logo样式 */
.logo {
float: left;
}
.logo a {
line-height: 99px;
font-size: 30px;
color: #FFFFFF;
font-family: "楷体";
}
/* 设置轮播图样式溢出文本隐藏 */
.banner{
position: relative;
overflow: hidden;
width: 100%;
max-width: 1920px;
height: 480px;
box-shadow: 10px 10px 10px 2px rgb(0 0 0 / 20%);
}
/* 轮播图内容的宽度 */
.banner-content{
position: relative;
width: 500%;
font-size: 0;
left : 0;
transition: all 1s;
}
/* 每个轮播图的宽度 */
.banner-content li{
width: 20%;
display: inline-block;
}
/* 每个轮播图的图片大小宽度 */
.banner-content li img{
width: 100%;
height: 480px;
max-width: 1920px;
}
/* 轮播图下面按钮增加相对定位居中显示 */
.btn-list{
position: absolute;
bottom: 10px;
left: 50%;
transform: translate(-50%,-50%);
}
/* 轮播图每个按钮增加背景色 */
.btn-list li{
display: inline-block;
width: 14px;
height: 14px;
border-radius: 100%;
background-color: #F2F2F2;
margin: 0 15px;
cursor: pointer;
}
/* 增加伪类 */
.btn-list .active{
background-color: red;
}<hr>
六、遇到问题及如何解决🔍
实训中遇到得困难不少，比如如何收集适合网页的图片素材、如何让网页的配色看着更自然更舒适、如何用PS裁剪大小合适的图片、以及制作表单时候如何设计等等，最后，通过上网查询和请教别人得到了很好的解决。
<hr>
七、实训总结😊
通过这次网页设计制作实训，能够灵活的运用到所学的知识和技巧制作简单的网页，掌握了个人网站建设的技巧和基本网站建设的过程。对于用Dreamweaver、vscode、hbuider等制作网页更为得心应手。实训过程中我尽量充分利用老师教过的知识，对所学知识进行了巩固。为了制作出更好的效果我也翻阅参考了其他资料，学习到了更多的网页处理技巧。制作网页的过程中遇到很多的问题，通过查找资料或询问同学都有得到解决。这次综合实训我的收获很大，学有所用，在实践的过程中学习巩固对知识能有更深的记忆。网页制作是一门很实用的学科，值得我以后进行更深入的学习。这次实训中我也体会到了自己掌握的技巧太少了，以至于很多想法都没能实现，在以后的学习过程中我要对网页制作有更深的了解，做出更为成熟的网页。
💂【获取方式】
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。