毕业设计（论文）-基于JavaScript的广联达股份有限公司动态网页开发.doc

全日制本科生毕业论文题 目： 基于JavaScript的广联达股份有限公司 动态网页开发学 院： 计算机与信息科学学院 专业年级： 计算机科学与技术（师范）2010级 学生姓名： 学号： 指导教师： 职称： 教授 2014 年 5 月 9 日基于JavaScript的广联达股份有限公司动态网页开发摘 要：本课题主要采用Dreamweaver等网页制作软件来设计，实现一个展示企业风采的企业网站，最终得到一个风格美观清爽的网站设计效果。开发环境结合了XHTML+CSS，JavaScript和Flash三种技术，使网页包含更多活跃的元素和更加精彩的内容，增强了网页的视觉效果，提高了网站的交互能力，以期达到吸引用户访问、提升页面浏览的效果。关键词：JavaScript；Dom模型；动态网页；XHTML+CSS；Flash 全套设计加扣 3012250582 Abstract: This topic mainly adopts Dreamweaver web design software to design and implement a display of enterprise website, end up with a website design style beautiful refreshing effect. Development environment combined with XHTML + CSS, JavaScript, and Flash three techniques, make a web page contains more active element and more wonderful content, enhance the visual effect of the web, improve the ability of interaction sites, to attract users to access, improve the effect of page views. Key words： JavaScript；Dom；Dynamic Web Page；XHTML+CSS；Flash1 引言随着信息技术的飞速发展与互联网应用的日益普及，企业网站已成为快速发布信息、获取商业资源、分析客户行为和建立新型业务模式的重要平台。而网站结构和信息的复杂化，使得企业和用户对于这些网站的交互性要求越来越高1。JavaScript就是适应动态网页制作的需要而诞生的一种新的脚本语言，它的出现极大的提高了网站的交互能力，使网页包含更多活跃的元素和更加精彩的内容2。除了提高网站交互性之外，JavaScript技术的优点还有：规律地重复HTML代码使之简化，从而减少下载时间；及时响应用户的操作；对提交表单做即时检查；无需浪费时间交由CGI验证等等3。故在当今的网站开发中，从网站UI设计到异步数据的交互，都离不开JavaScript技术4。市面上98%以上的Web开发都有JavaScript的影子，由此可见其作为行业趋向技术的不可动摇。因此，JavaScript以其优越的灵活性使它具有很大的市场发展潜力，它是吸引用户访问、提升页面浏览必不可少的开发技术5。2 需求分析广联达软件股份有限公司成立于1998年，是国内建设工程领域信息化服务产业的领军企业。2010年5月，广联达在深圳中小企业板获得成功上市（股票简称：广联达，股票代码：002410），成为中国建设工程领域信息化产业首家上市的软件公司。为了体现以上所述的企业特色，增强浏览者对企业的认知。该网页提供简单清新的企业风格界面，使用户进入后，可选择查看企业介绍、企业历史、近期新闻或行业动向10。也可以选择查看公司产品、公司的服务体系、培训班课程安排、员工风采、招聘信息、投资者关系等等，并可连接到公司的国际版网站，查看企业在国际领域内的发展动向。从以上的描述中可以基本了解到，以“广联达软件股份有限公司”为内容的企业网站的功能需求有以下这些：（1）首页企业的简单介绍，包括企业动向、发展历程、解决方案、服务与支持、公司力量、联系方式等；（2）产品分类可按新品推荐、客户类型、产品类型等，选择相关的产品集，从而切入到具有版权的企业官方网站当中来获取产品的具体信息；（3）软件应用培训介绍企业的服务模式，以及软件应用的培训介绍、课程种类等等；（4）开班课表列出本月课程安排，供想要参加培训班的客户查看；（5）新闻中心展示企业从建立以来的重大新闻；（6）算量大赛主推并宣传近期的“算量大赛”活动；（7）活动展示展示活动视频；（8）招贤纳士链接进官网，展示近期公司的招聘信息；（9）投资者关系列出投资者所涉及的行业领域，并连接到互动平台；（10）English（企业网站国际版）展示企业国际公司的风采，以及近期动态；（11）登录供用户登录企业内部的用户管理系统，登录后可进行完善个人信息、培训班报名等操作；（12）注册可注册一个广联达账号，通过账号获得相关权限。3 主要模块注册登录English投资者关系招贤纳士活动展示算量大赛新闻中心开班课表应用培训产品分类首页对上述功能需求进行集中的模块划分，按照结构化程序设计要求，得到网页功能模块图如图3-1所示：图3-1 网页关系示意图4 系统开发工具4.1 Dreamweaver开发工具介绍Adobe Dreamweaver，简称“DW”，中文名称梦想编织者，是美国MACROMEDIA公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器，它是第一套针对专业网页设计师特别开发的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。除此之外，结合HTML、DIV+CSS、JavaScript搭建动态网页的开发环境，增加动态网页元素，从而美化和完善网站。5 网站的总体设计5.1 确定网站形象风格网站形象的设计可以从网站标志、网站色彩、网站字体和网络宣传语等方面着手。而网站风格是抽象的，是指网站的整体形象给浏览者的综合感受。这个“整体形象包括网站的标志、色彩、字体、标语等诸多因素。故对于网站元素的选取方面，我做了以下选择。5.1.1 网站标志使用广联达企业logo：图5-1 网站标志G代表着广联达，是服务于建筑产品的建造者、运维者和使用者的平台运营商。通过企业精神和文化的传承，广联达将在继承中积极开拓、超越进取、创新价值。故选取这个非常具有企业代表性的标志作为网站标志。5.1.2 网站色彩网站给人的第一印象来自视觉冲击，不同的色彩搭配可产生不同的效果，并可能影响到访问者的情绪。“标准色彩”是指能体现网站形象和延伸内涵的色彩，给人以整体统一的感觉。在该设计中，企业网站的色彩以白色、浅蓝、青和淡黄为主，给人一种简约轻松的感觉。5.1.3 网站字体和标准色彩一样，标准字体是指用于标题、主菜单的特有字体。为了体现网站的特有风格，选择“微软雅黑”作为主要字体。旨在给人一种清新和优美的深刻印象。5.2 确定网站内容该企业网站大体上包括的内容有：横幅图片、模块导航、动画特效、介绍文字、相关产品、活动视频、相关网站链接等网站的常用内容，方便来访者浏览。6 具体实现6.1 统一元素网站的统一元素有一个企业网站横幅，加上一个模块导航栏。横幅部分是一张图片，由公司总部办公大楼及座右铭组成。该图片通过Photoshop CS6制作。图6-1 企业网站横幅模块导航栏部分，以DIV + CSS + JavaScript技术实现。图6-2 模块关系6.2 网页特效模块展示该网站以动画特效作为主打，其中运用到动画特效的页面有：首页、产品分类、新闻中心、投资者关系等，在此讲述动画特效的制作。6.2.1 网站首页网站首页往往是用于了解该网站提供的资讯的，并引导互联网用户浏览网站，这部分内容一般被认为是一个目录性质的内容。故该设计将一个特效模块使用在首页。其主要体现的内容为企业简介，包括公司动向、关于广联达、解决方案、服务于支持、公司力量等。特效动画通过Adobe Flash CS3实现，如图6-3。图6-3 首页企业介绍企业网站横幅、模块导航栏、特效动画模块，三者组成整个网站的首页。当在浏览器的地址列输入该网站的域名时，浏览器就会打开该网页。由于没有购买域名空间，所以先在个人计算机搭建服务器，供学习测试之用。但是在往后的二次开发中，可将服务器转站到域名空间中，让网站挂到互联网上，那样只要能上网的地方，就能够访问该网站。6.2.2 产品分类产品分类中以三个文件夹的形式，供浏览者按条件选择查看产品列表。这三个文件夹，可实现当鼠标滑过时，缓慢提升起大致的具体产品分类。如图6-4。图6-4 产品分类页面6.2.3 新闻中心新闻中心这一网页使用整体特效，展示企业自建立以来所发生的大事件。可通过点击右上角的按钮控制其展示的播放与暂停。如图6-5。图6-5 新闻中心页面 6.2.4 活动展示顾名思义，活动展示就是让人们在浏览本页及其附属内容时，了解活动所展示的风采的。该页以一个视频列表作为主打，如图6-6，点击图片或文字可链接到相应的页面播放视频。图6-6 活动展示视频列表并且在网页下部附带相关活动的超链接，可点击查看活动详情。如图6-7。图6-7 相关活动列表6.2.5 投资者关系由于广联达公司的性质为上市公司，所以公司的投资者涉及到各式各样的行业。而投资者关系这一网页主要展示的是投资者所在的领域，该页网页的实现主要由两大特效模块组成，一个是从不同角度随意变换文字图片的幻灯片特效模块，以切换图片的方式展示投资者之间的活动以及互动内容，例如“倾听你的声音”、“五一劳动最光荣”、“清单算量知识讲座”、“百家讲坛”等。具体效果如图6-8。图6-8 幻灯片特效模块另一个特效模块如图6-9，当鼠标滑到图片上时，图片会进行翻转的特效按钮模块，以文字和图片共同表现投资者所涉及的行业领域。图6-9 图片翻转特效按钮6.2.6 用户注册公司具备内部的用户管理系统，故凡是使用企业产品的用户都可以通过注册来获取用户的相关权限。其中，必须输入用户真实姓名、单位名称、联系方式等，这些信息可供企业在内部管理系统中录入。除此之外，还必须设置好密码，方便用户往后登录网站进行相应操作。用户注册的界面如图6-10。图6-10 用户注册界面6.3 网页功能框架登录网站首页企业动向关于广联达解决方案联系我们公司力量服务与支持6.3.1 首页功能框架图图6-11 首页功能图产品分类新品推荐按用户类型按产品类型产品列表产品列表产品列表6.3.2 产品分类功能框架图图6-12 产品分类功能图新闻中心Glodon新闻大记事暂停播放重新播放返回首页首页6.3.3 新闻中心功能框架图图6-13 新闻中心功能图活动展示我们的风采相关活动视频列表活动列表6.3.4 活动展示功能框架图图6-14 活动展示功能图投资者关系幻灯片切换投资者活动投资者涉及行业列表投资者关系互动平台6.3.5 投资者关系功能框架图图6-15 投资者关系功能图注册个人信息返回主页用户信息上一步其他信息上一步确定注册6.3.6 注册功能流程图图6-16 注册流程图6.4测试结果本设计主要在Trident核心和Gecko核心的浏览器上进行调试。但由于兼容性的问题，使用两者进行调试所得的结果不尽相同，而又因为本人的专业技术水平有限，所以未能在多个浏览器上使功能特效模块都正常显示。故在演示或使用时，建议使用360浏览器进行，可使效果达到最好。7 结束语通过老师的学习资料给予帮助，及与同学之间的相互交流，同时也翻阅了大量的资料，加上近一段时间的个人努力，该网站的设计制作告一段落。总结本次企业网站的开发制作过程，我使用了目前因特网上比较流行的各种静态网页制作方法，及交互性动态网站的制作设计手段，从中学习到了对网页风格，色彩搭配，页面导航等的处理6。并懂得无论何种网站都必须从浏览者的角度出发，最大限度的满足用户的要求，这也是以后各类网站发展竞争的真正实质所在7。本次设计由于设计时间比较紧，且相关模块比较多，加之个人设计经验的不足，网站的整体设计及各模块功能还尚未完善，有待进一步的开发和改进。但本次设计提高了我对网站设计的兴趣，为以后做更好的网站打下了基础。同时还有助于我对未来所在单位的进一步了解，为我今后正式走上岗位起到了帮助性的作用。参考文献:1 弗拉纳根JavaScript权威指南M大学出版社，2007：18-30.2 姬付梓创意设计M大学出版社，2011：50-65. 3 李冲Dreamweaver网页设计M清华大学出版社，2011：6-33.4 宋虹Photoshop图形图像处理M湖南大学出版社，2011：22-26. 5 张旭东.Drea