HTML+CSS网页设计详解.doc

第1章 了 解 网 页 15年前，“网上冲浪”还是一个新兴名词，但随着互联网的飞速发展，如今使用网络已经成为了生活中的一部分。Web 1.0时代，人们只是在网页上浏览信息，而在现在所处的Web 2.0时代，人们可以在网页上和朋友讨论话题、听音乐、看电影、进行电子商务的操作。《纽约时报》专栏作家托马斯·弗里曼在他的《世界是平的》一书中说到：“2000年世界进入了一个新纪元：全球化3.0。世界从小缩成微小，竞赛场地铲平了。” 从本章开始，将介绍一些与互联网相关的常用技术，以及制作网页时通常需要涉及的领域、需要考虑的问题等。本章的知识点很多，但并不难理解，读者千万不要被那些可怕的名词或者代码给吓住。虽然HTML（Hypertext Marked Language，超文本标记语言）标签很多，但是在找到规律后也就容易理解了。事实上，学习HTML不会太难。本章的主要知识点如下。 网页的概念和分类：了解网页的概念，区别静态网页和动态网页的不同。 设计网页的原则和工具：了解开发网页的常用工具。 网页浏览器的工作原理：知道网页浏览器的工作原理，并了解三种常用的浏览器。 HTML、XML（The Extensible Markup Language，可扩展标识语言）和XHTML（The Extensible Hypertext Markup Language，可扩展超文本标识语言）：是构成网页的基础语言，读者需要区分三者概念上的不同之处。 HTML应用：通过本章最后的实例，演示一个简单的HTML页面的开发步骤。 1.1 什么是网页 21世纪是信息化的时代，用户可以在互联网上通过网页浏览信息，如新闻、图片等；也可以通过互联网发布信息，如招聘信息、各种广告等；或者是追赶潮流，加入现今十分流行的博客一族，这些都离不开互联网的“窗户”——网页。下面将介绍网页的相关知识。 1.1.1 网页的概述 知识点讲解：光盘\视频讲解\第1章\网页的概述.wmv 网页其实是存储在计算机上的一个文件，通过互联网将两个不同的地址相连，把人们的信息传达到网络世界的各个角落，可以不受地域限制地互相交流沟通。 所谓互联网，是一种概念，一个虚拟的东西。用户可以通过浏览器浏览新浪、百度等页面，但是不会有人说“浏览互联网”。互联网是指把所有网页链接在一起的巨大信息交流形式，它基于很多协议来体现出它的表现形式。1989年，欧洲粒子物理实验室的科学家们提出了一个分类互联网信息的协议。这个协议极大地推动了互联网的发展和普及，后来它有了一个十分响亮的名字——WWW（World Wide Web），中文又称万维网。可以认为，从20世纪90年代开始，互联网进入了Web 1.0时代。 Web 1.0时代，大部分网页只有文字、图像信息可以浏览，最典型的互联网标志就是门户网站，如新浪、搜狐。从2001年开始，人们认为互联网开始进入Web 2.0时代，这时网页可以包含动画、音频和视频，也可以在网页中进行交流、上传文件，使用完全交互式的程序，开始更注重个人化的网络服务，任何使用网络的用户，都可以参与到网页的制作中。 笼统地说，网页主要由3部分组成：结构、表现和行为。对应的标准也分为3类，其中大部分都是由W3C（World Wide Web协会）所制定，其中包括HTML和CSS（Cascading Style Sheet，层叠样式表）。对于初学者来说，了解网页的制作，一定要分清楚HTML和CSS的不同作用。 说明：HTML标准基于语义学，通过标签来应用语义的过程。使用起来好像是打手语，做一个手势，去告诉对方代表了什么意思。不同的是，这里的手势换成了标签。 例如，使用table，这是一个表格标签，意思是“将在这里放入一个表格”。那么这个表格该如何表现在浏览者的面前呢？例如，它的颜色、边框粗细等。CSS的出现为设计者解决了这些问题，如图1.1和图1.2所示为不同样式的表格。 图1.1 粗边框的表格 图1.2 细边框的表格 图1.1和图1.2中都有一个3×3表格的页面。这样的描述，如同HTML语言所表达的含义，体现出页面上的内容，而在浏览器中的最后显示效果是完全不同的两个表格。图1.1中的表格边框较粗，为黑色；图1.2中的表格边框较细，为绿色（这是因为它们使用了不同的CSS样式表）。所以，HTML表现了页面的结构，而CSS修饰了页面中的内容。如果把制作网页比作设计一间屋子，那么HTML语言的作用是用来明确这个屋子内要放入哪些家具，或者是床、书柜、椅子等，而CSS的作用是改变这些家具的样式。 1.1.2 静态网页 知识点讲解：光盘\视频讲解\第1章\静态网页.wmv 在网站设计中，纯粹的HTML格式网页通常被称为静