与网页有关的基本.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的极大优势表现在简洁的代码。这对一个大型网站来说，可以节省大量带宽，而且众所周知，搜索引擎喜欢简洁的代码