网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社日期日期第1章 WWW简介 教学目标教学目标教学重点教学重点教学过程教学过程网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社教学目标l 了解了解Internet与与WWW的发展历程的发展历程l 熟悉熟悉Web的基本概念、相关技术的基本概念、相关技术l 掌握掌握Web运用开发的基本需求与主要的实运用开发的基本需求与主要的实 现方法现方法第第2页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社教学重点l Web的基本概念、相关技术的基本概念、相关技术l Web运用开发的基本需求与主要实现方法运用开发的基本需求与主要实现方法第第3页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社教学过程lInternet与与WWW的发展历程的发展历程lWeb的基本概念的基本概念lWeb技术基础及高级技术技术基础及高级技术lWeb应用开发基础应用开发基础第第4页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社1.1 Internet与WWW第第5页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社Internet的发展史lARPANET1969年,美国国防部(DoD,DepartmentofDefense)实验性质的包交换(packet-switched)网络系统1980年,分成APARNET及Milnet:军事用途l1970年USENET,1980年CSNET及BITNET学术用途lNSFNET(NationalScienceFoundationNetwork)1986年,美国国家科学基金会取代ARPANET成为连结网络的主要网络lINTERNET第第6页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社 Internet 的历史 第第7页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社Internet的演进过程19451995Memex Conceived1945WWWCreated1989MosaicCreated1993A MathematicalTheory of Communication1948Packet Switching Invented1964SiliconChip1958First Vast ComputerNetworkEnvisioned1962ARPANET1969TCP/IPCreated1972InternetNamed and Goes TCP/IP1984HypertextInvented1965Age ofeCommerceBegins1995第第8页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社1.1 Internet与WWWInternet的技术基础的技术基础lTCP/IP 包括近包括近100个协议，其中个协议，其中TCP是传送控制协议是传送控制协议;IP(Internet Protocol)是网际网协议。是网际网协议。 l域名系统域名系统(DNS) 实现域名与其所对应的实现域名与其所对应的IP地址进行对应和转地址进行对应和转换换 第第9页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社1.1 Internet与WWWInternet提供的服务提供的服务 lWWW服务服务 l文件传输服务文件传输服务(FTP)l电子邮件服务电子邮件服务(E-mail) l远程登录服务远程登录服务(Telnet) l 第第10页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社1.2 WWW概述世界上最大的网中网Internet的核心是TCP/IP协议和包交换Internet实现了与公用电话网的互连Internet是一个用户自己的网络From Dr. Vinton Cerf, Co-Creator of TCP/IP第第11页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社1.2 WWW概述概述Web的技术基础的技术基础 l统一资源定位技术统一资源定位技术(URL)实现全球资源的精确定位；用应用层协议实现全球资源的精确定位；用应用层协议(HTTP)实现实现分布式的信息传送；以超文本技术分布式的信息传送；以超文本技术(HTML)实现信息的实现信息的表现。这三个特点无一不与信息的分发、获取和利用表现。这三个特点无一不与信息的分发、获取和利用有关。有关。 l超文本传送协议超文本传送协议(HTTP) l超文本标记语言超文本标记语言(HTML)l浏览器浏览器(Browser) 第第12页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社1.2 WWW概述概述Web的高级开发技术的高级开发技术 lCGIlApplet lJavaScript lServlet、JSP、ASP和和PHP等等 lFlash 第第13页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社1.2 WWW概述概述Web的高级开发技术的高级开发技术 lCGI通用网关接口通用网关接口(Common Gateway Interface，CGI) 可采用多种编程语言编写可采用多种编程语言编写可访问数据库可访问数据库但存在一定的安全隐患但存在一定的安全隐患第第14页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社1.2 WWW概述概述Web的高级开发技术的高级开发技术 lApplet 属于属于Java技术技术 “胖胖”客户应用客户应用 编程存在一定限制编程存在一定限制客户端必须安装合适的软件客户端必须安装合适的软件第第15页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社1.2 WWW概述概述Web的高级开发技术的高级开发技术 lJavaScript 基于对象和事件驱动并具有安全性能的脚本基于对象和事件驱动并具有安全性能的脚本语言语言 形成了标准，受到广泛支持形成了标准，受到广泛支持 能丰富客户端页面效果，并丰富用户体验能丰富客户端页面效果，并丰富用户体验可能存在不完全兼容的情况可能存在不完全兼容的情况第第16页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社1.2 WWW概述概述Web的高级开发技术的高级开发技术 lServlet、JSP、ASP和和PHP等等 在服务器端运行在服务器端运行属于瘦客户端应用属于瘦客户端应用 动态生成动态生成HTML 编程难度较大编程难度较大一定程度上受到系统软硬件条件的限制一定程度上受到系统软硬件条件的限制第第17页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社1.2 WWW概述概述Web的高级开发技术的高级开发技术 lFlash 可生成高度交互性的应用可生成高度交互性的应用 需要客户端软件支持需要客户端软件支持 制作需要专用的软件制作需要专用的软件第第18页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社1.2 WWW概述概述WWW的将来的将来 lDHTML革命革命 lXML技术技术 lAJAX技术技术 第第19页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社1.3 Web应用开发的需求与方法应用开发的需求与方法Web需求的发展需求的发展l静态页面静态页面 l动态页面动态页面 l活动页面活动页面 第第20页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社1.3 Web应用开发的需求与方法应用开发的需求与方法Web需求的发展需求的发展l静态页面静态页面 第第21页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社1.3 Web应用开发的需求与方法应用开发的需求与方法Web需求的发展需求的发展l动态页面动态页面 第第22页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社1.3 Web应用开发的需求与方法应用开发的需求与方法Web需求的发展需求的发展l活动页面活动页面 第第23页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社1.3 Web应用开发的需求与方法应用开发的需求与方法应用程序发展的需求应用程序发展的需求 l两层结构两层结构(Two-Tier) 客户机、服务器客户机、服务器胖客户机胖客户机/瘦服务器瘦服务器 发布较困难发布较困难第第24页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社1.3 Web应用开发的需求与方法应用开发的需求与方法应用程序发展的需求应用程序发展的需求 l三层结构三层结构(three-tier) 表示层、功能层和数据层表示层、功能层和数据层 瘦客户机瘦客户机/胖服务器胖服务器 更灵活，更好的弹性更灵活，更好的弹性第第25页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社1.3 Web应用开发的需求与方法应用开发的需求与方法应用程序发展的需求应用程序发展的需求 l基于基于Web的的B/S模式模式 静态模式静态模式一般动态模式一般动态模式 多层动态模式多层动态模式 选取原则选取原则 第第26页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社日期日期第2章 网站策划设计与服务器架设管理 教学目标教学目标教学重点教学重点教学过程教学过程网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社教学目标l 掌握网站设计的基本流程掌握网站设计的基本流程l 掌握网站策划的方法掌握网站策划的方法l 掌握网站设计的步骤和策略掌握网站设计的步骤和策略l 掌握网站运行环境的建立与配置掌握网站运行环境的建立与配置l 了解网站的安全与防范策略了解网站的安全与防范策略第第28页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社教学重点l网站设计的步骤和策略网站设计的步骤和策略 l网站运行环境的建立与配置网站运行环境的建立与配置 第第29页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社教学过程l网站设计的总体流程网站设计的总体流程 l网站策划方法网站策划方法l网站的设计网站的设计 l网站的架设方法网站的架设方法l网站的安全网站的安全 第第30页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社2.1 网站设计的总体流程网站设计的总体流程初始会商：收集待建设网站的关键信息，包括：站点的目标受众，要发布的主要内容等概念开发：设计人员根据已收集到的信息，开始构思。通常，网站设计师以草图的形式呈现，其中包含整个网站的结构，不同的布局设计及导航等内容综合：当设计人员的构思得到了确认，就可以开始制作一些初始图样，之后再配合文字加以说明。HTML布局和导航：若前面的设计获得了确认，则进入编制Web页面样例阶段，加入导航器，并进行初次的尝试和体验第第31页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社2.1 网站设计的总体流程网站设计的总体流程媒体制作：经反复修改后，站点的外观和感受最终得到了认可，此时再制作所需的各种媒体素材，并进行优化内容整合：利用各种技术将不同的媒体素材(HTML、CSS、JavaScript、JAVA、.NET、FLASH等)，按照网站的目标有机的整合在一起网站测试：在站点被正式发布之前，测试人员要完整测试整个网站，尽量减少站点中包含的错误，并在修改后进行必要的回归测试交付：一旦测试完成，就可以正式启用该网站。这标志着网站正式进入运行阶段，当然网站的完善还需要持续的做下去第第32页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社2.2 网站策划网站策划 (1) 建立网站前的市场分析建立网站前的市场分析(2) 建设网站目的及功能定位建设网站目的及功能定位 (3) 网站的技术解决方案网站的技术解决方案(4) 网站内容规划网站内容规划(5) 网页设计网页设计(6) 网站测试网站测试(7) 网站发布与推广网站发布与推广(8) 网站维护网站维护(9) 网站建设日程表网站建设日程表(10) 费用明细费用明细第第33页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社2.3 网站的设计网站的设计网站的网站的CI形象设计形象设计l设计网站的标志设计网站的标志(logo) l设计网站的主色调设计网站的主色调 l设计网站的标准字体设计网站的标准字体 l设计网站的宣传标语设计网站的宣传标语 第第34页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社2.3 网站的设计网站的设计网站的总体结构设计网站的总体结构设计 l网站的目录结构网站的目录结构 l合理设计网页间的逻辑结构合理设计网页间的逻辑结构 第第35页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社2.3 网站的设计网站的设计网站的版面设计网站的版面设计 l形成草案形成草案 l做出粗略布局做出粗略布局 l定案定案 第第36页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社2.3 网站的设计网站的设计网站的色彩设计网站的色彩设计 l主色调的选择主色调的选择l色彩搭配方案色彩搭配方案 第第37页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社2.3 网站的设计网站的设计 网站导航设计网站导航设计 l放置在重要的位置上放置在重要的位置上 l注意超链接颜色与一般文字的区分注意超链接颜色与一般文字的区分 l测试所有的超链接与导航按钮的有效性测试所有的超链接与导航按钮的有效性 l让超链接的字串长短适中让超链接的字串长短适中 l对较长的文本提供必要的链接对较长的文本提供必要的链接 l在较长的网页内提供目录与标题在较长的网页内提供目录与标题 l暂时不提供到尚未完成网页的超链接暂时不提供到尚未完成网页的超链接 l不要在一篇短文里提供太多的超链接不要在一篇短文里提供太多的超链接 第第38页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社2.3 网站的设计网站的设计网站信息的可用性设计网站信息的可用性设计 l文字列表形式文字列表形式 l图片形式图片形式 l图片加文字内容形式图片加文字内容形式 l使用迷你块使用迷你块第第39页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社2.4 网站的架设：网站的架设：IIS的安装与配置的安装与配置 lWeb服务器是通过软件实现的服务器是通过软件实现的l常用软件：常用软件：IIS和和Apache 第第40页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社Web 服务器服务器Web 服务器服务器装有装有 Web 浏览器浏览器的客户端的客户端网络网络TCP/IPTCP/IPHTTPIP 地址地址Internet ExplorerHTTP第第41页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社IIS 的基本功能的基本功能Microsoft Internet 信息服务信息服务 (IIS)l索引服务索引服务l安全套接字层安全套接字层lWindows Media 服务服务l附加的开发人员支持附加的开发人员支持Active Server Pages （活动（活动服务页面）服务页面）VBScript 和和 JavaScript远程管理远程管理InternetIIS第第42页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社IIS 的版本的版本lIIS 1.0 Windows NT 3.51lIIS 2.0 Windows NT 4.0lIIS 3.0 Windows NT 4.0 with SP3 InstalledlIIS 4.0 Windows NT 4.0 with Option Pack InstalledlIIS 5.0 Windows 2000lIIS 5.1 Windows XPlIIS 6.0 Windows Server 2003第第43页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社lIIS 的安装的安装2.4 网站的架设：网站的架设：IIS的安装与配置的安装与配置 第第44页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社lIIS 的配置的配置2.4 网站的架设：网站的架设：IIS的安装与配置的安装与配置 第第45页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社lApache 的安装的安装2.5 网站的架设：网站的架设：Apache的安装与配置的安装与配置 第第46页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社lApache 的配置的配置通过修改文本文件的方式（通过修改文本文件的方式（httpd.conf）Port，ServerName，虚拟目录等参数的配置，虚拟目录等参数的配置配置文件更改后，要重新启动配置文件更改后，要重新启动Apache 2.5 网站的架设：网站的架设：Apache的安装与配置的安装与配置 第第47页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社lTomcat的安装的安装需要先安装需要先安装JRE 安装后运行安装后运行startup.bat来启动来启动Tomcat服务器服务器 2.6 网站架设：网站架设：Tomcat的安装与配置的安装与配置 第第48页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社2.7 网站安全网站安全l网站安全威胁网站安全威胁 信息截取信息截取 内部窃密和破坏内部窃密和破坏 黑客黑客 技术缺陷技术缺陷 计算机病毒计算机病毒 拒绝服务攻击拒绝服务攻击 第第49页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社2.7 网站安全网站安全l防范策略防范策略 操作系统安全操作系统安全加密加密防火墙防火墙安全认证安全认证反病毒反病毒入侵检测入侵检测安全扫描工具安全扫描工具最后的补救措施最后的补救措施勤于备份勤于备份 第第50页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社日期日期第3章 HTTP协议及其开发与HTML语言基础教学目标教学目标教学重点教学重点教学过程教学过程网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社教学目标l 理解理解HTTP的基本原理及运行机制的基本原理及运行机制l 了解了解HTTP应用开发的基本方法应用开发的基本方法l 掌握掌握HTML的标签、文档结构和基本语法的标签、文档结构和基本语法第第52页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社教学重点lHTTP的运行机制的运行机制lHTML的基本用法的基本用法第第53页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社教学过程lHTTP协议协议 lHTML基础基础lHTML的基本语法的基本语法 lHTML实例实例第第54页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社3.1 HTTP协议协议 我们在浏览器的地址栏里输入的网站地址叫做URL(Uniform Resource Locator，统一资源定位符）当你在浏览器的地址框中输入一个URL或是单击一个超级链接时，URL就确定了要浏览的地址。浏览器通过超文本传输协议(HTTP)，将Web服务器上站点的网页代码提取出来，并翻译成漂亮的网页第第55页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社URL的含义http:/www.microsoft.com/china/index.htm 1.http:/：代表超文本传输协议，通知某台服务器：代表超文本传输协议，通知某台服务器显示显示Web页，通常不用输入页，通常不用输入2.www：代表一个：代表一个Web(万维网万维网)服务器服务器3.Microsoft.com/：这是装有：这是装有Web服务器的域名，服务器的域名，或站点服务器的名称或站点服务器的名称4.China/：为该服务器上的子目录，就好像个人电：为该服务器上的子目录，就好像个人电脑上的文件夹脑上的文件夹5.Index.htm：index.htm是上述文件夹中的一个是上述文件夹中的一个HTML文件文件(网页网页)第第56页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社HTTP HTTP协议协议(HypertextTransfer Protocol ) ，即超文本传输协议，即超文本传输协议 它用于从它用于从WWW服务器传输超文本到本地浏览服务器传输超文本到本地浏览器的传送协议。它可以使浏览器更加高效，使网器的传送协议。它可以使浏览器更加高效，使网络传输减少络传输减少 它不仅保证计算机正确快速地传输超文本文档，它不仅保证计算机正确快速地传输超文本文档，还确定传输文档中的哪一部分，以及哪部分内容还确定传输文档中的哪一部分，以及哪部分内容首先显示首先显示(如文本先于图形如文本先于图形)等等第第57页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社3.1.2 HTTP的宏观工作原理的宏观工作原理 客户机（IE）服务器【server】请求响应统一资源标识符统一资源标识符(URL)协议版本号协议版本号MIME信息（请求修饰符、客户机信息和可能的内容）信息（请求修饰符、客户机信息和可能的内容）状态行（信息的协议版本号、一个成功或错误的代码）状态行（信息的协议版本号、一个成功或错误的代码）MIME信息（信息（ 服务器信息、实体信息和可能的内容）服务器信息、实体信息和可能的内容）第第58页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社客户机【IE】服务器【server】代理网关隧道响应请求请求响应3.1.2 HTTP的宏观工作原理的宏观工作原理 第第59页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社1.建立连接建立连接2.发送请求发送请求3.发送响应发送响应4.关闭连接关闭连接客户机【IE】服务器【server】请求建立连接发送响应发送请求关闭连接如果，采用是带有代理的交互过程，则在如果，采用是带有代理的交互过程，则在此过程中需要增加一个中介，完成请求和此过程中需要增加一个中介，完成请求和响应时的中转工作响应时的中转工作3.1.3 HTTP协议基础协议基础 第第60页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社3.1.4 HTTP应用开发方法应用开发方法HTML的基本用法HTTP协议从通信的角度贯穿了应用开发的多个层次，包括了：HTTP客户程序、HTTP服务器程序、服务器端应用程序第第61页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社3.2 HTML基础基础HTML简介 超文本超文本是一种信息管理方式，它的本质含义是非线性的文档组织形式；是采用了符合人脑思维模式的联想机制对庞大的信息资源进行索引的一种非线性结构超媒体超文本多媒体 HTML 一种国际化标准语言，它用于在Web上发布超文本信息，是一种基于SGML，公开的资源描述格式第第62页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社3.2 HTML基础基础HTML标记语法及文档结构 HTML只是一个纯文本文件，由“显示内容”及“控制语句”两部分组成规范的标记方法为： 受影响内容 字符引用为了解决与标签字符冲突的问题，分为：数值字符引用和字符实体引用 注释方法 第第63页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社HTML文件的总体结构文件的总体结构 文件标题文件标题:表头区表头区主体区主体区以以 开头开头以以 结尾结尾3.2 HTML基础基础第第64页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社3.2 HTML基础基础HTML网页的编写和测试方法编写HTML文件，保存为后缀为html的文件双击打开该文件，即可在浏览器中查看 My first page 我的第一个网页 第第65页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社3.3 HTML的基本语法的基本语法标题和段落标题文字标签 段落标签 强行换行标签、设置段落标签 、显示预排格式标签、分区显示标签 文字标签 文字的大小、字体 、字型、颜色 列表 无序列表、有序列表、定义列表、列表嵌套 第第66页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社3.3 HTML的基本语法的基本语法超级链接l锚点标签 浏览器中显示的热点l指向其他页面的链接 热点文本 l创建指向本页中的链接 热点文本 l创建指向其它类型文件的链接 热点文本 l创建发送电子邮件的链接 发送邮件的热点文本第第67页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社3.3 HTML的基本语法的基本语法表格 l表格的标签为，行的标签，表项标签、表头l跨多行、多列的表项 l使用、标签的colspan和rowspan属性，制作跨多行(合并行)和跨多列(合并列)的表格l表格在页面中的属性 l在页面中的位置、颜色和图片背景 l表格的分组显示及对齐 第第68页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社3.3 HTML的基本语法的基本语法图像 l设置网页的背景 选择背景色 、指定背景图片、 l插入图像 l设置图片的布局l用图片作为超链接 l在图像上定义热区第第69页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社日期日期第4章 HTML高级应用及编著工具 教学目标教学目标教学重点教学重点教学过程教学过程网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社教学目标l 掌握掌握HTML的高级应用的高级应用l 掌握常见的掌握常见的HTML编著工具编著工具 第第71页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社教学重点lHTML的高级应用的高级应用lHTML应用实例应用实例第第72页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社教学过程l框架应用框架应用l表单应用表单应用l脚本介绍脚本介绍l网页中加入动态效果和多媒体网页中加入动态效果和多媒体 l可执行对象可执行对象 lHTML的变革与未来的变革与未来l常用网页编辑工具简介常用网页编辑工具简介 第第73页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社4.1.1 框架框架框架(FRAMES)是一种在同一浏览器窗口中显示多个相互隔离的HTML页的结构、 标签的用法 框架演示框架演示 第第74页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社4.1.1 框架框架通过使用的target属性 ，可实现框架间的链接 热点文本 _blank没有名字的浏览器窗口打开 _self在当前的框架打开 _top在整个浏览器窗口打开 _parent在父窗口打开 第第75页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社4.1.2 表单表单 网页上具有可输入表项及项目选择等控制所组成的栏目称为表单实现网页的交互操作 其中的“表项名” 可以是：text，password，checkbox，radio，image，hidden，submit，reset；它们对应不同的表单控件第第76页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社4.1.2 表单表单 实例：文字和密码的输入 输入文本和密码输入文本和密码 个人资料个人资料 姓名姓名: 主页的网址主页的网址: 密码密码: 第第77页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社4.1.3 脚本脚本脚本可以分为服务器端脚本和客户端脚本，在HTML代码中嵌入的脚本属于客户端脚本脚本的事件处理机制就可以改变浏览器响应用户操作的标准方法，这样就可以开发出更加具有交互性，更容易使用的Web页面。利用脚本的事件，主要有下面的两个用途： 验证用户输入窗体的数据 增加页面的动态效果本课程后面章节将专门介绍第第78页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社4.1.4 网页中加入动态效果和多媒体网页中加入动态效果和多媒体 滚动字幕通过标签实现 滚动字幕滚动字幕 图片和文字都可以动！图片和文字都可以动！ 我往左跑我往左跑 我往右跑我往右跑 第第79页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社4.1.4 网页中加入动态效果和多媒体网页中加入动态效果和多媒体 网页中加入音频和视频 通过标签实现背景音乐通过标签的dynsrc属性可以向网页中加入视频 页面自动刷新：在页面打开停留几秒钟后，自动转向其它网页第第80页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社4.1.5 可执行对象可执行对象在网页中插入的可执行对象，如：Java Applet、ActiveX控件、插件等 Java Applet： Java小应用程序 第第81页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社4.1.5 可执行对象可执行对象Flash 具有交互性 采用矢量作图技术 采用流控制技术 支持过渡变形技术，包括移动变形和形状变形等使用对象，并对其进行必要的设置即可嵌入网页 第第82页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社4.2 常用网页编辑工具简介常用网页编辑工具简介 编辑网页通常有两种方式文本编辑方式，如：EditPlus，UltraEdit，甚至于Windows的记事本等所见即所得方式，如：FrontPage，Dreamweaver 等建议：读者学习HTML编写时，初学时使用文本编辑方式，这样能加快熟悉HTML标签和相关用法；之后转入使用高级工具，加快编写效率第第83页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社日期日期第5章 层叠样式表(CSS) 教学目标教学目标教学重点教学重点教学过程教学过程网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社教学目标l 理解理解CSS与网页制作之间的关系与网页制作之间的关系l 掌握在网页中使用掌握在网页中使用CSS的基本方法的基本方法 l 掌握掌握CSS滤镜的用法滤镜的用法l 了解在了解在Dreamweaver中应用中应用CSS第第85页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社教学重点l 在网页中使用在网页中使用CSS的基本方法的基本方法l CSS滤镜的用法滤镜的用法第第86页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社教学过程l CSS概述概述 l 为网页添加为网页添加CSSl 用用CSS定义样式定义样式 l CSS的滤镜及其应用的滤镜及其应用 l 在在Dreamweaver中使用中使用CSS l 典型用法实例典型用法实例 第第87页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社5.1 CSS概述概述是CascadingStyleSheet的简称，中文翻译为：层叠样式表；为网页设计者提供更大的网页空间应用弹性；将网页的文字内容与版面设计分开处理几乎所有的浏览器都支持可取代以前一部分必须通过专门的图像处理软件实现的图片特效功能更易于管理样式，方便编排，简化管理成本便于统一风格第第88页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社5.2 为网页添加为网页添加CSS要想使用CSS，首先要让浏览器识别并调用，通常添加样式的方式有如下四种：内嵌样式内部样式表链入外部样式表导入外部样式表 请注意这四种方式的各自特点和适用场合，并理解当几种方式同时出现时，按照优先级高低来决定哪个生效第第89页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社5.3 用用CSS定义样式定义样式CSS的定义是由三个部分构成：选择符、属性和属性的取值，定义方法如下：selector property: value 如：body color: blackp text-align: center; color: red p text-align: center; color: black; font-family: arial此处定义的是：段落排此处定义的是：段落排列居中，段落中文字为列居中，段落中文字为黑色，字体是黑色，字体是arial。 第第90页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社5.3 用用CSS定义样式定义样式 P text-align: center; color: black; font-family: arial 利用利用HTML标签很复杂标签很复杂 利用利用 CSS 更简单更简单 第第91页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社5.3 用用CSS定义样式定义样式选择符组为了减少样式的重复定义，可将相同属性和值的选择符组合起来书写，使用逗号分隔，如：h1, h2, h3, h4, h5, h6 color: green 类选择符可将相同的元素分类定义为不同的样式，定义时，在自定义类名前加点号，如： P.right text-align: right P.center text-align: center 第第92页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社5.3 用用CSS定义样式定义样式ID选择符 由HTML代码中的ID参数指定单独的样式，和类选择符类似。如： #intro font-size:150%; 包含选择符 一种单独针对某种元素包含关系而定义的样式表 ，如： table a font-size: 32px 第第93页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社5.3 用用CSS定义样式定义样式样式表的层叠性 层叠性指的是继承性，样式表的继承规则是外部的元素样式继承给这个元素所包含的其他元素实际上，所有嵌套在元素中的元素都会继承外层元素已指定的属性值，有时会把很多层次所嵌套的样式叠加在一起，除非另外设置 div color: red; font-size:9pt 这个段落的文字为红色这个段落的文字为红色9号字号字 P中内容会继承中内容会继承DIV所定所定义的样式。但当样式表义的样式。但当样式表继承遇到冲突时，总是继承遇到冲突时，总是以最后定义的样式为准以最后定义的样式为准 第第94页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社5.3 用用CSS定义样式定义样式伪类 伪类和伪元素的选择符，是一组基于预定义性质的选择符，HTML元素可占有这些预定义性质selector:pseudo-class property: value 锚的伪类参考实例：ex5_10.html 伪类和类选择符参考实例：ex5_11.html 第第95页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社5.3 用用CSS定义样式定义样式伪对象 即虚拟元素，它们是根据内容创建的，与基本元素相关的；共有4个 其中伪元素:before和:after用于插入已产生的内容:first-letter和:first-line可以对元素的首字或首行设定不同的样式 第第96页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社5.3 用用CSS定义样式定义样式注释 可以在CSS中插入注释来说明代码的含义，注释有利于自己或别人今后在编辑和更改代码时理解代码的含义 在浏览器中，注释是不显示的 注意与HTML中的注释方式的区别，此处只能以“/*”开头，以“*/”结尾 第第97页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社5.4 CSS的滤镜及其应用的滤镜及其应用 使用CSS的滤镜，可以利用客户端的计算资源对图片生成各种类似于Photoshop特效滤镜的效果 CSS滤镜属性的标识符是filterfilter：filtername(parameters)界面滤镜(Procedural Surfaces)静态滤镜(Static filters)转换滤镜(Transitions) 第第98页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社5.4 CSS的滤镜及其应用的滤镜及其应用 界面滤镜 界面滤镜是一个显示在对象内容和对象背景之间彩色的层，它可以动态定义每个像素点的颜色和Alpha值 滤镜AlphaImageLoader filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=image.PNG, sizingMethod =scale);滤镜Gradient filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=1,StartColorStr=#00FF00, EndColorStr=#FFFFFF);第第99页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社5.4 CSS的滤镜及其应用的滤镜及其应用 静态滤镜 通过静态的方式改变某个对象内容的显示效果 常用滤镜包括：Alpha、BasicImage、Blur、Chroma、Compositor、DropShadow、Emboss、Engrave、Glow、Light、MaskFilter、Matrix、MotionBlur、Shadow、Wave、ICMFilter、Gray、Invert、Xray、FlipH、FlipV以上滤镜，请通过相关实例把握其用法第第100页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社5.4 CSS的滤镜及其应用的滤镜及其应用 alpha滤镜的使用 Alpha演示演示 第第101页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社5.4 CSS的滤镜及其应用的滤镜及其应用 转换滤镜 用来处理网页或HTML元素对象显示效果，在新旧内容交替转换时产生特定的视觉效果 可用滤镜包括：Barn、BlendTrans、Blinds、Checker Board、Fade、GradientWipe、Inset、Iris、Pixelate、RadialWipe、RandomBars、RandomDissolve、RevealTrans、Slide、Spiral、Stretch、Strips、Wheel、Zigzag以上滤镜，请通过相关实例把握其用法第第102页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社5.5 在在Dreamweaver中使用中使用CSS 在Dreamweaver中，选择菜单下的“窗口”-“CSS样式”(或按Shitf+F11)，系统就会弹出CSS样式管理面板，在此可对样式进行管理l 附加样式表附加样式表 l 新建新建CSS样式样式 l 编辑样式编辑样式 l 删除删除CSS样式样式 第第103页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社日期日期第6章 JavaScript脚本语言 教学目标教学目标教学重点教学重点教学过程教学过程网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社教学目标l理解理解JavaScript脚本语言的基本概念脚本语言的基本概念l掌握掌握JavaScript脚本语言的基本语法脚本语言的基本语法l掌握掌握JavaScript的变量、各类控制语句和的变量、各类控制语句和函数的用法函数的用法l了解了解JavaScript内置对象和文档对象模型内置对象和文档对象模型的基本用法的基本用法第第105页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社教学重点lJavaScript脚本语言的基本语法脚本语言的基本语法lJavaScript的变量、各类控制语句和函数的变量、各类控制语句和函数的用法的用法lJavaScript在网页中的应用在网页中的应用第第106页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社教学过程l JavaScript简介简介 l JavaScript 基本语法基本语法 l 对象化编程对象化编程 l JavaScript的浏览器内部对象的浏览器内部对象(DOM) l JavaScript实例实例 第第107页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社6.1 JavaScript简介简介 JavaScript是由Netscape公司的Brendan Eich发明的，最初称为LiveScript1995年Java出现后，以Java的设计理念，对LiveScript进行了改写，增加了对Java Applet的支持，所以改名为JavaScript JavaScript可增加网页的互动性简化HTML代码中的重复代码减少网页下载时间对提交表单做即时的检查，即时响应用户的操作第第108页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社6.1 JavaScript简介简介 基于对象)和事件驱动，并具有较高安全性能的脚本语言，特点如下：一种脚本语言基于对象的语言 简单性 安全性 动态性 跨平台性 第第109页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社6.1 JavaScript简介简介 JavaScript不是Java的精简版 ，区别如下： Java是面向对象的，而JavaScript是基于对象的 JavaScript是解释执行的，而Java是编译执行 Java采用强变量，JavaScript采用弱变量 两者的代码格式不同 两者嵌入HTML的方式不一样 第第110页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社6.1 JavaScript简介简介 JavaScript在网站开发中具有以下作用 ：创建生动的用户界面 数据有效性验证工作 数据查找 JavaScript语言的组成 JavaScript核心语言 JavaScript客户端扩展 JavaScript服务器端扩展 第第111页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社6.1 JavaScript简介简介 将JavaScript引入网页 可直接将代码加入网页JavaScript可出现在网页中的任意位置，但必须使用标记“”的作用，是让不能解析标签的浏览器忽略JavaScript代码第四行前边的双反斜杠“/”是JavaScript里的注释标号第第112页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社6.1 JavaScript简介简介 将JavaScript引入网页 使用外部文件的方式，将某个.js文件引入 在浏览器中直接调用JavaScript 浏览器 “地址”栏输入：javascript:使用链接：a href=javascript:.第第113页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社6.1 JavaScript简介简介 一个简单的JavaScript实例 一个简单的实例一个简单的实例 document.write(一个简单的实例一个简单的实例); 第第114页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社6.2 JavaScript 基本语法基本语法 一般语句具有如下格式：; 用大括号“ ”括起来的一个或多个语句，相当于一个复合语句允许语句块的嵌套 第第115页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社6.2 JavaScript 基本语法基本语法 JavaScript的数据类型 ：第第116页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社6.2 JavaScript 基本语法基本语法 JavaScript的变量名称符合：只包含字母、数字和/或下划线；必须以字母开头；不能太长；不能与JavaScript保留字重复变量是区分大小写的 变量名及函数名一般用小写，多个单词中除首单词外其余单词首字母大写 声明变量的方式：var = ;变量的作用域及赋值方法 第第117页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社l 赋值操作符：赋值操作符： =、+=、-=、*=、 /=、%=、=、=、&=、=、|=；l条件表达式：条件表达式： status = (age = 18) ? adult : minor； l算数操作符：算数操作符： +、- 、* 、/ 、% 、+和和-，y = +x； l位逻辑运算符：位逻辑运算符： &、|、; 、 l布尔操作符：布尔操作符： &、|、!l比较操作符：比较操作符： =、=、启动事件处理程序-事件处理程序作出反应 “on事件名”是JavaScript规定的对应事件处理程序柄（event handler）的名字。例如：onClick、onfocus、onSubmit等用户浏览器JavaScript事件处理机制鼠标/键盘操作显示处理结果事件提交调用事件处理函数完成处理第第123页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社6.3 对象化编程对象化编程 JavaScript的内部对象 “数字”对象Number 字符串对象String 数组对象 Array算术对象Math 日期对象Date JavaScript中的系统函数 JavaScript的全局对象 第第124页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社6.3 对象化编程对象化编程 自定义类及对象 第第125页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社6.4 浏览器内部对象浏览器内部对象(DOM) 简介文档对象(DOM)是从网页文档里划分出来的对象在网页特效或验证过程需要使用这些对象名称含义名称含义navigator 浏览器对象location 位置对象window 窗口对象document 文件对象screen 屏幕对象Link 链接对象event 事件对象Form 表单对象history 历史对象CookieCookie对象第第126页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社最后更新日期最后更新日期6.5 JavaScript实例实例 最后更新日期最后更新日期 第第127页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社6.5 JavaScript实例实例 文字连续闪烁效果 colors2 = new Array(6); colors20=#000000; colors21=#333300; colors22=#665500; colors23=#997700; colors24=#CC9900; colors25=#FFCC00; var i=0; function fLi2() line2.style.visibility = visible; if (i6) line2.style.color = colors2i; i+; timerID2 = setTimeout( fLi2(), 100); else i=0; line2.style.visibility=hidden; TimerID2=setTimeout(fLi2(),1500); 第第128页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社6.5 JavaScript实例实例 文字连续闪烁效果 运行效果可参考源代码：第6章ex6_32.html JavaScript闪烁字闪烁字 第第129页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社日期日期第第7章章 服务器端开发服务器端开发动态动态主页技术基础主页技术基础教学目标教学目标教学重点教学重点教学过程教学过程网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社教学目标l 了解动态主页的基本特点了解动态主页的基本特点l 掌握掌握.NET动态主页的基本开发方法动态主页的基本开发方法l 了解了解Java技术基础技术基础l 了解不同动态主页开发技术的异同了解不同动态主页开发技术的异同第第131页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社教学重点l .NET动态主页的基本开发方法动态主页的基本开发方法l Java技术基础技术基础第第132页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社教学过程l 动态主页基本原理动态主页基本原理 l .NET介绍介绍 l ASP.NET应用的开发应用的开发 l Java技术技术 l 不同的动态主页技术比较不同的动态主页技术比较 第第133页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社7.1 动态主页基本原理动态主页基本原理 静态页面：网页内容在设计时就确定了，如要修改或维护，必须修改源代码活动页面：在静态页面的基础上，加入控制客户端显示方式的元素，在客户端改变网页的内容和样式动态页面：网页内容从服务器提取，数据可随时更新，页面内容实时生成，并具有交互性第第134页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社7.1 动态主页基本原理动态主页基本原理 动态”的“动”指的是“交互性”，通俗的说就是网页能不能根据访问者或访问时间的不同而显示出不同的内容 客户端动态网页 通过附加到浏览器上的模块(插件)完成动态网页的全部工作，但存在一定缺陷服务器端动态网页 由客户端提出执行请求，在服务器端运行，运行的结果通过HTML的形式传回客户端 PHP、CGI、ASP、JSP和ASP .NET等第第135页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社7.2 .NET介绍介绍 微软总裁兼首席执行官Steve Ballmer给.NET下的定义为：“.NET代表一个集合，一个环境，一个可以作为平台支持下一代Internet的可编程结构。”即：.NET = 新平台 + 标准协议 + 统一开发工具.NET致力将手机，浏览器和门户应用程序集成到一起，形成一个统一的开发环境 第第136页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社7.2 .NET介绍介绍 .NET的设计目标 第第137页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社7.2 .NET介绍介绍 .NET Framework 具有两个主要组件：公共语言运行库和 .NET Framework 类库。公共语言运行库是 .NET Framework 的基础. NET框架是一个多语言组件开发和执行环境，他提供了一个跨语言的统一编程环境。. NET框架的设计目标是让开发人员更容易地建立Web应用程序和Web服务，使得Internet上的各应用程序之间，可以使用Web服务进行沟通第第138页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社7.2 .NET介绍介绍 .NET框架结构 第第139页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社7.3 ASP.NET应用的开发应用的开发 ASP.NET提供与现有ASP兼容的语法这包括支持可在.aspx文件内与HTML内容混合的代码呈现块这些代码块在网页呈现时按由上而下的方式执行 第第140页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社7.3 ASP.NET应用的开发应用的开发 一个简单的实例测试运行环境 第第141页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社7.3 ASP.NET应用的开发应用的开发 void Page_Load(Object sender, EventArgs e ) if (!Page.IsPostBack) DataTable dt = new DataTable(); DataRow dr; dt.Columns.Add(new DataColumn(整数值整数值, typeof(Int32); dt.Columns.Add(new DataColumn(字符串值字符串值, typeof(string); dt.Columns.Add(new DataColumn(日期时间值日期时间值, typeof(DateTime); dt.Columns.Add(new DataColumn(布尔值布尔值, typeof(bool);数据库访问 第第142页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社7.3 ASP.NET应用的开发应用的开发 for (int i = 1; i = 9; i+) dr = dt.NewRow(); dr0 = i; dr1 = 项项 + i.ToString(); dr2 = DateTime.Now; dr3 = (i % 2 != 0) ? true : false; dt.Rows.Add(dr); dataGrid1.DataSource = new DataView(dt); dataGrid1.DataBind(); 数据库访问 第第143页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社7.3 ASP.NET应用的开发应用的开发 数据库访问 第第144页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社7.4 Java技术技术 Java不单定义了一种计算机语言，而且提供了一整套客户机/服务器解决方案，在这个方案中，程序可以自动地下载到客户端并执行 第第145页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社7.4 Java技术技术 Java不单定义了一种计算机语言，而且提供了一整套客户机/服务器解决方案，在这个方案中，程序可以自动地下载到客户端并执行 简单性 面向对象 分布性 健壮性 安全性 体系结构中立可移植性 解释执行 高性能 多线程 动态性第第146页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社7.4 Java技术技术 Applet是嵌入Web文档的程序Application则是一般的应用程序Java允许开发同时具备这两种特征的程序，可参考教材【实例4】 第第147页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社7.4 Java技术技术 Servlet：服务器端的Applet它从客户端接收请求，执行设定的操作后，最终将结果返回给客户端 客户端(如Web浏览器)通过HTTP提出请求 Web服务器接收该请求并将其发给servlet，如果这个Servlet尚未被加载，Web服务器将把它加载到Java虚拟机并且执行它Servlet将接收该HTTP请求并执行某种处理Servlet将向Web服务器返回应答 Web服务器从Servlet收到的应答发送给客户端第第148页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社7.4 Java技术技术 JSP提供了一种简单而快速创建显示动态生成内容Web页面的方法 具有简单实用、移植性和规范性好的特点 开发方式 可直接使用JSP JSP+JavaBeans JSP+JavaBeans+Servlet 第第149页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社7.4 Java技术技术 用JSP创建一个显示不同颜色的文字的网页 JSP test page-HelloWorld! % String colors=red,green,blue,black,gray; for (int i = 0 ; i 5 ; i+) out.println(Hello World! My first jsp page.); % 第第150页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社7.4 Java技术技术 J2EE 建立在J2SE基础上，为企业级应用提供完整、稳定、安全和快速的Java平台是一个标准而不是一个产品 J2EE平台提供的Web开发技术主要支持两类软件的开发和应用高级信息系统框架的Web应用服务器Web应用服务器上运行的Web应用Struts、Hibernate和Spring Framework是J2EE的开发框架，可大大加快开发速度 第第151页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社7.5 不同的动态主页技术比较不同的动态主页技术比较 CGI Common Gateway Interface(通用网关接口) 通过环境变量、标准输入输出来传递参数可使用各种高级语言进行开发每次请求都会在系统中创建一个新的进程，效率较低使用复杂，不便掌握第第152页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社7.5 不同的动态主页技术比较不同的动态主页技术比较 ISAPI/NSAPI 在服务器端第一次被执行的时候即被调入内存，在本次请求结束后也不需退出 执行效率高且能保持跟数据库之间的高效连接 可使用各种高级语言进行开发 但编写和调试难度较大第第153页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社7.5 不同的动态主页技术比较不同的动态主页技术比较 ASP Active Server Pags 动态服务器主页可结合HTML网页、ASP指令和ActiveX组件建立动态、交互且高效的WEB服务器应用程序 在普通HTML文件中嵌入VBScript/ JavaScript脚本语言在服务器端解释执行，当请求ASP文件时，服务器就解释成标准的HTML返发回客户端不受客户端浏览器限制，便于和服务器交换数据，如存取数据库面向对象 第第154页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社ASP的工作原理的工作原理客户端Web服务器服务器请求响应HTTPDISAPIASP脚本宿主ASP脚本程序脚本引擎对象控件DB7.5 不同的动态主页技术比较不同的动态主页技术比较 第第155页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社ASP实例实例7.5 不同的动态主页技术比较不同的动态主页技术比较 font size= color=#0000ff掌握动态主页技术，未来在我脚下！掌握动态主页技术，未来在我脚下！ 第第156页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社7.5 不同的动态主页技术比较不同的动态主页技术比较PHP Personal Hypertext Preprocessor：超文本预处理器完全免费 遵守GNU公共许可 ，可获得PHP的源码 新的对象模式、异常处理、名称空间 面向对象化 第第157页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社7.5 不同的动态主页技术比较不同的动态主页技术比较后台界面后台界面CGIASPPHPJSP/Servlet操作系统操作系统几乎所有几乎所有Win32几乎所有几乎所有几乎所有几乎所有服务器服务器几乎所有几乎所有IIS非常多非常多非常多非常多执行效率执行效率慢慢快快很快很快极快极快稳定性稳定性高高中等中等高高非常高非常高开发时间开发时间长长短短短短中等中等修改时间修改时间长长短短短短中等中等程序语言程序语言不限，几乎所有不限，几乎所有VBPHP仅支持仅支持Java网页结合网页结合差差优优优优优优学习门槛学习门槛高高低低低低较高较高函数支持函数支持不定不定少少多多多多系统安全系统安全佳佳低低佳佳极佳极佳使用网站使用网站多多多多超多超多目前一般目前一般更新速度更新速度无无慢慢快快较慢较慢第第158页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社日期日期第8章 Web新技术展望 教学目标教学目标教学重点教学重点教学过程教学过程网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社教学目标l了解了解XML及其相关技术及其相关技术l了解了解Ajax技术及其开发技术及其开发第第160页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社教学重点lXML及相关技术及相关技术lAjax技术及开发技术及开发第第161页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社教学过程lXML及其相关技术及其相关技术lXML范例范例lAjax技术技术lAjax的简单开发的简单开发第第162页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社8.1 XML及其相关技术及其相关技术 eXtensible Markup Language， “可扩展标识语言”HTML本身的应用范围有很大的局限(例如，通常只能在浏览器上使用)，因此W3C便开始推广XMLSGML、HTML是XML的先驱 SGMLXMLHTML第第163页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社XML的特点简单性及开放性国际化的标准延伸性及自我描述性能分离数据储存与呈现方式8.1 XML及其相关技术及其相关技术 第第164页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社XML文档实例 8.1 XML及其相关技术及其相关技术 01085041 老吕 北京 02085063 老邱 上海 第第165页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社DTD Document Type Definition，文档类型定义，一组标记符的语法规则，表明XML是怎样组织的 XML Schema 验证XML文档是否具有严格的规范“格式良好” ，以适应广泛的应用CSS、XSL和XSLT XML Style Language和XML Stylesheet Language Transformation；分别定义了XML的显示和文档类型的转换方式 8.1 XML及其相关技术及其相关技术 第第166页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社DOM Document Object Model，文档对象模型，一个对象化的XML数据接口，一个与语言无关、与平台无关的标准接口规范 Xpointer和Xlinks 用于链接其它XML文档和其它XML文档中的某个部分 XML framework利用XML框架，可以把商业逻辑分离出来，实现数据与计算的分离 8.1 XML及其相关技术及其相关技术 第第167页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社XML开发工具 Notepad Microsoft XML Notepad Microsoft XML Tree Viewer Microsoft XML Validator Microsoft XSL Debugger Xray XMLWriter XMLSpy Sonic Stylus Studio 8.1 XML及其相关技术及其相关技术 第第168页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社XML的使用前景 商务的自动化处理 丰富的标签完全可以描述不同类型的单据，可以被加密，并且很容易附加上数字签名等 信息发布客户可根据其需求选择和制作不同的应用程序以处理数据，构成广泛的、通用的分布式计算 智能化的Web应用程序和数据集成 XML能更准确地表达信息的真实内容，严格的语法降低了应用程序的负担，也使智能工具的开发更为便捷8.1 XML及其相关技术及其相关技术 第第169页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社XML实例 8.1 XML及其相关技术及其相关技术 甲车甲车 A厂厂 500 3 乙车乙车 B厂厂 200 7 第第170页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社XML实例 这是一个XML文档，其中定义了一些车以及相关的参数8.1 XML及其相关技术及其相关技术 丙车丙车 A厂厂 300 4 第第171页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社8.1 XML及其相关技术及其相关技术 车名车名 经销商经销商 售价售价 数量数量 第第172页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社8.1 XML及其相关技术及其相关技术 第第173页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社8.1 XML及其相关技术及其相关技术 XML实例的显示效果 第第174页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社8.2 Ajax技术技术 Ajax的现状 IBM、Oracle、Yahoo!、BEA、RedHat、Novell等业界领先的公司启动了Open Ajax项目 微软开发了自己的Ajax框架Altas Sun也将Ajax技术列入了J2EE的blueprint(蓝图)中 Google建立了Google Maps、GMail、Google Suggest等，其中被公认为最优秀的Ajax应用是Google Maps 第第175页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社8.2 Ajax技术技术 Ajax是什么 Asynchronous JavaScript and XML，异步JavaScript和XML 利用XHTML和CSS实现标准化的呈现 借助DOM实现动态显示和交互 使用XML和XSLT进行数据的交换与处理 采用XMLHttpRequest进行异步数据读取 通过JavaScript绑定和处理所有数据 第第176页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社8.2 Ajax技术技术 Ajax的工作原理：在用户和服务器之间加了多个中间层，使用户操作与服务器响应异步化将以前的一些服务器负担的工作转嫁到客户端，利于客户端闲置的处理能力来处理，减轻服务器和带宽的负担 需要支持的浏览器才能工作第第177页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社8.2 Ajax技术技术 第第178页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社8.2 Ajax技术技术 传统Web的同步交互模式 基于Ajax的Web异步交互模式 第第179页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社8.2 Ajax技术技术 var XmlHttp=new ActiveXObject(Microsoft.XMLhttp); function sendAJAX() XmlHttp.Open(POST,ex8_4.aspx,true); XmlHttp.send(null); XmlHttp.onreadystatechange=ServerProcess; function ServerProcess() if (XmlHttp.readystate=4 | XmlHttp.readystate = complete) document.getElementById(nameList).innerHTML =XmlHttp.responsetext; setInterval(sendAJAX(),1000); 第第180页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社8.2 Ajax技术技术 protected void Page_Load(object sender, EventArgs e) PerformanceCounter myMemory = new PerformanceCounter(); myMemory.CategoryName = Memory; myMemory.CounterName = Available KBytes; string txtResult = -服务器可以用内存大小： + myMemory.NextValue().ToString() + KB; Response.Write(DateTime.Now.ToLongTimeString() + txtResult); 第第181页页网站设计与网站设计与Web应用开发技术应用开发技术清华大学出版社清华大学出版社8.2 Ajax技术技术 第第182页页