网页制作及应用2Dream weaver

1、1第第2章章 Dream weaver网页设计技术网页设计技术 学习目标 u面板组、插入菜单、属性面板的使用u文本的格式化类型u超链接的使用 u用表格组织网页 u框架、表单及层的使用 u动态网页技术 2第第2章章 Dream weaver网页设计技术网页设计技术 教学内容 2.1 Dreamweaver基础知识 2.2 创建及设计页面 2.3 链接与导航 2.4 用表格和表格布局模式布局页面 2.5 用框架布局页面 2.6 表单的使用 2.7 层的使用 2.8动态网页技术 本章小结 32.1 Dreamweaver基础知识基础知识 Dreamweaver MX 2004工作界面 Dreamwe

2、aver 由Micromedia公司出品，是当今最流行的专业网页设计、网站管理、网页可视化编程应用软件。主要用于制作网站的静态网页，具有跨平台、跨浏览器的特点。左图为Dreamweaver MX 2004工作界面 。42.1 Dreamweaver基础知识基础知识菜单栏菜单栏菜单栏“文件”菜单：包含“文件”菜单的标准菜单项。“编辑”菜单：包含“编辑”菜单的标准菜单项。“查看”菜单：可以设置文档的各种视图。“插入”菜单：与“插入”栏功能相似，用于向文档插入对象。“修改”菜单：可以更改选定项目的属性。“文本”菜单：用于设置文本的格式。“命令”菜单：提供对各种命令的访问。“站点”菜单：提供用于管理站

3、点、上传站点和下载文件的菜单项。“窗口”菜单：提供对 Dreamweaver 中的所有面板、检查器和窗口 的访问。在窗口菜单中可以设置面板的打开或关闭。“帮助”菜单：提供对 Dreamweaver 文档访问的帮助信息，在 Dreamweaver中遇到的大部分问题都可以从“帮助”菜单 中找到答 案。52.1 Dreamweaver基础知识基础知识插入栏插入栏 单击“插入”栏的下拉按钮，出现菜单方式的选项卡。 可以根据插入对象的不同选择不同类别的选项卡，不同选项卡包含创建不同类型对象的按钮。单击“显示为制表符”可转为常规样式的“插入”栏。图为插入”栏的两种显示方式：“插入”栏的两种显示方式62.1

4、 Dreamweaver基础知识基础知识文档工具栏文档工具栏 文档工具栏如右图所示，包含按钮和弹出式菜单，提供各种“文档”常用视图、各种查看选项和一些普通操作。文档工具栏内容从左到右依次为：代码视图：以代码的形式显示页面，方便文档代码编写。拆分视图：同时显示代码和设计视图，可同时看到两种效 果。设计视图：以设计形式显示视图，可看到所见即所得的网页 效果。标题： 可在标题文本框中为文档输入或修改标题。服务器调试： 显示一个调试现行浏览器的报告。文件管理： 显示“文件管理”弹出式菜单。在浏览器中预览/调试：随时预览网页在浏览器中的效果。文档工具栏72.1 Dreamweaver基础知识基础知识文档

5、窗口文档窗口 文档窗口用于显示文档，有“设计视图”、“代码视图”、“拆分试图”三种显示方式。 设计视图：用于可视化页面布局、可视化编辑和应用程序开发的设计环境，此视图类似在浏览器中查看页面。 代码视图：用于编写或编辑html、JavaScript、服务器语言代码、其他类型代码的编码环境。 拆分视图：可以在单个窗口中同时看到同一文档的“代码”视图和“设计”视图。82.1 Dreamweaver基础知识基础知识属性面板属性面板 属性面板 属性面板用于显示和修改已选定对象的属性，可以对文本、图像、表格、层等进行属性设置。不同的对像对应不同的属性面板。 打开“窗口”菜单选“属性”，可以显示或隐藏属性面

6、板 92.1 Dreamweaver基础知识基础知识面板组面板组面板组 面板组在工作界面的右边，如图 所示。单击面板窗口左边的按钮，可展开或折叠整个面板窗口。单击每一个面板组左上方的按钮，可展开或折叠该面板组窗口。102.2 创建及设计页面创建及设计页面创建文档创建文档 1创建网页文件 创建空白网页可以用两种方法： 方法1：在起始页“创建新项目”列表中单击“HTML”，建立一个空白 页。 方法2：在工作窗口打开“文件”菜单选“新建”“类别”列表中选“基本页”“基本页”列表中选“HTML” 单击“创建”，建立一个空白页。2利用Dreamweaver提供的示例文件创建网页 “文件”菜单“新建”在“

7、类别”列表中选一种实例文档（如页面设计CSS）在“页面设计CSS”列表中选一种网页样式单击“创建”，网页中将显示文字和页面布局，修改其中的文字及图像，快速创建所需网页。 112.2 创建及设计页面创建及设计页面创建文档创建文档3保存新建立的网页 “文件”菜单“保存”指定保存位置、文件名及保存类型单击“保存”。4设置文档属性 “修改”菜单“页面属性”，打开“页面属性”对话框，如图所示。通过“页面属性”对话框可以对页面基本属性进行设置 。页面属性对话框122.2 创建及设计页面创建及设计页面设置文本设置文本 文本是网页元素中主要部分。1输入文本 在文档窗口单击，将插入点置于文档中所需位置，输入文本

8、或插入其他网页元素。2设置文本格式 文本格式的设置利用属性面板完成，属性面板可以对文字标题、字体字号、颜色、对齐方式、列表等作设置。 132.2 创建及设计页面创建及设计页面插入水平线插入水平线 水平线能将网页中不同功能的区域分割开来。插入水平线练习 1.在页面单击鼠标确定水平线位置“插入”菜单“水平线”。 2.选中水平线在属性面板为水平线起名“line-1”。 3.宽度设为200像素，高度为10像素，若用“百分比”作宽度单位，表示宽度占浏览器窗口的百分比。设置水平线在页面中的对齐方式为“居中对齐”。如图所示。 插入水平线 142.2 创建及设计页面创建及设计页面使用使用CSS样式样式 样式是

9、一系列预制的排版命令。CSS（Cascading Style Sheet 层叠式样式表）是一系列格式规则，包括对文字及段落的修饰，用于控制网页的外观，使整个站点中的网页格式保持统一，快速实现网页格式化。同一网页中样式按不同等级应用，手动html格式覆盖css样式所应用的格式。 样式表文件扩展名为.CSS，是纯文本格式，可使用任何纯文本编辑器创建或打开样式表文件。建立样式表文件要依据CSS规则，它由两部分组成：选择器和声明。选择器为样式名称，声明用于定义样式元素。Dreamweaver提供创建样式表的模板，可轻松创建出用户所需的样式表。 152.2 创建及设计页面创建及设计页面使用使用CSS样式

10、样式1 创建CSS样式表（1）“文件”菜单 “新建”（打开“新建文档”对话框）在“类别”列表框中选择“CSS样式表”在右侧的列表框中选择一种样式表，通过预览框查看其效果。（2）单击“创建”按钮打开样式表编辑页面，扩展名为“.css”。（3）“文件”菜单“保存”下拉框中选择“样式表（*.css）”输入样式表名称单击“保存”按钮。2新建CSS样式 若对创建的模板样式不满意，还可以新建样式，步骤如下：（1）确定插入点，执行下面操作之一打开“新建CSS样式”对话框。 在“CSS样式”面板中单击“新建CSS样式”按钮； 在文本属性面板中选择“样式” “管理样式”新建； “文本”菜单“CSS样式”“新建C

11、SS样式”,对话框如图（新建 CSS样式）所示；162.2 创建及设计页面创建及设计页面使用使用CSS样式样式（2）在“名称”文本框中输入 新样式名。（3）“类型”区中提供3种类型 选择其中一项。（4）单击“确定”按钮，出现 “新样式的CSS样式定义” 对话框，在其中定义样 式的属性。（5）创建样式后，单击“确 定”按钮，该样式会出现 在样式表文本中。（6）单击“文件”“保存”命 令，保存当前样式表文 件。“新样式的CSS样式 定义”对话框如图 （ CSS样式定义）所示。 新建CSS样式 CSS样式定义172.2 创建及设计页面创建及设计页面使用使用CSS样式样式3样式表在网页中的应用 （1）

12、打开需要应用样式表的网页“文本”菜单 CSS 样式 编辑样式表在弹出的对话框中单击“链 接”单击“浏览”选择刚创建的样式表单击“确 定”回到“编辑样式表”对话框在列表中显示刚添 加的样式表文件单击“完成”。 （2）如果给标题套用刚创建的样式，方法为：将插入 点置于“ 类 ”所在的段落“窗口”菜单 CSS样式 在显示的“CSS样式”面板中单击“应用样式”按钮 单击 “样式”。此样式将应用于当前段落。182.2 创建及设计页面创建及设计页面使用使用CSS样式样式4修改样式 若对已设置的样式中某些属性设置不满意，可以修改该样式。 单击“CSS样式”面板中的“编辑样式”按钮在列表中右击需要修改的样式名

13、快捷菜单中选择“编辑”命令在弹出的属性对话框中改动“样式”及“大小”。5删除样式表 “文本”菜单CSS样式表弹出“编辑样式表”对话框在列表框中选中要删除的样式名单击“删除”按钮。6更改样式表 单击“编辑”按钮完成用户对样式表更改单击“完成”按钮。192.2 创建及设计页面创建及设计页面插入图像插入图像Web页图像的格式通常有三种：GIF 、JPEG、PNG。1插入图像 在网页中插入图像可按以下操作进行： 在文档窗口中单击以确定图像要插入的位置“插入”菜单“常用”类别中单击“图像”图标旁的向下箭头在弹出的菜单中选择“图像”弹出“选择图像源文件”对话框（“文件系统”用来选择图形文件，“数据源”用来

14、选择动态图像源文件）指定图像文件所在位置从列表框选取所需的图像文件单击“确定” 。202.2 创建及设计页面创建及设计页面插入图像插入图像2编辑页面图像 在Dreamweaver 中可以直接编辑页面图像，包括改变大小、对齐方式、调整亮度和对比度、锐化图像等。 1）调整大小 单击页面中的图像鼠标移至调节柄处拖动（按shift键保持图像比例不变），也可通过“属性”面板输入“高”和“宽”的具体数值来调整图像大小。 2）设置图像的对齐方式 选定图像单击“属性”面板中对齐按钮组中的一个使图像移至页面的左侧、右侧或居中。若既有文字又有图像，212.2 创建及设计页面创建及设计页面插入图像插入图像用“属性”

15、面板中“对齐”下拉列表框来改变图像与文字的相互对齐方式。 3）调整亮度/对比度或锐化图像 选择图像单击图像属性面板中的“亮度/对比度”拖动滑块进行调节单击“锐化”改变图像锐度。222.3 链接与导航链接与导航 文档位置和路径文档位置和路径 每个网页都有一个惟一的地址，称为统一资源定位器（URL）。当创建本地链接时，通常指定一个起自当前文档或站点根文件夹的相对路径。连接路径有三种类型： 1绝对路径：提供所链接文档的完整URL。 2文档相对路径：省略当前文档和所链接文档都相 同的绝对URL部分，只提供不同的路径部分。 3站点根目录相对路径：提供从站点文件夹到文档的 路径。232.3 链接与导航链接

16、与导航 链接到文档的常用方法链接到文档的常用方法 超链接源通常采用文本和图像，链接目标通常为网页或文件，一般用URL定义。一个文本超级链接只分配一个目标URL地址。图像上的超级链接不能直接在浏览器中显示，访问时可利用鼠标指针判断包含超级链接的图像。 图像超级链接可以用两种方式分配目标RUL： 1整个图像作为一个超级链接。 2图像分为多个热点，用热点作为图像上的超级链接区域。242.3 链接与导航链接与导航 创建文本超链接创建文本超链接 使用属性面板的文件夹图标、链接文本框或“点到文件”图标链接文档。方法如下： 1文档窗口的“设计视图”中选择文本或图像 。 2属性面板的“链接”框中填入要链接到的

17、页面地址，最好用相对路径地址，也可以单击“点到文件”图标，选取要链接到的文件，或用鼠标把本地站点文件列表中的文件直接拖到属性面板的“链接”框中。 3对“目标”进行设置。“目标”用来定义超链接被点击时链接到的页面视窗打开方式。目标后的下拉选框可不选，这时页面在原窗口中打开。252.3 链接与导航链接与导航 命名锚记链接命名锚记链接 命名锚记用于在文档中设置标记，这些标记通常放在文档的特定主题处或顶部，然后创建到这些命名锚记的链接。 创建到命名锚记的连接过程分两步：创建命名锚记和创建到命名锚记的链接。 1创建命名锚记：将插入点置于要放置锚记的位置“插入”菜单“命名锚记”在“锚记名称”框中输入锚记名

18、字单击“确定”。在插入点即出现一个锚记。 2创建锚记链接：选定要添加链接的文字属性面板的“链接”框中输入“#”和锚记名字回车确认。262.3 链接与导航链接与导航 图像地图图像地图 用一个图形的不同部位制作热点分别链接到不同页面，称为图像地图。分两步如下： 1创建图像地图热点 图形属性面板左下方有一项为地图，用它完成制作图像地图。在其后可填入映象名称，若不填，Dreamweaver会自动加上一个名字。“地图”下面有三个图标，从左到右依次为：截取矩形、截取圆形和截取不规则图形。用鼠标选中图形的某个区域，当鼠标拖出的选框与目标不重合时，可使用键盘上的方向箭头来调节。 2为热点指定链接 选定要添加链

19、接的热点，在热点属性面板中输入链接目标，在“替代”框中输入提示性文字。272.4 用表格和表格布局模式布局页面用表格和表格布局模式布局页面创建表格创建表格 1. 将插入点置于网页中要插入表格的位置“插入”菜单“表格”，出现如图所示的“插入表格”对话框。 “行数”框指定表格行数。 “列数”框指定表格列数， “宽度”框指定表格宽度。 “边框”框指定表格边框线宽度。 “单元格填充”框指定表格中各单元格的内容与其边框之间的距离。 “单元格间距”框中指定表格的各单元格之间的距离。 2. 设置完成后单击“确定”按钮，便在当前网页中插入了表格。 插入表格对话框 282.4 用表格和表格布局模式布局页面用表格

20、和表格布局模式布局页面编辑表格编辑表格1添加行或列： 单击某单元格“修改”菜单“表格”“插入行”（或“插入列”）。2删除行或列 选定完整的行或列“编辑”菜单“清除”（或按delete键）。3合并单元格或拆分单元格 选取连续单元格“修改”菜单“表格”“合并单元格”（或拆分单元格）。也可单击属性面板中 “合并单元格” 或“拆分单元格”按钮。4改变单元格所跨的行或列的数目 选定单元格“修改”菜单“表格”“增加行宽”（或“增加列宽”）。 选定单元格“修改”菜单“表格”“减少行宽”（或“减少列宽”）。5使用剪切、复制、粘贴命令对单个单元格或多个单元格进行操作，能保留单元格的格式设置。 292.4 用表格

21、和表格布局模式布局页面用表格和表格布局模式布局页面表格属性面板表格属性面板 选定表格后，表格属性面板如图所示。可对表格属性面板中各选项进行设置。 表格属性面板302.4 用表格和表格布局模式布局页面用表格和表格布局模式布局页面用布局模式布局页面用布局模式布局页面1绘制布局单元格 绘制布局单元格步骤: 1）“插入”栏中“布局”选项卡当前选“布局视图”。 2）单击“绘制布局单元格”按钮。 3）将鼠标指针移到页面上拖动创建布局单元格。如图绘制的单元格为蓝色的轮廓、白色的背景。 布局单元格 312.4 用表格和表格布局模式布局页面用表格和表格布局模式布局页面用布局模式布局页面用布局模式布局页面2绘制布

22、局表格 绘制布局表格的步骤： 1）布局视图当前单击“插入”栏。 2）“布局”选项卡当前选“绘制布局表格”按钮。 3）将鼠标指针在页面拖动以创建布局表格。 如图绘制的表格具有绿色轮廓线。在绘制的每个表格顶部有一个“布局表格”标签，能帮助用户识别并选定表格。布局表格 322.4 用表格和表格布局模式布局页面用表格和表格布局模式布局页面用布局模式布局页面用布局模式布局页面3绘制嵌套布局表格步骤如下： 1）在布局视图中单击“插入”栏“布局”页“绘制布局表格”按钮。 2）将鼠标指针定位到已有布局表格的灰色空间中单击并拖动鼠标创建嵌套布局表格。嵌套布局表格不能大于包含它的布局表格。4向布局单元格中添加内容

23、 单击需要插入内容的布局单元格，输入文本或者插入其他对象。 要想让布局单元格自动适应文本内容，应选择“清除单元格高度”命令。332.4 用表格和表格布局模式布局页面用表格和表格布局模式布局页面用布局模式布局页面用布局模式布局页面5 移动或调整大小（1）调整布局单元格或表格大小：单击布局单元格的边框或单击布局表格上方的“布局表格”标签将鼠标指针指向某个句柄按住鼠标左键拖动。（2）移动布局单元格或表格： 单击布局单元格的边框或单击布局表格标签拖动布局单元格或表格到目标地。6 格式化布局单元格和布局表 格 通过属性面板可以改变布局单 元格或表格的外观，设置单元 格内容的对齐方式、宽度、高 度和背景颜

24、色等。如右两图所示。布局单元格属性面板 布局表格属性面板7设置列宽度布局视图可以使用两种类型宽度：固定宽度和自动伸展。固定宽度以像素值指定宽度，自动伸展则使得宽度根据窗口大小自动调整。342.5 用框架布局页面用框架布局页面创建框架和框架集创建框架和框架集 Dreamweaver 提供两种创建框架集的方法：选择预定义框架集或用户自己设计。1插入预定义框架集 单击“布局”卡的 “框架”按钮 ，弹出菜单如下图所示 。可从中选择预定义框架 。若对预定义框架集不满意，可进行手工改动。方法是：先用预定义框架集产生一个框架，用鼠标上下拖边框可以水平划分窗口，左右拖边框可以垂直划分窗口，从四角拖，可以划分四

25、个框架。拖动框架之间的分割线可调整框架大小。若想继续拆分，按ALT键拖动框架。如果要删除某框架，将框架边框拖离页面即可。预定义框架集样式 352.5 用框架布局页面用框架布局页面设置框架集与框架属性设置框架集与框架属性 1设置框架集属性。 单击框架边框线选定框架集，下图为“顶部和嵌套的左部框架”属性面板。“顶部和嵌套的左部框架”属性面板2设置框架属性 按住ALT键单击框架内部，此时属性面板为框架属性面板，如下图所示。框架属性面板362.5 用框架布局页面用框架布局页面在框架中插入文本和图像在框架中插入文本和图像 可以加载已经创建的网页，也可直接在每个框架区域中插入文本和图像。 1）在框架中单击

26、“插入”菜单“图像”，可在当前位置插入图像。 2）在框架中单击输入文字，可在当前位置插入文本。如图所示。 在框架中插入文本和图像 372.5 用框架布局页面用框架布局页面保存框架和框架集保存框架和框架集 框架结构完成后，首先选定框架集，“文件”菜单“保存框架”，在“另存为”对话框中选择要放置网页的文件夹，为框架文件命名，最后单击“保存”按钮。要保存框架集中的所有的文件，单击“文件”菜单“保存全部”，在“保存为”对话框中，使用框架线辨别正保存的是哪个框架或框架集，为每个框架文件指定文件名，逐一保存。 如果某页面选定的框架为“顶部和嵌套的左部框架”，页面被划分为3个框架，存储时要存储4个独立文件：

27、一个是框架集文件，通常起名为“index.htm”，另外三个是框架内容文件。框架集文件除了存储页面框架大小和位置信息，还存储每个框架载入文档的文件名。框架内容文件则存储页面框架中的内容。382.6 表单的使用表单的使用表单概述表单概述 表单是由文本和表单域组成的集合，用于在因特网上收集指定类型的信息，如登录注册、图书订购等。表单的工作原理很简单，访问者在被称为“表单域”的特定网页元素中键入或选择相关的信息，单击“提交”按钮将信息提交给服务器。服务器根据表单结果进行处理，并将这些信息保存到特定文件中以便站点管理员查看。 一个完整的表单应该包含两个组件：一个是表单对象，它在网页中进行描述，另一个是

28、表单处理程序，它是Web服务器上的一个程序，当站点访问者向服务器提交一个表单时程序开始执行。只有将网页中的表单与某个表单结果处理程序关联之后才能实现该表单功能。表单中包含多种被称作“控件”的对象。392.6 表单的使用表单的使用创建表单创建表单 1插入表单 插入表单可采用两种方法： （1）将插入点置于要插入表单的位置“插入”菜单“表单”，可看到表单被插入到当前位置。 （2）将插入点置于要插入表单的位置单击“插入”栏内“表单”页单击“表单”按钮，表单将被插入到当前位置。2各表单对象图标 表单卡如图所示，上面有各表单对象的按钮图标，单击其中的某个按钮，将在表单中生成该对象。 表单卡 402.6 表

29、单的使用表单的使用创建表单创建表单 3设置表单域属性 将插入点置于表单内部，显示表单的属性面板，如图所示。 表单名称：在文本框中为表单设一个名称，命名后的表单可以用 JavaScript或VBScript之类的脚本语言进行控制。 动作：指定表单被客户端提交后在服务器端对其信息和数据做出响应和处理的程序或脚本的URL地址，在此项中输入程序的路径名称，或者单击右边的文件夹图标，在弹出的对话框中选择要运行的程序或带有脚本程序的网页。 目标：指定一个窗口，显示调用程序所返回的数据。 MIME类型：指定对提交给服务器进行处理的数据使用MIME编码类型。 表单属性面板412.6 表单的使用表单的使用添加表

30、单对象添加表单对象 1.添加表单对象 在表单中要插入对象的位置单击单击表单页中对象图标。2.添加文本域对象 文本域是用来输入信息的表单对象。文本域类型有3种： 1）单行文本域：用来填写单个字符或者简短回答。 如地址等。 2）多行文本域：用于填写较长内容。该文本域行数 和字数都可由用户自己确定。 3）密码域：一种特殊的文本域。当输入文本时，文 本显示为星号或其他符号。422.6 表单的使用表单的使用添加表单对象添加表单对象 3添加单选按钮组 单选按钮组提供彼此排斥的选项值，在单选按钮组内只能选择一个选项。4添加复选框 复选框允许从一组选项内同时选择多个选项。 5添加列表 列表提供一个滚动条供用户

31、浏览项目，能在有限的空间内为用户提供许多选项，并进行多重选择。 6添加按钮对象 使用表单按钮能将输入表单的数据提交到服务器，还可将其他已经在脚本中定义的处理任务分配给按钮，例如，表单按钮可以根据指定的值计算出所选商品的总价。 432.6 表单的使用表单的使用检查表单检查表单 表单通常有确定的填写规范，在网页中应提醒访问者避免简单的填写错误。 “检查表单”动作能检查指定文本域的内容以确保用户输入的正确性。使用onBulr事件可将此动作附加到单个文本域，在用户填写表单时对域进行检查。使用onSubmit事件可将动作附加到表单，在用户单击“提交”按钮时对多个文本域进行检查。442.7 层的使用层的使

32、用创建层创建层 层是网页制作的新技术，特点是使用方便，可以使用“层”来布局网页，比表格更灵活。在Dreamweaver中，层可以放置在网页内任何位置，不但可以包含文本、图像、表格、插件，还可以在层中嵌套另外的层。1在网页中插入层 在网页中插入层的操作步骤为：将插入点置于要插入新层的位置单击“插入”栏“布局”页中的“层”按钮。拖动可以改变层大小。 2创建嵌套层 嵌套层是包含在其他层中的层，嵌套可以将若干层组织在一起。嵌套层随父层一起移动，并且可以设置为继承其父层的可见性。要创建嵌套层，只需将插入点置于已经创建的层中，单击“插入”菜单，选“层”命令即可。嵌套层如右图所示。 嵌套层 452.7 层的

33、使用层的使用创建层创建层 3通过层属性面板定义属性 选定层后，其属性面板如图所示。 层的属性面板 各选项的意义说明如下：（1）层编号：指定层的名称。（2）宽、高：指定层的宽度和高度。（3）左、上：指定层相对于页面或被嵌套层的左上角的位置。（4）Z轴：指定层的叠放次序。编号大的层在编号小的层上面。（5）可见性：参数有default、visible、hidden和inherit，对应的含义为：默认、可见、隐藏、继承父层的可见性。 （6）背景颜色： 指定层的背景颜色。（7）背景图像： 指定层的背景图像。 （8）溢出：选择visible则扩展层的大小使其所有内容均可见。选择hidden则保持层的大小裁

34、掉所有超出层大小的内容。选择scroll则不管内容是否超过层的大小都提供滚动条。选择auto则只有在内容超出层的大小时才出现滚动条。 462.7 层的使用层的使用编辑层编辑层 1选定层 对层编辑前应先选定层，选定一个层可以使用下列方法之一： （1）单击层的边框，即可选定该层。 （2）单击层内部的任意位置，层矩形的左上角将显示句柄图标，然后单击句柄图标，即可选定该层。 （3）在层面板中单击该层的名称。2移动层 选定层后按住鼠标左键拖动层左上角的句柄图标，或者直接按键盘上的方向键进行移动，每按一次方向键可将选定的层沿相应的方向移动一个像素。472.7 层的使用层的使用编辑层编辑层 3改变层的大小

35、可以调整单个层大小，也可以同时调整多个层大小使它们具有同样的高度和宽度。 方法为：先选定层用鼠标拖曳层周围的任意一个句柄。4对齐多个层 使用层的对齐命令，可以对齐两个或者多个层，在对齐多个层时将使用最后一个被选定的层作为基准。 对齐层的操作步骤为：选定需要对齐的多个层“修改”菜单 “对齐”从级联菜单中选择一种对齐方式。482.7 层的使用层的使用在层中插入对象在层中插入对象 层是一种容器，可以向其中插入任何对象。具体操作步骤如下： （1）将插入点置于层中，使该层处于激活状态。 （2）在层中输入文本或者插入图像，方法与在空白页面中的操作相同。492.8 动态网页技术动态网页技术实用行为实用行为

36、行为概述 行为是在网页中进行的一系列动作，通过这些动作实现用户同网页的交互，也可以通过动作使某个任务被执行。通常，一个行为由一个事件和一个动作组成。事件是浏览器为每个网页元素做的定义，以响应用户的动作。动作包含了预先写好的用来执行任务的JavaScript代码。网页中的每个元素都可以看作是一个对象，在Dreamweaver MX 2004中可以给任何对象附加一个行为。 行为面板 “窗口”菜单“行为”，打开“行为”面板，行为列表中显示已经附加在当前元素上的动作，如果同一事件对应几个动作，对应的动作将按被执行顺序出现。面板的加号和减号按钮用于添加和删除动作，上下箭头按钮用于调整针对同一对象动作的执

37、行顺序。502.8 动态网页技术动态网页技术实用行为实用行为 附加行为 可以对整个页面附加行为，也可以对链接、图像、表单中的元素附加行为。编辑行为步骤如下： 1）选定一个附加了行为的对象。 2）打开“行为”面板，该对象附加的行为出现在行为列表中。 3）选定行为后，单击上箭头或下箭头按钮可以改变给定事件的顺序，。 4）双击行为或选定行为后回车，可以在出现的对话框中改变参数，如将上例中“你好，欢迊访问本网站！” 改为“你好，欢迊进入本网站！”。 5）选定行为后单击“”按钮可删除某个行为。 512.8 动态网页技术动态网页技术创建图像交换效果创建图像交换效果 图像交换效果是指在浏览器中当鼠标指针移到

38、一幅图像上时，图像会变成另一幅图像，当鼠标移出图像范围时，又换回原来的图像。 创建图像交换效果之前先准备两张图像，一张是初始图像，另一张是鼠标移到图像上时更换的图像，两张图像最好有相同尺寸，否则在替换时会打乱页面上其他内容的编排 。 图像交换练习图像交换练习 1）将插入点置于要添加图像的位置。 2）“插入”菜单“交互式图像”“鼠标经过图像”，出现 “插入鼠标经过图像”对话框。如图所示。 3）在该对话框中设置参数，设置完毕后单击“确定”按钮 。 4）按F12键在浏览器中预览。鼠标在图像外时是原始图像，将鼠标指向图像时，图像就变为交换图像了。“插入鼠标经过图像”对话框 522.8 动态网页技术动态

39、网页技术插入插入Flash对象对象 Flash对象为SWF文件，在Dreamweaver MX 2004中可以直接插入Flash影片。下面，我们用几个例子来说明操作方法。插入插入Flash影片练习影片练习 1）将插入点置于想插入Flash影片的位置。 2）“插入”菜单“媒体”“Flash”命令，出现“选择文件”对话框。 3）选择要插入的Flash文件单击“确认”，将影片插入到网页中。 4）单击属性面板中的“播放”按钮可在文档窗口中预览Flash影片，单击“停止”按钮可停止播放Flash影片。属性面板如图所示。 插入Flash电影 532.8 动态网页技术动态网页技术插入插入Flash对象对象 使用使用Flash按钮练习按钮练习 1）“设计视图”编辑状态下在文档窗口中单击以确定插入按钮的位置“插入”菜单选“交互式图像”再选“Flash按钮”，出现如图所示的“插入Flash按钮”对话框。 2）“样式”列表框中选择需要的按钮样式“按钮文本”框中输入的文本将是按钮上的显示文本“字体”下拉列表框中选择使用的字体。 3）“链接”文本框中为按钮指定要链接的地址“背景色”框中为