web毕业论文

Web前端页面设计1长沙理工大学继续教育学院成人函授教育毕业设计（论文）指导书Web前端页面设计2摘要21世纪是信息高速发达的时代，网络作为当今最流行最方便快捷的媒介也越来越被人们接受，并且融入我们的生活。随着高校信息化建设的不断推进，网站的作用超越了传统的信息获取，交流它更能体现组织机构的风采，性质。所以高校院系建立本院系美观，专业，易于维护管理的网站已经势在必行。本论文主要围绕数字媒体技术专业的门户网站为开发主题，最基本也是最必须的三个技能。前端的开发中，在页面的布局时，HTML将元素进行定义，CSS对展示的元素进行定位，再通过JavaScript实现相应的效果和交互。虽然表面看起来这些很简单，但这里面需要掌握的东西绝对不会少。在进行开发前，需要对这些概念弄清楚，弄明白，这样在开发的过程中才会得心应手。分析并解决实现中的若干技术问题介绍了个性化页面的背景及jsp+javascript+mysql系统的一般原理；阐述整个个性化页面生成系统的系统结构及工作原理；分析了系统实现中的特殊性，难点和重点；设计实现用户注册，用户登录，用户管理等jsp页面。分析并解决实现中的若干技术问题；建立完整的校园网站，进行测试并分析结果。该网站有效地实现用户通过JSP页面访问来进行用户注册，登陆，并对网站内容进行有效的管理，提升了后期添加和删除信息的有效性，具有一定的应用价值。Web前端页面设计3目录第1章前端开发工具及相关技术..........................51.1选题背景及意义........................................51.2前端开发工具..........................................71.3前端开发相关技术......................................81.3.1Javascript简介...............................81.3.2Javascript基本特点..........................81.3.3CSS简介......................................91.3.4JQuery........................................91.4本章小结..............................................11第2章前端布局分析与设计...............................112.1前端总体开发流程及设计................................112.1.1分层开发.....................................122.1.2代码编写.....................................122.1.3内部测试与后续优化...........................132.2前端UI设计...........................................162.2.1模块分布.....................................162.2.2颜色配置.....................................162.2.3CSS元素.....................................17Web前端页面设计42.3交互设计与UI........................................182.4点线的运用.............................................202.4.1点的运用....................................202.4.2线的运用....................................202.5网站结构布局及设计.....................................212.5.1网站首页结构...............................212.5.2主题鲜明，富有特色..........................222.5.3版式编排布局合理性...........................232.6网站前台页面设计.....................................252.5.1首页........................................262.5.2系内概况....................................262.5.3系内新闻....................................272.6本章小结...............................................27第3章主要功能的实现.....................................273.1界面设计...............................................273.2具体设计文档...........................................273.3前台新闻文摘显示.......................................283.3.1网站装饰风格..................................283.3.2网站的链接结构................................283.4可视化设计.............................................283.5具体实现技术...........................................293.5.1CSS在数字媒体技术系网站中的应用实例.......293.5.2应用JavaScript设计网页......................29Web前端页面设计53.6本章小结................................................31第4章总结..................................................324.1本章小结.................................................32致谢...........................................................33Web前端页面设计6第1章前端开发工具及相关技术1.1选题背景及意义如今的互联网已经渗透到我们生活的每一个层面，网站的内容越来越丰富全面，以此来满足了各种不同需求的浏览者。网站的作用众所周知人们通过网站快速获取，发布和传递信息。目前很多高校建立起了自己的网站这些网站的建立使得学校可以突破传统的媒体的限制在网络上开辟的属于自己的新天地。网络具有超时空性。网络超时空性是一种“一人对一人，一人对多人，多人对一人，多人对多人”的传播方式。超时空性的形成正式由于在网络在时间层面，空间层面上的开放性带来的。网络的超时空性使得网站对学校本身和外界社会表现特定的功能，表现在网站有助于改变教育资源的分散性和分布不均衡性，有效的将教育资源进行整合，从而使得教育资源使用意义上的无限增长。网络具有的海量存储特性，网络能形成一个巨大无比的数据库，世界上任何时间任何地点的任何一件事都能成为网络的信息被广泛传播。网站的海量存储特性可以从横向和纵向两方面分析：横向看网站往往设置多个板块，分别放置相关内容。不同板块的信息相互独立，共同构成网站的内容。纵向看，同一个板块的内部，内容并不是固定不变的，而是不断添加连续更新的。大量的信息使得高校网站成为一个巨大的数据库。交互性体现在网站通过设置留言板，论坛，发挥网络交互的功能，在我们的日常生活建立起了交流渠道。网站正是以这些特点为基础，发挥了自己本身的资源整合，信息传播，多方交流互动等方面的独特功能，成为一座沟通桥梁。很多网站内容多姿多彩，板块，内容争妍斗艳。但不外乎以一下几部分例如：学校介绍，新闻发布，招生信息，就业信息，师资力量，科研成果，机构设置，教学素材等。高校网站的建立和维护需要大量的物力和人力，为何要投入Web前端页面设计7去建网站上？是因为如上所述的网站有的独特特性使得建设高校网站势在必行我们要创建我们本专业的网站数字媒体技术系的专业网站，网站前端设计最基本的三个技能：HTML，CSS，JavaScript，PS矢量图像编辑技术。这个是前端开发中最基本也是最必须的三个技能。前端的开发中，在页面的布局时，HTML将元素进行定义，CSS对展示的元素进行定位，再通过JavaScript实现相应的效果和交互。虽然表面看起来这些很简单，但这里面需要掌握的东西绝对不会少。在进行开发前，需要对这些概念弄清楚，弄明白，这样在开发的过程中才会得心应手。建立本系网站发挥的作用如下：(1)数字媒体技术系网站是数字媒体专业的“商标”。在这个高度信息化的社会里，建立数字媒体技术系自己的网站是最直接的宣传手端。网站的超时空特性，不仅能让本地区的人们了解学院，更可让世界了解本专业。(2)数字媒体技术系网站巨大的教育资源，网站是实现教育资源分配的桥梁，它使每一位教师和学生都能均等的得到培训和受教育的机会，能极大的提高教学效率。数字媒体技术系网站能提供教学互动的全新方式，网站使得教师与教师，教师与学生，学生与学生之间的交流有了全新的方式，它不再受到传统课堂的制约。它可以使不同的学院同处一室，共同讨论，共同提高。地理上的界限在这里模糊和消失了，数字媒体技术系网站是真正没有围墙的系网站。(3)数字媒体技术系网站能够提供个性化的学习平台，不同的学生理解世界的方式各不相同，认知世界有诸多方式。网络提供的丰富资源可以使学生寻觅不同的教育方式，各取所需。数字媒体技术系网站允许不同的学生沿着自己的途径，按自己的速度接受教育与学习，学生将有机会享受最佳的教育机会，充分发掘自己的内在潜力，培植独特的个性和人格。(4)数字媒体技术系网站是最佳的教学研究室，数字媒体技术系网站与教育类专门网站的有效链接，给本系教学研究带来了一片新天地，各种优秀教案，专家论坛，网络观摩课，各科素材，多媒体课件制作等内容为教师教研提供了极佳的平台。有效地降低教研成本，提高效率。Web前端页面设计81.2前端开发工具(1)MyEclipse简介MyEclipse企业级工作平台（MyEclipseEnterpriseWorkbench，简称MyEclipse）是对EclipseIDE的扩展，利用它我们可以在数据库和JavaEE的开发，发布以及应用程序服务器的整合方面极大的提高工作效率。它是功能丰富的JavaEE集成开发环境，包括了完备的编码，调试，测试和发布功能，完整支持HTML，Struts，JSP，CSS，JavaScript，Spring，SQL，Hibernate。MyEclipse[4]结构上的这种模块化，可以让我们在不影响其他模块的情况下，对任一模块进行单独的扩展和升级。简单而言，MyEclipse是Eclipse的插件，也是一款功能强大的JavaEE集成开发环境，支持代码编写，配置，测试以及除错，MyEclipse6。0以前版本需先安装Eclipse。MyEclipse6。0以后版本安装时不需安装Eclipse。(2)DreamweareDreamweare是美国MACROMEDIA公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器，它是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动