网站建设与网页设计大作业.doc
Four short words sum up what has lifted most successful individuals above the crowd: a little bit more.-author-date网站建设与网页设计大作业武汉理工大学管理学院学生学号0121103490128设计成绩武漢理工大學管理學院课程大作业课程名称:网站建设与网页设计网站名称:理工学子游武汉姓 名:专业班级:同组成员:授课老师:时 间:2013年01月12号课程性质:必 修 选 修 -理工学子游武汉网站的分析与设计1 选题的意义及网站建设基本目标1.1 题目背景及意义1.1.1 背景 随着社会生产力的进一步发展,越来越多的人参与到旅游活动中去。喧嚣的都市,高节奏好强度的工作学习,是越来越多的人把旅游作为一种特殊的生活方式和放松形式,用以调节身心,恢复疲惫和增长阅历。 作为一名大学生,有很多自己支配的时间。旅游、到处走走是必不可少的。随着人们生活水平的不断提高,人们不仅仅对物质生活的要求越来越高,也不断的向往和实现更新鲜的精神生活。由于旅游是人们为寻求精神上的愉快感受的一种形式,因此,旅游伴随着城市历史和沉淀已经逐渐成为一大重要产品。1.1.2 意义 武汉有很多旅游景点和逛街娱乐的地方,大多数同学会选择利用双休或短假期去了解武汉,在百度上搜索景点的各种信息具有一定的盲目性,即不能得到全面的信息。所以想做个网页能给在武汉读书的同学们一些帮助。作为网页设计制作的初学者,在短时间内做出完整全面的一个旅游网站是很困难的,比如:在线搜索地点和乘车路线。后来决定在该网站中的公交这一栏,把乘车起点定在雄楚大道理工大学站。这样一来,本网站服务于在校大学生改成了服务于武汉理工大学的学生。最后标题就定为了理工学子游武汉。1.2 网站建设的基本目标方便同学们选择更合适的旅游地点。以后将不断完善该网站,服务于更多的游客,不仅仅是武汉理工的学生。建立在线公交查询,完善更多的景点,使该网站成为更多人的武汉旅游助手。并建设在线留言,在线客服等。 2 系统分析与设计2.1 网站的概况及其功能目标2.1.1 网站的作用方便同学们选择更合适的旅游地点。综合景点介绍、公交线路、建议游玩时间等方面考虑以及对比, 来选择合适的地方。比如影响其选择的因素,交通是否方便,票价问题。让他们不再需要百度各种网站去搜索想要去的地方。2.1.2 网站的使用范围本网站可供想在武汉旅游人使用。网站主要分为景点,逛街,美食娱乐三大模块,看景购物都有,可以方便游客寻找自己想要去的地方。更适合武汉理工大学的同学使用,每个景点介绍中都有公交线路,乘车方法,更方便出游。2.1.3 网站的功能结构图首页在线论坛制作论坛插入记录登录注册用户登录东湖 观光黄鹤楼光谷 省博物馆购物首页 武汉大学江汉路旅行社楚河汉街木兰天池汉正街欢乐谷饮食娱乐户部巷在线留言关于我们2.2 人机界面设计2.2.1 用户注册页面 该页面为用户注册页面。用户通过键盘输入与该网站进行交互,可以选择是否进行注册。2.2.2 提醒对话框 当用户在注册时,没有输入用户名而直接点击了提交注册,就会弹出一个对话框,提醒请输入用户名注册网页.在用户漏填或填写格式不正确时弹出提示框,提醒注册者填写正确的信息。2.2.3 导航栏该页面导航,让浏览该网站的用户可以根据自己的需要进行选择,点击观光、购物、饮食娱乐都会有不同的旅行目的地。2.2.4 超链接在浏览一个景点介绍的同时,会告诉用户该景点周围有哪些好的旅游场所。点击周边景点的图片或名称,页面会进入另一景点的介绍,方便用户更好的选择地点,制定旅行计划和了解武汉。2.3 数据库设计表userss字段名数据类型长度可否空注含意Username文本20不可关键字用户名usepPassword文本20不可密码Usersex 文本10不可性别Useremail 文本不可电子邮箱Usernote 文本25不可个人介绍 2.4 使用技术分析模块(功能名)使用技术文件名文件所在文件夹主页CSS链接外部样式、div标记、html标记主页1.htm理工学子游武汉主网主页-登陆table、form控件注册1.html理工学子游武汉主网注册页面JSP、form 各种控件注册1.html用户注册页面注册页面Vbscript、ASP对象、ADO对象注册1.html用户注册页面注册页面网页.mdb注册1.html用户注册页面观光html标记、美图秀秀观光页面.htm观光景区页面省博物馆周边景区html标记、index武汉大学.htm、index东湖.htmindex省博物馆.htm省博物馆3 心得体会3.1 体会转瞬之间,半个学期又接近尾声,在江老师的精心教学下,度过了这个富有生机,富有朝气的学期。结课后的任务要求做一个网站。虽然学了一个学期,但是我觉得我的能力还远远不够,做个网站真的很不容易。作为网页设计的初学者,我对网页设计非常感兴趣,一心想设计出一个美观、实用、内容丰富的个人网页。通过自己动手、动脑,通过网络资源,老师的指导,在不断发现问题和解决问题的过程中学到了很多知识,也增强了我的创作能力和动手能力,在网页设计过程中,从构思到设计、完善、维护,整个过程我都全身心投入,使我真正学到了网页设计的知识。网页的制作过程虽然很消耗体力和脑力,但涉猎这方面的知识确实让我很有成就感,尤其是在一张页面制作完毕时。 通过这次网站的制作,我对网站有了更深层次得到了解,也有了更浓厚的兴趣。尤其是对网站制作的过程与一些技巧手法更有了另外一番了解,对网站制作的基础知识也有了进一步的掌握。这个学期我们的网页设计课,与以前的课相比更加注重个人的创意能力和软件的运用实战能力,更加综合的考验了我,使我更加完善自我。在本次网页设计中,我不仅学到了很多关于网页设计方面的知识,也从中学会了关于网络、编程等方面的知识。运用FrontPage设计网页,在这个过程中,还通过自学教材、图书馆借阅书籍、上网查询,学会了一些简单动画、控件的制作等等。在设计过程中也出现了很多的问题,但通过看书,上网查询,不断的学习、解决、提高,设计出的网页不论是外观还是内容,都在不断的进步、改善。可以说在自己动手,不断实践的过程中,网页设计水平得到了很大的提高。我在网上自己找到一些图片和文字、特效代码,做一个简单的网站初步积累。3.2 系统展望刚着手时,很多技术上的问题就暴露出来了,我感觉制作网页是需要耐心的,如果你没有耐心,你学不好网页设计,这是我最大的感触。因为当你碰到一个问题时,如果不能立刻得到问题的答案,你可能需要长时间去解决,我就碰到过一个问题,用了很长时间才解决,这还要多亏了学长的悉心指导,同学们的无私帮助。学习网页设计需要坚持,坚持不断的学习,因为设计网页的软件在不断的更新,只有综合运用多种知识,才能设计出视听特效,动感十足,富于个性的页面,才能全面展现互联网这一新型媒体的独特魅力和多维空间的超强功能.注重实用,我认为网页设计应该注重实用性,因为它是让人浏览的,是用户可以抚摸,可以评论,可以交互的。通过这次制作网页,我学到了不少东西,而且学到了不少思考问题的方法。计算机会在以后的学习生活中充当越来越重要的角色,相信我也会学习到更多关于计算机和网络的知识。这次制作网页收获确实不小。网站建设与网页设计这门课让我初步了解了制作网页的过程,但这还是远远不够的,大二下学期还有更多相关课程等着我们去探索学习。我也会更加深入的学习相关知识,为将来作出优秀漂亮的网站打基础。4 网站主要代码4.1文件名:index黄鹤楼.htm(武汉大学、东湖、省博物馆、欢乐谷、户部巷同此文件)功能:给用户提供黄鹤楼的相关信息,如黄鹤楼简介、公交、文化历史、电子地图等。让用户更全面的了解该景点。代码:<html> <xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office"xmlns="http:/www.w3.org/TR/REC-html40><head><meta http-equiv="Content-Language" content="zh-cn"><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><link rel="File-List" href="index黄鹤楼.files/filelist.xml"><title>黄鹤楼</title><!-if !mso><!endif-><!-if gte mso 9><xml><o:shapedefaults v:ext="edit" spidmax="1027"/></xml><!endif-></head><body background="image/黄鹤楼背景.jpg" style="background-attachment: fixed"><p>湖北<span lang="en"><font face="宋体"><a href="file:/I:/网页/主页1.htm">武汉</a>黄鹤楼</font></span></p><div align="center"><table border="0" width="88%" id="table1"><tr><td width="98%" colspan="2" bgcolor="#D4D4D4"><!-if gte vml 1><v:shapetype id="_x0000_t136" coordsize="21600,21600" o:spt="136" adj="10800" path="m7,l8,m5,21600l6,21600e"> <v:formulas> <v:f eqn="sum #0 0 10800"/> <v:f eqn="prod #0 2 1"/> <v:f eqn="sum 21600 0 1"/> <v:f eqn="sum 0 0 2"/> <v:f eqn="sum 21600 0 3"/> <v:f eqn="if 0 3 0"/> <v:f eqn="if 0 21600 1"/> <v:f eqn="if 0 0 2"/> <v:f eqn="if 0 4 21600"/> <v:f eqn="mid 5 6"/> <v:f eqn="mid 8 5"/> <v:f eqn="mid 7 8"/> <v:f eqn="mid 6 7"/> <v:f eqn="sum 6 0 5"/> </v:formulas> <v:path textpathok="t" o:connecttype="custom" o:connectlocs="9,0;10,10800;11,21600;12,10800" o:connectangles="270,180,90,0"/> <v:textpath on="t" fitshape="t"/> <v:handles> <v:h position="#0,bottomRight" xrange="6629,14971"/> </v:handles> <o:lock v:ext="edit" text="t" shapetype="t"/></v:shapetype><v:shape id="_x0000_s1025" type="#_x0000_t136" alt="黄鹤楼" style='width:121.5pt; height:39.75pt' fillcolor="#f60" strokecolor="#f60"> <v:shadow color="#868686"/> <v:textpath style='font-family:"宋体"font-size:40pt;font-weight:bold; v-text-kern:t' trim="t" fitpath="t" string="黄鹤楼"/></v:shape><!endif-><!if !vml><img border=0 width=166 height=57 src="index黄鹤楼1.files/image001.gif" alt=黄鹤楼 v:shapes="_x0000_s1025"><!endif><img border="0" src="image/推荐指数五颗星.png" width="103" height="29"><p><b><font size="5">(Yellow Crane Tower)</font></b><p><span lang="en"><font size="4" face="宋体">•</font></span><font size="5" face="隶书">她处在山川灵气动荡吐钠的交点,正好映和中华民族喜好登高的民风民俗、亲近自然的空间意识、崇尚宇宙的哲学观念。</font><p><MARQUEE scrollAmount=4 scrollDelay=20 direction=left width=700 height=250> <IMG src=image/4120493_232444036870_2黄鹤楼1.jpg width=700 height=250> <IMG src=image/2545424_231002311000_2黄鹤楼2.jpg width=700 height=250> <IMG src=image/7954789_093215126767_2黄鹤楼3.jpg width=700 height=250> <IMG src=image/8935864_112734192120_2黄鹤楼4.jpg width=700 height=250> <DIV></DIV></MARQUEE></td></tr><tr><td width="64%" bgcolor="#FFDBAA" rowspan="2"><span lang="en"><b><font face="宋体" size="4"><span style="background-color: #DFFFFC">黄鹤楼简介</span></font></b></span><p style="line-height: 150%"> 黄鹤楼位于湖北省武汉市。江南四大名楼之一,国家旅游胜地四十佳。素有“天下江山第一楼”之美誉。冲决巴山群峰,接纳潇湘云水,浩荡长江在三楚腹地与其最长支流汉水交汇,造就了武汉隔两江而三镇互峙的伟姿。这里地处江汉平原东缘,鄂东南丘陵余脉起伏于平野湖沼之间,龟蛇两山相夹,江上舟辑如织黄鹤楼天造地设于斯。</p><p style="line-height: 150%"> 巍峨耸立于武昌蛇山的黄鹤楼,享有“天下绝景”之称,与湖南岳阳楼,江西滕王阁并称为“江南三大名楼”。唐代诗人崔颢一首“昔人已乘黄鹤去,此地空余黄鹤楼。黄鹤一去不复返,白云千载空悠悠,晴川历历汉阳树,芳草萋萋鹦鹉洲。日暮乡关何处是,烟波江上使人愁。”已成为千古绝唱,更使黄鹤楼名声大噪。而李白的与史郎中钦听黄鹤楼上吹笛“一为迁客去长沙,西望长安不见家。黄鹤楼中吹玉笛,江城五月落梅花”更是为武汉“江城”的美誉奠定了基础。</p><p style="line-height: 150%"> 黄鹤楼的形制自创建以来,各朝皆不相同,但都显得高古雄浑,极富个性。与岳阳楼、滕王阁相比,黄鹤楼的平面设计为四边套八边形,谓之“四面八方”。这些数字透露出古建筑文化中数目的象征和伦理表意功能。从楼的纵向看各层排檐与楼名直接有关,形如黄鹤,展翅欲飞。整座楼的雄浑之中又不失精巧,富于变化的韵味和美感。<p><p><b><span lang="en"><font face="宋体" size="4"><span style="background-color: #DFFFFC"> 公交</span></font></span></b></p><p style="line-height: 150%">1.在雄楚大道理工大学站坐车,556路/590路/503路/905路,到武珞路阅马场下车,步行506米到达</p><p style="line-height: 150%">2.在雄楚大道理工大学站坐车,571路,到彭刘杨路下车,步行240米到达</p><p style="line-height: 150%">3.在雄楚大道理工大学站坐车,529路,到民主路胭脂路下车,步行497米到达</p><p></td><td width="33%" bgcolor="#B4FEB4"><b>景点级别</b>:AAAAA<p><b>门票:</b>成人票 80元 学生票 40元</p><b>开放时间</b>:夏时令:7:0018:30 冬时令:7:3017:30<p><b>建议游玩时间:</b>半天</p><b>地址:</b>武汉市武昌区蛇山西坡特一号<p><b>电话:</b>027-88871394</p><b>最佳游玩时节:</b>春秋两季适宜游览<p></td></tr><tr><td width="33%" bgcolor="#B4FEB4"><b>电子地图</b><p><img border="0" src="image/黄鹤楼地址.png" width="350" height="352"></td></tr><tr><td width="98%" colspan="2" bgcolor="#FFDBAA"><p style="line-height: 150%"><b><span lang="en"><font face="宋体" size="4"><span style="background-color: #FFFFFF">»文化历史</span></font></span></b></p><p style="line-height: 150%"><font face="宋体" size="4"><span lang="en" style="background-color: #FFDBAA"> 黄鹤楼始建于三国时期吴黄武二年(公元223年),传说是为了军事目的而建,孙权为实现“以武治国而昌”(“武昌”的名称由来于此),在形势险要的夏口城即今天的武昌城西南面朝长江处,修筑了历史上最早的黄鹤楼。黄鹤楼在群雄纷争,战火连绵的三国时期,只是夏口城一角瞭望守戍的“军事楼”,晋灭东吴以后,三国归于一统,该楼在失去其军事价值的同时,随着江夏城地发展,逐步演变成为官商行旅“游必于是”、“宴必于是”的观赏楼。至唐朝,其军事性质逐渐演变为著名的名胜景点,历代文人墨客到此游览,留下不少脍炙人口的诗篇。 至唐永泰元年(公元765年)黄鹤楼已具规模,使不少江夏名士“游必于是,宴必于是”。然而兵火频繁,黄鹤楼屡建屡废。最后一座“清楼”建于同治七年(公元1868年),毁于光绪十年(公元1884年),此后近百年未曾重修。 1957年建武汉长江大桥武昌引桥时,占用了黄鹤楼旧址,如今重建的黄鹤楼在距旧址约1千米左右的蛇山峰岭上。1981年10月,黄鹤楼重修工程破土开工,1985年6月落成,主楼以清同治楼为蓝本,但更高大雄伟。运用现代建筑技术施工,钢筋混凝土框架仿木结构。飞檐5层,攒尖楼顶,金色琉璃瓦屋面,通高51.4米,底层边宽30米,顶层边宽18米,全楼各层布置有大型壁画、楹联、文物等。楼外铸铜黄鹤造型、胜像宝塔、牌坊、轩廊、亭阁等一批辅助建筑,将主楼烘托得更加壮丽。登楼远眺,“极目楚天舒”,不尽长江滚滚来,三镇风光尽收眼底,雄伟壮观。</span></font></td></tr></table></div><div id="wrapper"><div id="atitle"><p align="center"> 鄂公网安备110105001 鄂ICP证111033号 客服热线:4000-123-888 <p align="center"> Copyright©All Rights Reserved.北4-111科技公司</div></body></html>4.2文件名:index木兰天池.htm功能:给用户提供木兰天池的相关信息,如木兰天池简介、乘车方式、文化历史、电子地图等。让用户更全面的了解该景点,并提供相关的旅行社地址及电话。代码:<html> <xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns="http:/www.w3.org/TR/REC-html40"><head><META http-equiv="Content-Type" content="textml; charset=gb2312"><TITLE>木兰天池</TITLE><STYLE type="text/css">a/*设置无下划线、文字背景超连接样式*/color:#ffffff;font-size:13px;text-decoration:none;background-color:#ff0000;width:20px;</STYLE><SCRIPT language="JavaScript"> var NowFrame = 1; var MaxFrame = 4; function show(d1) if(Number(d1) clearTimeout(theTimer); /当触动按扭时,清除计时器 NowFrame=d1; /设当前显示图片for(var i=1;i<(MaxFrame+1);i+)if(i=NowFrame)document.getElementById('div'+NowFrame).style.display ='' /当前图片示elsedocument.getElementById('div'+i).style.display ='none' /隐藏其他图片层 if(NowFrame = MaxFrame) /设置下一个显示的图片NowFrame = 1; elseNowFrame+; theTimer=setTimeout('show()', 3000); /设置定时器,显示下一张图片</SCRIPT></HEAD><meta http-equiv="Content-Language" content="zh-cn"><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><link rel="File-List" href="index木兰天池.files/filelist.xml"><title>湖北</title><!-if !mso><style></style><!endif-></head><!-if !mso><style></style><!endif-><!-if gte mso 9><xml><o:shapedefaults v:ext="edit" spidmax="1027"/></xml><!endif-><body background="image/木兰背景.jpg" style="background-attachment: fixed"><p>湖北<span lang="en"><font face="宋体"></font></span><a href="file:/I:/网页/主页1.htm"><font size="4">武 汉</font></a><span lang="en"><font face="宋体"></font></span>木兰天池</p><div align="center"><table border="0" width="86%" id="table1"><tr><td width="99%" colspan="2" bgcolor="#F5F5F5"><!-if gte vml 1><v:shapetype id="_x0000_t136" coordsize="21600,21600" o:spt="136" adj="10800" path="m7,l8,m5,21600l6,21600e"> <v:formulas> <v:f eqn="sum #0 0 10800"/> <v:f eqn="prod #0 2 1"/> <v:f eqn="sum 21600 0 1"/> <v:f eqn="sum 0 0 2"/> <v:f eqn="sum 21600 0 3"/> <v:f eqn="if 0 3 0"/> <v:f eqn="if 0 21600 1"/> <v:f eqn="if 0 0 2"/> <v:f eqn="if 0 4 21600"/> <v:f eqn="mid 5 6"/> <v:f eqn="mid 8 5"/> <v:f eqn="mid 7 8"/> <v:f eqn="mid 6 7"/> <v:f eqn="sum 6 0 5"/> </v:formulas> <v:path textpathok="t" o:connecttype="custom" o:connectlocs="9,0;10,10800;11,21600;12,10800" o:connectangles="270,180,90,0"/> <v:textpath on="t" fitshape="t"/> <v:handles> <v:h position="#0,bottomRight" xrange="6629,14971"/> </v:handles> <o:lock v:ext="edit" text="t" shapetype="t"/></v:shapetype><v:shape id="_x0000_s1036" type="#_x0000_t136" alt="木兰天池" style='width:162pt;height:39.75pt' fillcolor="#f9c" strokecolor="#f9c"> <v:shadow color="#868686"/> <v:textpath style='font-family:"宋体"font-size:40pt;font-weight:bold; v-text-kern:t' trim="t" fitpath="t" string="木兰天池"/></v:shape><!endif-><!if !vml><img border=0 width=219 height=57src="index木兰天池34.files/image001.gif" alt=木兰天池 v:shapes="_x0000_s1036"><!endif><img border="0" src="image/推荐指数五颗星.png" width="103" height="29"><p><span lang="en"><font size="5" face="隶书">•</font></span><span class="view-head-scene-abstract"><font size="5" face="隶书">十步一景,百步一绝。这是“湖北的九寨沟”、“武汉的庐山”木兰天池。</font></span></td></tr><tr><td height="296" colspan="2" bgcolor="#F5F5F5"><b><font face="宋体" size="4"><span style="background-color: #99FFCC" lang="en-us"><BODY onLoad="show();" style="background-attachment: fixed"><DIV style="position:absolute;left:187px;top:157px;width:861px; height:750px"><IMG src=image/木兰1.jpg style="display:none;" id="div1" border="0" width="850" height="300"><IMG src=image/木兰2.jpg style="display:none;" id="div2" border="0" width="850" height="300"><IMG src=image/木兰3.jpg style="display:none;" id="div3"border="0" width="850" height="300"><IMG src=image/木兰5.jpg style="display:none;"id="div4" border="0" width="850" height="300"></DIV><DIV style="position:absolute;left:913px;top:434px;height:23px" align="center"><A href="javascript:show(1)">1</A><A href="javascript:show(2)">2</A><A href="javascript:show(3)">3</A><A href="javascript:show(4)">4</A></DIV></BODY><br></span></font></b></td></tr><tr><td width="72%" bgcolor="#FFFFE1" height="556"><p></p><p><span lang="en"><font face="宋体" size="4"><b><span style="background-color: #99FFCC">»木兰天池简介</span></b></font></span></p><p style="line-height: 150%"> <span style="background-color: #FFFFFF"></span><font face="宋体"><span lang="en-us" style="background-color: #FFFFE1">木兰天池是国家4A级景区,也是国家森林公园。景区面积13平方公里,主要由“浪漫山水”、“高峡人家”和“森林公园”三大主题景园链接成一个南北走向,长达十余公里的森林山水大峡谷。<br><br>浪漫山水景园,景区内以观赏飞瀑、溪潭、怪石等景观为主,可谓十步一景、百步一绝。特别是高山环抱的天池水如明镜,清澈见底。游船踏浪,驶过青山白云倒映的池水,仿佛来到人间仙境。<br><br>高峡人家景园,主要由朱家山寨、草原人家、动感河湾以及木兰外婆家组成。在这里,游人既可以欣赏到原汁原味的高峡人家风情,又可品味到浓浓的木兰文化。<br><br>森林公园景园,总面积25000亩,森林覆盖率达98%,各种珍贵的动植物达1000多种。这里也是三峡濒危植物保护培育基地,有十几种国家一、二级保护植物在此落户。丰富的森林资源和良好的生态环境,是游客进行森林沐浴的最佳去处。<br><br>沿路穿插其中集惊险、刺激、娱乐于一体的参与性游戏项目让游人尽情徜徉在大自然怀抱的同时,也放飞了心情。</span></font><b><font face="宋体" size="4"><span lang="en-us" style="background-color: #FFFFE1"><br></span></font></b><td width="27%" height="556