数据库原理及应用开发技术客户端开发技术.ppt

《数据库原理及应用开发技术客户端开发技术.ppt》由会员分享，可在线阅读，更多相关《数据库原理及应用开发技术客户端开发技术.ppt（54页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、Web开发技术综述开发技术综述 1 三大支撑技术三大支撑技术 2 开发技术综述开发技术综述 URL HTTP HTML客户端开发技术客户端开发技术 服务器端开发技术服务器端开发技术Web开发技术开发技术 1 三大支撑技术三大支撑技术 URL HTTP HTML（Unified Resource Locator）统一资源标志）统一资源标志符，互联网上进行统一命名和定位的一种标准符，互联网上进行统一命名和定位的一种标准机制。机制。（HyperText Transportation Protocol）Web服务器与客户进行传输信息的标准协议服务器与客户进行传输信息的标准协议。(HyperText M

2、arkup Language)超文本标记语超文本标记语言。言。“超超”文本的含义：不限于普通文本，利文本的含义：不限于普通文本，利用普通文本表达多媒体信息。用普通文本表达多媒体信息。Web开发技术开发技术 2开发技术综述开发技术综述两条主线：两条主线：HTMLJavascript（动态网页）（动态网页）CSS flash XMLCGI ASP PHP JSP.NET重点理解概念重点理解概念 HTML Javascript、CSSJSP、.NET第四章第四章 客户端开发技术客户端开发技术教学目的介绍介绍HTMLHTML、CSSCSS等开发技术及相应标准，并简等开发技术及相应标准，并简要介绍要介绍

3、JavaScriptJavaScript等技术。重点是理解掌握基本的等技术。重点是理解掌握基本的HTMLHTML语法，能手工编写简单的静态页面，能看语法，能手工编写简单的静态页面，能看懂较复杂的懂较复杂的HTMLHTML页面的语法结构，为后面服务页面的语法结构，为后面服务器端开发技术的学习做准备。器端开发技术的学习做准备。基本教学内容基本教学内容 n nHTMLHTML基本文件结构基本文件结构n n文本相关语法文本相关语法n n图像相关语法图像相关语法n n表格语法表格语法n n超链接语法超链接语法n n表单使用方法表单使用方法n n框架使用框架使用n n样式表样式表n n脚本语言脚本语言Ja

4、vaScriptJavaScript简介简介n nFlashFlash简介简介n nJavaAppletJavaApplet简介简介学习重点与难点学习重点与难点n n重点：HTMLHTML基本语法结构基本语法结构 表格使用方法表格使用方法表单使用方法表单使用方法n n难点：表格的复杂使用方法表格的复杂使用方法利用表单与后台程序进行交互的原理及规则利用表单与后台程序进行交互的原理及规则HTML简介简介 n n概念：概念：HTMLHTML（HyperText Markup LanguageHyperText Markup Language），基于），基于HTTPHTTP协议，协议，在在WebWeb

5、上以超文本方式出版本信息的国际化语言上以超文本方式出版本信息的国际化语言n n特点：特点：非线性非线性 基本单元：超文本结点基本单元：超文本结点 以链接实现不同结点间的联系以链接实现不同结点间的联系 国际性的规范国际性的规范 纯文本格式纯文本格式HTML的基本文档结构的基本文档结构 New Document HTML的基本文档结构的基本文档结构 Hello!Good morning!HTML的基本文档结构的基本文档结构文档头：要素：TITLE：显示窗口的标题META：文档的最基本的元信息。除了提供文档字符集、使用语言、作者等基本信息外，还涉及对关键词和网页描述的设定。一般给浏览器或编辑人员用，

6、不会直接显示出来HTML的基本文档结构的基本文档结构文档体：文档体：浏览器真正要展现的部分。浏览器真正要展现的部分。主要元素类型：主要元素类型：文本图像表格表单框架超链接HTML的基本文档结构的基本文档结构 注意：大多数元素/子元素为成对出现，许多元素内部可包含其它元素，但各元素间不得出现错位嵌套的情况！即如下情况绝不允许出现！实际内容 页面背景控制页面背景控制 n n n n 字体与颜色字体与颜色n n标题标题 这是一级标题这是一级标题n nFONT color=red size=6 字体控制字体控制文本类元素用法文本类元素用法 1）空格 通常会将多个空格压缩为单个通常会将多个空格压缩为单个

7、  被浏览器解释为不可压缩的字符，当被浏览器解释为不可压缩的字符，当需要显示多个空格时可用到需要显示多个空格时可用到2）字体属性控制 FONT color=red size=6 字体控制字体控制文本类元素用法文本类元素用法3）行与段落控制n n段落控制：相关字体大小，颜色控制n n行控制：n n预先格式化文本 它保留了空格和换行它保留了空格和换行n n文本块 列表控制列表控制n n无序列表 项目项目11项目项目22项目项目33 n n编号列表项目项目11项目项目22项目项目33 n n定义式列表项目项目11项目项目1.11.1项目项目22图像控制图像控制1 1）标准用法）标

8、准用法 IMG SRC=“images/lotus.GIF”width=“80%”height=80 border=32 2）AlignAlign用法：用法：IMG SRC=URL align=left|right|top|texttop|middle|absmiddle|baseline|bottom|absbottom其中其中leftleft和和rightright用以指定图像的水平位置，使图像向用以指定图像的水平位置，使图像向左或向右对齐成为浮动图像，此时，图像下面及左或向右对齐成为浮动图像，此时，图像下面及侧面的文字和图像将在右侧或左侧环绕该图像。侧面的文字和图像将在右侧或左侧环绕该图

9、像。图像控制图像控制其余各选项值则是控制图像和文本的垂直相对位置。其余各选项值则是控制图像和文本的垂直相对位置。其中：其中：toptop：使图像与文本的最高点对齐；：使图像与文本的最高点对齐；texttoptexttop：使图像与本行的最高文本对齐（通常与：使图像与本行的最高文本对齐（通常与toptop效效果相同，但不完全相同）；果相同，但不完全相同）；middlemiddle：使当前行的基准线与图像中线对齐；：使当前行的基准线与图像中线对齐；absmiddleabsmiddle：使当前行中线与图像中线对齐；：使当前行中线与图像中线对齐；baselinebaseline：使图像基准线与当前行基

10、准线对齐；：使图像基准线与当前行基准线对齐；bottombottom：使图像底部与当前行基准线对齐；：使图像底部与当前行基准线对齐；absbottomabsbottom：使图像底部与当前行底部对齐。：使图像底部与当前行底部对齐。超链接语法超链接语法 1）一般用法index2）书签链接书签链接示例书签超链接语法超链接语法3 3）分块链接）分块链接利用一个图像，使该图像的不同部分指向不同的链接。例如：利用一个图像，使该图像的不同部分指向不同的链接。例如：n nn nn nn nn nn nimg border=0 src=baby.JPG width=1024 height=768 usemap=

11、#FPMap0表格相关语法表格相关语法 1 1）基本语法）基本语法 姓名姓名 性别性别 年龄年龄 张三张三 男男 55 55表格相关语法表格相关语法2 2）表格的合并）表格的合并多列合并的表格多列合并的表格 人员统计人员统计 张三张三 李四李四 王五王五342145342145表格相关语法表格相关语法多行合并的表格多行合并的表格 人员统计人员统计张三张三 李四李四 王五王五342145342145表格尺寸表格尺寸/位置控制位置控制 张三 男 55 表单表单 n n 标签标签用于为用户输入创建用于为用户输入创建用于为用户输入创建用于为用户输入创建 HTML HTML 表单。表单。表单。表单。表单

12、能够包含表单能够包含表单能够包含表单能够包含 input input 元素元素元素元素，比如文本字段、复，比如文本字段、复，比如文本字段、复，比如文本字段、复选框、单选框、提交按钮等等。选框、单选框、提交按钮等等。选框、单选框、提交按钮等等。选框、单选框、提交按钮等等。表单还可以包含表单还可以包含表单还可以包含表单还可以包含 menusmenus、textareatextarea、fieldsetfieldset、legendlegend 和和和和 label label 元素元素元素元素。表单用于向服务器传输数据。表单用于向服务器传输数据。表单用于向服务器传输数据。表单用于向服务器传输数据。

13、表单控制表单控制属性值描述actionURL规定当提交表单时，向何处发送表单数据。属性值描述acceptMIME_type规定通过文件上传来提交的文件的类型。accept-charsetcharset服务器处理表单数据所接受的字符集。enctypeMIME_type规定表单数据在发送到服务器之前应该如何编码。methodgetpost规定如何发送表单数据。namename规定表单的名称。target_blank_parent_self_topframename规定在何处打开 action URL。必选必选可选可选表单元素表单元素 n n按钮（button）n n复选框n n单选框n n菜单（下

14、拉选择框）n n文本框（单行，多行）n n文件选择控件n n隐藏控件n n图形（image）表单表单表单元素的基本标签FORMFORMINPUTINPUTTEXTAREATEXTAREASELECTSELECTCSS n nCSS:级联样式表（级联样式表（级联样式表（级联样式表（Cascading Style SheetCascading Style Sheet）简称）简称）简称）简称“CSSCSSn n基本功能：更有效地控制网页外观，便于页面总体风格的更有效地控制网页外观，便于页面总体风格的更有效地控制网页外观，便于页面总体风格的更有效地控制网页外观，便于页面总体风格的统一和改变统一和改变统

15、一和改变统一和改变n n常用功能：控制文字的大小、颜色、字体控制文字的大小、颜色、字体控制文字的大小、颜色、字体控制文字的大小、颜色、字体CSS基本语法基本语法 n nCSS 规则规则由两个主要的部分构成：选择器，以及一条或由两个主要的部分构成：选择器，以及一条或由两个主要的部分构成：选择器，以及一条或由两个主要的部分构成：选择器，以及一条或多条声明。多条声明。多条声明。多条声明。selector declaration1;declaration2;.selector declaration1;declaration2;.declarationN declarationN CSS基本语法基本语

16、法n n层叠次序层叠次序样式会根据下面的规则层叠于一个新的虚拟样样式会根据下面的规则层叠于一个新的虚拟样样式会根据下面的规则层叠于一个新的虚拟样样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字式表中，其中数字式表中，其中数字式表中，其中数字 4 4 拥有最高的优先权。拥有最高的优先权。拥有最高的优先权。拥有最高的优先权。1 1浏览器缺省设置浏览器缺省设置浏览器缺省设置浏览器缺省设置2 2外部样式表外部样式表外部样式表外部样式表n nLINK href=”sample.css”rel=”stylesheet”type=”text/css”3 3内部样式表（位于内部样式表（位于内部样式表（

17、位于内部样式表（位于 标签内部）标签内部）标签内部）标签内部）4 4内嵌样式（在内嵌样式（在内嵌样式（在内嵌样式（在 HTML HTML 元素内部）元素内部）元素内部）元素内部）CSS基本语法基本语法n n几种常用控制方法P font-size:9px;P font-size:9px;P.classname1 font-size:12px;P.classname1 font-size:12px;P#New font-size:18px;P#New font-size:18px;.First color:red;.First color:red;#Second font-size:18px;#S

18、econd font-size:18px;Sample!Sample!CSS基本语法基本语法n nID 与与 CLASS 区别区别1 1、在、在、在、在CSSCSS文件里书写时，文件里书写时，文件里书写时，文件里书写时，IDID加前缀加前缀加前缀加前缀#；CLASSCLASS用用用用.2 2、idid一个页面只可以使用一次；一个页面只可以使用一次；一个页面只可以使用一次；一个页面只可以使用一次；classclass可以多次可以多次可以多次可以多次引用。引用。引用。引用。3 3、IDID是一个标签的标识，用于区分不同的结是一个标签的标识，用于区分不同的结是一个标签的标识，用于区分不同的结是一个标

19、签的标识，用于区分不同的结构和内容构和内容构和内容构和内容4 4、idid是先找到结构是先找到结构是先找到结构是先找到结构/内容，再给它定义样式；内容，再给它定义样式；内容，再给它定义样式；内容，再给它定义样式；classclass是先定义好一种样式，再套给多个结构是先定义好一种样式，再套给多个结构是先定义好一种样式，再套给多个结构是先定义好一种样式，再套给多个结构/内内内内容。容。容。容。常见属性常见属性pp字体属性字体属性font-size:9px;font-size:9px;1)xx-small|x-small|small|medium|large|x-large 1)xx-small|

20、x-small|small|medium|large|x-large|xx-large|xx-large2)9px;9pt;2)9px;9pt;font-family:font-family:宋体宋体,Times New Roman;,Times New Roman;n n颜色属性颜色属性 Color:red;Color:#FF0000;Color:red;Color:#FF0000;Background-color:white;Background-color:white;常见属性常见属性n n文本属性文本属性Text-align:left;Text-align:left;Vertical-

21、align:top;Vertical-align:top;n n行高属性行高属性Line-height:9px;120%Line-height:9px;120%n n空白空白margin-top:margin-bottommargin-top:margin-bottomCSS基本语法基本语法n n典型应用举例典型应用举例n na:link color:rgb(0,0,102);text-decoration:none;n na:visited color:#FF00FB;n na:active color:rgb(153,0,255);n na:hover color:red;HTML/CSS

22、的注意事项n n各类标记一定要各类标记一定要成对出现成对出现n nCSS的作用范围一定要清晰的作用范围一定要清晰n n注意注意ID与与Class的作用的作用JavaScript简介简介n nJavaScript是客户端脚本语言，是客户端脚本语言，avaScriptavaScript是在用户的浏览器上运行，不需要服是在用户的浏览器上运行，不需要服是在用户的浏览器上运行，不需要服是在用户的浏览器上运行，不需要服务器的支持而可以务器的支持而可以务器的支持而可以务器的支持而可以 独立运行独立运行独立运行独立运行，可以减少服务器，可以减少服务器，可以减少服务器，可以减少服务器的压力。的压力。的压力。的压

23、力。n n基于基于JAVA和和C,C+等多种语法结构等多种语法结构n n代码加载前需要解释后运行，运行速度较代码加载前需要解释后运行，运行速度较慢慢n n程序编写简单，但安全性相对较差。程序编写简单，但安全性相对较差。JavaScript简介简介使用方法n n外部脚本文件外部脚本文件n n混合在混合在HTMLHTML文档中，一般位于头部文档中，一般位于头部n nn n内嵌脚本内嵌脚本n n document.write(document.write(这是第一个这是第一个JavaScriptJavaScript文件文件!)!)数据类型数据类型n n动态类型：var a n n数值型:var a=

24、3;var a=3;n n布尔值:Booleanvar x=true var y=falsevar x=true var y=false n n字符型 var myname=“var myname=“小王小王小王小王;n n数组var students=new Array();students0=“wang;var students=new Array();students0=“wang;students1=“li;students2=“zhang;students1=“li;students2=“zhang;对对 象象n n引用JavaScript内部对象n n由浏览器环境中提供n n创建新

25、对象 常用内部对象常用内部对象 n nwindow对象全局变量是全局变量是全局变量是全局变量是 window window 对象的属性。对象的属性。对象的属性。对象的属性。全局函数是全局函数是全局函数是全局函数是 window window 对象的方法。对象的方法。对象的方法。对象的方法。window.innerHeight-window.innerHeight-浏览器窗口的内部高度浏览器窗口的内部高度浏览器窗口的内部高度浏览器窗口的内部高度window.innerWidth-window.innerWidth-浏览器窗口的内部宽度浏览器窗口的内部宽度浏览器窗口的内部宽度浏览器窗口的内部宽度n

26、 n document对象document.getElementById(header);document.getElementById(header);n n内建对象：内建对象：String、Date、Array 等等。等等。事件处理与交互性的实现事件处理与交互性的实现 n n键盘事件 n n鼠标事件 n n焦点事件 n n选择事件 n n状态改变事件 n nonAbort 事件处理与交互性的实现事件处理与交互性的实现n n键盘事件：OnKeyUpOnKeyUpOnKeyDownOnKeyDownOnKeyPressOnKeyPress事件处理与交互性的实现事件处理与交互性的实现n n鼠标事

27、件OnMouseDownOnMouseDownOnMouseUpOnMouseUpOnClickOnClickOnDbClickOnDbClickOnMouseOverOnMouseOverOnMouseMoveOnMouseMoveOnMouseOutOnMouseOut事件处理与交互性的实现事件处理与交互性的实现n n焦点事件OnFucusOnFucusOnBlurOnBlurn n状态改变事件OnLoadOnLoadOnUnLoadOnUnLoadOnChangeOnChangeJavaScript简介简介JavaScript中的几个常见应用n n校验表单输入的正确性n n控制表单提交n

28、 n控制动态显示JavaScript中的几个常见应用中的几个常见应用n n校验表单项 FORM .FORM onSubmit=”VerifyForm()”.JavaScript中的几个常见应用中的几个常见应用n n控制表单提交控制表单提交 .function SubmitForm()function SubmitForm()form1.submit();form1.submit();Flash简介简介优点：优点：n n动画是矢量的，（不论放大多少倍依然清晰，而动画是矢量的，（不论放大多少倍依然清晰，而不象一般的图形文件，当放大他们的时候，会出不象一般的图形文件，当放大他们的时候，会出现马赛克效

29、应，看到的是一个个方形的色块。）现马赛克效应，看到的是一个个方形的色块。）n nFlashFlash文件可以做得很小文件可以做得很小n n用用FlashFlash生成的文件是代码保护的，别人无法看到生成的文件是代码保护的，别人无法看到其源代码，还可禁止下载。其源代码，还可禁止下载。n nFlashFlash使用起来很容易（凡是用过类似使用起来很容易（凡是用过类似photoshopphotoshop等等类似的图形软件的人就可以很轻松的掌握用类似的图形软件的人就可以很轻松的掌握用FlashFlash制作动画。）制作动画。）Flash简介简介n nFlash的播放是采用流技术，动画是边下载边演示，如果速度控制得好是几乎感觉不到文件还没完全下载的。缺点：n n必须安装插件PLUG-IN，才能被浏览器所接受。这样做显然使用户在第一次浏览时会增加一些麻烦，但另一方面，它却避免了浏览器之间的差异。JavaApplet简介简介 优点：n n功能较强n n无须插件缺点：n n编程较复杂JavaApplet简介简介