资源描述
课程设计汇报
学 院： 信息科学和工程学院
专 业：计算机科学和技术（软件外包方向）
班 级： 计软1302班
学 号： 12141041
学生姓名： 韩世昌
指导老师： 张芊茜
课程名称： Web用户端编程技术
设计名称： 网页设计
一、 设计内容及要求
① 设计题目
题目自定，能够是“我个人网站”、“我大学生活”、“我家乡”等，也能够是其它题目。
要求专题要鲜明，内容要充实、健康。
② 设计任务
利用HTML、CSS和JavaScript技术完成一个相对完整网站，最少完成5个页面。
③ 设计要求
使用HTML标识，CSS样式及JavaScript技术，完成网页没有错误首页设置导航栏，命名为index.htm。利用CSS技术对网站进行布局，网站风格统一灵活利用JavaScript使网页生动，配置服务器，公布网站，并经主流浏览器测试经过
④ 具体要求
时钟，级联菜单，动态图片展示，多种广告栏，HTML5和CSS3应用，建立表单页面，并用JavaScript对表单内容进行验证。
二、 设计思绪
我课程设计专题定是家乡介绍，共有5个页面，分别实现首页，类，历史文化，家乡景点介绍和注册本站会员和家乡特产链接。首页大致分为4部分，比较简单，分别用css实现导航栏，左边推荐网站div块和下方图片块和用JavaScript脚本实现了图面自动循环切换和页面底部时钟显示。，css设置导航栏，下面块和上面背景图片边缘对齐，左边有一个div中有列表 设置了锚点。
三、 设计结果及分析
网页显示没有达成预期效果，在网页设计上还需要提升，内容比较少，不丰满。在网页布局上也比较单调，关键是设计时间只有四天，没有太多时间进行修改。我会在寒假深入修改此次课程设计作业，让效果达成满意状态。
四、 总结
课程设计是培养学生综合利用所学知识发觉提出分析和处理实际问题锻炼实践能力关键步骤,是对学生实际工作能力具体训练和考察过程，伴随科学技术发展日新日异，Web网页技术已经成为当今计算机应用中空前活跃领域，在生活中能够说得是无处不在。所以作为二十一世纪大学来说掌握Web网页开发技术是十分关键。
回顾起此次Web课程设计，至今我仍感慨颇多，确实，从选题到定稿，从理论到实践，在整整4天日子里，能够说得是苦多于甜，
不过能够学到很多很多东西，同时不仅能够巩固了以前所学过知识，而且学到了很多在课堂上所没有学到过知识。经过这次
课程设计使我知道了理论和实际相结合是很关键，只有理论知识是远远不够，只有把所学理论知识和实践相结合起来，从理论中得出结论，才能真正为社会服务，从而提升自己实际动手能力和独立思索能力。在设计过程中碰到问题，能够说得是困难重重，第一次做，难免会碰到过多种多样问题，同时在设计过程中发觉了自己不足之处，对以前所学过知识了解得不够深刻，掌握得不够牢靠。经过这次课程设计以后，一定把以前所学过知识重新温故。
五、附录（源代码）
主页源代码
<!DOCTYPE html>
<html>
<head>
<title>章丘</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript">
var a=["p1.jpg","p2.jpg","p3.jpg","p4.jpg","p5.jpg"];
var i=0;
function pic() {
document.getElementById("picview").src=a[i];
i++;
if(i==a.length-1)
{
i=0;
}
setTimeout("pic()",);
}
window.onload = function() {
pic();
}
</script>
</head>
<body>
<div id="header">
章 丘
</div>
<div id="nav">
<ul>
<a href="index.html"><li>首页</li></a>
<a href="lishiyange.html"><li>历史沿革</li></a>
<a href="jingjigaikuang.html"><li>经济概况</li></a>
<a href="lvyoujingdian.html"><li>旅游景点</li></a>
<a href=""><li>地方特产</li></a>
<a href="zhuce.html"><li>常驻本站</li></a>
</ul>
</div>
</div>
<div id="container">
<div id="pic">
<img id="picview" src="p1.jpg" width="600" height="300" />
</div>
<p>章丘市，在山东省省会济南市东部，距离济南市区约40公里，是济南市下辖一个县级市，被誉为“小泉城”。1992年8月撤销原章丘县编制改为县级市，即章丘市，仍隶属于济南市。现辖11个街道办事处，9个镇，人口106.42万。济南五大泉群之一百脉泉在章丘市境内，济南七十二名泉章丘市境内拥有6个。国家级明水经济开发区和济南高新区相邻。胶济铁路、济青高速贯穿境内，交通便利。
</p>
</div>
<div id="datetime">time</div>
<script>
function setTime(){
var day="";
var month="";
var ampm="";
var ampmhour="";
var myweekday="";
var year="";
var myHours="";
var myMinutes="";
var mySeconds="";
mydate=new Date();
myweekday=mydate.getDay();
mymonth=parseInt(mydate.getMonth()+1)<10?"0"+(mydate.getMonth()+1):
mydate.getMonth()+1;
myday= mydate.getDate();
myyear= mydate.getYear();
myHours = mydate.getHours();
myMinutes = mydate.getMinutes();
mySeconds = parseInt(mydate.getSeconds())<10?"0"+mydate.getSeconds():mydate.getSeconds();
year=(myyear > 200) ? myyear : 1900 + myyear;
if(myweekday == 0)weekday=" 星期日 ";
else if(myweekday == 1)weekday=" 星期一 ";
else if(myweekday == 2)weekday=" 星期二 ";
else if(myweekday == 3)weekday=" 星期三 ";
else if(myweekday == 4)weekday=" 星期四 ";
else if(myweekday == 5)weekday=" 星期五 ";
else if(myweekday == 6)weekday=" 星期六 ";
datetime.innerText=year+"年"+mymonth+"月"+myday+"日 "+myHours+":"+myMinutes+":"+mySeconds+" "+weekday;setTimeout("setTime()",1000);}setTime();
</script>
<div id="footer">
<a href="#header">返回顶部</a>
</div>
</body>
</html>
历史沿革源代码
<!DOCTYPE html>
<html>
<head>
<title>章丘-历史沿革</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="header">
章 丘
</div>
<div id="container">
<div id="nav">
<ul>
<a href="index.html"><li>首页</li></a>
<a href="lishiyange.html"><li>历史沿革</li></a>
<a href="jingjigaikuang.html"><li>经济概况</li></a>
<a href="lvyoujingdian.html"><li>旅游景点</li></a>
<a href=""><li>地方特产</li></a>
<a href="zhuce.html"><li>常驻本站</li></a>
</ul>
</div>
<div id="main">
<p> 章丘市域总面积1855平方公里，辖20个镇（街道），908个行政村居，总人口101.8万。现有党组织2744个，党员56937名。章丘是“龙山文化”发祥地，被民政部评为“千年古县”。市内群泉密布，被誉为“小泉城”。
，完成生产总值755.2亿元，增加12.0%；完成地方公共财政预算收入40.89亿元，其中地方税收29.91亿元，增加16.18%，税比达成73.15%，较提升近20个百分点，由全省最末尾升至靠近中游水平。规模以上工业企业达成533家,完成规模以上工业增加值306.7亿元、利税140.9亿元，分别增加16.0%、29.4%，被评为全国科技进步优异县市。整年新签约过亿元项目22个，其中，总投资60亿元喜来乐项目、投资60亿元环球欢乐世界项目将量身打造绣源河为北方地域冬季旅游目标地；总投资10亿元银江智谷产业园项目，填补了章丘软件产业空白；总投资43亿元山东蓝海领航电子商务产业园、50亿元中心商贸区唐人中心城市综合体项目将有力带动服务业发展。粮食总产实现“十一连增”，被评为全国粮食生产优异县市、品牌农业示范县市。顺利实施“十项民生工程”、“十件惠民实事”，总计完成投资30亿元。城镇居民人均可支配收入、农民人均纯收入分别达成25628元、15294元。被评为全国平安建设优异市、全省信访工作优异单位。严格根据中央、省委、济南市委要求开展群众路线教育实践活动，确保不空、不虚、不偏，切实见到实效。 </p>
<img class="innerpic" src="历史沿革/百脉泉.jpg" width="400" height="200" /><br />
<span>历史上章丘</span>
<p>商代，东、北部为蒲姑国。商末，西部为谭国（全部城在今龙山街道城子崖）。
春秋时期，前后为谭国和齐国诸侯封地赖邑、宁邑、台邑、崔邑。战国，属田齐。
秦，属济北郡。
</p>
<p>西汉，属青州部济南郡（治东平陵城）。汉景帝四年（前153年），首次置县称阳丘（治回军镇，今绣惠街道回村）等。
东汉时，中部为阳丘县，北部为菅县、猇县，南部为土鼓县。后阳丘、猇县并入东朝阳县。
魏晋时期，东朝阳县属乐安国。
南北朝刘宋，改东朝阳县为朝阳县，属齐郡。
北齐，废朝阳县置高唐县（治回军镇）。北齐天保七年（556年），高唐县迁治女郎山（章丘山）南建城。
</p>
<img class="innerpic" src="历史沿革/城子崖遗址.jpg" width="400" height="200" /><br />
<p> 隋开皇十六年（596年），“以博州亦有高唐，改为章丘县”，取县北山章丘为名。</p>
<p>唐贞观元年（627年），属河南道齐州济南郡。</p>
<p>宋、金，属济南府。</p>
<p>元，属山东东路西南道济南路总管府。</p>
<p>明、清，皆属济南府。</p>
<p>民国初，属岱北道。民国3年（19），改属济南道。1927年，废道，属山东省。1938年3月，属鲁北行署第十二督察区。1939年属泰安、莱芜、历城、淄川、博山、章丘、新泰七县边区联防办事处。1940年4月，属鲁中行政区泰山专区。1943年春，淄川、章丘、莱芜三县接合部新建一县，定名淄章莱边联县，章丘县由二个区划归该县。</p>
<img class="innerpic" src="历史沿革/洛庄汉墓兵马俑.jpg" width="400" height="200" /><br />
<p> 1944年春撤销淄章莱边联县。1945年8月，析章丘、历城二县各一部，新建章历县。章历县辖五个区，县政府驻章丘城。章丘县辖10个区，县政府驻埠村。二县均属鲁中行署泰山专区。1946年6月，章历县改属渤海行署清河专区。1950年4月，章丘、章历二县改属淄博专区。
1953年7月，章丘、章历二县改属泰安专区。1953年9月5日，章历县撤销，合并入章丘县。县驻地由埠村迁章丘城。1958年8月，章丘县驻地由章丘城迁现驻地明水。1958年9月15日，泰安专区和济南合并，章丘县随同属济南市。1961年4月8日，泰安专区由济南市分出恢复原建制，章丘县回属泰安专区。1978年11月17日，章丘县由泰安专区划归济南市。1992年8月1日，经国务院同意，章丘撤县设市、辖区不变，由济南市代管。</p>
</div>
</div>
<div id="footer">
<a href="#header">返回顶部</a>
</div>
</body>
</html>
经济概况源代码
<!DOCTYPE html>
<html>
<head>
<title>章丘-经济概况</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="header">
章 丘
</div>
<div id="container">
<div id="nav">
<ul>
<a href="index.html"><li>首页</li></a>
<a href="lishiyange.html"><li>历史沿革</li></a>
<a href="jingjigaikuang.html"><li>经济概况</li></a>
<a href="lvyoujingdian.html"><li>旅游景点</li></a>
<a href=""><li>地方特产</li></a>
<a href="zhuce.html"><li>常驻本站</li></a>
</ul>
</div>
<div id="main">
<p> 章丘市生产总值755.2亿元，比增加12.0%，其中：第一产业增加值77.2亿元，增加4.2%；第二产业增加值454.7亿元，增加14.3%；第三产业增加值223.4亿元，增加10.1%，三次产业结
国家级明水经济技术开发区 构比为10.2:60.2:29.6。
章丘市地域财政总收入60.5亿元，下降1.0%。其中地方公共财政预算收入40.9亿元，增加2.7%。国地税收入52.8亿元，增加5.8%。其中：国税27.3亿元，增加1.6%；地税25.6亿元，增加10.6%。
固定资产投资355.3亿元，比增加22.1%。其中计划总投资亿元以上在建项目96个，完成投资162.1亿元，增加85.5%。
章丘市新增城镇就业6934人，农村富余劳动力转移就业1.27万人。城镇登记失业率为2.1%。
</p>
<img class="innerpic" src="经济概况/经济.jpg" width="400" height="200" /><br />
<span>第一产业</span>
<p>粮食种植面积11.9万公顷，比增加0.3%。粮食总产量72.8万吨，比增加1.5%。
共新引进市外现代农业经营主体18个，流转土地1.83万亩，协议投资额6.22亿元，实际投资额1.339亿元
</p>
<span>第二产业</span>
<p>章丘市新增规模以上工业企业77家，年末达成528家，完成工业增加值306.7亿元，比增加16.0%。实现销售收入1336.8亿元，增加14.5%；利税140.9亿元，增加29.4%；利润81.9亿元，增加29.0%。
章丘市高新技术产业企业153家，实现产值559.7亿元，比增加16.8%。占规模以上工业总产值比重为41.74%，比提升1.22个百分点。
明水经济技术开发区共有规模以上工业企业278家，比净增32家。实现主营业务收入1022.99亿元、工业增加值237.2亿元、利税96.09亿元、利润53.15亿元，比分别增加14.89%、15.16%、29.83%、30.61%。
有资质等级建筑业企业44家，年末从业人员4.1万人，实现产值86.63亿元。房屋建筑施工面积414.31万平方米，房屋完工面积161.53万平方米。
</p>
<img class="innerpic" src="经济概况/经济3.jpg" width="400" height="200" /><br />
<span>第三产业</span>
<p>社会消费品零售总额达275.4亿元，比增加14.7%。按经营地统计，城镇零售额125.9亿元，增加14.8%；乡村零售额149.5亿元，增加13.9%。限额以上批发零售、住宿餐饮业单位201家
，实现零售总额42.8亿元，增加14.2%。
进出口总额93776万美元，比增加9.3%。其中，出口75005万美元，增加18.9%；进口18771万美元，下降17.4%。
年末民用汽车拥有量达15.4万辆，比增加12.2%。邮政业务总量5350万元，比下降3.2%。年末固定电话用户17.6万户，下降15.5%。移动电话用户99.6万户，增加6.1%。互联网拨号注册及宽带网用户13.6万户，增加6.3%。
接待中国外游客880万人次，实现旅游业总收入48.4亿元，比分别增加17.3%和30%。
年末章丘市银行业金融机构人民币各项存款余额428.8亿元，比年初增加60.7亿元。人民币个人存款余额287.0亿元，比年初增加37.6亿元。
</p>
<img class="innerpic" src="经济概况/经济2.jpg" width="400" height="200" /><br />
<span>居民生活</span>
<p> ，城镇居民人均可支配收入25628元，比增加10.8%；人均消费性支出15993元，增加12.3%。城镇恩格尔系数为29.80%，下降0.67个百分点。农民人均纯收入15294元，增加12.6%；人均生活消费支出8987元，增加14.1%。农村恩格尔系数为31.53%，下降0.11个百分点。城镇居民人均住宅使用面积40.45平方米，比增加0.28平方米；农村居民人均生活用房面积46.10平方米，增加1.27平方米。
</p>
</div>
</div>
<div id="footer">
<a href="#header">返回顶部</a>
</div>
</body>
</html>
旅游景点源代码
<!DOCTYPE html>
<html>
<head>
<title>章丘-旅游景点</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="header">
章 丘
</div>
<div id="container">
<div id="nav">
<ul>
<a href="index.html"><li>首页</li></a>
<a href="lishiyange.html"><li>历史沿革</li></a>
<a href="jingjigaikuang.html"><li>经济概况</li></a>
<a href="lvyoujingdian.html"><li>旅游景点</li></a>
<a href=""><li>地方特产</li></a>
<a href="zhuce.html"><li>常驻本站</li></a>
</ul>
</div>
<div class="anchor-list">
<a name="9" class="lemma-anchor para-title" ></a>
<a name="sub3013_9" class="lemma-anchor " ></a>
<a name="旅游产业" class="lemma-anchor " ></a>
</div><h2 class="para-title level-2">
</h2>
<table log-set-param="table_view" class="table-view log-set-param" width="658"><caption><br/> </caption><tr><td width="328" height="18"><a>城子崖遗址</a></td><td valign="top" align="left" width="329"><a >兴国寺</a></td></tr><tr><td width="328" height="18"><a >危山兵马俑</a></td><td valign="top" align="left" width="329"><a>齐长城</a></td></tr><tr><td width="328" height="18"><a >洛庄汉王陵</a></td><td valign="top" align="left" width="329"><a>李开先墓</a></td></tr><tr><td width="328" height="18"><a >朱家峪旅游度假区</a></td><td valign="top" align="left" width="329"><a >西河遗址</a></td></tr><tr><td width="328" height="18"><a >小荆山遗址</a></td><td valign="top" align="left" width="329"><a >东平陵故城</a></td></tr><tr><td height="18" colspan="2"><a >赵八洞石刻造像</a></td></tr></table><div class="para" label-module="para"><sup>[7]</sup><a class="sup-anchor" name="ref_[7]_3013"> </a>
</div>
<table log-set-param="table_view" class="table-view log-set-param" width="658"><caption>旅游景点<br/> </caption><tr><td width="311" height="18"><a >墨泉</a></td><td width="346" valign="top"><a >眼明泉</a></td></tr><tr><td width="311" height="18"><a>梅花泉</a></td><td valign="top" align="left" width="346"><a >百脉泉</a></td></tr><tr><td width="311" height="18"><a >三王峪</a></td><td valign="top" align="left" width="346"><a >危山风景区</a></td></tr><tr><td width="311" height="18"><a >锦屏山</a></td><td valign="top" align="left" width="346"><a >白云湖</a></td></tr><tr><td width="311" height="18"><a />七星台</a></td><td valign="top" align="left" width="346"><a >朱家峪</a></td></tr><tr><td width="311" height="18"><a >济南植物园</a></td><td valign="top" align="left" width="346"><a >眼明泉公园</a></td></tr><tr><td width="311" height="18"><a >百脉泉公园</a></td><td valign="top" align="left" width="346"><a>赵八洞</a>风景区</td></tr><tr><td width="311" height="18"><a >石匣景区兴隆寺</a></td><td valign="top" align="left" width="346"><a t >宝珠山风景区</a></td></tr><tr><td width="311" height="18"><a >东八井九鼎山</a></td><td valign="top" align="left" width="346"><div class="para" label-module="para"><a >城子崖遗址博物馆</a></div>
</td></tr><tr><td colspan="1" rowspan="1"><a>莲华山胜水禅寺风景区</a></td><td colspan="1" rowspan="1"> </td></tr></table><div class="para" label-module="para"><sup>[8]</sup><a class="sup-anchor" name="ref_[8]_3013"> </a>
</div>
<div id="footer">
<a href="#header">返回顶部</a>
</div>
</body>
</html>
常驻本站源代码
<!DOCTYPE html>
<html>
<head>
<title>章丘-常驻此站</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
<style type="text/css">
h1
{
color:#FF0000;
font-family:"楷体";
font-size:40px;
font-weight:bold;
}
.xinghao
{
color:red;
text-decoration:none;
}
</style>
<script>
function validate()
{
//假如姓名为空，弹窗提醒“请输入姓名”，以后该文本框取得焦点
var n=reg_form.uname.value;
if(n==""||n.length==0)
{
alert("请输入姓名!");
document.reg_form.uname.focus();
return false;
}
//假如没有选择性别，弹窗提醒“请指定性别”，以后第一个选项取得焦点
var sex=document.getElementsByName("gender");
if(sex[0].checked==false&&sex[1].checked==false)
{
alert("请指定您性别!");
sex[0].checked=true;
return false;
}
var age=reg_form.age.value;
if(!(age>=1&&age<=99))
{
alert("请输入有效年纪!");
样式表部分源代码
* {
padding: 0;
margin: 0;
}
body {
background-color: #FFED97;
}
#container {
width: 1000px;
margin: 0 auto;
}
#header {
text-align: center;
font-size: 60px;
padding: 20px 0;
height: 50px;
margin-bottom: 35px;
font-family: "黑体";
background-image: url(headbg.jpg);
background-repeat: repeat-x;
color: black;
}
p {
margin: 10px 0;
font-size:20px;
text-indent:2em;
}
span {
font-size:28px;
font-weight:bold;
font-family: "黑体";
}
#datetime {
font-size:18px;
text-align: center;
font-weight:bold;
font-family: "宋体";
}
.innerpic {
float: right;
margin: 10px;
}
#pic {
text-align: center;
margin: 50px 0;
}
#picview {
width: 800px;
height: 400px;
}
#nav {
font-family: "黑体";
font-size: 16px;
text-align: center;
}
#nav li {
display: inline;
padding: 10px 50px;
margin: 10px 0;
border-bottom: 2px solid #005bb9;
}
#nav li:hover {
background-color: #005bb9;
color: white;
}
#nav a {
text-decoration: none;
color: black;
}
#main {
margin-top: 35px;
}
#footer {
padding: 20px;
height: 25px;
text-align: center;
margin-top: 20px;
background-image: url(footbg.jpg);
background-repeat: repeat-x;
}
#footer a {
text-decoration: none;
color: black;
展开阅读全文
浙ICP备2021020529号-1 | 浙B2-20240490 
