第1章网页设计基础知识ppt课件.ppt

网页设计与制作 第1部分HTML网页设计 1 第1章网页设计基础知识 2 3 1 1网页的基础概念 图1 1使用浏览器软件显示网页 4 网页是由HTML语言 超文本标记语言 或者配合其他语言编写的 通过浏览器编译后供用户获取信息的页面 它又称为Web页 其中可包含文字 图像 表格 动画和超链接等各种网页元素 网站就是一个或多个网页的集合 5 网页的分类 根据不同的分类标准 可以对网页进行如下的分类 按所处位置分类按网页在网站中所处的位置可将网页分为主页和子页两类 打开一个网站时看到的第一个页面就是主页 也称为首页 主页文件的名称一般为index htm或index html 与主页相链接的其他各个页面就称之为子页 6 按表现形式分类按网页的表现形式可将网页分为静态网页和动态网页 网页的分类 7 图1 2服务器与浏览器的关系示意图 8 浏览器 现在浏览器的内核引擎 基本上是四分天下 Trident IE以Trident作为内核引擎 Gecko Firefox是基于Gecko开发 WebKit Safari GoogleChrome 搜狗浏览器的高速内核 傲游3基于Webkit开发 Presto Opera的内核 但由于市场选择问题 主要应用在手机平台 Operamini 9 1 2网页与HTML 图1 3网页的HTML源文件 10 1 3Web标准 WEB标准不是某一个标准 而是一系列标准的集合 网页主要由三部分组成 结构 Structure 表现 Presentation 行为 Behavior 11 1 3Web标准 对应的标准也分三方面 结构化标准语言主要包括XHTML和XML 表现标准语言主要包括CSS 行为标准主要包括对象模型 如W3CDOM ECMAScript等 这些标准大部分由W3C起草和发布 也有一些是其他标准组织制订的标准 比如ECMA EuropeanComputerManufacturersAssociation 欧洲计算机制造联合会 的ECMAScript标准 12 图1 4 结构 表现 和 行为 的关系 13 背景资料 W3C是英文WorldWideWebConsortium的缩写 中文意思是W3C理事会或万维网联盟 W3C于1994年10月在麻省理工学院计算机科学实验室成立 创建者是万维网的发明者TimBerners Lee W3C组织是对网络标准制定的一个非赢利组织 像HTML XHTML CSS XML的标准就是由W3C来定制 W3C会员 大约500名会员 包括生产技术产品及服务的厂商 内容供应商 团体用户 研究实验室 标准制定机构和政府部门 一起协同工作 致力在万维网发展方向上达成共识 W3C是专门致力于创建Web相关技术标准并促进Web向更深 更广发展的国际组织 14 15 W3C组织核心 1 麻省理工学院计算机科学与人工智能实验室2 欧洲信息和数学研究联合会 位于法国 3 日本庆应大学 TimBerners Lee 16 W3C的未来工作重点W3C未来的工作重点仍然一如既往地围绕其长远目标来展开 具体可分为WebServices SemanticWeb 以及这两者结合起来的SemanticWebServices 除此以外 基于各种移动设备 如手机等 的Web访问机制也是目前的研究热点 17 中国的W3C现状 2005年10月 北航成功申请了W3C北京办公室的挂靠资格 成为中国内地第一家也是唯一一家W3C分支办公室 18 ECMA是 EuropeanComputerManufacturesAssociation 的缩写 中文称欧洲计算机制造联合会 是1961年成立的旨在建立统一的电脑操作格式标准 包括程序语言和输入输出的组织 ECMA位于日内瓦 和ISO 国际标准组织 以及IEC 国际电工标准化机构 总部相邻 主要任务是研究信息和通讯技术方面的标准并发布有关技术报告 ECMA并不是官方机构 而是由主流厂商组成的 他们经常与其他国际组织进行合作 ECMA 262ECMAScriptECMAScript是一种由ECMA通过ECMA 262标准化的脚本程序设计语言 是一种脚本在语法和语义上的标准 Javscript JScript ActionScript等脚本语言都是基于ECMAScript标准实现的 19 20 图1 5仅使用HTML定义 结构 的页面效果 21 图1 6使用CSS设定样式之后的效果 22 洞悉主要的Web设计原则以及它们运用的CSS布局技巧 理解CSS设计的精髓 恰当地处理图形和字体来创建界面优美 性能优良且具有强大生命力的网站 23 关于Web2 0 Web2 0设计一种当前很流行的页面设计方案 它是相对Web1 0的新的一类互联网应用的统称 Web1 0的主要特点在于用户通过浏览器获取信息 Web2 0则更注重用户的交互作用 用户既是网站内容的消费者 浏览器 也是网站内容的制造者 24 Web2 0主要特点 1 用户参与网站内容制造 2 web2 0更加注重交互性 3 符合web标准的网站设计 4 web2 0网站与web1 0没有绝对的界限 5 web2 0的核心不是技术而在于指导思想 25 Web2 0相关技术应用 Blog Weblog 博客 网志RSS ReallySimpleSyndication 是站点用来和其他站点之间共享内容的一种简易方式 也叫聚合内容 是一种用来分发和汇集网页内容的XML格式 26 3 Wiki weekeeweekee 一种多人协作的写作工具目前国内著名的维客 wiki 网站维基百科http zh wikipedia org 最强大的多语言版本 百度百科 http www wikipedia org 27 4 网摘 SocialBookmark 提供的是一种收藏 分类 排序 分享互联网信息资源的方式 网摘就是一个放在网络上的海量收藏夹 28 5 SNSSocialNetworkingServices 社会性网络服务SocialNetworkSite 即 社交网站 或 社交网 理论基础 六度分割理论 你和任何一个陌生人之间所间隔的人不会超过六个 29 6 P2P peer to peer 7 IM InstantMessaging 30 1 4网页设计与开发过程 简单来说 网站开发的全过程大致可为策划与定义 设计 开发 测试和发布5个阶段 本节将对开发的流程进行介绍 31 1 4 1基本任务与角色 表1 1网站建设与网页设计流程中的人员角色 32 图1 7网站开发的工作流程 33 1 5HTML基础 超文本标记语言 即HTML HypertextMarkupLanguage 是用于描述网页文档的一种标记语言 HTML是一种规范 一种标准 它通过标记符号来标记要显示的网页中的各个部分 网页文件本身是一种文本文件 通过在文本文件中添加标记符 可以告诉浏览器如何显示其中的内容 34 HTML之所以称为超文本标记语言 是因为文本中包含了所谓 超级链接 点 所谓超级链接 就是一种URL指针 通过激活 点击 它 可使浏览器方便地获取新的网页 这也是HTML获得广泛应用的最重要的原因之一 由此可见 网页的本质就是HTML 通过结合使用其他的Web技术 如 脚本语言 CGI 组件等 可以创造出功能强大的网页 因而 HTML是Web编程的基础 也就是说万维网是建立在超文本基础之上的 35 1993年6月HTML第一版1995年11月HTML2 01996年1月HTML3 21997年12月HTML4 01999年12月HTML4 012000年1月XHTML1 02008年HTML5 0发布工作草案 HTML5有两大特点 首先 强化了Web网页的表现性能 其次 追加了本地数据库等Web应用的功能 36 XHTML1 0 XHTML是TheExtensibleHyperTextMarkupLanguage 可扩展超文本标识语言 的缩写 HTML是一种基本的WEB网页设计语言 XHTML是一个基于XML的置标语言 看起来与HTML有些相象 只有一些小的但重要的区别 XHTML就是一个扮演着类似HTML的角色的XML 所以 本质上说 XHTML是一个过渡技术 结合了部分XML的强大功能及大多数HTML的简单特性 37 XHTML1 0是一种在HTML4 01基础上优化和改进的的新语言 目的是基于XML应用 XHTML是一种增强了的HTML XHTML是更严谨更纯净的HTML版本 它的可扩展性和灵活性将适应未来网络应用更多的需求 XML虽然数据转换能力强大 完全可以替代HTML 但面对成千上万已有的基于HTML语言设计的网站 直接采用XML还为时过早 因此 在HTML4 01的基础上 用XML的规则对其进行扩展 得到了XHTML 所以 建立XHTML的目的就是实现HTML向XML的过渡 目前国际上在网站设计中推崇的WEB标准就是基于XHTML的应用 即通常所说的CSS DIV 38 标记语言语法 内容标记通常都是成对使用的 有一个开始标记就对应有一个结束标记 结束标记只是在开头标记的前面加一个斜杠 当浏览器从服务器接收到HTML文件后 就会解释里面的标记符 然后把标记符相对应的功能表达出来 39 1 5 2XHTML文件结构 XHTML中的标记符区分大小写 它的基本格式为 文档标题XHTML文档的主体部分第1行是DOCTYPE声明 该声明用来将网页标识为XHTML页 并说明网页所遵循的XHTML规范 第2行声明XHTML命名空间 网页内的所有标记都是属于这个命名空间的 40 语法规则 1 XHTML元素必须被正确地嵌套 2 XHTML元素必须被关闭 非空标签必须使用结