Web开发基础讲解.ppt

* Neusoft Group Ltd. Date:* 政府事业部 设计部 王琳 2011年8月更新 Web开发基础概念讲解 w.lin@ Html,CSS,Javascript之间的关系1 Html,CSS,Javascript之间的关系2 什么是CSS CSS是Cascading Style Sheets(层叠样式表)的简称. CSS语言是一种标记语言,它不需要编译,可以直接由浏览器执行(属于浏览器解释型语言). 在标准网页设计中CSS负责网页内容的表现. CSS文件也可以说是一个文本文件,它包含了一些CSS标记,CSS文件必须使用css为文件名后缀. 可以通过简单的更改CSS文件,改变网页的整体表现形式,可以减少我们的工作量,所以她是每一个网页设计人员的必修课. 具体例子见目录“01.Web开发基础讲解\01.什么是CSS\”下演示 什么是JavaScript 特点： JavaScript是解释性的编程语言,不必进行编译 JavaScript没有严格的类型检查 直接嵌入在html文件中 使用方式： 1.文件引用方式 script language=Javascript“ src＝Script.js /script 2.嵌入页面方式 script language=Javascript !-- document.writeln(这是Javascript！采用直接插入的方法！); //-- /script 具体请参考目录“帮助文件\JScript 中文参考手册.chm” 备注： 请不要理会所谓的微软的Jscript不是标准javascript等类似的说法，想想你的客户90%以上的机器部署的是什么？答：IE8。 什么是DHTML 所谓动态HTML(Dynamic HTML，简称DHTML)，其实并不是一门新的语言，它只是HTML、CSS和客户端脚本的一种集成。 DHTML建立在原有技术的基础上，可分为三个方面： 一是HTML，也就是页面中的各种页面元素对象，它们是被动态操纵的内容； 二是CSS，CSS属性也是动态操纵的内容，从而获得动态的格式效果； 三是客户端脚本(例如JavaScript)，它实际操纵Web页上的HTML和CSS。 页面装载后。利用DHTML，网页设计者可以动态地隐藏或显示内容、修改样式定义、激活元素以及为元素定位等等。所有这些功能均可用浏览器完成而无需请求Web服务器，同时也无需重新装载网页。 具体例子请参考目录“01.Web开发基础讲解\02.什么是Dhtml\”下的演示 Html 对象模型(DHTML Object Model) Html对象讲解1: Form对象 form在网页中指的是表单的意思. 表单允许客户端的用户以标准格式向服务器提交数据。表单的创建者为了收集所需数据，使用了各种控件设计表单如 INPUT 或 SELECT。查看表单的用户只需填充数据并单击提交按钮即可向服务器发送数据。服务器上的脚本会处理这些数据。 如果数据要发送出去的话，那么必须定义每个控件元素的 NAME 标签属性。表单中的元素可使用 name 属性或 id 属性，或通过 elements 集合引用。 举例如： FORM ACTION=:7080/SiAction.do METHOD=POST“ target=“_self” id=“dataform” name=“dataform” /FORM 请结合frontPage等软件进行实践 Html对象讲解2: 综合演示 结合一个例子综合dhtml,css,javascript进行讲解 1.“写入值”及“读取值”为利用javascript控制html基本属性 2.“设置背景”及“设置宽度”为利用javascript动态调整 基础控件的样式单css。 请参考目录“01.Web开发基础讲解\04.文本输入框演示.htm” 具体的社保将使用的开发技术为dojo,一种结合了多种技术的开源框架 但实际的本质思想脱离不开以上的基本概念 一个标准的html与服务器端交互过程 IE Form 文本框 按钮 Web Server http request get/post 数据 一个新的页面 Result界面 http response (内容为html) Html对象讲解3:浏览器相关对象 Window对象 Document对象 Event对象 navigator 对象 基础Html对象请参考目录“01.Web开发基础讲解\03.html例子.htm” 什么是AJAX AJAX全称为“Asynchronous JavaScript and XML” (异步JavaScript和XML)是指一种创建交互式网页应用的