郝兴伟
山东大学计算机科学与技术学院
hxw@sdu.edu.cn
第 4章 网页及多媒体制作
目 录
4.1使用 FrontPage 2000
4.2 新建网页
4.3 网页的编辑
4.4框架网页
4.5 使用 Dreamweaver
4.6 Photoshop和图像处理
4.7 Flash与动画制作
4.1 使用 FrontPage 2000
FrontPage 2000是 Microsoft Office 2000办
公套件的成员，是一种可视化的网页制作和站
点管理工具。
从窗口的界面到各种功能的操作方法等各个方
面，都与 Office 2000中的其它应用程序（如
Word 2000,Excel 2000以及 PowerPoint 2000）
高度统一，从而使得 Frontpage成为一种使用
较广的网页制作工具，用户用它可以方便的编
写 html文档。
4.1.1 FrontPage 2000的主窗口
“视图”窗格
显示模式
? 普通
? HTML
? 预览
4.1.2 显示模式
(1) 普通模式：是一种可视化的网页编辑模式。在这里，用户
可以采用, 所见即所得, 的方式设计、编辑和修改网页，系统
会自动生成相应的 HTML代码。
(2) HTML模式：将显示网页的 HTML文档内容。用户可以直接
在该模式下编辑、修改其中的 HTML代码，适用于那些对
HTML比较熟悉的用户。另外，如果网页中包含一些脚本程序，
则这些脚本程序也需要通过 HTML模式编辑。
(3) 预览模式：通过该模式可以预览当前编辑的网页
举例
4.1.3 Web站点的创建与管理
FrontPage 不仅是一个页面制作工具，
同时，它还可以进行站点管理操作。包括创
建、删除、打开、发布站点，以及设置站点
属性等工作，也可以对站点的文件和文件夹
进行操作和安全性管理。
1.创建 Web站点
在计算机上创建一个新的文
件夹 d:\myCustomer,该文件
夹下又包含子文件夹和若干
网页文件。
操作方法是：选择, 文件,,
,新建,,, 站点,,打开, 新
建站点, 对话框，，选择一个站
点模板（这里我们选择, 客户支
持站点, ），在, 指定新站点位
置, 下面的文本框中输入站点主
目录路径，例如：输入
d:\myCustomer,
2,发布站点
所谓, 发布站点,,就是将站点所包含的
文件复制倒指定的目标位置，可以是一台
Web服务器，或者是一个目标文件夹，甚
至是一个可擦写的光盘驱动器。
发布站点具体步骤
输入要发布的站点的位置，可以是一个文件夹，然后单击, 发布,
按钮，开始文件复制，最后会显示一个 FrontPage对话框，显示
,成功发布站点！, 。则当前 Web站点所包含的文件将被传送到
目标位置。
选择菜单, 文
件,,, 发布站
点,,可以打开
,发布站点, 对
话框
4.2 新建网页
(1)单击常用工具
栏的, 新建, 按钮，
自动创建一个空白
网页。
(2)或者选择, 文
件,,, 新建,,
,网页,,打开
,新建, 网页对话
框
新建一个默认网页名为, new_page_1.htm”
FrontPage打开后将自动新建一个默认网页名为
,new_page_1.htm‖的新网页文件，在这里可以直接编辑网页
内容。
4.3 网页的编辑
(1) html文档是一个纯文本文件，没有格式。
(2)使用 Windows的, 记事本, 进行 html文档的
编辑，效率很低，且容易出错。
(3) 使用 FrontPage编辑网页，就是利用
FrontPage的可视化，在, 普通, 视图中,输入
网页中需要的文本、图片、建立超链接、插入
表格、表单等操作。
然后在 html视图可以看到上述设计对应的 html
代码
4.3.1 输入文本内容
（ 1） Web页中文字内容, 在 html文档中, 有很多标记, 如：
<p>,<font>等来对文本格式化, 即给定文本在浏览器中的显
示效果 。
（ 2）文本的输入和格式化。在, 普通, 模式下，在编辑区域进
行输入，再通过, 格式, 工具栏对文本进行格式化，或者通过
,超链接, 工具按钮给文本加上超链接（ <a>… </a>标记）。
举例
（ 1） 在普通模式下输入一行文本, Web技术导论,
（ 2）格式化
, 格式化, 菜单，选择, 字体, 或者使用, 格式, 工具
栏
（ 3）在, html”模式，查看对应的 html代码
普通,html和预览模式
4.3.2 插入图片
在网页上可以插入多种格式的图片，经常采用的是 Jpg
格式和 Gif格式图片，这两种都是经压缩的图片格式，
特别是 Gif格式图片，它不但具有很高和压缩比，而且
还可以制作成动画图片，以增强网页的动感效果，是
目前很流行的图片格式。
图片插入步骤 -1
在 FrontPage中，图片插入步骤如下,
（ 1）执行“插入”、“图片”，可以选择“剪贴画”
或“来自文件”
图片插入步骤 -2
（ 2）转到 HTML显示模式,查看对应的代码
<img border="0"
src="file:///D:/myBook/images/mybook.jpg" width="80"
height="112">
这是一个绝对路径。
此时，保存一下网页文件，在打开将看到上述的路径变成相对
路径。
<img border="0" src="images/mybook.jpg" width="80"
height="112">
设置图片属性 -常规
图片插入以后它在
页面上的大小、位
置等并不理想。要
使得图片符合用户
的要求，则必须对
它的属性进行设置。
右单击“图片”,
执行“属性”，打
开属性对话框。
设置图片属性 -外观
图片外观设置
4.3.3 插入表格
在网页设计中，表格不仅仅用来显示数据，而且表格还是进
行网页布局的重要手段，使用表格，就可对各种网页元素位
置进行精确控制，使设计的网页布局整齐、美观。
步骤演示,
执行“表格”菜单“插入”命令
表格属性
在表格中，右单击，在快捷菜单中，执行
“表格属性”
4.3.4 超链接
（ 1）文本的超链接
（ 2）图像的超链接
1,建立文本超链接
（ 1）选择“文本”
（ 2）在“常用”工具栏中，点击“超链接”按钮
建立文本超链接 —代 码
2.建立图像超链接
（ 1）选择“图片”
（ 2）在“常用”工具栏中，点击“超链接”按钮
在 html视图，对应的图片超链接代码如下,
<a href="bookindex.htm">
<img border="0" src="images/mybook.jpg" width="80"
height="112">
</a>
4.3.5图像地图
使用 FrontPage建立图像地
图非常容易, 具体步骤如
下,
（ 1） 插入图片
（ 2）单击图片，则在
FrontPage的底部显示图片
工具栏,
4.3.6 网页属性
对于网页的 <body>标记有许多属性设置, 这些属性往往影响
到整个网页的显示, 在 FrontPage中, 大部分的 <body>标记属
性是通过网页属性设置的 。
在网页上单击鼠标右键, 从快捷菜单中选择, 网页属性 …,,
打开, 网页属性对话框, 如图 4-16所示 。
网页属性 -常规
网页属性 -背景
网页属性 -边距
网页属性 -自定义
网页属性 -语言
网页属性 -代码
设置背景色：影响的代码
<body bgcolor="#C0C0C0">
4.4框架网页
在网页设计中框架网页是经常使用的一种网页类型，它可以
把浏览窗口分成几个区域，每个区域可以显示一个不同的页
面。通过框架网页可以在一个窗口中同时显示几个网页。
4.4.1新建框架网页
在 FrontPage 2000中创建框架网页可以通过专门的框架网页模
板完成方法如下,
选择菜单“文件”、“新建”、“网页”，打开“新建网页”
对话框，选择“框架网页”选项卡,
设置初始网页
（ 1）设置初始网页
（ 2）新建网页
框架网页的保存
单击“保存”按钮，打开“另存为”对话框，分别保存每一个区
域，和整个框架文件。
4.4.2拆分与删除框架
为了适应不同的需要，用户可以将一个网页框架随意拆分或
合并，形成有自己风格的框架网页。
方法如下,
（ 1）单击某个框架
（ 2）在“框架”菜单中，执行“拆分”框架命令
4.4.3改变框架窗格的大小
框架的大小是可以根据需要改变的。
方法是,
将鼠标指针指向框架，当指针变成形或者形时，按住左键拖
动，达到满意的位置后放开。
4.4.5设置框架属性
可以用以下方法设
置框架属性：鼠标
指针指向框架，单
击右键，从快捷菜
单中选择“框架属
性”，打开“框架
属性”对话框
4.4.6设置超链接的目标框架
假设设计一个“唐诗欣赏”的框架网页，包含两个框架：目
录区和诗文区。
实现步骤
具体的实现步骤,
（ 1）建立框架
（ 2）设置框架属性
（ 3）编辑目录区网页文件
（ 4）建立诗词超链接
选择“目标框架 ‖
选择“改变目标框架,按钮
（ 4）建立诗词超链接
“改变目标框架 ‖
按钮
4.5 使用 Dreamweaver
Dreamweaver是 Macromedia公司推出的“所见即所得”的网
页编辑工具。与 Frontpage不同,Deamweaver采用了 Mac机的
浮动面版 设计风格，对于习惯于 Frontpage 的用户一开始可能
会感到不适应，相信经过较短时间的熟悉很快会习惯了其操
作方式。
我们将以 Dreamweaver4 介绍 Dreamweaver的功能
4.5.1 认识 Dreamweaver
Dreamwe
aver主窗
口界面。
打开 Dreamweaver,显示主窗口，第一次启动 Dreamweaver时，
同时还显示几个浮动窗口
认识 Dreamweaver-1
1,浮动窗口
在打开 Dreamweaver的同时, 会自动打开许多浮动窗口, 主
要包括,
（ 1） 对象面板, 在网页编辑的过程中, 通过单击对象面板的
按钮来为网页添加相应的元素, 如：图片, 表格, 层, Flash。
我们称这些元素为对象 。
（ 2） 属性面板, 用于显示所选中的网页元素的属性, 并可在
属性面板上修改 。 选择不同的网页元素, 属性面板所显示的
内容也有所不同 。
认识 Dreamweaver-2
2,面板的关闭 /打开和排列
在 Dreamweaver的主菜单中，
选择“窗口”可以关闭或打
开相应的浮动面板窗口。
“窗口”菜单如图所示,
认识 Dreamweaver-3
3,启动器和快速启动栏
主菜单的, 窗口, 中, 有, 启动器, 命令, 对应的浮动窗口如
下
同时在状态栏的右边有一个, 快速启动栏, （ 又称启动面板 ）,
功能,
用于显示或隐藏相应的浮动面板 。, 站点, 对应于主菜单中
,站点,
中的, 站点文件, 命令, 用于打开, 站点, 窗口
认识 Dreamweaver-4
4,视图
Dreamweaver有三种视图, 分别对应于工具条最左边的三个
按钮, 三种视图分别是,
（ 1） 按钮, 显示代码视图, 在客户区显示网页对应的
html代码 。
（ 2） 按钮, 显示代码和设计视图, 在客户区水平分割成
两个窗格, 分别显示网页设计内容和对应的代码 。
（ 3） 按钮, 显示设计视图, 在该视图下, 用户可以进行
可视话的网页设计, 此时往往需要通过, 窗口, 菜单, 分别
选择, 对象, 命令和, 属性, 命令, 打开, 对象, 窗口和
,属性, 窗口 。 然后在网页中, 输入文字, 插入图像, 表格,
表单, 框架等内容 。
认识 Dreamweaver-5
左半部是远程站点的
目录，一般显示为空，
只有在 FTP 连通状态
下才有显示内容；右
半部是当前编辑中的
本地目录。站点窗口
的作用是使用户直观
而方便地像管理硬盘
里的文件一样管理站
点。
4.站点窗口
在 Dreamweaver主菜单中，有一个“站点”菜单，来实现站
点的管理。在“站点”菜单下，执行“站点文件”命令，打
开“站点”窗口
4.5.2 定义新网站
在 Dreamweaver的主菜单中，打开, 站点, 菜单，执行, 新建
站点 …, 命令，打开, 站点定义, 窗口，如图 4-24所示。
或者在站点窗
口中（见图 4-
23），在站点
后面的下拉列
表中选择, 定
义站点 …,
定义新网站 -1
在, 站点定义, 窗口中进行如下设置,
（ 1） 站点名称：为网站起的一个名字, 这个名字只起着识别
的作用, 与网站发布后真实的域名无关, 如本例中我们给出的
站点名称是 E-learning。
（ 2） 本地根目录：设置网站在本地硬盘的位置, 点击后面的
文件夹图标可以选择硬盘的任意目录作为存放网站文件的目录
（ 3） 缓存：建立缓存可以使文件的移动, 改名, 查找等站点
管理的操作速度大大提升 。
当上面的设置完成后，返回站点窗口，如图 4-25所示
定义新网站 -2
当上面的设置完成后，返回站点窗口，如图 4-25所示
站点定义完毕之后，
站点主目录下只有一
个 _notes
户可以通过站点窗口
的, 文件
行, 新建文件
,新建文件夹
来创建站点的文件夹
4.5.3 制作网页
要在一个站点中创建网页，
在站点窗口中，首先选择一
个文件夹，然后选择“文件”
菜单，执行“新建文件”命
令。
或者，在站点窗口右侧的
,本地文件夹, 窗格中，在
某个文件夹上右单击来创建
文件。
网页编 辑
在站点窗口中，双击某个文件，该文件将被打开。显示
Dreamweaver主窗口的“显示代码”视图。
文本及其格式化
1．文本及其格式化
选择“显示设计视图”，
在客户区输入相应的内
容，例如输入“欢迎光
临 E-learning网站”
然后,通过, 文本, 菜
单，进行简单的格式化
文本对象属性面板
选择文本，在“窗口”菜单中，执行“属性”命令，显示文本
对象属性面版
可以通过属性面版，对文本进行格式化，或者建立文本超连
接
插入图片及属性设置
2,插入图片及属性设置
如果对象面板没有打开，在 Dreamweaver主窗口中，
选择“窗口”菜单，执行“对象”命令，或者按
Ctrl+F2键，打开对象面板。点击对象面板上的
“插入图像”按钮，然后弹出对话框，选择需要
插入的的图片。
插入图片及属性设置（续）
注意,
如果被选择的文件，是网站主
目录以外的文件，系统就将提
示是否将图片复制到网站内，
提示对话框如图 4-28所示。
选择“是”，然后系统打开一个对话框，让用户选择一个站
点内的文件夹存储该图片。
如果图片不复制到网站内，则网页传上服务器后，图片就不
会被显示，因为图片不在该网站内。
图片属性设置
具体步骤如下,
（ 1）首先在 Dreamweaver主菜单中，选择“窗口”，执行“属
性”命令，打开属性面板。
（ 2）在网页中，点击插入的图片，属性面板显示如图 4-29所示。
显示代码
格式化工作结束后，在“显示代码视图”中，可以看到上述内
容的 html代码，如图 4-30所示。
对象面板
在对象面版，除了标准面板上显示的对象外，点
击右上角的箭头，会显示不同的对象
4.5.4 使用样式表
什么是样式（ style）？
样式（ style） 是一组格式化设置的统称，如字体、颜色、大小、
对齐方式等。 Html中的每一个标记都有默认的显示样式。
在 Word中的样式，对于某段文本应用某个样式（如标题 1、标题
2… ）后，它就会依照样式中定义的格式格式化这段文本。
HTML样式实际上是一系列 HTML格式化标记（如 <font>,<b>
标记等）的组合，用于一次对文本对象进行多个方面的格式设
置。例如，如果希望将文字设置为黑体,4号、加粗、倾斜、红
色格式，按照传统的方法必须分别进行 5次格式化设置。将这 5
次格式化操作组合成一个 HTML样式，并以适当的名字命名，下
次当需要对文本应用这些格式时，只需要一步操作：即应用该
HTML样式就可以了。
CSS样式表基础
CSS是 Cascading Style Sheets（ 层叠样式表单）的简称。它允许
在 HTML文档中加入样式。
在编写 html时候，可以将所有关于文档的样式指定和 html的文
档内容分离。甚至作为外部样式文件供 HTML调用。
CSS样式表可以依附于某个网页上，也可以单独作为一个 CSS
样式表文件保存，应用于多个网页文档。
CSS最基本的特性 -1
CSS最基本的特性：分组、继承、层叠
分组：通常我们需要同时改变几种标记的默认样式属性,CSS允
许声明通过使用分号分隔其内容的方式来进行分组。
例如,
body,td,p {color:#000000,text-align:left}
CSS最基本的特性 -2
继承：通过继承,CSS设置可以被应用到多个标记中。绝大部分
的 CSS声明可以通过封闭 CSS选择器中的 HTML标记来被继承。
例如：通过一个 CSS设置来改变整个页面的字体,
body { font-family,―Arial‖; font-size,14px; line-height,18px; color,
#000000}
这种形式的定义之所以可能，是因为 <body>标记被认为是页面
上所有元素的父标识。
CSS最基本的特性 -3
层叠,Cascading描述了覆盖通用样式的局部样式的能力。在相
同的方式中，一个普遍地应用到某一块文本上的 CSS规则可以被
其他应用到相同文本中某个更为特殊的部分的规则所覆盖。
例如,
设置了 <body>标记的 color属性。同时，某个 <p>标记，也设置了
color属性，则在这个 <p>标记标记的内容将以 <p>标记内的 color
属性设置显示，而不是外层的 <body>标记中设置的 color属性
创建样式 -1
操作步骤,
（ 1）在编辑状态，按 Shift+F11（ 或着在“窗口”菜单，执行
“css样式”命令）,进入样式表对话框（ CSS 样式表），如图
4-31所示。
创建样式 -2
（ 2）点击右下角的, 打开新建样式对话框，如图 4-32所示。
解释如下,
新建样式对话框
? 在“名称”中输入样式的名称，不要删除名称前的,.”；
? 在类型中可以选择是,
–,制作自定义样式”
–,重新定义 HTML标签”（重新定义 body,a,h1等
HTML中已有标签的默认显示样式）
–,使用 CSS选择器”（超级链接的四种状态的样式）；
?,定义在”是代表是把此样式只定义在这个网页文件中，
还是定义在一个外部 CSS样式表文件中，如果选择定义在外
部 CSS样式表文件中，就会弹出窗口选择外部 CSS样式表文
件保存的位置。
创建样式 -3
我们选择, 自定义样式,, 输入样式名字为 myStyle1。 设置
完成后, 单击, 确定, 按钮, 系统自动打开, 保存样式表文
件为, 对话框, 此时选择站点下的一个文件夹保存样式表,
例如我们选择 pub文件 。 接下来进入样式定义对话框, 如图 4-
33所示 。,类型”分
类中，组织
了“字体”、
“大小”等
格式设置，
输入相应的
数值
样式定义中的分类列表 -1
,样式, 定义可以包括多个方面, 这些不同的方面是通过样
式定义中的分类列表来组织的 。
“背景”分
类中组织了
关于“背景
颜色”、
“背景图片”
等的格式设
置，输入相
应的数值
样式定义中的分类列表 -2
不同的分类, 组织了不同的格式设置, 共同构成一个样式的
组成部分 。 详细介绍略 。
“区块”分
类中组织了
关于间距、
对齐等的格
式设置，输
入相应的数
值
创建样式 -4
对样式进行有关的设置，完成后，单击“确定”按钮，返回
CSS样式对话框（见图 4-31），显示一个新的样式,
同时在站点窗口中，显示一个
pub.css文件。
还可以看到，在当前网页的头
部增加了使用样式的 html标记,
<link rel="stylesheet"
href="pub.css" type="text/css">
使用样式
（ 1）选择文本。
（ 2）在样式对话框中，单击某个样式，该样式则作用于选
择的文本。如果文本本身具有某个样式，此时，选择, 无,,
则取消使用的样式。
包含样式的生成代码如下,
<font class="myStyle1">欢迎
光临 E-learning网站 </font>
可以看到：增加了一个 class参
数 。
修改样式 -1
（ 1）打开, CSS样式, 对话框。
修改样式 -2
（ 2）在样式对话框中，双击某个样式，打开样式定义对话
框，即可进行对该样式的修改
小结 -1
（ 1）上面创建的样式是外部样式,只在本页建立样式（仅当前文
档）,可以创建内部样式。在“新建样式”对话框中选择
“仅对该文档”,
则定义的样式出现在当前文档的 <head>…</head> 内，形式如下,
<style type="text/css">
<!--
.w1 { font-family,"Courier New"; font-size,18px; color,#FF0066}
-->
</style>
小结 -2
（ 2）在样式定义对话框中，有如下的列表
分类列表中各项的含义是,
分别定义一个样式的不同的属性参数
举例说明,
在 Dreamweaver中定义一个内部样式 w1,
分别选择不同的分类，可以看到样式
w1中间，包含的许多不同的属性定义。
小结 -3
（ 3） CSS选择器
平时上网你多留意就会
发现了，很多网站做出
来的链接都是无下划线
的（或者鼠标移到后下
划线不见了）。还有是：
在浏览器里更改了字本
的大小后，字体却没有
变化，而自己做的总会
变大变小的。
再次点击 CSS面板上的，
这次选中使用 CSS选择
器和仅对该文档两项，
选择器哪里，选 a:link，
确定后的参数设定如下：
(字本装饰那里选无，表
示无下划线 )
小结 -4
（ 3）关于, HTML样式,
同 CSS不同，应用 HTML样
式的操作不是自动化的，
换句话说，如果对某些文
字应用了一个定义的 HTML
样式，当改变该 HTML样式
所代表的格式时，原先已
经设置格式的文字格式并
不会变化。
关于, HTML样式, 续 1
（ 3）定义, HTML样式,
在样式窗口中，选择
,HTML样式”标签，单击
右下角的“新建样式”按
钮，打开“定义 HTML样式”
对话框
关于, HTML样式, 续 2
对文本的格式设置包括（ 1）设置段落格式和（ 2）设置字符
格式两个方面
HTML样式也包括段落样式和字符样式两种。根据 HTML样
式面板的列表中相应的样式标记，我们可以判断这些样式的
类别：以段落标记开头的样式，表明它是一个段落样式；以
字符 a开头的标记，表明它是一个字符样式
当 HTML样式应用到文本上时，会出现两种情况，一种情况
是清除原先已有的格式，然后应用新的格式，这种样式称作
覆盖型样式 ；
另一种情况是保留原先已有的格式，然后添加新的格式，这
种样式称作 添加型样式 。从样式列表中，我们同样可以判断
这种样式类型，如果样式项前面的标记后带有“＋”号，则
表明它是添加型样式，否则，表明它是覆盖型样式。
关于, HTML样式, 续 3
定义 HTML样式对话框
4.5.5 使用超链接 -步骤 1
超链接包括超文本链接、图像链接和热区链接三种，创建的
方法类似
创建的方法类似, 具体步骤如下,
（ 1）首先打开“属性面板”（窗口菜单，属性命令，
Ctrl+F3）
步 骤 2
（ 2） 选择文字或者图片, 在属性面板的链接 (Link)一项中输入
要链接的文档的 URL地址 。 如果要链接到网站内的文件, 可以
点击, 打开选定文件对话框
“相对于”选项，
意思是选择相对路
径的形式，默认的
方式是文档，即相
对于该文档本身。
也可以选择站点根
目录。区别在于，
文件是指相对路径
是从本页开始计算，
而根目录是从根目
录开始计算（即
,/”） 。
说明
（ 1）如果要链接到一个 E-mail地址，则在链接后面的文本框
中输入,mailto:email地址”，例如
mailto:webmaster@gsl.sdu.edu.cn,那么点击该链接的时候，就
回打开默认的 E-mail程序，例如 Outlook,发送 E-mail到给定的
地址。
（ 2）如果链接到浏览器无法打开的文件，例如 exe,zip等文
件，那么浏览者在点击这个链接的时候，就会打开一个对话
框，询问文件保存到硬盘的位置，即实现文件下载的功能。
4.5.6 使用表格
在 Dreamweaver主窗口中，在, 插入, 菜单中执行, 表格,
命令可以插入一个表格
使用表格 — 技 巧
动态改变表格的颜色，使网页更有动感。
例如：在单元格的 <td>标记里加上,
onMouseOut="this.style.backgroundColor=''
onMouseOver=this.style.backgroundColor='red'
把鼠标移到相应的单元格看看效果。
为什么不能插入表格？
在 Dreamweaver中，可能会遇到不能
插入表格的情况，为什么呢？
这是因为, 对象, 面板中的，在, 标
准, 对象的下面，按下了, 布局视
图,,此时插入表格和插入图层按钮，
都灰化而不可用。此时按下, 标准视
图, 按钮即可。
布局视图
标准视图
4.5.7 文件预览
在一个网页创作的过程中往往要看一下在浏览器中的显示效
果，这就是预览。和 Frontpage 不同，在 Dreameweaver中，网
页的预览是通过 Dreamweaver主窗口的“文件”菜单中的
“在浏览器中预览”来完成的，此时将该文档在浏览器中打
开。
快捷键（ F12）
4.5.8 使用层和新的排版功能
层（ Layer） 是 Dreamweaver中非常好的技术，层往往用于
对页面元素的定位。
什么是图层呢？通俗地讲，图层就象是含有文字或图形等
元素的胶片，一张张按顺序叠放在一起，组合起来形成页
面的最终效果。图层可以将页面上的元素精确定位。图层
中可以加入文本、图片、表格、插件，也可以在里面再嵌
套图层。
图层在平面坐标 x,y上又添加一个具有三维空间的坐标 z，
使图层有一个叠放顺序。图层的一个重要功能就是可以使
页面元素重叠。
创 建图层
（ 1）在“窗口”菜单中，执行“对象”命令（ Ctrl+F2）
（ 2）点击对象面板的“描绘层” 按钮，光标变成一个十
字，在编辑窗口上拖动，即可创建出一个层。
创建两个图
层
图层代码
创建两个图层
<div id="Layer1" style="position:absolute; left:48px; top:37px;
width:103px; height:92px; z-index:1"></div>
<div id="Layer2" style="position:absolute; left:126px; top:78px;
width:113px; height:94px; z-index:2"></div>
对应的代码,
图层编辑
可以在层上输入绝大部分的网页元素，如：图片、文字、表格。
图层编辑代码
对应的代码,
<div id="Layer1" style="position:absolute; left:49px; top:26px;
width:103px; height:92px; z-index:1">
<p>图层一 <img src="file:///D|/mySite1/00.jpg" width="206"
height="165"></p>
</div>
<div id="Layer2" style="position:absolute; left:203px; top:150px;
width:113px; height:94px; z-index:2">图层二 </div>
说明,
图片上的代码是绝对路经，是因为当前的 html文档尚未保存，
也就不知道该网页的路径。保存一次，然后会看到上述代码中
<img 中的图片路经称为想对路经。
图层属性
当插入层后，还需要进行有关的设置。打开属性面板，点击层，
对应的属性面板如图 4-36所示。
Z轴：层叠放的顺序
显示 (V),层的显示状态，隐藏是将层隐藏，处于不可见状态。
标签：层使用的代码方式，一般使用默认的 DIV标记即可
溢出：如果层里面的文字太多，或图片太大，层的大小不足以
全部显示的时候，可以选择,visible（ 超出的部分照样显示）、
hidden（ 超出的部分隐藏）,scrool（ 不管有否超出都显示滚动
条）或者 auto（ 有超出时才出现滚动条）
Layout排版功能
在 DW4（ DreamWeaver4） 中的 Layout排版功能，能够更加直接
方便地对页面布局进行编排。在对象面板的最下方有四个按钮,
视图,
布局,
标准视图按钮：默认状态下的视图。 此
按钮按下，才可以插入图层和表格
排版视图按钮：按下后，上面布局中的两
个按钮就可以使用了。
绘制布局表格按钮：象画图一样在页面里面排版表格
布局单元格按钮：在表格中画单元格。
Layout排版页面
利用以上的工具排版一个新页面，具体步骤如下,
新建一个页面，点 进入排版视图，点 在页面上画出表
格，再点,在表格中画出单元格，其中表格会以绿色框
表示，单元格会以蓝色表示，未确定的单元格会以灰色表示，
如图 4-37所示。
注意,
执行“查看”、
“标尺”命令，
显示标尺
Layout排版页面续 1
调整完成后，点击 标准视图按钮,回到标准视图，可以看
到刚才画的,Layout Table‖已经全部转化为表格了。
Layout排版页面续 2
上述表格对应的代码,
<table width="281" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="142" valign="top" rowspan="2"> </td>
<td width="139" height="75" valign="top"> </td>
</tr>
<tr>
<td height="113"></td>
</tr>
</table>
4.5.9 制作简单的互动效果
在对象面版中，有一个插入图标经过按钮,它的作用是
当鼠标移到一张图片上的时候，原来的图片就切换为另一张
图片，鼠标移开后，又恢复原来的模样。具体实现步骤如下,
（ 1） 准备两张大小相同的图片, 一张是鼠标没有移上去的时
候的状态, 一张是鼠标移上去后的图片 。
（ 2）点击对象面板上的,打开“插入鼠标经过图像”对话
框
代 码
完成后生成的代码,
点击网页的“显示代码视图”按钮,在文档的 <head>…
</head> 内生成一段 JavaScript脚本程序
用于实现鼠标经过时简单的互动效果。自己可以实验
4.5.10 使用行为
（ 1）事件和事件相应
用户的操作会产生事件，例如：鼠标的移动、点击等事件
(Events)。 当某个事件发生时，可以定义事件的处理函数，来
响应事件。在 Dreamweaver中,事件的响应 称为“行为” 。
（ 2）行为对应了标记的事件属性。添加行为实际上对应为一
个具体的标记添加事件属性。
Dreamweaver在窗口的状态兰显示各个标记，这为添加行为带
来了很大的方便。
为网页添加行为 -1
在网页加入行为，需要以下几个步骤,
（ 1）在窗口菜单中，打开“窗口”菜单，执行“行为”命
令，打开行为面板，如图 4-39所示。
为网页添加行为 -2
（ 2）选取产生行为的元素，例如：图片、段落、超链接文
字、层等。 或者，点击 Dreamweaver状态栏中的某个标记。
例如，如果需要在页面一载入就开始出现效果，可以选择状
态栏上的 <body>标签
为网页添加行为 -3
（ 3）按 按钮，打开一个相应列表,
不同的元素，对应的响应也有所不
同），选择一种响应并在随后的对话
框中设置此响应的属性。
可以供选择的响应包括,
为网页添加行为 -4
可以供选择的响应包括,
? 播放声音：可以为网页加入声音
? 打开浏览窗口：可以打开一个小窗口 （ 和网上的弹出窗口一
样 ） 。
? 弹出信息：可以弹出一条警告信息 。
? 调用 JavaScript,调用网页中包含的 Javascript程序。
? 对调图像：实际上是交换图像；
? 更改办容：可以改变已经插入的层的内容；
? 恢复对调图像：把已经交换的图像恢复过来；
为网页添加行为 -5
? 检测插件：可以检测访问者的浏览器是否己安装浏览网页所
必须的插件；
? 检测浏览器：检测访问者使用的是什么类型的浏览器；
? 检验表单：检验网页中的表单是否合法；
? 控制 Shockwave或 Flash,控制网页中包含的 Shockwave或
Flash；
? 前往 URL,跳转到其它页面；
? 设定导航栏的图片：和交换图像差不多；
? 设置文字：在特定的地方显示文字；
? 显示或隐藏层：设置图层的显示或隐藏；
为网页添加行为 -6
? 时间轴：可以制作更多的动态交果；
? 跳转菜单：插入跳转导航菜单；
? 跳转菜单前往：控制导航菜单跳到哪个页面；
? 拖动图层：设定图层是否允许拖动；
? 预载图像：在网页装载前先预先载入图像；
? 显示事件用：设定显示 IE或 NS各个版本的事件；
? 下载更多的行为事件：打开网页, 去下载更多的事件 。
选择触发行为的事件
添加完行为后，在行为对话框中列出，对应的事件和动作列表。
不同的元素可以触发的事件也不相同，通过选择事件, 可以决
定在什么情况下触发响应。常见的的事件有
· onMouseOver,鼠标移到目标上；
· onMouseUp,按下鼠标再放开左键时；
· onMouseOut,鼠标移开时；
· onMouseDown,按下鼠标时；
· onClink,点击时；
· onDblClick,双击时；
· onLoad,载入网页时；
· onUnload,离开页面时；
· onResize,当浏览者改变浏览窗口的大小时；
· onScroll,当浏览者拖动滚动条的时。
举例 -为文本（即 <p>标记）添加行为
（ 1） 输入一行文本,欢迎光临 E-learning网站,
（ 2） 在 Dreamweaver状态栏选择该文本 <p>标记
（ 3） 在行为面板中, 单击 按钮, 在行为列表中, 选择
“弹出信息,,打开,弹出信息,对话框
输入弹出的信息，例如,hello‖,然后，单击“确定按钮”
举例 --续 1
输入弹出的信息，例如,hello‖,然后，单击“确定按钮”，此
时行为面板显示，新增加的行为，如图
行为面板的标题栏，显示是为
一个 <p>标记添加了行为
举例 -续 2
（ 4）为行为选择触
发事件
当为对象添加了行
为后，在行为面板
增加一行来显示行
为和行为的触发事
件。
单击事件后面的下
拉箭头，显示可能
的触发事件列表，
如图,
选择一个事件即可
举例 -代码
转到显示代码视图，，查看添加行为后对应的 html代码
举例 -运行
保存上述的文件，在浏览器中打开，然后在网页文字上单击，
谈出一个消息，如图
使用行为小结
（ 1）添加行为，本质上是为标记添加事件属性
（ 2）不同的标记接受的事件不同
（ 3）要善于使用 Dreamweaver的状态栏，选择不同的标记
（ 4）在 Dreamweaver状态栏，选择一个标记，在行为面板将
显示该标记已经添加的行为，选择一个行为，点击行为面板
的 -按钮，可以删除该标记的一个行为
（ 5）通过行为面板，可以选择触发行为的事件
[例 4-1] 浮动提示效果的实现
（ 1） 首先插入一个两行三列的表格，第二行的三个单元格合
并起来，边框为 0，并填充文字，文字加上相应的链接，第二
行的单元格插上一个图层（命名为,google）。 如图 4-40所示。
如果 不能插入表格,请执行“窗口”菜单下的“对象”，
按下“标准视图”按钮即可。
续 -1
（ 2） 双击图层，将图层命名为,google。 如图 4-40所示。
续 -2
（ 3）选取 google文字，（或状
态栏的 <td>标记 ） 按 Shift+F3，
打开行为面板，点击行为面板上
的,选取“设置文本”、
“设置图层文本”，出现对话框，
在出现对话框如下（在新的
HTML里填上需要的文字），然
后按确定。如图 4-41所示。
续 -3
（ 4）打开“设置层文本”对话框，在新的 HTML里填上需要
的文字，然后按确定。如图 4-41所示。
续 -4
（ 3）再点击一次重复刚才的步骤，不过这次，新的 HTML里
不填任何文字，然后确定。
（ 4）点 onMouseover旁边的向下的箭头，把第二次加进的行为
onMouseover改为 onMouseout,如果找不到，显示更多事件，再
选其它版本浏览器，这样就有 onMouseout了。
注意：是为
<td>标记添加
行为，而不是
图层 <div>
续 -5
注意：是为 <td>标记添加行
为，而不是图层 <div>
续 -6
（ 5）对于另外的两个搜索引擎字，操作和上面的步骤一样，
只不过加入的文字不同。
续 -7
保存网页，在
浏览器打开
（或着按 F2看
看你的效果）。
可以看到当鼠
标移到
GOOGLE文字
上的时候，显
示文本
,www.google.
com搜索引
擎,,既实现
了浮动提示效
果。
代码
选择, 显示代码视图,,可以看到比较复杂的 html代码。
山东大学计算机科学与技术学院
hxw@sdu.edu.cn
第 4章 网页及多媒体制作
目 录
4.1使用 FrontPage 2000
4.2 新建网页
4.3 网页的编辑
4.4框架网页
4.5 使用 Dreamweaver
4.6 Photoshop和图像处理
4.7 Flash与动画制作
4.1 使用 FrontPage 2000
FrontPage 2000是 Microsoft Office 2000办
公套件的成员，是一种可视化的网页制作和站
点管理工具。
从窗口的界面到各种功能的操作方法等各个方
面，都与 Office 2000中的其它应用程序（如
Word 2000,Excel 2000以及 PowerPoint 2000）
高度统一，从而使得 Frontpage成为一种使用
较广的网页制作工具，用户用它可以方便的编
写 html文档。
4.1.1 FrontPage 2000的主窗口
“视图”窗格
显示模式
? 普通
? HTML
? 预览
4.1.2 显示模式
(1) 普通模式：是一种可视化的网页编辑模式。在这里，用户
可以采用, 所见即所得, 的方式设计、编辑和修改网页，系统
会自动生成相应的 HTML代码。
(2) HTML模式：将显示网页的 HTML文档内容。用户可以直接
在该模式下编辑、修改其中的 HTML代码，适用于那些对
HTML比较熟悉的用户。另外，如果网页中包含一些脚本程序，
则这些脚本程序也需要通过 HTML模式编辑。
(3) 预览模式：通过该模式可以预览当前编辑的网页
举例
4.1.3 Web站点的创建与管理
FrontPage 不仅是一个页面制作工具，
同时，它还可以进行站点管理操作。包括创
建、删除、打开、发布站点，以及设置站点
属性等工作，也可以对站点的文件和文件夹
进行操作和安全性管理。
1.创建 Web站点
在计算机上创建一个新的文
件夹 d:\myCustomer,该文件
夹下又包含子文件夹和若干
网页文件。
操作方法是：选择, 文件,,
,新建,,, 站点,,打开, 新
建站点, 对话框，，选择一个站
点模板（这里我们选择, 客户支
持站点, ），在, 指定新站点位
置, 下面的文本框中输入站点主
目录路径，例如：输入
d:\myCustomer,
2,发布站点
所谓, 发布站点,,就是将站点所包含的
文件复制倒指定的目标位置，可以是一台
Web服务器，或者是一个目标文件夹，甚
至是一个可擦写的光盘驱动器。
发布站点具体步骤
输入要发布的站点的位置，可以是一个文件夹，然后单击, 发布,
按钮，开始文件复制，最后会显示一个 FrontPage对话框，显示
,成功发布站点！, 。则当前 Web站点所包含的文件将被传送到
目标位置。
选择菜单, 文
件,,, 发布站
点,,可以打开
,发布站点, 对
话框
4.2 新建网页
(1)单击常用工具
栏的, 新建, 按钮，
自动创建一个空白
网页。
(2)或者选择, 文
件,,, 新建,,
,网页,,打开
,新建, 网页对话
框
新建一个默认网页名为, new_page_1.htm”
FrontPage打开后将自动新建一个默认网页名为
,new_page_1.htm‖的新网页文件，在这里可以直接编辑网页
内容。
4.3 网页的编辑
(1) html文档是一个纯文本文件，没有格式。
(2)使用 Windows的, 记事本, 进行 html文档的
编辑，效率很低，且容易出错。
(3) 使用 FrontPage编辑网页，就是利用
FrontPage的可视化，在, 普通, 视图中,输入
网页中需要的文本、图片、建立超链接、插入
表格、表单等操作。
然后在 html视图可以看到上述设计对应的 html
代码
4.3.1 输入文本内容
（ 1） Web页中文字内容, 在 html文档中, 有很多标记, 如：
<p>,<font>等来对文本格式化, 即给定文本在浏览器中的显
示效果 。
（ 2）文本的输入和格式化。在, 普通, 模式下，在编辑区域进
行输入，再通过, 格式, 工具栏对文本进行格式化，或者通过
,超链接, 工具按钮给文本加上超链接（ <a>… </a>标记）。
举例
（ 1） 在普通模式下输入一行文本, Web技术导论,
（ 2）格式化
, 格式化, 菜单，选择, 字体, 或者使用, 格式, 工具
栏
（ 3）在, html”模式，查看对应的 html代码
普通,html和预览模式
4.3.2 插入图片
在网页上可以插入多种格式的图片，经常采用的是 Jpg
格式和 Gif格式图片，这两种都是经压缩的图片格式，
特别是 Gif格式图片，它不但具有很高和压缩比，而且
还可以制作成动画图片，以增强网页的动感效果，是
目前很流行的图片格式。
图片插入步骤 -1
在 FrontPage中，图片插入步骤如下,
（ 1）执行“插入”、“图片”，可以选择“剪贴画”
或“来自文件”
图片插入步骤 -2
（ 2）转到 HTML显示模式,查看对应的代码
<img border="0"
src="file:///D:/myBook/images/mybook.jpg" width="80"
height="112">
这是一个绝对路径。
此时，保存一下网页文件，在打开将看到上述的路径变成相对
路径。
<img border="0" src="images/mybook.jpg" width="80"
height="112">
设置图片属性 -常规
图片插入以后它在
页面上的大小、位
置等并不理想。要
使得图片符合用户
的要求，则必须对
它的属性进行设置。
右单击“图片”,
执行“属性”，打
开属性对话框。
设置图片属性 -外观
图片外观设置
4.3.3 插入表格
在网页设计中，表格不仅仅用来显示数据，而且表格还是进
行网页布局的重要手段，使用表格，就可对各种网页元素位
置进行精确控制，使设计的网页布局整齐、美观。
步骤演示,
执行“表格”菜单“插入”命令
表格属性
在表格中，右单击，在快捷菜单中，执行
“表格属性”
4.3.4 超链接
（ 1）文本的超链接
（ 2）图像的超链接
1,建立文本超链接
（ 1）选择“文本”
（ 2）在“常用”工具栏中，点击“超链接”按钮
建立文本超链接 —代 码
2.建立图像超链接
（ 1）选择“图片”
（ 2）在“常用”工具栏中，点击“超链接”按钮
在 html视图，对应的图片超链接代码如下,
<a href="bookindex.htm">
<img border="0" src="images/mybook.jpg" width="80"
height="112">
</a>
4.3.5图像地图
使用 FrontPage建立图像地
图非常容易, 具体步骤如
下,
（ 1） 插入图片
（ 2）单击图片，则在
FrontPage的底部显示图片
工具栏,
4.3.6 网页属性
对于网页的 <body>标记有许多属性设置, 这些属性往往影响
到整个网页的显示, 在 FrontPage中, 大部分的 <body>标记属
性是通过网页属性设置的 。
在网页上单击鼠标右键, 从快捷菜单中选择, 网页属性 …,,
打开, 网页属性对话框, 如图 4-16所示 。
网页属性 -常规
网页属性 -背景
网页属性 -边距
网页属性 -自定义
网页属性 -语言
网页属性 -代码
设置背景色：影响的代码
<body bgcolor="#C0C0C0">
4.4框架网页
在网页设计中框架网页是经常使用的一种网页类型，它可以
把浏览窗口分成几个区域，每个区域可以显示一个不同的页
面。通过框架网页可以在一个窗口中同时显示几个网页。
4.4.1新建框架网页
在 FrontPage 2000中创建框架网页可以通过专门的框架网页模
板完成方法如下,
选择菜单“文件”、“新建”、“网页”，打开“新建网页”
对话框，选择“框架网页”选项卡,
设置初始网页
（ 1）设置初始网页
（ 2）新建网页
框架网页的保存
单击“保存”按钮，打开“另存为”对话框，分别保存每一个区
域，和整个框架文件。
4.4.2拆分与删除框架
为了适应不同的需要，用户可以将一个网页框架随意拆分或
合并，形成有自己风格的框架网页。
方法如下,
（ 1）单击某个框架
（ 2）在“框架”菜单中，执行“拆分”框架命令
4.4.3改变框架窗格的大小
框架的大小是可以根据需要改变的。
方法是,
将鼠标指针指向框架，当指针变成形或者形时，按住左键拖
动，达到满意的位置后放开。
4.4.5设置框架属性
可以用以下方法设
置框架属性：鼠标
指针指向框架，单
击右键，从快捷菜
单中选择“框架属
性”，打开“框架
属性”对话框
4.4.6设置超链接的目标框架
假设设计一个“唐诗欣赏”的框架网页，包含两个框架：目
录区和诗文区。
实现步骤
具体的实现步骤,
（ 1）建立框架
（ 2）设置框架属性
（ 3）编辑目录区网页文件
（ 4）建立诗词超链接
选择“目标框架 ‖
选择“改变目标框架,按钮
（ 4）建立诗词超链接
“改变目标框架 ‖
按钮
4.5 使用 Dreamweaver
Dreamweaver是 Macromedia公司推出的“所见即所得”的网
页编辑工具。与 Frontpage不同,Deamweaver采用了 Mac机的
浮动面版 设计风格，对于习惯于 Frontpage 的用户一开始可能
会感到不适应，相信经过较短时间的熟悉很快会习惯了其操
作方式。
我们将以 Dreamweaver4 介绍 Dreamweaver的功能
4.5.1 认识 Dreamweaver
Dreamwe
aver主窗
口界面。
打开 Dreamweaver,显示主窗口，第一次启动 Dreamweaver时，
同时还显示几个浮动窗口
认识 Dreamweaver-1
1,浮动窗口
在打开 Dreamweaver的同时, 会自动打开许多浮动窗口, 主
要包括,
（ 1） 对象面板, 在网页编辑的过程中, 通过单击对象面板的
按钮来为网页添加相应的元素, 如：图片, 表格, 层, Flash。
我们称这些元素为对象 。
（ 2） 属性面板, 用于显示所选中的网页元素的属性, 并可在
属性面板上修改 。 选择不同的网页元素, 属性面板所显示的
内容也有所不同 。
认识 Dreamweaver-2
2,面板的关闭 /打开和排列
在 Dreamweaver的主菜单中，
选择“窗口”可以关闭或打
开相应的浮动面板窗口。
“窗口”菜单如图所示,
认识 Dreamweaver-3
3,启动器和快速启动栏
主菜单的, 窗口, 中, 有, 启动器, 命令, 对应的浮动窗口如
下
同时在状态栏的右边有一个, 快速启动栏, （ 又称启动面板 ）,
功能,
用于显示或隐藏相应的浮动面板 。, 站点, 对应于主菜单中
,站点,
中的, 站点文件, 命令, 用于打开, 站点, 窗口
认识 Dreamweaver-4
4,视图
Dreamweaver有三种视图, 分别对应于工具条最左边的三个
按钮, 三种视图分别是,
（ 1） 按钮, 显示代码视图, 在客户区显示网页对应的
html代码 。
（ 2） 按钮, 显示代码和设计视图, 在客户区水平分割成
两个窗格, 分别显示网页设计内容和对应的代码 。
（ 3） 按钮, 显示设计视图, 在该视图下, 用户可以进行
可视话的网页设计, 此时往往需要通过, 窗口, 菜单, 分别
选择, 对象, 命令和, 属性, 命令, 打开, 对象, 窗口和
,属性, 窗口 。 然后在网页中, 输入文字, 插入图像, 表格,
表单, 框架等内容 。
认识 Dreamweaver-5
左半部是远程站点的
目录，一般显示为空，
只有在 FTP 连通状态
下才有显示内容；右
半部是当前编辑中的
本地目录。站点窗口
的作用是使用户直观
而方便地像管理硬盘
里的文件一样管理站
点。
4.站点窗口
在 Dreamweaver主菜单中，有一个“站点”菜单，来实现站
点的管理。在“站点”菜单下，执行“站点文件”命令，打
开“站点”窗口
4.5.2 定义新网站
在 Dreamweaver的主菜单中，打开, 站点, 菜单，执行, 新建
站点 …, 命令，打开, 站点定义, 窗口，如图 4-24所示。
或者在站点窗
口中（见图 4-
23），在站点
后面的下拉列
表中选择, 定
义站点 …,
定义新网站 -1
在, 站点定义, 窗口中进行如下设置,
（ 1） 站点名称：为网站起的一个名字, 这个名字只起着识别
的作用, 与网站发布后真实的域名无关, 如本例中我们给出的
站点名称是 E-learning。
（ 2） 本地根目录：设置网站在本地硬盘的位置, 点击后面的
文件夹图标可以选择硬盘的任意目录作为存放网站文件的目录
（ 3） 缓存：建立缓存可以使文件的移动, 改名, 查找等站点
管理的操作速度大大提升 。
当上面的设置完成后，返回站点窗口，如图 4-25所示
定义新网站 -2
当上面的设置完成后，返回站点窗口，如图 4-25所示
站点定义完毕之后，
站点主目录下只有一
个 _notes
户可以通过站点窗口
的, 文件
行, 新建文件
,新建文件夹
来创建站点的文件夹
4.5.3 制作网页
要在一个站点中创建网页，
在站点窗口中，首先选择一
个文件夹，然后选择“文件”
菜单，执行“新建文件”命
令。
或者，在站点窗口右侧的
,本地文件夹, 窗格中，在
某个文件夹上右单击来创建
文件。
网页编 辑
在站点窗口中，双击某个文件，该文件将被打开。显示
Dreamweaver主窗口的“显示代码”视图。
文本及其格式化
1．文本及其格式化
选择“显示设计视图”，
在客户区输入相应的内
容，例如输入“欢迎光
临 E-learning网站”
然后,通过, 文本, 菜
单，进行简单的格式化
文本对象属性面板
选择文本，在“窗口”菜单中，执行“属性”命令，显示文本
对象属性面版
可以通过属性面版，对文本进行格式化，或者建立文本超连
接
插入图片及属性设置
2,插入图片及属性设置
如果对象面板没有打开，在 Dreamweaver主窗口中，
选择“窗口”菜单，执行“对象”命令，或者按
Ctrl+F2键，打开对象面板。点击对象面板上的
“插入图像”按钮，然后弹出对话框，选择需要
插入的的图片。
插入图片及属性设置（续）
注意,
如果被选择的文件，是网站主
目录以外的文件，系统就将提
示是否将图片复制到网站内，
提示对话框如图 4-28所示。
选择“是”，然后系统打开一个对话框，让用户选择一个站
点内的文件夹存储该图片。
如果图片不复制到网站内，则网页传上服务器后，图片就不
会被显示，因为图片不在该网站内。
图片属性设置
具体步骤如下,
（ 1）首先在 Dreamweaver主菜单中，选择“窗口”，执行“属
性”命令，打开属性面板。
（ 2）在网页中，点击插入的图片，属性面板显示如图 4-29所示。
显示代码
格式化工作结束后，在“显示代码视图”中，可以看到上述内
容的 html代码，如图 4-30所示。
对象面板
在对象面版，除了标准面板上显示的对象外，点
击右上角的箭头，会显示不同的对象
4.5.4 使用样式表
什么是样式（ style）？
样式（ style） 是一组格式化设置的统称，如字体、颜色、大小、
对齐方式等。 Html中的每一个标记都有默认的显示样式。
在 Word中的样式，对于某段文本应用某个样式（如标题 1、标题
2… ）后，它就会依照样式中定义的格式格式化这段文本。
HTML样式实际上是一系列 HTML格式化标记（如 <font>,<b>
标记等）的组合，用于一次对文本对象进行多个方面的格式设
置。例如，如果希望将文字设置为黑体,4号、加粗、倾斜、红
色格式，按照传统的方法必须分别进行 5次格式化设置。将这 5
次格式化操作组合成一个 HTML样式，并以适当的名字命名，下
次当需要对文本应用这些格式时，只需要一步操作：即应用该
HTML样式就可以了。
CSS样式表基础
CSS是 Cascading Style Sheets（ 层叠样式表单）的简称。它允许
在 HTML文档中加入样式。
在编写 html时候，可以将所有关于文档的样式指定和 html的文
档内容分离。甚至作为外部样式文件供 HTML调用。
CSS样式表可以依附于某个网页上，也可以单独作为一个 CSS
样式表文件保存，应用于多个网页文档。
CSS最基本的特性 -1
CSS最基本的特性：分组、继承、层叠
分组：通常我们需要同时改变几种标记的默认样式属性,CSS允
许声明通过使用分号分隔其内容的方式来进行分组。
例如,
body,td,p {color:#000000,text-align:left}
CSS最基本的特性 -2
继承：通过继承,CSS设置可以被应用到多个标记中。绝大部分
的 CSS声明可以通过封闭 CSS选择器中的 HTML标记来被继承。
例如：通过一个 CSS设置来改变整个页面的字体,
body { font-family,―Arial‖; font-size,14px; line-height,18px; color,
#000000}
这种形式的定义之所以可能，是因为 <body>标记被认为是页面
上所有元素的父标识。
CSS最基本的特性 -3
层叠,Cascading描述了覆盖通用样式的局部样式的能力。在相
同的方式中，一个普遍地应用到某一块文本上的 CSS规则可以被
其他应用到相同文本中某个更为特殊的部分的规则所覆盖。
例如,
设置了 <body>标记的 color属性。同时，某个 <p>标记，也设置了
color属性，则在这个 <p>标记标记的内容将以 <p>标记内的 color
属性设置显示，而不是外层的 <body>标记中设置的 color属性
创建样式 -1
操作步骤,
（ 1）在编辑状态，按 Shift+F11（ 或着在“窗口”菜单，执行
“css样式”命令）,进入样式表对话框（ CSS 样式表），如图
4-31所示。
创建样式 -2
（ 2）点击右下角的, 打开新建样式对话框，如图 4-32所示。
解释如下,
新建样式对话框
? 在“名称”中输入样式的名称，不要删除名称前的,.”；
? 在类型中可以选择是,
–,制作自定义样式”
–,重新定义 HTML标签”（重新定义 body,a,h1等
HTML中已有标签的默认显示样式）
–,使用 CSS选择器”（超级链接的四种状态的样式）；
?,定义在”是代表是把此样式只定义在这个网页文件中，
还是定义在一个外部 CSS样式表文件中，如果选择定义在外
部 CSS样式表文件中，就会弹出窗口选择外部 CSS样式表文
件保存的位置。
创建样式 -3
我们选择, 自定义样式,, 输入样式名字为 myStyle1。 设置
完成后, 单击, 确定, 按钮, 系统自动打开, 保存样式表文
件为, 对话框, 此时选择站点下的一个文件夹保存样式表,
例如我们选择 pub文件 。 接下来进入样式定义对话框, 如图 4-
33所示 。,类型”分
类中，组织
了“字体”、
“大小”等
格式设置，
输入相应的
数值
样式定义中的分类列表 -1
,样式, 定义可以包括多个方面, 这些不同的方面是通过样
式定义中的分类列表来组织的 。
“背景”分
类中组织了
关于“背景
颜色”、
“背景图片”
等的格式设
置，输入相
应的数值
样式定义中的分类列表 -2
不同的分类, 组织了不同的格式设置, 共同构成一个样式的
组成部分 。 详细介绍略 。
“区块”分
类中组织了
关于间距、
对齐等的格
式设置，输
入相应的数
值
创建样式 -4
对样式进行有关的设置，完成后，单击“确定”按钮，返回
CSS样式对话框（见图 4-31），显示一个新的样式,
同时在站点窗口中，显示一个
pub.css文件。
还可以看到，在当前网页的头
部增加了使用样式的 html标记,
<link rel="stylesheet"
href="pub.css" type="text/css">
使用样式
（ 1）选择文本。
（ 2）在样式对话框中，单击某个样式，该样式则作用于选
择的文本。如果文本本身具有某个样式，此时，选择, 无,,
则取消使用的样式。
包含样式的生成代码如下,
<font class="myStyle1">欢迎
光临 E-learning网站 </font>
可以看到：增加了一个 class参
数 。
修改样式 -1
（ 1）打开, CSS样式, 对话框。
修改样式 -2
（ 2）在样式对话框中，双击某个样式，打开样式定义对话
框，即可进行对该样式的修改
小结 -1
（ 1）上面创建的样式是外部样式,只在本页建立样式（仅当前文
档）,可以创建内部样式。在“新建样式”对话框中选择
“仅对该文档”,
则定义的样式出现在当前文档的 <head>…</head> 内，形式如下,
<style type="text/css">
<!--
.w1 { font-family,"Courier New"; font-size,18px; color,#FF0066}
-->
</style>
小结 -2
（ 2）在样式定义对话框中，有如下的列表
分类列表中各项的含义是,
分别定义一个样式的不同的属性参数
举例说明,
在 Dreamweaver中定义一个内部样式 w1,
分别选择不同的分类，可以看到样式
w1中间，包含的许多不同的属性定义。
小结 -3
（ 3） CSS选择器
平时上网你多留意就会
发现了，很多网站做出
来的链接都是无下划线
的（或者鼠标移到后下
划线不见了）。还有是：
在浏览器里更改了字本
的大小后，字体却没有
变化，而自己做的总会
变大变小的。
再次点击 CSS面板上的，
这次选中使用 CSS选择
器和仅对该文档两项，
选择器哪里，选 a:link，
确定后的参数设定如下：
(字本装饰那里选无，表
示无下划线 )
小结 -4
（ 3）关于, HTML样式,
同 CSS不同，应用 HTML样
式的操作不是自动化的，
换句话说，如果对某些文
字应用了一个定义的 HTML
样式，当改变该 HTML样式
所代表的格式时，原先已
经设置格式的文字格式并
不会变化。
关于, HTML样式, 续 1
（ 3）定义, HTML样式,
在样式窗口中，选择
,HTML样式”标签，单击
右下角的“新建样式”按
钮，打开“定义 HTML样式”
对话框
关于, HTML样式, 续 2
对文本的格式设置包括（ 1）设置段落格式和（ 2）设置字符
格式两个方面
HTML样式也包括段落样式和字符样式两种。根据 HTML样
式面板的列表中相应的样式标记，我们可以判断这些样式的
类别：以段落标记开头的样式，表明它是一个段落样式；以
字符 a开头的标记，表明它是一个字符样式
当 HTML样式应用到文本上时，会出现两种情况，一种情况
是清除原先已有的格式，然后应用新的格式，这种样式称作
覆盖型样式 ；
另一种情况是保留原先已有的格式，然后添加新的格式，这
种样式称作 添加型样式 。从样式列表中，我们同样可以判断
这种样式类型，如果样式项前面的标记后带有“＋”号，则
表明它是添加型样式，否则，表明它是覆盖型样式。
关于, HTML样式, 续 3
定义 HTML样式对话框
4.5.5 使用超链接 -步骤 1
超链接包括超文本链接、图像链接和热区链接三种，创建的
方法类似
创建的方法类似, 具体步骤如下,
（ 1）首先打开“属性面板”（窗口菜单，属性命令，
Ctrl+F3）
步 骤 2
（ 2） 选择文字或者图片, 在属性面板的链接 (Link)一项中输入
要链接的文档的 URL地址 。 如果要链接到网站内的文件, 可以
点击, 打开选定文件对话框
“相对于”选项，
意思是选择相对路
径的形式，默认的
方式是文档，即相
对于该文档本身。
也可以选择站点根
目录。区别在于，
文件是指相对路径
是从本页开始计算，
而根目录是从根目
录开始计算（即
,/”） 。
说明
（ 1）如果要链接到一个 E-mail地址，则在链接后面的文本框
中输入,mailto:email地址”，例如
mailto:webmaster@gsl.sdu.edu.cn,那么点击该链接的时候，就
回打开默认的 E-mail程序，例如 Outlook,发送 E-mail到给定的
地址。
（ 2）如果链接到浏览器无法打开的文件，例如 exe,zip等文
件，那么浏览者在点击这个链接的时候，就会打开一个对话
框，询问文件保存到硬盘的位置，即实现文件下载的功能。
4.5.6 使用表格
在 Dreamweaver主窗口中，在, 插入, 菜单中执行, 表格,
命令可以插入一个表格
使用表格 — 技 巧
动态改变表格的颜色，使网页更有动感。
例如：在单元格的 <td>标记里加上,
onMouseOut="this.style.backgroundColor=''
onMouseOver=this.style.backgroundColor='red'
把鼠标移到相应的单元格看看效果。
为什么不能插入表格？
在 Dreamweaver中，可能会遇到不能
插入表格的情况，为什么呢？
这是因为, 对象, 面板中的，在, 标
准, 对象的下面，按下了, 布局视
图,,此时插入表格和插入图层按钮，
都灰化而不可用。此时按下, 标准视
图, 按钮即可。
布局视图
标准视图
4.5.7 文件预览
在一个网页创作的过程中往往要看一下在浏览器中的显示效
果，这就是预览。和 Frontpage 不同，在 Dreameweaver中，网
页的预览是通过 Dreamweaver主窗口的“文件”菜单中的
“在浏览器中预览”来完成的，此时将该文档在浏览器中打
开。
快捷键（ F12）
4.5.8 使用层和新的排版功能
层（ Layer） 是 Dreamweaver中非常好的技术，层往往用于
对页面元素的定位。
什么是图层呢？通俗地讲，图层就象是含有文字或图形等
元素的胶片，一张张按顺序叠放在一起，组合起来形成页
面的最终效果。图层可以将页面上的元素精确定位。图层
中可以加入文本、图片、表格、插件，也可以在里面再嵌
套图层。
图层在平面坐标 x,y上又添加一个具有三维空间的坐标 z，
使图层有一个叠放顺序。图层的一个重要功能就是可以使
页面元素重叠。
创 建图层
（ 1）在“窗口”菜单中，执行“对象”命令（ Ctrl+F2）
（ 2）点击对象面板的“描绘层” 按钮，光标变成一个十
字，在编辑窗口上拖动，即可创建出一个层。
创建两个图
层
图层代码
创建两个图层
<div id="Layer1" style="position:absolute; left:48px; top:37px;
width:103px; height:92px; z-index:1"></div>
<div id="Layer2" style="position:absolute; left:126px; top:78px;
width:113px; height:94px; z-index:2"></div>
对应的代码,
图层编辑
可以在层上输入绝大部分的网页元素，如：图片、文字、表格。
图层编辑代码
对应的代码,
<div id="Layer1" style="position:absolute; left:49px; top:26px;
width:103px; height:92px; z-index:1">
<p>图层一 <img src="file:///D|/mySite1/00.jpg" width="206"
height="165"></p>
</div>
<div id="Layer2" style="position:absolute; left:203px; top:150px;
width:113px; height:94px; z-index:2">图层二 </div>
说明,
图片上的代码是绝对路经，是因为当前的 html文档尚未保存，
也就不知道该网页的路径。保存一次，然后会看到上述代码中
<img 中的图片路经称为想对路经。
图层属性
当插入层后，还需要进行有关的设置。打开属性面板，点击层，
对应的属性面板如图 4-36所示。
Z轴：层叠放的顺序
显示 (V),层的显示状态，隐藏是将层隐藏，处于不可见状态。
标签：层使用的代码方式，一般使用默认的 DIV标记即可
溢出：如果层里面的文字太多，或图片太大，层的大小不足以
全部显示的时候，可以选择,visible（ 超出的部分照样显示）、
hidden（ 超出的部分隐藏）,scrool（ 不管有否超出都显示滚动
条）或者 auto（ 有超出时才出现滚动条）
Layout排版功能
在 DW4（ DreamWeaver4） 中的 Layout排版功能，能够更加直接
方便地对页面布局进行编排。在对象面板的最下方有四个按钮,
视图,
布局,
标准视图按钮：默认状态下的视图。 此
按钮按下，才可以插入图层和表格
排版视图按钮：按下后，上面布局中的两
个按钮就可以使用了。
绘制布局表格按钮：象画图一样在页面里面排版表格
布局单元格按钮：在表格中画单元格。
Layout排版页面
利用以上的工具排版一个新页面，具体步骤如下,
新建一个页面，点 进入排版视图，点 在页面上画出表
格，再点,在表格中画出单元格，其中表格会以绿色框
表示，单元格会以蓝色表示，未确定的单元格会以灰色表示，
如图 4-37所示。
注意,
执行“查看”、
“标尺”命令，
显示标尺
Layout排版页面续 1
调整完成后，点击 标准视图按钮,回到标准视图，可以看
到刚才画的,Layout Table‖已经全部转化为表格了。
Layout排版页面续 2
上述表格对应的代码,
<table width="281" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="142" valign="top" rowspan="2"> </td>
<td width="139" height="75" valign="top"> </td>
</tr>
<tr>
<td height="113"></td>
</tr>
</table>
4.5.9 制作简单的互动效果
在对象面版中，有一个插入图标经过按钮,它的作用是
当鼠标移到一张图片上的时候，原来的图片就切换为另一张
图片，鼠标移开后，又恢复原来的模样。具体实现步骤如下,
（ 1） 准备两张大小相同的图片, 一张是鼠标没有移上去的时
候的状态, 一张是鼠标移上去后的图片 。
（ 2）点击对象面板上的,打开“插入鼠标经过图像”对话
框
代 码
完成后生成的代码,
点击网页的“显示代码视图”按钮,在文档的 <head>…
</head> 内生成一段 JavaScript脚本程序
用于实现鼠标经过时简单的互动效果。自己可以实验
4.5.10 使用行为
（ 1）事件和事件相应
用户的操作会产生事件，例如：鼠标的移动、点击等事件
(Events)。 当某个事件发生时，可以定义事件的处理函数，来
响应事件。在 Dreamweaver中,事件的响应 称为“行为” 。
（ 2）行为对应了标记的事件属性。添加行为实际上对应为一
个具体的标记添加事件属性。
Dreamweaver在窗口的状态兰显示各个标记，这为添加行为带
来了很大的方便。
为网页添加行为 -1
在网页加入行为，需要以下几个步骤,
（ 1）在窗口菜单中，打开“窗口”菜单，执行“行为”命
令，打开行为面板，如图 4-39所示。
为网页添加行为 -2
（ 2）选取产生行为的元素，例如：图片、段落、超链接文
字、层等。 或者，点击 Dreamweaver状态栏中的某个标记。
例如，如果需要在页面一载入就开始出现效果，可以选择状
态栏上的 <body>标签
为网页添加行为 -3
（ 3）按 按钮，打开一个相应列表,
不同的元素，对应的响应也有所不
同），选择一种响应并在随后的对话
框中设置此响应的属性。
可以供选择的响应包括,
为网页添加行为 -4
可以供选择的响应包括,
? 播放声音：可以为网页加入声音
? 打开浏览窗口：可以打开一个小窗口 （ 和网上的弹出窗口一
样 ） 。
? 弹出信息：可以弹出一条警告信息 。
? 调用 JavaScript,调用网页中包含的 Javascript程序。
? 对调图像：实际上是交换图像；
? 更改办容：可以改变已经插入的层的内容；
? 恢复对调图像：把已经交换的图像恢复过来；
为网页添加行为 -5
? 检测插件：可以检测访问者的浏览器是否己安装浏览网页所
必须的插件；
? 检测浏览器：检测访问者使用的是什么类型的浏览器；
? 检验表单：检验网页中的表单是否合法；
? 控制 Shockwave或 Flash,控制网页中包含的 Shockwave或
Flash；
? 前往 URL,跳转到其它页面；
? 设定导航栏的图片：和交换图像差不多；
? 设置文字：在特定的地方显示文字；
? 显示或隐藏层：设置图层的显示或隐藏；
为网页添加行为 -6
? 时间轴：可以制作更多的动态交果；
? 跳转菜单：插入跳转导航菜单；
? 跳转菜单前往：控制导航菜单跳到哪个页面；
? 拖动图层：设定图层是否允许拖动；
? 预载图像：在网页装载前先预先载入图像；
? 显示事件用：设定显示 IE或 NS各个版本的事件；
? 下载更多的行为事件：打开网页, 去下载更多的事件 。
选择触发行为的事件
添加完行为后，在行为对话框中列出，对应的事件和动作列表。
不同的元素可以触发的事件也不相同，通过选择事件, 可以决
定在什么情况下触发响应。常见的的事件有
· onMouseOver,鼠标移到目标上；
· onMouseUp,按下鼠标再放开左键时；
· onMouseOut,鼠标移开时；
· onMouseDown,按下鼠标时；
· onClink,点击时；
· onDblClick,双击时；
· onLoad,载入网页时；
· onUnload,离开页面时；
· onResize,当浏览者改变浏览窗口的大小时；
· onScroll,当浏览者拖动滚动条的时。
举例 -为文本（即 <p>标记）添加行为
（ 1） 输入一行文本,欢迎光临 E-learning网站,
（ 2） 在 Dreamweaver状态栏选择该文本 <p>标记
（ 3） 在行为面板中, 单击 按钮, 在行为列表中, 选择
“弹出信息,,打开,弹出信息,对话框
输入弹出的信息，例如,hello‖,然后，单击“确定按钮”
举例 --续 1
输入弹出的信息，例如,hello‖,然后，单击“确定按钮”，此
时行为面板显示，新增加的行为，如图
行为面板的标题栏，显示是为
一个 <p>标记添加了行为
举例 -续 2
（ 4）为行为选择触
发事件
当为对象添加了行
为后，在行为面板
增加一行来显示行
为和行为的触发事
件。
单击事件后面的下
拉箭头，显示可能
的触发事件列表，
如图,
选择一个事件即可
举例 -代码
转到显示代码视图，，查看添加行为后对应的 html代码
举例 -运行
保存上述的文件，在浏览器中打开，然后在网页文字上单击，
谈出一个消息，如图
使用行为小结
（ 1）添加行为，本质上是为标记添加事件属性
（ 2）不同的标记接受的事件不同
（ 3）要善于使用 Dreamweaver的状态栏，选择不同的标记
（ 4）在 Dreamweaver状态栏，选择一个标记，在行为面板将
显示该标记已经添加的行为，选择一个行为，点击行为面板
的 -按钮，可以删除该标记的一个行为
（ 5）通过行为面板，可以选择触发行为的事件
[例 4-1] 浮动提示效果的实现
（ 1） 首先插入一个两行三列的表格，第二行的三个单元格合
并起来，边框为 0，并填充文字，文字加上相应的链接，第二
行的单元格插上一个图层（命名为,google）。 如图 4-40所示。
如果 不能插入表格,请执行“窗口”菜单下的“对象”，
按下“标准视图”按钮即可。
续 -1
（ 2） 双击图层，将图层命名为,google。 如图 4-40所示。
续 -2
（ 3）选取 google文字，（或状
态栏的 <td>标记 ） 按 Shift+F3，
打开行为面板，点击行为面板上
的,选取“设置文本”、
“设置图层文本”，出现对话框，
在出现对话框如下（在新的
HTML里填上需要的文字），然
后按确定。如图 4-41所示。
续 -3
（ 4）打开“设置层文本”对话框，在新的 HTML里填上需要
的文字，然后按确定。如图 4-41所示。
续 -4
（ 3）再点击一次重复刚才的步骤，不过这次，新的 HTML里
不填任何文字，然后确定。
（ 4）点 onMouseover旁边的向下的箭头，把第二次加进的行为
onMouseover改为 onMouseout,如果找不到，显示更多事件，再
选其它版本浏览器，这样就有 onMouseout了。
注意：是为
<td>标记添加
行为，而不是
图层 <div>
续 -5
注意：是为 <td>标记添加行
为，而不是图层 <div>
续 -6
（ 5）对于另外的两个搜索引擎字，操作和上面的步骤一样，
只不过加入的文字不同。
续 -7
保存网页，在
浏览器打开
（或着按 F2看
看你的效果）。
可以看到当鼠
标移到
GOOGLE文字
上的时候，显
示文本
,www.google.
com搜索引
擎,,既实现
了浮动提示效
果。
代码
选择, 显示代码视图,,可以看到比较复杂的 html代码。
