第1页
WEB前端技术
第2页
*
目录 CONTENTS
第3页
从C-S到B-S
第4页
概念
前端技术包括JavaScript、ActionScript、CSS、xHTML等“传统”技术与Adobe AIR、Google Gears,以及概念性较强的交互式设计,艺术性较强的视觉设计等等.
根据该词可以做这样的理解,用互联网来做比喻,凡是通过浏览器到用户端计算机的统称为前端技术.相反存贮于服务器端的统称为后端技术.
第5页
思想
HTML
JavaScript
CSS
Web前端视图层与后端业务逻辑分离
第6页
WEB2.0
用户参与网站内容制造
更加注重交互性
符合web标准的
博客、微博、SNS、分享等
符合web标准的网站设计
第7页
技术概览
第8页
主流开发技术
HTML、XHTML、DHTML、CSS、JAVASCRIPT、FLASH、RIA(Flex/Air/SilverLight)、ActiveX、Div+CSS、Ajax、web标准、Ajax、jQuery、YUI、SEO、HTML5、CSS3….
第9页
一个典型的Web应用
用户在浏览器上操作
浏览器提供请求方式
Web程序存取数据库
处理客户端请求
发给浏览器响应数据
浏览器
第10页
典型的开发流程
第11页
开发流程-完整
需求文档、流程图、底保真原型、设计结果方案、交互计划方案、高保真原型、交互结果方案、页面风格/布局/关键页面设计/文字/其它设计、GUI方案确定、切割页面/HTML、后台编码、a版测试、修复BUG/优化、优化流程、b版测试、发布、检测报告
第12页
开发流程-简化
需求文档、原型、页面风格/布局/关键页面设计、GUI方案确定、切割页面/HTML、后台编码、测试、修复BUG/优化、发布
第13页
分工与角色
第14页
ID
Interaction Designer (交互设计师)
主要职责:
协助用户体验设计师进行需求分析、产品可用性评估
通过任务分解、情景模拟等手段把业务逻辑分解为交互逻辑
在沟通和讨论的基础上确定方案原型、基本交互模型及用户操作流程
协助用户体验设计师进行方案原型的评估和改进
第15页
UI
Graphic User Interface Designer (图形用户界面设计师)
主要职责:
在深刻理解方案原型的基础上确定风格样式,并进行图形界面设计
在与团队成员沟通和讨论中进行图形界面的优化和改进
制定界面相关规范及注意事项
配合网页设计师进行特殊页面的设计和ICON的制作
第16页
UE
User Experience Designer (用户体验设计师)
主要职责:
需求挖掘、收集、整理、分析
与需求提出者、方案实施者、项目参与者、典型用户等所有涉及人员沟通、协调
组织相关人员讨论并给出最优解决方案,并进行技术可行性、成本权衡等方面的评估、完善 制定方案原型、实施计划、细节、规范,并保证实施过程的顺利进行
最终方案模型的评估和改进
User Experience Designer (用户体验设计师)
主要职责:
需求挖掘、收集、整理、分析
与需求提出者、方案实施者、项目参与者、典型用户等所有涉及人员沟通、协调
组织相关人员讨论并给出最优解决方案,并进行技术可行性、成本权衡等方面的评估、完善
制定方案原型、实施计划、细节、规范,并保证实施过程的顺利进行
最终方案模型的评估和改进
第17页
WD
Web Developer (网页设计师)
主要职责:
基于图形界面,将方案还原为完整的高质量的WEB模型
以网站重构的思想为指导,保证结构层、表现层和行为层的完美分离
注重代码的质量、性能、SEO和可重用度,保证页面的加载速度、扩展性、适应性和兼容性
配合技术开发人员的工作,进行特殊页面的制作
第18页
W3C&WEB标准
WEB标准不是某一个标准,而是一系列标准的集合。网页主要由三部分组成:结构(Structure)、表现(Presentation)和行为 (Behavior)。对应的标准也分三方面:结构化标准语言主要包括XHTML和XML,表现标准语言主要包括CSS,行为标准主要包括对象模型(如 W3C DOM)、ECMAScript等。这些标准大部分由W3C起草和发布,也有一些是其他标准组织制订的标准,比如ECMA(European Computer Manufacturers Association)的ECMAScript标准
W3C的由来
万维网联盟(World Wide Web Consortium,W3C),又称W3C理事会。1994年10月在麻省理工学院计算机科学实验室成立。建立者是万维网的发明者蒂姆·伯纳斯-李。
万维网联盟是国际著名的标准化组织。1994年成立后,至今已发布近百项相关万维网的标准,对万维网发展做出了杰出的贡献。目前,万维网联盟拥有来自全世界40个国家的400多个会员组织,已在全世界16个地区设立了办事处。2006年4月28日,万维网联盟在中国内地设立首个办事处。
第19页
*
目录 CONTENTS
第20页
DOM
DOM = Document Object Model,文档对象模型,根据W3C DOM规范,DOM是HTML与XML的应用编程接口(API),DOM将整个页面映射为一个由层次节点组成的文件。有1级、2级、3级共3个级别。
DOM = Document Object Model,文档对象模型,根据W3C DOM规范,DOM是HTML与XML的应用编程接口(API),DOM将整个页面映射为一个由层次节点组成的文件。有1级、2级、3级共3个级别。
第21页
DOM
第22页
HTML/XHTML/DHTML
HTML:(HyperText Mark-up Language)即超文本标记语言或超文本链接标示语言,是目前网络上应用最为广泛的语言,也是构成网页文档的主要语言。HTML文本是由HTML命令组成的描述性文本,HTML命令可以说明文字、图形、动画、声音、表格、链接等。HTML的结构包括头部(Head)、主体(Body)两大部分,其中头部描述浏览器所需的信息,而主体则包含所要说明的具体内容。
第23页
<html>
<head>
<title>文档标题</title>
</head>
<body>
<a href=“#”>我的链接</a>
<h1>我的标题</h1>
</body>
</html>
Html树形结构
第24页
HTML/XHTML/DHTML
XHTML:可扩展超文本置标语言(eXtensible HyperText Markup Language,XHTML),是一种置标语言,表现方式与超文本置标语言(HTML)类似,不过语法上更加严格。从继承关系上讲,HTML是一种基于标准通用置标语言(SGML)的应用,是一种非常灵活的置标语言,而XHTML则基于可扩展置标语言(XML),XML是SGML的一个子集。XHTML 1.0在2000年1月26日成为W3C的推荐标准。
XHTML:可扩展超文本置标语言(eXtensible HyperText Markup Language,XHTML),是一种置标语言,表现方式与超文本置标语言(HTML)类似,不过语法上更加严格。从继承关系上讲,HTML是一种基于标准通用置标语言(SGML)的应用,是一种非常灵活的置标语言,而XHTML则基于可扩展置标语言(XML),XML是SGML的一个子集。XHTML 1.0在2000年1月26日成为W3C的推荐标准。
第25页
HTML/XHTML/DHTML
DHTML:DHTML是Dynamic HTML的简称,就是动态的html,是相对传统的静态的html而言的一种制作网页的概念。所谓动态HTML(Dynamic HTML,简称DHTML),其实并不是一门新的语言,它只是HTML、CSS和客户端脚本的一种集成,即一个页面中包括html+css+javascript(或其它客户端脚本),其中css和客户端脚本是直接在页面上写而不是链接上相关文件。DHTML不是一种技术、标准或规范,只是一种将目前已有的网页技术、语言标准整合运用,制作出能在下载后仍然能实时变换页面元素效果的网页设计概念
DHTML是Dynamic HTML的简称,就是动态的html,是相对传统的静态的html而言的一种制作网页的概念。所谓动态HTML(Dynamic HTML,简称DHTML),其实并不是一门新的语言,它只是HTML、CSS和客户端脚本的一种集成,即一个页面中包括html+css+javascript(或其它客户端脚本),其中css和客户端脚本是直接在页面上写而不是链接上相关文件。DHTML不是一种技术、标准或规范,只是一种将目前已有的网页技术、语言标准整合运用,制作出能在下载后仍然能实时变换页面元素效果的网页设计概念
第26页
CSS
级联样式表(Cascading Style Sheet)简称“CSS”,通常又称为“风格样式表(Style Sheet)”,它是用来进行网页风格设计的。比如,如果想让链接字未点击时是蓝色的,当鼠标移上去后字变成红色的且有下划线,这就是一种风格。通过设立样式表,可以统一地控制HMTL中各标志的显示属性。级联样式表可以使人更能有效地控制网页外观。使用级联样式表,可以扩充精确指定网页元素位置,外观以及创建特殊效果的能力。
级联样式表(Cascading Style Sheet)简称“CSS”,通常又称为“风格样式表(Style Sheet)”,它是用来进行网页风格设计的。比如,如果想让链接字未点击时是蓝色的,当鼠标移上去后字变成红色的且有下划线,这就是一种风格。通过设立样式表,可以统一地控制HMTL中各标志的显示属性。级联样式表可以使人更能有效地控制网页外观。使用级联样式表,可以扩充精确指定网页元素位置,外观以及创建特殊效果的能力。
第27页
CSS
BODY {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; (设置整页面居中)
SCROLLBAR-FACE-COLOR: #c4dff4; (设置检索滚动条3D表面)
SCROLLBAR-HIGHLIGHT-COLOR: #c4dff4;
SCROLLBAR-SHADOW-COLOR: #c6c6c6;
SCROLLBAR-3DLIGHT-COLOR: #c6c6c6;
SCROLLBAR-ARROW-COLOR: #000000;
SCROLLBAR-TRACK-COLOR: #edf7f8;
SCROLLBAR-BASE-COLOR: #c6c6c6;
SCROLLBAR-DARKSHADOW-COLOR: #ffffff;
FONT-SIZE: 12px; (设置整个页面字体大小)
MARGIN: 0px; (页面上下左右边距为零,body默认margin是20px)
COLOR: #000000;(字体颜色)
PADDING-TOP: 0px; (内容边距为0)
FONT-FAMILY: Arial;(字体字体)
BACKGROUND-COLOR: #ffffff; (背景颜色)
TEXT-ALIGN: center (字体居中)
}
DHTML是Dynamic HTML的简称,就是动态的html,是相对传统的静态的html而言的一种制作网页的概念。所谓动态HTML(Dynamic HTML,简称DHTML),其实并不是一门新的语言,它只是HTML、CSS和客户端脚本的一种集成,即一个页面中包括html+css+javascript(或其它客户端脚本),其中css和客户端脚本是直接在页面上写而不是链接上相关文件。DHTML不是一种技术、标准或规范,只是一种将目前已有的网页技术、语言标准整合运用,制作出能在下载后仍然能实时变换页面元素效果的网页设计概念
第28页
DIV+CSS网页标准版式布局
CSS2.0盒模型层次平面示意图和3D示意图 DIV+CSS布局
第29页
DIV+CSS布局网站的优缺点
优点:
1. 标准化的页面结构:DIV+CSS是行业标准,是WEB发展的趋势。
2、代码简洁:<DIV></DIV>较TABLE来说代码精简许多。
3、页面浏览速度较快: 对于同一个页面视觉效果,采用CSS+DIV重构的页面容量要比TABLE编码的页面文件容量小得多,前者一般只有后者的1/2大小。
4、页面布局灵活:DIV+CSS使得页面布局方便操作灵活,改版时只需改CSS样式即可实现页面重新布局,而不用改动程序,从而降低了网站改版的成本。页面效果丰富,包括视觉效果和用户体验比如拖拉。
5、有利于搜索引擎收录
缺点:
1、可观性差:用户在编辑的时候并不能立即看到编辑效果,需要预览才可看到。
2、操作繁琐:相对于入门级的用户或是对代码不是很了解的人来说,操作起来很是麻烦。
3、兼容性较差:DIV+CSS设计的网站在IE浏览器里面正常显示,到火狐浏览器(FireFox )中有可能面目全非,故设计时需要把不同浏览器样式都考虑进去。
第30页
第二次浏览器大战
第31页
各浏览器CSS hack兼容表:
标注了各个浏览器之间的兼容不同的地方。/*ie8 and below*/body {color: red; /* all browsers, of course */color : green\9; /* IE8 and below */}/*ie7 and below*/body {color: red; /* all browsers, of course */color : green\9; /* IE8 and below */*color : yellow; /* IE7 and below */}/*ie6 and below*/body {color: red; /* all browsers, of course */color : green\9; /* IE8 and below */*color : yellow; /* IE7 and below */_color : orange; /* IE6 */}
第32页
Hack及兼容性处理
小例子:有时候,可能希望在同一个规则中对Windows上的IE 6和更低版本应用一个声明,对其他所有浏览器应用另一个声明。为此,可以使用注释属性招数,也可以使用!important或下划线招数。
!important招数之所以能够起作用是因为Windows上的IE 6和更低版本在处理单一规则中的多个属性方面有问题:
#nay {
Position :fixed !important ;
Position :static ;
}
第33页
Javascript
JavaScript语言的前身叫作Livescript。自从Sun公司推出著名的Java语言之后,Netscape公司引进了Sun公司有关Java的程序概念,将自己原有的Livescript 重新进行设计,并改名为JavaScript。JavaScript是一种基于对象和事件驱动并具有安全性能的脚本语言,有了JavaScript,可使网页变得生动。使用它的目的是与HTML超文本标识语言、Java 脚本语言一起实现在一个网页中链接多个对象,与网络客户交互作用,从而可以开发客户端的应用程序。它是通过嵌入或调入在标准的HTML语言中实现的。 JavaScript具有很多优点: 1.简单性 JavaScript是一种脚本编写语言,它采用小程序段的方式实现编程,像其它脚本语言一样,JavaScript同样已是一种解释性语言,它提供了一个简易的开发过程。它的基本结构形式与C、C++、VB、Delphi十分类似。但它不像这些语言一样,需要先编译,而是在程序运行过程中被逐行地解释。它与HTML标识结合在一起,从而方便用户的使用操作。 2.动态性 JavaScript是动态的,它可以直接对用户或客户输入做出响应,无须经过Web服务程序。它对用户的反映响应,是采用以事件驱动的方式进行的。所谓事件驱动,就是指在主页中执行了某种操作所产生的动作,就称为“事件”。比如按下鼠标、移动窗口、选择菜单等都可以视为事件。当事件发生后,可能会引起相应的事件响应。 3.跨平台性 JavaScript是依赖于浏览器本身,与操作环境无关,只要能运行浏览器的计算机,并支持JavaScript的浏览器就可以正确执行。 4.节省CGI的交互时间 随着WWW的迅速发展有许WWW服务器提供的服务要与浏览者进行交流,确浏览的身份、需服务的内等等,这项工作通常由CGI/PERL编写相应的接口程序与用户进行交互来完成。很显然,通过网络与用户的交互过程一方面增大了网络的通信量,另一方面影响了服务器的服务性能。服务器为一个用户运行一个CGI时,需要一个进程为它服务,它要占用服务器的资源(如CPU服务、内存耗费等),如果用户填表出现错误,交互服务占用的时间就会相应增加。被访问的热点主机与用户交互越多,服务器的性能影响就越大。JavaScript是一种基于客户端浏览器的语言,用户在浏览中填表、验证的交互过程只是通过浏览器对调入HTML文档中的JavaScript源代码进行解释执行来完成的,即使是必须调用CGI的部分,浏览器只将用户输入验证后的信息提交给远程的服务器,大大减少了服务器的开销。
第34页
Javascript的地位
第35页
Javascript
var message=“hello word!”;
function test() {
alert(message);
}
第36页
Javascript库
库,指得是可以方便应用到现有开发体系中的、现成的代码资源。库不仅为大部分日常的DOM脚本编程工作提供了快捷的解决方案,而且也提供了许多独特的工具。虽然库使用起来很方便,但它们也并非能解决你所有的问题。在使用库之前,一定要保证真正理解javascript的DOM原理。 (DOM是Document Object Model(文档对象模型)的简称,它是让javascript与页面交互的一种方式,能够动态修改文档中的节点,元素,属性等。 )
这些库一般是一个(或多个)js文件,只要把他们导入你的网页就能使用了。
常用的库有:
jQuery:javascript库中的新成员,提供css和xpath选择符查找元素,ajax,动画效果等
dojo:一个巨大的库,包括的东西很多,dijit和dojox是dojo的扩展,几乎你想要的各种javascript程序都包括了。
prototype:一个非常流行的库,使用了原型链向javascript中添加了很多不错的函数
YUI:yahoo!用户界面,非常实用,提供各种解决方案。
ExtJs :组件非常丰富,皮肤也很漂亮,动画效果也丰富。
jquery对网页美术功底要求挺高的,它主要只是封装了dom、ajax的操作,至于界面效果全得靠自己一步步手写;ext却把界面效果也给做好了,不会美工也能用,但要使jquery做出的界面达到和ext一样的效果,对能力是个考验。
第37页
关系
第38页
Ajax
AJAX即“Asynchronous JavaScript and XML”(异步JavaScript和XML),AJAX并非缩写词,而是由Jesse James Gaiiett创造的名词,是指一种创建交互式网页应用的网页开发技术。
在AJAX中JavaScript主要被用来传递用户界面上的数据到服务端并返回结果。XMLHttpRequest对象用来响应通过HTTP传递的数据,一旦数据返回到客户端就可以立刻使用DOM将数据放到网面上。
主要包含了以下几种技术
Ajax(Asynchronous JavaScript + XML)的定义
基于web标准(standards-based presentation)XHTML+CSS的表示;
使用 DOM(Document Object Model)进行动态显示及交互;
使用 XML 和 XSLT 进行数据交换及相关操作;
使用 XMLHttpRequest 进行异步数据查询、检索;
使用 JavaScript 将所有的东西绑定在一起。
类似于DHTML或LAMP,AJAX不是指一种单一的技术,而是有机地利用了一系列相关的技术。事实上,一些基于AJAX的“派生/合成”式(derivative/composite)的技术正在出现,如“AFLAX”。
基于Ajax的应用程序架构非常多有基于纯Javascript如jQuery等,有基于服务器端如java中的DWR
第39页
各种插件
Flash
ActiveX
第40页
*
目录 CONTENTS
第41页
RIA
富因特网应用程序(Rich Internet Applications,RIA)利用具有很强交互性的富客户端技术来为用户提供一个更高和更全方位的网络体验。RIA集成了桌面应用的交互性和传统Web应用的部署灵活性与成本分析,以创建单一而完整的用户体验。富客户端技术使创建RIA成为可能,它提供一个运行时的环境以承载被编译的客户端应用程序,该客户端应用程序是一个使用HTTP协议发布的文件。客户端应用程序使用异步的C/S结构连接到现有的应用服务器,这是一种安全的、可升级的、具有良好适应性的面向服务模型,这种模型由当前所采用的Web服务驱动。
DHTML是Dynamic HTML的简称,就是动态的html,是相对传统的静态的html而言的一种制作网页的概念。所谓动态HTML(Dynamic HTML,简称DHTML),其实并不是一门新的语言,它只是HTML、CSS和客户端脚本的一种集成,即一个页面中包括html+css+javascript(或其它客户端脚本),其中css和客户端脚本是直接在页面上写而不是链接上相关文件。DHTML不是一种技术、标准或规范,只是一种将目前已有的网页技术、语言标准整合运用,制作出能在下载后仍然能实时变换页面元素效果的网页设计概念
第42页
RIA主流技术
Flex&Air
SilverLight
javaFX
第43页
*
目录 CONTENTS
第44页
*
目录 CONTENTS