1. Web开发技术概述 1.1 Web技术基础知识 Web
全称World Wide Web,缩写WWW,译为“万维网”,简称为Web
是一个可通过互联网来访问的、由许多互相链接的超文本组成的系统
Web不等于Internet,它只是Internet中的一个部分,而且和浏览器有关。Web是Internet中的一个子集或者说Web是互联网提供信息的一种手段。
Web服务器
又称WWW服务器、网站服务器、站点服务器或HTTP服务器
为用户提供信息浏览和信息处理服务。将信息用超文本(Hypertext)组织,为用户在Internet上搜索和浏览信息提供服务。
Web服务器实际上就是一个软件系统。但它必须安装在一台高性能和高可靠性的计算机上,所以人们通常将那台计算机就叫做Web服务器。
常用的Web服务器有: ▪ Microsoft IIS ▪ IBM WebSphere ▪ Oracle WebLogic ▪ Apache 开源 ▪ Tomcat 开源 ▪ Jboss 开源 ▪ 金蝶公司 Apusic
一台计算机
可以安装多个Web服务器
。
Web页面
Web在提供信息服务之前,所有信息都必须以文件方式事先存放在Web服务器所管辖磁盘中某个文件夹下,其中包含由超文本标记语言(HyperText Markup Language,HTML)组成的文本文件。
这些文本文件称为超链接文件,又称网页文件或Web页面文件(Web page)
Web静态网页扩展名:HTM、HTML
Web动态网页扩展名:ASP、ASPX、JSP、PHP
动态网页
/Web服务器页面
需要Web服务器对它们进行重新处理 后,动态生成新的HTML页面再传送给客户端供用户浏览。
URL(统一资源定位符)
信息资源放在Web服务器之后,需要将它的地址告诉给用户,以便让用户来访问,这个地址就叫统一资源定位符(Uniform Resource Locators,URL),俗称为网址。
URL字串 = 协议名称 + 主机名 + 文件名(包含路径)
URL地址中的主机名也可直接输入对应的IP地址。手工输入的URL地址只能为绝对地址,相对地址用于网页文档内部的链接地址。
为什么有时URL地址中没有文件名还能照常显示页面内容呢?这是因为在Web服务器的配置中,可以事先设定一个或多个默认文件名 ,浏览器会自动查找这些默认的文件名 。
相对地址
:href=“../Shweather.htm” 也可写成 href=“/web/Shweather.htm”
绝对地址
:http://www.yahoo.com.cn/gif/stone.jpg
统一资源标识符URI是一个用于标识某一互联网资源名称的字符串。 Web上可用的每种资源 -HTML文档、图像、视频片段、程序等都可由URI来定位。
URL网址只是属于URI的一种,用来定位所需访问的网页地址。
浏览器的工作原理及种类
浏览器就是Web客户端程序,要浏览Web页面必须在本地计算机上安装浏览器软件,用于与Web服务器建立连接,并与之进行通信。
在网络带宽相同的情况下同一台计算机使用不同的浏览器访问同一个网站,访问速度会不一样
浏览器是个软件,有软件复杂度的问题,也存在软件运行效率的问题。
浏览器安全级别设置也会影响访问速度,安全级别越高,访问速度越慢。
浏览器Cookie:HTTP是一种无记忆的协议 ,有时需要浏览器能够记住一些信息,因此引入Cookie概念。浏览器允许用户通过Cookie读写一些信息,这在一定程度上实现了浏览器的记忆功能 。
HTTPS即HTTP下加入套接字SSL层,对传输的网页进行加密处理,是以安全为目标的HTTP通道。
C/S模式与B/S模式 C/S模式
几乎所有的应用逻辑都在客户端进行和表达,客户端完成与用户的交互任务。
服务器端负责后台数据的查询和管理、大规模的计算等服务。
通常客户端的任务比较繁重,称作“肥”客户端 ,而服务器端的任务相对较轻,称作“瘦”服务器 。
优点
:
异种平台集成。
分布式管理。
能充分发挥客户端PC的处理能力。
运行安全、稳定、速度快,且在适当情况下可脱机操作。
缺点
:
必须在客户端安装大量的应用程序(客户端软件)。
需要在客户端安装支持系统运行的动态链接库等。
存在移植困难、用户界面风格不统一、操作复杂、不利于推广使用、维护和升级过程繁琐、信息内容和形式单一和不易应用新技术等不足。
B/S模式
基于Web的协同计算模式,是一种三层架构的瘦客户机/肥服务器的计算模式。
用户工作界面是通过Web浏览器来实现,少部分事务逻辑在前端(浏览器)实现,主要事务逻辑在服务器端实现,形成所谓三层结构。
简化了客户端电脑载荷,减轻了系统维护与升级的成本和工作量,降低了用户的总体成本)。
优点
:
具有良好的开放性。
无需下载安装,利用浏览器单一的访问点,用户可在任何时间和地点使用系统。
系统维护方便,有效地降低了整个系统的运行和维护成本。
缺点
:
运行速度没有C/S模式快,且受网络带宽的影响较大。
会出现更多安全性问题。
B/S 模式 / Web 应用系统:采用B/S模式构建的应用系统
基于Intranet的应用系统
基于Internet的应用系统
网站系统
需考虑 :浏览器的兼容性;在网络带宽在有限和不稳定的情况下,仍然可被快速访问;互联网上使用的安全性、稳定性、可靠性、有效性等;浏览器的兼容性。
Web的访问原理
静态网页:
只有HTML标记和客户端脚本代码,这种网页以后缀.htm或.html的文件存放。
也可实现各种动态的效果 ,如.GIF动画、FLASH、滚动字母等,这些动态效果只是视觉上的。
静态网页访问速度快 ,容易被搜索引擎收录。
动态网页:
不仅含有HTML标记和客户端脚本代码,而且含有需Web服务器进行处理的代码 (文件扩展名一般为ASPX、JSP、PHP等)。
用户登录、发布新闻、发布公司产品、交流互动、博客、网上调查等都需要动态网页来实现。
Web开发平台的组成
Microsoft .NET开发平台 :使用多种.NET兼容语言的任意组合来创建一个.NET应 用程序,如C#、VB、J#等
Oracle Java EE开发平台 :能开发和部署可移植、健壮、可伸缩且安全的服务器端 Java应用程序
LAMP 开发平台(Linux+Apache+MySQL+PHP)
常用的Web开发工具
常用网页制作工具
Dreamweaver是最流行的开发工具之一。
Fireworks以处理网页图片为特长,并可轻松创作GIF动画。
FrontPage的主要功能是设计、制作、管理网页或站点。新版本为Expression Web 4.0。
常用Web开发工具
VS 用于生成 Web 应用程序、Web服务、桌面应用和移动应用程序等。可用多种编程语言VB、C++、C# 和J# 开发,通过.NET Framework简化Web应用程序和Web服务的开发过程。
IBM Eclipse是一种可扩展的开放源代码的IDE(集成开发环境),使用灵活,易于扩展,大有成为Java第一开发工具之势。
1.2 Web基本技术介绍
Web前端(浏览器端)开发技术:HTML、CSS、DHTML/JavaScript、ActiveX、XML、XHTML
Web后端(服务器端)开发技术:CGI、PHP、JSP、ASP/ASP.NET、ADO/ADO.NET、Web Service、WCF
HTML
用HTML来定义网页的结构,用CSS来控制网页显示的格式。
静态页面的缺点:
无法支持后台数据库
无法有效地对站点信息进行及时的更新
无法实现动态显示效果
采用
DHTML
DHTML即动态的HTML语言(Dynamic HTML)。除了具有HTML语言的一切性质外,还可在下载网页后仍能实时变换页面元素效果,使人们在浏览网页时看到网页动态效果。
并不是一门新的语言,它是以下技术、标准或规范的一种集成:
HTML
CSS(层叠样式单)
CSSL(客户端脚本语言):JavaScript、Vbscript语言
HTML DOM(HTML文档对象模型)
DHTML可实现功能:
动态交互功能,使网页产生动态效果。
让用户站点易于维护。
可减轻服务器负荷,更大发挥网络能力。
Java Applet
Java Applet是指用Java编写的能够在Web页中运行的应用程序。它的可执行代码为class文件。
具有安全、功能强和跨平台等特性。
可提供动画、音频和音乐等多媒体服务,并且能产生原本只有CGI(公共网关接口)才能实现的功能。
JavaScript与VBScript
JavaScript是目前使用最广泛的脚本语言 ,它是由Netscape公司开发并随Navigator浏览器一起发布的,是一种介于Java与HTML之间、基于对象 的事件驱动的编程语言。使用JavaScript,不需要Java编译器,而是直接在Web浏览器中解释执行 。
VBScript脚本语言是Visual Basic Script(VBS)的简称,它是Microsoft Visual Basic的一个子集,可看作是VB语言的简化版。VBS和Javascript一样都用于创建客户方的脚本程序,并处理页面上的事件及生成动态内容。
ActiveX
微软ActiveX控件技术是一种可重用的 软件技术。
将一个或一组功能封装起来,以对象方式供开发者使用。
有大量商用或免费ActiveX控件供开发人员使用,也可用VC、VB等来开发一个ActiveX控件。ActiveX控件可在页面中直接使用 。
当浏览的网页遇到ActiveX控件时,会检查用户本地系统的注册表,查看其是否已安装在本地机上。若已安装,浏览器显示该网页并激活控件。若未在用户本地安装,浏览器将查找并安装到本地。下载控件时,浏览器会缺省地显示一个消息框,通知用户将要开始下载,用户可以选择终止下载或继续下载。
XML
HTML的不足 :
HTML不能适应信息检索和存档要求;
无法描述矢量图形、科技符号和一些其他特殊显示效果;
文档结构混乱而缺乏条理,导致浏览器的设计越来越复杂。
XML弥补了HTML的不足:
将网络上传输的文档规范化 ,并赋予标记一定的含义,
与此同时,还要保留其简捷、适于网上传输和浏览的优点。
XML是标记语言,可根据需要自定义新的标记。XML已在文件配置、数据存储、异构数据交换等众多方面得到广泛应用。
XHTML
基于XML的标记语言。
是一个过渡技术,结合了部分XML的强大功能以及大多数HTML的简单特性。
<div>
标记的配对标记是</div>
。在HTML中画横线标记为<hr>
,而在XHTML中变成<hr />
。
在HTML中不配对的标记,在XHTML中必须用“/”结束。标记的属性,例如按钮标记中的type属性,在XHTML中必须放在引号中,而在HTML中则可有可无。
CGI
CGI是公共网关接口(Common Gateway Interface)的缩写,是用于连接WEB页面和应用程序的接口。
可用VB、VC、Delphi、 Perl语言开发Web Server端运行的可执行程序,由网页的一个超链接激活 进行调用,并对该程序的返回结果进行处理后,显示在页面上。
CGI编程困难且效率低 ,每一次修改程序代码后还须重新编译。
每一个网上客户在访问CGI程序时,Web服务器都要单独建立应用进程 ,加重了服务器的负荷。
CGI多用在安全级别要求高的Web应用中。
PHP
PHP(超文本预处理器):用开源和跨平台 的PHP技术可创建动态网站,
它包括完整的编程语言、支持因特网的各种协议;
提供与MYSQL、SQL SERVER、ORACLE等多种数据库的访问能力、支持ODBC数据库连接方式;
在Unix、GUN/Linux和微软Windows平台上均可运行。PHP的优点是安装方便、学习过程简单、数据库连接方便、兼容性强、扩展性强。
PHP程序需在Apache、Tomcat等Web服务器上运行,Linux + PHP + MySQL + Tomcat + Apache + Dreamweaver是开发中小型企业网站系统的黄金组合,网站的运行效率佳,安全性高,可靠性和稳定性也非常好 ,受到广大开发者的青睐。
JSP
JSP可用于建立先进、安全和跨平台的动态网页。
JSP技术是以Java语言作为脚本语言的,使用JSP标识或者Java Servlet小脚本来生成页面上的动态内容。JSP可通过JDBC技术连接数据库。
JSP代码被编译成Servlet并由Java虚拟机执行 ,这种编译操作仅在对JSP页面的第一次请求时发生。跨平台应用是JSP的最大特色。
作为Java平台的一部分,JSP拥有Java编程语言“一次编写,各处运行” 的特点。不少大型企业使用Java EE平台提供的JSP技术构建Web应用系统。
ASP/ASP.NET
微软1996年11月推出ASP技术,可用VBScript或JavaScript脚本语言,结合HTML代码,快速完成服务器端动态网页的开发。Web服务器后台解释执行ASP动态网页,运行效率不高 。
2002年微软将ASP和.NET技术结合,推出了全新的ASP.NET技术,提供基于组件、事件驱动的可编程Web窗体 ,大大简化了编程,还可以用于建立Web服务。
ASP.NET与ASP有着本质的不同:
ASP.NET完全基于模块与组件 ;
具有更好的可扩展性与可定制性,数据处理方面引入了许多新技术,技术上远远超越了ASP;
ASP.NET与Windows Server 家族的完美组合为各种的Web应用提供了一个更为稳定、高效、安全的运行环境。
ADO/ADO.NET
ADO技术使得客户端应用程序可通过ODBC、OLEDB等方式来访问和操作DB Server,易于使用、速度快、内存支出少、占用磁盘空间少。
但它是面向连接的数据访问方式 ,即在操作数据库时,必须与数据库服务器进行联机操作 。当并发用户操作时,会影响数据库性能。
ADO.NET技术是.NET平台上的全新数据访问方式,数据源的数据可作为XML文档进行传输和存储。在访问数据的时候ADO.NET会利用XML制作数据的一份副本,
用户可断开与数据库服务器的连接直接在副本上进行操作 ,最后根据需要再将副本中的数据更新到数据库服务器,以大大提高数据访问性能 。
Web Service
Web Service可以是一个小粒度的组件完成一个简单功能,也可是一个大粒度的应用程序。不管是作为组件还是应用程序,它都会向外界暴露一个能够通过Web进行调用的API ,这就是说,能够用编程的方法通过Web访问来使用它。
用户在调用这些Web服务时,只需要提供输入数据就可得到返回的结果,然后对返回的结果进行加工即可。
在Web应用程序中无需下载安装Web服务可直接调用 Web服务提供的方法来实现某个功能,而通过ActiveX控件来实现某个功能时,必须将它下载到客户端,在客户端安装后才可使用。所以Web服务可实现分布式应用。
WCF(Windows Communication Foundation,Windows通讯接口)
WCF是由微软发展的一组数据通信的应用程序开发接口,它是.NET框架的一部分,由.NET Framework 3.0开始引入,与Windows Presentation Foundation及Windows Workflow Foundation并列为新一代Windows操作系统的三大重要应用程序开发类库。WCF集合了几乎由.NET Framework所提供的所有通讯方法,可利用WCF来创建面向服务的应用程序 。
优点 :统一性、互操作性、安全和可信赖、兼容性。
1.3 Web发展历程 Web 1.0 获取信息
大都采用技术创新主导的模式。
盈利大都基于一个共同点:巨大的点击流量。
出现了向综合门户合流现象。
形成了主营与兼营结合的明晰产业结构。
Web 2.0 用户的交互作用
Ajax
(Asynchronous JavaScript and XML,异步JavaScript和XML)最早由Jesse James Garrett提出。区别于传统的Web应用,Ajax应用的主要目的就是提高用户体验:
不刷新整个页面,在页面内与服务器通信;
使用异步方式 与服务器通信,不需要打断用户的操作,具有更加迅速的的响应能力;
应用系统不需要由大量页面组成。大部分交互在页面内完成,不需要切换整个页面。
由此可见,Ajax使得Web应用更加动态,带来了更高的智能,并且可以提供表现能力丰富的Ajax UI组件。这样一类新型的Web应用叫做RIA(Rich Internet Application)应用 。
Blog
是一个易于使用的网站,您可以在其中迅速发布想法、与他人交流以及从事其它活动,所有这一切都是免费的。
网摘/网页书签/社会书签
:网摘是一种服务,它提供的是一种收藏、分类、排序、分享互联网信息资源 的方式。
Wiki
:是一种多人协作的写作工具。Wiki站点可以有多人,甚至任何访问者维护,每个人都可以发表自己的意见,或者对共同的主题进行扩展或者探讨。
Wiki指一种超文本系统。这种超文本系统支持面向社群的协作式写作 ,同时也包括一组支持这种写作的辅助工具。
RSS
:站点用来和其它站点之间共享内容的一种简易方式(也叫聚合内容,Really Simple Syndication)的技术。
RSS搭建了一个信息迅速传播的技术平台 ,使得每个人都成为潜在的信息提供者。
发布一个RSS文件后,这个RSS Feed中包含的信息就能直接被其它站点调用,而且由于这些数据都是标准的XML格式,所以也能在其它的终端和服务中使用。
Web 3.0
全新版本的Web3.0纯属理论阶段,实际上目前还无法知道它会怎样工作。
2. Web开发环境的建立 2.1 如何配置IIS Web服务器 Web站点的配置
运行在Windows Server操作系统上IIS Web服务器可创建和管理多个网站 。
而Windows桌面版操作系统的IIS服务器一般只支持一个网站 。IIS有IIS 5.1、IIS 6.0和IIS 7.等版本,版本越高,配置的复杂度也越高。
主目录和虚拟目录的建立
每个网站的内容都存放在一个物理路径中,这个物理路径
也即主目录
。
一个网站所有文件不一定非要将它们全部放在一个目录下,可以分散存放在不同的硬盘分区 中。
要从主目录以外的其他目录中发布网站,就必须创建虚拟目录
。
例如将photo放到F盘中,将student放在E盘中。Web服务器通过创建虚拟目录 来管理分散存放的网站目录。
虚拟目录的别名可以随意取定,一般就可按照实际文件夹名来取。使用别名的好处:
别名可以比实际文件夹路径名短,便于用户输入 。
使用别名比较安全 ,因为虚拟目录的别名和实际路径之间是映射关系,用户很难知道文件所存放的实际位置。
虚拟目录对应的实际路径可以随意搬动 ,但用户访问虚拟目录的URL不变。
2.2 VS 2013的使用 VS 2013中几个重要概念
微软.NET Framework:用于构建、部署和运行Web服务及应用程序的平台。
提供一致的面向对象的编程环境,无论对象代码在哪儿执行。
提供软件部署和版本控制冲突最小、代码执行安全和运行性能高的代码执行环境。
减轻开发人员工具使用的复杂性。
按照工业标准进行,确保.NET Framework 代码可与任何其他代码集成。
三个组成部分:
CLR(Common Language Runtime,公共语言运行库)
:负责管理内存、线程执行、代码执行、代码安全验证、编译和其它系统服务。
托管代码
:需要以CLR环境来支撑运行的程序代码;非托管代码:用VB、VC++等工具开发的程序。
.NET Framework 类库
:提供很多现成的方法供开发人员编程使用,如复制、移动、删除一个文件、杀死一个进程、连接数据库等
ASP.NET
:使用托管代码来开发网站
开发Web应用系统的一般过程
个人开发
团队开发:涉及到源代码共享和源代码版本管理问题。
开发模式对比
开发模式:
传统开发模式
MVC开发模式
ASP.NET MVC的优势:
将页面与业务逻辑进行分离
限制了ViewState的使用
最终生成的HTML清洁化,不会生成许多垃圾代码
客户端和服务器端的处理呈现速度更快
没有PostBack和页面回传事件机制,表单的提交方式完全采用Web的原生方式,传输的数据内容也更加合理。
ASP.NET MVC的劣势:
对大量且复杂的数据处理变得非常困难,没有现成的数据控件可以使用
不使用视图状态维护状态信息。
2.3 源代码的版本控制
源代码的版本控制简称为源码控制,它在多人协作开发环境 中是非常重要的,它包含了对应用程序中每个源文件修改的历史记录,可对多个开发者的行为进行协调。
在需要比较两种版本的文件或找回早期版本的文件时,源代码的控制是非常有用的。
常用的源码控制软件有微软的Visual SourceSafe 2005(VSS 2005)、Visual Studio Team Foundation(VSTF)、Dick Grune开发的CVS(Concurrent Versions System)开源软件和CollabNet开发的Subversion(SVN)开源软件等。前两者主要结合微软的开发工具使用,后两者通常在UNIX/Linux
或Java开发工具中
使用。
2.4 Web站点的发布
当一个Web应用系统开发完成后,需要部署到服务器上,让最终用户通过浏览器进行操作,因此必须先将该Web应用系统进行发布,也称Web应用系统的部署。发布Web应用系统主要有:
手工发布;
直接连接到远程服务器上,通过HTTP或者FTP协议等进行发布;
打包发布。
3. HTML与CSS 3.1 HTML基础 HTML文件基本结构
文档类型:
标识这是一个HTML文档: ……
网页头部标识: ……
网页内容: ……
浏览器窗口标题: 窗口标题
标题是头元素的一部分
标题会出现在浏览器窗口标题栏上
注释:
标记的属性:用来描述标记的外观、行为方式及内在表现
<a id="mylink" href="aa.html title = "it's me">
id为超链接定义一个标识,因为HTML页面文档中可能有很多个超链接,通过ID可以确定是哪个超链接。title属性实现了将鼠标指针放在该超链接标记上时,会显示一个动态文本提示框“It’s me”。id、title属性是为大多数标记所共有的属性。每个标记有很多属性,但有许多是共有的属性
1 2 3 4 5 6 7 8 9 10 11 12 <!DOCTYPE HTML > <html > <head > <meta charset ="UTF-8" /> <title > 浏览器窗口标题</title > </head > <body > <p > Hello! </p > </body > </html >
文本和格式标记
换行标记: 强制换行
段落标记:<p align=“center”>…</p>
align的值可为“ left ”(左对齐)、“ center ”(居中)和“ right ”(右对齐)
文本缩进标记:<blockquote>…</blockquote>
在浏览器中按两边缩进的方式显示文本
文本居中标记:… 将文本居中显示
特殊符号: 空格
版权符号 ©
注册商标 ®
小于号 <
大于号 >
列表标记 <dl>…</dl>
、<dt>…</dt>
和<dd>…</dd>
列表标记 <ol>…</ol>
、<ul>…</ul>
和<li>…</li>
文本块标记 <div>…</div>
<span>…</span>
<p>…</p>
<span>``<div>``<p>
均可用作放置一个文本块。
div和span标记除可用作文本容器外,还可用作其他HTML标记的容器。网页上的漂浮物就是用Div实现的。
<address>…</address>
标记与<div>
标记作用相似,就是显示一块文本,但里面的字体只能是斜体 ,主要用来在网页上放置署名信息 。
超链接标记和表格标记
超链接标记 <a>…</a>
超链接标记是HTML标记最重要的标记,用属性href(hot reference)来指定锚点的链接信息,可为URL网址或文本、声音、图像等的URI地址。例如:<a href="http://www.cqu.edu.cn"> 重庆大学 </a>
表格标记:表格可简洁和一目了然地表现内容。表格标记由<table>
和</table>
组成。
表格的行标记<tr>
是Table Row的缩写
表格的列标记<td>
是Table Data的缩写
图像、视频与动画、声音处理标记
图像标记:<img src=“夜景.jpg” height=“100” width=“10%” border=“10” >
视频和动画标记:
dynsrc
表示视频与动画来源文件所在的URL地址,其它标记内容同图像显示标记。
start = fileopen表示页面一被装入便播放;
start = onmouseover表示当鼠标从该区域滑过时才播放。
loop表示视频或动画播放的重复次数,为infinite或为负数时表示无限循环。
控件标记
表单form
标记:从用户收集信息,然后将这些信息提交给服务器进行处理。表单中可包含允许用户进行交互的各种控件 ,例如: 文本框、列表框、复选框和单选按钮等。用户在表单中输入或选择数据之后将其提交,该数据就会送交给表单处理程序进行处理 。
用户界面,提供用户输入数据的元件;
处理程序,可以是客户端程序,在浏览器中执行,也可以是服务器处理程序,处理用户提交的数据,返回结果。
帧标记和iframe标记
帧标记/框架标记 Frame
将浏览器显示部分分成多个区域,每个区域可显示各不相同的网页。
点击某个区域中的网页超链接,可在其他区域显示超链接对应的网页。
Iframe标记/浮动帧标记
当前页面中设置多个浮动帧标记 ,每一个浮动帧标记都加载各自的网页 ,可实现浏览器网页加载的并发处理 。
HTML5介绍
新一代超文本标记语言HTML5仍处于不断发展 中。之前的HTML版本在功能上有限,例如无绘图处理功能等。
HTML5添加了许多新语法特性,包括用于媒介回放的 video
和 audio
元素、用于绘画的 canvas 元素、其它新的元素包括<section>
、<article>
、<header>
和<nav>
,主要是为了丰富文档的数据内容 。
一些标记添加了新属性,也有一些属性和元素被移除掉 了,还有一些元素如<a>
,<cite>
和<menu>
被修改,重新定义或标准化。同时应用程序接口API和文档对象模型DOM已成为HTML5中的基础部分 。
HTML5特性:
语义特性 :HTML5可使网页有更好的结构,标签更为丰富。
本地存储特性 :本地存储功能使HTML5网页运行更快,占用带宽更少。
设备兼容特性 :可获取地理位置;使外部应用与浏览器内部数据直接连接,例如视频影音可直接与麦克风及摄像头相联。
连接特性 :Server-Sent Event和WebSockets可实现服务器将数据“推送”到客户端。
网页多媒体特性 :提供Audio、Video等多媒体功能。
三维、图像及特效特性 :提供SVG、Canvas、WebGL及CSS 3的3D功能,用户会惊叹于在浏览器中所呈现的惊人视觉效果。
性能与集成特性 :通过XMLHttpRequest2等技术,帮助Web应用和网站在多样化的环境中更快速地工作。
CSS 3 特性 :在不牺牲性能和语义结构的前提下,CSS 3提供了更多的风格和更强的效果。
3.2 CSS 层叠样式表
CSS是为弥补HTML在显示属性设定上的不足而制定的一套扩展样式标准。到98年,W3C在原有草案的基础上进行了扩展,建立了CSS2规范。
HTML注重的是内容本身,而不是显示方式。CSS注重解决网页字体大小、颜色、边框等格式问题,以提供给用户尽量美观、易读的网页。
CSS的特点
简化了网页的格式代码,外链样式还可以被浏览器保存在缓存里,加快了网页下载速度。
只要修改保存着网页格式的CSS样式表文件就可以改变整个站点的风格特色,保证了网站显示风格的一致。避免了一个个网页的修改,大大减少了重复工作量。
CSS的定义
样式格式为:
选择符{ 属性1:值1;属性2:值2;……}
简写为:选择符{属性值对 }div{font-family: 宋体; font-size: 12pt;}
CSS中的选择符
HTML标记类选择符:直接用HTML标记或HTML元素名称作为CSS选择符
具有上下文关系的HTML标记类选择符
包含在div内有一个input,div和input之间就有上下文关系;div内有span,span内有B,它们之间也构成了上下文关系。
这种上下文关系可以嵌套任意层次。
用div span b {color:yellow}表示了div标记中的span标记中的B元素用黄颜色显示。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 <html > <head > <title > CSS选择符问题 </title > <style type ="text/css" > input { color : white; } div input { color : red; } div span b {color : yellow; } </style > </head > <body > <input type ="text" value ="change me" > <br > <div > <input type ="text" value ="change me" > <br > <span > I'm a <b > good </b > student </span > </div > </body > </html >
用户定义的类选择符
ID选择符
每一个标记都可有ID属性,可唯一识别该标记元素。
可以用这个ID来作为样式的选择符,样式中必须在ID前加一个#
,而不是点号。
一个ID选择符样式只能在HTML文件内被引用一次 ,而类选择符样式则可以多次被引用。
若有些较特别的标记需要应用较为特殊的样式,则建议使用ID选择符。
虚类:虚类是一种特殊的类选择符,虚类的形式为:
选择符:虚类{ 属性值对 }
虚类主要针对超链接A标记来使用,可指定超链接标记A以不同的方式显示链接。
超链接有4种不同的样式状态:
a:link 链接访问前的样式
a:visited 链接访问后的样式
a:active 链接活动时的样式
a:hover 鼠标在链接上的样式
可将虚类和自定义类名组合起来使用,以实现页面中各个超链接按不同样式来呈现。
虚元素
有2个特殊的选择符first-letter和first-line,用于P、div、span等块级元素的首字母和首行效果 。格式为:
选择符:first-letter {属性值对}
选择符.类:first-letter {属性值对}
CSS的使用方式
4种方式
链入外部样式表:<link rel="stylesheet" type="text/css" href="mystyle.css">
导入外部样式表:<!-- @import "mystyle.css"; -->
联入样式表:利用<style>
标记将样式表联入HTML文件的头部
内联样式:是混合在HTML标记里使用的,用这种方法,可以很简单地对某个元素单独定义样式。<p style = "color: red; background-color: yellow">
多重样式表的叠加的优先级
依优先级最高的是内联样式,其次是联入样式表,然后是导入外部样式表。外链样式和联入样式中,最后定义的样式优先级最高。
内联样式会向标记中添加更多属性及内容,对于网页设计者来说很难维护,应尽量减少使用内联样式。
用CSS控制Web元素的显示外观
控制文字字体属性
1 2 3 4 5 6 7 8 9 .myfont1 { font-family : 宋体, Arial; font-size : 12px ; font-weight : bold; font-style : italic; text-transform : uppercase; color : #FF0000 ; }
文本属性
1 2 3 4 5 6 7 8 .myfont1 { letter-spacing : 2px ; text-align : left; text-decoration : underline line-through overline; text-indent : 20pt ; line-height : 22px ; }
控制颜色和背景属性
1 2 3 4 5 .mycolor { color : #FFFF00 ; background-color : #FF0000 ; }
边框属性
1 2 3 4 5 6 .myborder { border-style : double solid solid double; border-width : 5px 5px 2px 5px ; border-color : #0000FF ; }
列表属性: 设置列表标记(<ol>
和<ul>
)的显示样式
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 <html > <head > <title > </title > <style type ="text/css" > ol { list-style-type :upper-alpha; } ul { list-style-type :circle; } </style > </head > <body > 计算机的六个逻辑部件为: <br > <ol > <li > 输入部件 </li > <li > 输出部件 </li > <li > 存储器 </li > </ol > <ul > <li > 算术逻辑部件(ALU)</li > <li > 辅助存储器 </li > <li > 中央处理器(CPU)</li > <li > 辅助存储器 </li > </ul > </body > </html >
定位属性
static:默认值。位置设置为static的元素,它始终会处于文档流给予的位置。
relative:生成相对定位的元素,相对于该元素在文档中的初始位置进行定位 。
absolute:生成绝对定位的元素,相对于距该元素最近的已定位的父元素 进行定位。
fixed:元生成绝对定位的元素。默认情况下,可定位于相对于浏览器窗口 的指定坐标。
控制鼠标形状
hand:手型 <a href="#" style="cursor:hand">CSS鼠标手型效果</a>
pointer:手型,推荐使用这种,可以在多种浏览器下使用。
crosshair:十字型
help:问号
text:移动到文本上
wait:等待,沙漏型
default:默认效果
e-resize:向右的箭头
ne-resize:向右上的箭头
n-resize:向上的箭头
nw-resize:向左上的箭头
w-resize:向左的箭头
sw-resize:左下的箭头
s-resize:向下的箭头
se-resize:向右下的箭头
auto:由系统自动给出效果
滤镜
alpha
blur
dropshadow
glow
chroma
flipH 与 flipV
wave
shadow
mask
light
gray / invert / xray
4. DHTML 4.1 JavaScript编程技术 JavaScript语言简述
JavaScript嵌入在HTML文件中,能对鼠标点击、表单提交等用户事件做出反应和处理。
特点:
简单性
:JS是简化的编程语言,变量类型简单,不声明也能使用。
基于对象
:JS不完全面向对象 ,不支持类和继承,是基于对象而不是面向对象的语言
可移植性
:JS可在浏览器上不经修改直接运行。
动态性
:可用来设计客户端交互式动态页面。
安全性
:JS是一种安全性语言,对本地资源的访问和操作有限,只能通过浏览器实现信息浏览或动态交互。
JavaScript编程基础
将JavaScript程序嵌入HTML文件的方法:<script scr="clock.js type="text/javascript"
数据类型:
字符型
数值型:整数和浮点值没有差别
布尔型
常量
变量:
变量声明:var关键字来进行变量声明。
变量命名:JavaScript是一种区分大小写 的语言。
运算符和表达式
函数:当函数没有返回值时,可以不用return语句。
流程控制:if语句;for循环语句
事件驱动及事件处理
JavaScript对象编程技术
JS语言是基于对象的语言,并非面向对象的语言,JS中没有类,只有对象 ,它没有提供抽象、继承、封装等面向对象的基本属性。
我们不能像在传统的语言里那样用class来定义类, 但我们可利用JS的闭包封装机制 来实现JS中的类。
JavaScript的自定义对象
把函数function当成对象
用prototype对象来实现js的自定义对象
Array对象
可用Array对象创建数组。数组是若干元素的集合,每个数组都用一个名字作为标识。
JavaScript中没有提供明显的数组类型,可通过JavaScript内建对象Array和使用自定义对象的方式创建数组对象。
String对象
JS内置对象string只有一个属性,即length属性,包含了字符串中的字符数。
string 对象内置方法有30多种。例如anchor、link、substring、indexOf、replace、 fromCharCode等。
Math对象
Math对象提供了常用的数学常数和运算,如三角函数、对数函数、指数函数等。
Math中提供了6个属性。主要方法有绝对值abs()、正弦sin()、余弦cos()、反正弦asin()、反余弦acos()、正切tan()、反正切atan()、四舍五入round()、平方根sqrt() 等。
Date对象
JS内置对象Date可用来获取当前的年月日、时分秒以及星期几,它基于GMT 格林威治标准时间的,另外还有一个世界统一时间UTC,Universal Coordinated Time,正替代GMT的使用。
Number对象
JavaScript中的与定义函数:与任何对象无关的预定义函数,不需创建实例就可直接使用。
返回字符串表达式中的值。eval(字符串表达式),例:test=eval("8+9+5/2")
返回字符的编码。escape(string) //用 %xx 16进制形式编码
unescape(string) //将用escape编码过的字串复原
返回实数。parseFloat(floatstring) //字符数字变成实数
返回不同进制的数。parseInt(numbestring,radix) //radix是数的进制, numbestring字符串数。字符数字按进制变成整数
JavaScript ActiveX编程技术
HTML页面可使用ActiveX控件播放声音和flash,如何在JS中进行ActiveX控件的编程?
计算机装上各种软件后,一些ActiveX控件就会安装在计算机上,可以利用这些ActiveX控件来实现我们所要的功能。
例如FileSystemObject 控件对象提供对计算机文件系统的访问;Excel.Application和Word.Application提供对Excel和Word的控制和操作。
4.2 HTML DOM 程序设计初步 HTML 文档对象模型
HTML DOM 是一个可让脚本程序动态访问和更新HTML文档内容、结构和样式的技术。
它是跨平台 、可适应不同程序语言的文件对象模型,采用直观一致的方式,将HTML文档进行模型化处理,是一种提供存取和更新文档内容、结构和样式的编程接口。
使用DOM技术,不仅可访问和更新页面的内容及结构,而且还能操纵文档的风格样式 ,它将网页中的各个HTML元素看作一个个对象,从而使网页中的元素可以被JS等语言获取或者编辑。
DOM规范在不断发展中,各种浏览器对DOM的支持有所差异 。经常看到在某个浏览器下显示正常的页面在另一浏览器下显示不正常,为什么?是浏览器对DOM的支持有所不同。
对于专业的大型网站,开发人员会编码识别浏览器类型,针对浏览器的不同而进行相应代码的处理,保证网页在各种浏览器上正常显示。
通过DOM操纵HTML元素
通过DOM操控HTML元素,必须设置其唯一标识ID属性。一般不用HTML元素的name属性了。可以把HTML元素的ID属性看成是该控件的名称。
HTML DOM提供了同一访问HTML元素的6种方法:
document.all.item (“HTML元素的id”)
document.getElementById (“HTML元素的id”)
document.getElementByName (“HTML元素的name”)
document.all.namedItem (“HTML元素的id或name”)
document.getElementByTagName (“HTML元素的标记名称 “)
当HTML元素无ID或Name属性时,可用getElementsByTagName方法进行访问。
HTML DOM主要对象介绍 1. 窗口对象 window
组成
浏览器窗口对象Window处于DOM对象模型的最顶端,它封装了各种属性、方法、事件和子对象。
window对象的子对象包括位置对象location、历史对象history、事件对象event、文档对象document等。
使用
prompt、alert、confirm方法实现对话框功能,其中prompt为接受用户输入字符串的对话框;confirm实现具有确认和取消按钮的对话框;alert为仅输出文本对话框。
1 2 3 4 5 6 <script type ="text/javascript" > var test = window .prompy("请输入数据" ); var YorN = confirm("你输入的数据是" +test+",确定吗" ); if (YorN) alert("输入正确" ); else alert("输入不正确" ); </script >
2. 浏览器对象 navigator
window的子对象浏览器对象navigator可用于提供浏览器名称、版本、客户端支持的MIME类型属性等浏览器环境信息。
3. 位置对象 location
window子对象location提供对当前页面URL进行操作的一些方法和属性。
使用
通过href或url传递参数到另一个页面:
1 2 window.location.href="1.html?x=5;y=6;z=7"; window.navigate("1.html?x=5;y=6;z=7");
4. 历史对象 history
window子对象history历史对象提供了浏览器的浏览历史信息。用户在浏览器中通过点击超链接或其他方式跳转到新的页面,如果要后退看前面已经访问过的网页历史,可以在浏览器工具条单击“后退”。通过history对象可以在网页中进行控制。
5. 事件对象 event
window子对象事件对象event,用来获取或设置产生事件的对象是哪个对象、键盘按键的状态、当前鼠标指针的位置、鼠标按键的状态等等。
使用
event.x:设置或者是得到鼠标相对于目标事件的父元素的外边界在x坐标上的位置。
event.clientX:相对于客户区域的x坐标位置,不包括滚动条,放置正文区域。
event.offsetx:设置或得到鼠标相对于目标事件的父元素的内边界在x坐标上的位置。
event.screenX:相对于用户屏幕。
1 2 3 4 5 6 7 8 9 10 11 12 <html > <head > <title > </title > <script > function show ( ) { alert("event.x:" + event.x + "\nevent.y:" + event.y + "\nevent.clientX:" + event.clientX + "\nevent.clientY:" + event.clientY + "\nevent.offsetX:" + event.offsetX + "\nevent.offsetY:" + event.offsetY + "\nevent.screenX:" + event.screenX + "\nevent.screenY:" + event.screenY); } </script > </head > <body > <table border ="1" style ="position: relative; left: 100; top: 100" > <tr > <td > <div onclick ="show()" style ="background: silver; cursor: hand" > Click here to show. </div > </td > </tr > </table > </body > </html >
6. 文档对象 document
document对象是浏览器对象的核心子对象,主要作用就是对网页显示区域的各个HTML元素进行处理。document对象对实现Web页面信息交互起关键作用。HTML5: 属性+方法+事件 255个
文档对象的属性 cookie
cookie可用来存放当前页面的参数信息,也可用来存放同一网站打开的多个页面间的共享信息。
可以对cookie设置失效期限,既可永久保留,也可关闭网站后就删除,也可在指定时间内失效。
expires指定cookie的失效日期,当没有失效日期时,关闭浏览器即失效。
name=wcl;sex=male;color=red; expires=Sun May 27 22:04:25 UTC+0800 2008
文档对象的方法
有了Document对象的write方法,给我们带来了很大的方便。我们不需要事先将网页制作好,做一个死板的网页,而是可以通过脚本程序自动动态生成出来。
文档对象的事件
文档对象的事件除了响应键盘、鼠标常规操作事件外,还增加了其他大量事件,例如鼠标的拖拉操作事件、浏览器鼠标右键快捷菜单事件oncontextmenu等。
docment的对象
document有all、anchors、applets、childNodes、embeds、forms、frames、images、links、namespaces、scripts、styleSheets等集合对象。
HTML DOM树介绍
HTML DOM是一种结构化的对象模型,采用DOM技术访问和更新HTML页面内容时,可依据HTML源代码,建立页面的树型结构模型,然后按照树型结构的层次关系来操纵Web页面。
结构:
在DOM树型结构中,每个节点都是一个对象,各节点对象都有属性和方法。
DOM树型结构节点有只读属性 和读写属性 两类。通过只读属性可以浏览节点,并可获得节点的类型及名称等信息;通过读写属性可以访问文字节点的内容。
用DOM树方法可以动态创建html文档或html元素 ,并可通过JS程序随时改变文档的节点结构或内容,建立动态的网页生成效果。
4.3 如何用jQuery简化JavaScript开发 jQuery简介
把一些通用的函数事先写好,放在外部单独JS文件中,在手工编写网页代码时,就可重复使用这些通用函数,大大简化网页代码的编写工作,提高网页开发的效率。
jQuery是一个快捷、小巧和特性丰富的JavaScript库,凭借简洁语法和跨平台的兼容性,大大简化了JS开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax的操作。其独特而优雅的代码风格改变了JS程序员的设计思路和编写程序的方式。
jQuery主要功能:
获取文档中的元素。 jQuery为准确地获取需要检查或操作的文档元素,提供了可靠而富有效率的选择符机制。
修改页面外观。jQuery提供了跨浏览器的标准解决方案,即使在页面呈现以后,仍能改变文档中某个部分的类或者个别的样式属性。
改变文档的内容。 jQuery能够影响的范围并不局限于简单的外观变化,使用少量的代码,jQuery就能改变文档的内容。
响应用户的交互操作。 jQuery提供了形形色色的页面事件的适当方式,而不需要使用事件处理程序使HTML代码看起来杂乱。此外,它的事件处理API也消除了经常困扰Web开发人员的浏览器不一致性问题。
为页面添加动态效果。 为了实现某种交互行为,设计者必须向用户提供视觉上的反馈。jQuery内置的一批淡入、擦除之类的效果,以及制作新效果的工具包,为此提供了便利。
无需刷新页面从服务器获取信息。 这种编程模式就是众所周知的AJAX,它能帮助Web开发人员创建出反应敏感、功能丰富的网站。jQuery通过消除这一过程中的浏览器特定的复杂性,使开发人员得以专注于服务器的功能设计。
简化常用的JavaScript任务。 除了这些完全针对文档的特性之外,jQuery也提供了对基本的JavaScript结构(例如迭代和数组操作等)的增强。
jQuery选择器
元素选择器
采用元素名称如a、img、 input作为选择器。
1 2 $(“div”)表示选择所有div元素$(“img”)表示选择所有img $(“tr”)表示选择所有tr元素
ID选择器
用元素ID作为选择器。 $(“#button1”)将选择ID为button1的元素。
ID选择器有时也和元素选择器一起使用: $(“div #main”)选中ID为main的div元素。
类选择器
元素的class属性。类选择器的语法是以.开头,紧接着是CSS类名。 $(“.important”)将选择页面上所有应用了important类的元素。
后代选择器
若在一个选择器后面有一个空格,再跟另外一个选择器,则表示选择包含在第一个选择器中的第二个选择器。 $(”div p”)将选择div中出现的所有p元素。
子元素选择器
若一个选择器后面是一个大于号 > ,后面再跟另一个选择器,则表示选择直接包在第一个选择器中的第二个选择器。$(‘#ss > li’) 选择Id为SS元素中的所有li元素。
jQuery中关于DOM的操作
jQuery事件 4.4 DHTML综合编程实例 广告条定时滚动 通过URL传递参数 超文本编辑器及其与Word的互操作 表格的美化 5. XML 5.1 什么是XML? XML Extensible Markup Language 可扩展标记语言
XML是一种类似于HTML的标记语言
XML是用来描述数据
XML的标记非预先定义,须自行定义标记
XML的特点
XML的可扩展性 :
XML中,可建立任何需要的标记。可充分发挥想象力给文档起一些好记的标记名称。
标记的自描述性 :
标记(tag)又叫标识,也称元素名,用于描述数据,标识文档中的元素。通过标记,XML文档才便于阅读和理解。
XML语言的规则性 :
标记区分大小写,须配对且合理嵌套;属性须用引号括起来;名字不能以下划线开头,不能有空格,可有字母、数字及下划线;不能用XML等保留字。
文档的结构化 :
所有的信息按某种关系排列。
**允许Meta数据(元数据)**:
可用XML描述你的信息在哪里,可通过meta来验证信息、执行搜索、强制显示或者处理其它的数据。
XML文档的多样显示 :
可通过CSS或者XSL可扩展样式语言(Extensible Stylesheet Language)在浏览器中呈现XML文档内容。
允许XML DOM操作 :
XML DOM的作用就是使用脚本语言如何对XML文档的节点和数据进行增删查改等各项操作。
XML中有关名词的相互关系
XML DTD用以说明XML文档中数据的类型和格式,既可放在单独文件中,又可直接放在XML文档中。
由于XML DTD本身非XML文档结构,其对XML文档数据类型和格式的描述过于复杂,用户在使用时较难掌握,目前已被XML Schema所替代。
XML Schema中对XML文档中数据类型和格式的描述采用了XML文档结构,可以定义复杂数据类型。CSS和XSL用来实现XML文档在浏览器中的显示。
XML文档结构
XML文档声明
version:XML文档所遵循的XML规范的版本号;
可选项encoding:XML处理器使用的字符集,默认为UFT-8;
可选参数standalone:yes或no,默认值为yes,申明该文档为一个独立文档,无需DTD文档来验证其中的标识是否有效。<?xml version="1.0" encoding="GB-2312 standalone="yes"?>
文档显示方式或者文档类型定义的声明部分
XML标识的文档内容
XML文档内容的结构
声明根元素:
每一个有效的XML文档有且仅有一个根元素。
<rootElementName>...</rootElementName>
声明非根元素
数据元素属性
一个数据元素可以有若干属性,属性必须在一个元素的起始标记中声明
定义名称空间
在XML中,用户可以自己定义标记名称也即元素名称, 因此,如果把多个XML文件合并为一个,就很可能出现名称冲突。
解决这一问题的方法就是使用名称空间。
包含非标准文本
在具体应用中,XML文档往往包含一些特殊符号和文本块,而这些特殊符号不需要应用程序或格式转换程序做任何处理,只需照原样输出时,称之为非标准文本,又称非解析数据(Character DATA)。
XML文档的基本结构中用CDATA来表示。CDATA节的一般形式为:<![CDATA[text]]>
5.2 用CSS控制XML文档在浏览器中的显示 XML文档的4中css样式定义方式
元素名称选择符
用户自定义类选择符
用户定义的ID选择符
成组选择符
CSS样式和XML文档的联系方式
将定义的CSS样式表置于XML文档中
将CSS样式表放在单独的扩展名为css的文件中,然后在XML文档声明部分引用css文件
将上述两种方式结合起来
5.3 用XSL控制XML文档在浏览器中的显示 XSL概述
XSL(eXtensible Stylesheet Languge, 可扩展样式单语言)是由W3C 1999年11月制定的。XSL自提出以来争议颇多,前后经过了几番大的修改。
2007年1月 W3C 发布了修改后的XSLT 2.0 版本(http://www.w3.org/TR/xslt20/)。 2013年12月 发布 XSLT 3.0,它仍然在进一步修改完善中。
XSLT能将XML文档转换 成一个新的文档(包括HTML文档),通过浏览器或其它应用程序就可以显示出来。
XSL的组成
XSLT : XSL Transformation,用于转换 XML 文档的语言。
Xpath: 用于在XML文档中选择元素的语言。
格式化符号集XSL-FO -:定义应用XML数据的复杂的格式化规则。用于格式化 XML 文档的语言。
XSL与CSS的异同
XSL与CSS在功能上类似,但XSL比CSS功能强大、复杂度高。
CSS只允许格式化XML元素内容,不允许改变或安排这些内容。但XSL没有这些限制,可提取元素、属性值、注释文本等各种文档内容。在XML领域,用XSL来格式化文档是未来发展的方向。
CSS样式描述格式不遵从XML的语法规范。而XSL遵守XML语法规则,是XML的一种具体应用,也即XSL本身就是一个XML文档,系统可使用同一个XML解释器对XML文档及其相关的XSL文档进行解释处理。
XSL模板元素
在XSL中,数据的显示格式被设计细化成一个个模板,最后再将这些模板组合成一个完整的XSL。
这种方法可以使用户先从整体上考虑整个XSL的设计,然后将一些表现形式细化成不同的模板,再具体设计若干模板,最后将它们整合在一起。
由于XML的数据保存在具有严格层次结构的各个元素中,这种结构非常适合采用模板化的格式样式。
模板定义好后,可通过call-template或apply-templates来调用模板,其过程就如同我们在C语言中定义了一个函数,就可在程序中需要的地方进行函数调用。
定义模板的语法结构:<xsl: template match="node-context" name="template name">...</xsl: template>
match确定什么样的情况下执行此模板,其中最上层的模板必须将match设为”/”。在一个XSL文档中必须有一个根模板,而且是唯一的。
<xsl:template>
元素用match属性从XML文档中选取满足条件的节点,针对这些特定的节点形成一个特定输出形式的模板。
name属性即是为定义的模板取一个用户自定义的名称。只能通过<xsl:call-template>
元素来调用模板。
XSL选择元素
用选择的方式将满足条件的数据从XML文档中提取出来
XSL常用运算符
<xsl:for-each select="*/resume">
此处用通配符*代替了document元素名称。对每个resume 循环处理
<xsl:for-each select="//resume [@id='008']">
对简历中具有Id属性编号为“0008”的人进行处理
<xsl:for-each select="*/resume [cellphone]">
对简历中具有“cellph手机one”元素的人进行处理,也即对简历中提供了号码的人进行处理。
<xsl:for-each select="*/resume [cellphone]">
对简历中具有“cellphone”元素的人进行处理,也即对简历中提供了手机号码的人进行处理。
<xsl:for-each select="*/resume [skill='Web开发']">
对简历中具有”Web开发”技能的所有人进行处理
XSL常用内置函数
XSL常用处理元素语法
5.4 XML DOM编程基础 XML DOM简介
对于XML文档,可利用CSS的样式或XSLT格式转换后利用浏览器解析和浏览它,如何对XML文档进行数据的添加、删除、修改、查询等操作,就需要使用XML DOM技术了。
XML DOM实际上就是访问XML文档的标准应用程序接口。
XML DOM是W3C提出的针对XML的文档对象模型,是一个与语言无关、与平台无关的标准接口规范,定义了一套标准的用于XML的对象和一种标准的访问与处理XML文档的方法。
对于XML应用开发来说,DOM 就是一个对象化的XML数据接口,它定义了XML文档的逻辑结构,可动态创建XML文档;遍历文档结构;添加、修改、删除文档内容;改变文档的显示方式等。无论是在浏览器里还是在浏览器外,无论是在服务器还是在客户端,只要有用到XML的地方,都可利用DOM接口进行编程应用。
DOM将XML文档作为树结构来看待。 XML文档中的每个成分都是一个节点。例如整个文档是一个文档根节点;每个XML标记是一个元素节点;包含在XML元素中的文本是文本节点;每一个XML属性是一个属性节点;注释属于注释节点。
XML DOM与 SAX
访问XML文档的标准应用程序接口有两种:DOM(Document Object Model)和SAX(Simple API for XML)。
DOM接口中的XML分析器,在对XML文档进行分析之后,不管这个文档有多简单或者多复杂,其中的信息都会被转化成一棵对象节点树——DOM 树 。在这棵节点树中,有一个Document根节点,所有其他的节点都是根节点的后代节点。节点树生成之后,就可通过XML DOM接口访问、修改、添加、删除树中的节点和属性以及文本内容等。应用程序可在任何时候访问XML文档中的任何一部分数据,也即可随机访问。
与XML DOM不同,SAX提供的访问模式是一种顺序模式,这是一种快速读写XML数据的方式。当使用SAX分析器对XML文档进行分析时,会触发一系列事件,并激活相应的事件处理函数,应用程序通过编写的事件处理函数实现对XML文档的访问,因而SAX接口也被称作事件驱动接口。
由于DOM分析器把整个XML文档转化成DOM树放在了内存中,当XML文档很大或结构比较复杂时,对内存的需求就比较高。SAX分析器在对XML文档进行分析时,触发了一系列的事件,由于事件触发本身是有时序性的,SAX提供的是一种顺序访问机制,对于分析过的部分,不能再倒回去重新处理,因此SAX分析器缺乏灵活性但实现简单,对内存要求比较低。
XML DOM对象
Document对象
Document对象代表了整个XML文档,因此,它是整棵DOM树的根,提供了对文档中的数据进行访问和操作的入口。
通过Document节点,可以访问到文档中的其它节点,如处理指令、注释、文档类型以及XML文档的根元素节点等等。
Node对象: Node对象代表了树中的一个节点。子对象有Document、Element、Attribute、Text、Comment等。
Element对象
:表示一个XML文档中的某个元素。元素可包含属性和文本。某个元素含有文本,则此文本就是一个文本节点。文本永远被存储于文本节点中。<year>2005</year>
其中year为一个元素节点,此节点之下存在一个文本节点,其中含有文本2005。由于元素对象也是一种Node,因此它继承了Node对象的属性和方法。
Attr对象
:表示某个Element对象的一个属性。Attr对象也是一种节点,因此它可继承Node对象的属性和方法。不过属性无法拥有父节点,同时属性也不被认为是元素的子节点。
Text对象
:Text对象表示元素或属性的文本内容。
Node List对象
NodeList对象表示节点的集合,它包含了某个节点中的所有子节点对象,可用于表示有顺序关系的一组节点(例如某个节点的子节点序列)。
可用GetNodeByName方法返回节点的值。可通过节点列表中的节点索引号来访问列表中的节点(索引号由0开始)。若节点列表或XML文档中的某个元素被删除或添加,列表会被自动更新。
NodeList对象的属性length可返回某个节点列表中的节点数目,方法item可返回节点列表中处于某个指定的索引号的节点。
NamedNodeMap对象
NamedNodeMap对象也表示节点的集合,利用该对象可建立节点名和节点之间的一一映射关系,从而利用节点名可以直接访问特定的节点。
NamedNodeMap通过名称来描述节点 ,而不是通过序数索引。
5.5 XML与数据库 XML与数据库的关系
XML不是数据库,数据库系统有它自己的一套管理模式,而XML仅仅是用来存放数据的文件,一个XML文档相当于数据库中的一个表 。因此XML不可能取代数据库,但将数据库和XML结合起来,能够完成很多以前无法完成的工作,例如异构数据交换、应用系统集成等。
数据若放在数据库中共享,则受到数据库连接请求失败、防火墙隔离等各种限制。
XML是文本文件,可以穿透任何防火墙进行传输,已成为互联网上的事实数据交换标准。
随着XML的广泛应用,各数据库产品都被重新设计,使之能很好支持XML, 如Oracle、SQL Server、DB2、Sybase、MySQL等。另外还出现了支持native(原生) XML文档进行存储管理的专属XML数据库系统,如X-Hive、XML Repository、eXcelon、BaseX、 Sedna、 XMLDB等,提供对标签和路径的操作,文档存储和检索迅捷,可提供高质量的全文搜索。
开发一个访问数据库的XML应用系统需要同时借助XML编程接口和数据库编程接口 ,前者用于对XML文档的解析、定位和查询,所需技术包括DOM和SAX;后者则是用于访问数据库,如数据库中数据的更新和检索等等,需要利用的技术有ODBC、JDBC、ADO/ADO.NET等。
XML文档可通过ADO.NET等各种数据接口方式 存放到数据库中,也可将数据表中的数据形成一个XML文档通过XSL来呈现。
SQL Server 对XML的支持
使用SELECT语句中的FOR XML子句得到XML文档格式的数据:select * from Northwind.dbo.customers for xml auto
简单的HTTP URL请求http://localhost/web?sql=select * from Northwind.dbo.customers for xml auto
OPENXML函数可以让你像操作一个表那样来运用XML数据,可以将它们转换成内存中的一个行记录集。需调用sp_xml_ preparedocument
存储过程完成。
通过SQLXML功能(包含有updategram
和XML BulkLoad
功能)
SQL SERVER支持基于XPath 表达式的XQuery语言,该语言被设计用来查询 XML 数据,作用类似 SQL语言对数据库的查询。SQL Server引入了 xml 数据类型,提供了用于对存储在列或变量中的 XML 数据执行操作的大量方法。
SQL Server支持在insert表达式中的 xml 变量向现有 XML 结构插入 XML 数据的支持。
关于JSON
在XML中,需要许多开始标记和结束标记来标识数据,在互联网网上传输数据时效率不高,出现了JSON(JavaScript Object Notation) 轻量级的数据交换格式,易于阅读和编写,同时也易于机器解析和生成, 作为XML文档的一种有力补充。
6. NET Web应用程序开发 6.1 C#语言初步 ASP.NET的体系结构
ASP.NET是微软.NET Framework的一部分,是开发Web应用程序的全新编程模式,可使Web开发人员更快捷和方便地开发Web应用程序。
图为ASP.NET的体系结构。ASP.NET页面通过ISAPI与IIS通信,有一个用作页面的缓存cache,以提高性能。
ASP.NET中采用强类型语言VB.NET、C#等,采用完全面向对象方式编程。C#是由C和C++发展而来的面向对象和类型安全的编程语言。C#读作C Sharp,它和Java非常相近。
C#程序的基本结构 1 2 3 4 5 6 using System //名称空间 class Hello{ static void Main(){ Console.WriteLine("Hello, World"); } }
using System使用了由Microsoft.NET类库中提供的System名称空间,用来组织类库的分层。分层的类库之间用操作符“.”表示上下级分层关系。
使用“using”后,就可无障碍地使用名称空间中的各种类型成员,名称空间提供了一种用来组织一个类库的分层方法。
名称空间除具有避免名称冲突之功能外,更重要的是在引用名称空间后,就可在程序代码中方便地使用系统提供的各种类库成员。
C#中的数据类型
数据类型
简单类型
枚举类型
结构类型
引用类型:对于引用类型,两个变量可引用相同的对象,因而可能出现对一个变量的操作影响到其他变量所引用对象的情况
类类型
接口类型
代表类型
数组类型
C#变量声明及其初始化
C#语言是一种强类型的语言,在使用变量前必须对该变量的类型进行声明,建议在声明变量时就对变量进行初始化。
变量名必须以英文字母或@开头,由字母、数字、下划线组成,不能有空格、标点、运算符号、C#中关键字名、C#中库函数名,且大小写敏感。
C#枚举类型
C#中定义常量用const修饰符,例如“public const double y=1.234;”。枚举类型是由一组特定常量构成的一种数据结构,是值类型的特殊形式。
当需要一个有指定常量集合组成的数据类型时,可使用枚举类型。
枚举类型不能实现接口、不能定义方法、属性、事件。
C#表达式
算数表达式
用算术操作符把数值连接在一起的、符合C#语法的表达式称为算术表达式。
算术操作符:+、–、*、/、%、++、– –
二进制操作符:&(与)、|(或)、^(异或)、~(补)、<<(左移)、>>(右移)
赋值表达式
赋值操作符用于为变量、属性、事件或索引器元素赋予新值。
赋值操作符的运算对象、运算法则及运算结果如下:
关系表达式
= =、!=、<、>、<=和>=等操作符称为关系操作符。用关系操作符把运算对象连接起来并符合C#语法的式子称为关系表达式。关系表达式要么返回true要么返回false。C#中还定义了is操作符,其格式为:A(值) is B(类型),意义是如果A是B类型或者A可以转化为B类型则返回true,否则为false。
逻辑表达式
(&&(and)、||(or)和!(not)操作符称为逻辑操作符。用逻辑操作符把运算对象连接起来并符合C#语法的式子称为逻辑表达式。
C#控制语句
分支语句3种:
三元运算符,例如:a=(b>5)?100:10表示b>5时a=100,否则a=10;
if语句(一次仅测试一个条件);
switch语句(一次将测试变量与多个值比较)。
循环语句4种:
可用break和continue语句
跳出循环或继续执行循环。
foreach语句可以遍历一个集合中的所有元素。
try-catch-finally语句用来捕捉异常,使用语法与JavaScript语言 中的相似。在Web开发中应尽量少用捕捉异常来实现某些功能。
C#类声明
类声明就是定义新的引用类型。类是一种将数据成员、函数成员和嵌套类型等进行封装的数据结构,一个类可从其他类继承。其数据成员可以是常量或域,函数成员可以是方法、属性、索引、事件、操作符或静态构造函数和析构函数。构造函数在创建对象时被自动调用,用来执行对象的初始化操作,其函数名总是与类名相同。析构函数在释放对象时被调用,用来删除对象前做一些清理工作。
类中的每个成员都必须定义其被访问的范围,用类的访问修饰符来表示访问这个成员的程序文本的区域。类的访问修饰符有五种形式:
6.2 ASP.NET常用控件的使用介绍 ASP.NET控件
客户端控件:Web服务器对客户端控件不做任何处理,交由客户端浏览器来处理。
服务器端控件:需要占用Web服务器的内存、CPU等系统资源等来处理服务端控件,最终转变成客户端控件,再交由客户端浏览器来处理。
为提供网页访问速度,页面中尽量使用客户端控件 。
服务器端标准控件
服务器端控件的常见属性
当某控件的EnableViewState属性为true时,表示该控件的值在页面刷新或回传重新显示页面后不会丢失,但却耗费网络资源和服务器资源。因此当页面回传后无须保值处理时应设为false
Label和Literal控件
Label用来放置文本串,通过Text属性设置和显示文本。Text中可以包含其他HTML标记。<asp:Label ID="Lable1" runat="server" Text="Lable"></asp:Lable>
Literal和Label类似,text文本中不能添加任何HTML标记。<asp:Literal ID="Literall" runat="server"></asp:Literal
TextBox文本框控件
该控件用于获取用户输入的文本或显示文本。<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
Image控件
该控件是用来插入图片。<asp:Image ID="Image1" runat="server">
Button、LinkButton、ImageButton控件
分别表示普通按钮、超链接形式的按钮和图像按钮。允许用户通过单击来执行操作。每当用户单击按钮时,即调用Click事件处理程序。
1 2 3 4 <asp:Button ID="Button1" runat="server" Text="Button" /> <asp:LinkButton ID="LinkButton1" runat="server">LinkButton</asp:LinkButton> <asp:ImageButton ID="ImageButton1" runat="server" />
HyperLink控件
用于制作文本或图片超级链接。<asap:hyperlink runat="server">HyperLink</asp:hyperlink>
RadioButton和RadioButtonList单选按钮
为用户提供由两个或多个互斥选项组成的选项集。
当用户选择某单选按钮时,同一组中的其他单选按钮不能同时被选定。
当单击RadioButton按钮时,其Checked属性设置为true,并且调用Click事件处理程序。
当Checked属性的值更改时,将引发Checked- Changed事件。用户可以通过用Text属性设置控件内显示的文本。<asp:hyperlink runat="server">HyperLink</asp:hyperlink>
CheckBox、CheckBoxlist复选框
该控件通常是成组使用,完成多重选项的目的。
这个控件与RadionButton控件相比,它们的相似之处在于都是用于指示用户所选的选项,不同之处在于,单选框一次只能选一个按钮,而复选框则可以选择任意数量。
1 2 3 <asp:checkbox runat="server"></asp:checkbox> <asp:checkboxlist runat="server"></asp:checkboxlist>
DropDownList控件
使用户可以从下拉列表框中进行选择。其选择项列表在用户单击下拉按钮前一直保持隐藏状态,同时它不支持多重选择。<asp:dropdownlist runat="server"></asp:dropdownlist>
ListBox列表框
列表框通过显示多个选项供用户选择达到与用户对话的目的,如果候选项较多的时候它还可以自动地加上滚动条。
可通过设置列表框的Items属性来添加列表框的内容。在属性菜单中找到Items选项,鼠标单击右边的按钮,会弹出的ListItem集合编辑器,就可方便添加列表框中的每一项。<asp:listbox runat="server"></asp:listbox>
FileUpload文件上载控件
该控件可实现让用户在客户端选择一个文件,然后放到Web服务器的某个指定的文件夹下。<asp:fileupload runat="server"></asp:fileupload>
Panel和Placeholder控件
Panel和Placeholder控件都属于容器控件。容器控件是指该控件可以动态容纳其他控件或HTML元素。利用容器控件即可实现运行时刻动态添加内容到Web页中。
Panel和Placeholder控件(占位控件)转换成客户端HTML代码后,呈现为div元素。
Placeholder控件可将空的容器控件放置到页内,然后在运行时动态添加、删除子元素等。该控件只呈现其子元素,不呈现容器外观。
Panel控件在设计页面时就可添加其他控件,而且在运行过程中也允许动态添加控件。
1 2 3 <asp:panel runat="server"></asp:panel> <asp:placeholder runat="server"></asp:placeholder>
服务器端验证控件
当用户输入不合法或输入错误时,验证控件可以显示错误信息。验证控件在正常工作情况下是不可见的,只有当用户输入数据有误时,它们才是可见的。
数据访问空间
数据源控件:实现对不同数据源的数据访问,主要包括连接数据源,使用SQL语句获取数据。
数据绑定控件:将数据源控件与数据绑定控件结合起来,以多种方式将数据显示在页面上。
服务端控件使用注意事项
使用控件进行Web开发的初学者很容易产生对服务器控件的依赖,几乎所有页面都采用服务器控件,HTML控件(客户端控件)被束之高阁,当然这是一种简便的编程方法,但却是一种不考虑运行效率的做法。
服务器控件意味着要消耗更多的网络带宽和服务器资源,而客户端控件的处理逻辑全部在浏览器中进行。因此不能养成使用服务器控件的习惯性思维,在使用控件的时候有必要思考一下采用客户端控件的可能性。
6.3 ASP.NET内置服务器对象 常用内置服务器对象
Page:指代Web窗体,设置或执行与Web窗体有关的属性、方法和事件
Response(Page的子对象):决定服务器在什么时候或如何输出数据到客户端
Request(Page的子对象):用来捕获由客户端返回到服务器的数据
Server(Page的子对象):获取Web服务器对象的各项参数
Application(Page的子对象):处理由不同客户端共享的变量
Session(Page的子对象):处理由各个客户端专用的共享变量
Cookies:为Web应用程序保存访问者的信息
6.4 Web.config与Global.asax Web.config 配置文件的使用
在VS中创建ASP.NET应用程序时会自动生成一个基于XML格式的web.config纯文本文件,可用来放置系统的相关配置信息。
Web.config可存在于应用程序的各个目录下,它决定了站点所在目录及其子目录的配置信息,并且子目录下的配置信息覆盖其父目录的配置。一般对~/web.config配置即可Global.asax文件的使用
可对Global.asax文件的相关事件进行编程,实现网站访客数量统计 等。
6.5 ADO.NET数据库访问技术 关于ADO.NET
ADO.NET是.NET平台下的数据库访问技术,提供了断开式的数据访问模型;提供了与XML的紧密集成;提供了与.NET框架的无缝连接。
ADO.NET中有两个核心组成部分:数据提供程序Data Provider、数据集DataSet
DataSet是ADO.NET的断开式结构的核心组件,实现独立于任何数据源的数据访问,可用于多种不同的数据源,包括XML数据。它包含一个或多个DataTable对象的集合,这些对象由数据行和数据列以及主键、外键、约束和有关DataTable对象中数据关系组成。
Data Provider包括4个核心对象
Connection:建立与特定数据源的连接
Command:对数据源执行数据库命令,用于返回和修改数据、运行存储过程等。
DataReader:从数据源中获取高性能的数据流,例如只进且只读数据流。
DataAdapter:用数据源填充DataSet,并可处理数据的更新。
ASP.NET数据库应用操作步骤:
ADO.NET中连接数据库访问常用三种方式:
ODBC:可连接各种数据库
OLEDB:可连接各种数据库
SQLClient:SQL Server数据库专用连接方式
Connection对象
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 using System.Data; using System.Data.OleDb; //新建一个Connection对象 OleDbConnection conn = new OleDbConnection(); conn.ConnectionString //设置数据库连接的字符串 conn.ConnectionTimeout //设置数据库连接超时,超过时间连不上数据库则停止连接 conn.DataSource//获取数据源服务器名或文件名 conn.State //获取当前数据库连接的状态 conn.Open //进行数据库连接 conn.Close //断开数据库连接 conn.Database //返回数据库名称或设置要连接的数据库 conn.ChangeDatabase//更改当前数据库 conn.BeginTransaction //开始数据库事务处理
Command对象
创建Command对象有四种方法,分别是(P337):
无参数
使用一个参数
使用两个参数
使用Connection对象的CreateCommand方法
DataReader对象
DataReader对象用来从数据表中检索只读、只进的数据流,占用内存少、访问数据快,不能用它修改数据表记录。–数据库游标操作
DataAdapter与Dataset 对象
DataSet通过DataAdapter填充数据后,可断开数据库的连接来操作其中的数据,而不影响数据库中的实际数据,直到你通过DataAdapter把数据更新到数据库。
Dataset对象可独立于各种数据源,无论什么类型数据源(数据库、XML文件
DataSet对象包含DataTable集合对象。通过DataTable又可生成数据视图DataView。
DataTable不仅是数据行(DataRow)和列(DataColumn)的集合,它包含了表的关系、主键及其约束等信息。
关系
Connection对象:只负责数据库连接而不关心结果集的表示。
Dataset对象:只关心访问操作数据,而不关心数据信息关联哪个Connection对象。
DataAdapter对象:作为Connection和DataSet对象之间的桥梁。
将执行SQL语句后获得的结果集填充到DataSet对象中;将DataSet里增加、修改、更新后的数据返回到数据库中。
执行存储过程
使用Command对象和DataAdapter对象实现不带参数存储过程调用
使用Command对象实现带参数存储过程调用
使用DataAdapter对象实现带参数存储过程调用
执行数据库事务
数据库事务处理是把一组数据库操作合并为一个逻辑上的工作单元。要么在事务处理中的所有操作都得到执行,要么没有任何操作得到执行。
数据绑定技术
数据绑定技术最通常的应用是把Web控件中用于显示的属性跟数据源绑到一起,从而在Web页面上显示数据。此外也可以使用数据绑定技术设置Web控件的其他属性。
6.6 用Visual Studio创建和访问Web服务
Saas是指软件部署在互联网上,你可免费或购买直接使用,例如我们使用的Gmail Web邮箱、阿里云邮箱、百度云管家就属于Saas的一种。
另一种Saas的应用就是网上提供的Web服务。Web服务实际上也是一个应用程序,它向外界提供了一个可以通过Web进行调用的API,也就是说可以用编程的方法调用这个程序。
Web服务是一套标准,它定义了应用程序如何在Web上实现互相操作。 可用任何语言在任何平台上编写Web服务,只要通过Web服务标准对这些服务进行查询和访问就行了(.Net上开发的Web服务,Java平台也可用)。要实现这样的目标,Web服务使用了XML技术和SOAP协议。
XML是在Web上传送结构化数据的有效方式 ,Web服务要以一种可靠的自动的方式操作数据,XML可以使Web服务方便地处理数据,十分理想地实现数据与表示的分离。
SOAP协议(Simple Object Access Protocol)是服务需求者向Web服务发送请求并接收应答的协议。SOAP的数据编码方式是基于XML的 。
Web服务的应用
实现跨防火墙的应用
能突破客户端和Web服务器之间的各种防火墙进行通信,采用传统的分布组件技术如DCOM可能会通信失败。
应用程序集成
可通过创建Web Services解决数据的互联互通。B2B大都采用这种方式。
软件和数据重用
软件重用最基本的形式是源代码、函数、模块或者类一级的重用,另外就是控件和组件的重用、框架的重用。Web Services不仅可重用代码,还可重用代码背后的数据,例如天气预报数据。
6.7 Web开发中类库的构建与访问
在Web开发过程中,可将许多通用的完成一定功能的方法或结构等独立出来,放在类库中,编译后形成一个动态链接库DLL文件,在Web应用程序中通过添加引用后,就可实现代码的重用。
7. AJAX技术 7.1 Ajax概述及开发案例 Ajxa概述
Ajax(Asynchronous Javascript and XML)是Jesse James Garrett于2005年提出的一种技术。
该技术的目标是让用户动态地与页面进行交互,加快服务器的响应速度,减少用户的等待时间,是一种创建交互式Web应用程序的开发技术。其技术的最简单描述就是实现局部刷新。(异步执行 )
Ajax的局部刷新:
通过异步数据交换和处理 ,显著提高Web应用程序运行效率。 Ajax不是新技术,是各个已有核心技术的创新应用。
Ajax的核心是支持异步请求的XmlHttpRequest对象,使开发者可使用JavaScript向服务器提出异步请求并处理响应。
实现Ajax技术的应用开发主要有:
直接基于XMLHttpRequest对象
利用各种Ajax框架,简化Ajax开发
XmlHttpRequest对象的属性和方法
基于Ajax的Web窗体
ASP.NET Ajax扩展中,Timer定时器用于定时异步刷新页面,例如定期刷新股票价格或天气情况。 UpdateProgress 控件提供一条等待信息让用户知道页面还在工作,最后的请求还在继续处理中,可用来显示“正在处理中,请稍后!”
一个页面可包括多个UpdatePanel控件。Ajax技术可用来生成功能丰富、以客户端为中心的Web应用程序,使用户获得更好的用户体验(user experience)。
传统网站开始转型为单页Web应用(single page web application,SPA),如Gmail、Evernote等,可使用户无需网站地图、免除跳转网页的烦恼,使用户获得流畅的使用体验,这是Web应用程序的开发的一个方向,Ajax扮演重要角色。
8. Web开发环境的建立 8.1 关于Web站点规划 Web站点规划所包含的内容
在Web站点建设前对市场进行分析
市场有什么特点?
是否适合在互联网上开展此业务?
市场竞争对手情况如何?
市场优势在哪儿?
有什么市场竞争力?
确定Web站点的目的和功能
要明确Web站点的建设目的是什么?
Web站点的功能有哪些?
根据Web站点规模确定Web站点建设的技术
用什么开发平台?
用什么开发技术?
安全性有什么要求?
确定Web站点建设的人力和投入费用
需要投入的人力和成本情况如何?
将来收益情况如何?
确定Web站点的测试方法和维护过程
Web站点建好后,要进行哪些测试?
如何测试?
站点维护有什么要求?
确定Web站点的推广策略
规划Web站点的推广策略?
广告推广、邮件推广、百度推广、论坛推广?
Web站点的目录结构
站点目录结构会对站点维护、站点扩充和站点移植带来影响, Web站点目录结构的建立可遵循以下建议:
不要将网站内容全部放在一个目录中 ,按菜单栏目内容建立子目录。将网站内容全部放在一个目录中会造成文件管理混乱 不易于文件查找和维护 。
目录的层次不要太深 ,不超过3层,尽量用英文命名目录和文件名 。目录路径过深,跳转的URL地址就会变长,增加了页面的链接复杂性。而使用中文命名会可能对网址的正确显示造成困难,尽量使用英文意义明确的目录名和文件名,便于维护和管理。
设计Web站点的一般性原则
以客户为中心进行Web站点设计
建设Web站点的目的是什么?
为谁提供服务和产品?
企业能提供什么样的产品和服务?
Web站点的目标消费者和受众的特点是什么?
企业产品和服务适合什么样的表现方式或风格?
总体设计方案主题鲜明
对Web站点的整体风格和特色做出定位,对Web站点的组织结构进行规划。
好的Web站点应主题鲜明、要点明确,要充分展现Web站点的个性和情趣,体现Web站点的特色。
网页形式与内容统一
运用对比与调和、对称与平衡、节奏与韵律以及留白等手。
利用空间、文字、图形之间的相互关系来达到整体的均衡以及和谐的美感。
Web站点的结构
应遵循结构清晰、导向清楚、使用方便的原则。
使用一些醒目的标题或文字来突出产品与服务,在导航设计中使用超文本链接或图片链接,且页面之间的链接关系要一目了然。
访问速度
通过网页减肥、Ajax技术等来加快访问速度,避免使用过多的图片及尺寸过大的图片
充分利用多媒体技术
为了吸引浏览者的注意力,页面内容可采用动画、Flash等形式来表现。
Web站点信息的动态发布
站点信息的不断更新,会让浏览者了解企业的最新发展动态和网上服务等,同时也会帮助企业建立良好的形象。
应在后台建立信息的动态发布机制及时更新企业站点内容。
提供和用户相互沟通的渠道
应建立和用户的沟通渠道,例如建立留言板和在线E-mail系统、短消息等
8.2 建设Web站点的一般步骤
Web站点的准备
进行可行性分析,规划出Web站点的大致结构。
考虑采用哪一种操作系统、Web服务器、邮件服务器、数据库服务器。进行数据库的初步规划,考虑开发和维护Web站点的费用预算。
域名注册
域名注册实际上就是申请Web站点的一个名称,以方便人们访问Web站点。
域名具有唯一性,是“企业的网上商标”。域名中.cn表示中国,.hk表示香港;.edu表示教育机构;.gov表示政府部门;.net表示网络服务部门;.ac表示科研机构。
Web站点的需求分析和总体设计
需求分析是网站设计的重要环节。在需求分析的基础上进行总体设计和数据库设计。
在此过程中确定站点建设所需要的软件和硬件配置、连接因特网的方式、运行和维护费用等。
确定Web站点的组织与风格
在上述工作基础上,确定Web站点的主页版面,色彩搭配等,勾画出整个Web站点系统的所有全貌,包括每个页面的版式布局、链接关系、注意事项等。
一个网页应包含Web站点名称、Web站点logo、网页标题、网页内容、指向主页的链接、指向其他网页的链接、版权陈述、Web站点的E-mail地址和其他联系方法等基本要素。
Web站点开发和运行环境的确定
Web站点运行在什么操作系统上?
采用什么数据库?采用什么样的Web服务器?采用什么开发平台和开发工具?
Web站点的开发和测试
Web站点的开发涉及到项目负责人、设计人员、程序员、网页制作人员和美工等,要实现协同开发。各个网页整合成网站后,要进行功能测试、性能测试、安全测试、稳定测试、浏览器兼容性测试、链接测试、压力测试等。
将Web站点接入Internet,并做好网站推广
可选择虚拟服务器/主机、服务器租用或托管、铺设专线来接通Internet。
通过各种有效的手段提高Web站点知名度,提升Web站点访问量。
Web站点的运行安全和维护管理
Web站点安全性包括身份窃取、非授权存取、否认、拒绝服务等。及时修复站点服务器操作系统漏洞,精心配置Web服务器、数据库服务器的各项参数。
Web站点维护包括服务器的维护、站点程序的维护、内容的更新和信息的发布等。
8.3 Web站点性能优化及安全性 Web站点性能优化
优化Web服务器硬、软件配置 :
为Web服务器增加缓冲代理机制和使用高性能服务器能明显改进Web站点访问速度,包括快速的磁盘、高性能网卡,强劲的CPU、大容量内存等;可通过对数据库服务器和Web服务器的配置在缓冲、压缩、带宽限制、进程限制等方面提高Web站点的性能。
改善Web应用程序的性能 :
帮页面减肥 :网页文件字节数越小,下载到浏览器的速度就快。因此将网页中的空格、注解及无用字符清除掉、调整JPEG图片文件大小等均可加快下载速度。有专门的网页减肥器软件可帮助减少网页的大小。
尽量使用静态HTML页面,减少对Web服务器资源的占用 :不要在Session中存放大的数据对象,当不需要Session时,应尽快将它从服务器内存中释放;由于Application对象一直会占用服务器资源,应少用或及时清理无用的Application对象。
数据库方面的优化 :数据库连接成功使用后,应及时关闭连接;使用存储过程加快数据处理;优化数据库查询语句以减少执行时间(比如不在查询语句中包含子查询语句、充分利用索引等)。
其他 :在编写Web应用程序时,采用一些技术手段可提高应用程序的性能。
Web站点的安全性
Web服务器的安全
采用NTFS分区;尽可能安装操作系统的最新服务包和修补程序;增强口令的安全性;停掉或卸载不必要的进程或服务。
设置Web内容目录的访问权限,授予匿名用户对所提供内容的适当只读访问权限。根据需要设置文件夹的读写访问权限。
安装防病毒软件和防木马软件等,启用计算机防火墙功能。仅留必要的端口号。
重要敏感信息通过设置虚拟目录来指定Web访问路径。
通过对Web访问的日志进行审计,可以发现一些对安全方面有帮助的信息。
配置URLScan过滤非法url,使其只允许应用程序中使用的扩展集
数据库服务器的安全
如应用程序不使用“命名管道”协议,则删除之。
限制数据库用户只具有用得到的数据库操作权限。
xp_cmdshell是扩展存储过程,可以执行操作系统级命令,该存储过程的功能通过SQL Server安装目录中的文件MSSQL\Binn\xplog70.dll获得,系统没用到xp_cmdshell则文件换名或删除掉。
Web站点应用程序的安全
采用登录名、密码、验证码进行登录,防止注入式攻击。验证码可防止以程序自动方式遍历登录账户和密码。将一串随机产生的数字或符号,生成一幅图片,图片里加上一些干扰像素,由用户肉眼识别其中的验证码信息,输入表单后提交网站进行登录验证。
在用户登录输入密码的时候,为防止木马程序非法录制按键操作,利用自定义软键盘让用户只能通过单击鼠标输入密码。