大二Web课程设计——张家界旅游网站设计与实现(HTML+CSS+JavaScript) (2)

web学生网页设计

于 2024-06-30 11:15:23 发布

阅读量360

点赞数

文章标签：前端课程设计旅游

本文链接：https://blog.csdn.net/m0_73081085/article/details/140078139

版权

👨‍🎓学生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 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head> 
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  <title>张家界旅游网</title> 
  <link href="css/style.css" rel="stylesheet" type="text/css" /> 
 </head> 
 <body> 
  <div class="top"> 
   <div class="logo"> 
    <a href="index.html"><img src="img/logo.jpg" /></a> 
   </div> 
   <div class="sous"> 
    <form> 
     <div class="fd">
      <img src="img/sous.jpg" />
     </div> 
     <input class="input" type="text" value="著名景点" /> 
     <button class="btn" type="submit">搜索</button> 
    </form> 
   </div> 
  </div> 
  <div id="nav"> 
   <ul> 
    <li class="hot"><a href="index.html">网站首页</a></li> 
    <li><a href="jijin.html">张家界简介</a></li> 
    <li><a href="shiji.html">历史风俗</a></li> 
    <li><a href="huodong.html">著名景点</a></li> 
    <li><a href="jihua.html">地方特产</a></li> 
    <li><a href="liuyan.html">在线留言</a></li> 
   </ul> 
  </div> 
  <div class="ibanner" id="box">
    <div class="inner">
        <!--轮播图-->
        <ul>
            <li><a href="#"><img src="img/banner1.jpg" alt=""></a></li>
            <li><a href="#"><img src="img/banner2.jpg" alt=""></a></li>
            <li><a href="#"><img src="img/banner3.jpg" alt=""></a></li>

        </ul>
 
        <ol class="bar">
 
        </ol>
        <!--左右焦点-->
        <div id="arr">
                    <span id="left">
                        <
                    </span>
            <span id="right">
                        >
                    </span>
        </div>
 
    </div>
</div>

  <div class="main"> 
   <div class="title"> 
    <h2>张家界简介</h2> 
   </div> 
   <div class="bx01"> 
    <div class="bx01-left"> 
     <p>张家界，原名"大庸市"，湖南省地级市。辖2个市辖区（永定区、武陵源区）、2个县（慈利县、桑植县）。位于湖南西北部，澧水中上游，属武陵山区腹地。张家界因旅游建市，是中国最重要的旅游城市之一，是湘鄂渝黔革命根据地的发源地和中心区域。1982年9月，张家界国家森林公园成为中国第一个国家森林公园。1988年8月，张家界武陵源风景名胜区被列入国家重点风景名胜区；1992年，由张家界国家森林公园等三大景区构成的武陵源风景名胜区被联合国教科文组织列入《世界自然遗产名录》；2004年2月，被列入全球首批《世界地质公园》；2007年，被列入中国首批国家5A级旅游景区。2017年，被授予"国家森林城市"荣誉称号。</p> 
    </div> 
    <div class="bx01-right">
     <img src="img/img1.jpg" />
    </div> 
   </div> 
   <div class="bx02"> 
    <div class="bx02-left">
     <img src="img/img4.jpg" />
    </div> 
    <div class="bx02-right"> 
     <p>张家界因旅游建市，是国内重点旅游城市。武陵源风景名胜区拥有世界罕见的石英砂岩峰林峡谷地貌，由中国第一个国家森林公园——张家界国家森林公园和天子山自然保护区、索溪峪自然保护区、杨家界四大景区组成，风景游览区面积264.6平方公里，是中国首批入选的世界自然遗产、世界首批地质公园、国家首批5A级旅游景区。"武陵之魂"天门山国家森林公园、"世界罕见的物种基因库"八大公山国家级自然保护区、道教圣地"南武当"五雷山、"百里画廊"茅岩河、万福温泉等景区也是景色秀美、风光独特。贺龙故居、湘鄂川黔革命根据地省委旧址是全国重点文物保护单位，普光禅寺、玉皇洞石窟群、老院子等8处人文古迹是省级重点文物保护单位。</p> 
    </div> 
   </div> 
   <div class="title"> 
    <h2>著名旅游景点</h2> 
   </div> 
   <div class="sheshi"> 
    <ul> 
     <li><img src="img/cw01.jpg" /><h1>张家界国家森林公园</h1></li> 
     <li><img src="img/cw02.jpg" /><h1>九天洞</h1></li> 
     <li><img src="img/cw03.jpg" /><h1>普光禅寺</h1></li> 
     <li><img src="img/cw04.jpg" /><h1>金鞭溪</h1></li> 
     <li><img src="img/cw05.jpg" /><h1>鹞子寨</h1></li> 
     <li><img src="img/cw06.jpg" /><h1>五雷山</h1></li> 
    </ul> 
   </div> 
  </div> 
  <div class="foot"> 
   <div class="foot-ner"> 
    <img src="img/footlogo.png" /> 
   </div> 
  </div> 
  <div class="banquan">
  姓名:孙悟空 学号:14523685 &copy;版权所有  邮箱：0123456789@qq.com 
  </div> 
  <script type="text/javascript" src="js/banner.js"></script>  
 </body>
</html>

CSS样式代码🏡

@charset "utf-8";
/* CSS Document */
body {
	margin: 0 auto;
	font-size: 16px;
	font-family: "宋体";
	line-height: 22px;
	color: #131313;
}

div,p,input,ul,li,h1,h2 {
	height: auto;
	margin: 0;
	padding: 0;
	vertical-align: middle;
	list-style: none;
}

img {
	border: 0;
	margin: 0;
	padding: 0;
}

a {
	color: #131313;
	text-decoration: none;
}

a:link {
	color: #333;
}

a:hover {
	color: #d5142a;
	text-decoration: none;
	overflow: hidden;
}

.top {
	width: 1300px;
	height: 133px;
	margin: 0 auto;
}

.logo {
	width: 263px;
	height: 110px;
	float: left;
	margin-top: 20px;
}

.sous {
	width: 325px;
	height: 40px;
	border: #eaeaea 1px solid;
	margin-left: 254px;
	margin-top: 50px;
	float: right;
}

.fd {
	width: 35px;
	height: 35px;
	float: left;
}

.input {
	width: 218px;
	height: 37px;
	color: #5d5c5c;
	float: left;
	border: none;
}

.btn {
	width: 72px;
	height: 40px;
	background: #4f4e4e;
	line-height: 40px;
	text-align: center;
	float: left;
	color: white;
	border: none;
}

#nav {
	height: 50px;
	width: 100%;
	background: #424146;
}

#nav ul {
	display: block;
	width: 1300px;
	height: 50px;
	margin: 0 auto;
}

#nav ul li {
	width: 160px;
	height: 50px;
	line-height: 50px;
	float: left;
	text-align: center;
}

#nav ul li a {
	line-height: 40px;
	font-size: 20px;
	color: #fdfbfb;
}

.hot {
	background: #9d0d0f;
}

.ibanner {
	width: 1300px;
	height: 450px;
	margin: 0 auto;
}

.inner {
	width: 1300px;
	height: 450px;
	position: relative;
	overflow: hidden;
}

.inner img {
	width: 1300px;
	height: 450px;
	vertical-align: top
}

.inner ul {
	width: 1000%;
	position: absolute;
	list-style: none;
	left: 0;
	top: 0;
	margin: 0px;
	padding: 0px;
}

.inner li {
	float: left;
}

ol {
	position: absolute;
	height: 20px;
	right: 20px;
	bottom: 12px;
	text-align: center;
	padding: 5px;
}

ol li {
	display: block;
	width: 20px;
	height: 20px;
	line-height: 20px;
	background-color: #fff;
	margin: 5px;
	cursor: pointer;
}

ol .current {
	background-color: red;
}

#arr {
	display: block;
}

#arr span {
	width: 30px;
	height: 40px;
	position: absolute;
	left: 14px;
	top: 200px;
	margin-top: -20px;
	background: #fff;
	cursor: pointer;
	line-height: 40px;
	text-align: center;
	font-weight: bold;
	font-family: '黑体';
	font-size: 30px;
	color: #000;
	opacity: 0.5;
	border: 1px solid #fff;
}

#arr #right {
	right: 18px;
	left: auto;
}

.banner {
	width: 1300px;
	height: 300px;
	margin: 0 auto;
}

.main {
	width: 1300px;
	height: auto;
	overflow: hidden;
	margin: 0 auto;
}

.title {
	height: 70px;
	text-align: center;
	margin-top: 20px;
	line-height: 70px;
}

.title h2 {
	margin: 0 auto;
	font-size: 28px;
}

.bx01 {
	width: 1276px;
	height: 474px;
	margin: 0 auto;
	margin-top: 50px;
}

.bx01-left {
	width: 507px;
	height: 400px;
	float: left;
	margin-left: 15px;
	padding-top: 74px;
}

.bx01-left p {
	float: left;
	line-height: 35px;
	font-size: 16px;
	padding-right: 60px;
	text-indent: 2em;
}

.bx01-right {
	width: 754px;
	height: 474px;
	float: left;
}

.bx02 {
	width: 1276px;
	height: 380px;
	margin: 0 auto;
	margin-bottom: 20px;
}

.bx02-left {
	width: 522px;
	height: 380px;
	float: left;
}

.bx02-left img {
	display: block;
	float: right;
}

.bx02-right {
	width: 754px;
	height: 380px;
	float: left;
}

.bx02-right p {
	margin-top: 109px;
	margin-left: 63px;
	line-height: 35px;
	font-size: 16px;
	font-family: "微软雅黑";
	text-indent: 2em;
}

.sheshi {
	width: 1400px;
	height: 800px;
}

.sheshi ul {
	padding: 30px;
}

.sheshi ul li {
	width: 400px;
	height: 300px;
	float: left;
	padding: 22px;
	text-align: center;
}

.sheshi ul li img {
	width: 400px;
	height: 250px;
}

.sheshi ul li h1 {
	color: #141313;
	height: 40px;
	font-weight: normal;
	font-size: 16px;
	line-height: 40px;
}

.qybx3 {
	width: 1270px;
	height: 600px;
	margin: 0 auto;
	margin-bottom: 15px;
	margin-top: 50px;
}

.guanai {
	width: 481px;
	height: 360px;
	float: right;
	margin-left: 30px;
}

.qybx3 p {
	line-height: 30px;
	font-size: 16px;
	text-indent: 2em;
}

.qybx6 {
	width: 1210px;
	height: 377px;
	margin: 0 auto;
	margin-top: 40px;
	margin-bottom: 40px;
}

.qybx6 img {
	float: left;
}

.mar80 {
	margin-left: 80px;
}

.foot {
	height: 215px;
	width: 100%;
	background: #222222;
}

.foot-ner {
	width: 235px;
	height: 124px;
	margin: 0 auto;
	padding-top: 60px;
	color: #FFF;
}

.banquan {
	height: 43px;
	width: 100%;
	line-height: 43px;
	background: #101010;
	text-align: center;
	color: #a4a4a4;
	font-size: 12px;
}

.cbx2 {
	height: 266px;
	background: #eeeeee;
	margin-bottom: 33px;
}

.cbx2 h1 {
	height: 40px;
	padding-top: 30px;
	padding-left: 30px;
	font-size: 30px;
}

.cbx2 .wenz {
	height: 80px;
	margin-left: 30px;
	padding-right: 30px;
}

.cbx2 p {
	color: #343434;
	line-height: 30px;
	font-size: 14px;
}

.cbx3 {
	height: 830px;
}

.box {
	width: 625px;
	height: 450px;
	margin: 0px 10px;
	margin-bottom: 20px;
	border: #dfdfdf 1px solid;
	float: left;
}

.box img {
	width: 615px;
	margin: 5px;
	margin-bottom: 20px;
}

.box h1 {
	height: 55px;
	line-height: 55px;
	padding: 0px 15px;
	font-size: 30px;
	margin-bottom: 5px;
}

.box p {
	padding: 0px 15px;
	line-height: 25px;
	font-size: 14px;
	margin-bottom: 5px;
}

.box2 {
	height: auto;
	overflow: hidden;
	margin: 0 auto;
	margin-top: 50px;
	margin-bottom: 50px;
}

.box2 ul {
	padding: 0px;
}

.box2 ul li {
	width: 280px;
	height: 265px;
	border: #CCC 2px solid;
	margin: 0px 20px;
	float: left;
	margin-bottom: 30px;
	padding: 20px 0px;
}

.box2 ul li img {
	display: block;
	width: 225px;
	height: 225px;
	margin: 0 auto;
}

.box2 ul li h2 {
	height: 40px;
	line-height: 40px;
	text-align: center;
	font-size: 14px;
	color: #666;
}

.div1 {
	line-height: 25px;
	padding: 20px;
	margin-bottom: 30px;
}

.div2 {
	height: 400px;
}

.div2 .divx {
	width: 300px;
	height: 400px;
	float: left;
	margin: 0 11px;
}

.div2 .divx img {
	width: 298px;
	border: #d4d2d0 1px solid;
}

.div2 .divx h1 {
	height: 40px;
	line-height: 40px;
	text-align: center;
	font-weight: normal;
	font-size: 16px;
}

.liuyan {
	width: 1184px;
	height: 450px;
	margin: 0 auto;
	margin-top: 30px;
}

.liuyan h1 {
	height: 75px;
	line-height: 75px;
	font-size: 36px;
	color: #4e5050;
	padding-top: 30px;
}

.liuyan .shang {
	height: 80px;
}

.liuyan .xia {
	height: 400px;
}

.liuyan .bx1 {
	width: 206px;
	height: 80px;
	float: left;
	margin-right: 90px;
}

.liuyan h2 {
	height: 40px;
	line-height: 40px;
	font-size: 14px;
}

.liuyan .bx1 .input {
	width: 194px;
	height: 30px;
	border: #bbb8b5 1px solid;
	padding-left: 10px;
	font-size: 12px;
	color: #bbb8b5;
}

.textr {
	width: 1040px;
	height: 174px;
	border: #bbb8b5 1px solid;
	padding-left: 10px;
	font-size: 12px;
	color: #bbb8b5;
	line-height: 30px;
	margin-bottom: 25px;
}

.btn2 {
	width: 204px;
	height: 50px;
	background: #040000;
	line-height: 50px;
	text-align: center;
	;
	font-size: 14px;
	color: #FFFFFF;
	border: none;
}

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

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

七、实训总结😊

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