WEB前端页面设计毕业论文设计模板

WEB前端页面设计毕业论文设计模板目录1 摘 要第1章 前端开发工具及相关技术1.1选题背景及意义1.2 前端开发工具1.3 前端开发相关技术1.4本章小结第2章 前端布局分析与设计2.1前端总体开发流程及设计2.2 前端UI设计2.3 交互设计与2.4 点，线，面的运用2.5 网站结构布局及设计2.6 网站前台页面设计2.7本章小结3章主要功能的实现3.1 界面设计3.2 具体设计文档3.3 前台新闻文摘显示3.4 可视化设计3.5 具体实现技术3.6 本章小结第4章总结4.1总结致 谢摘 要21人们接受，并且融入我们的生活。随着高校信息化建设的不断推进，网站的作用超越了传统的信息获取，交流它更能体现组织机构的风采，性质。所以高校院系建立本院系美观，专业，易于维护管理的网站已经势在必行。本论文主要围绕数字媒体技术专业的门户网站为开发主题，最基本也是最必须的三HTML对展示的元素进JavaScript里面需要掌握的东西绝对不会少。在进行开发前，需要对这些概念弄清楚，弄明白，这样在开发的过程中才会得心应手。分析并解决实现中的若干技术问题介绍了个性化页面的背景及jsp+javascript+mysqljsp页面。分析并解决实现中的若干技术问题；建立完整的校园网站，进行测试并分析结果。该JSP页面访问来进行用户注册，登陆，并对网站内容进行有效的管理，提升了后期添加和删除信息的有效性，具有一定的应用价值。第1章 前端开发工具及相关技术选题背景及意义和传递信息。目前很多高校建立起了自己的网站这些网站的建立使得学校可以突破传统的媒体“人对一人，一人对多人，多人对一人，多人对多人”的传播方式。超时空性的形成正式由于在网络在时间层面，空间层面上的开放性带来的。网络的超时空性使得网站对学校本身和外界社会表现特定的功能，表现在网站有助于改变教育资源的分散性和分布不均衡性，有效的将教育资源进行整合，从而使得教育资源使用意义上的无限增长。网络具有的海量存储特性，网络能形成一个巨大无比的数据库，世界上任何时间任何地点的任何一件事都能成为网络的信息被广泛传播。交互性体现在网站通过设置留言板，论坛，发挥网络交互的功能，在我们的日常生活建立起了交流渠道。动等方面的独特功能，成为一座沟通桥梁。很多网站内容多姿多彩，板块，内容争妍斗艳。但不外乎以一下几部分例如：学校述的网站有的独特特性使得建设高校网站势6在必行我们要创建我们本专业的网站数字媒体技术系的专业网站，网站前端设计最基本的三个技能：HTML，CSS，JavaScript，PS最基本也是最必须的三个技能。前端的开发中，在页面的布局时，HTMLJavaScript效果和交互。虽然表面看起来这些很简单，但这里面需要掌握的东西绝对不会少。在进行开发前，需要对这些概念弄清楚，弄明白，这样在开发的过程中才会得心应手。建立本系网站发挥的作用如下：数字媒体技术系网站是数字媒体专业的“商标建立数字媒体技术系自己的网站是最直接的宣传手端。网站的超时空特性，不仅能让本地区的人们了解学院，更可让世界了解本专业。网站是真正没有围墙的系网站。数字媒体技术系网站能够提供个性化的学习平台，不同的学生理解世界的方式各取所需。数字媒体技术系网站允许不同的学生沿着自己的途径，按自己的速度接受教育与学习，学生将有机会享受最佳的教育机会，充分发掘自己的内在潜力，培植独特的个性和人格。教研成本，提高效率。前端开发工具MyEclipse简介MyEclipse（MyEclipseEnterpriseWorkbenchMyEclipse）EclipseIDEJavaEE的开发，发布以及应用程JavaEESpring，SQL，Hibernate。MyEclipse[4]结构上的这种模块化，可以让我们在不影响其他模块的情况下，对任一模块进行单独的扩展和升级。简单而言，MyEclipseEclipse的插件，也是一款功能强大的JavaEE集成开发环境，支持代码编写，配置，测试以及除错，MyEclipse6。0EclipseMyEclipse6。0Eclipse。DreamweareDreamweareMACROMEDIA公司开发的集网页制作和管理网站于一身的所见即用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页[5]。使用网站地图可以快速制作网站雏形，设计，更新和重组网页。改变网页位置或档案名称，Dreamweare会自动更新所有链接。使用支援文字，HTML码，HTML一般语法的搜寻及置换功能使得复杂的网站更新变得迅速又简单。PhotoshopAdobePhotoshop，简称“PS，是一个由AdobeSystems开发和发行的图像处理软件。Photoshop有效的进行图片编辑工作。Photoshop处理成加载到网站页面的图片，用Photoshop制作矢量图形用作网站页面的修饰按钮。前端开发相关技术Javascript简介JavascriptCGIHTMLWeb页面的取代。Javascript脚本正是满足这种需求而产生的语言。它深受广泛用户的喜爱和欢迎。它是众多脚本语言WWW的结合有效地实现了网络计算和网络计算机的蓝图。无疑JavaInternetjavascript脚本语言编程方法是我国广大用户日益关心的问题。Javascript基本特点基于对象的语言javascript是一种基于对象的语言，同时也可以看作一种面向对象的。这意味着本的相互作用。简单性javascriptJavaJava是一种非常好的过渡。其次它的变量类型是采用弱类型，并未使用严格的数据类型。安全性javascript服务器上，不允许对网络文档进行修改和删除，只能通过浏览器实现信息浏览或动态交互。从而有效地防止数据的丢失。动态性javascript是动态的，它可以直接对用户或客户输入做出响应，无须经Web服务程序。它对用户的反映响应，是采用以事件驱动的方式进行的。所谓事件驱动，就是指在主页(HomePage)中执行了某种操作所产生的动作，就称为“事件”(Event)会引起相应的事件响应。CSS简介CSS(层叠样式表)HTMLHTMLCSS技术，可以有效地对页面的布局，字体，颜色，背景和其他效果实现更加精者页数不同的网页的外观和格式。什么是CSS？CSS“层叠Web式表存在，这些样式表根据所在的位置，拥有不同的优先级，优先级越高，就会在最后3(1)(2)嵌入式样式表；(3)外部式样式表；CSS的特点CSS是用来扩展HTMLHTMLCSSHTML，HTML高效，这主要表现在以下几个方面：减少图形文件的使用，集中管理样式信息，设定共享样式，将样式分类使用。JQueryJQuery[9]prototypeJavascript——WRITELESS，DOMOREjs库(压缩后只有21k)js库所不及的，CSS3，还兼容各种浏览器（IE6。0+FF1。5+Safari2。0+Opera9。0+。JQueryJavaScriptdocuments，events，实现动画效果。jQueryWebjQuery技术，丰富网站的交互性和用户体验性。jQueryJavascrip脚本库。Javascript轻量级脚本库系列文章。Javascript脚本库类似于。NET方便用户使用。jQuerySystemASP.NETMVCjQuery并不能帮助我们解决脚本的引用管理和功能管理，这些都是脚本框架要做的事。jQuery将极大的提高编写javascript代码的效率，让写出来的代码更加优雅，更加健壮。jQuery有如下特点：提供了强大的功能函数使用这些功能函数，能够帮助我们快速完成各种功能，而且会让我们的代码异常简洁。解决浏览器兼容性问题javascriptWeb开发人员的噩梦，常常IE9，FirefoxIE6下就出现莫名其妙的问题。针对不jQuery我们将从这个噩梦中醒来，jQueryEvent事件对象已经被格式化成所有浏览器通用的，从前要根据eventIE下是event.srcElements而ff等标准浏览器下下是eventtarget。jQueryeventeventtarget获取事件对象。UIjQuery可以实现比如渐变弹出，图层移动等动画效果，让我们获得更好的IEff的渐变动画，javascriptjQuery此类应用。纠正错误的脚本知识javascriptDOMHTMLdocumentonclick属性，不知道onclick其实是一个匿名函数等等。拥有这些错误脚本知识的技术人员也能完成所有的DOM的语句，当页面代码很小用户加载很快时没有问题，当页面加载稍慢时就会出现浏览器终jQuery你就将纠正这些错误的知识--jQuery脚本编写方法!本章小结本章介绍了开发数字媒体技术系网站前端所需要的开发工具，同时讲述了相关的前端开发技术比如：Javascript，CSS，jqurey发工具盒技术有深刻的理解2章前端布局分析与设计前端总体开发流程及设计Web前端开发技术是一个先易后难的过程主要包括三个要素：HTML，CSSJavaScript，这就要求前端开发工程师不仅要掌握基本的Web能优化，SEO和服务器端的基础知识，而且要学会运用各种工具进行辅助开发以及理论层面的知识，包括代码的可维护性，组件的易用性，分层语义模板和浏览器分级支持等。12分层开发JS搭建，JS交2-1所示：有限的时间内做出很多模块和功能。降低开发成本，提高开发率。图2-1 分层开发图代码编写LSM方式进行，大致流程为总规划和设计草稿完成后，就进行前期的前端开发（搭建大致的HTML结构嵌套程序。整体消耗的时间，确保产品有更多的时间修改和完善。确定了流程后还需要对产品原型进行分析，拆分，把复用性高的部分找出来制作成代码模块，方便以后的套用。确认二，三级页面的风格搭建分层开发 模块制作页面制作底层JS搭建总结结构搭建JS交互效果内部测试代码优化13统一框架。前端设计样式确定以后，就进行通用模块样式的设计（颜色，连接颜色等，完成后并提交给前端，统一的搭建。HTML时候充分发2-2所示：图2-2编写代码流程图代码编写过程中让前端提前进入开发流程中来,HTML结构的编,效率,内部测试与后续优化前端的内部测试，指出页面与设计稿不匹配的地方，优化部分细节页面样式。测试不仅能提高内测的质量，还能更早的发现问题并及时的修改，否则当页面提交开发以后再做修改是一件很麻烦的事情。当所有细节修改完毕后，前端制作(HTML)页面设计PRD前端制作(样式完善)提交开发

代码编写prototype14就需要进行制作文件的优化以确保代码的最优化，尽可能地压缩图片和减少外部HTTP2-3所示：2-3内部测试流程图内部测试与后续优化 设计参与测试整体测试后续代码优化15图2-4前端开发流程图发需要。代码更可控，开发效率更高。二二』-』>＿代码编

prototype前端制作(HTML)页面设计PRD前端制作(样式完善)提交模块制作页面制作底层JS搭建总结结构搭建J交互效果内部测试代码优化内部测试与后续优化整体测试后续代码优化

设计参与测试16前端UI设计模块分布UI层次感设计的就是从属关系，点构成线，线构成面，主次清晰明了。下面是以任由设计师发挥，不是这样死板，要运用层次感的原理去设计颜色配置RGB000000，例如经常写的redcolor:#FF0000；缩写0)2-7所示：图2-7 字体颜色变换17CSS元素CSS块元素(block)的有：divptableh1uldl(inline)和其它元素都在一行上；高度，行高以及顶，底边距不可改变；常用的有：astrongfontimginputspansmall2-8所示：Display:inline-block旁边的内联对象会被呈递在同一行内，允许空格。但对于这个属性不是所有浏览器都识别。图2-8 CSS浮动CSS间距（paddingmargin内边距g元素的内边距在边框和内容区之间。padding:10px5px15px20px;10px5px下15px20pxpadding:10px5px15px;padding:10px15px;上右下左<divstyle=width:100px;padding:020px;>无标题文档</div>这个的宽度实质已经增加了40pxmargin：围绕在元素边框的空白区域是外边距。margin支持负值，在页面div居中:margin:0auto;<divtext-align:center;<div“width:100px;”>无标题文档</div></div>182-9所示：图2-9 元素边框调整UI由于视觉设计本身是一种比较主观的创作性工作，那些已经被制定好的视觉结构常常因设计师的“审美需要”而被剥离，切割。UIUI2-10，2-11所示：19图图

导航栏咨询中心20点，线，面的运用14阐述了每种开发策略的具体实现方法，常见的框架与工具存在的问题及优缺点，并提出了完善前端模块化开发策略的一些方法。在网页设计中同样离不开平面设计中最基本的点，线，面的运用。点的运用2-12所示：图2-12 点的应用线的运用线不但起到了页面的分割作用，很好的运用线条还使网页锦上添花如图2-13：图2-13 线的应用21网站结构布局及设计网站首页结构50%～80%20%以青白色为主，没有使用太多的颜色来修饰某个对象，此外，正文和背景色的对比度较大，一般字色为默认的黑色，并且用了不同的背景色条区分正文区与其他功能区。为了提高网页的可读性，标题区，标题行和正文区使用了不同大小的字体，正文使用的是静止的文字，且字体足够大，以便于阅读[15]。的模块下又细分为几个的功能模块。22制作前台页面模块，包括主页及各个子页面，建立各个页面与数据库中相关数据链接，实现前台通过调用数据库把后台数据在前台显示和更新。整体网站遵循数字媒体技都可正常返回主页以及正确连接到各个子页面。功能要求使用简单全面，容易操作。2-14所示：图2-14 网站整体结构图主题鲜明，富有特色在目标明确的基础上，完成网站的构思创意即总体设计方案。对网站的整体风格和简单明确的语言和画面告诉大家本站点的主题，吸引对本站点有需求的人的视线，对无关的人员也能留下一定的印象。对于一些LOGO[16]标志应充分加以利用。调动一切手段2-15所示：图2-15 网站标题LOGO23图2-16

版式编排布局合理性网站版式排版图面设计，但它们有许多相近之处，应充分加以利用和借鉴。站点设计简单有序，主次关系分明，将零乱页面的组织过程，混杂的内24容，依整体的布局的需要进行分组归纳，经过进行具有内在联系的组织排列，反复3-16所示：Alogo访问者第一眼就能看的出来网站的类别等。B区域是网站的导航栏，导航的颜色基本上是青白色，能展现网站的大体logo导航栏中每个导航按钮的设计也是符合美观要求。大方，大气，自然是设计导航栏的重要基础。C彩调整完美。现在正流行全景图片大大小小网站上都会用到全景图片。使用全景图给人一种舒服的视觉感受。能够提升网站的美观程度。D师及附上图片。E间循序显示。F是因为我们考虑到如果一个网站文字内容区域特别多，总体结构看起来很乱没有主插入中间的图片就好比中间挖了一条河一样既能解决网站过于枯燥，也提升网站的美观度。HJlogo的更加完美。网站前台页面设计257个子页面。制作过程如下：首页Photoshop900px*1004pxDreamweaver中用布局画出整个网站的大体布局格式，主要CSS样式来调表格以及图片，文LOGO，版权。导航条又包含系内概况，系内新闻，教务信息，专业介绍，选题系统，教学研究，科研创作。系内概况32级菜单，本系概况，实验室介绍，师资介绍等。本系概况当2-17G区域。26图2-17系内新闻32级菜单，行业资讯，院系动态，系内新闻。制作过程中采用的本章小结本章主要介绍了数字媒体技术系网站的具体布局，具体结构。也说明了设计前端的UI展现了设计以后的效果图。3章主要功能的实现界面设计管理与交互系统。27颜色：黑色色；字体：宋体；行距：150%。网站统一顶部为导航条站标，系内概况，系内新闻，教务信息，专业介绍，选题系统，教学研究，科研创作。网站上中部：网站图片结合；位置导航。网站中部：网站信息；站点数据；网站导航条；图文信息。网站底部：网站/版面制作；版权信息。具体设计文档内容和功能设计这个校园网站主要实现新闻，信息等功能，目标用户主要是Internet的在校学生。先明确这个校园网站提供的主要功能：管理员登录系统：管理网站内容，新闻动态等网上教学系统：提供给学生一些必要的电子书供下载教学科研专区：提供学院教师在个方面的成果及新闻的功能新闻公告专区：提供有关学院的公告通知，计算机方面的最新资讯。前台新闻文摘显示可以根据网站的需要，进行各种方式的插入，自动更新。如显示栏目导航，显示某N码，即可以多种形式显示新闻文章的栏目或内容。例如：一级栏目列表，二级栏目列表，栏目导航列表，栏目的最新新闻(文章)显示条数，JS机上维护新闻文章，在其他静态网页中插入代码后显示相应的新闻文章。网站装饰风格28个网站看上去符合跳动的风格。网站的链接结构校园网站的主要链接关系如下：研创作，管理员登陆页面等。可视化设计Web站点所提供的信息，也是网站设计中重要的一环。模型。具体实现技术CSS在数字媒体技术系网站中的应用实例CSS样式表使用的部分代码：#top width:100%; height:103px; background-color:green;background-image:url(Image/top.jpg); background-repeat:no-repeat;}top分是对网页背景颜色和背景图片的设置。应用JavaScript设计网页是一种基于对象(Object)和事件驱动(EventDriven)并具有安全性能的脚本语言。使HTML超文本标记语言，Java脚本语言（Java小程序）一起实现在一个WebWebHTMLHTML语言的缺陷[17]JavaScript[18]CGIHTML提供动态实时信息，并对客户操作进行反应的WebJavaScript足这种需求而产生的语言。它深受广泛用户的喜爱。它是众多脚本语言中较为优秀的一WWW的结合有效地实现了网络计算和网络计算机的蓝图。JavaScript照片切换特效代码片段：//cancelclosetimermcancelclosetime();//closeoldlayerif(ddmenuitem)ddmenuitem.style.visibility='hidden'; //getnewandshowitddmenuitem=document.getElementById(id);ddmenuitem.style.visibility='visible';//closeshowedlayerfunctionmclose(){if(ddmenuitem)ddmenuitem.style.visibility='hidden';} //goclosefunctionmclosetime(){closetimer=window.setTimeout(mclose，timeout);} //cancelclosefunctionmcancelclosetime(){ if(closetimer){Window.clearTimeout(closetimer);closetimer=null;}}30//closelayerwhenclick-outDocument.onclick=mclose; //-->$(function(){$(#webwidget_slideshow_html5_simple).webwidget_slideshow_html5_simple(slideshow_transition_effect:'Mosaic,Wipe_from_horizontal_blind,Wipe_from_vertical