数字媒体技术系网站前端设计与开发毕业设计(编辑修改稿)

数字媒体技术系网站前端设计与开发毕业设计(编辑修改稿)内容摘要：

NCE 学术文章发表情况世界排名第 12； 牛津大学（ 25， PRESENCE 网站信息量世界排名第 109， IMPACT 网站信息影响力世界排名第 37， OPENNESS 数字资料档案数量世界排名第 64， EXCELLENCE 学术文章发表情况世界排名第 13； 东京大学（ 42， PRESENCE 网站信息量世界排 名第 96， IMPACT 网站信息影响力世界排名第 103， OPENNESS 数字资料档案数量世界排名第 52， EXCELLENCE 学术文章发表情况世界排名第 20； 从网站建设情况来看，国内关于校园网站建设较多，虽然起步较国外晚，但是发展的速度很快， 我国高校网站的建设还有很多不尽如人意的地方，其主要在于网站互动性的缺失，内容方面没有国外院校网站那么多，是因为国内采取的形式较国外的不同。 在创新方面比较欠缺，交互性的形式少。 问题主要体现在这几个方面： (1) 缺乏组织协调，各部门各自为政。 由于网络内容建设工作几 乎全部下放到各部门， 长期以来基本上一直处于一种各自为政的状态。 各部门的网页风格迥异，都有各自不同的做法，不能做到统一。 这样做出来的网页形形色色，拼凑成一个个学院，处室网站，显得很不协调。 有必要加强组织协调工作，详细规划，明确分工，制定出相应的标准，彻底摒弃网站建设中的随意性。 (2) 内容单薄，更新滞后。 内容单薄可以说是很大的硬伤。 各部门名义上都有了自己的网站， 但大多数部门网站能够提供浏览的内容非常有限， 特别是深层次的内容严重缺乏。 另外，网上内容严重滞后，更新速度慢。 有些部门的网站，时隔一年半载 ，其网页界面和内容仍是老样子。 (3) 重点失衡 :重行政管理，轻教学科研。 校园网最主要的功能应该是要为教学， 5 科研服务。 但有些校园网上的内容有关行政管理的偏多， 而有关教学和科研的内容则相对较少。 作为一个高校网站，这不能不说是重点失衡， 本末倒置。 (4) 整个网站结构， 层次不够清晰，使用不便。 目前某些校园网首页的栏目设计太过粗略，有些内容欠缺，部分栏目名称及内容归类不够准确， 整个结构显得有些混乱，结构层次偏深， 用户需经过多次点击才能看到想要的内容。 (5) 部分网页制作粗糙，缺乏美感。 高校网 站，其页面应简洁明了，一方面不要过于呆板， 另一方面也要避免过于花哨，做到实用与美观的有机结合。 (6) 缺乏检索途径。 传播学领域“互动性”研究的理论，为检视当前我国高校网站之发展提供了一个可操作化的设计架构。 “互动性”的内涵做进一步分析，对我国高校网站的建设做一浅探，以增强人们关于互联网传播机制的认知和理解，并推进我国高校网站的在“交互性”方面的 建设。 研究内容和拟解决的问题 有多种方法会让一个网站的外观令人惊叹的。 在创建时也有不同的设计趋势。 由于网站是由他们的业务与其他很多人用来获取信息的途径， 所以很重要的设计是很有吸引力的。 长期面对一个设计不当的网站是一件比较痛苦的事情。 一旦我们拥有了一个网站之后，我们会一定会看到它拥有专业的设计，它可以实现我们的目的。 (1) 排版 创造性使用排版已被广泛的应用于网页设计排版中。 这些好的设计不只是使用的标准字体，而加上其使用自定义的字体。 它使网站更具有可读性和吸引力。 创造性地使用这种类型的方式确实可以有效的使用户可以立即得到该网站的新消息，特别是使用的字体是 独一无二的，颜色是比较突出的。 (2) 图片的切换效果研究 大图的使用也是一种趋势。 这些图像 是网站增加吸引力的网。 虽然，已被使用过，但是现今它仍然在使用， 使用它更具有现代感。 使用这种设计的，设计出的网站也是比较抢眼的， 特别是如果你有一个好的图片选择，不只是图像的形式，它应该与其网站更好的搭配。 (3) 单页布局的设计 可避免不必要的网页， 通过一个比较单一的页面布局，这是更有效的一个网站， 6 因为浏览者可以更专注于其内容。 (4) 交互性 做一个完整的网站 有几样任务要完成比如复杂的交互功能，网页动画特效，网页 UI 设计，后期维护，可扩展性等。 网站交互设计的用户的目的是增加网站的友好度，可用性 和易用性，从而使用户能够简单，快速和有效地完成网站赋予或用户自身需要的服务，功能和目标。 交互设计包含的内容： 界面设计，界面 不仅设计美术方面，还涉及提供给用户某些事的能力。 导航设计，导航 设计是提供给用户去某个地方的能力，是用户能看到的网站结构。 信息设计，信息设计就是通过网站传达给用户某些信息，用户可通过这些信息了解自己正在进行的某些事和应该如何进行某些事。 本章小结 本章阐述了开发数字媒体技术系网站的研究背景和意义。 介绍了国外高校网站的发展现状对比了目前国内高校网站的现况了说明了建设数字媒体技术 系网站建设的总体规划思想。 最后对于本文课题的研究内容和拟定解决的几个关键问题进行了探讨。 7 第 2章 前端开发工具及相关技术 前端开发环境 网站前端开发，即网页架构设计。 主要是由与交互设计，视觉设计的配合，根据效果图来规划页面布局，合理部署页面代码层次，挖掘用户体验效果。 用Dreamweare， CSS， JS 等布局网页内容，制作静态页面，这些页面要兼容各主流浏览器，并配合程序完成静态页面与后台 程序的整合工作。 另外，要对网站做一些相应的更新，维护及优化。 整个网站开发的流程在后面有具体介绍。 前端开发在整个过程中占 据着不可替代的地位，其它几个环节主要给予相关的配合 [3]。 前端开发工具 (1) MyEclipse 简介 MyEclipse 企业级工作 平台（ MyEclipse Enterprise Workbench ，简称 MyEclipse）是对 EclipseIDE 的扩展，利用它我们可以在数据库和 JavaEE 的开发，发布以及应用程序服务器的整合方面极大的提高工作效率。 它是功能丰富的 JavaEE 集成开发环境，包括了完备的编码，调试，测试和发布功能，完整支持 HTML， Struts， JSP，CSS， JavaScript， Spring， SQL， Hibernate。 MyEclipse[4]结构上的这种模块化，可以让我们在不影响其他模 块的情况下，对任一模块进行单独的扩展和升级。 简单而言， MyEclipse 是 Eclipse 的插件，也是一款功能强大的 JavaEE 集成开发环境，支持代码编写，配置，测试以及除错， MyEclipse6。 0 以前版本需先安装Eclipse。 MyEclipse6。 0 以后版本安装时不需安装 Eclipse。 (2) Dreamweare Dreamweare 是美国 MA CROMEDIA 公司开发的集网页制作和管 理网站于一身的所见即所得网页编辑器，它是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页 [5]。 使用网站地图可以快速制作网站雏形，设计，更新和重组网页。 改变网页位置或档案名称， Dreamweare 会自动更新所有链接。 使用支援文字， HTML 码， HTML属性标签和一般语法的搜寻及置换功能使得复杂的网站更新变得迅速又简单。 (3) Photoshop 8 Adobe Photoshop，简称“ PS”，是一个由 Adobe Systems 开发和发行的图像处理软件。 Photoshop 主要处理以像素所构成的数字图像。 使用其众多的编修与绘图工具，可以更有效的进行图片编辑工作。 在网站前端开发过程中需要把图片用 Photoshop处理成加载到网站页面的图片，用 Photoshop 制作矢量图形用作网站页面的修饰按钮。 前端开发相关技术 Java script 简介 Java script[6]的出现， 它可以使得信息和用户之间不仅只是一种显示和浏览的关系，而是实现了一种实时的，动态的，可交互式的表达能力。 从而基于 CGI 静态的 HTML 页面将被 可提供动态实时信息，并对客户操作进行反应的 Web 页面的取代。 Java script 脚本正是满足这种需求而产生的语言。 它深受广泛用户的喜爱和欢迎。 它是众多脚本语言中较为优秀的一种，它与 WWW 的结合有效地实现了网络计算和网络计算机的蓝图。 无疑 Java 家族将占领 Inter 网络的主导地位。 因此，尽快掌握 java script 脚本语言编程方法是我国广大用户日益关心的问题。 Java script 基本特点 (1) 基于对象的语言 java script 是一种基于对象的语言，同时也可以看作一种面 向对象的。 这意味着它能运用自己已经创建的对象。 因此，许多功能可以来自于脚本环境中对象的方法与脚本的相互作用 [7]。 (2) 简单性 java script 的简单性主要体现在：首先它是一种基于 Java 基本语句和控制流之上的简单而紧凑的设计， 从而对于学习 Java 是一种非常好的过渡。 其次它的变量类型是采用弱类型，并未使用严格的数据类型。 (3) 安全性 java script 是一种安全性语言，它不允许访问本地的硬盘，并不能将数据存入到服务器上，不允许对网络文档进行修改和删除，只能通过浏览器实 现信息浏览或动态交互。 从而有效地防止数据的丢失。 9 (4) 动态性 java script 是动态的，它可以直接对用户或客户输入做出响应，无须经过 Web服务程序。 它对用户的反映响应，是采用以事件驱动的方式进行的。 所谓事件驱动，就是指在主页 (Home Page)中执行了某种操作所产生的动作，就称为“事件” (Event)。 比如按下鼠标，移动窗口，选择菜单等都可以视为事件。 当事件发生后，可能会引起相应的事件响应。 CSS 简介 CSS[8] (层叠样式表 )是用来进行网页风格设计的，它简化并扩展了 HTML 中 的各种标记，使得各个标记的属性更具有一般性和通用性，大大提高了 HTML 开发的效率。 在制作网页时采用 CSS 技术 ，可以有效地对页面的布局，字体，颜色，背景和其他效果实现更加精确的控制，只要对相应的代码作一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。 什么是 CSS。 CSS 中， Cascading 是“层叠”的意思， 也就是说在同一个 Web 文档中可以有多个样式表存在，这些样式表根据所在的位置，拥有不同的优先级，优先级越高，就会在最后显示时被采用。 从样式表插入的形式看可以分为 3 种。 (1) 内联式样式表 ； (2) 嵌入式样式表 ； (3) 外部式样式表 ； CSS 的特点 CSS 是用来扩展 HTML 的，而不是用来替换 HTML 的，也就是说 CSS 不能脱离 HTML，它只是一项辅助工具。 除了可扩展 HTML 的样式设定外， CSS 使得网页的设计与维护更加高效，这主要表现在以下几个方面：减少图形文件的使用，集中管理样式信息，设定共享样式，将样式分类使用。 JQuery JQuery[9]是继 prototype 之后又一个优秀的 Javascript 框架。 其宗旨是 —— WRITE LESS， DO MORE，写更少的代码，做更多的事情。 它是轻量级的 js 库 (压缩后只 10 有 21k) ，这是其它的 js 库所不及的，它兼容 CSS3，还兼容各种浏览器 （ IE 6。 0+， FF 1。 5+， Safari 2。 0+， Opera 9。 0+）。 JQuery 是一个快速的，简洁的 JavaScript库，使用户能更方便地处理 HTML documents， events，实现动画效果。 jQuery 其模块化的使用方式使开发者可以很轻松的开发出功能强大的网页特效。 本文主要论述了如何在 Web 开发中使用 jQuery 技术，丰富网站的交互性和用户体验性 [10]。 jQuery是一套 Javascrip 脚本库。 Javascript 轻量级脚本库 系列文章。 Javascript脚本库类似于。 NET 的类库， 这些工具方法或对象方法封装在类库中，方便用户使用。 注意 jQuery 是脚本库， 而不是脚本框架。 库 不等于 框架 ， 比如 System 程序集 是类库，而 ASP .NET MVC是框架。 jQuery 并不能帮助我们解决脚本的引用管理和功能管理，这些都是脚本框架要做的事。 脚本库能够帮助完成编码逻辑 ，实现业务功 能。 使用 jQuery 将极大的提高编写 javascript 代码的效率，让写出来的代码更加优雅，更加健壮。 jQuery 有如下特点： (1) 提供了强大的功能函数 使用这些功能函数 ，能够帮助我们快速完成各种功能，而且会让我们的代码异常简洁。 (2) 解决浏览器兼容性问题 javascript 脚本在不同浏览器的兼容性一直是 Web 开发人员的噩梦，常常一个页面在 IE9， Firefox 下运行正常，在 IE6 下就出现莫名其妙的问题。 针对不同的浏览器编写不同的脚本是一件痛苦的事情。 有了 jQuery 我们将从这个噩梦中醒来 ， 比如在 jQuery 中的 Event 事件对象已经被格式化成所有浏览器通用的，从前要根据event 获取事件触发者，在 IE 下是。