与网页有关的基本.ppt

第1章 与网页有关的基本概念 网页（Web Page）听起来是一个很难懂的概念，极其 抽象，看得见摸不着。现代信息化的社会，无论是通过家庭 个人电脑，还是公共场所的网吧，都可以在互联网上冲浪。 互联网上看到的就是网页，它是由若干种代码编写的文件形 式，上面有图片、音乐、视频等丰富的资源。在开始学习 CSS布局之前，首先来了解一下网页的组成部分以及各部分 的作用。 1.1 网页的基本构成 网页就是在电脑的浏览器中呈现的一个个页面。如果把一 个网站比作一本书，那么网页就是这本书中的一页。 从网页的主要构成说起，一个标准的网页一般由4大部分 组成：内容、结构、表现和行为。内容是网页中要传达的纯粹 的信息，例如网页中所显示的文字、数据、图片等；结构是使 用结构化的方法对网页中用到的信息进行整理和分类，使内容 更具有条理性、逻辑性和易读性；表现是使用表现技术对已经 被结构化的信息进行显示上的控制，例如版式、颜色和大小等 样式的控制；行为就是网页的交互操作。 1.2 网页的结构设计HTML与XHTML 用于网页的结构化设计语言有HTML、XHTML和 XML等。使用这样的语言代码，可以将网页的文字、图片 或数据等信息进行分类、排版，最终呈现给浏览者。本节主 要介绍HTML、XHTML的基本概念及它们的区别。 1.2.1 认识HTML HTML（Hyper Text Mark-up Language）为超文本标 记语言，是网页的一个重要构成，主要负责将网页内容进行 格式化，使内容更具逻辑性。例如下面的HTML代码。 HTML网页 这是HTML网页这里的文字是粗体 1.2.2 认识XHTML 讲到XHTML，首先应该了解什么是XML，因为 XHTML是基于XML的一种标准化结构语言。下面来了解一 下XML和XHTML的区别。 1XML 2XHTML 1.2.3 制作一个简单的XHTML网页 现在尝试着制作一个简单的使用XHTML编写的网页， 这里可以先不用知道“”及里面的字母所代表的含义。 1_1 这是第一个XHTML网页 1.2.4 XHTML的优势 XHTML作为XML应用程序，本质上只是HTML 4.0的 重新诠释。它采用HTML的编程语言和XML的语法结构， 是网站向XML过渡的第一步。根据W3C概括，XHTML的 主要优点有以下7点。 1可扩展性 2互用性和可携带性 3推广标准化 4提高访问量 5优化压缩网页 6加强实例站点 7提高更多工具的可用性 1.3 CSS入门 本节将介绍CSS基本概念以及CSS的特点和优势。在理 论性地阐述CSS这一个抽象的概念之前，先感性地体验CSS 所带来的视觉效果。 1.3.1 感性体验CSS的魅力 如图所示是没有添加CSS的XHTML文件在浏览器中的 预览效果。 1.3.2 CSS的概念 CSS是Cascading Style Sheets的简称，翻译为“层叠样 式单”或“级联样式单”，又简称“样式表”。 为了使网页在视觉上可以有更多元的表现，W3C在 1996年推出了CSS 1.0。1998年W3C正式推出了CSS 2.0。虽 然现在CSS 3.0也已经被推出，但仍然处在实验阶段。CSS 2.1是W3C现在推荐使用的。 1.3.3 CSS的特点 且不说过去的网页缺少动感，就是在网页内容的排版 布局上也有很多困难，如果不是专业人员或特别有耐心的 人，很难让网页按自己的构思和创意来显示信息。即便是 掌握了XHTML语言精髓的人也要通过多次测试，才能驾驭 好这些信息的排版，过程十分漫长和痛苦。 1.3.4 CSS的优势 1浏览器支持完善 2表现与结构分离 3样式设计控制功能强大 4继承性能优越 1.3.5 发挥CSS的优势 CSS的应用是本书的重点。相对于结构设计来说，表现 层的样式设计变化更丰富，也更难掌握，对于千变万化的网 页设计来说，如何将设计编码成机器识别的样式语言则是 CSS的作用。CSS丰富的样式表现也对设计者提出了要求。 1合理的CSS文件结构 2继承和重用的优势 3设计跨平台的代码 4具有良好可用性的CSS样式设计 5基于DOM的脚本语言来编写交互 1.4 Web标准 Web标准伴随着Web表现层技术的发展一直存在于网 络技术中，从来没有离开过人们的视线。由于Web标准对 网站架构进行了丰富的结构定义和技术约定，现在它已经 不仅仅只是一堆技术指标。而是引领着网站交互式设计的 思想前沿，不仅从网站的代码级设计上带给人们更大的自 由度，更使得人们可以通过符合Web标准的设计思想来打 造高可靠性、高效率以及丰富用户体验的交互平台。 优秀的符合Web标准的网站总是能通过良好的设计提 高网站可用性，从根本上为网站创造价值。本节将介绍 Web标准的概念。 1.4.1 什么是Web标准 Web标准是由W3C和其他标准化组织制定的一套规范 集合，包含一系列标准，例如大家熟悉的HTML、XHTML 、JavaScript、CSS等。Web标准的目的在于创建一个统一 的用于Web表现层的技术标准，以便通过不同浏览器或终端 设备向最终用户展示相同的信息内容。 Web标准即网站标准。目前通常所说的Web标准一般指 网站建设采用基于XHTML语言的网站设计语言，Web标准 中典型的应用模式是“CSS+DIV”。实际上，Web标准并不是 一个标准，而是一系列标准的集合。 1.4.2 Web标准的构成 Web标准由一系列规范组成。由于Web设计越来越趋向 于整体与结构化，目前的Web标准也逐步变为由3大部分组 成的标准集：结构（Structure）、表现（Presentation）和 行为（Behavior）。 1结构 2表现 3行为 1.4.3 Web标准的表现层技术 Web本身由一套非常复杂的技术架构组成，但是其最终目 的是为面向浏览器或应用程序的用户提供一个可视化的、便于 操作的信息交互平台。 而Web表现层技术，指的就是将信息展示给用户并提供给 用户交互行为的技术，可以简单理解为样式和技术层面上是一 堆程序代码，而表面上带给人们的是视觉所看到的东西。 目前由W3C制定的Web标准正是这样的一个表现层技术集 合，并且Web标准是目前唯一跨平台、跨客户端的技术。 1.5 CSS+DIV建设网站 现在互联网越来越流行建设符合Web标准的网站，然而 建设符合Web标准的网站，就要使用CSS样式表和DIV标签 来编写代码。本节首先介绍CSS+DIV的基本概念和使用 CSS+DIV建站的优势。 1.5.1 CSS+DIV的含义 DIV标签是用来为XHTML文档内大块的内容提供结构 和背景的元素。DIV的起始标签和结束标签之间的所有内容 都是用来构成这个块的，其中所包含元素的特性由DIV标签 的属性来控制，或者是通过使用样式表格式化这个块来进行 控制。 CSS+DIV是Web标准中常用的术语之一，通常为了说 明与HTML网页设计语言中的表格（table）定位方式的区别 。因为XHTML网站设计标准中，不再使用表格定位技术， 而是采用CSS+DIV的方式实现各种定位。 1.5.2 CSS+DIV网站设计的优势 XHTML是目前国际上倡导的网站标准设计语言，因为 XHTML网站设计语言具有的基本特点，这种CSSDIV模 式的网站设计具有一定的优势。 首先，CSS的极大优势表现在简洁的代码。这对一个大 型网站来说，可以节省大量带宽，而且众所周知，搜索引擎 喜欢简洁的代码