实用页面设计方法_1_WEB开发基础

2010年6月24日星期四3Sept.2008©NeusoftConfidential6June.2008©NeusoftConfidentialCopyright2008ByNeusoftGroup.Allrightsreserved东软实训中心实用页面设计方法——WEB开发基础2010年6月24日星期四3Sept.2008Confidential10Dec.2008Confidential课程结构内容课时（H）第一章：基本概念0.3第二章：WEB应用简介0.22010年6月24日星期四3Sept.2008Confidential10Dec.2008Confidential第一章：基本概念学时：0.3学时教学方法：讲授ppt＋课堂演示目标:本章旨在向学员简要介绍WEB的基本概念，通过本课的学习，学员应该掌握如下知识：1）了解WEB开发的基本概念2）了解HTTP协议、C/S与B/S结构的相关知识2010年6月24日星期四3Sept.2008Confidential10Dec.2008Confidential1.1常用的概念（一）•超文本（hypertext）•超媒体（hypermedia）•网页（WEBPage）2010年6月24日星期四3Sept.2008Confidential10Dec.2008Confidential1.1常用的概念（二）•WEB服务器（WEBServer）•WEB客户端（WEBClient）•WEB浏览器（WEBBrowser）2010年6月24日星期四3Sept.2008Confidential10Dec.2008Confidential1.1常用的概念（三）•统一资源定位符（URL）–UniformResourceLocator–描述信息资源–组成：协议名://+服务器地址+:端口+/目录/具体资源名•统一资源标识符（URI）–UniformResourceIdentifier–包括URL和URN2010年6月24日星期四3Sept.2008Confidential10Dec.2008Confidential1.2HTTP协议•超文本传输协议（HTTP）–HyperTextTransferProtocol–是WEB开发的核心–在TCP/IP协议之上(面向应用层的协议)–网址以“http://”开头2010年6月24日星期四3Sept.2008Confidential10Dec.2008Confidential1.2.1HTTP协议特点•特点–无连接–无状态2010年6月24日星期四3Sept.2008Confidential10Dec.2008Confidential1.2.2HTTP通信机制•通信机制–1、建立连接–2、发送请求–3、发送响应–4、关闭连接2010年6月24日星期四3Sept.2008Confidential10Dec.2008Confidential1.2.3模拟HTTP通信响应•模拟通信–环境：jdk、Tomcat–操作•1、建立test.jsp•2、telnetlocalhost8080•3、GET/test.jspHTTP/1.02010年6月24日星期四3Sept.2008Confidential10Dec.2008Confidential1.2.4HTTP请求/响应（一）•HTTP请求（get）–GET/books?name=Professional%20AjaxHTTP/1.1–Host:–User-Agent:Mozilla/5.0(Windows;U;WindowsNT5.1;en-US;rv:1.7.6)–Gecko/20050225Firefox/1.0.1–Connection:Keep-Alive–（此处空一行）请求行请求头传参2010年6月24日星期四3Sept.2008Confidential10Dec.2008Confidential1.2.4HTTP请求/响应（一）•HTTP请求（post）–POST/HTTP/1.1–Host:–User-Agent:Mozilla/5.0(Windows;U;WindowsNT5.1;en-US;rv:1.7.6)–Gecko/20050225Firefox/1.0.1–Content-Type:application/x-–Content-Length:40–Connection:Keep-Alive–（此处空一行）–name=Professional%20Ajax&publisher=Wiley请求行请求头请求数据体2010年6月24日星期四3Sept.2008Confidential10Dec.2008Confidential1.2.4HTTP请求/响应（二）•HTTP响应–HTTP/1.1200OK–Set-Cookie:JSESSIONID=D5695E27216A1A726DCD7E4424D7C8C9;Path=/–Content-Type:text/html–Content-Length:40–Date:Wed,20Feb200806:37:25GMT–Server:Apache-Coyote/1.1–Connection:close–（此处空一行）–htmlbody–i=1–/html/body应答状态行应答头应答体2010年6月24日星期四3Sept.2008Confidential10Dec.2008Confidential1.2.5WEB访问处理过程2010年6月24日星期四3Sept.2008Confidential10Dec.2008Confidential1.3.1C/S与B/S概念•C/S架构Client/Server–主要应用于局域网–充分利用两端硬件环境，降低系统通信开销，提供丰富的客户端控制能力•B/S架构Browser/Server–主要应用于广域网–软件业务逻辑大部分在服务器端实现，不必开发客户端，应用广泛，易于维护升级•Web应用程序开发采用B/S模式2010年6月24日星期四3Sept.2008Confidential10Dec.2008Confidential1.3.2C/S与B/S比较比较C/SB/S硬件服务器配置较低服务器配置较高安全用户固定，强用户不可知，较弱维护两端维护服务器端维护客户端软件需要安装专门的客户端软件不需要安装专门的客户端软件，有浏览器就行开发维护成本较高较低服务器负荷低，处理多在客户端完成高，处理多在服务器端完成应用范围范围小（一般局域网）范围广（广域网）2010年6月24日星期四3Sept.2008Confidential10Dec.2008Confidential第二章：WEB应用简介学时：0.2学时教学方法：讲授ppt＋课堂演示目标:本章旨在向学员简要介绍WEB的相关应用，通过本课的学习，学员应该掌握如下知识：1）了解WEB开发中相关技术应用2010年6月24日星期四3Sept.2008Confidential10Dec.2008Confidential2.1WEB工作模式•工作模式：请求Æ应答Æ显示–每当用户向服务器发送一个请求时，都是由服务器接收请求并处理，处理完毕后服务器将信息发送至浏览器进行显示–用户每个请求由单独的一个页面来显示，发送一个请求就会获取一次，显示一次2010年6月24日星期四3Sept.2008Confidential10Dec.2008Confidential2.2WEB应用程序•WEB应用程序–WEB开发采用B/S结构，以HTML语言与HTTP协议为基础，为用户提供界面一致的信息浏览方式–每个WEB应用程序由多个页面组成，每个页面对应到服务器的一个业务逻辑•应用程序开发的页面–静态页面内容及效果相同–动态页面不同时间、不同人访问同一网址，产生不同的页面2010年6月24日星期四3Sept.2008Confidential10Dec.2008Confidential2.3WEB开发技术•WEB开发的前台技术–制作静态网页–JavaScript和VBScript实现客户端的动态效果•WEB开发的后台技术–制作动态网页–数据库访问2010年6月24日星期四3Sept.2008Confidential10Dec.2008Confidential2.4WEB开发的前台技术•制作静态网页–HTML–Client-SideScripting•JavaScript•VBScript–CSS–DOM–ActiveX–JavaApplet2010年6月24日星期四3Sept.2008Confidential10Dec.2008Confidential2.4.1HTML•超文本标记语言2010年6月24日星期四3Sept.2008Confidential10Dec.2008Confidential2.4.2JavaScript•在客户端实现网页的动态效果。2010年6月24日星期四3Sept.2008Confidential10Dec.2008Confidential2.4.2JavaScript-示例HTMLHEADSCRIPTlanguage=JavaScriptfunctionokbutton_click(){alert(Thisisatest!);}/SCRIPT/HEADBODYINPUTtype=buttonvalue=OK!onclick=okbutton_click()//BODY/HTML2010年6月24日星期四3Sept.2008Confidential10Dec.2008Confidential2.4.3CSS•层叠样式表单(CascadingStyleSheets)，——externalCss.html–实现页面内容与样式的分离•在HTML中安排内容•在CSS文档中设计内容的显示样式2010年6月24日星期四3Sept.2008Confidential10Dec.2008Confidential2.4.3CSS-示例HTMLHEADSTYLEtype=text/cssbody{color:red}h1{color:#0000ff}P.test{color:green}/STYLE/HEADBODYLABEL我是标签/LABLEBR/H1我是题目/H1Pclass=test我是段落P//BODY/HTML2010年6月24日星期四3Sept.2008Confidential10Dec.2008Confidential2.4.4DOM•文档对象模型–将Web浏览器窗口以及其中的内容都看作对象，根据面向对象的思想，访问每个对象的属性和方法。2010年6月24日星期四3Sept.2008Confidential10Dec.2008Confidential2.4.5ActiveX控件–微软公司提出的一项增加Web浏览器功能的技术，利用专门的Web浏览器插件来实现网页中的某些特殊效果——ActiveX控件–用户的计算机中必须安装这些插件才能显示效果–存在安全风险，逐渐的被抛弃2010年6月24日星期四3Sept.2008Confidential10Dec.2008Confidential2.4.6JavaApplet•Java小应用程序–增强Web浏览器功能–Web浏览器下载HTML文档的同时，将JavaApplet程序下载到用户的计算机中，然后调用用户计算机的JVM执行该程序，并最终在用户的Web浏览器窗口中显示执行结果–执行速度慢2010年6月24日星期四3Sept.2008Confidential10Dec.2008Confidential2.5WEB开发的后台技术•制作动态网页–ASP、JSP、PHP–JavaServlet•数据库访问2010年6月24日星期四3Sept.2008Confid