Web客户端编程技术课程设计报告.doc
Web客户端编程技术课程设计报告课程设计报告学 院： 信息科学与工程学院 专 业：计算机科学与技术（软件外包方向）班 级： 计软1302班 学 号： 201312141041 学生姓名： 韩世昌 指导教师： 张芊茜 课程名称： Web客户端编程技术 设计名称： 网页设计 一、 设计内容及要求 设计题目题目自定，可以是“我的个人网站”、“我的大学生活”、“我的家乡”等，也可以是其它题目。要求主题要鲜明，内容要充实、健康。 设计任务运用HTML、CSS和JavaScript技术完成一个相对完整的网站，至少完成5个页面。 设计要求使用HTML标记，CSS样式及JavaScript技术，完成的网页没有错误首页设置导航栏，。利用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="" /> <script type="text/javascript">var a="","","","",""var i=0;function pic() ("picview").src=ai;i+;if(i=) i=0;setTimeout("pic()",2000); = function() pic();</script></head><body><div id="header"> 章 丘 </div> <div id="nav"> <ul> <a href=""><li>首页</li></a> <a href=""><li>历史沿革</li></a> <a href=""><li>经济概况</li></a> <a href=""><li>旅游景点</li></a> <a href=""><li>地方特产</li></a> <a href=""><li>常驻本站</li></a> </ul> </div> </div> <div id="container"> <div id="pic"><img id="picview" src="" width="600" height="300" /></div> <p>章丘市，位于山东省省会济南市的东部，距离济南市区约40公里，是济南市下辖的一个县级市，被誉为“小泉城”。1992年8月撤销原章丘县编制改为县级市，即章丘市，仍隶属于济南市。现辖11个街道办事处，9个镇，。济南五大泉群之一的百脉泉位于章丘市境内，济南七十二名泉章丘市境内拥有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=();mymonth=parseInt()+1)<10?"0"+()+1):()+1;myday= ();myyear= ();myHours = ();myMinutes = ();mySeconds = parseInt()<10?"0"+():();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=" 星期六 "=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="" /> </head><body> <div id="header"> 章 丘 </div> <div id="container"> <div id="nav"> <ul> <a href=""><li>首页</li></a> <a href=""><li>历史沿革</li></a> <a href=""><li>经济概况</li></a> <a href=""><li>旅游景点</li></a> <a href=""><li>地方特产</li></a> <a href=""><li>常驻本站</li></a> </ul> </div> <div id="main"> <p> 章丘市域总面积1855平方公里，辖20个镇（街道），908个行政村居，。现有党组织2744个，党员56937名。章丘是“龙山文化”的发祥地，被民政部评为“千年古县”。市内群泉密布，被誉为“小泉城”。 2013年，%；，%，%，较2012年提高近20个百分点，由全省最末尾升至接近中游水平。规模以上工业企业达到533家,、，%、%，被评为全国科技进步先进县市。全年新签约过亿元项目22个，其中，总投资60亿元的喜来乐项目、投资60亿元的环球欢乐世界项目将量身打造绣源河为北方地区冬季旅游目的地；总投资10亿元的银江智谷产业园项目，填补了章丘软件产业的空白；总投资43亿元的山东蓝海领航电子商务产业园、50亿元的中心商贸区唐人中心城市综合体项目将有力带动服务业发展。粮食总产实现“十一连增”，被评为全国粮食生产先进县市、品牌农业示范县市。顺利实施“十项民生工程”、“十件惠民实事”，总计完成投资30亿元。城镇居民人均可支配收入、农民人均纯收入分别达到25628元、15294元。被评为全国平安建设先进市、全省信访工作先进单位。严格按照中央、省委、济南市委要求开展群众路线教育实践活动，确保不空、不虚、不偏，切实见到实效。 </p> <img class="innerpic" src="历史沿革/" width="400" height="200" /><br /> <span>历史上的章丘</span> <p>商代，东、北部为蒲姑国。商末，西部为谭国（都城在今龙山街道城子崖）。 春秋时期，先后为谭国和齐国诸侯封地赖邑、宁邑、台邑、崔邑。战国，属田齐。 秦，属济北郡。</p> <p>西汉，属青州部济南郡（治东平陵城）。汉景帝四年（前153年），首次置县称阳丘（治回军镇，今绣惠街道回村）等。 东汉时，中部为阳丘县，北部为菅县、猇县，南部为土鼓县。后阳丘、猇县并入东朝阳县。 魏晋时期，东朝阳县属乐安国。 南北朝刘宋，改东朝阳县为朝阳县，属齐郡。 北齐，废朝阳县置高唐县（治回军镇）。北齐天保七年（556年），高唐县迁治女郎山（章丘山）南建城。</p> <img class="innerpic" src="历史沿革/" width="400" height="200" /><br /> <p> 隋开皇十六年（596年），“以博州亦有高唐，改为章丘县”，取县北山章丘为名。</p> <p>唐贞观元年（627年），属河南道齐州济南郡。</p> <p>宋、金，属济南府。</p> <p>元，属山东东路西南道济南路总管府。</p> <p>明、清，皆属济南府。</p> <p>民国初，属岱北道。民国3年（1914年），改属济南道。1927年，废道，属山东省。1938年3月，属鲁北行署第十二督察区。1939年属泰安、莱芜、历城、淄川、博山、章丘、新泰七县边区联防办事处。1940年4月，属鲁中行政区泰山专区。1943年春，淄川、章丘、莱芜三县接合部新建一县，定名淄章莱边联县，章丘县由二个区划归该县。</p><img class="innerpic" src="历史沿革/" 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="" /> </head><body> <div id="header"> 章 丘 </div> <div id="container"> <div id="nav"> <ul> <a href=""><li>首页</li></a> <a href=""><li>历史沿革</li></a> <a href=""><li>经济概况</li></a> <a href=""><li>旅游景点</li></a> <a href=""><li>地方特产</li></a> <a href=""><li>常驻本站</li></a> </ul> </div> <div id="main"> <p> ，%，其中：，%；，%；，%，三次产业结 国家级明水经济技术开发区 :。 ，%。，%。，%。其中：，%；，%。，%。其中计划总投资亿元以上在建项目96个，%。2013年章丘市新增城镇就业6934人，。%。 </p> <img class="innerpic" src="经济概况/" width="400" height="200" /><br /> <span>第一产业</span> <p>，%。，%。2013年共新引进市外现代农业经营主体18个，</p><span>第二产业</span> <p>2013年章丘市新增规模以上工业企业77家，2013年年末达到528家，%。，%；，%；，%。章丘市高新技术产业企业153家，%。%，。明水经济技术开发区共有规模以上工业企业278家，比2012年净增32家。、，%、%、%、%。有资质等级的建筑业企业44家，。，。</p> <img class="innerpic" src="经济概况/" width="400" height="200" /><br /> <span>第三产业</span> <p>，%。按经营地统计，%；，%。限额以上批发零售、住宿餐饮业单位201家 ，%。2013年进出口总额93776万美元，%。其中，出口75005万美元，%；进口18771万美元，%。，%。2013年邮政业务总量5350万元，%。，%。，%。，%。2013年接待国内外游客880万人次，%和30%。，。，。</p><img class="innerpic" src="经济概况/" width="400" height="200" /><br /><span>居民生活</span> <p> 2013年，城镇居民人均可支配收入25628元，%；人均消费性支出15993元，%。%，。农民人均纯收入15294元，%；人均生活消费支出8987元，%。%，。，；，。</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="" /> </head><body> <div id="header"> 章 丘 </div> <div id="container"> <div id="nav"> <ul> <a href=""><li>首页</li></a> <a href=""><li>历史沿革</li></a> <a href=""><li>经济概况</li></a> <a href=""><li>旅游景点</li></a> <a href=""><li>地方特产</li></a> <a href=""><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 type="text/css">h1color:#FF0000;font-family:"楷体"font-size:40px;font-weight:bold;.xinghaocolor:red;text-decoration:none;</style><script>function validate() /如果姓名为空，弹窗提示“请输入姓名”，之后该文本框获得焦点var n=;if(n=""|=0) alert("请输入姓名!"); (); return false; /如果没有选择性别，弹窗提示“请指定性别”，之后第一个选项获得焦点var sex=("gender");if(sex0.checked=false&&sex1.checked=false) alert("请指定您的性别!"); sex0.checked=true; return false; var age=;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(); 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(); background-repeat: repeat-x; #footer a text-decoration: none; color: black; font-size: 18px; font-weight: bold;
