Web2.0网页制作技术 Web.ppt

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 WorldWideWeb万维网 是在1989年由英国人TimBerners Lee发明的 TimBerners Lee当时就指出 Web是一个抽象的信息库 也就是说 我们可以通过Web向人们提供信息和信息服务 Berners Lee不仅创建了一个称为超文本传输协议 HyperTextTransferProtocol HTTP 的简单协议 还发明了第一个Web浏览器 叫做WorldWideWeb 浏览器 MicrosoftInternetExplorer当Microsoft发布Windows95时 IE1 0是作为MicrosoftPlus 包的一部分同时发布的 Firefox 1994年12月 Netscape发布了1 0版 第一个盈利性质的浏览器从此诞生 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技术 客户端技术主要包括信息的接收 展现技术 服务端技术主要包括信息的生成 处理 发送技术 客户 1 发出请求 服务器 2 处理请求生成信息 并发送给客户 3 数据接收 4 数据展现 Web2 0的提出 1 提出的依据 O Reilly公司和Media国际公司之间的一次头脑风暴会议的内容 TimO Reilly根据会议头脑风暴内容 于2005年3月发表文章 什么是WEB2 0 TimO Reilly在阐述WEB2 0时的视角是从下一代互联网软件设计模式和商业模式角度去进行阐述和分析 会议之后的一年半的时间里 Web2 0 一词已经深入人心 从Google上可以搜索到950万以上的链接 Web2 0的特点 1 互联网作为平台2 利用集体智慧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的典型网站案例分析4 Web2 0的应用模式特点总结 1 客户既是信息的消费者 也是信息的创造者 也就是说 整个网站的内容有客户产生也由客户消费 2 网站的管理者也成了信息的客户 3 网站的框架由网站技术人员维护与管理 4 网站维护人员大大减少 相对于Web1 0 5 网站的维护成本也大大减少 Web2 0相关技术 1 XMLeXtensibleMarkupLanguage可扩展标记语言 张三20汉族 学生的XML文件 Web2 0相关技术 2 CSS CascadingStyleSheets 层叠样式表主要是指网页的内容以什么格式展现出来 网页的样式层 CSS样式表文件 网页的内容层 网页的最终表现内容 网页分的结构层次关系 Web2 0相关技术 AsynchronousJavascript XML也就是AJAX技术 局部页面刷新技术1 Web2 0 局部页面刷新技术2 新浪网 淘宝网 AJAX框架现在比较流行的是 ExtJS Web2 0的发展 美国著名科技博客 Web1 0与Web2 0应用模式对照图 动态网页设计语言 htmlphpJspAspAsp NetC NetVb Net网页开发的工具VisualStudioDreamweaver8 Dreamweaver8 VisualStudio2005 网页开发语言与工具 Web服务器1 jspweb服务器Tomcat2 asp asp NetWeb服务器IIS3 phpweb服务器apachehttp www fleaphp org Web网页设计标准 1 什么是web标准Web标准是由W3C WorldWideWebConsortion 和其他标准组织制定的一套规范集合 Web标准不是某一个标准 而是一系列标准的集合 网页由三部分组成 所以也包括三个方面的标准 1 结构 Structure 结构化标准语言XHTML XML2 表现 Presentation 表现标准语言CSS3 行为 Behavior 行为标准主要包括对象模型 DOMDocumentObjectModel JavaScript VBScript等 2 采用Web标准的好处1 文件下载和网页显示速度更快 2 大大提高搜索引擎的搜索速度 3 内容能够被更广泛的设备访问 例如 手机等 4 用户能够很容易更换页面的显示风格 CSS 5 网站更加容易维护 成本降低 6 版本修改方便 不需要变动网页的内容 3 网页的表现和内容分离的实现 1 内容 Content 内容是页面实际要传达的真正信息 包括数据 文挡或者图片等 2 结构 Structure 结构就是对网页内容进行整理和分类 利用结构化标准语言使网页内容更加具有逻辑性和易用性 1 HTML 2 XML ExtensibleMarkupLanguage 可扩展标记语言 XML最初设计的目的是弥补HTML的不足 后来逐渐用于网络数据的转换和描述 推荐使用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是DocumentObjectModel 文档对象模型 2 Script 脚本语言 JavaScript VBScript 网页分层样例 1 网页的内容 2 网页的内容 结构 3 网页的内容 结构 表现 网页的组成 Thisismyfirsthomepage Thistextisbold 1 这个文件的第一个Tag是 这个Tag告诉你的浏览器这是HTML文件的头 文件的最后一个Tag是 表示HTML文件到此结束 2 在和之间的内容 是Head信息 Head信息是不显示出来的 你在浏览器里看不到 但是这并不表示这些信息没有用处 比如你可以在Head信息里加上一些关键词 有助于搜索引擎能够搜索到你的网页 3 在和之间的内容 是这个文件的标题 你可以在浏览器最顶端的标题栏看到这个标题 4 在和之间的信息 是正文 在和之间的文字 用粗体表示 顾名思义 就是bold的意思 HTML文件看上去和一般文本类似 但是它比一般文本多了Tag 比如 等 通过这些Tag 可以告诉浏览器如何显示这个文件 网页的组成元素 1 文本2 图片 bmp jpg gif 3 超连接4 动画 gif图片信息 5 flash6 视频信息 mediaplayer realplayer 4 静态页面制作 1 静态文本 对齐 字体 大小 颜色 2 超连接 3 图片插入 插入本地图片 插入网图片 4 表单数据的提交 5 表格使用 单行 多行 表格数据输出的方法 表格布局 6 页面布局 表格布局法 172 16 10 252 HTML教程网址 HTML视频学习 网页的标签 图片标签的使用图片超连接 1 网页里 各个元素背景图片的设置属性 background 2 背景图片设置的应用新浪网1 随即广告2 图片的轮换 建立符合web标准的网站要建立符合web标准的网站 包括以下两个方面 1 内容标准化设计2 表现标准化设计 内容标准化设计 1 为页面添加正确的DOCTYPE DOCTYPE是documenttype的简写 主要用来说明你用的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属性指定了当图片不能显示的时候就显示供替换文本 但对纯文本浏览器和使用屏幕阅读机的用户来说是至关重要的 只有添加了alt属性 代码才会被W3C正确性校验通过 象下面这样的写法毫无意义 正确的写法 5 给所有属性值加引号 在HTML中 你可以不需要给属性值加引号 但是在XHTML中 它们必须被加引号 例 height 100 而不能是height 100 6 关闭所有的标签 在XHTML中 每一个打开的标签都必须关闭 HTML可以接受不关闭的标 XHTML就不可以 6 用id属性代替name属性 HTML4 0 1中为a frame iframe img等定义了name属性 在XHTML里name属性是不能被使用的 应该使用id属性 2 表现标准化设计这个放在CSS样式表里中进行讲述 网页的布局 1 网页的头2 网页体3 网页的尾注意与网页代码里的的区别 1 使用表格来布局网页 2 网页框架的使用 3 的使用在一个网页里嵌入另外一个网页 简单介绍JavaScript语言 一 JavaScript语言加入在这里编写JavaScript二 JavaScript在页面打印信息document write 第一javascript程序 Javascript操作表单里的元素 1 button2 checkbox3 hidden4 text5 password6 submit7 reset 表单的使用1 action2 method post get 1 数据的检验2 表单的分支提交onsubmit mySubmit this if form Ref 0 checked form action 1 html else form action 2 html form submit 3 用任何元素提交表单document form submit document form reset 基于javaScript来计算document form1 x valuedocument getElementById x 3 基于网页形式的计算器设计 基于Jsp获取表单提交的数据函数 request getParameter x 4 基于网页形式的计算器设计 5 基于网页形式的计算器设计 进度条的实现 2 歌曲播放页面的制作 functionsetmusic music varaaa document getElementById player1 innerHTML 在路上Burning 1 登陆页面的制作2 注册页面的制作3 基于网页形式的计算器设计4 静态页面制作 Web页面设计示例 1 登陆页面的制作 1 登陆页面设计 2 登陆信息验证 3 登陆信息提交 4 登陆信息与数据库进行比较 5 登陆结果显示 页面跳转1 用html2 用javascriptlocation href main html 表单里的元素数据的提交与接收这里要用到网络编程语言了AspPhpC jsp 2 注册页面的制作 1 注册页面设计 2 注册信息验证 3 注册信息提交 4 注册信息进库 Jsp网页开发 在html中直接写java程序 1 随即广告一 通过JavaScript二 网页编程语言2 图片的轮换一 通过JavaScript 1 基于jsp网页形式的运算器设计 Request对象客户端的请求信息被封装在request对象中 通过它才能了解到客户的需求 然后做出响应 客户提交的一些属性request getParameter 属性名 客户端IP地址 getRemoteAddr 客户端主机名 getRemoteHost 用的协议类型及版本号 getProtocol 页面的文档类型 getContentType Session对象 客户和服务器之间的会话信息封状成Session对象 可以使用Session对象存储特定用户会话所需的信息 这样 当用户在应用程序的Web页之间跳转时 存储在Session对象中的变量将不会丢失 而是在整个用户会话中一直存在下去 4 网页计数器制作 1 读文件BufferedReaderfile BufferedReader对象 用于读取StringnameOfTextFile C count txt file newBufferedReader newFileReader nameOfTextFile StringreadStr null readStr file readLine 2 写文件PrintWriterpw newPrintWriter newFileOutputStream nameOfTextFile pw println writeStr pw close JavaScript基本数据类型在JavaScript中四种基本的数据类型 1 数值 整数和实数 2 字符串型 用 号或 括起来的字符或数值 3 布尔型 使True或False表示 4 空值 JavaScript语法 JavaScript常量整型常量JavaScript的常量通常又称字面常量 它是不能改变的数据 其整型常量可以使用十六进制 八进制和十进制表示其值 实型常量实型常量是由整数部分加小数部分表示 如12 32 193 98 布尔值布尔常量只有两种状态 True或False 它主要用来说明或代表一种状态或标志 以说明操作流程 它与 是不一样的 可以用 或 表示其状态 而JavaScript只能用True或False表示其状态 字符型常量使用单引号 或双引号 括起来的一个或几个字符 如 ThisisabookofJavaScript 3245 ewrt234234 等 空值JavaScript中有一个空值null 表示什么也没有 如试图引用没有定义的变量 则返回一个Null值 特殊字符同 语言一样 JavaScript中同样以有些以反斜杠 开头的不可显示的特殊字符 通常称为控制字符 JavaScript变量变量的主要作用是存取数据 提供存放信息的容器 对于变量必须明确变量的命名变量的类型变量的作用域 JavaScript变量命名规则两点 必须是一个有效的变量 即变量以字母开头 中间可以出现数字如test1 text2等 除下划线 作为连字符外 变量名称不能有空格 或其它符号 不能使用JavaScript中的关键字作为变量 如Var int double true不能作为变量的名称 JavaScript变量的申明1 用命令Var作声明varmytest 该例子定义了一个mytest变量 但没有赋予它的值 Varmytest Thisisabook 该例子定义了一个mytest变量 同时赋予了它的值 2 也可以不申明 而在使用时再根据数据的类型来确其变量的类型 如 x 100y 125 xy Truecost 19 5等 其中x整数 y为字符串 xy为布尔型 cost为实型 JavaScript变量的作用域全局变量全局变量是定义在所有函数体之外 其作用范围是整个函数 局部变量 而局部变量是定义在函数体之内 只对其该函数是可见的 而对其它函数则是不可见的 JavaScript运算符双目运算符指具有两个操作数的运算符操作数 运算符操作数 单目运算符是指只有一个操作数操作数操作符 算术运算符1 双目运算符号 加 减 乘 除 取模 按位或 按位与 右移 右移 零填充 2 单目运算符号 取反 取补 递加1 递减1 比较运算符比较运算符它的基本操作过程是 首先对它的操作数进行比较 尔后再返回一个true或False值 有 个比较运算符 大于 大于等于 等于 不等于 布尔逻辑运算符在JavaScript中增加了几个布尔逻辑运算符 取反 与之后赋值 逻辑与 或之后赋值 逻辑或 异或之后赋值 逻辑异或 三目操作符 或 等于 不等于 其中三目操作符主要格式如下 操作数 结果 结果 若操作数的结果为真 则表述式的结果为结果 否则为结果 JavaScript程序控制流1 if条件语句基本格式if 表述式 语句段 else语句段 功能 若表达式为true 则执行语句段 否则执行语句段 2 if语句的嵌套if 布尔值 语句 else 布尔值 语句 elseif 布尔值 语句 else语句 在这种情况下 每一级的布尔表述式都会被计算 若为真 则执行其相应的语句 否则执行else后的语句 For循环语句基本格式for 初始化 条件 增量 语句集 功能 实现条件循环 当条件成立时 执行语句集 否则跳出循环体 说明 初始化参数告诉循环的开始位置 必须赋予变量的初值 条件 是用于判别循环停止时的条件 若条件满足 则执行循环体 否则跳出 增量 主要定义循环控制变量在每次循环时按什么方式变化 三个主要语句之间 必须使用逗号分隔 while循环基本格式while 条件 语句集 该语句与For语句一样 当条件为真时 重复循环 否则退出循环 For与while语句两种语句都是循环语句 使用For语句在处理有关数字时更易看懂 也较紧凑 而while循环对复杂的语句效果更特别 break和continue语句与C 语言相同 使用break语句使得循环从For或while中跳出 continue使得跳过循环内剩余的语句而进入下一次循环 JavaScript函数1 提供结构化的程序模块通常在进行一个复杂的程序设计时 总是根据所要完成的功能 将程序划分为一些相对独立的部分 每部分编写一个函数 从而 使各部分充分独立 任务单一 程序清晰 易懂 易读 易维护 2 为事件驱动提供支持JavaScript函数可以封装那些在程序中可能要多次用到的模块 并可作为事件驱动的结果而调用的程序 从而实现一个函数把它与事件驱动相关联 这是与其它语言不样的地方 JavaScript函数定义Function函数名 参数 变元 函数体 Return表达式 说明 当调用函数时 所用变量或字面量均可作为变元传递 函数由关键字Function定义 函数名 定义自己函数的名字 参数表 是传递给函数使用或操作的值 其值可以是常量 变量或其它表达式 通过指定函数名 实参 来调用一个函数 必须使用Return将值返回 函数名对大小写是敏感的 一 JavaScript示例 1 文字滚动使用标签内容2 图片滚动3 进度条的实现 二 JavaScript常用示例 1 弹出窗口 functionCreateWindow 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 window 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为允许 弹出的窗口之定时关闭控制 注意是加入到page html的HTML中 可不是主页面中首先 将如下代码加入page html文件的区 functioncloseit setTimeout self close 10000 毫秒 然后 再用这一句话代替page html中原有的这一句就可以了 在弹出窗口中加上一个关闭按钮 网页对话框 showModalDialog example04 dialogWidth 400px dialogHeight 300px dialogLeft 200px dialogTop 150px center yes help yes 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设置对话框窗口相对于桌面左上角的to