【作者主页-获取更多优质源码】
【Web前端期末作业-毕业设计精品实践案例（1000套）】
文章目录
1. 网站标题
旅游景点介绍、旅游景点、家乡介绍等网站设计制作。
2. 网站说明✍️
旅游景点介绍html旅游网页制作，旅游景点简介、行政区划、地理环境、自然环境、教育、体育、旅游景点、城市荣誉等。网站主要展示当地风土人情，通过增加游客的互动体验访客留言。 同时，当地旅游网站各网页均采用统一的设计风格，增强城市整体面貌的统一宣传效果。 最重要的是要为旅游网站打造独特的风格来吸引浏览者的注意力。
3.网站介绍
网站布局：拟采用目前主流的浮动网页布局结构，兼容各大主流浏览器，显示效果稳定。
网站编程：拟采用最新的网页编程语言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代码）。
4、网站效果
网站设计制作的重点是网页整体设计的布局和网页整体内容的主题选择。
网站设计：策划实现简洁大方的网页设计效果。
网站功能方面：计划实现各页面之间的链接跳转功能、鼠标悬停在文字上时变色功能、首页简单的动态图片切换功能、简单的表单提交功能。
5.网站代码制作部分
(1)网站首页的布局决定了各个版块的内容，采用DIV+CSS布局。 另外，首页用到的知识主要有图片插入、动态图片切换、导航栏、使用CSS固定字体、文字大小、文字颜色、背景颜色等。
（2）页面采用DIV+CSS布局，用到的知识主要有图片插入、导航栏、使用CSS固定字体、文字大小、文字颜色、背景颜色。
(3)表单页面采用DIV+CSS布局。 用到的知识主要包括使用表单表单、输入文本框和输入提交按钮来完成表单信息的收集。 使用CSS设置输入提交按钮的文本大小和颜色。
HTML结构代码
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
<script src="js/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Eco Travel Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template,
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false);
function hideURLbar(){ window.scrollTo(0,1); } </script>
<script type="text/javascript" src="js/move-top.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$(".scroll").click(function(event){
event.preventDefault();
$('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
});
});
</script>
</head>
<body>
<div class="banner-with-text">
<div class="container">
<div class="header">
<div class="header-top">
<input type="text" placeholder="搜查" required=" ">
</div>
<div class="clearfix"> </div>
<div class="header-bottom">
<div class="header-bottom-left">
<a href="index.html">生态<span>旅行</span></a>
</div>
<div class="header-bottom-right">
<span class="menu">菜单</span>
<ul class="nav1">
<li class="cap"><a href="index.html">首页</a></li>
<li><a href="about.html">关于</a></li>
<li><a href="events.html">事件</a></li>
<li><a href="gallery.html">美术馆</a></li>
<li><a href="blog.html">博客</a></li>
<li><a href="contact.html">联系</a></li>
</ul>
<script>
$( "span.menu" ).click(function() {
$( "ul.nav1" ).slideToggle( 300, function() {
// Animation complete.
});
});
</script>
</div>
<div class="clearfix"> </div>
</div>
</div>
<script src="js/responsiveslides.min.js"></script>
<script>
// You can also use "$(window).load(function() {"
$(function () {
// Slideshow 4
$("#slider3").responsiveSlides({
auto: true,
pager: true,
nav: false,
speed: 500,
namespace: "callbacks",
before: function () {
$('.events').append("before event fired. ");
},
after: function () {
$('.events').append("after event fired. ");
}
});
});
</script>
<div id="top" class="callbacks_container wow fadeInUp" data-wow-delay="0.5s">
<ul class="rslides" id="slider3">
<li>
<div class="banner">
<div class="jumbotron banner-info">
<h1>坐伏龙</h1>
<p>我们清楚地知道，这是一个普遍的错误
鸦片酊，鸦片酊，鸦片酊
他有一个真实的和准建筑师的经历
我要向你解释鸦片酊，鸦片酊，鸦片酊
他是一个发明家，也是一个准建筑师。</p>
<p><a class="btn btn-primary btn-lg" href="single.html" role="button">READ MORE</a></p>
</div>
</div>
</li>
ooter-top-grid">
<h3>与我们联系</h3>
<div class="twi-txt">
<div class="twi">
</div>
<div class="twi-text">
<p>在Twitter上关注我们</p>
</div>
<div class="clearfix"> </div>
</div>
<div class="twi-txt1">
<div class="twi">
</div>
<div class="twi-text">
<p>
在Flickr上查看我们</p>
</div>
<div class="clearfix"> </div>
</div>
<div class="twi-txt1">
<div class="twi">
</div>
<div class="twi-text">
<p>成为Facebook的粉丝</p>
</div>
<div class="clearfix"> </div>
</div>
</div>
<div class="col-md-4 footer-top-grid">
<h3>附加功能</h3>
<ul class="last">
<li>乌特姆-基布斯丹临时酒店</li>
<li>还是你需要一份工作？</li>
<li>这种需求经常发生。</li>
<li>以及志愿者,</li>
<li>你不能利用他们</li>
<li>这里有一些人是聪明和被轻视的。</li>
</ul>
</div>
<div class="clearfix"> </div>
</div>
</div>
<div class="footer">
<p>版权及副本；2015.公司名称保留所有权利。<a target="_blank" href="http://www.17sucai.com/">网页模板</a></p>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
/*
var defaults = {
containerID: 'toTop', // fading element id
containerHoverID: 'toTopHover', // fading element hover id
scrollSpeed: 1200,
easingType: 'linear'
};
*/
$().UItoTop({ easingType: 'easeOutQuart' });
});
</script>
</body>
</html>
CSS样式代码
.header-bottom-left a span{
display:block;
}
.header-bottom-left a:hover{
text-decoration:none;
color:#fff;
}
.header-bottom-right{
float:right;
width:65%;
}
.header-bottom-right span{
display:none;
}
.header-bottom-right{
background:#9cc303;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
-ms-border-radius: 5px;
}
.header-bottom-right ul{
padding:1em 2em;
margin:0;
}
.header-bottom-right ul li{
display:inline-block;
margin:0 15px;
}
.header-bottom-right ul li a{
font-size:15px;
color:#fff;
text-decoration:none;
font-family: 'Roboto Slab', serif;
}
.header-bottom-right ul li a:hover,.header-bottom-right ul li.cap a{
color:#000;
text-decoration:none;
}
/*-- //header --*/
/*-- banner --*/
.banner-with-text{
background: url(../images/2.jpg) no-repeat 0px -170px;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
-ms-background-size: cover;
min-height: 770px;
}
.banner-with-text1{
background: url(../images/2.jpg) no-repeat 0px -170px;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
-ms-background-size: cover;
min-height:170px;
}
.banner-info{
margin:5em 0 0 33em;
width: 54%;
background:none !important;
padding: 3em !important;
}
.jumbotron{
padding:15em 0 0 5em;
}
.jumbotron h1{
color:#FFFFFF !important;
font-weight: 300;
margin: 0;
font-size: 40px !important;
font-family: 'Roboto Slab', serif;
}
6、遇到的问题及解决方法
在培训过程中我遇到了很多困难，比如如何收集适合网页的图片素材、如何让网页的配色看起来更加自然舒适、如何使用PS裁剪合适尺寸的图片、如何设计等。最后卡通形象，通过网上搜索和询问别人，得到了一个很好的解决方案。
七、实训总结
通过这次网页设计和制作培训，我能够灵活运用所学的知识和技能制作简单的网页，掌握个人网站建设的技巧和基本的网站建设流程。 使用Dreamweaver、vscode、hbuider等制作网页比较舒服。 在培训过程中，我努力充分运用老师所传授的知识，巩固所学的知识。 为了做出更好的效果，我还阅读和参考了其他资料，学习了更多的网页处理技巧。 制作网页的过程中遇到了很多问题，都是通过查资料或者请教同学来解决的。 通过这次全面的培训，我收获颇多。 我学到的东西很有用。 在实践的过程中html旅游网页制作，我能够学习和巩固知识，记忆也更加深刻。 网页制作是一门实践性很强的学科，值得我今后进一步研究。 在这次实训中表情包设计，我也意识到自己的技术太少，导致很多想法没能实现。 在以后的学习过程中，我将对网页制作有更深入的了解，创作出更成熟的网页。
- 本文固定链接: https://wen.nuanque.com/wangye/13700.html
- 转载请注明: nuanquewen 于 吉祥物设计/卡通ip设计/卡通人物设计/卡通形象设计/表情包设计 发表
- 文章或作品为作者独立观点不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。本文之内容为用户主动投稿和用户分享产生，如发现内容涉嫌抄袭侵权，请联系在线客服举报，一经查实，本站将立刻删除。本站转载之内容为资源共享、学习交流之目的，请勿使用于商业用途。
