2022年Web网页设计设计报告 .pdf

《2022年Web网页设计设计报告 .pdf》由会员分享，可在线阅读，更多相关《2022年Web网页设计设计报告 .pdf（25页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、共25 页第1 页Web 网页设计课程设计题目: 班级: 姓名: 指导教师 : 2011年 12 月 22 日课程设计任务书名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 1 页，共 25 页 - - - - - - - - - 共25 页第2 页一、 设计任务及要求：采用 Dreamweaver+ASP+Access 综合进行课程设计，开发一个动态的网站系统，要求能够根据设计题目的要求，划分功能模块，根据功能模块的划分，进行相应的数据库设计，画出程序流程图，列出组成网页的文件清单；

2、完成程序代码，对各模块进行整合，并进行调试，编写课程设计报告。1、设计任务要求（1）进一步巩固和加深“Web 网页设计”课程的基本知识，了解ASP 动态网页设计知识在实际中的应用。(2) 综合运用 “ASP 动态网页设计” 课程和先修课程的理论及生产实际知识去分析和解决问题，进行的相关训练。(3) 学习 ASP 动态网页设计的一般方法，了解和掌握通用数据库的连接、数据的相关操作或网站的设计过程和进行方式，培养正确的设计思想和分析问题、解决问题的能力，特别是网站功能规划的能力和实现相关功能的能力。(4) 通过能系统的分析、系统设计、数据库设计和功能的实现等，培养ASP 动态网页设计的基本技能2、

3、设计内容要求1） 、站点主题自拟、站点风格自行设计、布局简洁美观，站点内容健康详实，站点图片与网页内容贴近主题。2） 、所有页面必须有头部导航栏和尾部版权信息。3） 、文档结构清晰，不得出现中文的文件夹名字以及中文的网页名字。4） 、所有网页必须给标题命名。5） 、整个站点必须有良好的导航系统。6） 、考虑页面与屏幕的分辨率问题。3、设计报告要求1） 、设计报告要有封面、有页码；2） 、设计报告必须在2011 年 12 月 23 日提交；3） 、设计报告必须交打印文档。指导教师签名年月日二、指导教师评语：指导教师签名年月日三、成绩评定指导教师签名年月日一、课题名称：二、设计时间：名师资料总结

4、- - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 2 页，共 25 页 - - - - - - - - - 共25 页第3 页2011年 12 月 12 日 2011年 12 月 23日时间安排：12月 12日 12 月 22 日设计、编码12月 23日：书写设计报告、提交三、设计环境硬件：多媒体机房软件：Dreamweaver8.0 +AspWebServer +Access2003+Flash+PS 四、设计目的：1、进一步巩固和加深“ Web 网页设计”课程的基本知识，了解ASP 动态网页设计

5、知识在实际中的应用。2、综合运用“ Web网页设计”课程和先修课程的理论及生产实际知识去分析和解决问题，进行的相关训练。3、学习 ASP 动态网页设计的一般方法，了解和掌握通用数据库的连接、数据的相关操作或网站的设计过程和进行方式，培养正确的设计思想和分析问题、解决问题的能力，特别是网站功能规划的能力和实现相关功能的能力。1） 、数据库、表的设计2） 增加模块、修改模块、删除模块的代码编写4、通过能系统的分析、系统设计、数据库设计和功能的实现等，培养ASP动态网页设计的基本技能。五、设计要求1、独立完成课程设计。2、 要求熟练掌握 Dreamweaver的操作使用， AspWebServer的

6、安装与配置3、熟练掌握 Access数据库的设计基本方法。4、站点主题自拟（体育、军事、茶叶、个人站点等）站点风格自行设计、布局简洁美观，站点内容健康详实，站点图片与网页内容贴近主题。5、文档结构清晰，不得出现中文的文件夹名字以及中文的网页名字6、所有网页必须给标题命名，整个站点必须有良好的导航系统六、设计内容与步骤1、网站的规划与设计名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 3 页，共 25 页 - - - - - - - - - 共25 页第4 页1）网站定位（面向人群，涉

7、及范围）随着信息化全面普及，为处理大量数据、发布及时信息，所以建立一个系部网站。希望该网站能够让师生之间进行良好的沟通。网站通过asp架构可以对学生的基本信息及其大量的学习成绩尽心处理2）网站简介信息工程管理系统网是面向信息工程系的信息、管理系统。信息工程管理系统旨在为广大师生提供一个交流的平台，强调师生互动的特色，而非仅仅是自上而下发布消息的场所。网站基于ASP+Access的架构，通过后台管理，能够实现即时更新。通过学院服务器进行组建服务管理。网站涵盖了了系部的动态信息的发布，各个班级子网的建设。此网站能让同学知道更多关于系部的消息及外部人员更好的了解本系动态。为实现更好的网站建设，由各个

8、班级自己实施管理，可以根据实际需要发布班级动态，自主查找自己需要的信息，可以更好的促进个人与集体的沟通交流。3）网站的栏目规划（总体结构设计）网站首页系部动态系部风采10网络10冶控10多媒体信息工程系管理系统学期安排发布信息系部活动系部荣誉学期项目班级信息学期项目班级信息学期项目班级信息名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 4 页，共 25 页 - - - - - - - - - 共25 页第5 页4）网站的数据设计与规划一个专业的网站建立在合理的网站规划前提之下，网站规

9、划既有战略性的内 容，也包含战术性的内容，网站规划应站在网络营销战略的高度来考虑，战术是为战略服务的。网站规划是网站建设的基础和指导纲领，决定了一个网站的发展方向，同时对网站推广也具有指导意义。网络营销计划侧重于网站发布之后的推广，网站规划侧重于网站建设阶段的问题，但网站建设的目的是为了开展网络营销的需要，因此应该用全局的观点来看待网站规划，在网站规划阶段就将计划采用的营销手段融合进来，而不是等待网站建成之后才考虑怎么去做营销。网站规划的内容对网络营销计划同样具有重要意义，具有与网络营销计划同等重要的价值，二者不可互相替代。网站规划的主要意义就在于树立网络营销的全局观念，将每一个环节都与网络营

10、销目标结合起来，增强针对性，避免盲目性。5）网站的文档结构图sc（根目录）前台页面Images（网站图片）Dongtai （date）数据库typeList（后台文件）Index、huaihi_readnew 链接动态更新Db1 网站图片后台文件名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 5 页，共 25 页 - - - - - - - - - 共25 页第6 页2、网站主要页面及核心代码 首页 系部风采 系部动态 10 网络 10 多媒体 10 冶控 校长寄语 邮箱登录 名师资

11、料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 6 页，共 25 页 - - - - - - - - - 共25 页第7 页 请选择邮箱 信息工程系动态 document.all.Layer8.style.display=none; document.all.Layer8.style.visibility=hidden; 10网络 信息工程系动态 document.all.Layer8.style.display=none; document.all.Layer8.style.visibi

12、lity=hidden; mtDropDown.isSupported = function() if (typeof mtDropDown.isSupported.r = boolean) return mtDropDown.isSupported.r; var ua = navigator.userAgent.toLowerCase(); var an = navigator.appName; var r = false; if (ua.indexOf(gecko) -1) r = true; else if (an = Microsoft Internet Explorer) if (d

13、ocument.getElementById) r = true; mtDropDown.isSupported.r = r; return r; mtDropDown.initialize = function() for (var i = 0, menu = null; menu = this.registryi; i+) menu.initialize(); mtDropDown.renderAll = function() var aMenuHtml = ; for (var i = 0, menu = null; menu = this.registryi; i+) aMenuHtm

14、li = menu.toString(); document.write(aMenuHtml.join(); function mtDropDown(oActuator, iDirection, iLeft, iTop, iReferencePoint, parentMenuSet) this.addItem = addItem; this.addMenu = addMenu; this.toString = toString; this.initialize = initialize; this.isOpen = false; this.show = show; this.hide = hi

15、de; this.items = ; 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 8 页，共 25 页 - - - - - - - - - 共25 页第9 页this.onactivate = new Function(); this.ondeactivate = new Function(); this.onmouseover = new Function(); this.onqueue = new Function(); this.index = mtDropDown.reg

16、istry.length; mtDropDown.registrythis.index = this; var id = mtDropDown + this.index; var contentHeight = null; var contentWidth = null; var childMenuSet = null; var animating = false; var childMenus = ; var slideAccel = -1; var elmCache = null; var ready = false; var _this = this; var a = null; var

17、 pos = iDirection = mtDropDown.direction.down ? top : left; var dim = null; function addItem(sText, sUrl) var item = new mtDropDownItem(sText, sUrl, this); item._index = this.items.length; this.itemsitem._index = item; function addMenu(oMenuItem) if (!oMenuItem.parentMenu = this) throw new Error(Can

18、not add a menu here); if (childMenuSet = null) childMenuSet = new mtDropDownSet(mtDropDown.direction.right, -5, 2, mtDropDown.reference.topRight); var m = childMenuSet.addMenu(oMenuItem); childMenusoMenuItem._index = m; m.onmouseover = child_mouseover; m.ondeactivate = child_deactivate; m.onqueue =

19、child_queue; return m; function initialize() initCache(); initEvents(); initSize(); 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 9 页，共 25 页 - - - - - - - - - 共25 页第10 页ready = true; function show() if (ready) _this.isOpen = true; animating = true; setContainerPos()

20、; elmCacheclip.style.visibility = visible; elmCacheclip.style.zIndex = mtDropDown._maxZ+; slideStart(); _this.onactivate(); function hide() if (ready) _this.isOpen = false; animating = true; for (var i = 0, item = null; item = elmCache.itemi; i+) dehighlight(item); if (childMenuSet) childMenuSet.hid

21、e(); slideStart(); _this.ondeactivate(); function setContainerPos() var sub = oActuator.constructor = mtDropDownItem; var act = sub ? oActuator.parentMenu.elmCacheitemoActuator._index : oActuator; var el = act; var x = 0; var y = 0; var minX = 0; var maxX = (window.innerWidth ? window.innerWidth : d

22、ocument.body.clientWidth) - parseInt(elmCacheclip.style.width); var minY = 0; var maxY = (window.innerHeight ? window.innerHeight : document.body.clientHeight) - parseInt(elmCacheclip.style.height); while (sub ? el.parentNode.className.indexOf(mtDropdownMenu) = -1 : 名师资料总结 - - -精品资料欢迎下载 - - - - - -

23、- - - - - - - - - - - - 名师精心整理 - - - - - - - 第 10 页，共 25 页 - - - - - - - - - 共25 页第11 页el.offsetParent) x += el.offsetLeft; y += el.offsetTop; if (el.scrollLeft) x -= el.scrollLeft; if (el.scrollTop) y -= el.scrollTop; el = el.offsetParent; if (oActuator.constructor = mtDropDownItem) x += parseInt(e

24、l.parentNode.style.left); y += parseInt(el.parentNode.style.top); switch (iReferencePoint) case mtDropDown.reference.topLeft: break; case mtDropDown.reference.topRight: x += act.offsetWidth; break; case mtDropDown.reference.bottomLeft: y += act.offsetHeight; break; case mtDropDown.reference.bottomRi

25、ght: x += act.offsetWidth; y += act.offsetHeight; break; x += iLeft; y += iTop; x = Math.max(Math.min(x, maxX), minX); y = Math.max(Math.min(y, maxY), minY); elmCacheclip.style.left = x + px; elmCacheclip.style.top = y + px; function slideStart() var x0 = parseInt(elmCachecontent.stylepos); var x1 =

26、 _this.isOpen ? 0 : -dim; if (a != null) a.stop(); a = new Accelimation(x0, x1, mtDropDown.slideTime, slideAccel); a.onframe = slideFrame; a.onend = slideEnd; a.start(); function slideFrame(x) elmCachecontent.stylepos = x + px; 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - -

27、- - - 第 11 页，共 25 页 - - - - - - - - - 共25 页第12 页function slideEnd() if (!_this.isOpen) elmCacheclip.style.visibility = hidden; animating = false; function initSize() var ow = elmCacheitems.offsetWidth; var oh = elmCacheitems.offsetHeight; var ua = navigator.userAgent.toLowerCase(); elmCacheclip.styl

28、e.width = ow + mtDropDown.shadowSize + 2 + px; elmCacheclip.style.height = oh + mtDropDown.shadowSize + 2 + px; elmCachecontent.style.width = ow + mtDropDown.shadowSize + px; elmCachecontent.style.height = oh + mtDropDown.shadowSize + px; contentHeight = oh + mtDropDown.shadowSize; contentWidth = ow

29、 + mtDropDown.shadowSize; dim = iDirection = mtDropDown.direction.down ? contentHeight : contentWidth; elmCachecontent.stylepos = -dim - mtDropDown.shadowSize + px; elmCacheclip.style.visibility = hidden; if (ua.indexOf(mac) = -1 | ua.indexOf(gecko) -1) elmCachebackground.style.width = ow + px; elmC

30、achebackground.style.height = oh + px; elmCachebackground.style.backgroundColor = mtDropDown.backgroundColor; elmCacheshadowRight.style.left = ow + px; elmCacheshadowRight.style.height = oh - (mtDropDown.shadowOffset - mtDropDown.shadowSize) + px; elmCacheshadowRight.style.backgroundColor = mtDropDo

31、wn.shadowColor; elmCacheshadowBottom.style.top = oh + px; elmCacheshadowBottom.style.width = ow - mtDropDown.shadowOffset + px; elmCacheshadowBottom.style.backgroundColor = mtDropDown.shadowColor; 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 12 页，共 25 页 - - - - - -

32、 - - - 共25 页第13 页else elmCachebackground.firstChild.src = mtDropDown.backgroundPng; elmCachebackground.firstChild.width = ow; elmCachebackground.firstChild.height = oh; elmCacheshadowRight.firstChild.src = mtDropDown.shadowPng; elmCacheshadowRight.style.left = ow + px; elmCacheshadowRight.firstChild

33、.width = mtDropDown.shadowSize; elmCacheshadowRight.firstChild.height = oh - (mtDropDown.shadowOffset - mtDropDown.shadowSize); elmCacheshadowBottom.firstChild.src = mtDropDown.shadowPng; elmCacheshadowBottom.style.top = oh + px; elmCacheshadowBottom.firstChild.height = mtDropDown.shadowSize; elmCac

34、heshadowBottom.firstChild.width = ow - mtDropDown.shadowOffset; function initCache() var menu = document.getElementById(id); var all = menu.all ? menu.all : menu.getElementsByTagName(*); elmCache = ; elmCacheclip = menu; elmCacheitem = ; for (var i = 0, elm = null; elm = alli; i+) switch (elm.classN

35、ame) case items: case content: case background: case shadowRight: case shadowBottom: elmCacheelm.className = elm; break; case item: elm._index = elmCacheitem.length; elmCacheitemelm._index = elm; break; 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 13 页，共 25 页 - - -

36、 - - - - - - 共25 页第14 页_this.elmCache = elmCache; function initEvents() for (var i = 0, item = null; item = elmCache.itemi; i+) item.onmouseover = item_mouseover; item.onmouseout = item_mouseout; item.onclick = item_click; if (typeof oActuator.tagName != undefined) oActuator.onmouseover = actuator_m

37、ouseover; oActuator.onmouseout = actuator_mouseout; elmCachecontent.onmouseover = content_mouseover; elmCachecontent.onmouseout = content_mouseout; function highlight(oRow) oRow.className = item hover; if (childMenusoRow._index) oRow.lastChild.firstChild.src = mtDropDown.dingbatOn; function dehighli

38、ght(oRow) oRow.className = item; if (childMenusoRow._index) oRow.lastChild.firstChild.src = mtDropDown.dingbatOff; function item_mouseover() if (!animating) highlight(this); if (childMenusthis._index) childMenuSet.showMenu(childMenusthis._index); else if (childMenuSet) childMenuSet.hide(); function

39、item_mouseout() if (!animating) if (childMenusthis._index) childMenuSet.hideMenu(childMenusthis._index); else dehighlight(this); 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 14 页，共 25 页 - - - - - - - - - 共25 页第15 页function item_click() if (!animating) if (_this.ite

40、msthis._index.url) location.href = _this.itemsthis._index.url; function actuator_mouseover() parentMenuSet.showMenu(_this); function actuator_mouseout() parentMenuSet.hideMenu(_this); function content_mouseover() if (!animating) parentMenuSet.showMenu(_this); _this.onmouseover(); function content_mo

41、useout() if (!animating) parentMenuSet.hideMenu(_this); function child_mouseover() if (!animating) parentMenuSet.showMenu(_this); function child_deactivate() for (var i = 0; i childMenus.length; i+) if (childMenusi = this) dehighlight(elmCacheitemi); break; function child_queue() parentMenuSet.hideM

42、enu(_this); function toString() var aHtml = ; var sClassName = mtDropdownMenu + (oActuator.constructor != mtDropDownItem ? top : ); for (var i = 0, item = null; item = this.itemsi; i+) 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 15 页，共 25 页 - - - - - - - - - 共25 页

43、第16 页aHtmli = item.toString(childMenusi); return + + + aHtml.join() + + + + + ; 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 16 页，共 25 页 - - - - - - - - - 共25 页第17 页 typename 名称： 项目：   编号 名称 项目 修改 新闻 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精

44、心整理 - - - - - - - 第 18 页，共 25 页 - - - - - - - - - 共25 页第19 页 a href=update.asp?id=编 辑 a href=deletetype.asp?id=删除 a href=addnews.asp?id=添加新闻  查看新闻 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 19 页，共 25 页 - - - - - - - - - 共25 页第20 页 无标题文档 添加新闻 标题 所属栏目 option v

45、alue= 文章内容 文章作者   名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 21 页，共 25 页 - - - - - - - - - 共25 页第22 页 用户登录 用户名： 密码 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 22 页，共 25 页 - - - - - - - - - 共25 页第23 页 !DOCTYPE html PUBLIC -

46、/W3C/DTD XHTML 1.0 Transitional/EN 无标题文档 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 23 页，共 25 页 - - - - - - - - - 共25 页第24 页 编号 标题 下拉表 作者 操作 a href=newsbianji.asp?id=编辑 a href=delnews.asp?id=删除 /html名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理

47、- - - - - - - 第 24 页，共 25 页 - - - - - - - - - 共25 页第25 页七、设计总结：经过两周紧张的实训，我初步的接触了asp，越学越发觉得自己应该更加的努力用心学习。在实训之前，本来以为先学java ，自己也争取在 java 上有所建树，然后再在网页设计中使用javascript语言，但是呢，计划总是跟不上变化，所以在对 asp的学习还是不尽人意， 当然只是在现在的成绩上，要是同精通 asp的高手相比就太好高骛远了。在整个实训之前感到很兴奋，因为觉得自己总算可以能掌握一门谋生的技巧了。通过两周紧张的实习，终于认识到自己所掌握的那一点点小东西是上不了台面

48、的，但是通过自己的努力还是能做出一点自己的东西，虽然与资深人员相比还有那么的差距，但是还是对自己的成果还是有那么小小的一点得意。在学习过程中，从开始的什么都不懂，也遇到了很多的问题，开始的时候自己不能解决，只好向高手求助，逐渐的自己也能独立的解决问题，但是能解决自己的错误不算是很熟练，所以也经常帮助其他同志解决错误，随着想困难一个一个的被攻克， 自己对 asp的认识也是飞速的提高。 在回忆自己最搞笑的事情是，最初开始学习因为链接数据库的代码拼写错误，从而耽误了很多工作，但是后面自己也开始独立的寻找错误，争取不向老师询问这些因为自己的问题而犯得低级错误。其实我们这次的实训项目不是很难，因为我们不

49、是自己动手从一点点的基础都没有的网页开始， 而是通过寻找网上现有的资源进行我们自己的修改，根据实训方案的划定 , 先是将动态网站的基本原始素材转变, 像 logo 、 banner等然后汇集咱们组要做的网站书契原始素材和相干的图片等。根据基本的网站原始素材做的 , 框架基本没有转变 , 连结原有网站风貌; 由于是动态网站 ,以是要有关到数值库在咱们做完网站的基本步调然后, 咱们起头修改数据库 ,把相干的数据进行修改 , 反复重复的修改与浏览后 , 咱们的网站也建成为了。回首此次课程预设实训 , 直到现在我仍感叹颇多不仅强化了之前所学过的常识, 并且学到了许多在书册上所没有学到过的常识更懂患上并

50、切身领会到了定见与现实相联合的重要性 , 只有定见常识是远远不敷的, 把所学的定见常识与实践相联合起来 , 从而提高本身的现实下手能力和自力思虑的能力。在后面几天写实训报告的过程中，也常常想起在机房艰苦的实训过程，艰苦这个词用的不是太过分，因为一天上下无时不在使用自己的脑细胞，到二周过后感觉自己的脑细胞已经缩水了好多。因为这次实训的东西很多都没有接触过，从开始学习，而且自己还要拓展，这些的一切无一不在挑战我们的神经的坚韧度，但是自己还是挺下来了。我非常想念这次实训，它不仅让我认识到计算机这个新兴领域也是博大精深，不能因为它出现的时间短，而轻视它，也在编程领域中了解了它的过程是艰苦的，我们应该珍