Dream weaver网页设计技术

第2章Dreamweaver网页设计技术

—学刁目:标----------

♦面板组、插入菜单、属性面板的使用

♦文本的格式化类型

♦超链接的使用

♦用表格组织网页

♦框架、表单及层的使用

♦动态网页技术

返回总目录

第2章Dreamweaver网页设计技术

教学内容

2.1Dreamweaver基研;知识

2.2创建及设计页面

2.3链接与导航

2.4用表格和表格布局模式布局页面

2.5用框架布局页面

2.6表单的使用

2.7层的使用

2.8动态网页技术

本章小结

返回目录

2.1Dreamweaver基石出知识

Dreamweaver由

Micromedia公司

出品，是当今最

流行的专业网页

设计、网站管理、

网页可视化编程

应用软件。主要

用于制作网站的

静态网页，具有

跨平台、跨浏览

器的特点。左图

为Dreamweaver

MX2004工作界

DreamweaverMX2004工作界面面。

返回目录

Dreamweaver基础知识一菜单栏

文件(F)翻⑻聒(V)福人⑴腋(M):miF松6站点⑸窗口(W)帮助(H)

菜单栏

“文件”菜单：包含“文件”菜单的标准菜单项。

“编辑”菜单：包含“编辑”菜单的标准菜单项。

“查看”菜单：可以设置文档的各种视图。

“插入”菜单：与“插入”栏功能相似，用于向文档插入对象。

“修改”菜单：可以更改选定项目的属性。

“文本”菜单：用于设置文本的格式。

“命令”菜单：提供对各种命令的访问。

“站点”菜单：提供用于管理站点、上传站点和下载文件的菜单项。

“窗口”菜单：提供对Dreamweaver中的所有面板、检查器和窗口

的访问。在窗口菜单中可以设置面板的打开或关闭。

“帮助”菜单：提供对Dreamweaver文档访问的帮助信息，在

Dreamweaver中遇到的大部分问题都可以从“帮助”菜

单

中找到答案。

返回目录

2.1Dreamweaver基础知识一插入栏

单击“插入”栏的下拉按钮,

出现菜单方式的选项卡。

-ft?

可以根据插入对象的不同选衰绰

择不同类别的选项卡，不同选项文本

ITML

卡包含创建不同类型对象的按应用

钮。单击“显示为制表符”可转尸laah

为收由夹_________

豆奈汨伟U双疗

常规样式的“插入”栏。图为插

入”

▼插入常用布局袤单文本HTML应用桎序Flash元素收藏荚

栏的两种显示方式:AEJ，昌|匡）国-回臼|的,字

“插入”栏的两种显示方式

返回目录

2.1Dreamweaver基础知识一文档工具栏

文档工具栏如右图所示,

U犒i酚•计嫄壬丽

包含按钮和弹出式菜单,

提供各种“文档”常用视图、各种查文档工具栏

看选项和一些普通操作。文档工

具栏内容从左到右依次为：

代码视图：以代码的形式显示页面，方便文档代码编写。

拆分视图：同时显示代码和设计视图，可同时看到两种效

果。

设计视图：以设计形式显示视图，可看到所见即所得的网页

效果。

标题：可在标题文本框中为文档输入或修改标题。

服务器调试：显示一个调试现行浏览器的报告。

文件管理：显示“文件管理”弹出式菜单。

在浏览器中预览/调试：随时预览网页在浏览器中的效果。

返回目录

2.1Dreamweaver基础知识一文档窗口

文档窗口用于显示文档，有“设计视图”、“代码视

图”、“拆分试图”三种显示方式。

设计视图：用于可视化页面布局、可视化编辑和应用

程序开发的设计环境，此视图类似在浏览器中查看页面。

代码视图：用于编写或编辑html、JavaScript＞服务

器语言代码、其他类型代码的编码环境。

拆分视图：可以在单个窗口中同时看到同一文档的

“代码”视图和“设计”视图。

返回目录

2.1Dreamweaver基砒｝知识一属性面板

属性面板用于

显示和修改已选定

对象的属性，可以

对文本、图像、表

格、层等进行属性

设置。不同的对像

对应不同的属性面

板。

打开“窗口”属性面板

菜单一选“属性”，

可以显示或隐藏属

性面板

8

返回目录

2.1Dreamweaver基砒｝知识一面板组

好设计

h：►代码

面板组在工作界面的h►应用程序

右边，如图所示。单击面好标签检查器

板窗口左边的按钮，可展文件三

■IL

开或折叠整个面板窗口。r

11囹桌面3管理站点

单击每一个面板组左上方

的按钮，可展开或折叠该日面桌面

Bi我的电脑

面板组窗口。E卬网上邻居

函FTP&RDS服务器

E)O桌面项目

L_____________।力

面板组

返回目录

2.2创建及设计页面一创建文档

1.创建网页文件

创建空白网页可以用两种方法：

方法1：在起始页“创建新项目”列表中单击“HTML”，建立一个

空白

页。

方法2：在工作窗口打开“文件”菜单一选“新建”一“类另列

表中选

“基本页”一“基本页”列表中选“HTML”一单击“创建”，建立一

个空白

页。

2.利用Dreamweaver提供的示例文件创建网页

“文件”菜单一“新建”一在“类别”列表中选一种实例文档（如

页面设计

CSS）T在“页面设计CSS”列表中选一种网页样式一单击“创建”，

网页

返回目录

2.2创建及设计页面一创建文档

3.保存新建立的网页

“文件”菜单一“保

页面属性

>分类外观

存"—题t

页面字体但）：|默认字体

标-3

标i

跟大小：|31'-：_d

指定保存位置、文件名及文本薮色①匚mi

背景颜色也）CJI-

保存类型一单击“保存”。

左边距电）：Ipz?:jj右边距也）I卜」

-

4.设置文档属性上边距比）：Ipn―3下边距@）If-_J

“修改”菜单一“页面I确定|取消］应用必）|帮助卸|

属页面属性对话框

性”，打开“页面属性”

对话

框，如图所示。通过“页

面

房桩”74*；壬木庠nTIHVvFTFf而

返回目录

2.2创建及设计页面一设置文本_________

文本是网页元素中主要部分。

1.输入文本

在文档窗口单击，将插入点置于文档中所需位

置，输入文本或插入其他网页元素。

2.设置文本格式

文本格式的设置利用属性面板完成，属性面板

可以对文字标题、字体字号、颜色、对齐方式、

列表等作设置。

返回目录

2.2创建及设计页面一插入水平线

水平线能将网页中不同

功能的区域分割开来。

插入水平线练习

1.在页面单击鼠标确定水平线位

置一“插入”菜单一“水平

线“O

2.速中太平线一在属性面板为水

平线起名"line-1”。

3.宽度设为200像素，高度为10

像素，若用“百分比”作宽度

单位，表示宽度占浏览器窗口插入水平线

的百分比。设置水平线在页面

中的对齐方式为“居中对齐”

如图4木。

13

返回目录

2.2创建及设计页面一使用CSS样式

样式是一系列预制的排版命令。CSS（CascadingStyleSheet

层叠式样式表）是一系列格式规则，包括对文字及段落的修饰，用

于控制网页的外观，使整个站点中的网页格式保持统一，快速实现

网页格式化。同一网页中样式按不同等级应用，手动html格式覆盖

css样式所应用的格式。

样式表文件扩展名为.CSS,是纯文本格式，可使用任何纯文本

编辑器创建或打开样式表文件。建立样式表文件要依据CSS规则，

它由两部分组成：选择器和声明。选择器为样式名称，声明用于定

义样式元素。Dreamweaver提供创建样式表的模板，可轻松创建出

用户所需的样式表。

返回目录

2.2创建及设计页面一使用CSS样式

1.创建CSS样式表

(1)“文件”菜单一“新建”(打开“新建文档”对话框)一在

“类别”列表框中选择“CSS样式表”T在右侧的列表框中选

择一种样式表，通过预览框查看其效果。

(2)单击“创建”按钮打开样式表编辑页面，扩展名为“.css”。

(3)“文件”菜单->“保存”->下拉框中选择“样式表

(*.css)”一输入样式表名称一单击“保存”按钮。

2.新建CSS样式

若对创建的模板样式不满意，还可以新建样式，步骤如下：

(1)确定插入点，执行下面操作之一打开“新建CSS样式”对话框。

•在“CSS样式”面板中单击“新建css样式”按钮；

■在文本属性面板中选择“样式”一“管理样式”一新建；

・“文本”菜单一“CSS样式"T“新建CSS样式”，对话框如图

(新建

CSS样式)所示；

返回目录

2.2创建及设计页面一使用CSS样式

(2)在“名称”文本框中输

入

新样式名。

(3)“类型”区中提供3种

类型

选择其中一项。

新建CSS样式

(4)单击“确定”按钮，出.新样式的css样式定义凶

分类类型

现类型

背景

区块

方框

“新样式的CSS样式定边报

列表

定位

义”扩展

对话框，在其中定义样

式的属性。

(5)创建样式后，单击“确

定”按钮，该样式会出

现

在样式表文本中。

CSS样式定义

(6)单击“文件”一“保存”

16命

令，保存当前样式表文

返回目录

2.2创建及设计页面一使用CSS样式

3.样式表在网页中的应用

(1)打开需要应用样式表的网页一“文本”菜单

一CSS

样式一编辑样式表一在弹出的对话框中单击“链

接”一单击“浏览”一选择刚创建的样式表一单

击“确

定”回到“编辑样式表”对话框一在列表中显示

刚添

加的样式表文件一单击“完成”。

(2)如果给标题套用刚创建的样式，方法为：将插入

点置于“类”所在的段落一“窗口”菜单

一CSS样式

.五曰“CGO士工一P*，，不7小:r+nM+“田中土上一^，，

返回目录

2.2创建及设计页面一使用CSS样式

4.修改样式

若对已设置的样式中某些属性设置不满意，可以修改该样式。

单击“CSS样式”面板中的“编辑样式”按钮一在列表中右击需

要修改

的样式名T快捷菜单中选择“编辑”命令一在弹出的属性对话框中改

动

“样式”及“大小”。

5.删除样式表

“文本”菜单一CSS样式表一弹出“编辑样式表”对话框T在列

表框中

选中要删除的样式名一单击“删除”按钮。

6.更改样式表

单击“编辑”按钮一完成用户对样式表更改一单击“完成”按钮。

18

返回目录

2.2创建及设计页面一插入图像

Web页图像的格式通常有三种：GIF、JPEG、PNG。

1.插入图像

在网页中插入图像可按以下操作进行：

在文档窗口中单击以确定图像要插入的位置一“插入”

菜

单一“常用”类别中单击“图像”图标旁的向下箭头一在

弹出的

菜单中选择“图像”一弹出“选择图像源文件”对话框

（“文件

系统”用来选择图形文件，“数据源”用来选择动态图像

源文

19件）一指定图像文件所在位置一从列表框选取所需的图像

返回目录

2.2创建及设计页面一插入图像

2.编辑页面图像

在Dreamweaver中可以直接编辑页面图像，包括改变

大小、对齐方式、调整亮度和对比度、锐化图像等。

1）调整大小

单击页面中的图像一鼠标移至调节柄处拖动（按shift

键保持图像比例不变），也可通过“属性”面板输入“高”

和

“宽”的具体数值来调整图像大小。

2）设置图像的对齐方式

选定图像一单击“属性”面板中对齐按钮组中的一个

使图

像移至页面的左侧、右侧或居中。若既有文字又有图像，

返回目录

2.2创建及设计页面一插入图像

用“属性”面板中“对齐”下拉列表框来改变图像与文字

的相互

对齐方式。

3）调整亮度/对比度或锐化图像

选择图像一单击图像属性面板中的“亮度/对比

度”T拖动滑块进行调节T单击“锐化”T改变图像

锐度。

21

返回目录

2.3链接与导航一文档位置和路径

每个网页都有一个惟一的地址，称为统一资源

定位器（URL）。当创建本地链接时，通常指定一个起自

当前文档或站点根文件夹的相对路径。

连接路径有三种类型：

1.绝对路径：提供所链接文档的完整URL。

2.文档相对路径：省略当前文档和所链接文档都相

同的绝对URL部分，只提供不同的路径部分。

3.站点根目录相对路径：提供从站点文件夹到文档的

路径。

返回目录

2.3链接与导航一链接到文档的常用方法

超链接源通常采用文本和图像，链接目标通常为

网页或文件，一般用URL定义。一个文本超级链接只

分配一个目标URL地址。图像上的超级链接不能直接

在浏览器中显示，访问时可利用鼠标指针判断包含超

级链接的图像。

图像超级链接可以用两种方式分配目标RUL：

1.整个图像作为一个超级链接。

2.图像分为多个热点，用热点作为图像上的超级

链接区域。

返回目录

2.3链接与导航一创建文本超链接

使用属性面板的文件夹图标、链接文本框或“点到文

件，，

图标链接文档。方法如下：

1.文档窗口的“设计视图”中选择文本或图像。

2.属性面板的“链接”框中填入要链接到的页面地址,

最好用相对路径地址，也可以单击“点到文件”图标，选

取

要链接到的文件，或用鼠标把本地站点文件列表中的文件

直接拖到属性面板的“链接”框中。

3.对“目标”进行设置。“目标”用来定义超链接被

点击

时链接到的页面视窗打开方式。目标后的下拉选框可不

返回目录

2.3链接与导航一命名锚记链接

命名锚记用于在文档中设置标记，这些标记通常放在

文档的特定主题处或顶部，然后创建到这些命名锚记的链

接。

创建到命名锚记的连接过程分两步：创建命名锚记和

创建到命名锚记的链接。

1.创建命名锚记：将插入点置于要放置锚记的位置

一“插入”菜单一“命名锚记”一在“锚记名称”框中输

入锚记名

字一单击“确定”。在插入点即出现一个锚记。

2.创建锚记链接：选定要添加链接的文字一属性面板

的“链接”框中输入和锚记名字一回车确认。

返回目录

2.3链接与导航—图像地图

用一个图形的不同部位制作热点分别链接到不同页

面，称为图像地图。分两步如下：

1.创建图像地图热点

图形属性面板左下方有一项为地图，用它完成制作图

像地图。在其后可填入映象名称，若不填，Dreamweaver

会自动加上一个名字。“地图”下面有三个图标，从左到

右

依次为：截取矩形、截取圆形和截取不规则图形。用鼠标

选中图形的某个区域，当鼠标拖出的选框与目标不重合

时，可使用键盘上的方向箭头来调节。

2.为热点指定链接

・选定董添加链接的热点，在热点属性面板中输入链接目

标，在“替代”框中输入提示性文字。

返回目录

2.4用表格和表格布局模式布局页面一创建表格

1.将插入点置于网页中要插入

表格的位置-“插入”菜单一“表

格”，

出现如图所示的“插入表格”对话

框。

“行数”框指定表格行数。

“列数”框指定表格列数，

“宽度”框指定表格宽度。

“边框”框指定表格边框线宽度。

“单元格填充”框指定表格中各

单

元格的内容与其边框之间的距离。

“单元格间距”框中指定表格的插入表格对话框

各

单元格之间的距离。

272.设置完成后单击“确定”按

钮，

返回目录

2.4用表格和表格布局模式布局页面一编辑表格

1.添加行或列：

单击某单元格一＞“修改”菜单一“表格”一“插入行”（或“插

入列”）。

2.删除行或列

选定完整的行或列一“编辑”菜单一“清除”（或按delete键）。

3.合并单元格或拆分单元格

选取连续单元格一“修改”菜单一“表格”一“合并单元格”

（或拆分单

元格）。也可单击属性面板中“合并单元格”或“拆分单元格”按

钮。

4.改变单元格所跨的行或列的数目

选定单元格一“修改”菜单一“表格”一“增加行宽”（或“增

加列宽”）o

选定单元格一“修改”菜单一“表格”一“减少行宽”（或“减

少列宽”）。

285.使用剪切、复制、粘贴命令对单个单元格或多个单元格进行操

住台匕但即由十枚的枚#出皆

返回目录

2.4用表格和表格布局模式布局页面一表格属性面板

选定表格后，表格属性面板如图所示。可对表格

属性面板中各选项进行设置。

r一n

Lr趟Id行©3一翅7厂厂3色砌厂淞Q)麻一3

Lr

见©厂蒯厂帼勺间嬲「遮Q)L-

用用目般鼬@口

表格属性面板

29

返回目录

2・4用表格和表格布局模式布局页面一用布局模式布局页面

1.绘制布局单元格

绘制布局单元格步骤：gg标准视图梅函|口口

1）“插入”栏中“布

局”选

项卡当前一选“布局视

图”。

2）单击“绘制布局单

元

格”按钮。

3）将鼠标指针移到页

面上拖动创建布局单元布局单元格

格。如图绘制的单元格为

蓝色的轮廓、白色的背

景。

返回目录

2・4用表格和表格布局模式布局页面一用布局模式布局页面

2.绘制布局表格

绘制布局表格的步骤：

1）布局视图当前一单击“插

入”栏。

2）“布局”选项卡当前一＞选

“绘

制布局表格”按钮。

3）将鼠标指针在页面拖动以

创建布局表格。

如图绘制的表格具有绿色轮

廓线。在绘制的每个表格顶部有

一个“布局表格”标签，能帮助布局表格

用

户识别并选定表格。

31

返回目录

2-4用表格和表格布局模式布局页面一用布局模式布局页面

3.绘制嵌套布局表格

步骤如下：

1）在布局视图中单击“插入”栏一“布局”

页—>"绘

制布局表格”按钮。

2）将鼠标指针定位到已有布局表格的灰色空

间中一单击并拖动鼠标创建嵌套布局表格。嵌套布

局表格不能大于包含它的布局表格。

4.向布局单元格中添加内容

单击需要插入内容的布局单元格，输入文本或

者插入其他对象。要想让布局单元格自动适应文

本内容，应选择“清除单元格高度”命令。

返回目录

2・4用表格和表格布局模式布局页面一用布局模式布局页面

5.移动或调整大小7.设置列宽度

(1)调整布局单元格或表格大小：布局视图可以使用两种类型宽度：固

单击布局单元格的边框或单击定宽度和自动伸展。固定宽度以像素

布局表格上方的“布局装盾”

值指定宽度，自动伸展则使得宽度根

标签一将鼠标指针指向某个句据窗口方小自动调整。

桶一■按住鼠标无键施动。

(2)移动布局单元格或表格：何福僦"瞅『啬k肝明牺

单击布局单元格的边框或单击

石局表格标签一＞拖动布局市兀」「勤榭榔豳口一豆©际三

格或表格到目标地。

布局单元格属性面板

6.格式化布局单元格和布局表

格

通过属性面板可以改变布局单

元格或表格的外观，设置单元

格内容的对齐方式、宽度、高

度和背景颜色等。如右两图所布局表格属性面板

7J\O

返回目录

2.5用框架布局页面一创建框架和框架集

Dreamweaver提供两种创建框架集的方法：选择预定义框架集

或用户自己设计。

1.插入预定义框架集

单击“布局”卡的“框架”按钮，弹出菜单如下图所示。可从中选

择预

定义框架。若对预定义框架集不满意，可进

IT-1左侧J才国杂行手工改动。方法是：先用预定

^31贡司s市国多同义框架集产生一个框架，用鼠标

(=1咸青口王在弟上下拖边框可以水平划分窗口，

g〒万彳口卷*白勺冬iwu*匡坨

D1下方彳口筋:*的七1WU*匡坨左右拖边框可以垂直划分窗口，

fra主仞》!l彳口取*白tT-F*KnH王用

曰I方倒!J不口筋r蕃白勺下方本田坨从四角拖，可以划分四个框架。

!_i上方不口下方未住用拖动框架之间的分割线可调整框

rr=i主知u彳口锭*白勺了贝音RT匡致

曰|君曲！j,口应毒自勺上方*匡华架大小。若想继续拆分，按ALT键

^3皿酒帘彳口好*白勺江询叨*1至疑拖动框架。如果要删除某框架，

F=fl上方不口有关*白勺者flWU*医叁痣

将框架边框拖离页面即可。

预定义框架集样式

34

返回目录

2.5用框架布局页面一设置框架集与框架属性

1.设置框架集属性。2.设置框架属性

单击框架边框线选定框架集，下图按住ALT键单击框架内部，

为“顶部和嵌套的左部框架”属性面板。此时属性面板为框架属性面板,

如下图所示。

口

框

行

列

“顶部和嵌套的左部框架”属性面板框架属性面板

35

返回目录

2.5用框架布局页面一在框架中插入文本和图像

可以加载已经创建的网页，也可直接在每个框架区域中插入

文本和图像。

1）在框架中单击一＞“插入”菜单一“图像”，可在当前位

置插入

在框架中插入文本和图像

36

返回目录

2.5用框架布局页面一保存框架和框架集

框架结构完成后，首先选定框架集，“文件”菜单

―“保存框架”，在“另存为”对话框中选择要放置网页

的文件夹，为框架文件命名，最后单击“保存”按钮。要

保存框架集中的所有的文件，单击“文件”菜单一“保存

全部”，在“保存为”对话框中，使用框架线辨别正保存

的是哪个框架或框架集，为每个框架文件指定文件名，逐

一保存。

如果某页面选定的框架为“顶部和嵌套的左部框架”，

页面被划分为3个框架，存储时要存储4个独立文件：一个

是框架集文件，通常起名为“index.htm"，另外三个是框架

内容文件。框架集文件除了存储页面框架大小和位置信息，

还存储每个框架载入文档的文件名。框架内容文件则存储

页面框架中的内容。

返回目录

2.6表单的使用一表单概述

表单是由文本和表单域组成的集合，用于在因特网上

收集指定类型的信息，如登录注册、图书订购等。表单的

工作原理很简单，访问者在被称为“表单域”的特定网页

元

素中键入或选择相关的信息，单击“提交”按钮将信息提

交

给服务器。服务器根据表单结果进行处理，并将这些信息

保存到特定文件中以便站点管理员查看。

一个完整的表单应该包含两个组件：一个是表单对象,

它在网页中进行描述，另一个是表单处理程序，它是Web

服务器上的一个程序，当站点访问者向服务器提交一个表

单时程序开始执行。只有将网页中的表单与某个表单结果

处理程序关联之后才能实现该表单功能。表单中包含多种

被称作“控件”的对象。

返回目录

2.6表单的使用一创建表单

1.插入表单

插入表单可采用两种方法：

(D将插入点置于要插入表单的位置一“插入”菜单

一“表单”，可看到表单被插入到当前位置。

(2)将插入点置于要插入表单的位置一单击“插入”栏

内“表单”页一单击“表单”按钮，表单将被插入到当前

位置。

2.各表单对象图标

表单卡如图所示，上面有各表单对象的按钮图标，单击

苴中的苴小坊钊论在走的山小能粒v吐笏

八而回|口畋吸…I:团肌乖口

表单卡

39

返回目录

2.6表单的使用一创建表单

3.设置表单域属性

将插入点置于表单内部，显示表单的属性面板，如图所示。

属性

表单缄麟厂瞄|3

D方法3哑翘।3

表单属性面板

表单名称：在文本框中为表单设一个名称，命名后的表单可以用

JavaScript或VBScript之类的脚本语言进行控制。

动作：指定表单被客户端提交后在服务器端对其信息和数据做出响应

和处理的程序或脚本的URL地址，在此项中输入程序的路径名称，或者单

击右边的文件夹图标，在弹出的对话框中选择要运行的程序或带有脚本程

序的网页。

目标：指定一个窗口，显示调用程序所返回的数据。

MIME类型：指定对提交给服务器进行处理的数据使用MIME编码类型。

返回目录

2.6表单的使用一添加表单对象

1.添加表单对象

在表单中要插入对象的位置单击一单击表单页中对

象图标。

2.添加文本域对象

文本域是用来输入信息的表单对象。文本域类型有3

种：

1）单行文本域：用来填写单个字符或者简短回答。

女口卅山卜o

2）多行文本域：用于填有较长内容。该文本域行数

和字数都可由用户自己确定。

3）密码域：一种特殊的文本域。当输入文本时，文

本显示为星号或其他符号。

41

返回目录

2.6表单的使用一添加表单对象_________

3.添加单选按钮组

单选按钮组提供彼此排斥的选项值，在单选按钮组内只

能选择一个选项。

4.添加复选框

复选框允许从一组选项内同时选择多个选项。

5.添加列表

列表提供一个滚动条供用户浏览项目，能在有限的空间

内为用户提供许多选项，并进行多重选择。

6.添加按钮对象

使用表单按钮能将输入表单的数据提交到服务器，还可

将其他已经在脚本中定义的处理任务分配给按钮，例如，

表单按钮可以根据指定的值计算出所选商品的总价。

返回目录

2.6表单的使用—检查表单

表单通常有确定的填写规范，在网页中应提醒访

问者避免简单的填写错误。

“检查表单”动作能检查指定文本域的内容以确

保用户输入的正确性。使用。nBuIr事件可将此动作附

加到单个文本域，在用户填写表单时对域进行检查。

使用onSubm让事件可将动作附加到表单，在用户单

击“提交”按钮时对多个文本域进行检查。

43

返回目录

2.7层的使用一创建层

层是网页制作的新技术，特点是使用方

便，可以使用“层”来布局网页，比表格更

灵活。在Dreamweaver中，层可以放置在网

页内任何位置，不但可以包含文本、图像、

表格、插件，还可以在层中嵌套另外的层。

1.在网页中插入层

在网页中插入层的操作步骤为：将插入

点置于要插入新层的位置一单击“插入”栏

“布局”页中的“层”按钮。拖动可以改变

层大小。

2.创建嵌套层

嵌套层是包含在其他层中的层，嵌套可

以将若干层组织在一起。嵌套层随父层一起嵌套层

移动，并且可以设置为继承其父层的可见性。

要创建嵌套层，只需将插入点置于已经创建

的层中，单击“插入”菜单，选“层”命令

即可。嵌套层如右图所示。

返回目录

2.7层的使用一创建层

3.通过层属性面板定义属性(5)可见性:参数有default、

选定层后，其属性面板如图所示。visible>hidden和inherit,对应的含

义为：默认、可见、隐藏、继承父

画,可而，隔T厂噩餐近~~j层的可见性。

荆恒陋生上07生I®：：5p可赃QJderwlt飞短牌0口^位一(6)背景颜色：指定层的背景颜

鼬I三整:左一右一色。

上!—下一(7)背景图像：指定层的背景图

像。

层的属性面板(8)溢出：选择visible则扩展层的

各选项的意义说明如下：大小使其所有内容均可见。选择

(1)层编号：指定层的名称。hidden则保持层的大小裁掉所有超

(2)宽、高：指定层的宽度和高度。出层大小的内容。选择scroll则不管

(3)左、上：指定层相对于页面或被嵌内容是否超过层的大小都提供滚动

套层的左上角的位置。条。选择auto则只有在内容超出层

(4)Z轴：指定层的叠放次序。编号大的大小时才出现滚动条。

的层在编号小的层上面。

返回目录

2.7层的使用—编辑层

1.选定层

对层编辑前应先选定层，选定一个层可以使用下列

方法之一：

(D单击层的边框，即可选定该层。

(2)单击层内部的任意位置，层矩形的左上角将显

示句柄图标，然后单击句柄图标，即可选定该层。

(3)在层面板中单击该层的名称。

2.移动层

选定层后按住鼠标左键拖动层左上角的句柄图标，

或者直接按键盘上的方向键进行移动，每按一次方向键

可将选定的层沿相应的方向移动一个像素。

46

返回目录

2.7层的使用—编辑层_____________

3.改变层的大小

可以调整单个层大小，也可以同时调整多个层大小使

它们具有同样的高度和宽度。

方法为：先选定层一用鼠标拖曳层周围的任意一个句

柄。

4.对齐多个层

使用层的对齐命令，可以对齐两个或者多个层，在对

齐多个层时将使用最后一个被选定的层作为基准。

对齐层的操作步骤为：选定需要对齐的多个层一“修

改”菜单一“对齐”—从级联菜单中选择一种对齐方

式。

返回目录

2.7层的使用—在层中插入对象

层是一种容器，可以向其中插入任何对象。具体操

作步骤如下：

（D将插入点置于层中，使该层处于激活状态。

（2）在层中输入文本或者插入图像，方法与在空白

页面中的操作相同。

48

返回目录

2.8动态网页技术实用行为

1.行为概述

行为是在网页中进行的一系列动作，通过这些动作实现用户同

网页的交互，也可以通过动作使某个任务被执行。通常，一个行为

由一个事件和一个动作组成。事件是浏览器为每个网页元素做的定

义，以响应用户的动作。动作包含了预先写好的用来执行任务的

JavaScript代码。网页中的每个元素都可以看作是一个对象，在

DreamweaverMX2004中可以给任何对象附加一个行为。

2.行为面板

“窗口”菜单一“行为”，打开“行为”面板，行为列表中显

示已经附加在当前元素上的动作，如果同一事件对应几个动作，对

应的动作将按被执行顺序出现。面板的加号和减号按钮用于添加和

删除动作，上下箭头按钮用于调整针对同一对象动作的执行顺序。

49

返回目录

2.8动态网页技术实用行为

3.附加行为

可以对整个页面附加行为，也可以对链接、图像、表单中的元

素附加行为。

4.编辑行为

步骤如下：

1）选定一个附加了行为的对象。

2）打开“行为”面板，该对象附加的行为出现在行为列表中。

3）选定行为后，单击上箭头或下箭头按钮可以改变给定事件

的顺序，。

4）双击行为或选定行为后回车，可以在出现的对话框中改变

参数，如将上例中“你好，欢通访问本网站！”改为“你好，欢

也进入本网站！”。

5）选定行为后单击“一”按钮可删除某个行为。

50

返回目录

2.动态网页技术一创建图像交换效果

图像交换效果是指在浏览器中当鼠标指针移到一幅图像上时，图像会

变成另一幅图像，当鼠标移出图像范围时，又换回原来的图像。

创建图像交换效果之前先准备两张图像，一张是初始图像，另一张是

鼠标移到图像上时更换的图像，两张图像最好有相同尺寸，否则在替换时

会打乱页面上其他内容的编排。

图像交换练习

1）将插入点置于要添加图像的位置。

2）“插入”菜单一“交互式图像”一“鼠标经过图像”，出现“插

入鼠标经过图像”对话框。如图,

3）在该对话框中设置参数,

设置完毕后单击“确定”按钮。

4）按F12键在浏览器中预

览。鼠标在图像外时是原始图

像，将鼠标指向图像时，图像

就变为交换图像了。“插入鼠标经过图像”对话框

返回目录

2.动态网页技术一插入Flash对象

Flash对象为SWF文件，在DreamweaverMX2004中可以直接插入

Flash影片。下面，我们用几个例子来说明操作方法。

插入Flash影片练习

1）将插入点置于想插入Flash影片的位置。

2）“插入”菜单一“媒体”一"Flash”命令，出现“选择文件”对

话框。

3）选择要插入的Flash文件一单击“确认”，将影片插入到网页中。

4）单击属性面板中的“播放”按钮可在文档窗口中预览Flash影片,

'JF14121和球站Q）f回西/1搬邮汇Q4I殛二］、°

/［'蒯i"—

卜一,一一，一一］一L一,一一.,，；

豳。通瞅）一瞬）懒*小

既醐Q）杼侬）_娴®和至纬年@口|魏

插入Flash电影

52

返回目录

2.8动态网页技术一插入Flash对象

使用Flash按钮练习

1)“设计视图”编辑状态下一在文档窗口中单击以确定插入按钮的

位置T“插入”菜单一选“交互式图像"T再选“Flash按钮”，出现如

图所示的“插入Flash按钮”对话框。

2)“样式”列表框中选择需要

的按钮样式-“按钮文本”框中输入插

的文本将是按钮上的显示文本-“字入

F

_

体”下拉列表框中选择使用的字体。a