个人网站的前端设计论文[5篇材料]

第一篇：个人网站的前端设计论文

摘要：个人网站是指因特网上一块固定的面向全世界发布消息的地方，个人网站由域名、程序和网站空间构成，通常包括主页和其他具有超链接文件的页面。人们可以通过网站来发布自己想要公开的资讯，或者利用网站来提供相关的网络服务。网站设计的好坏直接影响着网站的性能，本文针对个人博客网站设计谈了自己的体会。

【关键词】个人网站HTML5CSS3Javascript

随着互联网的发展，网络上的网站数量越来越多。个人网站的数量也与日俱增。一个好的网站不仅要保证有着良好的性能，同时页面的前端设计也得非常的优秀。一个良好的前端设计往往包含了合理的配色，清晰的页面结构，流畅的动画。随着个人网站的发展，也催生出来很多优秀的博客程序，比如：《WordPress》、《Typecho》等等。那么应如何设计个人网站的前端呢？

1设计语言

1.1HTML5

HTML5是HTML最新的修订版本，2014年10月由万维网联盟完成标准制定。目标是替换1999年所制定的HTML4.01和XHTML1.0标准，以及能在互联网应用迅速发展的时候，使网络标准达到匹配当代的网络需求。广义论及HTML5时，实际指的是包括HTML、CSS和JavaScript在内的一套技术组合。它希望能够减少网页浏览器对于需要插件的丰富性网络应用服务，例如：AdobeFlash、MicrosoftSilverlight与OracleJavaFX的需求，并且提供更多能有效加强网络应用的标准集。

1.2CSS3

层叠样式表（CSS），又称串样式列表、级联样式表、串接样式表、层叠样式表、阶层式样式表，一种用来为结构化文档添加样式的计算机语言，由W3C定义和维护。CSS3现在已被大部分现代浏览器支持。

CSS3分成了不同类别，称为“modules”。而每一个“modules”都有于CSS2中额外增加的功能，以及向后兼容。CSS3早于1999年已开始制订。直到2011年6月7日，CSS3ColorModule终于发布为W3CRecommendation。CSS3里增加了不少功能，如：“border-radius”、“text-shadow”等。

1.3JavaScript

一种高级编程语言，通过解释执行，是一门动态类型，面向对象的直译语言。它已经由ECMA通过ECMAScript实现语言的标准化。它被世界上的绝大多数网站所使用，也被世界主流浏览器支持。JavaScript是一门基于原型、函数先行的语言，是一门多范式的语言，它支持面向对象编程，命令式编程，以及函数式编程。它提供语法来操控文本，数组，日期以及正则表达式等，不支持I/O，比如网络，存储和图形等，但这些都可以由它的宿主环境提供支持。随着最新的HTML5和CSS3语言标准的推行它还可用于游戏、桌面和移动应用程序的开发和在服务器端网络环境运行。

2开发工具

SublimeText是一套跨平台的文本编辑器，支持基于Python的插件。SublimeText是专有软件，可通过包扩充本身的功能。大多数的包使用自由軟件授权发布，并由社区建置维护。SublimeText支持众多编程语言，并支持语法上色。

MozillaFirefox，中文俗称火狐，是一个自由及开源的网页浏览器，由Mozilla基金会及其子公司Mozilla公司开发。Firefox支持Windows、OSX及Linux，其移动版支持Android及FirefoxOS，这些版本的Firefox使用Gecko来排版网页，Gecko是一个运行当前与预期之网页标准的排版引擎，而在2015年发布的FirefoxforiOS则非使用Gecko。

3网站前端设计

3.1站点架构

首先确认了整体页面是由左右两个DIV组成，并提供一个按钮，可以按下后隐藏左边的DIV以达到只显示右边的DIV的正文的目的。为left和right两标签加上内容，并美化其页面。

3.2页面设计

作品页面主要用于存放一些作品的demo，所以设计成了几个div以格子的形式排列，并在上面能够显示作品的预览。整体的页面框架依旧沿用首页，以达到站点整体风格的统一和css的最佳化利用，并减少开发过程。

3.3加入动画，添加特效

例如显示悬浮到容器上的阴影渐变的效果如下：

给容器设置box-shadow属性，值为2px2px20px#909090；再给这个容器设置hover版本的css，设置为box-shadow：2px2px70px#707070；给容器设置transition属性，值为2s；

使用html默认支持hover属性来切换两套写好的css3阴影代码来实现阴影效果的切换，再使用transition属性设置动画的播放时间以达到更美观的效果。

3.4其他效果

例如使用了highlight.js，用于给生成的代码块添加高亮和排版效果。

4总结

总之，要使整个网站有个性化的体验，不仅要页面内容丰富，动画流畅，还需要有相关特效，让整体效果简洁大方美观，让人有耳目一新的感觉。

第二篇：个人网站设计论文

秦皇岛职业技术学院信息工程系

分类号： TP319

秦皇岛职业技术学院 课程设计（论文）

个人博客网页设计论文

学生姓专班指导教指导教师职名 王飞飞 业 计算机应用技术 级 1100103 师

称

目录

摘要 …………………………………………………………………………………2 前言 …………………………………………………………………………………3 第一章 关于网络的知识.............................................4

秦皇岛职业技术学院信息工程系

1.1 INTERNET的简介.................................................4 1.2 WWW的简介....................................................4 1.3网页基本构成元素..............................................5 1.4 制作网页前的准备..............................................5 第二章 网站制作实战...............................................6 2.1 站点..........................................................6 2.1.1 创建站点..................................................6 2.1.2 创建站点内容..............................................6 2.2 首页..........................................................7 2.2.1 设置首页布局和页面属性....................................7 2.2.2 查看和编辑头内容..........................................9 2.2.3 插入图像..................................................9 2.2.4 插入FLASH相册...........................................10 2.2.5 插入文本.................................................10 2.3 创建其它网页.................................................11 第三章 建立网页链接..............................................12 3.1 文字链接.....................................................12 3.2 图像链接.....................................................13 3.3在HTML语言中建立网页链接....................................14 第四章 网站测试与维护 …………………………………………………………17 结论………………………………………………………………………………18 参考文献 ……………………………………………………………………… 19 致谢………………………………………………………………………………20

摘 要

本论文主要是对个人网站的建立进行研究和探讨。作品的主要技术指标包括：

1、制作出一个具有静态技术的“个人网站”；

2、在制作的过程中，加强和 1

秦皇岛职业技术学院信息工程系

深化以前所学的关于网页设计的方法，同时更好的理解参考资料上的方法、理论和更好的利用Fireworks、Flash制作网站需要的一些图片和影片。

本设计的主要内容包括：

1、个人网站的设计思想，整体规划及相关基础知识；

2、个人网站的首页设计，包括简单的HTML语言及效果图；

3、个人网站的调试。

网页规划包含的内容很多，如网页的结构、栏目的设置、网页的风格、颜色搭配、版面布局、文字图片的运用等，也只有如此制作出来的网页才能有个性、有特色，具有吸引力。

网站主题就是所要包含的主要内容，一个网站必须要有一个明确的主题。特别是对于个人网站，不可能像单独的网页那样做得内容少而单一。所以必须要找准一些自己最感兴趣内容，做深、做透，办出自己的特色，这样才能给人留下深刻的印象。

关键词：技术指标

基本设计内容

网站规划 网站主题

前言

随着二十一世纪新兴科技的飞速发展，如今的交流与交往不再是那么的单调，看如今不曾再有五百里加急文件的传送，看如今已很少在出现写信、寄信。人们正在运用现世纪的高科技来增加自己的交际圈，来发展自己的人脉关系，秦皇岛职业技术学院信息工程系

同时，其它人也是通过高科技，悄悄的就能很容易地去了解，关注一个人。

正是因为人们的这些需求，所以出现了互联网，正是因为人们的需求，所以出现了如今的网络时代，网络通讯工具。来方便人们的交往，交际与沟通。也正是因为人们的需求，所以出现了个人博客，通过一人简单的网页来展现自己的独特魅力，自己的与众不同。真正的做到了“足不出户，便知天下人”。

互联网加大了我们了解世界的眼界，缩紧了人与人之间的距离，这就更容易的使我们走上了信息化的道路。

我觉得一个网站的开始，应该有一个大体的规划，网站的布局是最重要的，它起着一个网站成功与否的决定性作用，因为布局的好与坏，带来的是网站整体上的美观效果及应用。网站内容上也能决定着网站成功与否，一个网站上的每个字眼都可能决定着这个网站，因为你不知道哪个字就是吸引别人的内容，就是大家都追捧的话题，就是很潮的事物，所以内容上一定要谨慎。再有，就是网站的图片，一定要确准好路径，以免图像的丢失而不能再网站中显示，其次就是链接，在Dreamweaver中提供了很简单的链接命令，根据其提示操作即可。

我做了一个简单的个人博客的网站，通过这个网站能让大家更深的了解我，同时更重要的是锻炼自己的实践能力，巩固自己学习的知识，弥补自己学习的不足。

第一章 关于网络的知识

1.1什么是Internet Internet是由众多的计算机网络互联而成的互联网，它覆盖了全世界各地，3

秦皇岛职业技术学院信息工程系

它是采用开放系统协议的计算机通讯网络。然而，Internet不仅仅是计算机的互联网，它还是全球最大的信息资源宝库，它提供了包括科研、教育、文化娱乐、商业和信息交流等各种各样的服务，使得世界范围内的人与人之间的交流在时间和空间上变的更小了。

Web页浏览：这是目前利用最广泛、最直接的互联网服务，通过浏览WWW（万维网）中的网页，可以了解世界各地的新闻，查看最新的股市行情，最新的娱乐动态、科技发明，找到众多的就业信息„„几乎想找到什么样的信息，就有什么信息。正是有了WWW、Internet才会变得如此丰富多彩，才能走进千家万户。1.2 WWW的简介

WWW的全称为World Wide Web，含义是“环球网”，又称“万维网”、3W、Web。WWW是一个基于超文本（Hypertext）方式的信息检索服务工具。我们上网浏览到的网页就是这样的超文本，也就是HTML(Hypertext Mark-up Language,超文本标记语言)文件，这些网页檔被放置到WWW服务器上，并且都有一定的地址。当我们想浏览某个网站时，首先要在计算机上安装浏览器，如

Internet Explorer或Netscape，然后在浏览器中输入网站的地址（网址），就可以进入网站进行浏览。在这些网页中，都有超连接，当将鼠标指针移动到某个地方（如文本或图像）时，鼠标指针就会变成一个小手形形状，单击它就可以连接到另个网页中，从而使得浏览者能在不同的信息之间动画和声音等信息。通跳转，我们之所以能在Internet的海洋中穿梭自如，正是超连接的功劳。

秦皇岛职业技术学院信息工程系

1.3网页基本构成元素

要学会制作网页，首先需要了解网页都是由什么元素构成的。文字：文本是构成网页的基本元素。一个最简单的网页可以只有几行文本。图片：正是有个各种美丽的图片，网页才变得多姿多彩。动画：如今，网页上的动画越来越多，最常用的有GIF动画、Flash动画等。超连接：如上所述，超连接几乎是必不可少的。一个没有超连接的网页，就如同汪洋大海中的一座孤岛，失去了与外界的一切联系。其它元素：还可以在网页中添加声音、视频等元素。1.4 制作网页前的准备

计算机必备：计算机速度够快，最好能够上网。操作系统：Windows 98/NT/Me/2000/XP.其它软件：看图软件ACDSee、图像处理软件Photoshop、上传工具CuteFTP、Fireworks、动画软件Flash等。

秦皇岛职业技术学院信息工程系

第二章 网站制作实战

2.1 站点 2.1.1 创建站点

要制作一个网站，第一步操作都是一样的，就是要创造一个“站点”，从菜单中选择“站点/管理站点”在弹出的对话框中选择“新建”，之后再选择其中的“站点”，再次弹出一个对话框，在文本框中输入自己已经企化好的网站名称“my web”。填好后，单击“下一步”，进入下一个步骤。由于我要做的是一个静态的网页，所以选择上面的一项“否，我不想使用服务器技术。单击“下一步”，进入下一个步骤。在此选项中有两个选择，选择推荐的“编辑我的计算机上的本地副本，完成后再上传到服务器”。底下的文本框允许在本地磁盘上指定一个文件夹，Dreamweaver将在其中储存站点檔的本地副本。单击该文本框后面的文件夹图示，之后单击“下一步“，进入下一个步骤。这一步是如何设置连接到远程服务器，弹出式菜单中有6中选择，这里选择“无”。而后“下一步”再“完成”，即可。2.1.2 创建站点内容

站点创建完成后，就可以创建Web页来填充站点了。在“右侧浮动面板组”中选择“檔/檔”面板，在弹出的菜单中选择“新建文件”，新建一个档后将其命名为“index.htm(或index.html),它就是未来的首页。

秦皇岛职业技术学院信息工程系

2.2 首页

2.2.1 设置首页布局和页面属性

一、设置首页布局

每个网站都会有一个首页，就功能上而言，它代表着一个网站的风格与特色，就网站架构上而言，它代表了网站的第一层架构，首页是打开网站后在浏览器中显示的第一个页面。它是起什么名字通常要视Server端的设置，一般的有index.htm,default.htm或home.htm等，目前主要以index.htm的居多。当然，后缀名为html也是正确的。具体设置方法是：右健单击“檔”浮动面板中的index.htm,在弹出的菜单中选择“设成首页”。操作步骤：

1、在“插入快捷栏”的“布局”分类中，单击“布局表格”按纽。

2、将变成“+”形状的鼠标游标放到编辑中网页上，在要绘制的地方进行拖动就可以进行创建了。（如果绘制的是第一个表格必须从网页的最左上角开始绘制）。“index”表格布局如下图：

秦皇岛职业技术学院信息工程系

二、设置首页的页面属性

首先双击“檔”浮动面板中的index.htm,进入页面的编辑窗口。右健单击空白区域，在菜单中选择“页面属性”，之后弹出“页面属性”对话框，若选择主菜单“修改/页面属性”项，也可以把打开该对话框。

在“页面属性”对话框中，左侧窗口显示“分类”，其中包括了“外观”、“链接”、“标题”、“标题/编码”、“跟踪图像”5项，右侧区域则显示各类中可以设置的项目

“index”首页设置的属性如下图所示：

秦皇岛职业技术学院信息工程系

2.2.2 查看和编辑头内容

一个网页文件结构上实际是由两部分组成，头（head）内容和主体（body）内容主体内容（body）是文檔的主要部分，也是包含文本和图像等的可见部分。头内容（head）是除文檔标题外的不可见部分，包含有文文件类型、语言编码、搜索引擎的关键的关键词和内容指示器以及样式定义等重要信息，这些元器并不是每个页面都需要的，例如，可以仅为主页提供关键词。2.2.3 插入图像

图像是网页中不可或缺的组成成份，恰当地使用图像，可以使网站充满生活生命力与说服力，吸引更多的浏览者，加深他们欣赏你网站的意愿。首先将游标停留在要插入图像的位置，然后单击“菜单栏”下面“插入快健栏”的下拉表，选择其中的“常用”类，则右侧将会显示该类中可以插入的对象快键按钮。左起第5个即为“图像：图像”按钮，单击它右侧的下拉列表，选择第1项“图像”。随即弹出“选择图像源文件”对话框。从计算机磁盘中选择想要插入的图像文件，下面的“相对于”下拉表框中，可选择文件URL地址的类型，插入logo图像，如图所示:

秦皇岛职业技术学院信息工程系

最后单击“确定”按钮，即可完成插入图像的操作。2.2.4 插入FLASH相册

在Dreamweaver 8中，除了之前讲到的可以插入“图像”外，还可插入动画、声音、视频，FLASH相册等媒体元素，并且还可以在Dreamweaver自身内插入Macromedia Flash MX2004按钮和文本对象，以及进行相关的后期处理和添加设计备注等操作。在Dreamweaver 8文文件中，可以插入媒体文件包Flash 相册、QuickTime、AVI java、applet Active X控件以及各种格式的音频档。要在浏览器中播放放Flash 相册，必须在浏览器中集成“Flash 播放器（Flash Player）”。操场作步骤：

步骤1、将游标停留在要插入Flash的位置，然后单击菜单栏下面“插入”的下拉列表，选择其中的“FLASH”分类，找到图像查看器命令，单击弹出保存对话框，选择要保存的地方和名称，点击保存。

步骤

2、在Dreamweaver中将会产生一个flash相册，在Dreamweaver中的最右边将会有一个flash元素，一次将flash的属性修改，既可完成一个flash相册的制作。2.2.5 插入文本

文字是人类语言最基本的表达方式，在网页中，文本内容也可以说是重要的组成部分，它是最关键的因素。插入文本的两种方式：一种是在网页编辑窗口中直接用键盘敲入文本。另一种是复制文本的方式。直接使用Dreamweaver的文本复制功能，将大段的文本内容拷贝到网页的编辑窗口来进行排版的工作，10

秦皇岛职业技术学院信息工程系

具体步骤如下：打开文本编辑软件（如Microsoft Word），选中要复制的文本，它们将反白显示，执行菜单“编辑/复制”命令或直接用快捷键Ctrl+C，之后切换回Dreamweaver,将游标停留在插入文本的位置，执行主菜单“编辑/粘贴”命令或直接使用快捷键Ctrl+v,即可将大段的文本快速粘贴到网页中。这在我的“闲情逸致”中用到很多。2.3 创建其它网页

还有其它的几个网站与主页的制作相同，一个网页是图像和文字的组合。“相册”子页中的FLASH相册的插入和前面的介绍相同。

秦皇岛职业技术学院信息工程系

第三章 建立网页链接

网站实际上是由很多网页组成的，那么网页之间是如何联系的呢？这就是本章要讲的内容----网页的“链接”。“链接”，又称“超链接"（Hyperlink）,它作为网页的桥梁。网页中的很多对象都可以加入“链接”属性。在Dreamweaver 8中，如果以“链接”的媒介来划分的话，则“链接”可以分为“文字链接”、“图像链接”、“图像地图链接”、“内部链接和外部链接”、“E-mail链接”、“命名锚记链接”、“文件下载链接”和“跳转菜单”，共8种。3.1 文字链接

“文字链接”即以文字作为媒介的链接，它是网页中最常被使用的链接方式，具有“文件小、制作简单和便于维护”的特点。接下来结合我的个人网站为实例，来讲解如何为文字建立“链接”。操作步骤：

步骤1、准备好已经制作完成的首页的各个栏目页面

步骤

2、在Dreamweaver 中打开首页，之后反白选取作为“链接”的文字。步骤

3、观察“属性面板”，其中包括一个“链接”文本框。步骤

4、接下来需要把链接的位址加入到文本框中。

步骤

5、在“链接”文本框下面还有一个“目标”下拉列表，从中可以选择链接网页显示的窗口方式，共有4种。如图：

步骤

6、还可以设置一些“链接”的属性，单击“属性面板”中的“页面 12

秦皇岛职业技术学院信息工程系

属性”，选择其中的“链接”分类，可以进行的设置有“链接字体”、“大小”、“链接颜色”、“变换图像链接”颜色、“已访问链接”颜色、“活动链接”颜色及“下划线样式”。

步骤

7、至此，第1个栏目的链接就制作完毕了，按下Ctrl+S保存网页，再按下F12预览，测试一下，当鼠标放在“放松心情”这4个文字上时将变成手形，并且浏览器窗口下面的状态区中会显示链接到的网页的位址，单击文字，页面会立即跳转到第1个栏目中，这表示链接已经制作成功了。

步骤

8、同理，按照以上步骤，再为“闲情逸致”和“个人主页”等其它栏制作指向对应栏目的链接。

至此，整个“文字链接”的实例就全就全部完成了。3.2 图像链接

“图像”也是常被使用的链接媒体，它和“文字链接”非常相似。为图像加入链接，首先应该在网页中插入“图像”，有关插入“图像”或“导航条”按钮的内容，接下来以我的网站“my web“为例，讲解如何建立“图像链接”。操作步骤：

步骤

1、首先仍然要准备好已经制作完成的首页和各个栏目的页面 步骤

2、在Dreamweaver中打开网站的首页，之后选取要制作“链接”的图像。

步骤

3、观察“属性面板”，在“链接”文本框中输入链接的文字位址。步骤

4、如果有需要，可以在“目标”下拉列表中选择“链接”网页显示 13

秦皇岛职业技术学院信息工程系 的窗口方式，分别为-blank、-parent、-self或-top。

步骤

5、至此，第1个栏目的图像链接就制作完毕了，按下Ctrl+S保存网页，再按下F12预览，测试一下，将鼠标放在“动画制作”4个文字上时将变成手形，同时浏览器窗口下面的状态区中会显示出链接到的网页的地址，并且会显示出“替代”文本“动画制作”，单击文字，页面会立即跳转到第3个栏目中，这表示链接已经制作成功了。

步骤

6、同理，按照以上步骤，再为其它几幅图像制作指向对应栏目的链接。

步骤

7、在栏目页面中制作“返回首页”的链接，使得单击后可以跳转回首页。

至此，整个“图像链像”的实例就全部完成了。3.3在HTML语言中建立网页链接

一、文字链接

在HTML语言中用超链接标记指向一个目标。其基本格式为：举个简单的“文本链接”的实例，该实例相对应的HTML代码如下所示。

a href-“index2.html”target=”-blank”>平面设计（新开窗口，-blank)

相册（原窗口，默认为空）

留言

第三篇：网站前端设计 毕业论文

本科毕业设计（论文）

题 目: 学 院：专业班级：姓 名：指导教师：系 主 任：

数字媒体技术系网站前端设计与开发 学 号：

学院院长： 二O一三年月日

毕业设计(论文)诚信声明

我谨在此保证：本人所写的毕业设计(论文)，凡引用他人的研究成果均已在参考文献或注释中列出。设计(论文)主体均由本人独立完成，没有抄袭、剽窃他人已经发表或未发表的研究成果行为。如出现以上违反知识产权的情况，本人愿意承担相应的责任。

声明人(签名)：

****年**月**日

摘 要

21世纪是信息高速发达的时代，网络作为当今最流行最方便快捷的媒介也越来越被人们接受，并且融入我们的生活。随着高校信息化建设的不断推进，网站的作用超越了传统的信息获取，交流它更能体现组织机构的风采，性质。所以高校院系建立本院系美观，专业，易于维护管理的网站已经势在必行。

本论文主要围绕数字媒体技术专业的门户网站为开发主题，最基本也是最必须的三个技能。前端的开发中，在页面的布局时，HTML将元素进行定义，CSS对展示的元素进行定位，再通过JavaScript实现相应的效果和交互。虽然表面看起来这些很简单，但这里面需要掌握的东西绝对不会少。在进行开发前，需要对这些概念弄清楚，弄明白，这样在开发的过程中才会得心应手。

分析并解决实现中的若干技术问题；介绍了个性化页面的背景及jsp + javascript + mysql系统的一般原理；阐述整个个性化页面生成系统的系统结构及工作原理；分析了系统实现中的特殊性，难点和重点；设计实现用户注册，用户登录，用户管理等jsp页面。分析并解决实现中的若干技术问题；建立完整的校园网站，进行测试并分析结果。

该网站有效地实现用户通过JSP页面访问来进行用户注册，登陆，并对网站内容进行有效的管理，提升了后期添加和删除信息的有效性，具有一定的应用价值

关键字：JSP；用户登录；javascript；网站美化；交互设计。

ABSTRACT

The twenty-first Century is the rapid development of information age, network as the world's most popular and most convenient media are increasingly accepted by people.Along with the information development, website functions beyond the traditional information acquisition, communication which can better reflect the organization style，properties.So universities establish the departments, professional appearance, easy maintenance and management of the site has been imperative.This thesis mainly focuses on digital media technology major portal for the development of the theme, the three most basic and necessary skills.Development of the front, in the layout of the page, HTML will define the elements, positioning CSS to display elements, and then through the JavaScript to achieve the corresponding effect and interaction.Although the surface looks like these are very simple, but it needs to grasp things never.In the development, the need for these concepts clear, understand, so in the development process will be handy.The main work done in this article is as follows:(1)Introduces the background and general principle of JSP + Javascript + MySQL system personalized pages;(2)Introduces the structure and working principle of the entire personalization page production system;analysis of the particularity, the difficulty and key system;(3)The design and implementation of user registration, user login, user management and other JSP page.(4)Analyze and solve some technical problems in implementation;(5)The establishment of a complete campus site, testing and analysis;

The site effectively achieve the user through the JSP page access to user registration, login, and carry on effective management to the website content, enhance the effectiveness of the late addition and deletion of information, has a certain application value.Keywords：JSP;User login;JavaScript;Website Landscaping;Interaction Design

目 录

摘 要 ABSTRACT

第1章 绪论...........................................................1

1.1 选题背景及意义............................................................................................................1 1.2 国内外高校网站建设状况..............................................................................................3 1.3 研究内容和拟解决的问题..............................................................................................5 1.4 本章小结......................................................................................................................6

第2章 前端开发工具及相关技术.........................................7

2.1 前端开发环境...............................................................................................................7 2.2 前端开发工具...............................................................................................................7 2.3 前端开发相关技术........................................................................................................8 2.3.1 Java script 简介.......................................................................................................8 2.3.2 Java script 基本特点................................................................................................8 2.3.3 CSS 简介...............................................................................................................9 2.3.4 JQuery..................................................................................................................9 2.4 本章小结....................................................................................................................11

第3章 前端布局分析与设计............................................12

3.1 前端总体开发流程及设计............................................................................................12 3.1.1 分层开发..............................................................................................................12 3.1.2 代码编写..............................................................................................................12 3.1.3 内部测试与后续优化............................................................................................13 3.2 前端UI设计...............................................................................................................14 3.2.1 模块分布..............................................................................................................14 3.2.2 颜色配置..............................................................................................................15

I

3.2.3 CSS元素..............................................................................................................16 3.3 交互设计与UI............................................................................................................17 3.4 点，线，面的运用......................................................................................................18 3.4.1 点的运用..............................................................................................................18 3.4.2 线的运用..............................................................................................................19 3.5 网站结构布局及设计...................................................................................................19 3.5.1 网站首页结构.......................................................................................................19 3.5.2 主题鲜明，富有特色............................................................................................20 3.5.3 版式编排布局合理性............................................................................................21 3.6 网站前台页面设计......................................................................................................22 3.6.1 首页.....................................................................................................................22 3.6.2 系内概况..............................................................................................................23 3.6.3 系内新闻..............................................................................................................23 3.7 本章小结....................................................................................................................23

第4章 主要功能的实现................................................23

4.1 界面设计....................................................................................................................23 4.2 具体设计文档.............................................................................................................24 4.3 前台新闻文摘显示......................................................................................................24 4.3.1 网站装饰风格.......................................................................................................24 4.3.2 网站的链接结构...................................................................................................25 4.4 可视化设计.................................................................................................................25 4.5 具体实现技术.............................................................................................................25 4.5.1 CSS在“数字媒体技术系网站”中的应用实例...........................................................25 4.5.2 应用JavaScript设计网页......................................................................................26 4.6 本章小结....................................................................................................................28

II

第5章 总结.........................................................29 参考文献..............................................................30 致谢..................................................................32

第1章 绪论

1.1 选题背景及意义

如今的互联网已经渗透到我们生活的每一个层面，网站的内容越来越丰富全面，以此来满足了各种不同需求的浏览者。网站的作用众所周知人们通过网站快速获取，发布和传递信息。

目前很多高校建立起了自己的网站这些网站的建立使得学校可以突破传统的媒体的限制在网络上开辟的属于自己的新天地。网络具有超时空性。网络超时空性是一种“一人对一人，一人对多人，多人对一人，多人对多人”的传播方式[1]。超时空性的形成正式由于在网络在时间层面，空间层面上的开放性带来的。网络的超时空性使得高校网站对学校本身和外界社会表现特定的功能，表现在网站有助于改变教育资源的分散性和分布不均衡性，有效的将教育资源进行整合，从而使得教育资源使用意义上的无限增长。网络具有的海量存储特性，网络能形成一个巨大无比的数据库，世界上任何时间任何地点的任何一件事都能成为网络的信息被广泛传播。

高校网站的海量存储特性可以从横向和纵向两方面分析：横向看高校网站往往设置多个板块，分别放置相关内容。不同板块的信息相互独立，共同构成网站的内容。纵向看，同一个板块的内部，内容并不是固定不变的，而是不断添加连续更新的。大量的信息使得高校网站成为一个巨大的数据库。

交互性体现在高校网站通过设置留言板，论坛，发挥网络交互的功能，在老师和学生之间建立起了交流渠道。

高校网站正是以这些特点为基础，发挥了自己本身的资源整合，信息传播，多方交流互动等方面的独特功能，成为一座沟通桥梁。

很多高校网站内容多姿多彩，板块，内容争妍斗艳。但不外乎以一下几部分：学校介绍，新闻发布，招生信息，就业信息，师资力量，科研成果，机构设置，教学素材等。高校网站的建立和维护需要大量的物力和人力，为何要投入去建网站上？是因为如上所述的高校网站有的独特特性使得建设高校网站势在必行。

这些都促进了各个机构组织的信息化建设，随着高校信息化建设的不断推进，网站的作用超越了传统的信息获取，交流它更能体现组织机构的风采，性质。所以高校院系建立本院系美观，专业，易于维护管理的网站。

我们要创建我们本专业的网站数字媒体技术系的专业网站，网站前端设计最基本的三个技能：HTML，CSS，JavaScript，PS 矢量图像编辑技术。这个是前端开发中最基本也是最 必须的三个技能。前端的开发中，在页面的布局时，HTML将元素进行定义，CSS对展示的元素进行定位，再通过JavaScript实现相应的效果和交互。虽然表面看起来这些很简单，但这里面需要掌握的东西绝对不会少。在进行开发前，需要对这些概念弄清楚，弄明白，这样在开发的过程中才会得心应手。

建立本系网站发挥的作用如下：

(1)数字媒体技术系网站是数字媒体专业的“商标”。在这个高度信息化的社会里，建立数字媒体技术系自己的网站是最直接的宣传手端。网站的超时空特性，不仅能让本地区的人们了解学院，更可让世界了解本专业。

(2)数字媒体技术系网站巨大的教育资源，网站是实现教育资源分配的桥梁，它使每一位教师和学生都能均等的得到培训和受教育的机会，能极大的提高教学效率。

(3)数字媒体技术系网站能提供教学互动的全新方式，网站使得教师与教师，教师与学生，学生与学生之间的交流有了全新的方式，它不再受到传统课堂的制约。它可以使不同的学院同处一室，共同讨论，共同提高。地理上的界限在这里模糊和消失了，数字媒体技术系网站是真正没有围墙的系网站。

(4)数字媒体技术系网站能够提供个性化的学习的平台，不同的学生理解世界的方式各不相同，认知世界有诸多方式。网络提供的丰富资源可以使学生寻觅不同的教育方式，各取所需。数字媒体技术系网站允许不同的学生沿着自己的途径，按自己的速度接受教育与学习，学生将有机会享受最佳的教育机会，充分发掘自己的内在潜力，培植独特的个性和人格。

(5)数字媒体技术系网站是最佳的教学研究室，数字媒体技术系网站与教育类专门网站的有效链接，给本系教学研究带来了一片新天地，各种优秀教案，专家论坛，网络观摩课，各科素材，多媒体课件制作等内容为教师教研提供了极佳的平台。有效地降低教研成本，提高效率。

1.2 国内外高校网站建设状况

国外的专题院校网站的学习资源比较丰富，交互性和学习支持服务做得都比较好，但是活动组织形式比较单一。

英国的学习网站建设得比较完备，无论从资源建设方面，还是从学习支持服务等方面都做得较好，商业性比较强。

加拿大学习网站的网络学习导航做得比较形象，趣味性较强，分类明确，专题资源集中。

高校门户网站的访问量，一定程度上反映了各高校的信息化程度和水平。关于高校门户网站访问排名，有不少网站提供相关的服务。总体来说，国内的各排名口碑评价不一，而“访问流量监控”类的排名也会受到诸多因素干扰，不容易作为客观评价网站的依据。具体如下表1-1所示[2]：

表1-1中国高校网站综合排名表

排 名 中文名称 世界排名 网站信息量世界信息影响力世 数字资料档案数

排名

界排名

量世界排名

学术文章发表情况世界排名 2 清华大学 上海交通大学 77 101

439 41

282

162 238

3 北京大学 122 385 105 591 76 4 5 6 7 8 9 浙大 复旦大学 山东大学 哈工大 武汉大学 中科大 182 256 264 292 350 357 363

202 868 253 706 272 873 455

287 234 328 102 203 581 706

649 608 656 1797 1915 605 437

187 312 239 335 184 309 10 吉林大学

国外的高校网站部分国际知名大学如哈佛大学（http://www。harvard。edu/）排名第一，PRESENCE 网站信息量世界排名第6，IMPACT 网站信息影响力世界排名第1，OPENNESS 数字资料档案数量世界排名第34，EXCELLENCE 学术文章发表

情况世界排名第1；

麻省理工学院（http://www.mit.edu/）排名第2，PRESENCE 网站信息量世界排名第8，IMPACT 网站信息影响力世界排名第1，OPENNESS 数字资料档案数量世界排名第14，EXCELLENCE 学术文章发表情况世界排名第10；

耶鲁大学（http://www.yale.edu/）排名第16，PRESENCE 网站信息量世界排名第27，IMPACT 网站信息影响力世界排名第16，OPENNESS 数字资料档案数量世界排名第246，EXCELLENCE 学术文章发表情况世界排名第22；

剑桥大学（http://www.cam.ac.uk/）排名第20，PRESENCE 网站信息量世界排名第43，IMPACT 网站信息影响力世界排名第35，OPENNESS 数字资料档案数量世界排名第94，EXCELLENCE 学术文章发表情况世界排名第12；

牛津大学（http://www.ox.ac.uk/）排名第25，PRESENCE 网站信息量世界排名第109，IMPACT 网站信息影响力世界排名第37，OPENNESS 数字资料档案数量世界排名第64，EXCELLENCE 学术文章发表情况世界排名第13；

东京大学（http://www.u-tokyo.ac.jp/）排名第42，PRESENCE 网站信息量世界排名第96，IMPACT 网站信息影响力世界排名第103，OPENNESS 数字资料档案数量世界排名第52，EXCELLENCE 学术文章发表情况世界排名第20；

从网站建设情况来看，国内关于校园网站建设较多，虽然起步较国外晚，但是发展的速度很快，我国高校网站的建设还有很多不尽如人意的地方，其主要在于网站互动性的缺失，内容方面没有国外院校网站那么多，是因为国内采取的形式较国外的不同。在创新方面比较欠缺，交互性的形式少。问题主要体现在这几个方面：

(1)缺乏组织协调，各部门各自为政。由于网络内容建设工作几乎全部下放到各部门，长期以来基本上一直处于一种各自为政的状态。各部门的网页风格迥异，都有各自不同的做法，不能做到统一。这样做出来的网页形形色色，拼凑成一个个学院，处室网站，显得很不协调。有必要加强组织协调工作，详细规划，明确分工，制定出相应的标准，彻底摒弃网站建设中的随意性。

(2)内容单薄，更新滞后。内容单薄可以说是很大的硬伤。各部门名义上都有了自己的网站，但大多数部门网站能够提供浏览的内容非常有限，特别是深层次的内容严重缺乏。另外，网上内容严重滞后，更新速度慢。有些部门的网站，时隔一年半载，其网页界面和内容仍是老样子。

(3)重点失衡:重行政管理，轻教学科研。校园网最主要的功能应该是要为教学，科研服务。但有些校园网上的内容有关行政管理的偏多，而有关教学和科研的内容则相对较少。作为一个高校网站，这不能不说是重点失衡，本末倒置。

(4)整个网站结构，层次不够清晰，使用不便。目前某些校园网首页的栏目设计太过粗略，有些内容欠缺，部分栏目名称及内容归类不够准确，整个结构显得有些混乱，结构层次偏深，用户需经过多次点击才能看到想要的内容。

(5)部分网页制作粗糙，缺乏美感。高校网站，其页面应简洁明了，一方面不要过于呆板，另一方面也要避免过于花哨，做到实用与美观的有机结合。

(6)缺乏检索途径。

传播学领域“互动性”研究的理论，为检视当前我国高校网站之发展提供了一个可操作化的设计架构。“互动性”的内涵做进一步分析，对我国高校网站的建设做一浅探，以增强人们关于互联网传播机制的认知和理解，并推进我国高校网站的在“交互性”方面的建设。

1.3 研究内容和拟解决的问题

有多种方法会让一个网站的外观令人惊叹的。在创建时也有不同的设计趋势。由于网站是由他们的业务与其他很多人用来获取信息的途径，所以很重要的设计是很有吸引力的。长期面对一个设计不当的网站是一件比较痛苦的事情。一旦我们拥有了一个网站之后，我们会一定会看到它拥有专业的设计，它可以实现我们的目的。

(1)排版

创造性使用排版已被广泛的应用于网页设计排版中。这些好的设计不只是使用的标准字体，而加上其使用自定义的字体。它使网站更具有可读性和吸引力。创造性地使用这种类型的方式确实可以有效的使用户可以立即得到该网站的新消息，特别是使用的字体是独一无二的，颜色是比较突出的。

(2)图片的切换效果研究

大图的使用也是一种趋势。这些图像是网站增加吸引力的网。虽然，已被使用过，但是现今它仍然在使用，使用它更具有现代感。使用这种设计的，设计出的网站也是比较抢眼的，特别是如果你有一个好的图片选择，不只是图像的形式，它应该与其网站更好的搭配。

(3)单页布局的设计

可避免不必要的网页，通过一个比较单一的页面布局，这是更有效的一个网站，因为浏览者可以更专注于其内容。

(4)交互性

做一个完整的网站有几样任务要完成比如复杂的交互功能，网页动画特效，网页UI设计，后期维护，可扩展性等。

网站交互设计的用户的目的是增加网站的友好度，可用性和易用性，从而使用户能够简单，快速和有效地完成网站赋予或用户自身需要的服务，功能和目标。

交互设计包含的内容：

界面设计，界面不仅设计美术方面，还涉及提供给用户某些事的能力。导航设计，导航设计是提供给用户去某个地方的能力，是用户能看到的网站结构。

信息设计，信息设计就是通过网站传达给用户某些信息，用户可通过这些信息了解自己正在进行的某些事和应该如何进行某些事。

1.4 本章小结

本章阐述了开发数字媒体技术系网站的研究背景和意义。介绍了国外高校网站的发展现状对比了目前国内高校网站的现况了说明了建设数字媒体技术系网站建设的总体规划思想。最后对于本文课题的研究内容和拟定解决的几个关键问题进行了探讨。

第2章 前端开发工具及相关技术

2.1 前端开发环境

网站前端开发，即网页架构设计。主要是由与交互设计，视觉设计的配合，根据效果图来规划页面布局，合理部署页面代码层次，挖掘用户体验效果。用Dreamweare，CSS，JS等布局网页内容，制作静态页面，这些页面要兼容各主流浏览器，并配合程序完成静态页面与后台程序的整合工作。另外，要对网站做一些相应的更新，维护及优化。整个网站开发的流程在后面有具体介绍。前端开发在整个过程中占据着不可替代的地位，其它几个环节主要给予相关的配合[3]。

2.2 前端开发工具

(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是美国MACROMEDIA公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器，它是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页[5]。

使用网站地图可以快速制作网站雏形，设计，更新和重组网页。改变网页位置或档案名称，Dreamweare 会自动更新所有链接。使用支援文字，HTML码，HTML属性标签和一般语法的搜寻及置换功能使得复杂的网站更新变得迅速又简单。

(3)

Photoshop

Adobe Photoshop，简称“PS”，是一个由Adobe Systems开发和发行的图像处理软件。Photoshop主要处理以像素所构成的数字图像。使用其众多的编修与绘图工具，可以更有效的进行图片编辑工作。

在网站前端开发过程中需要把图片用Photoshop处理成加载到网站页面的图片，用Photoshop 制作矢量图形用作网站页面的修饰按钮。

2.3 前端开发相关技术

2.3.1

Java script 简介

Java script[6]的出现，它可以使得信息和用户之间不仅只是一种显示和浏览的关系，而是实现了一种实时的，动态的，可交互式的表达能力。从而基于CGI静态的HTML页面将被可提供动态实时信息，并对客户操作进行反应的Web页面的取代。Java script脚本正是满足这种需求而产生的语言。它深受广泛用户的喜爱和欢迎。它是众多脚本语言中较为优秀的一种，它与WWW的结合有效地实现了网络计算和网络计算机的蓝图。无疑Java家族将占领Internet网络的主导地位。因此，尽快掌握java script脚本语言编程方法是我国广大用户日益关心的问题。2.3.2

Java script 基本特点

(1)基于对象的语言

java script是一种基于对象的语言，同时也可以看作一种面向对象的。这意味着它能运用自己已经创建的对象。因此，许多功能可以来自于脚本环境中对象的方法与脚本的相互作用[7]。

(2)简单性

java script的简单性主要体现在：首先它是一种基于Java基本语句和控制流之上的简单而紧凑的设计，从而对于学习Java是一种非常好的过渡。其次它的变量类型是采用弱类型，并未使用严格的数据类型。

(3)安全性

java script是一种安全性语言，它不允许访问本地的硬盘，并不能将数据存入到服务器上，不允许对网络文档进行修改和删除，只能通过浏览器实现信息浏览或动态交互。从而有效地防止数据的丢失。

(4)动态性

java script是动态的，它可以直接对用户或客户输入做出响应，无须经过Web服务程序。它对用户的反映响应，是采用以事件驱动的方式进行的。所谓事件驱动，就是指在主页(Home Page)中执行了某种操作所产生的动作，就称为“事件”(Event)。比如按下鼠标，移动窗口，选择菜单等都可以视为事件。当事件发生后，可能会引起相应的事件响应。2.3.3

CSS简介

CSS[8](层叠样式表)是用来进行网页风格设计的，它简化并扩展了HTML中的各种标记，使得各个标记的属性更具有一般性和通用性，大大提高了HTML开发的效率。在制作网页时采用CSS技术，可以有效地对页面的布局，字体，颜色，背景和其他效果实现更加精确的控制，只要对相应的代码作一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。

什么是CSS？

CSS中，Cascading是“层叠”的意思，也就是说在同一个Web文档中可以有多个样式表存在，这些样式表根据所在的位置，拥有不同的优先级，优先级越高，就会在最后显示时被采用。从样式表插入的形式看可以分为3种。

(1)(2)(3)内联式样式表； 嵌入式样式表； 外部式样式表；

CSS的特点

CSS是用来扩展HTML的，而不是用来替换HTML的，也就是说CSS不能脱离HTML，它只是一项辅助工具。除了可扩展HTML的样式设定外，CSS使得网页的设计与维护更加高效，这主要表现在以下几个方面：减少图形文件的使用，集中管理样式信息，设定共享样式，将样式分类使用。2.3.4

JQuery

JQuery[9]是继prototype之后又一个优秀的Javascript框架。其宗旨是——WRITE LESS，DO MORE，写更少的代码，做更多的事情。它是轻量级的js库(压缩后只

有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下是event.srcElements 而ff等标准浏览器下下是event。target。jQuery则通过统一event对象，让我们可以在所有浏览器中使用event。target获取事件对象。

(3)实现丰富的UI jQuery可以实现比如渐变弹出，图层移动等动画效果，让我们获得更好的用户体验。单以渐变效果为例，从前我自己写了一个可以兼容IE和ff的渐变动画，使用大量javascript代码实现，费心费力不说，写完后没有太多帮助过一端时间就忘记了。再开发类似的功能还要再次费心费力。如今使用jQuery就可以帮助我们快速

完成此类应用。

(4)纠正错误的脚本知识

大部分开发人员对于javascript存在错误的认识。比如在页面中编写加载时即执行的操作DOM的语句，在HTML元素或者document对象上直接添加“onclick”属性，不知道onclick其实是一个匿名函数等等。拥有这些错误脚本知识的技术人员也能完成所有的开发工作，但是这样的程序是不健壮的。比如“在页面中编写加载时即执行的操作DOM的语句”，当页面代码很小用户加载很快时没有问题，当页面加载稍慢时就会出现浏览器“终止操作”的错误。jQuery提供了很多简便的方法帮助我们解决这些问题，一旦使用jQuery你就将纠正这些错误的知识--因为我们都是用标准的正确的jQuery脚本编写方法!2.4 本章小结

本章介绍了开发数字媒体技术系网站前端所需要的开发工具和他们的运行环境，同时讲述了相关的前端开发技术比如：Java script，CSS，jqurey等。以便以后的开发过程中能够对这些开发工具盒技术有深刻的理解。

第3章 前端布局分析与设计

3.1 前端总体开发流程及设计

前端设计Web前端开发技术是一个先易后难的过程，主要包括三个要素：HTML，CSS和JavaScript，这就要求前端开发工程师不仅要掌握基本的Web前端开发技术，网站性能优化，SEO和服务器端的基础知识，而且要学会运用各种工具进行辅助开发以及理论层面的知识，包括代码的可维护性，组件的易用性，分层语义模板和浏览器分级支持等。3.1.1 分层开发

在数字媒体技术系网站概要确定后就需要进行分层开发的划分，根据项目内容的不同，划分工作。大致分为，总体结构搭建，模块制作，页面制作，底层JS搭建，JS交互效果，内部测试，代码优化。如图3-1所示：

图3-1分层开发图

这样做的好处是能根据项目的不同，划分出不同的功能模块，合理的安排时间，在有限的时间内做出很多模块和功能。降低开发成本，提高开发效率。3.1.2 代码编写

前期工作准备好后，就开始进入代码编写阶端，我们采用LSM方式进行，大致流程为总规划和设计草稿完成后，就进行前期的前端开发（搭建大致的HTML结构），然后设计出完设计稿后再进行页面样式的完善，最后完成正式的页面后交给开发，嵌套程序。这样做的好处不仅能有效的提高开发效率，实现逐层开发，让前

端提前介入，减少整体消耗的时间，确保产品有更多的时间修改和完善。

确定了流程后还需要对产品原型进行分析，拆分，把复用性高的部分找出来制作成代码模块，方便以后的套用。确认二，三级页面的风格搭建统一框架。

前端设计样式确定以后，就进行通用模块样式的设计（包括按钮，分页，默认字体颜色，连接颜色等），完成后并提交给前端，统一的搭建。

在代码的编写过程中，最重要的是标准和规范的执行遵守，在编写HTML时候充分发挥想象尽可能的满足后期样式表现的需要。如图3-2所示：

图 3-2 编写代码流程图

代码编写过程中让前端提前进入开发流程中来，在样式属性后就进行HTML结构的编写，页面设计完成后，在进行样式表的开发，这样不仅能节省很多的开发时间，提高开发效率，能在前端对全局页面的把控。在此同时也强调规范和模块化的重要性，正所谓无规矩不成方圆，这样能便于后期维护，减少维护成本。而模块化，是敏捷开发所必需的，重要性在这里也不做过多的描述。3.1.3 内部测试与后续优化

前端的内部测试，指出页面与设计稿不匹配的地方，优化部分细节页面样式。测试不仅能提高内测的质量，还能更早的发现问题并及时的修改，否则当页面提交开发以后再做修改是一件很麻烦的事情。当所有细节修改完毕后，就需要进行制作文件的优化以确保代码的最优化，尽可能地压缩图片和减少外部HTTP请求如图3-3所示：

图 3-3 内部测试流程图

图 3-4 前端开发流程图

这套流程制定出来就一直要求所有前端设计必须严格按照流程执行，也经过了很长时间的磨合跟改进。虽然不是很完美，但是很适合我们现在开发的需要，好处也是显而易见的，遵循并使用它对我们的发开有很大的帮助，能更好的应对高强度，高质量的开发需要。代码更可控，开发效率更高。

3.2 前端UI设计

3.2.1 模块分布

UI设计这是设计中最重要的一点，也可以发挥出更多创意的设计想法；其中体现出层次感设计的就是从属关系，点构成线，线构成面，主次清晰明了。下面是以任由设计师发挥，不是这样死板，要运用层次感的原理去设计如图3-5,3-6所示：

正确的层次布局 错误的布局

图 3-5 布局对比图

在数字媒体技术系网站中UI层次感的体现

图 3-6 数字媒体技术系页面布局图

3.2.2 颜色配置

产生丰富色彩的三原色是红，绿，蓝，也就是RGB，十六进制是00 00 00，例如经常写的red，color:#FF0000； 缩写color:#F00；color:gray(#808080)；是比较深的灰色。所谓邻近色，就是在色带上相邻近的颜色，例如绿色和蓝色，红色和黄色就互为邻近色。采用邻近色设计网页可以使网页避免色彩杂乱，易于达到页面的和谐统一。我们网站上用的色彩系是属于灰白色系这个选择符合网站的整体风格，不可能把网站设计成五颜六色，因为是学院网站所以要体现一种淡雅，自然的色彩风格。背景色一般采用素淡清雅的色彩，避免采用花纹复杂的图片和纯度很高的色

彩作为背景色，同时背景色要与文字的色彩对比强烈一些。首页的顶端使用灰色标题图片下面用全景图这两个部分过度的很自然。

在文字部分用黑色文字当鼠标移动到相关文字上面时文字颜色变成红色。不同的文字颜色会产生不同的效果，这能给浏览者一种层次感，方便与阅读。

违纪一点禁止大面积使用白色文字，特别是较深的背景下，禁止大面积使用加粗文字如图3-7所示：

图 3-7 字体颜色变换

3.2.3

CSS元素

CSS块元素(block)总是另起一行开始；高度，行高以及顶，底边距都可控制 常用的有：div p table h1 ul dl 等等。CSS内联元素(inline)和其它元素都在一行上；高度，行高以及顶，底边距不可改变；常用的有：a strong font img input span small label等等 [11]如图3-8所示：

Display: inline-block将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。但对于这个属性不是所有浏览器都识别。

图 3-8 CSS浮动

CSS间距 [12]

相应的设置大小，行高，首行缩进，间距（padding，margin）

内边距padding：元素的内边距在边框和内容区之间。padding:10px 5px 15px 20px;上 10px右 5px下 15px左 20pxpadding:10px 5px 15px;上右左下padding:10px 15px;上右下左