【作者主页-获取更多优质源码】
【Web后端期末作业-毕业设计精品实践案例（1000套）】
文章目录
1. 网站标题
旅游景点介绍、旅游景点、家乡介绍等网站设计制作。
2. 网站说明
旅游景点介绍，是旅游景区简介、行政区划、地理环境、自然环境、教育、体育、旅游景点、城市荣誉等。 网站聚焦当地风土人情，通过宾客留言增加旅客的互动体验。 同时，地方旅游网站各网页均采用统一的设计风格，强化统一城市整体面貌的宣传效果。 最重要的是要为旅游网站打造独特的风格，能够吸引浏览者的眼球。
3.网站介绍
网站布局：拟采用目前主流的浮动网页布局结构，兼容各大主流浏览器，显示效果稳定。
网站编程：拟采用最新的网页编程语言HTML5+CSS3+JS编程语言来完成网站的功能设计。 并保证网站代码兼容目前市面上所有主流浏览器，这样打开后就能立即看到网站。
网站素材方面：计划从各个平台收集好看的图片素材，精心挑选适合网页风格的图片，然后用PS制作出适合网页规格的图片。
网站文件：网站系统文件类型包括：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；
网页编辑：网页作品的代码简单，可以使用任何HTML编辑软件（如：Dreamweaver、HBuilder、Vscode、Sublime、Webstorm、Text、Notepad++等任意html编辑软件来运行、修改、编辑、 ETC。）。
在：
（1）html文件包含：index.html为首页，其他html为副页；
（2）css文件包含：css所有页面样式、文字滚动、图片放大等；
（3）js文件包括：实现动态轮播效果、点击波浪等的js（个别网页使用js代码）。
4. 网站有效性
网站设计制作的重点是网页整体设计的布局和网页整体内容的主题选择。
网站设计：策划实现简洁大方的网页设计效果。
网站功能方面：计划实现各页面之间的链接跳转功能、鼠标悬停在文字上时变色功能、首页简单的动态图片切换功能、简单的表单提交功能。
五、网站代码制作部分
（1）网站首页的布局决定了每只蓝筹股的内容，采用DIV+CSS布局。 另外，首页用到的知识主要有图片插入、动态图片切换、导航栏、使用CSS固定字体、文字大小、文字颜色、背景颜色等。
（2）页面采用DIV+CSS布局，用到的知识主要有图片插入、导航栏、使用CSS固定字体、文字大小、文字颜色、背景颜色。
(3)页面的表单部分采用DIV+CSS布局。 用到的知识主要包括表单表单、输入文本框和输入提交按钮的使用，完成表单信息采集。 使用CSS设置输入提交按钮的文字大小和颜色。
HTML结构代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>主页</title>
</head>
<body>
<div class="container">
<h3>爱上旅游</h3>
<div class="search">
<input type="text" placeholder="输入你想去的地方">
<div class="searchBtn">搜索</div>
</div>
<div class="con">
<ul>
<li>
<a href="list.html">
度假旅游
</a>
</li>
<li>
<a href="list.html">
旅游地排行
</a>
</li>
<li>
<a href="lv.html">
梅里攻略
</a>
</li>
<li>
<a href="wish.html">
我的心愿旅游地
</a>
</li>
<li>
<a href="table.html">
收费标准
</a>
</li>
<li>
<a href="detail.html">
查看详情
</a>
</li>
</ul>
<img src="picture/ban.png" alt="">
</div>
<h4>旅游地</h4>
<div class="list">
<div class="item">
<a href="detail.html">
<div>
<img src="picture/item1.jpg" alt="">
</div>
<div class="txt">云南——梅里雪山</div>
</a>
</div>
<div class="item">
<a href="detail.html">
<div><img src="picture/2.jpg" alt=""></div>
<div class="txt">人间天堂是杭州——浙江杭州</div>
</a>
</div>
<div class="item">
<a href="detail.html">
<div><img src="picture/1.jpg" alt=""></div>
<div class="txt">桂林漓江独秀美——广西桂林</div>
</a>
</div>
<div class="item">
<a href="detail.html">
<div><img src="picture/3.jpg" alt=""></div>
<div class="txt">六朝古都今胜昔——江苏南京</div>
</a>
</div>
<div class="item">
<a href="detail.html">
<div><img src="picture/4.jpeg" alt=""></div>
<div class="txt">心驰神往张家界——湖南张家界</div>
</a>
</div>
<div class="item">
<a href="detail.html">
<div><img src="picture/5.jpg" alt=""></div>
<div class="txt">苏州园林甲天下——江苏苏州</div>
</a>
</div>
<div class="item">
<a href="detail.html">
<div><img src="picture/6.jpg" alt=""></div>
<div class="txt">心灵圣地神农架——神农架</div>
</a>
</div>
<div class="item">
<a href="detail.html">
<div><img src="picture/7.jpg" alt=""></div>
<div class="txt">黄山归来不看岳——安徽黄山</div>
</a>
</div>
<div class="item">
<a href="detail.html">
<div><img src="picture/8.jpg" alt=""></div>
<div class="txt">九寨归来不看水——四川九寨沟</div>
</a>
</div>
<div class="item">
<a href="detail.html">
<div><img src="picture/9.jpg" alt=""></div>
<div class="txt">浪漫爱情的见证地——天涯海角</div>
</a>
</div>
</div>
</div>
</body>
</html>
CSS样式代码
*{
margin: 0;
padding: 0;
}
ul{
width: 240px;
list-style: none;
background: #38414c;
padding: 20px 0;
display: inline-block;
}
.container{
width: 1200px;
margin: 0 auto;
background: #fff;
padding: 20px;
}
h3{
width: 200px;
text-align: center;
display: inline-block;
}
.search{
width: 500px;
height: 60px;
line-height: 60px;
margin-left: 400px;
display: inline-block;
background: rgb(248, 137, 47);
}
.search input{
width: 360px;
height: 52px;
padding-left: 20px;
border: 0;
margin-left: 4px;
margin-top: -4px;
}
.searchBtn{
display: inline-block;
width: 110px;
text-align: center;
background: rgb(248, 137, 47) ;
color: #fff;
}
.con{
margin-top: 20px;
}
li{
height: 60px;
line-height: 60px;
}
a{
color: #fff;
text-decoration: none;
padding-left: 30px;
}
.con img{
width: 950px;
height: 400px;
vertical-align: top;
margin-left: -8px;
}
.item{
display: inline-block;
}
.item img{
width: 292px;
height: 200px;
}
h4{
height: 40px;
line-height: 40px;
}
.item .txt{
width: 292px;
padding: 20px 0;
}
.item a{
color: #000;
}
6.遇到的问题以及如何解决
在培训过程中我遇到了很多困难江阴综合网站设计程序员，比如如何收集适合网页的图片素材，如何让网页的配色看起来更加自然舒适，如何使用PS裁剪出合适尺寸的图片，如何设计等。最后通过网上搜索和请教别人，得到了一个相当不错的解决方案。
七、实训总结
通过这次网页设计与制作培训，我能够灵活运用所学的知识和方法制作简单的网页，掌握个人网站建设的方法和基本的网站建设流程。 使用Dreamweaver、vscode、hbuider等制作网页比较舒服。 在培训过程中，我努力充分运用老师所传授的知识，巩固所学的知识。 为了产生更好的治疗效果，我还阅读和参考了其他资料，学习了更多的网页处理方法。 在制作网页的过程中，遇到了很多问题，通过查找资料或者请教朋友都解决了。 通过这次全面的培训，我收获颇多。 我学到的东西很有用。 在实践的过程中，我能够学习和巩固知识，记忆也更加深刻。 网页制作是一门实践性很强的学科，值得我今后进一步研究。 在这次实训中，我也感觉自己的方法太少了，所以很多想法都没有实现。 在后续的学习过程中，我会对网页制作有更深入的了解江阴综合网站设计程序员，创作出更加成熟的网页。 。
