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

1、Web开发技术综述,1 三大支撑技术,2 开发技术综述,URL HTTP HTML,客户端开发技术 服务器端开发技术,Web开发技术,1 三大支撑技术,URL HTTP HTML,（Unified Resource Locator）统一资源标志符，互联网上进行统一命名和定位的一种标准机制。,（HyperText Transportation Protocol ）Web服务器与客户进行传输信息的标准协议 。,(HyperText Markup Language)超文本标记语言。“超”文本的含义：不限于普通文本，利用普通文本表达多媒体信息。 。,Web开发技术,2开发技术综述,两条主线：,HTML

2、Javascript（动态网页） CSS flash XML CGI ASP PHP JSP.NET,重点理解概念,HTML Javascript、CSS JSP、.NET,第四章 客户端开发技术,教学目的 介绍HTML、CSS等开发技术及相应标准，并简要介绍JavaScript等技术。重点是理解掌握基本的HTML语法，能手工编写简单的静态页面，能看懂较复杂的HTML页面的语法结构，为后面服务器端开发技术的学习做准备。,基本教学内容,HTML基本文件结构 文本相关语法 图像相关语法 表格语法 超链接语法 表单使用方法 框架使用 样式表 脚本语言JavaScript简介 Flash简介 Java

3、Applet简介,学习重点与难点,重点： HTML基本语法结构 表格使用方法 表单使用方法 难点： 表格的复杂使用方法 利用表单与后台程序进行交互的原理及规则,HTML简介,概念： HTML（HyperText Markup Language），基于HTTP协议，在Web上以超文本方式出版本信息的国际化语言 特点： 非线性 基本单元：超文本结点 以链接实现不同结点间的联系 国际性的规范 纯文本格式,HTML的基本文档结构, New Document ,HTML的基本文档结构, Hello ! Good morning ! ,HTML的基本文档结构,文档头： 要素： TITLE：显示窗口的标题

4、META：文档的最基本的元信息。除了提供文档字符集、使用语言、作者等基本信息外，还涉及对关键词和网页描述的设定。 一般给浏览器或编辑人员用，不会直接显示出来,HTML的基本文档结构,文档体： 浏览器真正要展现的部分。 主要元素类型： 文本 图像 表格 表单 框架 超链接,HTML的基本文档结构,注意：大多数元素/子元素为成对出现，许多元素内部可包含其它元素，但各元素间不得出现错位嵌套的情况！即如下情况绝不允许出现！ 实际内容 ,页面背景控制, ,字体与颜色,标题 这是一级标题 字体控制,文本类元素用法,1）空格 通常会将多个空格压缩为单个 被浏览器解释为不可压缩的字符，当需要显示多个空格时可用

5、到 2）字体属性控制 字体控制,文本类元素用法,3）行与段落控制 段落控制： ：相关字体大小，颜色控制 行控制： 预先格式化文本 它保留了空格和换行 文本块 ,列表控制,无序列表 项目1 项目2 项目3 ,编号列表 项目1 项目2 项目3 ,定义式列表 项目1 项目1.1 项目2 ,图像控制,1）标准用法 2）Align用法： 其中left和right用以指定图像的水平位置，使图像向左或向右对齐成为浮动图像，此时，图像下面及侧面的文字和图像将在右侧或左侧环绕该图像。,图像控制,其余各选项值则是控制图像和文本的垂直相对位置。 其中：top：使图像与文本的最高点对齐； texttop：使图像与本行

6、的最高文本对齐（通常与top效果相同，但不完全相同）； middle：使当前行的基准线与图像中线对齐； absmiddle：使当前行中线与图像中线对齐； baseline：使图像基准线与当前行基准线对齐； bottom：使图像底部与当前行基准线对齐； absbottom：使图像底部与当前行底部对齐。,超链接语法,1）一般用法 index 2）书签链接 书签链接示例 书签,超链接语法,3）分块链接 利用一个图像，使该图像的不同部分指向不同的链接。例如： ,表格相关语法,1）基本语法 姓名 性别 年龄 张三 男 55 ,表格相关语法,2）表格的合并 多列合并的表格 人员统计 张三 李四 王五 34

7、2145 ,表格相关语法,多行合并的表格 人员统计张三 李四 王五 342145 ,表格尺寸/位置控制, 张三 男 55 ,表单, 标签 用于为用户输入创建 HTML 表单。 表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。 表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。 表单用于向服务器传输数据。,表单控制,必选,可选,表单元素,按钮（button） 复选框 单选框 菜单（下拉选择框） 文本框（单行，多行） 文件选择控件 隐藏控件 图形（image）,表单,表单元素的基本标签 FORM INPUT TEXTAR

8、EA SELECT,CSS,CSS: 级联样式表（Cascading Style Sheet）简称“CSS 基本功能： 更有效地控制网页外观，便于页面总体风格的统一和改变 常用功能： 控制文字的大小、颜色、字体,CSS基本语法,CSS 规则 由两个主要的部分构成：选择器，以及一条或多条声明。 selector declaration1; declaration2; . declarationN ,CSS基本语法,层叠次序 样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。 1浏览器缺省设置 2外部样式表 3内部样式表（位于 标签内部） 4内嵌样式（在 HTML 元

9、素内部）,CSS基本语法,几种常用控制方法 P font-size:9px; P.classname1 font-size:12px; P#New font-size:18px; .First color :red; #Second font-size:18px; Sample!,CSS基本语法,ID 与 CLASS 区别 1、在CSS文件里书写时，ID加前缀#；CLASS用. 2、id一个页面只可以使用一次；class可以多次引用。 3、ID是一个标签的标识，用于区分不同的结构和内容 4、id是先找到结构/内容，再给它定义样式；class是先定义好一种样式，再套给多个结构/内容。,常见属性,

10、字体属性 font-size:9px; 1) xx-small | x-small | small | medium | large | x-large | xx-large 2) 9px; 9pt; font-family:宋体, Times New Roman; 颜色属性 Color:red; Color:#FF0000; Background-color:white;,常见属性,文本属性 Text-align: left; Vertical-align: top; 行高属性 Line-height:9px; 120% 空白 margin-top: margin-bottom,CSS基本语

11、法,典型应用举例 a:link color: rgb(0,0,102); text-decoration: none; a:visited color: #FF00FB; a:active color: rgb(153,0,255); a:hover color: red; ,HTML/CSS的注意事项,各类标记一定要成对出现 CSS的作用范围一定要清晰 注意ID与Class的作用,JavaScript简介,JavaScript是客户端脚本语言， avaScript是在用户的浏览器上运行，不需要服务器的支持而可以 独立运行，可以减少服务器的压力。 基于JAVA和C,C+等多种语法结构 代码加载

12、前需要解释后运行，运行速度较慢 程序编写简单，但安全性相对较差。,JavaScript简介,使用方法 外部脚本文件 混合在HTML文档中，一般位于头部 内嵌脚本 document.write(这是第一个JavaScript文件!) ,数据类型,动态类型：var a 数值型: var a = 3; 布尔值:Boolean var x=true var y=false 字符型 var myname=“小王; 数组 var students=new Array(); students0=“wang; students1=“li; students2=“zhang;,对 象,引用JavaScript内

13、部对象 由浏览器环境中提供 创建新对象,常用内部对象,window对象 全局变量是 window 对象的属性。 全局函数是 window 对象的方法。 window.innerHeight - 浏览器窗口的内部高度 window.innerWidth - 浏览器窗口的内部宽度 document对象 document.getElementById(header); 内建对象： String、Date、Array 等等。,事件处理与交互性的实现,键盘事件 鼠标事件 焦点事件 选择事件 状态改变事件 onAbort,事件处理与交互性的实现,键盘事件： OnKeyUp OnKeyDown OnKeyP

14、ress,事件处理与交互性的实现,鼠标事件 OnMouseDown OnMouseUp OnClick OnDbClick OnMouseOver OnMouseMove OnMouseOut,事件处理与交互性的实现,焦点事件 OnFucus OnBlur 状态改变事件 OnLoad OnUnLoad OnChange,JavaScript简介,JavaScript中的几个常见应用 校验表单输入的正确性 控制表单提交 控制动态显示,JavaScript中的几个常见应用,校验表单项 . . ,JavaScript中的几个常见应用,控制表单提交 . function SubmitForm() form1.submit(); ,Flash简介,优点： 动画是矢量的，（不论放大多少倍依然清晰，而不象一般的图形文件，当放大他们的时候，会出现马赛克效应，看到的是一个个方形的色块。） Flash文件可以做得很小 用Flash生成的文件是代码保护的，别人无法看到其源代码，还可禁止下载。 Flash使用起来很容易