20469 网页制作教程电子刊物-电子书免费制作-云展网在线书城

第51页

第 2 章 HTML 简介 41

容，每一对<td>…</td>表示一行，每一对<th>…</th>表示标题单元，每一对<td>…</td>

则表示表格内容单元。

其运行结果如图 2-11 所示。

图 2-11 表格标记实例

2.3.9 框架标记

有时候，为了页面和版面的需要，在同一个页面上同时显示多个 HTML 文件。这时，

就可以使用框架。有关框架的元素有：

<frameset>：定义一个框架容器。

<frame>：定义一个框架，并制定子区所对应的网页地址。

<noframe>：若浏览器不支持框架时，显示相关信息给访问者。

其中<frameset>有 rows 和 cols 两个属性来分别控制多重框架的高度和宽度，既可用百

分比表示，又可用像素来表示，其中的“*”表示除其他部分外所剩余的部分。并且

<frameset>…</frameset>的后半部分“</frameset>”可以省略。

【例 2-12】框架示例。

<html>

<head><title>框架结构示例</title></head>

第52页

42 网页制作教程

该浏览器不支持框架

</noframe>

</frameset>

</html>

其运行结果如图 2-12 所示。

图 2-12 框架标记实例

但要注意，若在一个 HTML 文档中使用了<frameset>标记，就不能再使用<body>标记，

如果在<frameset>定义中使用了<body>标记，则浏览器将只解释<body>包含的内容，而忽

略<frameset>的内容。

2.3.10 其他一些常用标记

1．正文标题

HTML 用<h1>到<h6>这几个标签来定义正文标题，从大到小。每个正文标题自成

一段。

【例 2-13】正文标题示例。

<h1>This is a heading</h1>

<h2>This is a heading</h2>

<h3>This is a heading</h3>

<h4>This is a heading</h4>

<h5>This is a heading</h5>

<h6>This is a heading</h6>

运行效果如图 2-13 所示。

第53页

第 2 章 HTML 简介 43

图 2-13 正文标题实例

2．<div>标记

HTML 的<div>标记是块级元素，它是可用于组合其他 HTML 元素的容器。<div>标

记没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。如

果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。

<div>标记的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。

使用<table>标记进行文档布局不是表格的正确用法。<table>标记的作用是显示表格化的

数据。

【例 2-14】DIV 示例。

<html>

<head>

div#container{width:500px}

div#header{background-color:#99bbbb;}

div#menu{background-color:#ffff99; height:200px; width:100px; float:left;}

div#content{background-color:#EEEEEE;height:200px; width:400px; float:left;}

div#footer {background-color:#99bbbb; clear:both; text-align:center;}

h1 {margin-bottom:0;}

h2 {margin-bottom:0; font-size:14px;}

ul {margin:0;}

li {list-style:none;}

第54页

44 网页制作教程

</style>

</head>

<body>

</div>

<ul>

<li>JavaScript</li>

</ul>

</div>

</div>

</body>

</html>

运行效果如图 2-14 所示。

图 2-14 DIV 布局实例

第55页

第 2 章 HTML 简介 45

3．<span>标记

HTML 的<span> 标记是内联元素，可用作文本的容器。<span> 元素也没有特定的含

义。当与 CSS 一同使用时，<span>标记可用于为部分文本设置样式属性。

本章小结

本文主要介绍了 HTML 的基本概念及其语法。HTML 标记是 HTML 语言的基础。通

过介绍 HTML 标记符，使读者基本了解和掌握使用 HTML 语言设计和制作网页（包括文

字、图像、链接、表格、表单、框架等）的方法。

习题

选择题

1．用 HTML 标记语言编写一个简单的网页，网页最基本的结构是（）。

A．<html><head>…</head><frame>…</frame></html>

B．<html><title>…</title><body>…</body></html>

C．<html><title>…</title><frame>…</frame></html>

D．<html><head>…</head><body>…</body></html>

2．为了标识一个 HTML 文件应该使用的 HTML 标记是（）。

A．<p></p> B．<body></body>

C．<html></html> D．<table></table>

3．下面哪一个属性不是文本的标签属性？（）

A．size B．align C．color D．face

4．关于表格的描述正确的一项是（）。

A．在单元格内不能继续插入整个表格

B．可以同时选定不相邻的单元格

C．粘贴表格时，不粘贴表格的内容

D．在网页中，水平方向可以并排多个独立的表格

5．关于文本对齐，源代码设置不正确的一项是（）。

A．居中对齐：<div align="middle">…</div>

B．居右对齐：<div align="right">…</div>

C．居左对齐：<div align="left">…</div>

第56页

46 网页制作教程

D．两端对齐：<div align="justify">…</div>

6．下面哪一项是换行符标签？（）

A．<body> B．<font> C．<br> D．<p>

7．下列哪一项是在新窗口中打开网页文档？（）

A．_self B．_blank C．_top D．_parent

8．在一个框架组的属性面板中，不能设置下面哪一项？（）

A．边框颜色 B．子框架的宽度或者高度

C．边框宽度 D．滚动条

9．常用的网页图像格式有（）和（）。

A．gif，tiff B．tiff，jpg C．gif，jpg D．tiff，png

10．要使表格的边框不显示，应设置 border 的值是（）。

A．1 B．0 C．2 D．3

11．在 HTML 中，（）不是链接的目标属性。

A．self B．new C．blank D．top

12．下列 HTML 标记中，属于非成对标记的是（）。

A．<li> B．<ul> C．<P> D．<font>

13．以下标记符中，用于设置页面标题的是（）。

A．<title> B．<caption> C．<head> D．<html>

14．以下标记符中，没有对应的结束标记的是（）。

A．<body> B．<br> C．<html> D．<title>

15．若要使设计网页的背景图形为 bg.jpg，以下标记中，正确的是（）。

A．<body background="bg.jpg"> B．<body bground="bg.jpg">

C．<body image="bg.jpg"> D．<body bgcolor="bg.jpg">

16．若要以标题 2 号字、居中、红色显示“你好”，以下用法中，正确的是（）。

A．<h2><div align="center"><color="#ff00000">你好</div></h2></font>

B．<h2><div align="center"><font color="#ff00000">你好</div></h2></font>

C．<h2><div align="center"><font color="#ff00000">你好<</h2>/div></font>

D．<h2><div align="center">< font color="#ff00000">你好</font></div></h2>

17．若要以加粗宋体、12 号字显示“你好”以下用法中，正确的是（）。

A．<b><font size=12>你好</b></font>

B．<b><font face="宋体" size=12>你好</font></b>

C．<b><font size="宋体"size=12>你好</b></font>

D．<b><font size="宋体" fontsize=12>你好</b></font>

第57页

第 2 章 HTML 简介 47

18．以下标记中，用于定义一个单元格的是（）。

A．<td> </td> B．<tr>…</tr>

C．<table>…</table> D．<caption>…</caption>

19．用于设置表格背景颜色的属性的是（）。

A．background B．bgcolor C．BorderColor D．backgroundColor

20．以下标记中，用来创建对象的是（）。

A．<object> B．<embed> C．<form> D．<marquee>

第58页

第 3 章 Dreamweaver 入门

3.1 Dreamweaver 基础

本章主要介绍 Dreamweaver CS5 的新增特性、工作界面、站点设置及建立等，通过本

章的学习，可以对 Dreamweaver 提供的功能有一个全面的了解。

3.1.1 Dreamweaver 概述

Dreamweaver 系列软件是 Adobe 公司出品的可视化的网页编辑器，以其强大的网页设

计及方便的站点管理功能成为了网页设计人员的首选，网页设计人员可以使用该软件实

现从编辑到预览的所有网页创建过程，这种“所见即所得”的制作方式大大简化了网页

的制作，可以轻松制作出跨平台和浏览器的页面，相比之前的版本，CS5 在以下方面得到

了增强：

1．CSS 检查

以可视化方式显示详细的 CSS 框模型，可轻松切换 CSS 属性，不需要读取代码或使

用其他实用程序即可对代码进行检查。

2．PHP 自定义类代码提示

为用户自定义的 PHP 函数显示适当的语法提示，可以帮助使用人员更准确地编写

代码。

3．集成 CMS（内容管理系统）支持

提供对类似 WordPress 等内容管理系统框架的制作和测试支持。

4．CSS Starter 页

新版本简化的 CSS Starter 布局，可以快速启动基于 Web 标准的网站设计，提供了部

分快速设计模板及示例。

第59页

第 3 章 Dreamweaver 入门 49

3.1.2 Dreamweaver 工作界面

Dreamweaver CS5 的安装与 Windows 平台上的其他软件类似，通过简单的鼠标操作即

可完成，软件启动后的界面如图 3-1 所示。

图 3-1 Dreamweaver CS5 用户界面

菜单栏：包含了 Dreamweaver CS5 所提供的菜单命令，软件提供的功能都可以从

菜单栏中找到。

常用面板区：包含“插入”“CSS 样式”“AP 元素”“文件”“资源”“日志”等，

是设计人员用于完成网页设计所用到的主要工具面板集合，可以通过“窗口”

菜单中勾选相应选项来显示该面板（取消勾选即可取消该面板在常用面板区中

的显示）。

属性面板区：在选中网页元素时将显示其可被修改的属性，可以对任选页面元素

属性进行更改，是编辑网页时使用频率最高的一个面板。

文档/视图区：设计和书写网页代码的主要区域，使用时可根据自身需要选择或者

定制文档/视图区的显示方式。

第60页

50 网页制作教程

3.1.3 Dreamweaver 创建 Web 站点的流程

在 Dreamweaver 中，Web 站点可视为网站中所有文件的集合。我们可以在本地计算

机上创建 Web 页，也可将 Web 页上传至 Web 服务器中，并可随时在保存文件后传输

更新的文件来对站点进行更新维护。创建本地站点的流程如下：

① 在本地（本机）硬盘中新建一个用于存储网站中所有文件的文件夹，文件夹

最好使用英文和数字混合命名，这里我们在本机 E 盘中新建一文件夹并命名为

website001。

② 在 Dreamweaver 菜单栏中选择“站点”→“新建站点”命令，在弹出的对话框中

将“站点名称”修改为自己想要的名称（website001），将“本地站点文件夹”修改为步

骤①中的文件夹（E:\\website001\\），如图 3-2 所示。

图 3-2 站点设置

③“服务器”选项用于连接远端服务器，如图 3-3 所示，该服务器通常由 Internet

服务提供商（ISP）提供，用于站点的发布，在创建站点阶段不需要对其进行设置，其具

体设置请参阅 3.2.5 节。

④“版本控制”是软件工程中的常用术语，用于对文件的更新进行监控，由于网

站也是由一个个文件组成的，因此可以使用版本控制工具对文件的更改进行监控，如

图 3-4 所示，也可以选择使用 CS5 集成的 Subversion 来进行网站版本控制，具体设置

可参阅 4.8.2 节。

第61页

第 3 章 Dreamweaver 入门 51

图 3-3 服务器

图 3-4 版本控制

⑤“高级设置”中可以设置网站中图像的默认存放文件夹，如图 3-5 所示，这里我

们在 website001 文件夹下新建一文件并命名为 images，然后单击“默认图像文件夹”后

第62页

52 网页制作教程

的按钮选择该文件夹即可。对于“链接相对于”选项，如果本地计算机中并没有安装

Web 服务器软件（IIS、Apache、Tomcat 等），则不需改动此默认设置，如果安装了该类软

件并且已经在软件中对站点根目录进行了设置，则可以使用“站点根目录”作为网页中

链接的路径。“Web URL”选项用于创建站点根目录相对链接，并在使用链接检查器时验

证这些链接，适用于本地计算机安装了 Web 服务器软件且已正确设置相应目录的情形，

如果需要对站点进行测试或者本地发布，则需要对该选项进行正确设置，通常情况下使

用默认设置即可。

图 3-5 高级设置

⑥“高级设置”下的子选项通常保持默认，最后单击“保存”按钮，这样一个 Web

站点就创建完成了。

以上就是使用 Dreamweaver 创建 Web 站点的基本流程，后续将会在实例中做进一步

讲解。

3.1.4 了解工作区

工作区是展示和编辑页面的重要区域，在工作区中可以方便地查看或修改文档和对

象的属性参数。工作区中还有许多常用操作面板，使用它们可以快速修改文档。如图 3-6

所示，Dreamweaver 提供了一个将所有元素置于一个窗口中的集成开发环境。在这个集成

的工作区中，全部的窗口和面板均可以在其中显示。

第63页

第 3 章 Dreamweaver 入门 53

图 3-6 工作区

区域 1：文档工具栏，包含了提供各种“文档”窗口视图（如“设计”视图和“代码”

视图）的选项、各种查看选项和一些常用操作（如在浏览器中预览，检查浏览器兼容性等）。

区域 2：切换设计器按钮，单击此下拉按钮会出现图 3-7 所示的预定义工作区样式，

使用者可以在需要时选择相应的工作区布局。

图 3-7 工作区切换

第64页

54 网页制作教程

区域 3：文档区，用于显示实时文档视图，日常较多使用的是“设计视图”，该视图

用于可视化页面布局、可视化编辑和快速应用程序开发的设计环境。在该视图中可以显

示文档的可视化表示形式，类似于在浏览器中查看页面时看到的内容。“代码视图”主要

用于查看各类网页或脚本语言的源代码，用于编写和编辑 HTML、JavaScript 以及服务器

端代码（如 PHP 或 ColdFusion 标记语言 (CFML)）以及任何其他类型代码的手工编码

环境。

区域 4：该面板区用于监控和修改文档内容，主要包括“插入”面板、“CSS 样式”

面板和“文件”面板。双击某选项卡可以展开该面板。

区域 5：该部分为标签选择器，位于“文档”窗口底部的状态栏中，用于显示当前选

定内容的标签的层次结构。单击该层次结构中的某个标签就可以自动选择该标签及其包

含的全部内容。

区域 6：该部分为属性检查器，用于查看和更改所选对象或文本的各种属性，是编辑

页面时最常用到的部分。

区域 7：用于管理文件和文件夹，可以对站点中的文件进行管理，无论其位于本地计

算机还是位于远程服务器上。使用“文件”面板还可以访问本地磁盘上的全部文件，可

以提供类似于 Windows 资源管理器的功能。

区域 8：代码窗口及工具，用于显示网页代码及对代码片段进行选择编辑及格式化等。

3.1.5 设置 Dreamweaver 站点

Dreamweaver 站点通常由三部分（或文件夹）组成，具体还取决于开发环境和所开发

的 Web 站点类型：

① 本地根文件夹：用于存储网站中所有的文件。Dreamweaver 将此文件夹称为“本

地站点”。此文件夹通常位于本地计算机上，但也可能位于网络服务器上。

② 远程文件夹：存储用于测试、协作等用途的文件。Dreamweaver 在“文件”面板

中将此文件夹称为“远程站点”。远程文件夹通常位于运行 Web 服务器的计算机上。远

程文件夹包含用户从 Internet 访问所需的文件。

通过本地文件夹和远程文件夹的结合使用，网站制作人员可以在本地计算机和 Web

服务器之间传输文件，可以方便地管理 Dreamweaver 站点中的文件。网站开发时可以在

本地文件夹中处理文件，完成后需要他人访问时，再将它们发布到远程文件夹（远程站

点目录）。

③ 测试服务器文件夹：Dreamweaver 在其中处理动态页的文件夹，动态页通常是包

含有脚本语言的页面，用来响应用户的交互性操作，如查询、更新等。

第65页

第 3 章 Dreamweaver 入门 55

3.1.6 创建和打开文档

Dreamweaver 不仅对建立和编辑 HTML 文档提供了良好的支持，还支持如图 3-8 所示

的文档的创建和编辑，下面对 DW（以下对 Dreamweaver 简称 DW）支持的主要文档格式

做简单介绍。

图 3-8 新建文档

XSLT（eXtensible Stylesheet Language Transformation）：可扩展样式表语言文件，

扩展名为.xsl 或 .xslt。用于将一种 XML 文档转换为另外一种 XML 文档，或者可

被浏览器识别的其他类型的文档，比如 HTML 和 XHTML。

ActionScript：DW 自身支持的面向对象的脚本语言，用于实现某些动态效果。

CSS（Cascading Style Sheet）：层叠样式表文件，扩展名为.css。用于设置 HTML

内容的显示方式并控制各个页面元素的位置。

JavaScript：应用非常广泛的脚本语言，扩展名为.js。通常用于处理表单以及其他

类交互操作，多用于客户端，也可用于服务器端。

XML（eXtensible Markup Language）：可扩展标记语言文件，扩展名为 .xml。主要

用于存储和传送文本格式的数据，可使用 XSL（eXtensible Stylesheet Language，可

扩展样式表语言）设置这些数据的具体格式。

ColdFusion（ColdFusion 组件）：ColdFusion 标记语言文件，扩展名为 .cfm，由 Adobe

公司开发的用于处理动态页面的标记语言。

ASP（Active Server Page）：动态服务器页面，扩展名为.asp。提供了一个服务

第66页

56 网页制作教程

器端处理动态页面的规范，可以使用 JavaScript 或者 VBScript 作为具体语言

编写该类页面。

.NET（C#、VB）：是一种基于组件和模块的服务器端程序开发和运行规范，虽然

是对 ASP 的发展，但已经与早期的 ASP 没有太大关系，使用 C#和 VB 两种脚本

语言进行页面处理。

JSP（Java Server Pages）：Java 服务器端页面，扩展名为.JSP，是在 HTML 页面中

加入 Java 程序段和 JSP 标签所形成的页面，具有 Java 技术简单易用、完全面向对

象、平台无关且安全可靠、面向因特网的特点，是编写服务器端页面的一种主要

语言。

PHP（Hypertext Preprocessor）：超文本预处理器文件，扩展名为 .php，主要用于

服务器端处理动态页面，具有开源免费、支持众多数据库和跨平台属性。

通过上述介绍可以看出，几乎所有主流的 Web 开发技术，DW 都提供了良好的支持，

可以根据需要直接创建所需类型的页面文件，这也是 DW 成为 Web 开发首选工具的一个

重要原因。

另外，DW 还支持从软件自带模板来创建文件，或者使用用户自定义模板来生成文

件，可以单击“空模板”或者“示例中的页”创建基于模板的各类页面，也可以单击“模

板中的页”从站点中的自定义模板中创建各类页面。

3.2 Dreamweaver 建站实例

在 DW 中，制作页面或者网站需要从建立一个站点开始，这为以后站点的测试、发

布等工作提供了便利，下面以实例说明建立站点的过程。

3.2.1 设置站点和项目文件

在本例中，我们建立了一个基本的旅游类站点，包含了建站的所有流程：新建站点

→创建文件→布局页面→添加内容→页面呈现，最终效果如图 3-9 所示。

具体操作流程如下：

① 设置本地文件夹。在本地计算机磁盘中新建一个文件夹，如在 E 盘中新建一个名

为“webpage”的文件夹。

② 新建站点。在菜单栏中选择“站点”→“新建站点”命令，在弹出对话框中输入

站点名为“webpage01”，在“本地站点文件夹件”栏中单击按钮，选择“E:\\ webpage，

单击“保存”按钮即可，如图 3-10 所示。

第67页

第 3 章 Dreamweaver 入门 57

图 3-9 页面预览效果

图 3-10 新建站点

③ 新建网页文件。站点创建成功后，在“文件”面板中将出现新建站点信息，

在“文件”面板的“站点—webpage01”上右击，在弹出的快捷菜单中选择“新建文

件 ”命令，并将文件名设为“index.html”，将其作为网站的首页。

第68页

58 网页制作教程

④ 新建分类文件夹。再次在“文件”面板的“站点

—webpage01”上右击，在弹出的快捷菜单中选择“新建

文件夹”命令，创建几个文件夹，分别命名为 images、

scripts 和 flash，用来存放图像、脚本、多媒体等，最终

站点结构如图 3-11 所示。

通过上述步骤就完成了一个简单的站点的建立过

程，接下来需要对文件内容进行编辑，对各种资源进行

处理，以最终完成该页面。

3.2.2 创建基于表格的页面布局

在浏览网站的过程中，看到的并不是千篇一律的页面，通常每个页面都有自己的颜

色搭配、整体风格、内容分块等，对于网页设计者而言，最终页面不仅要提供足够的信

息，还要使浏览者赏心悦目，要达到这一点，就必须对页面中所有内容的位置作好规划，

形成一个比较统一的风格，这就是通常所说的页面布局。这里采用表格来对整个页面进

行布局，本例中共使用了 4 个表格，具体如图 3-12 所示。

图 3-12 表格布局

具体操作如下：

① 新建站点 website001，将本地文件夹设为 E:\\website001，DW 中选择“文件”面板，

在站点 website001 上右击，在弹出的快捷菜单中选择“新建文件”命令，将其命名为

“index-table.html”，设置页面标题为“旅行中的灵境”，页面字体为“华文宋体”。

图 3-11 站点结构

第69页

第 3 章 Dreamweaver 入门 59

② 添加表格。双击该首页文件，将其在设计

视图中打开，在菜单栏中选择“插入”→“表格”

命令，添加两个1行 6 列表格，其设置如图 3-13

所示。

③ 添加主体表格。在设计视图中按【Enter】

键，在菜单栏中选择“插入”→“表格”命令，在

新行中插入一个 1 行 3 列表格，参照上述步骤在页

面底部添加一个 2 行3列表格，这样就完成了整个

页面的布局。

3.2.3 向页面添加内容

在 3.2.2 中使用表格规划好了整个页面，本节中需要向表格中插入具体的内容，插入

内容后的页面如图 3-14 所示。

图 3-14 页面预览

① 表格 1 的具体操作如下：

在第 1 个单元格中输入“欢迎访问本网站”，第 2 个单元格中输入“登录”，第 3 个

单元格中输入“注册”，第 4 个单元格放置图片（shanshui.jpg），设置图片大小为 300×50

像素，并设置该单元格宽度为 300 像素，第 5 个单元格输入“设为首页”，第 6 个单元格

图 3-13 插入表格

第70页

60 网页制作教程

输入“联系我们”，并在属性面板中将“登录”添加链接至“login.html”，“注册”添加链

接至“register.html”，“设为首页”添加空链接“#”，并添加“行为”代码如下：

"this.style.behavior='url(#default#homepage)';this.setHomePage('http://www.

163.com');event.returnValue=false;"

对“联系我们”添加邮件链接 rfv@163.com。效果如图 3-15 所示。

图 3-15 添加内容后的表格 1

② 表格 2 的具体操作如下：

选择整行，对其添加背景颜色“#00FF00”，设置所有文本为“居中对齐”，第 1 个单

元格输入“|首页”并设置“首页”链接为空链接，第 2 个单元格输入“|国内游”并设置

其链接为相应页面，第 3 个单元格输入“|国际游”并设置其链接为相应页面，第 4 个单

元格输入“|酒店预订”，第 5 个单元格输入“|火车票”，第 6 个单元格输入“|论坛”，最

终效果如图 3-16 所示。

图 3-16 添加内容后的表格 2

③ 表格 3 的具体操作如下：

在单元格 1 和单元格 3 中分别嵌套一个 15 行 1 列的表格，单元格 2 不做改变。对单

元格 1 和单元格 3 中的表格分别添加相应文本，单元格 2 中插入图片（worldmap.jpg），并

修改其宽为 500 像素，高为 300 像素，属性面板中设置其“水平”对齐方式为“居中对

齐”，最终效果如图 3-17 所示。

图 3-17 添加内容后的表格 3

第71页

第 3 章 Dreamweaver 入门 61

④ 表格 4 的具体设置如下：

第 1 行各单元格依次输入以下内容：“关于我们”“友情链接”“免责声明”。再选择

结果如图 3-18 所示。

图 3-18 添加内容后的表格 4

3.2.4 使用 CSS 设置页面格式

各个表格的内容添加完成后，我们使用 CSS 对页面元素进行设置，对页面中元素的

显示进行控制。具体设置如下：

页面设置：在属性面板中单击“页面属性”按钮，将出现图 3-19 所示的对话框，在

“外观（CSS）”项中设置“页面字体”为“华文宋体”，“大小”为 16px，如果在下拉列表

中找不到该字体，可单击“编辑字体列表”，从系统中将该字体添加至 DW 中即可，再将

“背景颜色”设置为#9FF，也可以选择一张图片将其设置为“背景图像”，这里我们不再

设置，但读者需要注意的是，如果同时设置了“背景颜色”和“背景图像”，那么背景图

像将会遮盖住相应区域的背景颜色（透明图片除外）。最后单击“应用”或者“确定”按

钮，即可将设置应用于该页面，效果如图 3-20 所示。

图 3-19 页面设置

表格 1：选择单元格 1（即该表格的第 1 个 td 元素），按钮将自动被选择，“目标

规则”中选择“新内联样式”，单击“编辑规则”按钮，会出现图 3-21 所示的 CSS 规则定

第72页

62 网页制作教程

义对话框，这里选择“区块”，将“text-align”属性设置为“left”，选择“方框”选项，将

“width”修改为“16%”，单击“确定”按钮即可。同理选择单元格 2，对其建立新内联样

式，在规则定义对话框中修改其“width”属性为“7%”，对单元格 3 参照上述操作设置其

“width”属性为“7%”，单元格 5 和单元格 6 的“width”属性各设为“10%”，单元格 4 的

“width”属性设为 50%，这样表格 1 的 CSS 设置就完成了，最终效果如图 3-22 所示。

图 3-20 页面效果

图 3-21 定义单元格规则

图 3-22 表格 1 预览

第73页

第 3 章 Dreamweaver 入门 63

表格 2：使用标签选择器选中该表格，在属性面板中设置其边框为 1，在标签选择器

中选中表格第 1 行，建立新内联样式，在 CSS 规则定义对话框中设置“背景”→

“ background-image”为事先准备好的图片（ danyalan-bg.jpg ），并设置

“background-position(X)”和“background-position(Y)”分别为“center”，浏览器中预览的

效果如图 3-23 所示。

图 3-23 表格 2 预览

表格 3：在标签选择器中选择该表格的第 1 列（第 1 个 td 元素），在属性面板中添加

新内联规则，定义其 CSS 规则中“方框”→width 为 20%，同理选择第 3 列（第 3 个 td

元素），依照上述步骤设置其 width 为 20%，再选择该表格第 2 列（第 2 个 td 元素），添

加新内联 CSS 规则，设置“背景”→background-color 为#FFF，“区块”→vertical-align

为 middle，最终效果如图 3-24 所示。

图 3-24 表格 3 预览

表格 4：选择第 1 行（第 1 个 tr 元素），添加新内联规则，设置“区块”→text-align

为 center，再选择第 2 行（第 2 个 tr 元素），参照上述步骤将其 text-align 也设为 center，

选择菜单栏中的“插入”→“HTML”→“水平线”命令，在原有文本前插入一条水平线，

最终效果如图 3-25 所示。

图 3-25 表格 4 预览

第74页

64 网页制作教程

本例中先使用表格对整个页面进行了分割，然后向各个分块中插入内容，使用 CSS

规则对各个表格进行了规范化显示，这样就完成了该页面的基本制作，站点中其他页面

的制作也基本遵循这一流程。

3.2.5 发布站点

站点的发布就是让网络上的其他人可以访问制作好的网站，一般可分为本地发布和

远程发布，从理论上来讲，无论本地发布还是远程发布，均可使用 IP 地址访问，但由于

IP 地址难于记忆，一般都会采用申请域名的方法发布。在这里以本地发布为例说明发布

的一般流程。

① 在本地计算机上安装 Web 服务器，这里选择 Windows 平台上广为使用的 IIS，此处

使用的是 Windows XP+IIS 5.1 组合，软件具体安装过程不再赘述，读者可自行参阅其他书籍。

② 在 Windows XP 中选择“开始”→“设置”→“控制面板”→“管理工具”→“Internet

信息服务”命令，会出现图 3-26 所示的界面，单击图标直至显示“默认网站”，在“默

认网站”上右击，在弹出的快捷菜单中选择“新建”→“虚拟目录”命令，单击“下一

步”按钮，在弹出对话框（见图 3-27）中“别名”中输入“website001”，继续单击“下

一步”按钮，在对话框中单击“浏览”按钮，选择 E:\\website001 作为目录（见图 3-28），

继续“下一步”直至完成，最终结果如图 3-29 所示。

图 3-26 Internet 信息服务页面

第75页

第 3 章 Dreamweaver 入门 65

图 3-27 创建虚拟目录别名

图 3-28 输入网站本地路径

第76页

66 网页制作教程

图 3-29 添加虚拟目录 website001

③ 在“默认网站”上右击，在弹出的快捷菜单中选择“属性”命令，在弹出对话框

中选择“目录安全性”，单击“编辑”按钮，在弹出的对话框中（见图 3-30）去掉“匿名

访问”前的勾选并勾选“集成 Windows 身份验证”复选框。

图 3-30 目录安全性设置

第77页

第 3 章 Dreamweaver 入门 67

④ 打开 IE 浏览器，在地址栏中输入 http://localhost/website001 即可访问到我们已经

做好的 index.html 页面，如图 3-31 所示。

图 3-31 IE 中访问结果

这里，除了本机能够访问该页面以外，其他和本机处于同一局域网内的主机也可以

访问这个网站，但是需要将 localhost 换成欲访问主机的 IP 地址，远程发布与此类似，所

不同的是需要增加远程站点定义及上传网站内容的过程，具体请参阅 4.8.2 节。

本章小结

本章从 DW 的基本功能入手，介绍了 DW 中站点的创建方法，并以实例说明了如何

设计具体页面以及对页面中的元素设置各种不同的格式，最后讲解了站点发布的基本知

识，通过本章的学习，读者可以掌握站点的建立及页面的布局方法，对如何建设网站有

一个全面的认识。

第78页

68 网页制作教程

习题

一、选择题

1．关于域名系统，以下说法正确的是（）。

A．域名系统是一个非层次型系统

B．域名系统主要用来将 IP 地址解析为绑定的域名

C．域名解析请求与应答都需要 DNS 协议的支持

D．主机域名必须和其 IP 地址一一对应

2．以下关于网络协议的说法，错误的是（）。

A．HTTP 用于请求/应答 Web 页面

B．FTP 用于文件传输，支持断点续传

C．Telnet 用于远程登录

D．SMTP 用于在邮件客户端和服务器端传输邮件

3．关于自主发布，以下说法错误的是（）。

A．自主发布需要预先了解服务器所处的网络环境

B．自主发布需要发布者自行搭建 Web 服务器

C．无论固定 IP 还是动态 IP 的服务器都需要借助动态域名解析软件进行域名解析

D．自主发布也需要申请相应的域名

4．网页中常用的嵌入 CSS 的方式是（）。

A．link 标签和 link 属性 B．link 标签和 style 属性

C．style 标签和 link 属性 D．style 标签和 style 属性

二、简答题

1．简述建设商业性网站的基本流程。

2．简述在 DW 页面中插入网页基本元素（文本、图片、链接等）的方法。

20469 网页制作教程

20469 网页制作教程

产品服务

关于我们

网络条款

其他