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

Web开发技术综述,1 三大支撑技术,2 开发技术综述,URL HTTP HTML,客户端开发技术 服务器端开发技术,Web开发技术,1 三大支撑技术,URL HTTP HTML,（Unified Resource Locator）统一资源标志符，互联网上进行统一命名和定位的一种标准机制。,（HyperText Transportation Protocol）Web服务器与客户进行传输信息的标准协议。,(HyperText Markup Language)超文本标记语言。“超”文本的含义：不限于普通文本，利用普通文本表达多媒体信息。,Web开发技术,2开发技术综述,两条主线：,HTMLJavascript（动态网页）CSS flash XMLCGI ASP PHP JSP.NET,重点理解概念,HTML Javascript、CSSJSP、.NET,第四章 客户端开发技术,教学目的介绍HTML、CSS等开发技术及相应标准，并简要介绍JavaScript等技术。重点是理解掌握基本的HTML语法，能手工编写简单的静态页面，能看懂较复杂的HTML页面的语法结构，为后面服务器端开发技术的学习做准备。,基本教学内容,HTML基本文件结构文本相关语法图像相关语法表格语法超链接语法表单使用方法框架使用样式表脚本语言JavaScript简介Flash简介JavaApplet简介,学习重点与难点,重点：HTML基本语法结构 表格使用方法表单使用方法难点：表格的复杂使用方法利用表单与后台程序进行交互的原理及规则,HTML简介,概念：HTML（HyperText Markup Language），基于HTTP协议，在Web上以超文本方式出版本信息的国际化语言特点：非线性基本单元：超文本结点以链接实现不同结点间的联系国际性的规范纯文本格式,HTML的基本文档结构,New Document,HTML的基本文档结构,Hello!Good morning!,HTML的基本文档结构,文档头：要素：TITLE：显示窗口的标题META：文档的最基本的元信息。除了提供文档字符集、使用语言、作者等基本信息外，还涉及对关键词和网页描述的设定。一般给浏览器或编辑人员用，不会直接显示出来,HTML的基本文档结构,文档体：浏览器真正要展现的部分。主要元素类型：文本图像表格表单框架超链接,HTML的基本文档结构,注意：大多数元素/子元素为成对出现，许多元素内部可包含其它元素，但各元素间不得出现错位嵌套的情况！即如下情况绝不允许出现！实际内容,页面背景控制,字体与颜色,标题 这是一级标题字体控制,文本类元素用法,1）空格 通常会将多个空格压缩为单个 被浏览器解释为不可压缩的字符，当需要显示多个空格时可用到2）字体属性控制 字体控制,文本类元素用法,3）行与段落控制段落控制：相关字体大小，颜色控制行控制：预先格式化文本 它保留了空格和换行文本块,列表控制,无序列表 项目1项目2项目3,编号列表项目1项目2项目3,定义式列表项目1项目1.1项目2,图像控制,1）标准用法 2）Align用法：其中left和right用以指定图像的水平位置，使图像向左或向右对齐成为浮动图像，此时，图像下面及侧面的文字和图像将在右侧或左侧环绕该图像。,图像控制,其余各选项值则是控制图像和文本的垂直相对位置。其中：top：使图像与文本的最高点对齐；texttop：使图像与本行的最高文本对齐（通常与top效果相同，但不完全相同）；middle：使当前行的基准线与图像中线对齐；absmiddle：使当前行中线与图像中线对齐；baseline：使图像基准线与当前行基准线对齐；bottom：使图像底部与当前行基准线对齐；absbottom：使图像底部与当前行底部对齐。,超链接语法,1）一般用法index2）书签链接书签链接示例书签,超链接语法,3）分块链接利用一个图像，使该图像的不同部分指向不同的链接。例如：,表格相关语法,1）基本语法 姓名 性别 年龄 张三 男 55,表格相关语法,2）表格的合并多列合并的表格 人员统计 张三 李四 王五342145,表格相关语法,多行合并的表格 人员统计张三 李四 王五342145,表格尺寸/位置控制,张三 男 55,表单,标签用于为用户输入创建 HTML 表单。表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。表单用于向服务器传输数据。,表单控制,必选,可选,表单元素,按钮（button）复选框单选框菜单（下拉选择框）文本框（单行，多行）文件选择控件隐藏控件图形（image）,表单,表单元素的基本标签FORMINPUTTEXTAREASELECT,CSS,CSS:级联样式表（Cascading Style Sheet）简称“CSS基本功能：更有效地控制网页外观，便于页面总体风格的统一和改变常用功能：控制文字的大小、颜色、字体,CSS基本语法,CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。selector declaration1;declaration2;.declarationN,CSS基本语法,层叠次序样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。1浏览器缺省设置2外部样式表3内部样式表（位于 标签内部）4内嵌样式（在 HTML 元素内部）,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是先定义好一种样式，再套给多个结构/内容。,常见属性,字体属性font-size:9px;1)xx-small|x-small|small|medium|large|x-large|xx-large2)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基本语法,典型应用举例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+等多种语法结构代码加载前需要解释后运行，运行速度较慢程序编写简单，但安全性相对较差。,JavaScript简介,使用方法外部脚本文件混合在HTML文档中，一般位于头部内嵌脚本 document.write(这是第一个JavaScript文件!),数据类型,动态类型：var a 数值型:var a=3;布尔值:Booleanvar x=true var y=false 字符型 var myname=“小王;数组var students=new Array();students0=“wang;students1=“li;students2=“zhang;,对 象,引用JavaScript内部对象由浏览器环境中提供创建新对象,常用内部对象,window对象全局变量是 window 对象的属性。全局函数是 window 对象的方法。window.innerHeight-浏览器窗口的内部高度window.innerWidth-浏览器窗口的内部宽度 document对象document.getElementById(header);内建对象：String、Date、Array 等等。,事件处理与交互性的实现,键盘事件 鼠标事件 焦点事件 选择事件 状态改变事件 onAbort,事件处理与交互性的实现,键盘事件：OnKeyUpOnKeyDownOnKeyPress,事件处理与交互性的实现,鼠标事件OnMouseDownOnMouseUpOnClickOnDbClickOnMouseOverOnMouseMoveOnMouseOut,事件处理与交互性的实现,焦点事件OnFucusOnBlur状态改变事件OnLoadOnUnLoadOnChange,JavaScript简介,JavaScript中的几个常见应用校验表单输入的正确性控制表单提交控制动态显示,JavaScript中的几个常见应用,校验表单项.,JavaScript中的几个常见应用,控制表单提交.function SubmitForm()form1.submit();,Flash简介,优点：动画是矢量的，（不论放大多少倍依然清晰，而不象一般的图形文件，当放大他们的时候，会出现马赛克效应，看到的是一个个方形的色块。）Flash文件可以做得很小用Flash生成的文件是代码保护的，别人无法看到其源代码，还可禁止下载。Flash使用起来很容易（凡是用过类似photoshop等类似的图形软件的人就可以很轻松的掌握用Flash制作动画。）,Flash简介,Flash的播放是采用流技术，动画是边下载边演示，如果速度控制得好是几乎感觉不到文件还没完全下载的。缺点：必须安装插件PLUG-IN，才能被浏览器所接受。这样做显然使用户在第一次浏览时会增加一些麻烦，但另一方面，它却避免了浏览器之间的差异。,JavaApplet简介,优点：功能较强无须插件缺点：编程较复杂,JavaApplet简介,