Web2.0网页制作技术 Web1

《Web2.0网页制作技术 Web1》由会员分享，可在线阅读，更多相关《Web2.0网页制作技术 Web1（119页珍藏版）》请在金锄头文库上搜索。

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 Berners-Lee当时就指出：

2、“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版， 第一个盈利性质的浏览器从此诞生。 2002年又发布了一个

3、开源的版本， 这最终发展为2004年11月发布的、 现在十分流行的Firefox浏览器。) 傲游 腾讯TT浏览器 世界之窗Web1.0特点Web1.0的典型网站案例分析11、用超文本技术：实现 信息与信息的连接；2、用统一资源定位技术 （URI）实现全球信息的 精确定位； 3、通过应用层协议（ HTTP）实现信息共享 ；4、Web是一种典型的分 布式应用架构。 http:/Web1.0应用模式1、网站的内 容是由网站管 理员和编辑人 员录入的2、客户只是 浏览网页的内 容Web1.0的典型网站案例分析2Web1.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.利用集体智慧 3.轻量型编

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

6、.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技术局部页面刷新技术1Web2.0：局部页面刷新技术2 新浪网淘宝网 AJAX 框架 现在比较流行的是：ExtJS http:/ http:/ 应用示例 http:/ 美国著名科技博客http:/ 表文章称，Web2.0网站的吸引力仍在增强 ，市场不断扩大。 最近，美国iLike网站（自创音乐分享网站） 宣布注册用户人数已经达到6000万，而且 每天新增用户30万人； 现在全球每天都有成百上千个Web2.0网站 出现。Web1.0与Web2.0应用模式对照图We

8、b 1.0应用特点Web 2.0应用特点个人网站,新闻网站博客(blogging) 页面浏览数搜索引擎优化页面抓取（page scraping）网络服务（web services）信息发布参与动态网页设计语言： html php Jsp Asp Asp.Net C#.Net Vb.Net网页开发的工具 Visual Studio Dreamweaver 8Dreamweaver 8Visual Studio 2005网页开发语言与工具Web服务器1、jsp web服务器 Tomcat2、asp, asp.Net Web服务器 IIS3、php web服务器 apachehttp:/www.fl

9、eaphp.org/Web网页设计标准1、什么是web标准Web标准是由W3C(World Wide Web Consortion) 和其他标准组织制定的一套规范集合。Web标准不是某一个标准，而是一系列标准的集合。网页由三部分组成，所以也包括三个方面的标准： 1)、结构(Structure)：结构化标准语言XHTML、XML 2)、表现(Presentation)：表现标准语言CSS 3)、行为(Behavior)：行为标准主要包括对象模型（DOM Document Object Model ）、JavaScript、VBScript等2、采用Web标准的好处1)、文件下载和网页显示速度更快

10、；2)、大大提高搜索引擎的搜索速度；3)、内容能够被更广泛的设备访问（例如：手机等）;4)、用户能够很容易更换页面的显示风格（CSS);5)、网站更加容易维护，成本降低；6)、版本修改方便，不需要变动网页的内容。3、网页的表现和内容分离的实现1）、内容(Content)内容是页面实际要传达的真正信息，包括数据、 文挡或者图片等；2）、结构（Structure）结构就是对网页内容进行整理和分类。利用结构 化标准语言使网页内容更加具有逻辑性和易用性； （1）、HTML（2）、XML,(Extensible Markup Language(可扩展标记语言)，XML最初设计的目的是弥补HTML的不足，

11、后来逐渐用于网络数据的转换和描述；推荐使用W3C于2000年发布的XML1.0（3）、XHTML (可扩展超文本标记语言)推荐使用W3C于2000年发布的XHTML1.0结构层主要用于对内容进行格式化处理。 例如： 定义标题 定义段落 定义列表 等等3）、表现（Presentation)表现是对结构化的信息进行样式上的控制， 例如对颜色、大小、背景等外观进行控制。表现层标准语言CSS推荐使用w3c于1998年发布的CSS2.0W3C创建CSS标准目的是以CSS取代HTML的表 格式布局。4）、行为(Behavior)行为是对内容的交互和操作效果； 表现行为有以下2类： （1）、DOM。DOM是

12、Document Object Model(文档对象模型) （2）、Script（脚本语言：JavaScript、VBScript）网页分层样例（1）、网页的内容（2）、网页的 内容 + 结构（3）、网页的 内容 + 结构 + 表现网页的组成This is my first homepage. This text is bold1、这个文件的第一个Tag是，这个Tag告诉你的浏览器这是HTML文件 的头。文件的最后一个Tag是，表示HTML文件到此结束。 2、在和之间的内容，是Head信息。Head信息是不显示出来的 ，你在浏览器里看不到。但是这并不表示这些信息没有用处。比如你可以在 Head

13、信息里加上一些关键词，有助于搜索引擎能够搜索到你的网页。 3、在和之间的内容，是这个文件的标题。你可以在浏览器最顶端 的标题栏看到这个标题。 4、在和之间的信息，是正文。在和之间的文字，用粗体表示。顾名思义，就是bold的意思。 HTML文件看上去和一般文本类似，但是它比一般文本多了Tag，比如 ，等，通过这些Tag，可以告诉浏览器如何显示这个文件。网页的组成元素1、文本 2、图片(bmp,jpg,gif) 3、超连接 4、动画(gif图片信息) 5、flash 6、视频信息（media player, realplayer）4、静态页面制作 (1)、静态文本（对齐、字体、大小、颜色） (2)

14、、超连接 (3)、图片插入(插入本地图片,插入网图片) (4)、表单数据的提交； (5)、表格使用(单行,多行,表格数据输出的方法；表格布局) (6)、页面布局(表格布局法)172.16.10.252http:/ 网页的标签图片标签的使用图片超连接1、网页里，各个元素背景图片的设置属性：background2、背景图片设置的应用新浪网 1）随即广告 2）图片的轮换建立符合web标准的网站要建立符合web标准的网站，包括以下两个方面：1）、内容标准化设计2）、表现标准化设计内容标准化设计(1)、为页面添加正确的DOCTYPE DOCTYPE是document type的简写。 主要用来说明你用的

15、XHTML或者HTML是什么版本。 浏览器根据你DOCTYPE定义的DTD(文档类型定义)来解释页面代码。 XHTML1.0提供了三种DOCTYPE可选择： (1)过渡型（Transitional ） : 要求非常宽松的DTD；(2)严格型（Strict ） : 要求严格的DTD;(3)框架型（Frameset ） : 专门针对框架页面设计使用的DTD;(2)、声明你的编码语言 为了被浏览器正确解释和通过标识校验， 所有的XHTML文档都必须声明它们所使用的编码语言。代码如下：meta标签用来描述一个网页文档的属性 ,这里声明的编码语言是简体中文GB2312，你如果需要制作繁体内容，可以定义为BIG5。 (3)、用小写字母书写所有的标签 XML对大小写是敏感的，所以，XHTML也是大小写有区别的。 所有的XHTML元素和属性的名字都必须使用小写。 否则你的文档将被W3C校验认为是无效的。例如下面的代码是不正确的： 公司简介 正确的写法是： 公司简介同样的， 改成， 改成等等。(4)、为图片添加 alt 属性 alt属性指定了当图片不能显示的时候就显示供替换文本，但对纯文本浏览器和使用屏幕阅读