Transcript Document
第一讲 网站设计概述
信息学院
周宝刚
课程内容
网站设计基础
网站开发所需技术概述
网站总体设计
网站服务器概述
JSP环境配置
JSP简介
信息学院
周宝刚
网站设计基础
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架构中的技术
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
制作的超文本信息
信息学院
周宝刚
网站设计基础
HTML技术的发展
最初的HTML语言只能在浏览器中展现静态的文本
或图像信息
1989年GIF图像格式 应用于HTML
1996年，Netscape浏览器增加了对JavaApplets和
JavaScript的支持 ，同年Microsoft设计了另一种脚
本语言--VBScript语言。
1996年底引入了CSS（Cascading Style Sheets）
和DHTML（Dynamic HTML）技术
1996年Netscape 引入了对QuickTime插件的支持
信息学院
周宝刚
网站设计基础
服务端技术的萌芽和发展
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技术诞生。
信息学院
周宝刚
网站设计基础
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的基础。
信息学院
周宝刚
网站设计基础
WEB开发框架和应用模型
1998年时Microsoft推出的Windows 98就可以在桌
面上集成Web页面
2000年后，Microsoft陆续推出了MSN Explorer和
与之相关的MSN在线服务
Web开发环境开始支持MVC（Model-ViewContorller）的设计模型
门户服务（Portal Server）和Web内容管理（Web
Content Management）的设计模型
信息学院
周宝刚
网站设计基础
WEB服务体系结构
浏览器
HTTP请求
HTTP应答
Web服务器
用户界面层
Web应用服务器
应用逻辑层
数据库服务器
信息系统
数据存取层
信息学院
周宝刚
网站开发技术
WEB客户端开发技术
HTML技术
JavaScript技术
CSS技术
XML技术
WAP与WML技术
信息学院
周宝刚
网站开发技术
WEB服务端开发技术
ASP技术
PHP技术
JSP技术
信息学院
周宝刚
网站设计与管理的基本过程
1、网站的规划和分析
建站目的与目标、可行性分析、资源规划
2、网站运行环境的建立
域名注册、建站方式的选择、Web服务器的构
建
3、网站的设计与制作
网站总体设计、网站内容与结构设计、网站
可视化设计、网页的制作
4、网站管理系统的建立
5、网站的测试、推广与维护
网站的测试、网站的营销推广、网站的日常
更新与维护
信息学院
周宝刚
网站总体设计
网站CI形象设计
网站的内容设计
网站的总体结构
网站的目录结构与链接设计
网站的整体风格和创意设计
信息学院
周宝刚
网站CI形象设计
CI: 企业形象。CI设计主要指网站的标志、色彩、字
体、标语等。
1、网站标志、名称设计
网站有代表性的人、事、物
专业性网站的代表性物品
英文名称作标志
网站名称要合法、合理、合情
信息学院
周宝刚
网站CI形象设计
2、设计网站的标准色彩
标准色彩：指能体现网站形象和延伸内涵的
色彩。
一般地，网站的标准色彩不要超过3种
标准色彩要用于网站的标志、标题、主菜单
和主色块。
3、设计网站的标准字体
标准字体：指用于标志、标题、主菜单、主
体内容的字体。
不常用字体最好通过图片形式显示
信息学院
周宝刚
网站标志、名称
信息学院
周宝刚
网页配色
信息学院
周宝刚
宣传型电子商务网站
信息学院
周宝刚
完全电子商务网站
信息学院
周宝刚
信息学院
周宝刚
网站结构图
信息学院
周宝刚
网站的内容设计
1、网站的功能与类型选择
电子商务网站的类型
基本型：具备基本电子商务功能，可实现产品展示、
公司宣传与客户服务，适用于初尝电子商务的小型企
业。一般搭建在公众电子商务平台上，性价比较高
宣传型：目的是通过网站宣传产品或服务项目，提升
公司形象，拓展市场，适于各类企业。
客户服务型：目的是宣传公司形象与产品，并达到与
客户实时沟通及为产品或服务提供服务支持，从而降
低成本，提高效率。适于各类企业。
完全电子商务型：目的是通过网站宣传公司整体形象，
推广产品与服务，实现网上客户服务与产品的在线销
售，为公司直接创造利润、提高竞争力，适于各类有
条件的大、中型企业。
信息学院
周宝刚
网站的内容设计
完全电子商务网站的基本功能
企业形象宣传
产品展示
商品与服务的在线订购
顾客关系与服务
新闻、信息发布
网上调查
销售业务信息管理
2、网站的信息设计
网站的信息应完整、真实、准确、合法，并应及时更
新。
企业应制定互联网信息发布的审核机制
信息学院
周宝刚
网站的总体结构
主 页
关于我们
企业简介
企业动态
业务联系
产品展示
产品分类
产品目录
产品简介
产品详情
分类查询
品牌介绍
新品推介
网上销售
产品查询
用户注册
购物车
订单查询
电子合同
交易
证书下载
在线服务
FAQ
在线提问
售后服务
技术支持
用户反馈
信息发布
信息展示
信息查询
网站管理
客户资源管理
产品管理
供应商管理
交易管理
新闻管理
访问分析
技术支持管理
超级用户管理
信息学院
周宝刚
网站的目录结构与链接
1、目录结构设计
不要将所有文件都存放在根目录下
按栏目内容建立子目录
在每个主栏目内部建立独立的images目录
目录层次不要太深
不要使用中文目录名
不要使用过长目录名
尽量使用意义明确的目录名
信息学院
周宝刚
网站的目录结构与链接
2、网站的链接结构
树状链接结构：条理清晰，但效率低
星状链接结构：
一级页面 二级页面
企业新闻页—新闻1，新闻2
首页—产品信息页—产品1，产品2
技术服务页—服务1，服务2
浏览方便，但链接太多，不易导航，一般在页面
顶部增加导般条，如：
当前位置：首页->产品信息->松下产品
注重链接的个性化与相关性
信息学院
周宝刚
网站的整体风格与创意
1、风格的内涵
风格（Style）是指站点的整体形象给浏览者
的综合感受。
2、风格的确立
明确网站的风格
使网站的标志尽可能出现在每个页面
突出网站的标准色彩
突出网站的标准字体
使用统一的图片处理效果
使用统一的符号、线条与图标
信息学院
周宝刚
网站的整体风格与创意
3、创意设计
网站的创意
创意思考的过程
准备期孵化期启示期验证期形成
期
创意思考的途径
1.把它颠倒 2.把它缩小 3.把颜色换一下 4.
使它更长 5.使它闪动 6.把它放进音乐里 7.
结合文字音乐图画 8.使它成为年轻的9.使
它重复 10.使它变成立体 11.参加竞赛 12.
参加打赌13.变更一部分 14.分裂它 15. 使
它速度加快 16.使它对称 等
信息学院
周宝刚
Web服务器
分为在UNIX或LINUX平台以及Windows平台，
UNIX：
W3C、NCSA和APACHE服务器
Windows：
IIS（Internet Information Server）
信息学院
周宝刚
Web服务器
Microsoft IIS
信息学院
周宝刚
Web服务器
IBM WebSphere
信息学院
周宝刚
Web服务器
BEA WebLogic
信息学院
周宝刚
Web服务器
Oracle IAS
信息学院
周宝刚
Web服务器
Apache
信息学院
周宝刚
Web服务器
Tomcat
信息学院
周宝刚
JSP运行环境得安装
安装JAVA运行环境
安装tomcat服务器
信息学院
周宝刚
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的安装
信息学院
周宝刚
WINDOWS下Tomcat安装
1、到 www.apache.org网站上下载tomcat
2、通过双击安装，安装过程中需要选择JDK得目录
3、 检查是否安装成功
4、修改tomcat得配置文件
信息学院
周宝刚
LINUX下JAVA环境配置
1、JDK的下载和安装
2、在linux下面环境变量的设置（修改etc/profile文件）
export JAVA_HOME=/usr/java/j2sdk1.4.2_04
export CLASSPATH=$CLASSPATH:$JAVA_HOME/lib:$J
AVA_HOME/jre/lib
export PATH=$JAVA_HOME/bin:$JAVA_HOME/jre/bin:$
PATH:$HOMR/bin
3、其它服务的安装（J2EE WEB服务安装）
TOMCAT的安装
信息学院
周宝刚
LINUX下Tomcat安装
1、到 www.apache.org网站上下载tomcat
2、通过解压放到linux下，
# gunzip apache-tomcat-5.5.12.tar.gz
# tar -xvf apache-tomcat-5.5.12.tar
# mv apache-tomcat-5.5.12 tomcat
3、 检查是否安装成功
4、修改tomcat得配置文件
# cd tomcat/conf
# vi server.xml
信息学院
周宝刚
J2EE目录规范
src/main/java
src/main/resources
src/main/filters
src/main/assembly
src/main/config
src/main/webapp
src/test/java
src/test/resources
src/test/filters
src/site
LICENSE.txt
README.txt
Application/Library sources
Application/Library resources
Resource filter files
Assembly descriptors
Configuration files
Web application sources
Test sources
Test resources
Test resource filter files
Site
Project's license
Project's readme
信息学院
周宝刚
JSP概述
JSP（JAVA SERVER PAGE）是由Sun 公司在java语
言上开发出来的一种动态网页制作技术，其可使您
可以将网页中的动态部分和静态的HTML相分离。
信息学院
周宝刚
JSP概述
JSP与ASP的比较
结构
编程语言
性能
运行平台
信息学院
周宝刚
JSP文件结构及主要标签
<%@ page contentType="text/html;charset=gb2312" %>
<%@ page import="java.util.*“ %>
...
<HTML>
<BODY>
其他 HTML 语言
<%
符合JAVA 语法的 JAVA 语句
%>
其他 HTML 语言
</BODY>
</HTML>
信息学院
周宝刚
JSP示例(Hello.jsp)
<%@ page contentType="text/html;charset=gb2312" %>
<%@ page import="java.util.*"%>
<HTML>
<BODY>
<%
for ( int i=0; i<2; i++ )
{
%>
你好<br>
<%
}
%>
</BODY>
</HTML>
<HTML>
<BODY>
你好<br>
你好<br>
</BODY>
</HTML>
信息学院
周宝刚
JSP执行过程
servlet
servlet 分析器
request
*.jsp
jsp parser
JSDK
*.java
*.class
执
行
response
信息学院
周宝刚
JSP
执行过程
查找对应的JSP文件
是否存在
N
Y
是否是修改或创建
后第一次调用
Y
调用Jsp Parser将其
编译成Servlet程序
调用JSDK将对应的Servlet
程序编译成Servlet字节码
执行(若未载入则先载入)
已有的对应的Java字节码
N
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>
JSP文件
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示例(浏览结果)
信息学院
周宝刚
HTML文档基本架构
<html>
<head>
<title>
网页标题
</title>
</head>
<body>
<p>这是正文部分！</p>
</body>
</html>
信息学院
周宝刚
说明：
l
<html> 元素是HTML文档的最高层元素，原则上用
它来指出HTML文档的开始与结束。
l
<head> 元素用来标识网页的头部，
l
<title> 元素用来指定浏览器所要显示的标题文字。
l
<body> 元素用来标识HTML文档的主体部分。
信息学院
周宝刚
HTML常用标记
头部标记
<HEAD>和</HEAD>是HTML的头部标记 ，
其中主要包括对当前网页的一些基本描述信息，
例如网页标题、一些说明信息和搜索关键字等。
1．网页标题标记
格式：
<TITLE> 标题文字 </TITLE>
示例：
<title>访客留言簿</title>
信息学院
周宝刚
HTML常用标记
2．元信息标记
<META>标记是HTML头部标记中常见的元信息标记，可
重复出现在头部标记中，用来指明本网页的作者、网页制
作工具、所包含的的关键字，以及其他一些描述网页信息。
<META>标记的另一个作用是创建HTTP响应头，以便让浏
览器知道如何去处理这个网页，例如这个网页什么时候过
期，隔多少时间自动刷新等。
信息学院
周宝刚
HTML常用标记
<meta http-equiv="Refresh" content="10; url= http://yourlink">
10秒后刷新到http://yourlink;
网页间转换时加入效果
<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_231280">
<meta http-equiv="Content-Language" content="zh-CN">
说明所用语言及文字...
信息学院
周宝刚
主体标记
<BODY> 和 </BODY> 标 记 是 HTML 文 档 的
主体标记，其内包括了将在网页中显示的文字、
图片、表格、链接、表单等所有内容。
信息学院
周宝刚
1．<BODY>标记的属性及其说明
属性
描述
TEXT
设定页面文字的颜色
BGCOLOR
设定页面背景的颜色
BACKGROUND
设定页面背景的图像
BGPROPERTIES
设定页面背景图像是否随页面的滚动而动
LINK
设定默认的链接颜色
ALINK
设定鼠标靠近时的链接颜色
VLINK
设定已访问过的链接颜色
TOPMARGIN
设定页面上边与浏览器窗口顶端的距离
LEFTMARGIN
设定页面左边与浏览器窗口左端的距离
主体标记
<BODY>标记应用示例
<body bgcolor="gold">
<body bggroung="abc.jpg" bgproperties=fixed>
<body
link="#0000FF"
alink="#FF0000"
vink="#800080">
<body topmargin="12" leftmargin="20">
信息学院
周宝刚
段落标记
1．标题文字标记
<Hn align = 对齐方式> 标题文字 </Hn>
2．分段标记
<P align = 对齐方式> 文字 </P>
说明：分段标记不仅使得后面的文字换行输出，还将
在两个段落之间产生一个空行。分段结束标志 </P>
可以省略。
3．换行标记
文字 <BR>
说明：可以连续使用多个<BR> 标记来产生多个空行
信息学院
周宝刚
段落标记
4．横线标记
<HR size = 粗细 align = 对齐方式 width = 宽度 color
= 颜色>
5．文本缩排标记
<Blockquote> 文字 </Blockquote>
信息学院
周宝刚
文字格式标记
1．字体标记
格式：
<FONT size = 大小 face = 字体名称 color = 颜色>文
字</FONT>
2．文字修饰标记
信息学院
周宝刚
标记
描述
<B>…</B>
将文字设置为粗体字
<I>…</I>
将文字设置为斜体字
<U>…</U>
设置为带有下划线的文字
<SUP>…</SUP>
设置为位于右上角的上标文字
<SUB>…</SUB>
设置为位于右下角的下标文字
<STRIKE>…</STRIKE>
设置为带有删除线的文字
<ADDRESS>…</ADDRESS>
标明其间的文字为地址内容
<EM>…</EM>
强调其间的文字（通常为斜体）
<STRONG>…<STRONG>
强调其间的文字（通常为黑体）
2.2.5 特殊字符标记
字符
对应字符标记
对应十进制编码标记
说明
<
<
<
小于符号
>
>
>
大于符号
&
&
&
AND符号
"
"
"
双引号
 
空格
·
·
·
中点
§
§
§
分节符号
©
©
©
版权符号
®
®
®
注册符号
列表标记
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>
信息学院
周宝刚
图像标记
格式：
<IMG scr = 图片文件的URL align = 对齐方式
border = 边框宽度 alt = 说明性替代文字 height =
图像高度
width = 图像宽度 hspace = 水平边距 vspace = 垂
直边距>
信息学院
周宝刚
超链接标记
格式：
<A href = URL>用作链接的文字或图像</A>
信息学院
周宝刚
HTML表格标记
1．网页中的表格
网页中经常需要使用各种表格元素，设计者
不仅可以通过表格来输出诸如“商品表”或
“员工表”中的各行信息，更重要的是可以利
用表格来方便地控制网页中各种元素的布局，
以便整齐地安排网页中众多的文字和图片等。
信息学院
周宝刚
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>
HTML框架标记
1．网页中的框架
框架元素用来将整个浏览器窗口划分为多个不同的矩形区域，
在一个区域内可以独立显示与区域之外不同的HTML文档
内容。框架元素的定义需要用到框架集标记和框架标记，
框架集标记<FRAMESET>用来定义一个窗口内的框架数、
各框架的尺寸等，框架标记<FRAME>则用来具体定义某个
框架的名称、在该框架中显示的HTML文档等。
信息学院
周宝刚
2．框架定义格式
<FRAMESET cols = 框架列数及各列宽度 rows
= 框架行数及各行高度
bordercolor = 边框颜色 frameborder = 框架
边框 framespacing = 框架间距>
<FRAME name = 框架名称 target = 目标框
架
scr = URL border = 边框宽度
bordercolor = 边框颜色>
<FRAME ……>
……
</FRAMESET>
HTML表单标记
1．网页中的表单
表单的英文名称为form ，用于在网页中为浏览者提
供一个输入各种信息的界面 ，以便Web应用程序和
Web数据库获取这些信息。大多数网站的网页设计都
需要使用表单元素，例如通过表单来完成用户注册信
息的输入或者商品订购信息的输入等。
信息学院
周宝刚
2．表单定义格式
<FORM name = 表单名 action = 被激活程序
method = 信息传送方式>
……
<INPUT type = 表单域类型 name = 表单域名
称 ……>
……
</FORM>
信息学院
周宝刚
常用表单域标记
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（隐藏）等多种表单域类
型。
信息学院
周宝刚
2．<SELECT> 标记
格式：
<SELECT name = 表单域名称 size = 大小 multiple = 可
选多少项>
<OPTION>文字</OPTION>
<OPTION>文字</OPTION>
……
</SELECT>
3．<TEXTAREA> 标记
格式：
< TEXTAREA name = 表单域名称 rows = 行数 cols =
列数 value = 字符串>
</TEXTAREA>
HTML其他标记
动态文字标记
格式：
<MARQUEE bgcolor = 背景颜色 behavior = 移动方式
direction = 移动方向
align = 对齐方式 scrollamount = 移动速度 scrolldelay =
停顿时间
height = 高度 width = 宽度 hspace = 水平边距 vspace =
垂直边距>
</MARQUEE>
信息学院
周宝刚
层标记
格式：
<DIV id = 层的名称 style = 层的样式 >
HTML元素序列
</DIV>
信息学院
周宝刚
嵌入多媒体信息标记
格式：
<Embed scr = 多媒体文件的URL type = 多媒体文件
的类型
width = 宽度 height = 高度>
</Embed>
信息学院
周宝刚
HTML文档样式
在HTML文档中除了可用各种标记对文字或段落等
元素分别设置格式外，还可应用样式来进行格式设置。
在设计HTML网页时，可采用下列方式定义和应用样
式：
在文档头部定义样式块。
在文档主体部分对个别元素（如段落、表格单元等）
单独定义样式。
使 用 外 部 样 式 表 或 称 层 叠 样 式 表 CSS （ Cascading
Style Sheets）。
信息学院
周宝刚
在文档头部定义样式
1．格式：
<STYLE>
HTML标记{属性名称：属性值；属性名称：属性值 ……}
HTML标记{属性名称：属性值；属性名称：属性值 ……}
……
< /STYLE>
2．样式块中的各种属性
信息学院
周宝刚
属性
说明
取值
Font-Size
字体大小
Font-Family
字体
Points 、
Centimeter
FontName
Inches 、
Pixels 、
Font-Weight
字体粗细
Lighter、 Medium、 Bold
Font-Style
斜体
Normal、 Italic
Line-Height
行距
Color
文本颜色
Points 、 Inches 、 Pixels 、
Centimeter
ColorName、 RGB triplet
Text-Decoration
文本修饰效果
Text-Aligh
文本对齐
Text-Indent
文本缩进
Margin-Left
页面左边界
Margin-Right
页面右边界
Background
背景图片或颜色
None、 Underline、 Italic、 LineThrough
Left、 Right、 Center
Points 、 Inches 、 Pixels 、
Centimeter
Points 、 Inches 、 Pixels 、
Centimeter
Points 、 Inches 、 Pixels 、
Centimeter
URL、 Color-Name、 RGB triplet
为单个元素定义样式
对一些元素单独设置style属性示例：
<p style = "colort: #ff0000; font-weight:bold">这是一段
红色粗体文字</p>
<h2 style = "font-family: 宋体; Color:brown">这是一个
棕色宋体字标题</h2>
<a href = "http://www.163.com" style = "text-decoration:
none ">163网站</a>
<td align =" middle" style="font-size: 12px; font-family:
隶书" >姓名</td>
信息学院
周宝刚
使用级联样式表CSS
级联样式表CSS实际上是用来规范HTML文档格式
的样式定义文件，可统一定义网站中多个网页内容的
显示格式。此种定义方式不仅能够大大减少THML文
档中各种重复标记的数目，而且有利于整个网站页面
风格的统一。此外，使用CSS可将网页要展示的内容
与其样式定义分开，即把网页的外观设计从网页内容
中独立出来集中管理。这样，当需要改变网页外观时，
只需更改对应的样式表文件即可。
使用级联样式表的具体方法是：在一个或多个级联样式表
中定义样式，并将它们保存为扩展名为.CSS的文件，然后
将它们链接到需要使用这些样式的所有网页，从而实现这
些网页外观的一致性。
信息学院
周宝刚
CSS+DIV来设计页面
参考CSS手册
利用CSS+DIV来设计界面示例
信息学院
周宝刚
课程内容
JAVASCRIPT 简介
JAVASCRIPT编程基础
流程控制
函数
对象编程
文档对象模型与事件驱动
信息学院
周宝刚
JAVASCRIPT 简介
什么是JavaScript
JavaScript是Web上的一种功能强大的编程语言，
用于开发交互式的Web页面。
JavaScript的前身叫做LiveScript
JavaScript 的基本特点
JavaScript是脚本编程语言：
JavaScript是基于对象的语言
安全性
跨平台性
信息学院
周宝刚
JAVASCRIPT 简介
在HTML中嵌入JavaScript
通过标记<SCRIPT>…</SCRIPT>引入JavaScript代
码。
Language属性指定脚本类型，如VBScript、
JavaScript
链接JavaScript文件
链接方式：使用<SCRIPT>标记的SRC属性指定*.js
的URL。
信息学院
周宝刚
JAVASCRIPT 简介
客户端应用
服务器端应用
信息学院
周宝刚
JAVASCRIPT编程基础
常量
JavaScript有三种基本类型的常量：数值型、字
符串型和布尔型。
空值型
空值就是null，定义空的或不存在的引用。它不
等同于空串或0。
未定义值
未定义值就是undefined，表示变量还没有赋值。
变量
所谓变量，就是程序中一个已命名的存储单元。
使用var声明变量 JavaScript变量的类型是动态的
信息学院
周宝刚
JAVASCRIPT编程基础
算术运算符 (+,-,*,/,%,++,-- )
比较运算符 (<,<=,>,>=,==,!=)
逻辑运算符 (&&,||,! )
字符串运算符 (+)
位操作运算符 (&,|,^,<<,>>,>>> )
赋值运算符 (=)
条件运算符 (?: )
其他运算符 (. [] () )
信息学院
周宝刚
流程控制
3种对话框: 警示、确认和提示对话框
alert()
alert("欢迎浏览本页面！");
confirm()
var visited,show_text;
visited = confirm(“您来过西湖吗？");
show_text = visited?“您也认为西湖很美吧！":"
欢迎您有机会来中大参观!";
document.write(show_text);
prompt()
name=prompt("请输入您的姓名:","");
信息学院
周宝刚
流程控制
if 语句 (if…else 语句 )
switch 语句
switch()
{
case 常数表达式1:语句1;break;
case 常数表达式2:语句2; break;
…
case 常数表达式n:语句n; break;
default: 语句n+1; break;
}
信息学院
周宝刚
流程控制
for 语句
for(初值表达式;循环判定式;更新表达式) 循环体语
句
while 语句
while(循环判定式) 循环体语句
do while 语句
do 循环体语句 while(循环判定式);
信息学院
周宝刚
函数
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”。
信息学院
周宝刚
函数
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
信息学院
周宝刚
函数
自定义函数
定义格式：
function 自定义函数名()
{
函数体
}
在同一个页面中的两个函数不能同名。
函数定义通常放在<HEAD></HEAD>标记之间，
确保函数先定义后使用。
调用形式“函数名()”
使用return语句返回值
信息学院
周宝刚
文档对象模型与事件驱动
信息学院
周宝刚
文档对象模型与事件驱动
引用文档对象模型中的对象
所有下层对象都是其上层对象的子对象。而子对象
其实就是父对象的属性，所以引用子对象的方式，
与引用对象的一般属性是相同的。如：
window.document.write("Hello");
由于window对象是默认的最上层对象，因此引用它
的子对象时，可以不使用window：
document.write("Hello");
当引用较低层次的对象时，要根据对象的包含关系，
一层一层地引用对象。如：
document.form1.yourname
信息学院
周宝刚
文档对象模型与事件驱动
引用文档对象模型中的对象
所有下层对象都是其上层对象的子对象。而子对象
其实就是父对象的属性，所以引用子对象的方式，
与引用对象的一般属性是相同的。如：
window.document.write("Hello");
由于window对象是默认的最上层对象，因此引用它
的子对象时，可以不使用window：
document.write("Hello");
当引用较低层次的对象时，要根据对象的包含关系，
一层一层地引用对象。如：
document.form1.yourname
信息学院
周宝刚
使用浏览器对象
窗口(Window)对象
对于window对象的使用，主要集中在窗口的打开和
关闭、窗口状态的设置、定时执行程序以及各种对
话框的使用等四个方面
Open,close, setInterval, location.href
信息学院
周宝刚
使用浏览器对象
文档(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>");
信息学院
周宝刚
使用浏览器对象
for(i=0;i<document.all.length;i++) //遍历文档中的所有标记
{
cell=document.all[i];
if(i>0) document.write(",");
document.write(cell.tagName);
}
信息学院
周宝刚
使用浏览器对象
for(i=0;i<document.all.length;i++) //遍历文档中的所有标记
{
cell=document.all[i];
if(i>0) document.write(",");
document.write(cell.tagName);
}
信息学院
周宝刚
使用浏览器对象
表单(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);
}
信息学院
周宝刚
使用浏览器对象
表单(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);
}
信息学院
周宝刚
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
等新理论和技术实现的互联网新一代模式
信息学院
周宝刚
WEB 2.0
Blog——博客/网志
Blog的全名应该是Web log，后来缩写为Blog。Blog是一
个易于使用的网站，您可以在其中迅速发布想法、与他人
交流以及从事其他活动。所有这一切都是免费的。
RSS
RSS是站点用来和其他站点之间共享内容的一种简易方式
（也叫聚合内容）的技术。最初源自浏览器“新闻频道”
的技术，现在通常被用于新闻和其他按顺序排列的网站，
例如Blog。
信息学院
周宝刚
WEB 2.0
WIKI——百科全书
Wiki--一种多人协作的写作工具。Wiki站点可以有多人
（甚至任何访问者）维护，每个人都可以发表自己的意见，
或者对共同的主题进行扩展或者探讨。
Wiki指一种超文本系统。这种超文本系统支持面向社群
的协作式写作，同时也包括一组支持这种写作的辅助工具。
有人认为，Wiki系统属于一种人类知识网格系统，我们可
以在Web的基础上对Wiki文本进行浏览、创建、更改，而
且创建、更改、发布的代价远比HTML文本小；同时Wiki
系统还支持面向社群的协作式写作，为协作式写作提供必
要帮助；最后，Wiki的写作者自然构成了一个社群，Wiki
系统为这个社群提供简单的交流工具。与其它超文本系统
相比，Wiki有使用方便及开放的特点，所以Wiki系统可以
帮助我们在一个社群内共享某领域的知识。
信息学院
周宝刚
WEB 2.0
网摘
“网摘”又名“网页书签”，起源于一家叫做Del.icio.us
的美国网站自2003年开始提供的一项叫做“社会化书签”
（Social Bookmarks）的网络服务，网友们称之为“美味书
签”（Delicious在英文中的意思就是“美味的；有趣
的”）。
SNS——社会网络
Social Network Sofwaret，社会性网络软件，依据六度理
论，以认识朋友的朋友为基础，扩展自己的人脉。
P2P——对等联网
P2P是peer-to-peer的缩写，peer在英语里有“（地位、能
力等）同等者”、“同事”和“伙伴”等意义。这样一来，
P2P也就可以理解为“伙伴对伙伴”、“点对点”的意思，
或称为对等联网。目前人们认为其在加强网络上人的交流、
文件交换、分布计算等方面大有前途。
信息学院
周宝刚
WEB 2.0
IM——即时通讯
即时通讯（Instant Messenger，简称IM）软件
可以说是目前我国上网用户使用率最高的软件。聊
天一直是网民们上网的主要活动之一，网上聊天的
主要工具已经从初期的聊天室、论坛变为以MSN、
QQ为代表的即时通讯软件。大部分人只要上网就
会开着自己的MSN或QQ。
作为使用频率最高的网络软件，即时聊天已经
突破了作为技术工具的极限，被认为是现代交流方
式的象征，并构建起一种新的社会关系。它是迄今
为止对人类社会生活改变最为深刻的一种网络新形
态，没有极限的沟通将带来没有极限的生活。
信息学院
周宝刚
AJAX
Ajax(Asynchronous JavaScript + XML的简写 )不是
一种技术。实际上，它由几种蓬勃发展的技术以新
的强大方式组合而成。Ajax包含：
基于XHTML和CSS标准的表示；
使用Document Object Model进行动态显示和交互；
使用XMLHttpRequest与服务器进行异步通信；
使用JavaScript绑定一切。
信息学院
周宝刚
AJAX
Ajax工作原理
Ajax的核心是JavaScript对象XmlHttpRequest。
该对象在Internet Explorer 5中首次引入，它是一
种支持异步请求的技术。简而言之，
XmlHttpRequest使您可以使用JavaScript向服务器
提出请求并处理响应，而不阻塞用户。
信息学院
周宝刚
XmlHttpRequest对象
属性
描述
onreadystatechange
每次状态改变所触发事件的事件处理程
序
readyState
对象状态值：
•0 = 未初始化（uninitialized）
•1 = 正在加载（loading）
•2 = 加载完毕（loaded）
•3 = 交互（interactive）
•4 = 完成（complete）
responseText
从服务器进程返回的数据的字符串形式
responseXML
从服务器进程返回的DOM兼容的文档数
据对象
status
从服务器返回的数字代码，比如404
（未找到）或200（就绪）
statusText
伴随状态码的字符串信息
信息学院
周宝刚
AJAX
Ajax示例
信息学院
周宝刚