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

中国古典园林专题网站制作说明班级：10级教育技术学1班 作者：赵晓晶一、网站设计目的中国古典园林是中国古代建筑史上最辉煌的部分，是中国古代文化史和艺术史上的瑰宝。可是，目前国内专门介绍古代园林建筑的网站非常少，人们对古代园林的建筑特色及文化也知之甚少。针对这一现状，本人设计并制作了“中国古典园林”专题网站，旨在为古园林爱好者提供了解和观赏的平台，进一步宣传中国古代园林建筑。二、设计流程查找文字资料，系统梳理资料 根据文字资料，规划网站结构 分析网站所需素材、所需技术支持 收集素材 逐步制作网站 征求使用者意见 调试改进三、使用的软件及语言网页制作软件:macromedia dreamweaver 8素材制作软件：flash 8 、photoshop 网站编辑语言： html语言、javascript语言、css+div数据库：microsoft access 2007四、网站设计说明本网站主要从园林历史、园林分类、园林特色、园林构景、园林构成等方面介绍中国古代园林。每一部分采用文字和图片相结合的方式，希望使内容清晰生动，一目了然。另外，也提供一些古建筑方面的研究成果，供有兴趣的园友阅读；视频纪录片可以更丰富网站的内容。为了与素材图片相协调，本网站采用了冷色调。五、网页结构布局中国古典园林 园林构成园林特色园林分类园林历史名园韵事网站首页中西园艺园林构景名园荟萃 名园荟萃名园荟萃特色展示园林文化造园特色园林记录阶段展示发展精深起始时期园林特色园林历史私家园林皇家园林构成要素要素展示构景方法南北园艺名园风采名园荟萃主菜单 六、具体界面及代码（一）首页面菜单区域代码：网站首页园林历史园林分类园林特色名园荟萃园林构成园林构景名园韵事中西园艺关于我们flash区域代码： （二）园林历史 起始时期 发展精深 名园展示 园林记录名园展示区域代码：园林展示 - c_name - c_keywords function qiehuan(num)for(var id = 0;id=9;id+)if(id=num)document.getelementbyid(s_+id).style.display=block;elsedocument.getelementbyid(s_+id).style.display=none视频播放代码： （三）分类页面 皇家园林 私家园林图片区域代码：var mymar;var speed = 1; /速度，越大越慢var spec = 1; /每次滚动的间距, 越大滚动越快var ipath = images/; /图片路径var thumbs = document.getelementsbyclassname(thumb_img);for (var i=0; ithumbs.length; i+) thumbsi.onmouseover = function () $(main_img).src=this.rel; $(main_img).link=this.link; thumbsi.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);function gotop() $(showarea).scrolltop-=spec;function gobottom() $(showarea).scrolltop+=spec;（四）造园特色页面 造园特色 相关研究数据库调用代码：（本部分内容基本通过调用实现）if request.querystring thenchk_badword=split(query_badword,)for each query_name in request.querystringfor f_i=0 to ubound(chk_badword)if instr(lcase(request.querystring(query_name),chk_badword(f_i)0 thenselect case err_message case 1response.write alert(传参错误！参数 &f_name& 的值中包含非法字符串！nn请不要在参数中出现：and update delete ; insert mid master 等非法字符！);window.close(); case 2response.write location.href=&err_web& case 3response.write alert(传参错误！参数 &f_name&的值中包含非法字符串！nn请不要在参数中出现：and update delete ; insert mid master 等非法字符！);location.href=&err_web&;end selectresponse.endend ifnextnextend if%数据库连接代码：（五）名园荟萃页面本部分通过数据库调用语句实现。其中涉及的加载文字和图片的代码如下： 拙政园 万寿山定义函数的代码：%function nohtml(str)if str thenstr=replace(str,>)nohtml=strelsenohtml=strend ifend function%（六）园林构成页面 构成要素 要素展示相关代码：（从文件夹加载图片及定义超链接）if rs.eof thenresponse.write(alert(参数错误！);document.location.href(default.asp);)response.end()end ifrs(hit)=rs(hit)+1rs.updateproductname=rs(name)producttime=rs(addtime)producthit=rs(hit)tid=rs(tid)productinfo=rs(info)productimg=rs.closeset rs=nothingsql=select top 8 * from zm_product order by ord asc,id descproductlist=set rs=conn.execute(sql)do while not rs.eofproductlist=productlist& vbcrlf & vbcrlfrs.movenextloopproductlist=productlist&rs.closeset rs=nothing（七）园林构景页面 园林构景 南北园艺本部分代码基本与第四部分和第五部分相同。（八）名园韵事页面 名园韵事（一） 名园韵事（二）本部分代码基本与第四部分和第五部分相同。（九）中西园艺页面 中西园艺本部分代码基本与第四部分和第五部分相同。（十）关于我们页面留言板留言板代码：function getip() 获得客户端ipgetip=request.servervariables(remote_addr) end function=处理留言if request.querystring(action)=1 thenif trim(request.form(code)=empty or trim(session(dfcms_code)ucase(trim(request.form(code) thenresponse.write(alert(验证码错误!);history.back();)response.end()end ifif trim(request.form(name)= or trim(request.form(info)= thenresponse.write alert(信息填写不完整：n姓名、留言内容必须填写！);history.go(-1);response.end()end ifsql=select * from zm_messageset rs=server.createobject(adodb.recordset)rs.open sql,conn,1,3rs.addnewrs(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)=0rs.updaters.closeset rs=nothing response.write alert(留言发表成功,请等待管理员审核!);document.location.href(contact.asp);response.end()end if=读取留言列表sql=select * from zm_message where audit=1 order by id descmessagelist=set rs=server.createobject(adodb.recordset)rs.open sql,conn,1,1if not rs.eof thenpages = 3 定义每页显示的记录数rs.pagesize = pages 定义每页显示的记录数allpages = rs.pagecount计算一共能分多少页page = request.querystring(page)通过浏览器传递的页数if语句属于基本的排错处理if isempty(page) or cint(page) allpages thenpage = allpages end ifrs.absolutepage = pagedo while not rs.eof and pages 0if rs(re_info)=无回复 thenmessagelist=messagelist&姓名：&rs(name)&  时间：&rs(addtime)& & &rs(info)& elsemessagelist=messagelist&姓名：&rs(name)&  时间：&rs(addtime)& & &rs(info)&管理员回复：&rs(re_info)& & end ifpages = pages - 1rs.movenextloopend ifrs.closeset rs=nothing（十一） 其他公用代码：调用其他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;/* clear fix */ .clearfix:after content:.; display:block; height:0; clear:both; visibility:hidden; .clearfix display:inline-block; /* hide from ie mac */ .clearfix display:block; /* end hide from ie mac */ /* end of clearfix */ /*-main-*/ul,lilist-style: none;a text-decoration:none;a:hover text-decoration:underline;.center text-align:center;imgborder:none;.main width:960px; margin:0 auto; background:#fff url(main_bg2.gif) repeat-y right;code.asp中关于禁止缓存等代码：call com_creatvalidcode(dfcms_code)sub com_creatvalidcode(psn) 禁止缓存response.expires = -9999 response.addheader pragma,no-cacheresponse.addheader cache-ctrol,no-cacheresponse.contenttype = image/bmprandomizedim i, ii, iiiconst codds = 0 杂点出现的机率const camount = 36 文字数量const ccode = 0123456789abcdefghijklmnopqrstuvwxyzasptemplate.asp中部分定义代码：public property get parseblockvars(intext)dim matches, match, asubmatchp_regexp.ignorecase = truep_regexp.global =