HTML5期末大作业：旅游网页设计与实现——旅游风景区网站HTML+CSS+JavaScript 景点静态网页设计 学生DW静态网页设计
静态网站的编写主要是用 HTML DⅣV+ CSSJS等来完成页面的排版设计，一般的网页作业需要融入以下知识点：div布局、浮动定位、高级css、表格、表单及验证、js轮播图、音频视频Fash的应用、uli、下拉导航栏、鼠标划过效果等知识点，学生网页作业源码，制作水平和原创度都适合学习或交作业用，记得点赞。
精彩专栏推荐
【作者主页——获取更多优质源码】
【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>
<html>
<head>
<title>主页title>
<link href="css/style.css" rel="stylesheet" type="text/css" media="all">
<link href="css/slider.css" rel="stylesheet" type="text/css" media="all">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
head>
<body>
<div class="container" style="width:100%;padding: 0px;margin: 0px;">
<div class="wrap-box">div>
<div class="header">
<div class="wrap">
<div class="header-top ">
<div class="cssmenu">
<ul>
<li class="active">
<a href="">
<span>主页span>
a>
li>
<li>
<a href="expo.html">
<span>博览span>
a>
li>
<li class="has-sub">
<a href="life.html">
<span>热门span>
a>
li>
<li>
<a href="login.html">
<span>登录span>
a>
li>
<li class="last">
<a href="register.html">
<span>注册span>
a>
li>
<div class="clear">div>
ul>
div>
<div class="clear">div>
div>
div>
<div class="slider">
<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider">
<img src="picture/baohu5.jpg" alt="">
<img src="picture/baohu2.jpg" alt="">
<img src="picture/baohu3.jpg" alt="">
<img src="picture/baohu4.jpg" alt="">
<img src="picture/banner2.jpg" alt="">
div>
div>
div>
div>
<div class="main">
<div class="wrap">
<div class="about">
<div class="about-top row">
<div class="col span_1_of_about col-md-8 col-ms-12">
<h3>热门目的地h3>
<div class="services-box">
<div class="col_1_of_2 span_1_of_2">
<div class="img_container">
<img src="picture/pic10.jpg" alt="">
<div class="mask">周庄div>
div>
<p class="text1">周庄p>
div>
<div class="col_1_of_2 span_1_of_2">
<div class="img_container">
<img src="picture/pic11.jpg" alt="">
<div class="mask">巴厘岛div>
div>
<p class="text1">巴厘岛p>
div>
<div class="clear">div>
div>
<div class="services-box">
<div class="col_1_of_2 span_1_of_2">
<div class="img_container">
<img src="picture/pic12.jpg" alt="">
<div class="mask">罗浮宫div>
div>
<p class="text1">罗浮宫p>
div>
<div class="col_1_of_2 span_1_of_2">
<div class="img_container">
<img src="picture/pic13.jpg" alt="">
<div class="mask">洱海div>
div>
<p class="text1">洱海p>
div>
<div class="clear">div>
div>
<div class="services-box">
<div class="col_1_of_2 span_1_of_2">
<div class="img_container">
<img src="picture/pic14.jpg" alt="">
<div class="mask">故宫div>
div>
<p class="text1">故宫p>
div>
<div class="col_1_of_2 span_1_of_2">
<div class="img_container">
<img src="picture/pic15.jpg" alt="">
<div class="mask">八达岭长城div>
div>
<p class="text1">八达岭长城p>
div>
<div class="clear">div>
div>
div>
<div class="col span_1_of_about1">
<h3>游记|书籍h3>
<ul class="comments-custom unstyled">
<li class="comments-custom_li">
<div class="icon">div>
<div class="right-text">
<h4 class="comments-custom_h">日本花见h4>
<div class="comments-custom_txt">
<a href="#" title="Go to this comment">烂漫春光，赏尽樱吹雪a>
div>
div>
<div class="clear">div>
li>
<li class="comments-custom_li">
<div class="icon">div>
<div class="right-text">
<h4 class="comments-custom_h">芭提雅h4>
<div class="comments-custom_txt">
<a href="#" title="Go to this comment">风光旖旎的东方夏威夷a>
div>
div>
<div class="clear">div>
li>
<li class="comments-custom_li">
<div class="icon">div>
<div class="right-text">
<h4 class="comments-custom_h">苏梅岛h4>
<div class="comments-custom_txt">
<a href="#" title="Go to this comment">拒绝好莱坞选景荣耀的纯天然海岛a>
div>
div>
<div class="clear">div>
li>
<li class="comments-custom_li">
<div class="icon">div>
<div class="right-text">
<h4 class="comments-custom_h">巴厘岛h4>
<div class="comments-custom_txt">
<a href="#" title="Go to this comment">极具人文&热带风情的度假天堂a>
div>
div>
<div class="clear">div>
li>
<li class="comments-custom_li">
<div class="icon">div>
<div class="right-text">
<h4 class="comments-custom_h">甲米h4>
<div class="comments-custom_txt">
<a href="#" title="Go to this comment">诗情画意、宛如天堂秘境的热带半岛a>
div>
div>
<div class="clear">div>
li>
ul>
<h3>热门国家排行榜h3>
<div class="poling">
<div class="poll">
<div class="text2">中国div>
<div class="percent"> 48%div>
<div class="clear">div>
<div class="skills">
<div style="width:45%"> div>
div>
div>
<div class="poll">
<div class="text2">日本div>
<div class="percent">29%div>
<div class="clear">div>
<div class="skills">
<div style="width:35%"> div>
div>
div>
<div class="poll">
<div class="text2">美国div>
<div class="percent">19%div>
<div class="clear">div>
<div class="skills">
<div style="width:25%"> div>
div>
div>
<div class="poll">
<div class="text2">澳大利亚div>
<div class="percent">10%div>
<div class="clear">div>
<div class="skills">
<div style="width:15%"> div>
div>
div>
div>
div>
<div class="clear">div>
div>
<div class="about-bottom row">
<div class="about-topgrids">
<div class="about-topgrid1">
<h3>旅游攻略推荐h3>
<img src="picture/xian.jpg" title="name">
<div class="command">
<h3>西安h3>
<div class="sidebar-nav">
<ul>
<li>
<a href="">详细的吃、住、行、景点、线路、实用信息a>
li>
ul>
div>
<p>
<a href="#">anya>点评了下京区的
<a href="#">京都站前天然a>
p>
<p>
<a href="#">冷冷冷a>点评了西城的
<a href="#">北京合德缘四a>
p>
<p>
<a href="#">羊羊羊a>点评了东港区的
<a href="#">日照晨阳渔家a>
p>
<p>
<a href="#">…展开…a>
p>
div>
div>
div>
<div class="about-histore">
<div class="weizhi">
<div>
<h3 style="display: inline-block;">未知旅行实验室h3>
<a href="#">查看更多 >a>
div>
<img src="picture/weizhi.jpg" alt="" style="width: 294px; height: 184px;">
div>
<div>
<h3>旅行家专栏h3>
<div class="sidebar-nav">
<ul>
<li>
<a href="">西班牙+法国南部深度16晚19日邮轮之旅a>
li>
<li>
<a href="">香港直飞斯里兰卡6天5晚半自助游a>
li>
<li>
<a href="">[上海送签]日本单次旅游签证a>
li>
<h4>
<img src="picture/marker2.png" alt="">更多h4>
ul>
div>
<div class="clear"> div>
div>
div>
<div class="about-services">
<h3>最新活动h3>
<img src="picture/activity.jpg" alt="">
<br>
div>
<div class="about-services">
<h3>加入我们h3>
<img src="picture/join.jpg" alt="">
<br>
div>
<div class="clear">div>
div>
div>
div>
div>
<div class="footer">
<div class="wrap">
<div class="footer-top">
<div class="col_1_of_4 span_1_of_4">
<h3>关于我们h3>
<ul class="first">
<li>
<a href="#">关于网站a>
li>
<li>
<a href="#">隐私政策a>
li>
<li>
<a href="#">服务协议a>
li>
<li>
<a href="#">网站地图a>
li>
<li>
<a href="#">联系我们a>
li>
<li>
<a href="#">加入我们a>
li>
ul>
div>
<div class="col_1_of_4 span_1_of_4">
<h3>旅行服务h3>
<ul class="first">
<li>
<a href="#">旅游攻略a>
li>
<li>
<a href="#">旅游问答a>
li>
<li>
<a href="#">旅游指南a>
li>
<li>
<a href="#">旅游咨询a>
li>
<li>
<a href="#">旅游特价a>
li>
ul>
div>
<div class="col_1_of_4 span_1_of_4">
<h3>去哪儿h3>
<ul class="first">
<li>
<a href="#">酒店预定a>
li>
<li>
<a href="#">国际租车a>
li>
<li>
<a href="#">旅游保险a>
li>
<li>
<a href="#">定火车票a>
li>
<li>
<a href="#">商家入驻a>
li>
ul>
div>
<div class="col_1_of_4 span_1_of_4 footer-lastgrid">
<h3>联系我们h3>
<ul class="follow_icon">
<li>
<a href="#">
<img src="picture/qq.png" alt="">
a>
li>
<li>
<a href="#">
<img src="picture/rss.png" alt="">
a>
li>
<li>
<a href="#">
<img src="picture/wx.png" alt="">
a>
li>
<li>
<a href="#">
<img src="picture/wb.png" alt="">
a>
li>
ul>
div>
<div class="clear">div>
div>
div>
div>
div>
body>
html>
CSS样式代码
.slider{
position:relative;
}
.theme-default .nivoSlider {
position:relative;
background:#fff url(../image/loading.gif) no-repeat 50% 50%;
}
.theme-default .nivoSlider img {
position:absolute;
top:0px;
left:0px;
display:none;
}
.theme-default .nivoSlider a {
border:0;
display:block;
}
.theme-default .nivo-controlNav {
text-align: center;
padding-top:10px;
}
.theme-default .nivo-controlNav a {
display:inline-block;
width:15px;
height:15px;
background:#FFF;
border-radius:2em;
text-indent:-9999px;
border:0;
margin:0 4px;
}
.theme-default .nivo-controlNav a.active,.theme-default .nivo-controlNav a:hover{
background:#C0392B;
}
.theme-default .nivo-directionNav a {
display:block;
width:40px;
height:40px;
background:url(../image/l-r-arrows.png) no-repeat;
text-indent:-9999px;
border:0;
opacity: 0;
-webkit-transition: all 200ms ease-in-out;
-moz-transition: all 200ms ease-in-out;
-o-transition: all 200ms ease-in-out;
transition: all 200ms ease-in-out;
}
.theme-default:hover .nivo-directionNav a { opacity: 1; }
.theme-default a.nivo-nextNav {
background-position:0px 0;
right:15px;
}
.theme-default a.nivo-prevNav {
left:15px;
background-position:-40px 0;
}
.theme-default .nivo-controlNav.nivo-thumbs-enabled {
width: 100%;
}
.theme-default .nivo-controlNav.nivo-thumbs-enabled a {
width: auto;
height: auto;
background: none;
margin-bottom: 5px;
}
.theme-default .nivo-controlNav.nivo-thumbs-enabled img {
display: block;
width: 120px;
height: auto;
}
/* The Nivo Slider styles */
.nivoSlider {
position:relative;
width:100%;
height:auto;
overflow: hidden;
}
.nivoSlider img {
position:absolute;
top:0px;
left:0px;
max-width: none;
}
.nivo-main-image {
display: block !important;
position: relative !important;
width: 100% !important;
}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
border:0;
padding:0;
margin:0;
z-index:6;
display:none;
background:white;
filter:alpha(opacity=0);
opacity:0;
}
/* The slices and boxes in the Slider */
.nivo-slice {
display:block;
position:absolute;
z-index:5;
height:100%;
top:0;
}
.nivo-box {
display:block;
position:absolute;
z-index:5;
overflow:hidden;
}
.nivo-box img { display:block; }
.nivo-html-caption {
display:none;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
position:absolute;
top:45%;
z-index:9;
cursor:pointer;
}
.nivo-prevNav {
left:0px;
background:url(../image/prev.png) no-repeat;
}
.nivo-nextNav {
right:0px;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav {
position: absolute;
bottom:25px;
z-index: 9;
}
.nivo-controlNav a {
cursor:pointer;
}
.nivo-controlNav a.active {
font-weight:bold;
}
@media all and (max-width:320px) {
.nivo-controlNav {
bottom:5px;
}
}
六、遇到问题及如何解决
实训中遇到得困难不少，比如如何收集适合网页的图片素材、如何让网页的配色看着更自然更舒适、如何用PS裁剪大小合适的图片、以及制作表单时候如何设计等等，最后，通过上网查询和请教别人得到了很好的解决。
七、实训总结
通过这次网页设计制作实训，能够灵活的运用到所学的知识和技巧制作简单的网页，掌握了个人网站建设的技巧和基本网站建设的过程。对于用Dreamweaver、vscode、hbuider等制作网页更为得心应手。实训过程中我尽量充分利用老师教过的知识，对所学知识进行了巩固。为了制作出更好的效果我也翻阅参考了其他资料，学习到了更多的网页处理技巧。制作网页的过程中遇到很多的问题，通过查找资料或询问同学都有得到解决。这次综合实训我的收获很大，学有所用，在实践的过程中学习巩固对知识能有更深的记忆。网页制作是一门很实用的学科，值得我以后进行更深入的学习。这次实训中我也体会到了自己掌握的技巧太少了，以至于很多想法都没能实现，在以后的学习过程中我要对网页制作有更深的了解，做出更为成熟的网页。
八、更多干货
1.如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “点赞” “✍️评论” “收藏” 一键三连哦！
2.❤️【关注我| 获取更多源码 | 优质文章】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！
3.以上内容技术相关问题欢迎一起交流学习