1、第一章 网页设计基础知识课题名称：第一章教学目标：了解并掌握网络的一些常用术语，了解网页的基本元素，了解常用的网页制作工具，掌握网页布局的基本类型，了解常用的网页布局技术，了解网站建设的 基本流程。重 点：理解部分网络术语的区别，并掌握网页布局的基本类型难 点：网络术语的区别和网页布局技术教学方法：启发式、比较式教学手段：多媒体技术1.1 网络与网页的基础知识1.1.1 网络知识进行课前提问：1）什么是网页，什么是网站，两者的联系与区别？2）internet 与 intranet 是同样的意思吗？Internet 与 www 的关系？回答 1：网页，是网站中的一页，通常是 HTML 格式（文件
2、扩展名为.html 或.htm 或.asp 或.aspx 或.php 或.jsp 等）。网页通常用图像档来提供图画。网页要使用网页浏览器来阅读。网页是构成网站的基本元素，是承载各种网站应用的平台。通俗的说，您的网站就是由网页组成的。如果您只有域名和虚拟主机而没有制作任何网页的话，您的客户仍旧无法访问您的网站。网页实际是一个文件，它存放在世界某个角落的的某一台计算机中，而这台计算机必须是与互联网相连的。网页经由网址（ URL ）来识别与存取，当我们在浏览器输入网址后，经过一段复杂而又快速的程序，网页文件会被传送到你的计算机，然后再通过浏览器解释网页的内容，再展示到你的眼前。构成网页的元素: 文字
3、与图片是构成一个网页的两个最基本的元素。你可以简单的理解为：文字，就是网页的内容，图片，就是网页的美观。除此之外，网页的元素还包括动画、音乐、程序等等。在网页上点击鼠标右键，选择菜单中的 “ 查看源文件 ” ，就可以通过记事本看到网页的实际内容。可以看到，网页实际上只是一个纯文本文件，它通过各式各样的标记对页面上的文字、图片、表格、声音等元素进行描述（例如字体、颜色、大小），而浏览器则对这些标记进行解释并生成页面，于是就得到你现在所看到的画面。所谓网站(Website)，就是指在网际网路（因特网）上，根据一定的规则，使用 HTML 等工具制作的用於展示特定内容的相关网页的集合。简单地说，网站是
4、一种通讯工具，就像布告栏一样，人们可以通过网站来发布自己想要公开的资讯（信息），或者利用网站来提供相关的网路服务（网络服务）。人们可以通过网页浏览器来访问网站，获取自己需要的资讯（信息）或者享受网路服务 回答 2：Internet 也称因特网或国际互联网，是 20 世纪 70 年代由美国军方的ARPAnet（阿帕网，由美国高等研究计划署（Advanced Research Project Agency）创立）发展而来的。Internet 是一个由各种不同类型和规模并各自独立运行和管理的计算机网络组成的覆盖全球范围内的庞大网络，网络间可以畅通无阻地交换信息。组成 Internet 的计算机网络包
5、括局域网（LAN）、地域网（MAN）和广域网（WAN）等。这些网络通过普通电话线、高速率专用线路、卫星、微波和光缆等通讯线路，把不同地域的大学、公司、科研机构以及军事、政府等组织的网络连接起来。Internet 为人们提供了巨大且不断增长的信息资源和服务工具宝库，用户可以利用其提供的各种工具去获取这些信息资源和服务。也可以通过 Internet 将个人或企业部门的信息发布出去，供其他用户访问浏览。Intranet 也称企业内部互联网，用于在公司或组织内传递和处理信息。是 Internet 技术在企业内部或封闭的用户群内的应用，也是一个公司或组织所特有的（不一定与 Internet 有物理上的连
6、接关系）网络。它可以用于提供文档分发、软件发布、访问数据库和培训等服务。虽然 Intranet 也使用了如 Web 页（网页） 、Web 浏览器、 FTP 站点、电子邮件、新闻组和邮件列表等与 Internet 相关的应用程序，但它的作用范围仅限定于公司或组织内部。WWW（ World Wide Web，万维网）是一个基于超级文本的信息查询工具。 WWW 是在Internet 的基础上，由各计算机节点上的 WWW 软件和超级文本格式的信息文件组成的。这些节点称为 WWW 服务器，简称 Web 服务器。海量的信息被存储于 Web 服务器上，用户使用 WWW 时只需提出查询要求，到何处查询及如何查
7、询则由 WWW 自动完成。WWW只是 Internet 上的一种应用，Internet 还包括许多其他服务，如Telnet、FTP、Archie、Wais （广域信息查询系统 Wide Area Information System）、Mail 等。使用这些服务功能必须具备一定的计算机知识，有的还需要用户通过键盘输入命令来完成操作（如 Telnet），这就使许多初级用户望而却步。而 WWW 采用的是图形界面技术，用户只需操纵鼠标，通过 Windows 界面下的 WWW 软件和超级文本就可以完成浏览、查询和下载等各项功能，并通过 Internet 从全世界任何地方找到所希望得到的文本、图像和声音
8、等信息，而且 WWW 可以与其他服务（如 Telnet、FTP 和 Mail 等）实现无缝连接。可以说，WWW 的诞生使用户从繁杂的操作中解脱出来，充分享受计算机带来的便利。（Archie 是一种服务。为从匿名 Ftp 上下载文件，必须知道这个文件所在的 Ftp 主机及目录，所以 Internet提供了 Archie 服务。Archie 类似于 Yahoo 等 WWW 的搜索引擎，用户提交所要查询的内容，Archie 服务器检索自己的数据库，并显示查询的结果。 Archie 可以确定寻找的文件在 Internet 的哪个 FTP 服务器中的哪个子目录下。目前，在 Internet 上约有 30
9、 多个 Archie 服务器，覆盖了遍布在 1200 个 FTP 服 务器中的 200 多万个文件。使用 Archie 寻找文件主要有三种方法。其一是用 telnet 访问 Archie 服务器。其二是使用 Archie 客户程序，Archie 客户程序可在 DOS 系统、UNIX 系统、Microsoft Windows 环境和 X Windows环境中使用。 第三种方法是用 E-mail 来查找文件。除此之外，Gopher 和 Mosaic 也支持 Archie）（WAIS 是一个 Internet 系统，在这个系统中，需要在多个服务器上创建专用主题数据库，该系统可以通过服务器目录对各个服
10、务器进行跟踪，并且允许用户通过 WAIS 客户端程序对信息进行查找。WAIS 用户可以获得一系列的分布式数据库，当用户输入一个对某一个数据库进行查询的信息时，客户端就会访问所有与该数据库相关的服务器。访问的结果提供给用户的是满足要求的所有文本的描述，此时用户就可以根据这些信息得到整个文本文件了。WAIS 使用的是自己的 Internet,这个 ”符号里，并且大部分是成对出现的。（6）ASP（Active Server Pages，动态服务器主页）是 Microsoft 公司在 1996 年底推出的一种运行于服务器端的 Web 应用程序开发技术，可以运行于 Windows 98（PWS）/Win
11、dows NT（IIS）/Windows 2000（IIS）/Windows XP（IIS）/Windows 2003（IIS）平台。ASP 既不是一种语言，也不是一种开发工具，而是一种内含于 IIS/PWS 之中的集成 Script 语言（如 VBScript、JavaScript）到 HTML 主页的服务器端的脚本语言环境，其主要功能是为生成动态的、交互的 Web 服务器应用程序提供一种功能强大的方式或技术。因此可以说，ASP 是一种类似于 HTML、Script 与 CGI 的结合体，但是其运行效率却比 CGI 更高，程序编制比 HTML 更方便且更有灵活性，程序安全及保密性也比 Scr
12、ipt 好。ASP 文件的扩展名为“.asp”，其中包括 HTML 标记、文本和脚本语句，其脚本语句代码包含于“”之间。Internet Information Services（IIS，互联网信息服务） ，是由微软公司提供的基于运行Microsoft Windows 的互联网基本服务。最初是 Windows NT 版本的可选包，随后内置在Windows 2000、Windows XP Professional 和 Windows Server 2003 一起发行，但在普遍使用的 Windows XP Home 版本上并没有 IIS。PWS 全 称 为 Personal Web Server，
13、 是 微 软 开 发 的 个 人 网 站 服 务 器 ， 主 要 应 用 于 解决 个 人 信 息 共 享 和 Web 开 发 。 它 是 一 个 桌 面 形 的 Web 服 务 器 ， 使 用 它 可 以 自 动 创建 个 性 化 主 页 ， 以 拖 放 的 方 式 发 布 文 档 ， 在 它 的 帮 助 下 ， 我 们 可 以 快 速 简 便 地 进 行 Web 站 点 设 置 。VBScript 脚本语言是 ASP 的默认语言，它是 VB 家族的最新成员，可以说 VBScript 是 VB的子集，也可以说 VBScript 是为了符合 Internet 小而精的条件而从 VB 之中萃取出
14、精华功能的程序语言。其语法规则、函数与 VB 很相似，但功能上有所限制。VBScript 可以在客户端使用，也可以在服务器端使用，这是程序本身决定的。但是并不是所有的浏览器都支持 VBScript，因此一般在安装 IIS 的服务器端使用 VBScript。JavaScript 是一种跨平台、基于对象的脚本语言，由 JavaScript 核心语言、JavaScript 客户端扩展、JavaScript 服务器端扩展 3 部分组成。核心语言部分在客户端、服务器端均可使用，包括了 JavaScript 的基本语法（如操作符、语句、函数）以及一些内置对象等。客户端扩展部分是在 JavaScript 核
15、心语言的基础上扩展了控制浏览器的对象模型 DOM。这样，在客户端编写脚本时，用户就可以方便地对页面中的对象进行控制，完成许多功能。服务器端扩展部分是在 JavaScript 核心语言的基础上扩展了在服务器端运行需要的对象，这些对象同样可以与 Web 数据库连接，对服务器上的文件进行控制，在应用程序之间交换信息，从而实现与 CGI 同样的功能。1.1.2 网页知识网页理解成两种状态：一种是源代码状态，这是未经浏览器端、服务器端处理的原始状态；另一种是在浏览器端显示的状态，主要包括背景、文本、按钮、图像、表格、表单、动画和视频等几类元素。（1） 静态网页静 态 网 页 是 相 对 于 动 态 网
16、页 而 言 ， 是 指 没 有 后 台 数 据 库 、 不 含 程 序 和 不 可 交 互 的 网 页 。你 编 的 是 什 么 它 显 示 的 就 是 什 么 、 不 会 有 任 何 改 变 。 静 态 网 页 相 对 更 新 起 来 比 较 麻 烦 ，适 用 于 一 般 更 新 较 少 的 展 示 型 网 站 。 在 网 站 设 计 中 ， 纯 粹 HTML 格 式 的 网 页 通 常 被称 为 “静 态 网 页 ”， 早 期 的 网 站 一 般 都 是 由 静 态 网 页 制 作 的 。 静 态 网 页 的 网 址 形 式 通 常为 : 也 就 是 以 .htm、 .html、 .sht
17、ml、 .xml 等 为 后 后 缀的 。 在 HTML 格 式 的 网 页 上 ， 也 可 以 出 现 各 种 动 态 的 效 果 ， 如 .GIF 格 式 的 动 画 、FLASH、 滚 动 字 母 等 ， 这 些 “动 态 效 果 ”只 是 视 觉 上 的 。静 态 网 页 的 特 点 简 要 归 纳 如 下 ： :1)静 态 网 页 每 个 网 页 都 有 一 个 固 定 的 URL， 且 网 页 URL 以 .htm、 .html、 .shtml等 常 见 形 式 为 后 缀 ， 而 不 含 有 “?”;2)网 页 内 容 一 经 发 布 到 网 站 服 务 器 上 ， 无 论 是
18、否 有 用 户 访 问 ， 每 个 静 态 网 页 的 内 容都 是 保 存 在 网 站 服 务 器 上 的 ， 也 就 是 说 ， 静 态 网 页 是 实 实 在 在 保 存 在 服 务 器 上 的 文 件 ，每 个 网 页 都 是 一 个 独 立 的 文 件 ;3)静 态 网 页 的 内 容 相 对 稳 定 ， 因 此 容 易 被 搜 索 引 擎 检 索 ;4)静 态 网 页 没 有 数 据 库 的 支 持 ， 在 网 站 制 作 和 维 护 方 面 工 作 量 较 大 ， 因 此 当 网 站 信息 量 很 大 时 完 全 依 靠 静 态 网 页 制 作 方 式 比 较 困 难 ;5)静
19、态 网 页 的 交 互 性 较 差 ， 在 功 能 方 面 有 较 大 的 限 制 。（ 2） 动 态 网 页动态网页是与静态网页相对应的，也就是说，网页 URL 的后缀不是.htm、.html、.shtml 、.xml 等静态网页的常见形式，而是以.aspx.asp、.jsp、.php、.perl、.cgi等形式为后缀，并且在动态网页网址中有一个标志性的符号“?”如有这样一个动态网页的地址为: http:/ 对搜索引擎检索存在一定的问题，搜索引擎一般不可能从一个网站的数据库中访问全部网页，或者出于技术方面的考虑，搜索蜘蛛不去抓取网址中“?”后面的内容，因此采用动态网页的网站在进行搜索引擎推广
20、时需要做一定的技术处理才能适应搜索引擎的要求。静态网页，动态网页主要根据网页制作的语言来区分： 静态网页使用语言：HTML（超文本标记语言） 动态网页使用语言：HTML ASP 或 HTMLPHP 或 HTMLJSP 等静态网页与动态的区别 程序是否在服务器端运行，是重要标志。在服务器端运行的程序、网页、组件，属于动态网页，它们会随不同客户、不同时间，返回不同的网页，例如ASP、PHP、JSP、ASP.net、CGI 等。运行于客户端的程序、网页、插件、组件，属于静态网页，例如 html 页、Flash、JavaScript 、VBScript 等等，它们是永远不变的（下面介绍几种目前颇受关注
21、的新技术： 1、PHP 即 Hypertext Preprocessor(超文本预处理器)，它是当今 Internet 上最为火热的脚本语言，其语法借鉴了 C、Java 、PERL 等语言，但只需要很少的编程知识你就能使用 PHP 建立一个真正交互的 Web 站点。 它与 HTML 语言具有非常好的兼容性，使用者可以直接在脚本代码中加入 HTML 标签，或者在HTML 标签中加入脚本代码从而更好地实现页面控制。PHP 提供了标准的数据库接口，数据库连接方便，兼容性强；扩展性强；可以进行面向对象编程。 2、ASP 即 Active Server Pages，它是微软开发的一种类似 HTML(超文
22、本标识语言) 、Script( 脚本) 与CGI(公用网关接口)的结合体，它没有提供自己专门的编程语言，而是允许用户使用许多已有的脚本语言编写 ASP 的应用程序。 ASP 的程序编制比 HTML 更方便且更有灵活性。它是在 Web 服务器端运行，运行后再将运行结果以 HTML 格式传送至客户端的浏览器。因此 ASP 与一般的脚本语言相比，要安全得多。 ASP 的最大好处是可以包含 HTML 标签，也可以直接存取数据库及使用无限扩充的 ActiveX 控件，因此在程序编制上要比 HTML 方便而且更富有灵活性。通过使用 ASP 的组件和对象技术，用户可以直接使用 ActiveX 控件，调用对象
23、方法和属性，以简单的方式实现强大的交互功能。 但 ASP 技术也非完美无缺，由于它基本上是局限于微软的操作系统平台之上，主要工作环境是微软的 IIS 应用程序结构，又因 ActiveX 对象具有平台特性，所以 ASP 技术不能很容易地实现在跨平台 Web服务器上工作。 3、JSP 即 Java Server Pages，它是由 Sun Microsystem 公司于 1999 年 6 月推出的新技术，是基于 Java Servlet 以及整个 Java 体系的 Web 开发技术。 JSP 和 ASP 在技术方面有许多相似之处，不过两者来源于不同的技术规范组织，以至 ASP 一般只应用于 Win
24、dows NT/2000 平台，而 JSP 则可以在 85以上的服务器上运行，而且基于 JSP 技术的应用程序比基于 ASP 的应用程序易于维护和管理，所以被许多人认为是未来最有发展前途的动态网站技术。 虽然以上 3 种新技术在制作动态网页上各有特色，但目前仍都在发展中，不够普及。对于广大个人主页的爱好者、制作者来说，建议尽量少用难度大的 CGI 技术。如果您对微软的产品情有独钟，采用 ASP技术会让您得心应手；如果是 Linux 的追求者，运用 PHP 技术在目前是最明智的选择。当然，不要忽略了 JSP 技术哟！）（3） 包含数据库的动态网页具体过程看课本 P6.1.1.3 网页的基本构成元
25、素网页是全球广域网上的基本文档，网页可以是文档的一部分，也可以独立存在。网页是由一些基本元素组成的，下面就来介绍这些元素。 文本 网页中的信息主要是以文本为主的。在网页中可以通过字体、大小、颜色、底纹、边框等来设置文本的属性。这里指的文字是文本文字，而并非图片中的文字。在网页制作中，文字都可以方便地设置成各种字体和大小，但是这里还是建议用于正文的文字一般不要太大，也不要使用太多的字体，中文文字使用宋体、9 磅或 12 像素左右即可。因为过大的字在显示器中显示时，线条不够平滑。颜色也不要使用得太过斑驳，以免造成丑女浓妆艳抹的恶俗效果。大段文本文字的排列，建议参考一些优秀的杂志或报纸。 图像 今天
26、看到的丰富多彩的网页，都是因为有了图像，可见图像在网页中的重要性。用于网页上的图片一般为 JPG 和 GIF 格式的，即以.jpg(或.jpeg)和 .gif 为后缀的文件。 注意：虽然图像在网页中不可或缺，但也不能太多，因为图像的下载速度较慢，如果网页上插入了过多的图像，则可能会很长时间打不开，这样浏览者一般就不会再继续等下去了。而且网页上如果放置了过多的图片，会显得很乱，有喧宾夺主之势。 超链接 超链接是网站的灵魂，从一个网页指向另一个目的端的链接。例如指向另一个网页或相同网页上的不同位置。这个目的端通常是另一个网页，但也可以是一幅图片、一个电子邮件地址、一个文件、一个程序或者也可以是本页
27、中的其它位置。超链接可以是文本或者图片。超链接广泛地存在于网页的图片和文字中，提供与图片和文字相关内容的链接，在超链接上单击鼠标左键，即可链接到相应地址(url)的网页。有链接的地方，鼠标指上时会变成小手形状。可以说超链接正是 Web 的主要特色。 表格 表格是网页排版的灵魂。使用表格排版是现在网页的主要制作形式。通过表格可以精确地控制各网页元素在网页中的位置。表格并非指网页中直观意义的表格，范围要更广一些。它是 html 语言中的一种元素，表格主要用于网页内容的排列，组织整个网页的外观，通过在表格中放置相应的图片或其它内容，即可有效地组合成符合设计效果的页面。有了表格的存在，网页中的元素得以
28、方便地固定在设计的位置上。一般表格的边线不在网页中显示。表单 表单是用来收集站点访问者信息的域集。站点访问者填写表单的方式是输入文本、单击单选按钮与复选框，以及从下拉菜单中选择选项。在填写好表单之后，站点访问者便送出所输入的数据，该数据就会根据所设置的表单处理程序，以各种不同的方式进行处理。 GIF 动画 动画是网页上最活跃的元素，通常制作优秀、创意出众的动画是吸引浏览者的最有效的方法。不过现在的网页往往不是缺乏动画，而是太多动画让人眼花缭乱，无心细看。这就对动画制作的要求越来越高。动画制作的手段有很多，技术发展也很快。尽管各种形式的动画使用形式不一，GIF 动画仍然是占据主体地位的网页动画之
29、一。GIF 动画的标准简单，在各种类、各版本的浏览器中都能播放。 Flash 动画 Macromedia 的 Flash 虽然出现时间不长，但已经成为最首要的 Web 动画形式之一。Flash不仅比 DHTML 易学的多,而且有很多重要的动画特征，如关键帧补间、运动路径、动画蒙版、形状变形和洋葱皮等。利用这个多才多艺的程序,不仅可以建立 Flash 电影，而且可以把动画输出为 QuickTime 文件、GIF89a 文件或其它许多不同的文件格式(PICT、JPEG、PNG) 等。 框架 框架是网页的一种组织形式，将相互关联的多个网页的内容组织在一个浏览器窗口中显示。例如我们可以在一个框架内放置
30、导航栏，另一个框架中的内容可以随着单击导航栏中的链接而改变，这样我们只要制作一个导航栏的网页即可，而不必将导航栏的内容复制到各栏目的网页中去。音频实际上，在 Internet 中运用最早和最多的多媒体文件就是音频文件。Web 网页上使用的音频文件类型也比视频文件类型要丰富得多，目前，网络上的音频文件得到了空前的应用，而且类型多样。MP3 具有压缩程度高、音质好的特点，是目前最为流行的一种音乐文件，在网上有很多可以在线收听或下载 MP3 的站点。OGG 是一种新的音频压缩格式，类似于MP3 等现有的音乐格式。ASF 和 WMA 都是 Microsoft 公司针对 Real 公司开发的新一代网上流
31、式数字音频压缩技术，这种压缩技术的特点是同时兼顾了保真度和网络传输需求，所以具有一定的先进性，由于 Microsoft 公司的影响力，这种音频格式现在正获得越来越多的支持。WAV 是 Microsoft Windows 系统提供的音频格式，由于 Windows 本身的影响力，这个格式已经成为了事实上的通用音频格式。rm 是目前网络上流行的主流多媒体文件格式之一，该类文件必须使用基于 RealNetworks 公司开发的 RealMedia 引擎的播放器（例如RealPlayer）才能正常播放。 real 格式是 RealNetworks 公司网络音频和视频解决方案，具有很高的压缩比，使用流式（streaming）播放媒体技术，从而使人们能够在网上实时收听音频及收看视频。网页中除了这些最基本的元素，还包括横幅广告、字幕、悬停按钮、日戳、计数器、音频、视频等。
