web网页设计期末课程大作业——汉中印象旅游景点介绍网页设计与实现19页面HTML+CSS+JavaScript
学生HTML静态网页基础水平制作，页面排版干净简洁。使用HTML+CSS页面布局设计,web大学生网页设计作业源码，这是一个不错的旅游网页制作，画面精明，排版整洁，内容丰富，主题鲜明，非常适合初学者学习使用, 这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。
精彩专栏推荐
【作者主页——获取更多优质源码】
【web前端期末大作业——毕设项目精品实战案例(1000套)】
文章目录
- 一、网站题目
- 二、网站描述✍️
- 三、网站介绍
- 四、网站效果
- 五、网站代码制作部分
-
- 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 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 onload="">
<div class="w" style="height:80px; margin-top:5px;">
<div style="float:left;">
<div class="logo"><img src="img/5.jpg" />div>
<div class="lg"><img src="img/3.jpg" />div>
div>
<div class="menu">
<ul>
<li><a href="index.html">首页a>li>
<li><a href="hzms.html" target="_blank">汉中美食a>li>
<li><a href="fjms.html" target="_blank">风景名胜a>li>
<li><a href="lygl.html" target="_blank">旅游指南a>li>
<li><a href="lsyz.html" target="_blank">历史遗址a>li>
<li class="zh"><a href="lsrw.html" target="_blank">历史人物a>li>
ul>
div>
div>
<div class="top w"><img src="img/top.jpg" id="img" />div>
<div class="w">
<div class="hz">汉中简介div>
<div class="lb"><img src="img/3.hz.JPG" />div>
<div class="wz">
<span> 汉中市位于陕西省西南部，古称:南郑、梁州、天汉，是汉王朝的发祥地，长江第一大支流汉
江的源头，秦巴山片区三大中心城市之一，有<b style="color:#F00;">“汉家发祥地，中华聚宝盆”b>的美誉。span>
<span>
汉中北依秦岭，南屏巴山，中部是汉中盆地，自古就被称为“天府之国”和“鱼米之乡”，历
来都是兵家必争之地。因境内洋县生存有全国一级保护鸟类、“世界珍禽”——朱鹮，故又被称为
“朱鹮之乡”。现辖汉台区、南郑县、城固县、洋县、勉县、西乡、宁强、略阳、镇巴、留坝、佛
坪1区10县。
span>
<span>
汉中是国家历史文化名城、中国优秀旅游城市、国家生态示范区建设试点地区、全国双拥模范
城、国家卫生城市。主产水稻、小麦、油菜等，有大熊猫、金丝猴、羚牛、朱鹮等珍稀动物，自然
环境与物产非常丰富。拥有长青国家级自然保护区、佛坪国家级自然保护区、宁强青木川国家级自
然保护区、米仓山国家级自然保护区、略阳大鲵国家级自然保护区、略阳珍稀水生动物国家级自然
保护区，有4个国家级森林公园，被公认为地球上同一纬度生态最好和最适宜人类居住的地区之一。
<b style="color:#F00;">汉中是南水北调中线水源地源头。b>span>
div>
div>
<div class="w">
<div class="left">
<div class="bk">
<div class="left1"><font>风 景 名 胜font>div>
<div class="left2">
<ul>
<li><a href="liping.html" target="_blank">黎 平 森 林 公 园a>li>
<li style="border-bottom:#999 1px dashed;">li>
<li><a href="fjtz.html" target="_blank">石 门 栈 道 风 景 区a>li>
<li style="border-bottom:#999 1px dashed;">li>
<li><a href="qmc.html" target="_blank">华 阳 古 镇 青 木 川a>li>
<li style="border-bottom:#999 1px dashed;">li>
<li><a href="tiantaishan.html" target="_blank">天 台 山 森 林 公 园a>li>
<li style="border-bottom:#999 1px dashed;">li>
<li><a href="zhuhuan.html" target="_blank">朱 鹮 自 然 保 护 区a>li>
<li style="border-bottom:#999 1px dashed;">li>
ul>
div>
div>
<div class="bk1">
<div class="left1"><font>旅 游 指 南font>div>
<div class="left2">
<ul>
<li><a href="lipingGL.html" target="_blank">黎 平 森 林 公 园a>li>
<li style="border-bottom:#999 1px dashed;">li>
<li><a href="lipingGL.html" target="_blank">石 门 栈 道 风 景 区a>li>
<li style="border-bottom:#999 1px dashed;">li>
<li><a href="lipingGL.html" target="_blank">华 阳 古 镇 青 木 川a>li>
<li style="border-bottom:#999 1px dashed;">li>
<li><a href="lipingGL.html" target="_blank">天 台 山 森 林 公 园a>li>
<li style="border-bottom:#999 1px dashed;">li>
<li><a href="lipingGL.html" target="_blank">朱 鹮 自 然 保 护 区a>li>
<li style="border-bottom:#999 1px dashed;">li>
ul>
div>
div>
div>
<div class="con">
<div class="con1"><font>汉 中 美 食font><a href="hzms.html" >更多 》a>div>
<div class="con2">
<p>门水库的修建使褒斜道遗址被水淹没。石门栈道是在褒斜栈道原址上方抬高72米仿建而成，全长1.8km，浓缩了古栈道的七种形制，以及“邮、亭、驿”等古建筑。成为汉中旅游的一张精美名片。 目前，褒斜栈道（即石门栈道）位于石门栈道景区内，景区中湖光山色两相映，翠峰林立，景色宜人，早在清朝同治时期就被文人王晚香概括为“褒谷二十四景的修建使褒斜道遗址被水淹没。石门栈道是在褒斜栈道原址上方的修建使褒斜道遗址被水淹没。石门栈道是在褒斜栈道原址上方”而闻名于世。p>
div>
<div id="bgd">
<div class="vbgd" onmouseover="picstops()" onmouseout="picstart()">
<div class="tp" id="tp1">
<img src="img/sy.1.JPG"/>
<img src="img/sy.2.JPG"/>
<img src="img/sy.3.JPG"/>
<img src="img/sy.4.JPG" />
<img src="img/ms.JPG"/>
<img src="img/ms1.JPG"/>
<img src="img/ms2.JPG"/>
<img src="img/ms3.JPG" />
div>
<div id="tp2">div>
div>
div>
<div class="con3"><font>历 史 遗 址font><a href="lsyz.html" >更多 》a>div>
<div class="con4" id="gd">
<div class="vgd" onmouseover="stops()" onmouseout="start()">
<div id="gd1">
<div>
<img src="img/4.hz.JPG" width="246" height="200"/>
<p>武 侯 墓p>
div>
<div> <img src="img/yz.1.JPG" width="246" height="200"/>
<p>褒 河 栈 道p>
div>
<div>
<img src="img/yz3.JPG" width="246" height="200"/>
<p>武 侯 墓p>
div>
div>
<div id="gd2">div>
div>
div>
div>
<div class="right">
<div class="r1"><font>历 史 人 物font><a href="lsrw.html" target="_blank">更多 》a>div>
<div class="rbk">
<div class="r2">
<p>刘备（161年－223年6月10日）字玄德，东汉末年幽州涿郡涿县（今河北省涿州市）人，西汉中山靖王刘胜的后代，三国时期蜀汉开国皇帝、政治家、史家又称他为先主。p>
div>
<div class="r3"><img src="img/linbei.PNG" />div>
div>
<div class="rbk1">
<div class="r2">
<p>诸葛亮（181年－234年10月8日[1]），字孔明，号卧龙（也作伏龙），汉族，徐州琅琊阳都（今山东临沂市沂南县）人，三国时期蜀汉丞相，杰出的政治家、军事家、散文家、书法家、发明家p>
div>
<div class="r5"><img src="img/zgl.PNG"/>div>
div>
div>
div>
<div class="copy w">
<pre>
Copyright 2008-2010 Bluestation Net,All Rights Reserved 版本所有：汉中旅游
景点地址：陕 西 省 汉 中 市 全 境
陕ICP备09160023号 咨询电话：0916-4969720 技术支持：华育国际
pre>
div>
body>
<script>
var arr=new Array('img/top.jpg','img/top21.jpg','img/top22.jpg');
var i=0;//下标
var t=null;
function change(){
//清除计时器
window.clearTimeout(t);
//获取图片对象
var img=document.getElementById('img');
//改变图片路径
img.src=arr[i];
//下标的增加
i++;
//下标范围的控制
if(i>arr.length-1){
i=0;
}
//设置计数器
t=window.setTimeout('change()',2000);
}
change();
script>
<script type="text/javascript">
var gd =document.getElementById('gd')
var gd1 = document.getElementById('gd1')
var gd2 = document.getElementById('gd2')
var time=null;
gd2.innerHTML=gd1.innerHTML;
function gundong () {
//alert(gd.scrollLeft)
if (gd.scrollLeft>gd1.offsetWidth) {
gd.scrollLeft-=gd1.offsetWidth
}else{
gd.scrollLeft+=2;
};
}
function start () {
// 清空定时器
window.clearInterval(time);
//定义定时器
time = window.setInterval('gundong()',30)
}
function stops () {
// 清空定时器
window.clearInterval(time);
}
start()
script>
<script>
var bgd =document.getElementById("bgd")
var tp1=document.getElementById("tp1")
var tp2=document.getElementById("tp2")
tp2.innerHTML=tp1.innerHTML;
var tm=null;
function picgundong () {
//alert(gd.scrollLeft)
if (bgd.scrollLeft>tp1.offsetWidth) {
bgd.scrollLeft-=tp1.offsetWidth
}else{
bgd.scrollLeft+=5;
};
}
function picstart () {
// 清空定时器
window.clearInterval(tm);
//定义定时器
tm = window.setInterval('picgundong()',60)
}
function picstops () {
// 清空定时器
window.clearInterval(tm);
}
picstart ()
script>
html>
CSS样式代码
@charset "utf-8";
/* CSS Document */
*{
list-style:none;
padding:0px;
margin:0px;
text-decoration:none;
font-size:12px;}
.w{
width:996px;
margin:0px auto;}
body,html{
width:100%;
height:100%;
background-image:url(../img/dbj1.jpg);}
.logo{
width:192px;}
.lg{width:162px;
float:left;
margin-left:30px;}
.menu ul li.zh{background:none;}
.menu{
background:#09F;
width:804px;
height:40px;
float:right;
margin-top:20px;}
.menu ul li{
float:left;
text-align:center;
line-height:40px;
background:url(../img/fjx.jpg) right no-repeat;
width:134px;}
.menu ul li:hover{background:royalblue;}
.menu ul li a{
color:#FFF;
font-size:24px;
font-weight:bold;
font-family:隶书;}
/*.menu ul li a:hover{ color:#6F0;}*/
.top{
width:996px;
height:200px;
margin-top:2px;}
.top img{ width:996px; height:200px;}
.hz{width:976px;
height:30px;
line-height:30px;
margin-top:5px;
background:#06F;
font-size:18px;
color:#fff;
font-family: 楷体;
padding-left:20px;
font-weight: bold;}
.hz a:hover{
color:#F00;}
.lb{
margin-bottom:5px;
margin-top:5px;
width:391px;
height:250px;
float:left;}
.lb img{
width:391px;
height:250px;}
.wz{
margin-bottom:5px;
margin-top:5px;
margin-left:5px;
width:600px;
height:250px;
float:left;
line-height:18px;}
.wz span{
display:block;
font-size:12px;
padding: 7px 15px 0px ;
text-indent:2em;
line-height:22px;}
.left{
margin-bottom:5px;
width:236px;
height:580px;
float:left;}
.left1{
background:#06F;
width:236px;
height:30px;
line-height:30px;
float:left;}
.left1 font{
font-size:18px;
font-weight:bold;
font-family:楷体;
color:#FFF;
margin-left:20px;}
.bk{
border:#F3F3F3 1px groove;
width:236px;
height:280px;}
.bk1{
margin-top:5px;
border:#F3F3F3 1px groove;
width:236px;
height:280px;}
.left2{
width:236px;
height:250px;
float:left;;
font-weight:bold;}
.left2 ul li{
text-align:center;}
.left2 ul li a{
color:#000;
font-size:12px;
line-height:45px;}
.left2 ul li a:hover{color:#0F0;}
.con{
margin-bottom:5px;
width:502px;
height:580px;
float:left;
margin-left:10px;}
.con1{
background:#06F;
width:506px;
height:30px;
line-height:30px;
float:left;}
.con1 font{
font-size:18px;
font-weight:bold;
font-family:楷体;
color:#FFF;
margin-left:20px;}
.con1 a, .r1 a, .con3 a{
color:#FFF;
float:right;
font-weight:bold;}
.con1 a:hover, .r1 a:hover, .con3 a:hover{
color:#F00;}
.con2 p{
font-size:12px;
line-height:23px;
text-indent:2em;
margin-bottom:5px;}
#bgd{ clear:both;width:500px; height:122px;overflow:hidden;}
.vbgd{ width:410%; height:122px;}
#bgd #tp1, #bgd #tp2 {
float:left;
width:1010px;
height:122px;
float:left;}
#bgd #tp1 img, #bgd #tp2 img{
float:left;
margin-right:2px;
width:124px;
height:122px;}
.con3{
margin-top:5px;
background:#06F;
width:500px;
height:30px;
line-height:30px;
float:left;}
.con3 font{
font-size:18px;
font-weight:bold;
font-family:楷体;
color:#FFF;
margin-left:20px;}
.con4{ clear:both; width:500px; height:230px; overflow:hidden;}
.vgd{ width:300%; height:230px;}
.con4 #gd1, .con4 #gd2{ float:left; width:750px;}
.con4 #gd1 div, .con4 #gd2 div{
margin-top:5px;
float:left;
width:246px;
margin-right:4px;}
.con4 #gd1 div p, .con4 #gd2 div p{ line-height:30px; height:30px; text-align:center;}
.right{
width:226px;
height:580px;
float:left;
margin-left:10px;
margin-bottom:5px;}
.r1{
background:#06F;
width:245px;
height:30px;
line-height:30px;
float:left;}
.r1 font{
font-size:18px;
font-weight:bold;
font-family:楷体;
color:#FFF;
margin-left:20px;}
.r2{
width:240px;
line-height:20px;}
.r2 p{ text-indent:2em; padding-left:5px;}
.r3 img{
width:240px;
height:170px;}
.r4{
width:240px;
line-height:25px;}
.r5 img{
width:240px;
height:172px;}
.rbk{
border:#CCC 1px groove;
width:242px;
height:280px;}
.rbk1{
margin-top:10px;
border:#CCC 1px groove;
width:242px;
height:273px;}
.copy{
background:#06F;
width:996px;
height:100px;
clear:both;
padding-top:15px;
line-height:25px;
text-align: center;
color:#FFF;}
/*.copy pre{
padding-top:15px;
line-height:25px;}
六、遇到问题及如何解决
实训中遇到得困难不少，比如如何收集适合网页的图片素材、如何让网页的配色看着更自然更舒适、如何用PS裁剪大小合适的图片、以及制作表单时候如何设计等等，最后，通过上网查询和请教别人得到了很好的解决。
七、实训总结
通过这次网页设计制作实训，能够灵活的运用到所学的知识和技巧制作简单的网页，掌握了个人网站建设的技巧和基本网站建设的过程。对于用Dreamweaver、vscode、hbuider等制作网页更为得心应手。实训过程中我尽量充分利用老师教过的知识，对所学知识进行了巩固。为了制作出更好的效果我也翻阅参考了其他资料，学习到了更多的网页处理技巧。制作网页的过程中遇到很多的问题，通过查找资料或询问同学都有得到解决。这次综合实训我的收获很大，学有所用，在实践的过程中学习巩固对知识能有更深的记忆。网页制作是一门很实用的学科，值得我以后进行更深入的学习。这次实训中我也体会到了自己掌握的技巧太少了，以至于很多想法都没能实现，在以后的学习过程中我要对网页制作有更深的了解，做出更为成熟的网页。
八、更多干货
1.如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “点赞” “✍️评论” “收藏” 一键三连哦！
2.❤️【关注我| 获取更多源码 | 优质文章】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！
3.以上内容技术相关问题欢迎一起交流学习