第1章与网页有关的基本.pptVIP

第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 head titleHTML网页/title /head body 这是HTML网页b这里的文字是粗体/b /body /html 1.2.2 认识XHTML 讲到XHTML，首先应该了解什么是XML，因为XHTML是基于XML的一种标准化结构语言。下面来了解一下XML和XHTML的区别。 1．XML 2．XHTML 1.2.3 制作一个简单的XHTML网页 现在尝试着制作一个简单的使用XHTML编写的网页，这里可以先不用知道“ ”及里面的字母所代表的含义。 html head title1_1/title /head body b这是第一个XHTML网页/b /body /html 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标准的设计思想来打造高可靠性、高效率以及丰富用户体验