内容发布更新时间 : 2024/5/4 8:13:30星期一 下面是文章的全部内容请认真阅读。

Web前端页面设计

在网站前端开发过程中需要把图片用Photoshop处理成加载到网站页面

的图片，用Photoshop 制作矢量图形用作网站页面的修饰按钮。

1.3 前端开发相关技术

1.3.1 Java script 简介

Java script的出现，它可以使得信息和用户之间不仅只是一种显示和浏

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

1.3.2 Java script 基本特点

(1) 基于对象的语言

java script是一种基于对象的语言，同时也可以看作一种面向对象的。

这意味着它能运用自己已经创建的对象。因此，许多功能可以来自于脚本环境中对象的方法与脚本的相互作用。

(2) 简单性

java script的简单性主要体现在：首先它是一种基于Java基本语句和

控制流之上的简单而紧凑的设计， 从而对于学习Java是一种非常好的过渡。其次它的变量类型是采用弱类型，并未使用严格的数据类型。

(3) 安全性

java script是一种安全性语言，它不允许访问本地的硬盘，并不能将数

据存入到服务器上，不允许对网络文档进行修改和删除，只能通过浏览器实现信 息浏览或动态交互。从而有效地防止数据的丢失。

9

Web前端页面设计

(4) 动态性

java script是动态的，它可以直接对用户或客户输入做出响应，无须经

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

CSS (层叠样式表)是用来进行网页风格设计的，它简化并扩展了HTML中

的各种标记，使得各个标记的属性更具有一般性和通用性，大大提高了HTML开发的效率。在制作网页时采用CSS技术，可以有效地对页面的布局，字体，颜色，背景和其他效果实现更加精确的控制，只要对相应的代码作一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。

什么是CSS？

CSS中，Cascading是“层叠”的意思，也就是说在同一个Web文档中可

以有多个样式表存在，这些样式表根据所在的位置，拥有不同的优先级，优先级越高，就会在最后显示时被采用。从样式表插入的形式看可以分为3种。(1) 内联式样式表； (2) 嵌入式样式表； (3) 外部式样式表；

CSS的特点

CSS是用来扩展HTML的，而不是用来替换HTML的，也就是说CSS不能脱

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

JQuery[9]是继prototype之后又一个优秀的Javascript框架。其宗旨是——WRITE

LESS，DO MORE，写更少的代码，做更多的事情。它是轻量级的js库(压

缩后只有21k)，这是其它的js库所不及的，

10

Web前端页面设计

它兼容CSS3，还兼容各种浏览器 （IE 6。0+， FF 1。5+， Safari 2。

0+， Opera 9。0+）。

JQuery是一个快速的，简洁的JavaScript库使用户能更方便地处理HTML

documents，events，实现动画效果。

jQuery其模块化的使用方式使开发者可以很轻松的开发出功能强大的网页

特效。本文主要论述了如何在Web开发中使用jQuery技术，丰富网站的交互性和用户体验性。

jQuery是一套Javascrip脚本库。\Javascript轻量级脚本库\系列文章。

Javascript脚本库类似于。NET的类库， 这些工具方法或对象方法封装在类库中，方便用户使用。

注意jQuery是脚本库， 而不是脚本框架。\库\不等于\框架\， 比如

\System程序集\是类库，而\是框架。 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获取事件对象。

11

Web前端页面设计

(3) 实现丰富的UI

jQuery可以实现比如渐变弹出，图层移动等动画效果，让我们获得更好的

用户体验。单以渐变效果为例，从前我自己写了一个可以兼容IE和ff的渐变动画，使用大量javascript代码实现，费心费力不说，写完后没有太多帮助过一端时间就忘记了。 再开发类似的功能还要再次费心费力。 如今使用jQuery就可以帮助我们快速完成此类应用。

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

大部分开发人员对于javascript存在错误的认识。比如在页面中编写加载

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

1.4 本章小结

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

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

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

前端设计Web前端开发技术是一个先易后难的过程主要包括三个要素：

HTML，CSS和JavaScript，这就要求前端开发工程师不仅要掌握基本的Web前端开发技术，网站性能优化，SEO和服务器端的基础知识，而且要学会运用各种工具进行辅助开发以及理论层面的知识，

12