300字范文 > HTML5期末大作业：旅游网页设计与实现——旅游风景区网站HTML+CSS+JavaScript 景点静

HTML5期末大作业：旅游网页设计与实现——旅游风景区网站HTML+CSS+JavaScript 景点静

时间：2020-05-10 07:44:14

👨‍🎓静态网站的编写主要是用 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>

<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 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 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 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 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 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 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 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 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 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 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 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 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="#">any</a>点评了下京区的

<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 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 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 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>

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

HTML5期末大作业：旅游网页设计与实现——旅游风景区网站HTML+CSS+JavaScript 景点静态网页设计学生DW静态网页设计...

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。