【作者主页-获取更多优质源码】
【Web后端期末作业-优质项目完成项目实战案例（1000套）】
文章目录
1. 网站标题
旅游景点介绍、旅游景区、家乡介绍等网站的设计与制作。
2. 网站说明
旅游景点介绍，是旅游景区简介、行政区划、地理环境、自然环境、教育、体育、旅游景点、城市荣誉等。 网站聚焦当地风土人情，通过宾客留言增加旅客的互动体验。 同时，地方旅游网站各网页均采用统一的设计风格，强化统一城市整体面貌的宣传效果。 最重要的是让旅游网站独特的风格更能吸引浏览者。
三、网站介绍
网站布局方面：拟采用目前主流的浮动网页布局结构，兼容各大主流浏览器，效果稳定。
网站程序：拟采用最新的网页编程语言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>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>XXX</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Free HTML5 Website Template by FreeHTML5.co" />
<meta name="keywords" content="free website templates, free html5, free template, free bootstrap, free website template, html5, css3, mobile first, responsive" />
<meta property="og:title" content="" />
<meta property="og:image" content="" />
<meta property="og:url" content="" />
<meta property="og:site_name" content="" />
<meta property="og:description" content="" />
<meta name="twitter:title" content="" />
<meta name="twitter:image" content="" />
<meta name="twitter:url" content="" />
<meta name="twitter:card" content="" />
<link rel="stylesheet" href="css/animate.css">
<link rel="stylesheet" href="css/icomoon.css">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/hwslider.css" />
<script src="js/modernizr-2.6.2.min.js"></script>
</head>
<body>
<div class="fh5co-loader"></div>
<div id="page">
<nav class="fh5co-nav" role="navigation">
<div class="container">
<div class="row">
<div class="left-menu text-right menu-1">
<ul>
<li>
<a href="index.html">首页</a>
</li>
<li>
<a href="about.html">关于我们</a>
</li>
<li>
<a href="services.html">私人定制</a>
</li>
</ul>
</div>
<div class="logo text-center">
<div id="fh5co-logo">
<a href="index.html"><img src="picture/logo.png.png" /></a>
</div>
</div>
<div class="right-menu text-left menu-1">
<ul>
<li>
<a href="work.html">精选路线</a>
</li>
<li>
<a href="blog.html">旅游攻略</a>
</li>
<li>
<a href="contact.html">联系我们</a>
</li>
</ul>
</div>
</div>
</div>
</nav>
<section>
<div id="hwslider" class="hwslider">
<ul>
<li>
<a href="#"><img src="picture/1.jpg" alt=""></a>
</li>
<li>
<a href="#"><img src="picture/11.jpg" alt=""></a>
</li>
<li>
<a href="#"><img src="picture/111.jpg" alt=""></a>
</li>
</ul>
</div>
</section>
<div>
<section>
<div class="lightModuleOuterContent lightModuleOuterContent317">
<div class="fk-editor simpleText ">
<div style="text-align: center;">
<span style="color: rgb(243, 243, 243); background-color: transparent;">
<span style="font-size: 110px;"><font face="Arial">01</font></span>
</span>
</div>
</div>
</div>
<div class="lightModuleOuterContent lightModuleOuterContent318" style="position: relative;
top: -118px;">
<div class="fk-editor simpleText ">
<div style="text-align: center;">
<span style="font-size: 30px; background-color: transparent;">
<font style="color: rgb(47, 47, 47);" color="#2f2f2f"><b>客户的满意是他们最大的追求</b></font>
</span>
</div>
</div>
</div>
<div class="lightModuleOuterContent lightModuleOuterContent319" style=" position: relative;
top: -50px;">
<div class="fk-editor simpleText ">
<span style="font-size: 15px;">
<font color="#7d7d7d"><span style="line-height: 29px;"><font style="color: rgb(125, 125, 125);" color="#7d7d7d">
<div style="text-align: center;">旅行不是一次出行，也不只是一个假期。旅行是一个过程，一次发现。是一个自我发现的过程。真正的旅行让我们直面自我。</div>
<div style="text-align: center;">旅行不仅让我们看到世界，更让我们看到自己在其中的位置。</div>
</font>
</span>
</font>
</span>
</div>
</div>
</section>
<div id="fh5co-services" class="fh5co-bg-section">
<div class="container">
<div class="row">
<div class="i_serList">
<ul>
<li class="col-md-4 col-xs-12">
<div class="kuang">
<div class="img">
<a class="brand_name" href="news/" style="display: inline;">
<img src="picture/s.png"></a>
<a class="brand_detail" href="news/" style="display: none;">
<img src="picture/s.png"></a>
</div>
<span>
<h2>
<a>行程定制</a></h2>
<p>
择XXX，您不仅能享受到搭乘内河游轮游览欧洲的美妙体验，品尝地道中西美食、巡游人文景观。</p>
</span>
</div>
</li>
<li class="col-md-4 col-xs-12">
<div class="kuang">
<div class="img">
</body>
</html>
CSS样式代码
.hwslider{width: 100%;height:auto;min-width:280px;min-height: 160px; position: relative; overflow: hidden; margin-bottom: -10px;}
.hwslider ul{width: 100%; height:100%; position: absolute; z-index: 1}
.hwslider ul li{display:none;position:absolute; left:0; top:0; width: 100%;height:100%; overflow: hidden; text-align:center;}
.hwslider ul li.active{display: block;}
.hwslider ul li img{width:100%;max-width: 100%; height:auto;display: block;}
.dots{position: absolute; bottom:38px; left:200px; min-width:60px; height: 12px; z-index: 2;}
.dots span{float: left; width:12px;height: 12px; border: 1px solid #fff; border-radius: 50%; background: #333; margin-right: 8px; cursor: pointer;}
.dots span.active{background:orangered}
.arr{display:none;position: absolute; top: 140px; z-index: 2;width: 40px; height: 40px; line-height: 38px; text-align: center;; font-size: 36px; background: rgba(0,0,0,.3); color: #fff; text-decoration: none}
.arr:hover{background: rgba(0,0,0,.7); text-decoration: none;}
.hwslider:hover .arr{display: block; text-decoration: none;color: #fff}
.prev{left: 20px}
.next{right: 20px}
6.遇到的问题以及如何解决
在培训过程中，我遇到了很多困难，比如如何为网页收集合适的图片素材，如何让网页的配色看起来更加自然舒适，如何使用PS剪切合适大小的图片，以及制作时如何设计表格等等，最后通过网上搜索和请教别人得到了一个很好的解决方案。
七、培训总结
通过这次网页设计和制作培训，我能够灵活运用所学的知识和方法制作简单的网页，掌握个人网站建设的方法和基本网站建设的流程。 用Dreamweaver、vscode、hbuider等制作网页更加得心应手。在培训过程中，我努力充分利用老师所教授的知识来巩固所学的知识。 为了取得更好的疗效，我还阅读和参考了其他资料，学习了更多的网页处理方法。 在制作网页的过程中遇到了很多问题旅游个人网站模板分享，通过查找资料或者询问朋友都解决了。 通过这次综合培训，我收获很多，学以致用。 在实践的过程中，我可以学会巩固知识，加深记忆。 网页制作是一门实践性很强的学科，值得以后进一步研究。 在这次培训中，我也感觉自己的方法太少，以至于很多想法没有实现。 在接下来的学习过程中，我会对网页制作有更深入的了解，做出更成熟的网页。 。
