内容发布更新时间 : 2024/12/25 22:05:38星期一 下面是文章的全部内容请认真阅读。
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