第一讲 网站设计概述 信息学院 周宝刚.

Presentation on theme: "第一讲 网站设计概述 信息学院 周宝刚."— Presentation transcript:

1 第一讲 网站设计概述 信息学院 周宝刚

2 课程内容 网站设计基础 网站开发所需技术概述 网站总体设计 网站服务器概述 JSP环境配置 JSP简介 信息学院 周宝刚

3 网站设计基础 WEB的起源 1980年Tim Berners-Lee负责的Enquire（Enquire Within Upon Everything的简称）项目。 1990年11月，第一个Web服务器nxoc01.cern.ch 开始运行 1991年，CERN（European Particle Physics Laboratory）正式发布了Web技术标准。 目前，与Web相关的各种技术标准都由著名的W3C 组织（World Wide Web Consortium）管理和维护。 讨论Web开发技术的历史，当然要先说说Web的起源。众所周知，Web这个Internet上最热门的应用架构是由Tim Berners-Lee发明的。Web的前身是1980年Tim Berners-Lee负责的Enquire（Enquire Within Upon Everything的简称）项目。1990年11月，第一个Web服务器nxoc01.cern.ch开始运行，Tim Berners-Lee在自己编写的图形化Web浏览器“WorldWideWeb”上看到了最早的Web页面。1991年，CERN（European Particle Physics Laboratory）正式发布了Web技术标准。目前，与Web相关的各种技术标准都由著名的W3C组织（World Wide Web Consortium）管理和维护。 从技术层面看，Web架构的精华有三处：用超文本技术（HTML）实现信息与信息的连接；用统一资源定位技术（URI）实现全球信息的精确定位；用新的应用层协议（HTTP）实现分布式的信息共享。这三个特点无一不与信息的分发、获取和利用有关。其实，Tim Berners-Lee早就明确无误地告诉我们："Web是一个抽象的（假想的）信息空间。"也就是说，作为Internet上的一种应用架构，Web的首要任务就是向人们提供信息和信息服务。 信息学院 周宝刚

4 网站设计基础 WEB架构中的技术 HTML(Hypertext)；URI(Uniform Resource Identifier )；HTTP(HyperText Transfer Protocol)。 Web是一种典型的分布式应用架构，所以分为客户端和服务端 客户端技术的萌芽和发展 1945年，Vannevar Bush在一篇文章中阐述了文本和文本之间通过超级链接相互关联的思想。 1969年，IBM的Charles Goldfarb发明了GML（Generalized Markup Language）语言。 1978到1986年间，GML发展成为SGML语言标准。 1990年，第一个图形化的Web浏览器展现了HTML制作的超文本信息 Web是一种典型的分布式应用架构。Web应用中的每一次信息交换都要涉及到客户端和服务端两个层面。因此，Web开发技术大体上也可以被分为客户端技术和服务端技术两大类。我们先来谈谈客户端技术的萌芽和演进过程。 用超文本技术（HTML）实现信息与信息的连接；用统一资源定位技术（URI）实现全球信息的精确定位；用新的应用层协议（HTTP）实现分布式的信息共享。 Web客户端的主要任务是展现信息内容，而HTML语言则是信息展现的最有效载体之一。作为一种实用的超文本语言，HTML的历史最早可以追溯到上世纪四十年代。1945年，Vannevar Bush在一篇文章中阐述了文本和文本之间通过超级链接相互关联的思想，并在文中给出了一种能实现信息关联的计算机Memex的设计方案。Doug Engelbart等人则在1960年前后，对信息关联技术做了最早的实验。与此同时，Ted Nelson正式将这种信息关联技术命名为超文本（Hypertext）技术。1969年，IBM的Charles Goldfarb发明了可用于描述超文本信息的GML（Generalized Markup Language）语言。1978到1986年间，在ANSI等组织的努力下，GML语言进一步发展成为著名的SGML语言标准。当Tim Berners-Lee和他的同事们在1989年试图创建一个基于超文本的分布式应用系统时，Tim Berners-Lee意识到，SGML是描述超文本信息的一个上佳方案，但美中不足的是，SGML过于复杂，不利于信息的传递和解析。于是，Tim Berners-Lee对SGML语言做了大刀阔斧的简化和完善。1990年，第一个图形化的Web浏览器"WorldWideWeb"终于可以使用一种为Web度身定制的语言--HTML来展现超文本信息了。 最初的HTML语言只能在浏览器中展现静态的文本或图像信息，这满足不了人们对信息丰富性和多样性的强烈需求--这件事情最终的结果是，由静态技术向动态技术的转变成为了Web客户端技术演进的永恒定律。 　 　能存储、展现二维动画的GIF图像格式早在1989年就已发展成熟。Web出现后，GIF第一次为HTML页面引入了动感元素。但更大的变革来源于1995年Java语言的问世。Java语言天生就具备的平台无关的特点，让人们一下子找到了在浏览器中开发动态应用的捷径。1996年，著名的Netscape浏览器在其2.0版中增加了对JavaApplets和JavaScript的支持。Netscape的冤家对头，Microsoft的IE 3.0也在这一年开始支持Java技术。现在，喜欢动画、喜欢交互操作、喜欢客户端应用的开发人员可以用Java或JavaScript语言随心所欲地丰富HTML页面的功能了。顺便说一句，JavaScript语言在所有客户端开发技术中占有非常独特的地位：它是一种以脚本方式运行的，简化了的Java语言，这也是脚本技术第一次在Web世界里崭露头角。为了用纯Microsoft的技术与JavaScript抗衡，Microsoft还为1996年的IE 3.0设计了另一种后来也声名显赫的脚本语言--VBScript语言。 　 　真正让HTML页面又酷又炫、动感无限的是CSS（Cascading Style Sheets）和DHTML（Dynamic HTML）技术。1996年底，W3C提出了CSS的建议标准，同年，IE 3.0引入了对CSS的支持。CSS大大提高了开发者对信息展现格式的控制能力。1997年的Netscape 4.0不但支持CSS，而且增加了许多Netscape公司自定义的动态HTML标记，这些标记在CSS的基础上，让HTML页面中的各种要素"活动"了起来。1997年，Microsoft发布了IE 4.0，并将动态HTML标记、CSS和动态对象模型（DHTML Object Model）发展成了一套完整、实用、高效的客户端开发技术体系，Microsoft称其为DHTML。同样是实现HTML页面的动态效果，DHTML技术无需启动Java虚拟机或其他脚本环境，可以在浏览器的支持下，获得更好的展现效果和更高的执行效率。今天，已经很少有哪个HTML页面的开发者还会对CSS和DHTML技术视而不见了。 信息学院 周宝刚

5 网站设计基础 HTML技术的发展 最初的HTML语言只能在浏览器中展现静态的文本或图像信息 1989年GIF图像格式 应用于HTML
1996年，Netscape浏览器增加了对JavaApplets和JavaScript的支持 ，同年Microsoft设计了另一种脚本语言--VBScript语言。 1996年底引入了CSS（Cascading Style Sheets）和DHTML（Dynamic HTML）技术 1996年Netscape 引入了对QuickTime插件的支持 信息学院 周宝刚

6 网站设计基础 服务端技术的萌芽和发展 1993年CGI（Common Gateway Interface）技术应用
1994年Rasmus Lerdorf发明了专用于Web服务端编程的PHP（Personal Home Page Tools）语言 1996年，Microsoft借鉴PHP的思想，在其Web服务器IIS 3.0中引入了ASP技术 1997年，Servlet技术问世，1998年，JSP技术诞生。 服务端技术的成熟与发展 　 　与客户端技术从静态向动态的演进过程类似，Web服务端的开发技术也是由静态向动态逐渐发展、完善起来的。 　 　最早的Web服务器简单地响应浏览器发来的HTTP请求，并将存储在服务器上的HTML文件返回给浏览器。一种名为SSI（Server Side Includes）的技术可以让Web服务器在返回HTML文件前，更新HTML文件的某些内容，但其功能非常有限。第一种真正使服务器能根据运行时的具体情况，动态生成HTML页面的技术是大名鼎鼎的CGI（Common Gateway Interface）技术。1993年，CGI 1.0的标准草案由NCSA（National Center for Supercomputing Applications）提出，1995年，NCSA开始制定CGI 1.1标准，1997年，CGI 1.2也被纳入了议事日程。CGI技术允许服务端的应用程序根据客户端的请求，动态生成HTML页面，这使客户端和服务端的动态信息交换成为了可能。随着CGI技术的普及，聊天室、论坛、电子商务、信息查询、全文检索等各式各样的Web应用蓬勃兴起，人们终于可以享受到信息检索、信息交换、信息处理等更为便捷的信息服务了。 　 　早期的CGI程序大多是编译后的可执行程序，其编程语言可以是C、C++、Pascal等任何通用的程序设计语言。为了简化CGI程序的修改、编译和发布过程，人们开始探寻用脚本语言实现CGI应用的可行方式。在此方面，不能不提的是Larry Wall于1987年发明的Perl语言。Perl结合了C语言的高效以及sh、awk等脚本语言的便捷，似乎天生就适用于CGI程序的编写。1995年，第一个用Perl写成的CGI程序问世。很快，Perl在CGI编程领域的风头就盖过了它的前辈C语言。随后，Python等著名的脚本语言也陆续加入了CGI编程语言的行列。 　 　1994年，Rasmus Lerdorf发明了专用于Web服务端编程的PHP（Personal Home Page Tools）语言。与以往的CGI程序不同，PHP语言将HTML代码和PHP指令合成为完整的服务端动态页面，Web应用的开发者可以用一种更加简便、快捷的方式实现动态Web功能。1996年，Microsoft借鉴PHP的思想，在其Web服务器IIS 3.0中引入了ASP技术。ASP使用的脚本语言是我们熟悉的VBScript和JavaScript。借助Microsoft Visual Studio等开发工具在市场上的成功，ASP迅速成为了Windows系统下Web服务端的主流开发技术。当然，以Sun公司为首的Java阵营也不会示弱。1997年，Servlet技术问世，1998年，JSP技术诞生。Servlet和JSP的组合（还可以加上JavaBean技术）让Java开发者同时拥有了类似CGI程序的集中处理功能和类似PHP的HTML嵌入功能，此外，Java的运行时编译技术也大大提高了Servlet和JSP的执行效率--这也正是Servlet和JSP被后来的J2EE平台吸纳为核心技术的原因之一。 两种重要的企业开发平台 　 　Web服务端开发技术的完善使开发复杂的Web应用成为了可能。在此起彼伏的电子商务大潮中，为了适应企业级应用开发的各种复杂需求，为了给最终用户提供更可靠、更完善的信息服务，两个最重要的企业级开发平台--J2EE和.NET在2000年前后分别诞生于Java和Windows阵营，它们随即就在企业级Web开发领域展开了你死我活的拼争。平台之争让整个Web世界在最近的几年里不得安宁，但从某种意义上说，也正是这种针锋相对的竞争关系促使了Web开发技术以前所未有的速度提高和跃进。 　 　J2EE是纯粹基于Java的解决方案。1998年，Sun发布了EJB 1.0标准。EJB为企业级应用中必不可少的数据封装、事务处理、交易控制等功能提供了良好的技术基础。至此，J2EE平台的三大核心技术Servlet、JSP和EJB都已先后问世。1999年，Sun正式发布了J2EE的第一个版本。紧接着，遵循J2EE标准，为企业级应用提供支撑平台的各类应用服务软件争先恐后地涌现了出来。IBM的WebSphere、BEA的WebLogic都是这一领域里最为成功的商业软件平台。随着开源运动的兴起，JBoss等开源世界里的应用服务新秀也吸引了许多用户的注意力。到2003年时，Sun的J2EE版本已经升级到了1.4版，其中三个关键组件的版本也演进到了Servlet 2.4、JSP 2.0和EJB 2.1。至此，J2EE体系及相关的软件产品已经成为了Web服务端开发的一个强有力的支撑环境。 　 　和J2EE不同的是，Microsoft的.NET平台是一个强调多语言间交互的通用运行环境。尽管.NET的设计者试图以.NET平台作为绝大多数Windows应用的首选运行环境，但.NET首先吸引的却是Web开发者的目光。2001年，ECMA通过了Microsoft提交的C#语言和CLI标准，这两个技术标准构成了.NET平台的基石，它们也于2003年成为了ISO的国际标准。2002年，Microsoft正式发布.NET Framework和Visual Studio .NET开发环境。早在.NET发布之前，就已经有许多Windows平台的Web开发者迫不及待地利用Beta版本开发Web应用了。这大概是因为，.NET平台及相关的开发环境不但为Web服务端应用提供了一个支持多种语言的、通用的运行平台，而且还引入了ASP.NET这样一种全新的Web开发技术。ASP.NET超越了ASP的局限，可以使用VB.NET、C#等编译型语言，支持Web Form、.NET Server Control、ADO.NET等高级特性。客观地讲，.NET平台，尤其是.NET平台中的ASP.NET的确不失为Web开发技术在Windows平台上的一个集大成者。 信息学院 周宝刚

7 网站设计基础 XML语言及其相关技术 1996年，W3C在SGML语言的基础上，提出了XML（Extensible Markup Language）语言草案。1998年，W3C正式发布了XML 1.0标准。 1999年，W3C制定出了XSLT标准。 2000年，W3C发布SOAP（Simple Object Access Protocol）协议。 利用SOAP协议传递XML信息的分布式应用模型称为Web Service。 2001年，W3C发布了WSDL（Web Services Description Language）协议的1.1版。SOAP协议和WSDL协议共同构成了Web Service的基础。 如果说HTML语言给Web世界赋予了无限生机的话，那么，XML语言的出现大概就可以算成是Web的一次新生了。按照Tim Berners-Lee的说法，Web是一个"信息空间"。HTML语言具有较强的表现力，但也存在结构过于灵活、语法不规范的弱点。当信息都以HTML语言的面貌出现时，Web这个信息空间是杂乱无章、没有秩序的。为了让Web世界里的所有信息都有章可循、有法可依，我们需要一种更为规范、更能够体现信息特点的语言。 　 　1996年，W3C在SGML语言的基础上，提出了XML（Extensible Markup Language）语言草案。1998年，W3C正式发布了XML 1.0标准。XML语言对信息的格式和表达方法做了最大程度的规范，应用软件可以按照统一的方式处理所有XML信息。这样一来，信息在整个Web世界里的共享和交换就有了技术上的保障。HTML语言关心的是信息的表现形式，而XML语言关心的是信息本身的格式和数据内容。从这个意义上说，XML语言不但可以将客户端的信息展现技术提高到一个新的层次，而且可以显著提高服务端的信息获取、生成、发布和共享能力。为了将XML信息转换为HTML等不同的信息展现形式，1999年，W3C制定出了XSLT标准。同一年，IE 5.0增加了对XML和XSLT的支持。 　 　现在，网站的开发者可以直接使用XML语言发布信息了。针对不同的应用领域，人们还制定了许多专门的XML规范。例如，2001年W3C发布的SVG（Scalable Vector Graphics）1.0标准就是一种用XML语言表达的、全新的二维矢量图形格式。开发者可以用SVG格式描述大多数已有的Flash动画。与Flash格式相比，符合XML标准的SVG格式显然更有利于信息交换和共享。 　 　Web本身就是一个最大的分布式应用系统。对于分布式开发而言，XML技术也大有用武之地。一个明显的事实是，如果能让分布式应用借助XML格式交换信息，那么，以往横亘在分布式架构上的信息交换难题也就迎刃而解了。1999年，W3C和相关的企业开始讨论设计基于XML的通信协议，2000年，W3C发布SOAP（Simple Object Access Protocol）协议的1.1版。人们把利用SOAP协议传递XML信息的分布式应用模型称为Web Service。2001年，W3C发布了WSDL（Web Services Description Language）协议的1.1版。SOAP协议和WSDL协议共同构成了Web Service的基础。随后，J2EE和.NET这两大企业级开发平台先后实现了Web Service，并将其视为平台的一项核心功能。 　 　Web Service对于Web开发者的重要意义在于，当我们需要在不同的服务端、不同的客户端乃至不同的应用类型、不同的计算设备之间传递信息的时候，以往的分布式开发技术或者因为适应性不强，或者因为扩展能力不足，都难以满足现代Web开发的需要，而Web Service正好填补了这一空白。 信息学院 周宝刚

8 网站设计基础 WEB开发框架和应用模型 1998年时Microsoft推出的Windows 98就可以在桌面上集成Web页面
2000年后，Microsoft陆续推出了MSN Explorer和与之相关的MSN在线服务 Web开发环境开始支持MVC（Model-View-Contorller）的设计模型 门户服务（Portal Server）和Web内容管理（Web Content Management）的设计模型 2000年以后，随着Web应用的日益复杂，人们逐渐意识到，单纯依靠某种技术多半无法达到快速开发、快速验证和快速部署的最佳境界。研究者开始尝试着将已有的Web开发技术综合起来，形成完整的开发框架或应用模型，并以此来满足各种复杂的应用需求。 　 　Microsoft在客户端的技术集成方面走在了最前面。1998年时Microsoft推出的Windows 98就可以在桌面上集成Web页面，这实际上是将资源管理器和Web浏览器的功能有效地结合了起来。2000年后，Microsoft陆续推出了MSN Explorer和与之相关的MSN在线服务。这一应用模型将Web浏览、视频点播、邮件处理、网上游戏、在线聊天等许多种用户常用的Web功能集成在了一个统一的界面中。从信息利用的角度看，MSN试图让用户在一个最舒适的环境中获取足够的信息，这种努力的确值得人们称道。另一个与客户端技术集成相关的例子是搜索引擎Google在2003年展示给大家的Google工具栏功能。虽然Google工具栏有炒作和广告的嫌疑，但安装Google工具栏之后的IE浏览器将信息浏览和信息检索有机地结合了起来，这种小小的功能改进确实是对用户的体贴和帮助。 　 　在Web服务端，2000年以后出现了几种主要的技术融合方式。首先，越来越多的Web开发环境开始支持MVC（Model-View-Contorller）的设计模型，为开发者提供了全套的开发框架。实际上，J2EE和.NET平台本身就是这种开发框架的典型代表。其次，门户服务（Portal Server）和Web内容管理（Web Content Management）在最近几年里成为了应用集成的重点模型。这两种应用模型可以直接为开发者或最终用户提供构建Web应用的高级平台，可以让Web开发和信息发布工作大为简化。在商业软件领域，这一类应用的例子包括Microsoft的SharePoint、IBM的WebSphere Portal、FileNet的Web Content Manager等等。开源项目在Web开发框架和应用模型方面表现得非常积极，Struts、Jetspeed、jPortlet、Cocoon、Lenya、XOOPS等都是开源世界里与MVC开发框架、门户服务和Web内容管理相关的优秀解决方案。 　 　当然，技术集成绝不等于技术堆砌。一些Web站点和Web应用的开发者把XML语言、MVC框架等时髦技术拼凑起来，却不管它们是否能适应具体的应用环境，结果，他们的系统要么运行效率低下，要么功能残缺不全。反之，一个值得注意的事实是，像新浪、搜狐或网易这样的门户网站，在他们的信息发布页面（如新闻页面）里，尽管信息内容时刻都在刷新，但Web服务器上存放的始终都是静态的HTML页面。这种"落后技术"的优点是，在大量并发访问的情况下，门户网站的响应速度仍然很快。深入到技术层面，我们通常会惊讶地发现，这些网站使用的大多是自行研发的Web内容管理系统。当网站的内容编辑提交新的信息时，系统会自动将信息转换为HTML格式，发布到Web服务器集群的每一个结点上。在新浪网的一个角落里，我们可以找到"新浪网站发布系统"的研发历程： V 1.0（1997）：基于文件的版本，实现新闻首页、正文和专题的发布。 V 1.1（1998/12）：采用数据库后台、实现跨服务器发布，自动化程度高。 V 2.0（1999/3）：创立模版和域的全新概念，奠定了该系列的基本设计思路。 V 2.1（1999/9）：增加周边模块，如搜索、自动采集。 V 3.0（2000/1）：优化传输方式，增加相关新闻和评论。 V 3C（2000/6）：V3.0的编译版，也是商业版的原型。 V 3.1（2000/7）：优化数据库结构，采用内存CACHE大幅提速，增加了集中监控功能。 V 3.1C（2000/8）：商业用测试版本。 V 3.2（正在制作中）：重点解决备份系统的自动化切换，在机制上实现永不宕机。 这一份有趣的历史记录再一次印证了我关于Web开发技术的基本观点：一种技术只要能为用户提供高水平的信息服务，它就是最好、最先进的技术。 信息学院 周宝刚

9 网站设计基础 WEB服务体系结构 浏览器 HTTP应答 HTTP请求 Web服务器 用户界面层 应用逻辑层 Web应用服务器 数据库服务器
信息系统 数据存取层 信息学院 周宝刚

10 网站开发技术 WEB客户端开发技术 HTML技术 JavaScript技术 CSS技术 XML技术 WAP与WML技术 信息学院 周宝刚

11 网站开发技术 WEB服务端开发技术 ASP技术 PHP技术 JSP技术 信息学院 周宝刚

12 网站设计与管理的基本过程 1、网站的规划和分析 建站目的与目标、可行性分析、资源规划 2、网站运行环境的建立
域名注册、建站方式的选择、Web服务器的构建 3、网站的设计与制作 网站总体设计、网站内容与结构设计、网站可视化设计、网页的制作 4、网站管理系统的建立 5、网站的测试、推广与维护 网站的测试、网站的营销推广、网站的日常更新与维护 信息学院 周宝刚

13 网站总体设计 网站CI形象设计 网站的内容设计 网站的总体结构 网站的目录结构与链接设计 网站的整体风格和创意设计 信息学院 周宝刚

14 网站CI形象设计 CI: 企业形象。CI设计主要指网站的标志、色彩、字体、标语等。 1、网站标志、名称设计 网站有代表性的人、事、物
专业性网站的代表性物品 英文名称作标志 网站名称要合法、合理、合情 信息学院 周宝刚

15 网站CI形象设计 2、设计网站的标准色彩 标准色彩：指能体现网站形象和延伸内涵的色彩。 一般地，网站的标准色彩不要超过3种
标准色彩要用于网站的标志、标题、主菜单和主色块。 3、设计网站的标准字体 标准字体：指用于标志、标题、主菜单、主体内容的字体。 不常用字体最好通过图片形式显示 信息学院 周宝刚

16 网站标志、名称 信息学院 周宝刚

17 网页配色 信息学院 周宝刚

18

19 宣传型电子商务网站 信息学院 周宝刚

20 完全电子商务网站 信息学院 周宝刚

21 信息学院 周宝刚

22 网站结构图 信息学院 周宝刚

23 网站的内容设计 1、网站的功能与类型选择 电子商务网站的类型
基本型：具备基本电子商务功能，可实现产品展示、公司宣传与客户服务，适用于初尝电子商务的小型企业。一般搭建在公众电子商务平台上，性价比较高 宣传型：目的是通过网站宣传产品或服务项目，提升公司形象，拓展市场，适于各类企业。 客户服务型：目的是宣传公司形象与产品，并达到与客户实时沟通及为产品或服务提供服务支持，从而降低成本，提高效率。适于各类企业。 完全电子商务型：目的是通过网站宣传公司整体形象，推广产品与服务，实现网上客户服务与产品的在线销售，为公司直接创造利润、提高竞争力，适于各类有条件的大、中型企业。 信息学院 周宝刚

24 网站的内容设计 完全电子商务网站的基本功能 企业形象宣传 产品展示 商品与服务的在线订购 顾客关系与服务 新闻、信息发布 网上调查
销售业务信息管理 2、网站的信息设计 网站的信息应完整、真实、准确、合法，并应及时更新。 企业应制定互联网信息发布的审核机制 信息学院 周宝刚

25 网站的总体结构 信息学院 周宝刚 主 页 产品展示 关于我们 网上销售 在线服务 网站管理 信息发布 企业简介 企业动态 业务联系 产品分类
主 页 产品展示 关于我们 网上销售 在线服务 网站管理 信息发布 企业简介 企业动态 业务联系 产品分类 产品目录 产品简介 产品详情 分类查询 品牌介绍 新品推介 产品查询 用户注册 购物车 订单查询 电子合同 交易 证书下载 FAQ 在线提问 售后服务 技术支持 用户反馈 信息展示 信息查询 客户资源管理 产品管理 供应商管理 交易管理 新闻管理 访问分析 技术支持管理 超级用户管理 信息学院 周宝刚

26 网站的目录结构与链接 1、目录结构设计 不要将所有文件都存放在根目录下 按栏目内容建立子目录 在每个主栏目内部建立独立的images目录
目录层次不要太深 不要使用中文目录名 不要使用过长目录名 尽量使用意义明确的目录名 dfgdfg 信息学院 周宝刚

27 网站的目录结构与链接 2、网站的链接结构 树状链接结构：条理清晰，但效率低 星状链接结构： 一级页面 二级页面 企业新闻页—新闻1，新闻2
一级页面 二级页面 企业新闻页—新闻1，新闻2 首页—产品信息页—产品1，产品2 技术服务页—服务1，服务2 浏览方便，但链接太多，不易导航，一般在页面顶部增加导般条，如： 当前位置：首页->产品信息->松下产品 注重链接的个性化与相关性 信息学院 周宝刚

28 网站的整体风格与创意 1、风格的内涵 风格（Style）是指站点的整体形象给浏览者的综合感受。 2、风格的确立 明确网站的风格
使网站的标志尽可能出现在每个页面 突出网站的标准色彩 突出网站的标准字体 使用统一的图片处理效果 使用统一的符号、线条与图标 信息学院 周宝刚

29 网站的整体风格与创意 3、创意设计 网站的创意 创意思考的过程 准备期孵化期启示期验证期形成期 创意思考的途径
1.把它颠倒 2.把它缩小 3.把颜色换一下 4.使它更长 5.使它闪动 6.把它放进音乐里 7.结合文字音乐图画 8.使它成为年轻的9.使它重复 10.使它变成立体 11.参加竞赛 12.参加打赌13.变更一部分 14.分裂它 15. 使它速度加快 16.使它对称 等 信息学院 周宝刚

30 Web服务器 分为在UNIX或LINUX平台以及Windows平台， UNIX： W3C、NCSA和APACHE服务器 Windows：
IIS（Internet Information Server） 信息学院 周宝刚

31 Web服务器 Microsoft IIS 信息学院 周宝刚
Microsoft的Web服务器产品为Internet Information Server (IIS)， IIS 是允许在公共Intranet或Internet上发布信息的Web服务器。IIS是目前最流行的Web服务器产品之一，很多著名的网站都是建立在IIS的平台上。IIS提供了一个图形界面的管理工具，称为 Internet服务管理器，可用于监视配置和控制Internet服务。 IIS是一种Web服务组件，其中包括Web服务器、FTP服务器、NNTP服务器和SMTP服务器，分别用于网页浏览、文件传输、新闻服务和邮件发送等方面，它使得在网络（包括互联网和局域网）上发布信息成了一件很容易的事。它提供ISAPI（Intranet Server API）作为扩展Web服务器功能的编程接口；同时，它还提供一个Internet数据库连接器，可以实现对数据库的查询和更新。 信息学院 周宝刚

32 Web服务器 IBM WebSphere 信息学院 周宝刚
WebSphere Application Server 是 一 种功能完善、开放的Web应用程序服务器，是IBM电子商务计划的核心部分，它是基于 Java 的应用环境，用于建立、部署和管理 Internet 和 Intranet Web 应用程序。 这一整套产品进行了扩展，以适应 Web 应用程序服务器的需要，范围从简单到高级直到企业级。 WebSphere 针对以 Web 为中心的开发人员，他们都是在基本 HTTP服务器和 CGI 编程技术上成长起来的。IBM 将提供 WebSphere 产品系列，通过提供综合资源、可重复使用的组件、功能强大并易于使用的工具、以及支持 HTTP 和 IIOP 通信的可伸缩运行时环境，来帮助这些用户从简单的 Web 应用程序转移到电子商务世界。 信息学院 周宝刚

33 Web服务器 BEA WebLogic 信息学院 周宝刚
BEA WebLogic Server 是一种多功能、基于标准的web应用服务器，为企业构建自己的应用提供了坚实的基础。各种应用开发、部署所有关键性的任务，无论是集成各种系统和数据库，还是提交服务、跨 Internet 协作，起始点都是 BEA WebLogic Server。由于 它具有全面的功能、对开放标准的遵从性、多层架构、支持基于组件的开发，基于 Internet 的企业都选择它来开发、部署最佳的应用。 BEA WebLogic Server 在使应用服务器成为企业应用架构的基础方面继续处于领先地位。BEA WebLogic Server 为构建集成化的企业级应用提供了稳固的基础，它们以 Internet 的容量和速度，在连网的企业之间共享信息、提交服务，实现协作自动化。BEA WebLogic Server 的遵从 J2EE 、面向服务的架构，以及丰富的工具集支持，便于实现业务逻辑、数据和表达的分离，提供开发和部署各种业务驱动应用所必需的底层核心功能。 信息学院 周宝刚

34 Web服务器 Oracle IAS 信息学院 周宝刚
Oracle iAS的英文全称是Oracle Internet Application Server，即Internet应用服务器，Oracle iAS是基于Java的应用服务器，通过与Oracle 数据库等产品的结合，Oracle iAS能够满足Internet应用对可靠性、可用性和可伸缩性的要求。 　　 Oracle iAS最大的优势是其集成性和通用性，它是一个集成的、通用的中间件产品。在集成性方面，Oracle iAS将业界最流行的HTTP服务器Apache集成到系统中，集成了Apache的Oracle iAS通信服务层可以处理多种客户请求，包括来自Web浏览器、胖客户端和手持设备的请求，并且根据请求的具体内容，将它们分发给不同的应用服务进行处理。在通用性方面，Oracle iAS支持各种业界标准，包括 JavaBeans、CORBA、Servlets以及XML标准等，这种对标准的全面支持使得用户很容易将在其他系统平台上开发的应用移植到Oracle平台上。 信息学院 周宝刚

35 Web服务器 Apache Apache源于NCSAhttpd服务器，经过多次修改，成为世界上最流行的Web服务器软件之一。Apache是自由软件，所以不断有人来为它开发新的功能、新的特性、修改原来的缺陷。Apache的特点是简单、速度快、性能稳定，并可做代理服务器来使用。本来它只用于小型或试验Internet网络，后来逐步扩充到各种Unix系统中，尤其对Linux的支持相当完美。 Apache是以进程为基础的结构，进程要比线程消耗更多的系统开支，不太适合于多处理器环境，因此，在一个Apache Web站点扩容时，通常是增加服务器或扩充群集节点而不是增加处理器。到目前为止Apache仍然是世界上用的最多的Web服务器，世界上很多著名的网站都是Apache的产物，它的成功之处主要在于它的源代码开放、有一支开放的开发队伍、支持跨平台的应用（可以运行在几乎所有的Unix、Windows、Linux系统平台上）以及它的可移植性等方面。 信息学院 周宝刚

36 Web服务器 Tomcat Tomcat是一个开放源代码、运行servlet和JSP Web应用软件的基于Java的Web应用软件容器。Tomcat Server是根据servlet和JSP规范进行执行的，因此我们就可以说Tomcat Server也实行了Apache-Jakarta规范且比绝大多数商业应用软件服务器要好。 Tomcat是Java Servlet 2.2和JavaServer Pages 1.1技术的标准实现，是基于Apache许可证下开发的自由软件。Tomcat是完全重写的Servlet API 2.2和JSP 1.1兼容的Servlet/JSP容器。Tomcat使用了JServ的一些代码，特别是Apache服务适配器。随着Catalina Servlet引擎的出现，Tomcat第四版号的性能得到提升，使得它成为一个值得考虑的Servlet/JSP容器，因此目前许多WEB服务器都是采用Tomcat。 信息学院 周宝刚

37 JSP运行环境得安装 安装JAVA运行环境 安装tomcat服务器 信息学院 周宝刚

38 WINDOWS下JAVA环境配置 1、JDK的下载和安装 2、在windows下面环境变量的设置 JAVA_HOME=C:\JDK
CLASSPATH=.; C:\JDK\lib\tools.jar PATH= C:\JDK\bin 3、环境变量的测试 echo ％JAVA_HOME% 4、其它服务的安装（J2EE WEB服务安装） TOMCAT的安装 信息学院 周宝刚

39 WINDOWS下Tomcat安装 1、到 www.apache.org网站上下载tomcat
2、通过双击安装，安装过程中需要选择JDK得目录 3、 检查是否安装成功 4、修改tomcat得配置文件 信息学院 周宝刚

40 LINUX下JAVA环境配置 1、JDK的下载和安装 2、在linux下面环境变量的设置（修改etc/profile文件）
export  JAVA_HOME=/usr/java/j2sdk1.4.2_04  export  CLASSPATH=$CLASSPATH:$JAVA_HOME/lib:$JAVA_HOME/jre/lib  export  PATH=$JAVA_HOME/bin:$JAVA_HOME/jre/bin:$PATH:$HOMR/bin 3、其它服务的安装（J2EE WEB服务安装） TOMCAT的安装 信息学院 周宝刚

41 LINUX下Tomcat安装 1、到 www.apache.org网站上下载tomcat 2、通过解压放到linux下，
# gunzip apache-tomcat tar.gz # tar -xvf apache-tomcat tar # mv apache-tomcat tomcat 3、 检查是否安装成功 4、修改tomcat得配置文件 # cd tomcat/conf # vi server.xml 信息学院 周宝刚

42 J2EE目录规范 src/main/java Application/Library sources
src/main/resources Application/Library resources src/main/filters Resource filter files src/main/assembly Assembly descriptors src/main/config Configuration files src/main/webapp Web application sources src/test/java Test sources src/test/resources Test resources src/test/filters Test resource filter files src/site Site LICENSE.txt Project's license README.txt Project's readme 信息学院 周宝刚

43 JSP概述 JSP（JAVA SERVER PAGE）是由Sun 公司在java语言上开发出来的一种动态网页制作技术，其可使您可以将网页中的动态部分和静态的HTML相分离。 信息学院 周宝刚

44 JSP概述 JSP与ASP的比较 结构 编程语言 性能 运行平台 信息学院 周宝刚

45 JSP文件结构及主要标签 <%@ page contentType="text/html;charset=gb2312" %>
page import="java.util.*“ %> ... <HTML> <BODY> 其他 HTML 语言 <% 符合JAVA 语法的 JAVA 语句 %> </BODY> </HTML> 信息学院 周宝刚

46 JSP示例(Hello.jsp) <HTML> <BODY> 你好<br> </BODY>
page contentType="text/html;charset=gb2312" %> page import="java.util.*"%> <HTML> <BODY> <% for ( int i=0; i<2; i++ ) { %> 你好<br> } </BODY> </HTML> 信息学院 周宝刚

47 JSP执行过程 servlet servlet 分析器 JSDK request jsp parser *.jsp *.java
*.class 执行 response 信息学院 周宝刚

48 JSP 执行过程

49 JSP示例(Hello_Date.jsp)
page import="java.util.*" %> page contentType="text/html; charset=gb2312" %> <HTML> <BODY> 你好,今天是 <% Date today=new Date(); %> <%=today.getDate()%>号， 星期<%=today.getDay()%> </BODY> </HTML> import java.util.*; response.setContentType("text/html; charset=gb2312"); out = pageContext.getOut(); out.write(“\r\n\r\n<HTML>\r\n <BODY>\r\n你好,今天是\r\n"); Date today=new Date(); out.print(today.getDate()); out.write("号，星期"); out.print(today.getDay()); out.write(" \r\n </BODY>\r\n</HTML>\r\n "); servlet文件 JSP文件 信息学院 周宝刚

50 JSP示例(浏览结果) 信息学院 周宝刚

51 HTML文档基本架构 <html> <head> <title> 网页标题 </title>
<body> <p>这是正文部分！</p> </body> </html> 信息学院 周宝刚

52 l <html> 元素是HTML文档的最高层元素，原则上用它来指出HTML文档的开始与结束。
说明： l      <html> 元素是HTML文档的最高层元素，原则上用它来指出HTML文档的开始与结束。 l         <head> 元素用来标识网页的头部， l        <title> 元素用来指定浏览器所要显示的标题文字。 l       <body> 元素用来标识HTML文档的主体部分。 信息学院 周宝刚

53 HTML常用标记 头部标记 <HEAD>和</HEAD>是HTML的头部标记，其中主要包括对当前网页的一些基本描述信息，例如网页标题、一些说明信息和搜索关键字等。 1．网页标题标记 格式： <TITLE> 标题文字 </TITLE> 示例： <title>访客留言簿</title> 信息学院 周宝刚

54 HTML常用标记 2．元信息标记 <META>标记是HTML头部标记中常见的元信息标记，可重复出现在头部标记中，用来指明本网页的作者、网页制作工具、所包含的的关键字，以及其他一些描述网页信息。<META>标记的另一个作用是创建HTTP响应头，以便让浏览器知道如何去处理这个网页，例如这个网页什么时候过期，隔多少时间自动刷新等。 自动刷新，并指向新网页 <meta http-equiv="Refresh" content="10; url= 10秒后刷新到 2、网页间转换时加入效果 <meta http-equiv="Page-Enter" content="revealTrans(duration=10, transition=50)">  <meta http-equiv="Page-Exit" content="revealTrans(duration=20, transition=6)">  加在一个网页中，进出时有一些特殊效果，这个功能即FrontPage 98的Format/Page Transition.不过注意所加网页不能是一个Frame页; 3、强制网页不被存入Cache中 <meta http-equiv="pragma" content="no-cache">  <meta http-equiv="expires" content="wed, 26 Feb :21:57 GMT">  大家可以到 4、定义指向窗口 <meta http-equiv="window-target" content="_top"> 可以防止网页被别人作为一个Frame调用.(不过,我试了一下,似乎不灵)  Meta还有很多功能, 如大家关心的 "怎样在搜索引擎中，被放在搜索结果前面的 位置"( 你可以在以下站点进一步查询： html_metatag_res.html <meta name="KEYWORDS" content="...">说明关键词； <meta name="DESCRIPTION" content="...">说明主页描述； <meta http-equiv="Content-Type" content="text/html; charset=gb_ ">和 <meta http-equiv="Content-Language" content="zh-CN">说明所用语言及文字...  信息学院 周宝刚

55 HTML常用标记 <meta http-equiv="Refresh" content="10; url= 10秒后刷新到 网页间转换时加入效果 <meta http-equiv="Page-Enter" content="revealTrans(duration=10, transition=50)">  <meta http-equiv="Page-Exit" content="revealTrans(duration=20, transition=6)">  强制网页不被存入Cache中 <meta http-equiv="pragma" content="no-cache"> <meta name=“KEYWORDS” content=“...”>说明关键词 <meta name=“DESCRIPTION” content=“...”>说明主页描述 <meta http-equiv="Content-Type" content="text/html; charset=gb_ "> <meta http-equiv="Content-Language" content="zh-CN"> 说明所用语言及文字... 自动刷新，并指向新网页 <meta http-equiv="Refresh" content="10; url= 10秒后刷新到 2、网页间转换时加入效果 <meta http-equiv="Page-Enter" content="revealTrans(duration=10, transition=50)">  <meta http-equiv="Page-Exit" content="revealTrans(duration=20, transition=6)">  加在一个网页中，进出时有一些特殊效果，这个功能即FrontPage 98的Format/Page Transition.不过注意所加网页不能是一个Frame页; 3、强制网页不被存入Cache中 <meta http-equiv="pragma" content="no-cache">  <meta http-equiv="expires" content="wed, 26 Feb :21:57 GMT">  大家可以到 4、定义指向窗口 <meta http-equiv="window-target" content="_top"> 可以防止网页被别人作为一个Frame调用.(不过,我试了一下,似乎不灵)  Meta还有很多功能, 如大家关心的 "怎样在搜索引擎中，被放在搜索结果前面的 位置"( 你可以在以下站点进一步查询： html_metatag_res.html <meta name="KEYWORDS" content="...">说明关键词； <meta name="DESCRIPTION" content="...">说明主页描述； <meta http-equiv="Content-Type" content="text/html; charset=gb_ ">和 <meta http-equiv="Content-Language" content="zh-CN">说明所用语言及文字...  信息学院 周宝刚

56 主体标记 <BODY>和</BODY>标记是HTML文档的主体标记，其内包括了将在网页中显示的文字、图片、表格、链接、表单等所有内容。 信息学院 周宝刚

57 1．<BODY>标记的属性及其说明
属 性 描 述 TEXT 设定页面文字的颜色 BGCOLOR 设定页面背景的颜色 BACKGROUND 设定页面背景的图像 BGPROPERTIES 设定页面背景图像是否随页面的滚动而动 LINK 设定默认的链接颜色 ALINK 设定鼠标靠近时的链接颜色 VLINK 设定已访问过的链接颜色 TOPMARGIN 设定页面上边与浏览器窗口顶端的距离 LEFTMARGIN 设定页面左边与浏览器窗口左端的距离

58 主体标记 <BODY>标记应用示例 <body bgcolor="gold">
<body bggroung="abc.jpg" bgproperties=fixed> <body link="#0000FF" alink="#FF0000" vink="#800080"> <body topmargin="12" leftmargin="20"> 信息学院 周宝刚

59 段落标记 1．标题文字标记 <Hn align = 对齐方式> 标题文字 </Hn> 2．分段标记
<P align = 对齐方式> 文字 </P> 说明：分段标记不仅使得后面的文字换行输出，还将在两个段落之间产生一个空行。分段结束标志 </P> 可以省略。 3．换行标记 文字 <BR> 说明：可以连续使用多个<BR> 标记来产生多个空行 信息学院 周宝刚

60 段落标记 4．横线标记 <HR size = 粗细 align = 对齐方式 width = 宽度 color = 颜色>
5．文本缩排标记 <Blockquote> 文字 </Blockquote> 信息学院 周宝刚

61 文字格式标记 1．字体标记 格式： <FONT size = 大小 face = 字体名称 color = 颜色>文字</FONT> 2．文字修饰标记 信息学院 周宝刚

62 标 记 描 述 <B>…</B> 将文字设置为粗体字 <I>…</I> 将文字设置为斜体字 <U>…</U> 设置为带有下划线的文字 <SUP>…</SUP> 设置为位于右上角的上标文字 <SUB>…</SUB> 设置为位于右下角的下标文字 <STRIKE>…</STRIKE> 设置为带有删除线的文字 <ADDRESS>…</ADDRESS> 标明其间的文字为地址内容 <EM>…</EM> 强调其间的文字（通常为斜体） <STRONG>…<STRONG> 强调其间的文字（通常为黑体）

63 2.2.5 特殊字符标记 字 符 对应字符标记 对应十进制编码标记 说 明 < < 小于符号 > > 大于符号
特殊字符标记 字 符 对应字符标记 对应十进制编码标记 说 明 < < 小于符号 > > 大于符号 & & & AND符号 " " " 双引号 空格 中点 分节符号 版权符号 注册符号

64 列表标记 1．有序列表标记 格式： <OL type = 序号类型 start = 开始序号> <LI type = 序号类型>列表项1 <LI type = 序号类型>列表项2 …… <LI type = 序号类型>列表项n </OL> 2．无序列表标记 <UL type = 项目符号类型> <LI type = 项目符号类型>列表项1 <LI type = 项目符号类型>列表项2 …… <LI type = 项目符号类型>列表项n </UL> 信息学院 周宝刚

65 图像标记 格式： <IMG scr = 图片文件的URL align = 对齐方式 border = 边框宽度 alt = 说明性替代文字 height = 图像高度 width = 图像宽度 hspace = 水平边距 vspace = 垂直边距> 信息学院 周宝刚

66 超链接标记 格式： <A href = URL>用作链接的文字或图像</A> 信息学院 周宝刚

67 HTML表格标记 1．网页中的表格 网页中经常需要使用各种表格元素，设计者不仅可以通过表格来输出诸如“商品表”或“员工表”中的各行信息，更重要的是可以利用表格来方便地控制网页中各种元素的布局，以便整齐地安排网页中众多的文字和图片等。 信息学院 周宝刚

68 2．表格定义格式 <TABLE align = 对齐方式 bgcolor = 表格背景颜色 background= 表格背景图像 width = 表格宽度 height = 表格高度 border = 边框粗细 bordercolor = 边框颜色 cellspacing = 单元格间距 cellpadding = 单元格边距> <TR><TH>…</TH><TH>…</TH>……</TR> <TR><TD>…</TD><TD>…</TD>……</TR> <TR><TD>…</TD><TD>…</TD>……</TR> …… </TABLE>

69 HTML框架标记 1．网页中的框架 框架元素用来将整个浏览器窗口划分为多个不同的矩形区域，在一个区域内可以独立显示与区域之外不同的HTML文档内容。框架元素的定义需要用到框架集标记和框架标记，框架集标记<FRAMESET>用来定义一个窗口内的框架数、各框架的尺寸等，框架标记<FRAME>则用来具体定义某个框架的名称、在该框架中显示的HTML文档等。 信息学院 周宝刚

70 2．框架定义格式 <FRAMESET cols = 框架列数及各列宽度 rows = 框架行数及各行高度 bordercolor = 边框颜色 frameborder = 框架边框 framespacing = 框架间距> <FRAME name = 框架名称 target = 目标框架 scr = URL border = 边框宽度 bordercolor = 边框颜色> <FRAME ……> …… </FRAMESET>

71 HTML表单标记 1．网页中的表单 表单的英文名称为form ，用于在网页中为浏览者提供一个输入各种信息的界面，以便Web应用程序和Web数据库获取这些信息。大多数网站的网页设计都需要使用表单元素，例如通过表单来完成用户注册信息的输入或者商品订购信息的输入等。 信息学院 周宝刚

72 2．表单定义格式 <FORM name = 表单名 action = 被激活程序 method = 信息传送方式> …… <INPUT type = 表单域类型 name = 表单域名称 ……> …… </FORM> 信息学院 周宝刚

73 常用表单域标记 1．<INPUT> 标记 格式：
<INPUT type = 表单域类型 name = 表单域名称 value = 字符串 size = 大小> 说明：<INPUT>标记中可以有6个属性，分别为：type、name、value、size、maxlength和checked。其中type属性用来指定表单域的类型，其值允许有：text（文本框）、password（密码框）、button（普通按钮）、image（图片按钮）、file（文件框）、raido（单选按钮）、checkbox（复选框）、submit（提交按钮）、reset（重置按钮）、hidden（隐藏）等多种表单域类型。 信息学院 周宝刚

74 2．<SELECT> 标记 格式： <SELECT name = 表单域名称 size = 大小 multiple = 可选多少项> <OPTION>文字</OPTION> <OPTION>文字</OPTION> …… </SELECT> 3．<TEXTAREA> 标记 < TEXTAREA name = 表单域名称 rows = 行数 cols = 列数 value = 字符串> </TEXTAREA>

75 HTML其他标记 动态文字标记 格式： <MARQUEE bgcolor = 背景颜色 behavior = 移动方式 direction = 移动方向 align = 对齐方式 scrollamount = 移动速度 scrolldelay = 停顿时间 height = 高度 width = 宽度 hspace = 水平边距 vspace = 垂直边距> </MARQUEE> 信息学院 周宝刚

76 层标记 格式： <DIV id = 层的名称 style = 层的样式 > HTML元素序列 </DIV>
信息学院 周宝刚

77 嵌入多媒体信息标记 格式： <Embed scr = 多媒体文件的URL type = 多媒体文件的类型 width = 宽度 height = 高度> </Embed> 信息学院 周宝刚

78 HTML文档样式 在HTML文档中除了可用各种标记对文字或段落等元素分别设置格式外，还可应用样式来进行格式设置。在设计HTML网页时，可采用下列方式定义和应用样式： 在文档头部定义样式块。 在文档主体部分对个别元素（如段落、表格单元等）单独定义样式。 使用外部样式表或称层叠样式表CSS（Cascading Style Sheets）。 信息学院 周宝刚

79 在文档头部定义样式 1．格式： <STYLE> HTML标记{属性名称：属性值；属性名称：属性值 ……} HTML标记{属性名称：属性值；属性名称：属性值 ……} …… < /STYLE> 2．样式块中的各种属性 信息学院 周宝刚

80 属 性 说 明 取 值 Font-Size 字体大小 Points、 Inches、 Pixels、 Centimeter Font-Family 字体 FontName Font-Weight 字体粗细 Lighter、 Medium、 Bold Font-Style 斜体 Normal、 Italic Line-Height 行距 Color 文本颜色 ColorName、 RGB triplet Text-Decoration 文本修饰效果 None、 Underline、 Italic、 Line-Through Text-Aligh 文本对齐 Left、 Right、 Center Text-Indent 文本缩进 Margin-Left 页面左边界 Margin-Right 页面右边界 Background 背景图片或颜色 URL、 Color-Name、 RGB triplet

81 为单个元素定义样式 对一些元素单独设置style属性示例：
 <p style = "colort: #ff0000; font-weight:bold">这是一段红色粗体文字</p> <h2 style = "font-family: 宋体; Color:brown">这是一个棕色宋体字标题</h2> <a href = " style = "text-decoration: none ">163网站</a> <td align =" middle" style="font-size: 12px; font-family: 隶书" >姓名</td> 信息学院 周宝刚

82 使用级联样式表CSS 级联样式表CSS实际上是用来规范HTML文档格式的样式定义文件，可统一定义网站中多个网页内容的显示格式。此种定义方式不仅能够大大减少THML文档中各种重复标记的数目，而且有利于整个网站页面风格的统一。此外，使用CSS可将网页要展示的内容与其样式定义分开，即把网页的外观设计从网页内容中独立出来集中管理。这样，当需要改变网页外观时，只需更改对应的样式表文件即可。 使用级联样式表的具体方法是：在一个或多个级联样式表中定义样式，并将它们保存为扩展名为.CSS的文件，然后将它们链接到需要使用这些样式的所有网页，从而实现这些网页外观的一致性。 信息学院 周宝刚

83 CSS+DIV来设计页面 参考CSS手册 利用CSS+DIV来设计界面示例 信息学院 周宝刚

84 课程内容 JAVASCRIPT 简介 JAVASCRIPT编程基础 流程控制 函数 对象编程 文档对象模型与事件驱动 信息学院 周宝刚

85 JAVASCRIPT 简介 什么是JavaScript JavaScript是Web上的一种功能强大的编程语言，用于开发交互式的Web页面。
JavaScript的前身叫做LiveScript JavaScript 的基本特点 JavaScript是脚本编程语言： JavaScript是基于对象的语言 安全性 跨平台性 讨论Web开发技术的历史，当然要先说说Web的起源。众所周知，Web这个Internet上最热门的应用架构是由Tim Berners-Lee发明的。Web的前身是1980年Tim Berners-Lee负责的Enquire（Enquire Within Upon Everything的简称）项目。1990年11月，第一个Web服务器nxoc01.cern.ch开始运行，Tim Berners-Lee在自己编写的图形化Web浏览器“WorldWideWeb”上看到了最早的Web页面。1991年，CERN（European Particle Physics Laboratory）正式发布了Web技术标准。目前，与Web相关的各种技术标准都由著名的W3C组织（World Wide Web Consortium）管理和维护。 从技术层面看，Web架构的精华有三处：用超文本技术（HTML）实现信息与信息的连接；用统一资源定位技术（URI）实现全球信息的精确定位；用新的应用层协议（HTTP）实现分布式的信息共享。这三个特点无一不与信息的分发、获取和利用有关。其实，Tim Berners-Lee早就明确无误地告诉我们："Web是一个抽象的（假想的）信息空间。"也就是说，作为Internet上的一种应用架构，Web的首要任务就是向人们提供信息和信息服务。 信息学院 周宝刚

86 JAVASCRIPT 简介 在HTML中嵌入JavaScript
通过标记<SCRIPT>…</SCRIPT>引入JavaScript代码。 Language属性指定脚本类型，如VBScript、JavaScript 链接JavaScript文件            链接方式：使用<SCRIPT>标记的SRC属性指定*.js的URL。 信息学院 周宝刚

87 JAVASCRIPT 简介 客户端应用                                                                                                                                        服务器端应用 信息学院 周宝刚

88 JAVASCRIPT编程基础 常量 JavaScript有三种基本类型的常量：数值型、字符串型和布尔型。 空值型
常量            JavaScript有三种基本类型的常量：数值型、字符串型和布尔型。 空值型     空值就是null，定义空的或不存在的引用。它不等同于空串或0。 未定义值       未定义值就是undefined，表示变量还没有赋值。 变量     所谓变量，就是程序中一个已命名的存储单元。 使用var声明变量 JavaScript变量的类型是动态的 信息学院 周宝刚

89 JAVASCRIPT编程基础 算术运算符 (+,-,*,/,%,++,-- )
比较运算符 (<,<=,>,>=,==,!=) 逻辑运算符 (&&,||,! ) 字符串运算符 (+) 位操作运算符 (&,|,^,<<,>>,>>> ) 赋值运算符 (=) 条件运算符 (?: ) 其他运算符 (. [] () ) 信息学院 周宝刚

90 流程控制 3种对话框: 警示、确认和提示对话框 alert() alert("欢迎浏览本页面！"); confirm()
var visited,show_text; visited = confirm(“您来过西湖吗？"); show_text = visited?“您也认为西湖很美吧！":"欢迎您有机会来中大参观!"; document.write(show_text); prompt() name =prompt("请输入您的姓名:",""); 信息学院 周宝刚

91 流程控制 if 语句 (if…else 语句 ) switch 语句
switch() { case 常数表达式1:语句1;break; case 常数表达式2:语句2; break; … case 常数表达式n:语句n; break; default: 语句n+1; break; } 信息学院 周宝刚

92 流程控制 for 语句 for(初值表达式;循环判定式;更新表达式) 循环体语句 while 语句 while(循环判定式) 循环体语句
do while 语句 do 循环体语句 while(循环判定式); 信息学院 周宝刚

93 函数 eval()函数 计算字符串表达式的值，如：x =eval("123*321/9") escape()、unescape()函数
escape()将字符串中的非字母数字字符转换为按格式%XX表示的数字。如: var str="Tom & Jerry Show"; var escapestr=escape("Tom & Jerry Show"); unescape()函数将字符串中格式为“%XX”的数字转换为字符。如: var str="Tom%20%26%20Jerry%20Show"; var unescapestr=unescape(str); 结果为“Tom & Jerry Show”。 信息学院 周宝刚

94 函数 isNaN ()、isFinite()函数 isNaN函数确定一个变量是否是NaN，如果是，则返回true，否则返回false。
isFinite()函数用于确定一个变量是否有限。如isFinite(1)、isFinite(true)返回true，而isFinite(“a”)返回false。 parseFloat()、parseInt()函数 parseFloat()将字符串开头的整数或浮点数分解出来，转换为浮点数。如，parseFloat(“123.45”)、parseFloat(“123.45abc”)返回浮点数123.45，而parseFloat(“abc123.45”)和parseFloat(true)返回NaN parseInt()将字符串开头的整数分解出来，转换为整数。如，parseInt(“123”)、parseInt(“123.45”)、parseInt(“123.45abc”)都返回整数123，而parseInt(“abc123”)和parseInt(true)返回NaN 信息学院 周宝刚

95 函数 自定义函数 定义格式： function 自定义函数名() { 函数体 } 在同一个页面中的两个函数不能同名。
函数定义通常放在<HEAD></HEAD>标记之间，确保函数先定义后使用。 调用形式“函数名()” 使用return语句返回值 信息学院 周宝刚

96 文档对象模型与事件驱动 信息学院 周宝刚

97 文档对象模型与事件驱动 引用文档对象模型中的对象
所有下层对象都是其上层对象的子对象。而子对象其实就是父对象的属性，所以引用子对象的方式，与引用对象的一般属性是相同的。如： window.document.write("Hello"); 由于window对象是默认的最上层对象，因此引用它的子对象时，可以不使用window： document.write("Hello"); 当引用较低层次的对象时，要根据对象的包含关系，一层一层地引用对象。如： document.form1.yourname 信息学院 周宝刚

98 文档对象模型与事件驱动 引用文档对象模型中的对象
所有下层对象都是其上层对象的子对象。而子对象其实就是父对象的属性，所以引用子对象的方式，与引用对象的一般属性是相同的。如： window.document.write("Hello"); 由于window对象是默认的最上层对象，因此引用它的子对象时，可以不使用window： document.write("Hello"); 当引用较低层次的对象时，要根据对象的包含关系，一层一层地引用对象。如： document.form1.yourname 信息学院 周宝刚

99 使用浏览器对象 窗口(Window)对象 对于window对象的使用，主要集中在窗口的打开和关闭、窗口状态的设置、定时执行程序以及各种对话框的使用等四个方面 Open,close, setInterval, location.href 信息学院 周宝刚

100 使用浏览器对象 文档(document)对象
document.write("当前文档的标题:"+document.title+"<BR>"); document.write("当前文档的URL:"+document.URL+"<BR>"); document.write("当前文档的背景色:"+document.bgColor+"<BR>"); document.write("当前文档的最后修改日期:"+document.lastModified+"<BR>"); document.write("当前文档包含"+document.links.length+"个超链接<BR>"); document.write("当前文档包含"+document.images.length+"个图像<BR>"); 信息学院 周宝刚

101 使用浏览器对象 for(i=0;i<document.all.length;i++) //遍历文档中的所有标记 {
cell=document.all[i]; if(i>0) document.write(","); document.write(cell.tagName); } 信息学院 周宝刚

102 使用浏览器对象 for(i=0;i<document.all.length;i++) //遍历文档中的所有标记 {
cell=document.all[i]; if(i>0) document.write(","); document.write(cell.tagName); } 信息学院 周宝刚

103 使用浏览器对象 表单(form)对象 form对象的属性、方法和事件 var myform,element,i;
myform = document.myform; document.write("<H3>表单中有"+myform.length+"个元素:</H3>"); for (i=0;i<myform.length;i++) { element = myform.elements[i]; if(i>0) document.write(","); document.write(element.name); } 信息学院 周宝刚

104 使用浏览器对象 表单(form)对象 form对象的属性、方法和事件 var myform,element,i;
myform = document.myform; document.write("<H3>表单中有"+myform.length+"个元素:</H3>"); for (i=0;i<myform.length;i++) { element = myform.elements[i]; if(i>0) document.write(","); document.write(element.name); } 信息学院 周宝刚

105 WEB 2.0 Web2.0，是相对Web1.0的新的一类互联网应用的统称。由Web1.0单纯通过网络浏览器浏览html网页模式向内容更丰富、联系性更强、工具性更强的Web2.0互联网模式的发展已经成为互联网新的发展趋势。 Web2.0是以 Flickr、Craigslist、Linkedin、Tribes、Ryze、Friendster、Del.icio.us、43Things.com等网站为代表，以Blog、TAG、SNS、RSS、wiki等社会软件的应用为核心，依据六度分隔、xml、ajax等新理论和技术实现的互联网新一代模式 信息学院 周宝刚

106 WEB 2.0 Blog——博客/网志 　　Blog的全名应该是Web log，后来缩写为Blog。Blog是一个易于使用的网站，您可以在其中迅速发布想法、与他人交流以及从事其他活动。所有这一切都是免费的。 RSS 　　RSS是站点用来和其他站点之间共享内容的一种简易方式（也叫聚合内容）的技术。最初源自浏览器“新闻频道”的技术，现在通常被用于新闻和其他按顺序排列的网站，例如Blog。 信息学院 周宝刚

107 WEB 2.0 WIKI——百科全书 　　Wiki--一种多人协作的写作工具。Wiki站点可以有多人（甚至任何访问者）维护，每个人都可以发表自己的意见，或者对共同的主题进行扩展或者探讨。 　　Wiki指一种超文本系统。这种超文本系统支持面向社群的协作式写作，同时也包括一组支持这种写作的辅助工具。有人认为，Wiki系统属于一种人类知识网格系统，我们可以在Web的基础上对Wiki文本进行浏览、创建、更改，而且创建、更改、发布的代价远比HTML文本小；同时Wiki系统还支持面向社群的协作式写作，为协作式写作提供必要帮助；最后，Wiki的写作者自然构成了一个社群，Wiki系统为这个社群提供简单的交流工具。与其它超文本系统相比，Wiki有使用方便及开放的特点，所以Wiki系统可以帮助我们在一个社群内共享某领域的知识。 信息学院 周宝刚

108 WEB 2.0 网摘 　　 “网摘”又名“网页书签”，起源于一家叫做Del.icio.us的美国网站自2003年开始提供的一项叫做“社会化书签”（Social Bookmarks）的网络服务，网友们称之为“美味书签”（Delicious在英文中的意思就是“美味的；有趣的”）。 SNS——社会网络 　　Social Network Sofwaret，社会性网络软件，依据六度理论，以认识朋友的朋友为基础，扩展自己的人脉。 P2P——对等联网 　　P2P是peer-to-peer的缩写，peer在英语里有“（地位、能力等）同等者”、“同事”和“伙伴”等意义。这样一来，P2P也就可以理解为“伙伴对伙伴”、“点对点”的意思，或称为对等联网。目前人们认为其在加强网络上人的交流、文件交换、分布计算等方面大有前途。 信息学院 周宝刚

109 WEB 2.0 IM——即时通讯 　　即时通讯（Instant Messenger，简称IM）软件可以说是目前我国上网用户使用率最高的软件。聊天一直是网民们上网的主要活动之一，网上聊天的主要工具已经从初期的聊天室、论坛变为以MSN、QQ为代表的即时通讯软件。大部分人只要上网就会开着自己的MSN或QQ。 　　 作为使用频率最高的网络软件，即时聊天已经突破了作为技术工具的极限，被认为是现代交流方式的象征，并构建起一种新的社会关系。它是迄今为止对人类社会生活改变最为深刻的一种网络新形态，没有极限的沟通将带来没有极限的生活。 信息学院 周宝刚

110 AJAX Ajax(Asynchronous JavaScript + XML的简写 )不是一种技术。实际上，它由几种蓬勃发展的技术以新的强大方式组合而成。Ajax包含： 基于XHTML和CSS标准的表示； 使用Document Object Model进行动态显示和交互； 使用XMLHttpRequest与服务器进行异步通信； 使用JavaScript绑定一切。 信息学院 周宝刚

111 AJAX Ajax工作原理 Ajax的核心是JavaScript对象XmlHttpRequest。该对象在Internet Explorer 5中首次引入，它是一种支持异步请求的技术。简而言之，XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应，而不阻塞用户。 信息学院 周宝刚

112 XmlHttpRequest对象 属性 描述 onreadystatechange 每次状态改变所触发事件的事件处理程序
对象状态值： 0 = 未初始化（uninitialized） 1 = 正在加载（loading） 2 = 加载完毕（loaded） 3 = 交互（interactive） 4 = 完成（complete） responseText 从服务器进程返回的数据的字符串形式 responseXML 从服务器进程返回的DOM兼容的文档数据对象 status 从服务器返回的数字代码，比如404（未找到）或200（就绪） statusText 伴随状态码的字符串信息 信息学院 周宝刚

113 AJAX Ajax示例 信息学院 周宝刚