第7章网页设计基础

第七章

网页基础学习目标网页的基本概念

HTML基础

了解网页制作的常用工具Part1网页的基本概念Internet通俗地讲，Internet（因特网）就是许多功能不同的计算机通过线路连接起来组成的一个世界范围的网络。Internet提供的主要服务Internet提供的服务：WWW服务（网上冲浪）电子邮件服务（Email）即时通信（QQ）文件传输（FTP）电子商务WWWWWW是WorldWideWeb的缩写，也可简写为Web，中文叫做万维网。万维网是虚拟的。它是无数不断变化的、种类不同的文档的集合，这些文档驻留在因特网上的某个地方，都是用某种形式的HTML编写的。Web服务器与浏览器WWW的结构主要分为两个部分，一为服务器端（Server；二为客户端（Client）。这种模式称为客户机/服务器（Client/Server）模式。Web服务器：将网页资源有机地组织到一起，供用户通过浏览器下载、浏览。WWW是由遍布在Internet上的称为Web服务器的计算机组成。Web客户端：用来访问Web服务器资源的浏览器，现在最常用浏览器的就是IE。浏览器是获取WWW服务的基础。Web服务器与浏览器HTTPHyperTextTransferProtocol——超文本传输协议浏览Web就是以HTTP在Internet上传送以HTML（HypertextMarkupLanguage）——超文本标记语言编写的网页内容。从而进行信息交流。HTMLHTML(HypertextMarkupLanguage：超文本标记语言)，它是一种规范，它通过标记符（tag）来标记要在网页中显示的各个部分。HTML用于描述超文本的显示方式，从控制文字的颜色、大小，到标识资料的种类为图形文件或者声音等。根据HTML语法所写出来的文件称为HTML文件。HTML文件在保存时，需保存为纯文本文件，并用.html或.htm作为扩展名。网页与网站网页（Webpages）

网页（html文档）是网站的组成部分。它是网站的一个元素，每个网页对应着磁盘上的一个文件，由Web浏览器下载并格式化。

网站（Website）

在逻辑上可视为一个整体的一系列页面的有机集合称为网站（WebSite或Site）。主页主页（Homepage）

一个网站开始点的页面称为“主页”（也叫“首页”）。通常将其命名为index.html（或default.html)。

它和一般的网页一样，也是一个单独的网页文件，可以介绍各种信息，但作为主页，它的主要功能是作为浏览站点其他网页的出发点和其他网页的汇总点。

HTML由国际组织W3C（万维网联盟）制定和维护，目前常用的HTML的版本是4.0（几乎所有浏览器都支持），HTML4.01对HTML4.0作了一些小的修正。本课程的主要内容是以4.0为基础的。如果需要了解HTML的更详细情况，请访问W3C的官方网站：，可以从该网站中获得最新的HTML规范。HTML版本HTML和CSS老板本的HTML将内容、结构和格式化指令组合在一个文档中，这虽然比较简单，但是不够强大。W3C设计了一个新系统，在这个系统中，格式化指令可以与内容和结构分开保存，因此可以根据需要应用于单一段落或网页，甚至整个网站。这个系统就称为CSS（层叠样式表）本课程主要介绍使用HTML和CSS技术来编写网页。CSS层叠样式表CSS是CascadingStyleSheet的缩写。译作「层叠样式表」。是用于控制网页元素的显示方式样式表的宗旨就是将结构(内容)和格式分离CSS也是一种标记语言，有很多属性来源于HTML，它也需要通过浏览器解释执行。XML和XHTML从外表来看，XML与HTML很相似，它们都是由标记、属性和值组成的。XML是一种用来创建其他语言的语言。W3C用XML重写了HTML，被称为XHTML，它具有HTML和XML两者的优点。这种新语言具有HTML的所有特性，因此所有浏览器都能够理解它。统一资源定位器（URL）URL的全文为UniformResourceLocator，译为统一资源定位器URL可分为四部分：

协议://主机名/地点/文件名协议：说明数据传输的方式（服务类型）。常见的服务协议有：http、ftp、file、mailto等。主机名：指的是服务器的地址，可以是IP地址或域名。地点：指的是在服务器中网页所在的目录。文件名：指的是要浏览的网页文件名。URL举例

长沙理工大学的网址：http:///pub/cslg/index.htm

等价于：http:///pub/cslg/Web服务器及其工作原理

Web服务器负责对来自客户的请求做出回答，并且负责管理信息、寻找信息和传递信息。常见的Web服务器软件有：IIS（Internetinformationserver）ApacheTomcat浏览网页的工作过程用户通过浏览器发出请求；WEB服务器接到请求后选择相应的网页发给用户的浏览器；浏览器接收到网页文件（HTML文件）后，根据HTML标记符解释和显示各种内容。网页技术概况目前的网页技术，大致可分为三个方面静态网页（HTML、CSS）：仅展示信息静态网页是用HTML编写，扩展名为.htm或.html。静态网页只能单纯地在网页中展示文字与图片，它是所有网页的基础技术。网页美工（Flash、Fireworks）动态网页（JavaScript/VBScript、ASP、JSP、PHP等）：可实现交互功能网页编辑和美化工具网页编辑（1）超文本标识语言（HTML）（2）Dreamweaver（3）FrontPage网页美化（1）Photoshop（2）Fireworks（3）Flash超文本标识语言（HTML）

HTML（HypertextMarkupLanguage）是一种专门用于Web页制作的编程语言，用来描述超文本各个部分的内容，告诉浏览器如何显示文本，怎样生成与别的文本或图像的链接点。超文本标识语言（HTML）

HTML文档由三种基本组件组成：文本内容，包括页面上出现的标题和段落；对更复杂的内容的偶尔引用，比如链接、图像和Flash动画，等等；以及标记，也就是描述内容和引用应该如何显示的指令。重要的是，这些组件都是由文本组成的。这个基本特性意味着网页可以保存为纯文本格式，可以使用任何文本编辑器进行网页编辑，可以在任何平台上用任何浏览器查看。Dreamweaver

Dreamweaver是由Macromedia公司推出的一款在网页制作方面大众化的软件，它具有可视化编辑界面，用户不必编写复杂的HTML源代码就可以生成跨平台、跨浏览器的网页，不仅适合于专业网页编辑人员的需要，同时也容易被业余网友们所掌握。

Dreamweaver支持动态HTML，是一种可以满足多层次需求、功能强大的可视化专业级网页设计及制作工具。FrontPageFrontPage是由Microsoft公司推出的新一代Web网页制作工具。FrontPage使网页制作者能够更加方便、快捷地创建和发布网页，具有直观的网页制作和管理方法，简化了大量工作。FrontPage界面与Word、PowerPoint等软件的界面极为相似，为使用者带来了极大的方便，Microsoft公司将FrontPage封装入Office之中，成为Office家族的一员，使之功能更为强大。PhotoshopPhotoshop是由Adobe公司开发的图形处理软件，它是目前公认的PC机上最好的通用平面美术设计软件，它功能完善、性能稳定、使用方便，所以在几乎所有的广告、出版、软件公司，Photoshop都是首选的平面制作工具。FireworksFireworks是由Macromedia公司开发的图形处理工具，它的出现使Web作图发生了革命性的变化。因为Fireworks是第一套专门为制作网页图形而设计的软件，同时也是专业的网页图形设计及制作的解决方案。作为一个图像处理软件，Fireworks能够自由地导入多种格式的图像进行处理。Fireworks还能够自动切割图像、生成光标动态感应的JavaScript程序等等，而且Fireworks具有强大的动画功能和一个相当完美的网络图像生成器。FlashFlash是美国Macromedia公司开发的矢量图形编辑和动画创作的专业软件，它是一种交互式动画设计工具，用它可以将音乐、声效、动画以及富有新意的界面融合在一起，以制作出高品质的网页动态效果。已成为交互式矢量动画的标准。Flash广泛应用于网页动画制作、教学动画演示、网上购物、在线游戏等的制作中。学习HTML的重要性学习网页制作除了学习Frontpage或者Dreamweaver

等工具，还要学习HTML语言，因为一些精细的工作还是需要手工编写部分代码。了解HTML基础知识对学习Frontpage或者是Dreamweaver有一定的帮助，也会为下一步学习ASP/PHP等动态脚本语言打下基础。Part2HTML基础如果在浏览器中任意打开一个网页，然后在窗口中空白位置单击鼠标右键，选择“查看源文件”命令（或者选择“查看”菜单中的“源文件”命令），则系统会启动“记事本”，其中包含一些文本信息。HTML文档中华人民共和国教育部网站中华人民共和国教育部网站

首页源程序这些文本其实就是网页的本质——HTML源代码。HTML（HyperTextMarkupLanguage，超文本标记语言）是表示网页的一种规范（或者说是一种标准），它通过标记符定义了网页内容的显示。例如，用<table>标记符可以在网页上定义一个表格。网页的本质中华人民共和国教育部

教育管理信息中心网页中华人民共和国教育部

教育管理信息中心网页源程序

超文本是相对普通文本而言的，与普通文本按顺序定位不同，超文本最典型的特点就是文本中包含指向其他位置的链接，通过这些链接使文档组织成了网状结构，如下图所示（这实际上也是WWW信息组织的基本原理）。说明图超文本示意图我们可以把常规意义上的书本理解为普通文本，而把由超链接组织起来的电子文档理解为超文本。超文本示意图在HTML文档中，通过使用标记符可以告诉浏览器如何显示网页，即确定内容的显示格式。浏览器按顺序读取HTML文件，然后根据内容周围的HTML标记符解释和显示各种内容。例如，如果为某段内容添加<H1></H1>标记符，则浏览器会以比一般文字大的粗体字显示该段内容，如下图所示。ＨＴＭＬ标记符图浏览器解释HTML标记符示意标记符与浏览器HTML标签概述HTML并不是一种程序，它是一种控制网页中资料显示的标记语言元素：当用一组HTML标签将一段文字包含在中间时，这段文字与包含文字的HTML标签被称之为一个元素。一个HTML文件由一系列元素组成。元素是HTML文件的重要组成部分，如title（文档标题）、img（图像）、table（表格）等等。HTML标签概述在HTML中，所有的标记符都用尖括号括起来。例如，<html>、<a>。<a

href="">W3School</a><a>元素最重要的属性是href属性，它指定链接的目标。HTML标记符是不区分大小写的。<html>、<Html>和<HTML>没有区别。HTML标签概述绝大多数标记符都是成对出现的，包括开始标记符和结束标记符。某些标记符，例如<BR>，只要求单一标记符号（也可为<BR/>)。开始标记符与结束标记符的区别在于：结束标记符多一个斜杠“/”（不是反斜杠“\”！）HTML标签的属性属性是用来描述对象特征的特性。例如，一个人的身高、体重就是人这个对象的属性。在HTML中，所有的属性都放置在开始标记符的尖括号里，多个属性之间用空格分开，通常也不区分大小写。HTML标签的属性例如，可以用字体标记符和字号属性指定文字的大小。<FONTsize=4color=red>

本行为4号字，颜色为红色。</FONT>Web页的基本结构在HTML语法中，一个元素可以包含另一元素，因此，整个HTML文件就像是一个大元素，包含了许多小元素。

在HTML文件中，最外层的元素是<html>标签，它包含两个主要的子元素，这两个子元素是由<head>标签与<body>标签建立.<head>标签所建立的元素的内容为文件标题<body>标签所建立的元素内容为文件主体。HTML文档结构下面我们开始编写一个HTML文档。<html><head><title>第一个HTML示例</title></head><body>HTML的基本结构。

</body></html>在浏览器上的显示结果从上述代码中我们可以看出HTML文档的基本结构如下图所示：网页文件命名*.htm或*.html无空格无特殊符号（例如&符号），只可以有下划线“_”，只可以为英文、数字区分大小写（为避免出错，最好全用小写）首页文件名默认为：index.htm或index.htmlHEAD标签首部标记<HEAD>和</HEAD>位于Web页的开头其中不包括Web页的任何实际内容，而是提供一些与Web页有关的特定信息。HEAD标签首部标记也可包含其它元素。例如，样式表（CSS）定义位于<STYLE>和</STYLE>之间；

脚本定义位于<SCRIPT></SCRIPT>之间;