Web20网页制作技术W.ppt

1、,Web2.0网页制作技术,华东交通大学,吴林峰,首先看一些典型的网站,1、校内网,网页源码,2、blogchina,网页源码,3、淘宝网,4、软件外包往,Web2.0网页制作技术,第一部分：Web2.0概述,第三部分：CSS技术,第二部分：AJAX技术,第四部分：特效示例,Web的起源； Web1.0、Web2.0特点 Web1.0、Web2.0应用模式； Web1.0、 Web2.0相关技术。 Web网页设计标准,Web2.0 概述,Web的起源,Web，也称WWW (World Wide Web 万维网)，是在1989年由英国人Tim Berners-Lee 发明的。 Tim Berne

2、rs-Lee当时就指出：“Web是一个抽象的信息库。”也就是说，我们可以通过Web向人们提供信息和信息服务。,Berners-Lee不仅创建了一个称为超文本传输协议 （HyperText Transfer Protocol，HTTP）的简单协议， 还发明了第一个Web浏览器，叫做WorldWideWeb。,浏览器: Microsoft Internet Explorer 当Microsoft发布Windows 95时，IE 1.0是作为 Microsoft Plus!包的一部分同时发布的。 Firefox (1994年12月，Netscape发布了1.0版， 第一个盈利性质的浏览器从此诞生。

3、2002年又发布了一个开源的版本， 这最终发展为2004年11月发布的、 现在十分流行的Firefox浏览器。) 傲游 腾讯TT浏览器 世界之窗,Web1.0特点,Web1.0的典型网站案例分析1,1、用超文本技术：实现信息与信息的连接； 2、用统一资源定位技术（URI）实现全球信息的精确定位； 3、通过应用层协议（HTTP）实现信息共享 ； 4、Web是一种典型的分布式应用架构。,Web1.0应用模式,1、网站的内容是由网站管理员和编辑人员录入的 2、客户只是浏览网页的内容,Web1.0的典型网站案例分析2,Web1.0技术,客户端技术 主要包括信息的接收、展现技术； 服务端技术 主要包括信

4、息的生成、处理、发送技术；,客户,1、发出请求,服务器,2、处理请求 生成信息， 并发送给客户,3、数据接收,4、数据展现,Web2.0的提出,1、提出的依据： OReilly公司和Media国际公司之间的一次头脑风暴会议的内容； Tim OReilly根据会议头脑风暴内容，于2005 年3月发表文章什么是WEB2.0，Tim OReilly在阐述WEB2.0时的视角是从下一代互联网软件设计模式和商业模式角度去进行阐述和分析。 会议之后的一年半的时间里，“Web 2.0”一词已经深入人心，从Google上可以搜索到950万以上的链接。,Web2.0的特点,1.互联网作为平台 2.利用集体智慧

5、3.轻量型编程模型 4.软件超越单一设备 5.丰富的用户体验,把具有上述特点的互联网称为： Web2.0 所以也称为互联网2.0,网上Web2.0的定义,Web2.0是指：包括技术方面和应用模式方面相结合的信息服务平台。 Web2.0技术是指：以XML、CSS、AJAX等新兴技术的总称， web2.0应用模式是指：融合了Web1.0 的应用模式及新出现的Blog、社区等多种多对多互动应用服务模式。,Taobao网分析,Web2.0的典型网站案例分析1,Blogcn网分析,Web2.0的典型网站案例分析2,Google地图,Web2.0的典型网站案例分析3,6Rooms网分析,Web2.0的典型

6、网站案例分析4,Web2.0的应用模式特点总结,1、客户既是信息的消费者，也是信息的创造者，也就是说：整个网站的内容有客户产生也由客户消费； 2、网站的管理者也成了信息的客户； 3、网站的框架由网站技术人员维护与管理。 4、网站维护人员大大减少（相对于Web1.0） 5、网站的维护成本也大大减少；,Web2.0相关技术,1、XML eXtensible Markup Language 可扩展标记语言, 张三 20 汉族 ,学生的XML文件：,Web2.0相关技术,2、CSS (Cascading Style Sheets)层叠样式表 主要是指网页的内容以什么格式展现出来,网页的样式层：CSS样

7、式表文件,网页的内容层,网页的最终表现内容,网页分的结构层次关系,Web2.0相关技术,Asynchronous Javascript + XML 也就是AJAX技术,局部页面刷新技术1,Web2.0：局部页面刷新技术2,新浪网,淘宝网,AJAX 框架 现在比较流行的是：ExtJS 应用示例 ,Web2.0的发展,美国著名科技博客 最近，美国iLike网站（自创音乐分享网站）宣布注册用户人数已经达到6000万，而且每天新增用户30万人； 现在全球每天都有成百上千个Web2.0网站出现。,Web1.0与Web2.0应用模式对照图,动态网页设计语言： html php Jsp Asp Asp.Ne

8、t C#.Net Vb.Net 网页开发的工具 Visual Studio Dreamweaver 8,Dreamweaver 8,Visual Studio 2005,网页开发语言与工具,Web服务器 1、jsp web服务器 Tomcat 2、asp, asp.Net Web服务器 IIS 3、php web服务器 apache /,Web网页设计标准,1、什么是web标准 Web标准是由W3C(World Wide Web Consortion) 和其他标准组织制定的一套规范集合。 Web标准不是某一个标准，而是一系列标准的集合。,网页由三部分组

9、成，所以也包括三个方面的标准： 1)、结构(Structure)：结构化标准语言XHTML、XML 2)、表现(Presentation)：表现标准语言CSS 3)、行为(Behavior)：行为标准主要包括对象模型 （DOM Document Object Model ）、 JavaScript、VBScript等,2、采用Web标准的好处 1)、文件下载和网页显示速度更快； 2)、大大提高搜索引擎的搜索速度； 3)、内容能够被更广泛的设备访问（例如：手机等）; 4)、用户能够很容易更换页面的显示风格（CSS); 5)、网站更加容易维护，成本降低； 6)、版本修改方便，不需要变动网页的内容。

10、,3、网页的表现和内容分离的实现,1）、内容(Content) 内容是页面实际要传达的真正信息，包括数据、 文挡或者图片等；,2）、结构（Structure） 结构就是对网页内容进行整理和分类。利用结构 化标准语言使网页内容更加具有逻辑性和易用性； （1）、HTML （2）、XML,(Extensible Markup Language(可扩 展标记语言)，XML最初设计的目的是弥补HTML的 不足，后来逐渐用于网络数据的转换和描述； 推荐使用W3C于2000年发布的XML1.0,（3）、XHTML (可扩展超文本标记语言) 推荐使用W3C于2000年发布的XHTML1.0,结构层主要用于对内

11、容进行格式化处理。 例如： 定义标题 定义段落 定义列表 等等,3）、表现（Presentation) 表现是对结构化的信息进行样式上的控制， 例如对颜色、大小、背景等外观进行控制。 表现层标准语言CSS 推荐使用w3c于1998年发布的CSS2.0 W3C创建CSS标准目的是以CSS取代HTML的表格式布局。,4）、行为(Behavior) 行为是对内容的交互和操作效果； 表现行为有以下2类： （1）、DOM。DOM是Document Object Model (文档对象模型) （2）、Script（脚本语言：JavaScript、 VBScript）,网页分层样例,（1）、网页的内容,（2

12、）、网页的 内容 + 结构,（3）、网页的 内容 + 结构 + 表现,网页的组成, This is my first homepage. This text is bold ,1、这个文件的第一个Tag是，这个Tag告诉你的浏览器这是HTML文件的头。文件的最后一个Tag是，表示HTML文件到此结束。 2、在和之间的内容，是Head信息。Head信息是不显示出来的，你在浏览器里看不到。但是这并不表示这些信息没有用处。比如你可以在Head信息里加上一些关键词，有助于搜索引擎能够搜索到你的网页。 3、在和之间的内容，是这个文件的标题。你可以在浏览器最顶端的标题栏看到这个标题。 4、在和之间的信息，

13、是正文。 在和之间的文字，用粗体表示。顾名思义，就是bold的意思。 HTML文件看上去和一般文本类似，但是它比一般文本多了Tag，比如，等，通过这些Tag，可以告诉浏览器如何显示这个文件。,网页的组成元素,1、文本 2、图片(bmp,jpg,gif) 3、超连接 4、动画(gif图片信息) 5、flash 6、视频信息（media player, realplayer）,4、静态页面制作 (1)、静态文本（对齐、字体、大小、颜色） (2)、超连接 (3)、图片插入(插入本地图片,插入网图片) (4)、表单数据的提交； (5)、表格使用(单行,多行,表格数据输出的方法； 表格布局) (6)、页

14、面布局(表格布局法) 52,HTML教程网址：,HTML视频学习,网页的标签,图片标签的使用 图片超连接 ,1、网页里，各个元素背景图片的设置 属性：background,2、背景图片设置的应用 新浪网 1）随即广告 2）图片的轮换,建立符合web标准的网站 要建立符合web标准的网站，包括以下两个方面： 1）、内容标准化设计 2）、表现标准化设计,内容标准化设计,(1)、为页面添加正确的DOCTYPE,DOCTYPE是documenttype的简写。 主要用来说明你用的XHTML或者HTML是什么版本。 浏览器根据你DOCTYPE定义的DTD(文档类型定义)来解释页面代

15、码。,XHTML1.0提供了三种DOCTYPE可选择：,(1)过渡型（Transitional） : 要求非常宽松的DTD； (2)严格型（Strict） : 要求严格的DTD; (3)框架型（Frameset） : 专门针对框架页面设计使用的DTD; ,(2)、声明你的编码语言,为了被浏览器正确解释和通过标识校验， 所有的XHTML文档都必须声明它们所使用的编码语言。 代码如下： meta标签用来描述一个网页文档的属性 , 这里声明的编码语言是简体中文GB2312， 你如果需要制作繁体内容，可以定义为BIG5。,(3)、用小写字母书写所有的标签,XML对大小写是敏感的，所以，XHTML也是大

16、小写有区别的。 所有的XHTML元素和属性的名字都必须使用小写。 否则你的文档将被W3C校验认为是无效的。 例如下面的代码是不正确的：公司简介正确的写法是：公司简介 同样的， 改成， 改成等等。,(4)、为图片添加alt属性,alt属性指定了当图片不能显示的时候就显示供替换文本， 但对纯文本浏览器和使用屏幕阅读机的用户来说是至关重要的。 只有添加了alt属性，代码才会被W3C正确性校验通过。 象下面这样的写法毫无意义： 正确的写法：,（5）、给所有属性值加引号,在HTML中，你可以不需要给属性值加引号， 但是在XHTML中，它们必须被加引号。 例：height=100，而不能是height=1

17、00。,（6）、关闭所有的标签,在XHTML中，每一个打开的标签都必须关闭。 HTML可以接受不关闭的标，XHTML就不可以。 ,（6）、用id属性代替name属性,HTML 4.0.1 中为a、frame、iframe、img等 定义了name属性。 在XHTML里name属性是不能被使用的， 应该使用id属性,2）、表现标准化设计 这个放在CSS样式表里中进行讲述。,网页的布局,1、网页的头 2、网页体 3、网页的尾 注意与网页代码里的 的区别,1、使用表格来布局网页, ,2、网页框架的使用,3、 的使用 在一个网页里嵌入另外一个网页,简单介绍 JavaScript 语言,一、JavaSc

18、ript 语言加入 在这里编写 JavaScript 二、 JavaScript 在页面打印信息 document.write(“第一javascript 程序”); ,Javascript操作表单里的元素,1、button 2、checkbox 3、hidden 4、text 5、password 6、submit 7、reset ,表单的使用 1、action 2、method “post” “get” 1数据的检验 2表单的分支提交 onsubmit=mySubmit(this) if (form.Ref0.checked) form.action = 1.html; else form

19、.action = 2.html ; form.submit(); 3用任何元素提交表单 document.form.submit() document.form.reset(),基于 javaScript 来计算 document.form1.x.value document.getElementById(“x”),3、基于网页形式的计算器设计,基于Jsp获取表单提交的数据函数： request.getParameter(“x”),4、基于网页形式的计算器设计,5、基于网页形式的计算器设计,进度条的实现,2、歌曲播放页面的制作, function setmusic(music) var aa

20、a = document.getElementById(player1).innerHTML= + ; 在路上 Burning,1、登陆页面的制作 2、注册页面的制作 3、基于网页形式的计算器设计 4、静态页面制作,Web页面设计示例,1、登陆页面的制作 （1）、登陆页面设计 （2）、登陆信息验证 （3）、登陆信息提交 （4）、登陆信息与数据库进行比较 （5）、登陆结果显示,页面跳转 1、用html 2、用javascript location.href=main.html ,表单里的元素数据的提交与接收 这里要用到网络编程语言了 Asp Php C# jsp,2、注册页面的制作 （1）、注册

21、页面设计 （2）、注册信息验证 （3）、注册信息提交 （4）、注册信息进库,Jsp网页开发,在html中直接写java程序 ,1）随即广告 一、通过JavaScript 二、网页编程语言 2）图片的轮换 一、通过JavaScript,1、基于jsp网页形式的运算器设计,Request 对象 客户端的请求信息被封装在request对象中， 通过它才能了解到客户的需求，然后做出响应。 客户提交的一些属性 request.getParameter(属性名) 客户端IP地址:getRemoteAddr() 客户端主机名:getRemoteHost() 用的协议类型及版本号:getProtocol()

22、页面的文档类型: getContentType() ,Session 对象,客户和服务器之间的会话信息封状成Session对象; 可以使用 Session 对象存储特定用户会话所需的信息。这样，当用户在应用程序的 Web 页之间跳转时， 存储在 Session 对象中的变量将不会丢失，而是在整个用户会话中一直存在下去。,4、网页计数器制作 （1）、读文件 BufferedReader file; /BufferedReader对象，用于读取 String nameOfTextFile = C:/count.txt; file = new BufferedReader(new FileReade

23、r(nameOfTextFile); String readStr =null; readStr = file.readLine(); （2）、写文件 PrintWriter pw = new PrintWriter(new FileOutputStream(nameOfTextFile); pw.println( writeStr ); pw.close();,JavaScript基本数据类型 在JavaScript中四种基本的数据类型： 1、数值（整数和实数）、 2、字符串型（用“”号或括起来的字符或数值）、 3、布尔型（使True或False表示） 4、空值。,JavaScript语法,

24、JavaScript 常量 整型常量 JavaScript的常量通常又称字面常量，它是不能改变的数据。 其整型常量可以使用十六进制、八进制和十进制表示其值。 实型常量 实型常量是由整数部分加小数部分表示，如12.32、193.98 。 布尔值 布尔常量只有两种状态：True或False。 它主要用来说明或代表一种状态或标志，以说明操作流程。它与是不一样的,可以用或表示其状态,而JavaScript只能用True或False表示其状态。 字符型常量 使用单引号（）或双引号（“）括起来的一个或几个字符。如 This is a book of JavaScript 、3245、ewrt234234

25、等。 空值 JavaScript中有一个空值null,表示什么也没有。如试图引用没有定义的变量,则返回一个Null值。 特殊字符 同语言一样，JavaScript中同样以有些以反斜杠（）开头的不可显示的特殊字符。通常称为控制字符。,JavaScript 变量 变量的主要作用是存取数据、提供存放信息的容器。 对于变量必须明确 变量的命名 变量的类型 变量的作用域。,JavaScript 变量 命名规则 两点： 、必须是一个有效的变量，即变量以字母开头，中间可以出现数字如test1、text2等。 除下划线（）作为连字符外， 变量名称不能有空格、（）、（）、（，）或其它符号。 、不能使用JavaS

26、cript中的关键字作为变量。 如Var、int、double、true不能作为变量的名称。,JavaScript 变量的申明 1、用命令Var作声明 var mytest; 该例子定义了一个mytest变量。但没有赋予它的值。 Var mytest=”This is a book” 该例子定义了一个mytest变量, 同时赋予了它的值。 2、也可以不申明，而在使用时再根据数据的类型来确其变量的类型。 如： x=100 y=125 xy= True cost=19.5等。 其中x整数，y为字符串，xy为布尔型，cost为实型。,JavaScript 变量的作用域 全局变量 全局变量是定义在所有

27、函数体之外，其作用范围是整个函数； 局部变量。 而局部变量是定义在函数体之内，只对其该函数是可见的，而对其它函数则是不可见的。,JavaScript运算符 双目运算符 指具有两个操作数的运算符 操作数 运算符 操作数 单目运算符 是指只有一个操作数 操作数 操作符 （）算术运算符 1、双目运算符号 +（加） 、-（减）、 *（乘）、 /（除）、 %（取模） 、|（按位或）、. Return 表达式; 说明： 当调用函数时,所用变量或字面量均可作为变元传递。 函数由关键字Function定义。 函数名：定义自己函数的名字。 参数表，是传递给函数使用或操作的值，其值可以是常量 ，变量或其它表达式。

28、 通过指定函数名（实参）来调用一个函数。 必须使用Return将值返回。 函数名对大小写是敏感的。,一、JavaScript 示例,1、文字滚动 使用 标签 内容 2、图片滚动 3、进度条的实现,二、JavaScript 常用示例,1、弹出窗口, function CreateWindow() window.open (page.html, newwindow, height=100, width=400, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no) ,w

29、indow.open 弹出新窗口的命令； page.html 弹出窗口的文件名； newwindow 弹出窗口的名字，非必须，可用空代替； height=100 窗口高度； width=400 窗口宽度； top=0 窗口距离屏幕上方的象素值； left=0 窗口距离屏幕左侧的象素值； toolbar=no 是否显示工具栏，yes为显示； menubar，scrollbars 表示菜单栏和滚动栏。 resizable=no 是否允许改变窗口大小，yes为允许； location=no 是否显示地址栏，yes为允许； status=no 是否显示状态栏内的信息（通常是文件已经打开）， yes为允

30、许；,弹出的窗口之定时关闭控制,注意是加入到page.html的HTML中，可不是主页面中 首先，将如下代码加入page.html文件的区： function closeit() setTimeout(self.close(),10000) /毫秒 然后，再用 这一句话代替page.html中原有的 这一句就可以了,在弹出窗口中加上一个关闭按钮 ,网页对话框,showModalDialog (,example04,dialogWidth:400px;dialogHeight:300px; dialogLeft:200px;dialogTop:150px;center:yes;help:yes;

31、resizable:yes;status:yes) showModelessDialog (,example05,dialogWidth:400px;dialogHeight:300px; dialogLeft:200px;dialogTop:150px;center:yes;help:yes;resizable:yes;status:yes),showModalDialog()与showModelessDialog()的区别，在于showModalDialog()打开模式窗口， showModelessDialog()打开无模式窗口。 dialogHeight: iHeight 设置对话框窗口的高度。 dialogWidth: iWidth 设置对话框窗口的宽度。 dialogLeft: iXPos 设置对话框窗口相对于桌面左上角的left位置。 dialogTop: iYPos 设置对话框窗口相对于桌面左上角的top位置。 center: yes no 1 0 指定是否将对话框在桌面上居中，默认值是“yes”。 help: yes no 1 0 指定对话框窗口中是否显示上下文敏感的帮助图标。默认值是“yes”。 resizable: