中国古典园林专题网站制作说明

中国古典园林专题网站制作说明《中国古典园林》专题网站制作说明班级：10级教育技术学1班作者：赵晓晶一、网站设计目的中国古典园林是中国古代建筑史上最辉煌的部分，是中国古代文化史和艺术史上的瑰宝。可是，目前国内专门介绍古代园林建筑的网站非常少，人们对古代园林的建筑特色及文化也知之甚少。针对这一现状，本人设计并制作了“中国古典园林”专题网站，旨在为古园林爱好者提供了解和观赏的平台，进一步宣传中国古代园林建筑。二、设计流程查找文字资料，系统梳理资料根据文字资料，规划网站结构分析网站所需素材、所需技术支持收集素材逐步制作网站征求使用者意见调试改进三、使用的软件及语言网页制作软件:MacromediaDreamweaver8素材制作软件：FLASH8、Photoshop网站编辑语言：HTML语言、JAVASCRIPT语言、CSS+div数据库：MicrosoftAccess2007四、网站设计说明本网站主要从园林历史、园林分类、园林特色、园林构景、园林构成等方面介绍中国古代园林。每一部分采用文字和图片相结合的方式，希望使内容清晰生动，一目了然。另外，也提供一些古建筑方面的研究成果，供有兴趣的园友阅读；视频纪录片可以更丰富网站的内容。为了与素材图片相协调，本网站采用了冷色调。五、网页结构布局中国古典园林园林构成园林特色园林分类园林历园林构成园林特色园林分类园林历史名园韵事网站首页中西园艺中西园艺园林构景名园荟萃名园荟萃名园荟萃特色展示园林文化造园特色园林记录阶段展示发展精深起始时期园林特色园林历史私家园林皇家园林构成要素要素展示构景方法南北园艺名园风采名园荟萃主菜单名园荟萃名园荟萃特色展示园林文化造园特色园林记录阶段展示发展精深起始时期园林特色园林历史私家园林皇家园林构成要素要素展示构景方法南北园艺名园风采名园荟萃主菜单

六、具体界面及代码（一）首页面菜单区域代码：<divclass="menu"><aclass="nav0"href="default.asp"onmouseover="javascript:qiehuan(0)"id="mynav0">网站首页</a><aclass="now1"href="about.asp"onmouseover="javascript:qiehuan(1)"id="mynav1">园林历史</a><aclass="nav2"href="team.asp"onmouseover="javascript:qiehuan(2)"id="mynav2">园林分类</a><aclass="nav3"href="work.asp"onmouseover="javascript:qiehuan(3)"id="mynav3">园林特色</a><aclass="nav4"href="news.asp"onmouseover="javascript:qiehuan(4)"id="mynav4">名园荟萃</a><aclass="nav5"href="product.asp"onmouseover="javascript:qiehuan(5)"id="mynav5">园林构成</a><aclass="nav6"href="default.aspx"onmouseover="javascript:qiehuan(6)"id="mynav6"target="_blank">园林构景</a><aclass="nav7"href="qushi.asp"onmouseover="javascript:qiehuan(7)"id="mynav7">名园韵事</a><aclass="nav8"href="job.asp"onmouseover="javascript:qiehuan(8)"id="mynav8">中西园艺</a><aclass="nav9"href="contact.asp"onmouseover="javascript:qiehuan(9)"id="mynav9">关于我们</a></div>flash区域代码：<objectclassid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"id=scriptmainname=scriptmaincodebase="/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0"width="960"height="350"><paramname="movie"value="321.swf?bcastr_xml_url=xml/bcastr.xml"><paramname="quality"value="high"><paramname=scalevalue=noscale><paramname="loop"value="false"><paramname="menu"value="false"><paramname="wmode"value="transparent"><embedsrc="bcastr.swf?bcastr_xml_url=xml/bcastr.xml"width="960"height="350"loop="false"quality="high"pluginspage="/go/getflashplayer"type="application/x-shockwave-flash"salign="t"name="scriptmain"menu="false"wmode="transparent"></embed></object>（二）园林历史起始时期发展精深名园展示园林记录名园展示区域代码：<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><title>园林展示-{{c_name}}-{{c_keywords}}</title><metaname="keywords"content="{{c_keywords}}"><metaname="description"content="{{c_description}}"/><metaname="author"content="timmy747"/><linkhref="images/style.css"rel="stylesheet"type="text/css"/></head><scriptlanguage="javascript"> functionqiehuan(num){ for(varid=0;id<=9;id++) { if(id==num) { document.getElementById("s_"+id).style.display="block"; } Else { document.getElementById("s_"+id).style.display="none }</script>视频播放代码：<objectid="player"classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"name="player"width="400"height="320"> <paramname="movie"value="swf/123.swf"/><paramname="wmode"value="transparent"/> <paramname="allowfullscreen"value="true"/> <paramname="allowscriptaccess"value="always"/> <paramname="flashvars"value="file=../video.flv&image=../video.jpg"/> <embed src="swf/123.swf" width="400" height="320" type="application/x-shockwave-flash" id="player2" name="player" allowscriptaccess="always" allowfullscreen="true" flashvars="file=../video.flv&image=../defaultvideo.jpg"wmode="transparent" /> </object>（三）分类页面皇家园林私家园林图片区域代码：varMyMar;varspeed=1;//速度，越大越慢varspec=1;//每次滚动的间距,越大滚动越快varipath='images/';//图片路径varthumbs=document.getElementsByClassName('thumb_img');for(vari=0;i<thumbs.length;i++){thumbs[i].onmouseover=function(){$('main_img').src=this.rel;$('main_img').link=this.link;};thumbs[i].onclick=function(){location=this.link}}$('main_img').onclick=function(){location=this.link;}$('gotop').onmouseover=function(){this.src=ipath+'gotop2.gif';MyMar=setInterval(gotop,speed);}$('gotop').onmouseout=function(){this.src=ipath+'gotop.gif';clearInterval(MyMar);}$('gobottom').onmouseover=function(){this.src=ipath+'gobottom2.gif';MyMar=setInterval(gobottom,speed);}$('gobottom').onmouseout=function(){this.src=ipath+'gobottom.gif';clearInterval(MyMar);}functiongotop(){$('showArea').scrollTop-=spec;}functiongobottom(){$('showArea').scrollTop+=spec;}</script>（四）造园特色页面造园特色相关研究数据库调用代码：（本部分内容基本通过调用实现）ifrequest.QueryString<>""thenChk_badword=split(Query_Badword,"∥")FOREACHQuery_NameINRequest.QueryStringforf_i=0toubound(Chk_badword)IfInstr(LCase(request.QueryString(Query_Name)),Chk_badword(f_i))<>0ThenSelectCaseErr_MessageCase"1"Response.Write"<ScriptLanguage=JavaScript>alert('传参错误！参数"&f_name&"的值中包含非法字符串！\n\n请不要在参数中出现：andupdatedelete;insertmidmaster等非法字符！');window.close();</Script>"Case"2"Response.Write"<ScriptLanguage=JavaScript>location.href='"&Err_Web&"'</Script>"Case"3"Response.Write"<ScriptLanguage=JavaScript>alert('传参错误！参数"&f_name&"的值中包含非法字符串！\n\n请不要在参数中出现：andupdatedelete;insertmidmaster等非法字符！');location.href='"&Err_Web&"';</Script>"EndSelectResponse.EndEndIfNEXTNEXTEndif%>数据库连接代码：<!--#includefile="sql.asp"--><!--#includefile="function.asp"--><!--#includefile="template.asp"--><%dimconnstr,datapath,conndatapath="database/db.mdb"connstr="provider=microsoft.jet.oledb.4.0;datasource="&server.mappath(datapath)setconn=server.createobject("adodb.connection")conn.openconnstr%>（五）名园荟萃页面本部分通过数据库调用语句实现。其中涉及的加载文字和图片的代码如下：<divstyle="line-height:150%"><b><spanstyle="font-size:9pt;line-height:150%"><p><strong>拙政园</strong></p></span></b></div><p>……

</p><p>……

</p><pstyle="text-align:center"><imgheight="300"width="400"alt=""src="/uploadfiles/wanshoushan.jpg"/></p><pstyle="text-align:center"><strong>万寿山</strong></p><pstyle="text-align:center">……</p>定义函数的代码：<%functionnohtml(str) ifstr<>""then str=Replace(str,"<","<") str=Replace(str,">",">") nohtml=str else nohtml=str endifendfunction%>（六）园林构成页面构成要素要素展示相关代码：（从文件夹加载图片及定义超链接）ifrs.eofthenResponse.Write("<script>alert('参数错误！');document.location.href('default.asp');</script>")Response.End()endifrs("hit")=rs("hit")+1rs.updateproductname=rs("name")producttime=rs("addtime")producthit=rs("hit")tid=rs("tid")productinfo=rs("info")productimg="<imgsrc='./UpLoadfiles/upLoadImages/"&rs("img")&"'/>"rs.closesetrs=nothingsql="selecttop8*fromzm_productorderbyordasc,iddesc"productlist="<ul>"Setrs=conn.execute(sql)dowhilenotrs.eof productlist=productlist&"<li>"&vbcrlf&"<ahref='product_view.asp?id="&rs("id")&"'><imgsrc='./UpLoadfiles/upLoadImages/"&rs("img")&"'/></a></li>"&vbcrlfrs.MoveNextloopproductlist=productlist&"</ul>"rs.CloseSetrs=Nothing（七）园林构景页面园林构景南北园艺本部分代码基本与第四部分和第五部分相同。（八）名园韵事页面名园韵事（一）名园韵事（二）本部分代码基本与第四部分和第五部分相同。（九）中西园艺页面中西园艺本部分代码基本与第四部分和第五部分相同。（十）关于我们页面留言板留言板代码：functiongetip()'获得客户端IP getip=Request.ServerVariables("REMOTE_ADDR")endfunction'==处理留言ifRequest.QueryString("action")=1then IfTrim(Request.Form("code"))=EmptyOrTrim(Session("dfcms_code"))<>ucase(Trim(Request.Form("code")))Then Response.write("<scriptlanguage='javascript'>alert('验证码错误!');history.back();</script>") Response.end() Endif ifTrim(Request.Form("name"))=""orTrim(Request.Form("info"))=""then Response.write"<scriptlanguage='javascript'>alert('信息填写不完整：\n姓名、留言内容必须填写！');history.go(-1);</script>" Response.End() endif sql="select*fromzm_message" setrs=server.CreateObject("ADODB.Recordset") rs.opensql,conn,1,3 rs.addnew rs("name")=nohtml(Trim(Request.Form("name"))) rs("tel")=nohtml(Trim(Request.Form("tel"))) rs("mail")=nohtml(Trim(Request.Form("mail"))) rs("info")=nohtml(Trim(Request.Form("info"))) rs("ip")=getip() rs("addtime")=now() rs("audit")=0 rs.update rs.close setrs=nothing Response.Write"<scriptlanguage='javascript'>alert('留言发表成功,请等待管理员审核!');document.location.href('contact.asp');</script>" Response.End()endif'==读取留言列表sql="select*fromZm_Messagewhereaudit=1orderbyiddesc"messagelist=""setrs=server.CreateObject("ADODB.RECORDSET")rs.opensql,conn,1,1ifnotrs.eofthenpages=3'定义每页显示的记录数rs.pageSize=pages'定义每页显示的记录数allPages=rs.pageCount'计算一共能分多少页page=Request.QueryString("page")'通过浏览器传递的页数'if语句属于基本的排错处理ifisEmpty(page)orCint(page)<1thenpage=1elseifCint(page)>allPagesthenpage=allPagesendifrs.AbsolutePage=pagedowhilenotrs.eofandpages>0ifrs("re_info")="无回复"then messagelist=messagelist&"<divclass=""gbtop""><ul><li>姓名："&rs("name")&"</li> <li>时间："&rs("addtime")&"</li></ul></div>"&"<divclass=""gbinfo"">"&rs("info")&"</div>"&"<divclass=""gbc""></div>" else messagelist=messagelist&"<divclass=""gbtop""><ul><li>姓名："&rs("name")&"</li> <li>时间："&rs("addtime")&"</li></ul></div>"&"<divclass=""gbinfo"">"&rs("info")&"</div>"&"<divclass=""gbhf"">管理员回复："&rs("re_info")&"</div>"&"<divclass=""gbc""></div>"endif pages=pages-1rs.MoveNextloopendifrs.CloseSetrs=Nothing（十一）其他公用代码：调用其他asp文件语句：<!--#includefile="include/conn.asp"--><!--#includefile="include/vars.asp"--><!--#includefile="include/asptemplate.asp"--><!--#includefile="zm_default.asp"--><%风格设计代码：body{margin:0px;padding:0px;background:url(../images/bg2.png)repeat-x#000;}table,form,h1,h2,h3,ul,li,ol,dl,dd,dt,span,a,em,p{padding:0px;margin:0px;}.clearB{clear:both;font-size:0px;line-height:0px;height:0px;}/*ClearFix*/.clearfix:after{ content:"."; display:block; height:0; clear:both; visibility:hidden;}.clearfix{display:inline-block;}/*HidefromIEMac\*/.clearfix{display:block;}/*EndhidefromIEMac*//*endofclearfix*//*-main-*/ul,li{list-style:none;}a{text-decoration:none;}a:hover{text-decoration:underline;}.center{text-align:center;}img{border:none;}.main{width:960px;margin:0auto;background:#FFFurl(main_bg2.gif)repeat-yright;}code.asp中关于禁止缓存等