300字范文 > web前端设计与开发期末作品旅游咨询网站 HTML5期末大作业 HTML+CSS旅游社网站5个

web前端设计与开发期末作品旅游咨询网站 HTML5期末大作业 HTML+CSS旅游社网站5个

时间：2019-06-03 08:13:25

👨‍🎓静态网站的编写主要是用 HTML DⅣV+ CSSJS等来完成页面的排版设计👩‍🎓，一般的网页作业需要融入以下知识点：div布局、浮动定位、高级css、表格、表单及验证、js轮播图、音频视频Fash的应用、uli、下拉导航栏、鼠标划过效果等知识点，学生网页作业源码，制作水平和原创度都适合学习或交作业用，记得点赞。

文章目录🌰

一、网站题目👨‍🎓二、网站描述✍️三、网站介绍📖四、网站效果🌐五、网站代码制作部分 📕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 lang="zh-cn"><head><meta charset="UTF-8"><title>首页--旅游网站</title><link rel="stylesheet" href="css/style.css"><link rel="stylesheet" href="css/basic.css"></head><body><header><nav id="nav"><div id="logo"><img src="picture/logo.png" alt=""></div><ul><li class="active"><a href="">首页</a></li><li><a href="informations.html">旅游资讯</a></li><li><a href="ticket.html">机票订购</a></li><li><a href="scenery.html">风景欣赏</a></li><li><a href="about.html">公司简介</a></li></ul></nav></header><div class="search"><div class="center"></div><input class="input" type="text" placeholder="请输入陆游景点或城市"><div class="button">搜索</div></div><div class="tour"><section class="news"><h2>热门旅游</h2><p>国内旅游、国外旅游、自助旅游、自驾旅游、油轮签证、主题旅游等各种最新热门旅游推荐</p></section><figure><img src="picture/tour1.jpg" alt=""><figcaption><strong class="title"> <曼谷-芭提雅6日游></strong> 包团特惠，超丰富景点，升级1晚国五，无自费，更赠送600元/成人自费券<div class="info"><em class="sat">满意度 77%</em><span class="price">￥ <strong>2864</strong> 起</span></div><div class="type">国内长线</div></figcaption></figure><figure><img src="picture/tour2.jpg" alt=""><figcaption><strong class="title"> <曼谷-芭提雅6日游></strong> 包团特惠，超丰富景点，升级1晚国五，无自费，更赠送600元/成人自费券<div class="info"><em class="sat">满意度 77%</em><span class="price">￥ <strong>2864</strong> 起</span></div><div class="type">国内长线</div></figcaption></figure><figure><img src="picture/tour3.jpg" alt=""><figcaption><strong class="title"> <曼谷-芭提雅6日游></strong> 包团特惠，超丰富景点，升级1晚国五，无自费，更赠送600元/成人自费券<div class="info"><em class="sat">满意度 77%</em><span class="price">￥ <strong>2864</strong> 起</span></div><div class="type">国内长线</div></figcaption></figure><figure><img src="picture/tour4.jpg" alt=""><figcaption><strong class="title"> <曼谷-芭提雅6日游></strong> 包团特惠，超丰富景点，升级1晚国五，无自费，更赠送600元/成人自费券<div class="info"><em class="sat">满意度 77%</em><span class="price">￥ <strong>2864</strong> 起</span></div><div class="type">国内长线</div></figcaption></figure><figure><img src="picture/tour5.jpg" alt=""><figcaption><strong class="title"> <曼谷-芭提雅6日游></strong> 包团特惠，超丰富景点，升级1晚国五，无自费，更赠送600元/成人自费券<div class="info"><em class="sat">满意度 77%</em><span class="price">￥ <strong>2864</strong> 起</span></div><div class="type">国内长线</div></figcaption></figure><figure><img src="picture/tour6.jpg" alt=""><figcaption><strong class="title"> <曼谷-芭提雅6日游></strong> 包团特惠，超丰富景点，升级1晚国五，无自费，更赠送600元/成人自费券<div class="info"><em class="sat">满意度 77%</em><span class="price">￥ <strong>2864</strong> 起</span></div><div class="type">国内长线</div></figcaption></figure><figure><img src="picture/tour7.jpg" alt=""><figcaption><strong class="title"> <曼谷-芭提雅6日游></strong> 包团特惠，超丰富景点，升级1晚国五，无自费，更赠送600元/成人自费券<div class="info"><em class="sat">满意度 77%</em><span class="price">￥ <strong>2864</strong> 起</span></div><div class="type">国内长线</div></figcaption></figure><figure><img src="picture/tour8.jpg" alt=""><figcaption><strong class="title"> <曼谷-芭提雅6日游></strong> 包团特惠，超丰富景点，升级1晚国五，无自费，更赠送600元/成人自费券<div class="info"><em class="sat">满意度 77%</em><span class="price">￥ <strong>2864</strong> 起</span></div><div class="type">国内长线</div></figcaption></figure><figure><img src="picture/tour9.jpg" alt=""><figcaption><strong class="title"> <曼谷-芭提雅6日游></strong> 包团特惠，超丰富景点，升级1晚国五，无自费，更赠送600元/成人自费券<div class="info"><em class="sat">满意度 77%</em><span class="price">￥ <strong>2864</strong> 起</span></div><div class="type">国内长线</div></figcaption></figure></div><footer id="footer"><div class="top"><div class="block left"><h3>合作伙伴</h3><hr><ul><li>途牛旅游网</li><li>驴妈妈旅游网</li><li>携程旅游</li><li>中国去青年旅行社</li></ul></div><div class="block middle"><h3>旅游FAQ</h3><hr><ul><li>旅游合同签订方式？</li><li>儿童价是基于什么制定的？</li><li>旅游的线路品质怎么界定的？</li><li>单房差是什么？</li><li>旅游保险有那些种类？</li></ul></div><div class="block right"><h3>联系方式</h3><hr><ul><li>微博：***</li><li>邮件：***</li><li>地址：***</li></ul></div></div><div class="bottom">Copyright © ***5</div></footer></body></html>

CSS样式代码🏡

body,ul,ol,li ,h2,h3,p,hr,figure{padding:0;margin:0;}body {font-family: "Helvetica Neue",Helvetica,Arial,"Microsoft Yahei UI","Microsoft YaHei",SimHei,"宋体",simsun,sans-serif;}ol,ul,li{list-style: none;}a {text-decoration: none;}input {border:0;padding:0;margin:0;}header{width:100%;min-width: 1263px;height:70px;background: #333;box-shadow: 0 1px 10px rgba(0, 0, 0, 0.3);z-index: 999;}nav {width:1263px;margin:0 auto;color:#fff;}nav #logo {float:left;}nav ul{float:right;width:800px;line-height: 70px;text-align: center;}nav ul li{float:left;width:140px;}nav ul li a{display: block;color: #eee;}nav ul li a:hover,.active a{list-style: none;display: block;background: #000;}#footer {height:361px;background: #222;clear:both;}.top {width:1263px;margin:0 auto;height:300px;text-align: center;}.block {display: inline-block;width:410px;height:280px;text-align: left;vertical-align: top;color:#ccc;}.block h3{font-weight: normal;font-size: 24px;margin:20px 0 10px 0;}.block hr{border:1px dashed #333;width:90%;}.block ul{font-size: 18px;line-height: 2.2;color:#777;}.bottom {height:60px;background: #000;color:#fff;text-align: center;line-height:60px;border-top:1px solid #444;}

六、遇到问题及如何解决🔍

实训中遇到得困难不少，比如如何收集适合网页的图片素材、如何让网页的配色看着更自然更舒适、如何用PS裁剪大小合适的图片、以及制作表单时候如何设计等等，最后，通过上网查询和请教别人得到了很好的解决。

七、实训总结😊

通过这次网页设计制作实训，能够灵活的运用到所学的知识和技巧制作简单的网页，掌握了个人网站建设的技巧和基本网站建设的过程。对于用Dreamweaver、vscode、hbuider等制作网页更为得心应手。实训过程中我尽量充分利用老师教过的知识，对所学知识进行了巩固。为了制作出更好的效果我也翻阅参考了其他资料，学习到了更多的网页处理技巧。制作网页的过程中遇到很多的问题，通过查找资料或询问同学都有得到解决。这次综合实训我的收获很大，学有所用，在实践的过程中学习巩固对知识能有更深的记忆。网页制作是一门很实用的学科，值得我以后进行更深入的学习。这次实训中我也体会到了自己掌握的技巧太少了，以至于很多想法都没能实现，在以后的学习过程中我要对网页制作有更深的了解，做出更为成熟的网页。