web课程设计网页规划与设计：旅游网页主题网站设计——酒店主题绿色温泉度假酒店网页设计(8页)HTML+CSS+JavaScri
【摘要】 👨🎓学生HTML静态网页基础水平制作👩🎓，页面排版干净简洁。使用HTML+CSS页面布局设计,web大学生网页设计作业源码，这是一个不错的旅游网页制作，画面精明，排版整洁，内容丰富，主题鲜明，非常适合初学者学习使用, 这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。 🏀 精彩专栏推荐👇🏻👇🏻👇🏻 💝 ...
👨🎓学生HTML静态网页基础水平制作👩🎓，页面排版干净简洁。使用HTML+CSS页面布局设计,web大学生网页设计作业源码，这是一个不错的旅游网页制作，画面精明，排版整洁，内容丰富，主题鲜明，非常适合初学者学习使用, 这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。
🏀 精彩专栏推荐👇🏻👇🏻👇🏻
💝 【作者主页——🔥获取更多优质源码】
💝 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】
@TOC
一、网站题目👨🎓
🚀 旅游景点介绍、旅游风景区、家乡介绍、等网站的设计与制作。
二、网站描述✍️
旅游景点介绍、旅游风景区是一个介绍简介、行政区划、地理环境、自然环境、教育事业、体育事业、旅游景点、城市荣誉等等。网站集中主要展示了的地方风土人情，并通过访客留言，增加游客的互动体验。同时，地方旅游网站里的每一个网页都采用了统一的设计风格，以加强城市整体面貌统一的宣传效果。最重要的是做出旅游网站独特的风格，更能吸引浏览者的眼球。
三、网站介绍📖
网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。
网站程序方面：计划采用最新的网页编程语言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>
<meta charset="utf-8">
<title>温泉度假</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/back-top.css">
<link rel="stylesheet" href="css/index.css">
<link rel="stylesheet" href="css/solid.css">
<link rel="stylesheet" href="css/discount.css">
<script src="js/jquery-3.1.0.min.js"></script>
<script src="js/koala.min.1.5.js"></script>
</head>
<body>
<header>
<div class="mycontainer">
<p>全国免费服务热线：<span>400-800-8820</span></p>
</div>
</header>
<div class="mycontainer">
<a href="index.html" id="logo">
<img src="picture/pic2.png" alt="">
</a>
</div>
<div id="solid">
<div class="solid0"></div>
<div class="solid1"></div>
<div class="solid2"></div>
<ul>
<li>
<img src="picture/width_pic1.jpg"/>
</li>
<li>
<img src="picture/width_pic2.jpg"/>
</li>
<li>
<img src="picture/width_pic3.jpg"/>
</li>
</ul>
<div id="btt">
<span></span>
<span></span>
<span></span>
</div>
</div>
<script src="js/fordboy.js"></script>
<div class="mycontainer">
<nav>
<ul>
<li>
<a href="index.html" class="current">网站首页</a>
</li>
<li>
<a href="about.html">温泉介绍</a>
</li>
<li>
<a href="product.html">天下名泉</a>
</li>
<li>
<a href="#">特色美食</a>
</li>
<li>
<a href="#">商务会议</a>
</li>
<li>
<a href="news.html">温泉资讯</a>
</li>
<li>
<a href="message.html">在线预约</a>
</li>
<li>
<a href="contact.html">联系我们</a>
</li>
</ul>
</nav>
<!--
<script>
$(document).ready(function () {
$("nav ul li a").mouseenter(function () {
$(this).addClass("current")
.parent().siblings().children("a").removeClass("current")
});
$("nav ul li a").mouseleave(function () {
$(this).removeClass("current")
.parent().siblings().children("a:first").addClass("current")
});
});
</script>
-->
</div>
<div class="mycontainer clearfix">
<ul class="entrance">
<li>
<a href="product.html">
<h2>天下名泉<br>The world of Stephen</h2>
<img src="picture/pic3.png" alt="">
</a>
</li>
<li>
<a href="#">
<h2>精致客房<br>Superior room</h2>
<img src="picture/pic3.png" alt="">
</a>
</li>
<li>
<a href="#">
<h2>特色美食<br>Specialty food</h2>
<img src="picture/pic3.png" alt="">
</a>
</li>
<li>
<a href="#">
<h2>商务会议<br>Business meeting</h2>
<img src="picture/pic3.png" alt="">
</a>
</li>
</ul>
<div class="discount">
<div class="title">
<h2>优惠精选</h2>
</div>
<div id="fsD1" class="focus">
<div id="D1pic1" class="fPic">
<div class="fcon" style="display: none;">
<a href="news.html"><img src="picture/01.jpg" style="opacity: 1; "></a>
<span class="shadow"><a href="news.html">精彩不断 移动云君湖无国界风情show大</a></span>
</div>
<div class="fcon" style="display: none;">
<a href="news.html"><img src="picture/02.jpg" style="opacity: 1; "></a>
<span class="shadow"><a href="news.html">移动云温泉地处罗浮山温泉度假区的天然热矿泉</a></span>
</div>
<div class="fcon" style="display: none;">
<a href="news.html"><img src="picture/03.jpg" style="opacity: 1; "></a>
<span class="shadow"><a href="news.html">移动云专注温泉20年</a></span>
</div>
</div>
<div class="fbg">
<div class="D1fBt" id="D1fBt">
<a href="javascript:void(0)" hidefocus="true" target="_self" class=""><i>1</i></a>
<a href="javascript:void(0)" hidefocus="true" target="_self" class=""><i>2</i></a>
<a href="javascript:void(0)" hidefocus="true" target="_self" class="current"><i>3</i></a>
</div>
</div>
<span class="prev"></span>
<span class="next"></span>
</div>
<script type="text/javascript">
Qfast.add('widgets', {path: "js/terminator2.2.min.js", type: "js", requires: ['fx']});
Qfast(false, 'widgets', function () {
K.tabs({
id: 'fsD1', //焦点图包裹id
conId: "D1pic1", //** 大图域包裹id
tabId: "D1fBt",
tabTn: "a",
conCn: '.fcon', //** 大图域配置class
auto: 1, //自动播放 1或0
effect: 'fade', //效果配置
eType: 'click', //** 鼠标事件
pageBt: true,//是否有按钮切换页码
bns: ['.prev', '.next'],//** 前后按钮配置class
interval: 4000 //** 停顿时间
})
})
</script>
</div>
<div class="news">
<div class="title">
<h2>移动云快讯</h2>
</div>
<ul>
<li>
<a href="news.html" class="current">
<h3>精彩不断 移动云君湖无国界风情show大赏</h3>
<p>5月6日晚上，“天沐君湖 小墅大作 无国界风情SHOW”活动在移动云温泉大酒店绚……</p>
<span>MORE+</span>
</a>
</li>
<li>
<a href="news.html">
<h3>精彩不断 移动云君湖无国界风情show大赏</h3>
<p>5月6日晚上，“天沐君湖 小墅大作 无国界风情SHOW”活动在移动云温泉大酒店绚……</p>
<span>MORE+</span>
</a>
</li>
<li>
<a href="news.html">
<h3>精彩不断 移动云君湖无国界风情show大赏</h3>
<p>5月6日晚上，“天沐君湖 小墅大作 无国界风情SHOW”活动在移动云温泉大酒店绚……</p>
<span>MORE+</span>
</a>
</li>
<li>
<a href="news.html">
<h3>精彩不断 移动云君湖无国界风情show大赏</h3>
<p>5月6日晚上，“天沐君湖 小墅大作 无国界风情SHOW”活动在移动云温泉大酒店绚……</p>
<span>MORE+</span>
</a>
</li>
</ul>
</div>
<div class="introduce clearfix">
<div class="first">
<h2>温泉简介</h2>
<p>移动云温泉地处罗浮山温泉度假区的天然热矿泉水是省内唯一认定的医疗温泉水，在全国屈指可数。</p>
<a href="about.html">>了解更多</a>
</div>
<img src="picture/pic20.png" alt="">
<div class="third">
<h2>马上咨询</h2>
<p>400-800-8820</p>
<a href="contact.html">>了解更多</a>
</div>
</div>
</div>
<footer>
<div class="top">
<div class="mycontainer clearfix">
<div class="first">
<p>移动云温泉<br>电话：400-800-8820 传真：400-800-8820<br>邮箱：yidongyun@yidongyun.com<br>地址：深圳市宝安区航城大道西乡光电研发大厦二楼</p>
</div>
<img src="picture/pic22.png" alt="">
<div class="third">
<p>分享到：</p>
<ul class="clearfix">
<li>
<a href="#">
<img src="picture/pic23.png" alt="">
</a>
</li>
<li>
<a href="#">
<img src="picture/pic24.png" alt="">
</a>
</li>
<li>
<a href="#">
<img src="picture/pic25.png" alt="">
</a>
</li>
<li>
<a href="#">
<img src="picture/pic26.png" alt="">
</a>
</li>
<li>
<a href="#">
<img src="picture/pic27.png" alt="">
</a>
</li>
<li>
<a href="#">
<img src="picture/pic28.png" alt="">
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="bottom">
<ul>
<li>友情链接：</li>
<li>
<a href="#">天目湖山水园</a>
</li>
<li> |</li>
<li>
<a href="#">南山竹海</a>
</li>
<li> |</li>
<li>
<a href="#">御水温泉</a>
</li>
<li> |</li>
<li>
<a href="#">南山竹海古街</a>
</li>
<li> |</li>
<li>
<a href="#">御水温泉客栈</a>
</li>
<li> |</li>
<li>
<a href="#">南山竹海住宿</a>
</li>
<li> |</li>
<li>
<a href="#">御水温泉度假酒店</a>
</li>
<li> |</li>
<li>
<a href="#">天目湖水世界</a>
</li>
</ul>
<p>Copyright © 2017-2018 移动云温泉 版权所有 鲁ICP备12024245号-1</p>
</div>
</footer>
<a id="returnTop" href="javascript:;">回到顶部</a>
<script src="js/back-top.js"></script>
</body>
</html>
CSS样式代码🏡
@charset "utf-8";
/* CSS Document */
.focus{ position:relative; width:585px; height:400px; background-color: #000; margin-top: 20px;}
.focus img{ width: 585px; height: 400px;}
.focus .btn{ position:absolute; bottom:34px; left:510px; overflow:hidden; zoom:1;}
.focus .btn a{position:relative; display:inline; width:13px; height:13px; border-radius:7px; margin:0 5px;color:#B0B0B0;font:12px/15px "\5B8B\4F53"; text-decoration:none; text-align:center; outline:0; float:left; background:#D9D9D9; }
.focus .btn a:hover,.focus .btn a.current{ cursor:pointer;background:#fc114a;}
.focus .fPic{ position:absolute; left:0px; top:0px; }
.focus .D1fBt{ overflow:hidden; zoom:1; height:16px; z-index:10; }
.focus .shadow{ width:100%; position:absolute; bottom:0; left:0px; z-index:10; line-height: 40px; background:rgba(0,0,0,0.6); filter:progid:DXImageTransform.Microsoft.gradient( GradientType = 0,startColorstr = '#80000000',endColorstr = '#80000000')\9; display:block; text-align:left; }
.focus .shadow a{ text-decoration:none; color:#fff; font-size:14px; overflow:hidden; margin-left:10px; font-family: "\5FAE\8F6F\96C5\9ED1";}
.focus .fcon{ position:relative; width:100%; float:left; display:none; background:#000 }
.focus .fcon img{ display:block; }
.focus .fbg{bottom:8px; right:10px; position:absolute; height:21px; text-align:center; z-index: 200; }
.focus .fbg div{margin:4px auto 0;overflow:hidden;zoom:1;height:14px}
.focus .D1fBt a{position:relative; display:inline; width:12px; height:12px; border-radius:7px; margin:0 5px;color:#B0B0B0;font:12px/15px "\5B8B\4F53"; text-decoration:none; text-align:center; outline:0; float:left; background:#D9D9D9; }
.focus .D1fBt .current,.focus .D1fBt a:hover{background:#00707e;}
.focus .D1fBt img{display:none}
.focus .D1fBt i{display:none; font-style:normal; }
.focus .prev,.focus .next{position:absolute;width:40px;height:74px;background: url(../images/focus_btn.png) no-repeat;}
.focus .prev{top: 50%;margin-top: -37px; left: 0;background-position:0 -74px; cursor:pointer; }
.focus .next{top: 50%;margin-top: -37px; right: 0; background-position:-40px -74px; cursor:pointer;}
.focus .prev:hover{ background-position:0 0; }
.focus .next:hover{ background-position:-40px 0;}
六、遇到问题及如何解决🔍
实训中遇到得困难不少，比如如何收集适合网页的图片素材、如何让网页的配色看着更自然更舒适、如何用PS裁剪大小合适的图片、以及制作表单时候如何设计等等，最后，通过上网查询和请教别人得到了很好的解决。
七、实训总结😊
通过这次网页设计制作实训，能够灵活的运用到所学的知识和技巧制作简单的网页，掌握了个人网站建设的技巧和基本网站建设的过程。对于用Dreamweaver、vscode、hbuider等制作网页更为得心应手。实训过程中我尽量充分利用老师教过的知识，对所学知识进行了巩固。为了制作出更好的效果我也翻阅参考了其他资料，学习到了更多的网页处理技巧。制作网页的过程中遇到很多的问题，通过查找资料或询问同学都有得到解决。这次综合实训我的收获很大，学有所用，在实践的过程中学习巩固对知识能有更深的记忆。网页制作是一门很实用的学科，值得我以后进行更深入的学习。这次实训中我也体会到了自己掌握的技巧太少了，以至于很多想法都没能实现，在以后的学习过程中我要对网页制作有更深的了解，做出更为成熟的网页。
八、更多干货🎁
1.如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “👍点赞” “✍️评论” “💙收藏”一键三连哦！
2.❤️【👇🏻👇🏻👇🏻关注我| 获取更多源码 | 优质文章】带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！
3.以上内容技术相关问题😈欢迎一起交流学习👇🏻👇🏻👇🏻🔥!
💂【获取方式】
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）