-
web课程设计网页规划与设计：旅游网页主题网站设计——酒店主题绿色温泉度假酒店网页设计(8页)HTML+CSS+JavaScript
👨🎓学生HTML静态网页基础水平制作👩🎓，页面排版干净简洁。使用HTML+CSS页面布局设计,web大学生网页设计作业源码，这是一个不错的旅游网页制作，画面精明，排版整洁，内容丰富，主题鲜明，非常适合初学者学习使用, 这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。
一、网站题目👨🎓
🚀 旅游景点介绍、旅游风景区、家乡介绍、等网站的设计与制作。
二、网站描述✍️
旅游景点介绍、旅游风景区是一个介绍简介、行政区划、地理环境、自然环境、教育事业、体育事业、旅游景点、城市荣誉等等。网站集中主要展示了的地方风土人情，并通过访客留言，增加游客的互动体验。同时，地方旅游网站里的每一个网页都采用了统一的设计风格，以加强城市整体面貌统一的宣传效果。最重要的是做出旅游网站独特的风格，更能吸引浏览者的眼球。
三、网站介绍📖
网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。
网站程序方面：计划采用最新的网页编程语言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-8820span>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> div> <div class="mycontainer clearfix"> <ul class="entrance"> <li> <a href="product.html"> <h2>天下名泉<br>The world of Stephenh2> <img src="picture/pic3.png" alt=""> a> li> <li> <a href="#"> <h2>精致客房<br>Superior roomh2> <img src="picture/pic3.png" alt=""> a> li> <li> <a href="#"> <h2>特色美食<br>Specialty foodh2> <img src="picture/pic3.png" alt=""> a> li> <li> <a href="#"> <h2>商务会议<br>Business meetingh2> <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>1i>a> <a href="javascript:void(0)" hidefocus="true" target="_self" class=""><i>2i>a> <a href="javascript:void(0)" hidefocus="true" target="_self" class="current"><i>3i>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-8820p> <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号-1p> div> footer> <a id="returnTop" href="javascript:;">回到顶部a> <script src="js/back-top.js">script> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
- 133
- 134
- 135
- 136
- 137
- 138
- 139
- 140
- 141
- 142
- 143
- 144
- 145
- 146
- 147
- 148
- 149
- 150
- 151
- 152
- 153
- 154
- 155
- 156
- 157
- 158
- 159
- 160
- 161
- 162
- 163
- 164
- 165
- 166
- 167
- 168
- 169
- 170
- 171
- 172
- 173
- 174
- 175
- 176
- 177
- 178
- 179
- 180
- 181
- 182
- 183
- 184
- 185
- 186
- 187
- 188
- 189
- 190
- 191
- 192
- 193
- 194
- 195
- 196
- 197
- 198
- 199
- 200
- 201
- 202
- 203
- 204
- 205
- 206
- 207
- 208
- 209
- 210
- 211
- 212
- 213
- 214
- 215
- 216
- 217
- 218
- 219
- 220
- 221
- 222
- 223
- 224
- 225
- 226
- 227
- 228
- 229
- 230
- 231
- 232
- 233
- 234
- 235
- 236
- 237
- 238
- 239
- 240
- 241
- 242
- 243
- 244
- 245
- 246
- 247
- 248
- 249
- 250
- 251
- 252
- 253
- 254
- 255
- 256
- 257
- 258
- 259
- 260
- 261
- 262
- 263
- 264
- 265
- 266
- 267
- 268
- 269
- 270
- 271
- 272
- 273
- 274
- 275
- 276
- 277
- 278
- 279
- 280
- 281
- 282
- 283
- 284
- 285
- 286
- 287
- 288
- 289
- 290
- 291
- 292
- 293
- 294
- 295
- 296
- 297
- 298
- 299
- 300
- 301
- 302
- 303
- 304
- 305
- 306
- 307
- 308
- 309
- 310
- 311
- 312
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;}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
六、遇到问题及如何解决🔍
实训中遇到得困难不少，比如如何收集适合网页的图片素材、如何让网页的配色看着更自然更舒适、如何用PS裁剪大小合适的图片、以及制作表单时候如何设计等等，最后，通过上网查询和请教别人得到了很好的解决。
七、实训总结😊
通过这次网页设计制作实训，能够灵活的运用到所学的知识和技巧制作简单的网页，掌握了个人网站建设的技巧和基本网站建设的过程。对于用Dreamweaver、vscode、hbuider等制作网页更为得心应手。实训过程中我尽量充分利用老师教过的知识，对所学知识进行了巩固。为了制作出更好的效果我也翻阅参考了其他资料，学习到了更多的网页处理技巧。制作网页的过程中遇到很多的问题，通过查找资料或询问同学都有得到解决。这次综合实训我的收获很大，学有所用，在实践的过程中学习巩固对知识能有更深的记忆。网页制作是一门很实用的学科，值得我以后进行更深入的学习。这次实训中我也体会到了自己掌握的技巧太少了，以至于很多想法都没能实现，在以后的学习过程中我要对网页制作有更深的了解，做出更为成熟的网页。
八、更多干货🎁
1.如果我的博客对你有帮助、如果你喜欢我的博客内容，
请 “👍点赞” “✍️评论” “💙收藏”一键三连哦！2.
❤️【👇🏻👇🏻👇🏻关注我| 获取更多源码 | 优质文章】带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！3.以上内容技术相关问题😈欢迎一起交流学习👇🏻👇🏻👇🏻🔥
-
相关阅读:
【编程题】【Scratch四级】2021.03 程序优化
浅解ConcurrentHashMap
【C++】类和对象（一）：什么是面向对象，访问限定符有哪些，类定义细节，结构体和类的关系。
SAP ABAP ALV 层次顺序表如何使用双表头(Multiple Headers)进行数据输出
docker 常用命令 快捷命令
微信小程序-常用的视图容器类组件
C++编译报错：does not name a type
普通二叉树
为Jekyll静态网站添加PlantUML插件
Hadoop3教程（二十八）：（生产调优篇）NN、DN的多目录配置及磁盘间数据均衡
- 原文地址：https://blog.csdn.net/QQ_____365392777/article/details/126196315
