网页设计与Web编程ppt chapter04

1、第四章第四章 Dreamweaver CS3入门入门 内容提要内容提要p4.1 文本及排版文本及排版 p4.2 设置文件头和网页属性设置文件头和网页属性 p4.3 插入表格插入表格 p4.4 插入多媒体对象插入多媒体对象 p4.5 插入插入Java Applet p4.6 创建超级链接创建超级链接 p4.7 Dreamweaver CS3新增功能新增功能 4.1 文本及排版文本及排版p插入文本插入文本 1.直接输入法：在打开直接输入法：在打开Dreamweaver文档窗口时，将光文档窗口时，将光标定位到需要输入文本的地方，直接键盘输入即可。标定位到需要输入文本的地方，直接键盘输入即可。 2.复

2、制粘贴法：选取合适的文本，直接复制到复制粘贴法：选取合适的文本，直接复制到Dreamweaver文档窗口中的光标所在处。文档窗口中的光标所在处。 3.导入已有导入已有Word文档，在文档，在Dreamweaver文档窗口中，文档窗口中，将光标定位到要导入文本的地方，选择菜单将光标定位到要导入文本的地方，选择菜单“文件文件”|“导入导入|”|“WORD文档文档”命令，弹出命令，弹出“导入导入Word文档文档”对对话框，在其中选择要导入的话框，在其中选择要导入的Word文档，单击该对话框文档，单击该对话框的的“打开打开”命令，就可以导入文本了。命令，就可以导入文本了。 4.1 文本及排版文本及排版

3、p插入特殊符号插入特殊符号 选择选择“插入插入”工具栏中的工具栏中的“文本文本“工具工具栏栏”的按钮的按钮如果在下拉列表中没有合适的符号，就如果在下拉列表中没有合适的符号，就单击下拉列表最后一个单击下拉列表最后一个 按钮，弹出按钮，弹出“插入其他字符插入其他字符”对话框中进行选择：对话框中进行选择： 4.1 文本及排版文本及排版p 格式化文本格式化文本 p 1.设置字符格式设置字符格式p1）选择文档中的）选择文档中的“Dreamweaver CS3 入门入门”字样。字样。p2）单击）单击“字体字体”下拉列表框，从中选择下拉列表框，从中选择“华文隶书华文隶书”选项。如果字体列表框中没有所需的字体

4、，可以通过选项。如果字体列表框中没有所需的字体，可以通过“编辑字体列表编辑字体列表”来选择。来选择。排版后的文字效果4.1 文本及排版文本及排版p3）单击）单击“大小大小”下拉列表框下拉列表框，从中选择，从中选择“24”选项。选项。p4）单击）单击“颜色颜色”右侧的文本右侧的文本框中输入颜色代码框中输入颜色代码#3399CC，也可以直接用选色棒在拾色器也可以直接用选色棒在拾色器上取色。上取色。p单击按钮单击按钮 ，得到排版后的，得到排版后的文字效果。文字效果。4.1 文本及排版文本及排版p2.使用段落和标题：使用段落和标题：“属性属性”面板中的面板中的“格式格式”下拉列表框下拉列表框 “段落”

5、是应用标签的默认格式，“标题1”添加标签，设置该选项可以将所选的文本设置成各种标题。Dreamweaver中提供的标题号越小，字体越大 p3.对齐文本：对齐文本：“属性属性”面板中对齐方式有面板中对齐方式有右对齐、居中、左对齐、两端对齐。右对齐、居中、左对齐、两端对齐。 4.1 文本及排版文本及排版p4.缩进与扩展缩进与扩展 向中间缩进向中间缩进 ：“文本缩进文本缩进”按钮按钮 向两侧展开向两侧展开 ：“文本凸出文本凸出”按钮按钮 p5.首行缩进首行缩进 问题：中文书写习惯每段首行缩进问题：中文书写习惯每段首行缩进2个汉字个汉字的宽度的宽度 解决方式：用户使用解决方式：用户使用“插入插入”工具

6、栏来插入工具栏来插入空格符空格符 具体方法如下：具体方法如下：1）插入）插入文本文本4.1 文本及排版文本及排版 此时会打开警告窗口，提示由于文档中使此时会打开警告窗口，提示由于文档中使用的不是西欧字符，有些浏览器可能不会用的不是西欧字符，有些浏览器可能不会正常显示特殊字符正常显示特殊字符 2）单击换行按钮后的下拉按钮，在展开）单击换行按钮后的下拉按钮，在展开的下拉列表中选择的下拉列表中选择“不换行空格不换行空格” ：注注:解决方式解决方式:勾选勾选“以后不再显示以后不再显示”复选框，然后单击复选框，然后单击“确定确定”按按钮。钮。 4个不换行空格个不换行空格 =2个字的空格个字的空格 4.1

7、 文本及排版文本及排版p创建项目列表创建项目列表 p1.无序项目列表无序项目列表(几何符号来表示其列表几何符号来表示其列表关系关系 )（2）选择要添加无序项目符号）选择要添加无序项目符号的段落，单击的段落，单击“属性属性”面板面板中的中的“项目列表项目列表”按钮按钮 （1）选择要应用无序项目符号的所有段落。然后单击）选择要应用无序项目符号的所有段落。然后单击“属性属性”面板中的面板中的“项目列表项目列表”按钮按钮 即可为文本添加项目符号。默认状态下使用的即可为文本添加项目符号。默认状态下使用的项目符号为项目符号为“点点”，可以根据需要，点击，可以根据需要，点击“列表项目列表项目”按钮，在按钮，

8、在“列列表属性表属性”对话框中更改项目符号。对话框中更改项目符号。4.1 文本及排版文本及排版（2）将光标放在文本的末尾，然后按下回车键，此时将出现列表的）将光标放在文本的末尾，然后按下回车键，此时将出现列表的第第2项，然后可以在后面输入文字。依此类推，就可以将所有列表项，然后可以在后面输入文字。依此类推，就可以将所有列表项中的文本填写完整。在输完最后一项后，连续项中的文本填写完整。在输完最后一项后，连续2次按下键盘上的次按下键盘上的回车键，项目符号就会消失，结束列表制作。回车键，项目符号就会消失，结束列表制作。p2.有序项目列表（编号列表有序项目列表（编号列表 ）在开始时按下在开始时按下“编

9、号列表编号列表”按钮按钮 无序列表转换为有序列表无序列表转换为有序列表 有序列表转换为无序列表有序列表转换为无序列表 单击单击“属性属性”面板上的面板上的“编号列表编号列表”按按钮钮 单击单击“属性属性”面板上面板上“项目列表项目列表”按按钮钮 选中选中列表列表文字文字4.1 文本及排版文本及排版p3.嵌套项目列表嵌套项目列表(列表显示不同级别的文列表显示不同级别的文本内容本内容)选择选择需要需要进行进行操作操作的列的列表项表项 单击单击“属性属性”面板中的面板中的“文本缩进文本缩进”按按钮钮 单击单击“属性属性”面板中的面板中的“文本扩展文本扩展”按按钮钮 右缩进形式不右缩进形式不同级子列表

10、项同级子列表项 列表项将恢列表项将恢复原来的设置复原来的设置 4.2设置文件头和网页属性设置文件头和网页属性p设置文件头设置文件头“文件文件”|“打开打开” 站点根目录站点根目录wuhan下找到并下找到并选中已经存在的选中已经存在的文件文件index.htm 网站头文件设置网站头文件设置成功成功4.2设置文件头和网页属性设置文件头和网页属性p设置网页的编码设置网页的编码 双击双击编码方式：编码方式：gb2312属性：使用的属性：使用的HTTP通信协议通信协议 值值 ：浏览器下面的：浏览器下面的“内容内容”项定项定义内是和网页义内是和网页内容内容Content相相关的关的 内容内容”：定义的是：

11、定义的是网页的编码方式网页的编码方式和字符集和字符集 4.2设置文件头和网页属性设置文件头和网页属性p设定文档标题设定文档标题 双击双击默认4.2设置文件头和网页属性设置文件头和网页属性p添加关键字添加关键字(协助网络索引擎寻找网页协助网络索引擎寻找网页 ) 关键字之间关键字之间逗号分逗号分开开4.2设置文件头和网页属性设置文件头和网页属性p设置网页的刷新设置网页的刷新 适用情况：适用情况： 1.在打开某个网页后的一定时间内，让浏览器自动跳转在打开某个网页后的一定时间内，让浏览器自动跳转到一个新网页；到一个新网页； 2.用于需要经常刷新的网页，可以让浏览器每隔一段时用于需要经常刷新的网页，可以

12、让浏览器每隔一段时间自动刷新自身网页。间自动刷新自身网页。“文件头文件头”-“刷刷新新” 4.2设置文件头和网页属性设置文件头和网页属性p插入插入meta对象对象(记录有关当前页面的信息记录有关当前页面的信息 )属性：指定属性：指定 Meta 标签是否包含有关页面的描述性信息标签是否包含有关页面的描述性信息 (name) 或或 HTTP 标题信息标题信息 (http-equiv)。值：指定您在该标签中提供的信息类型。值：指定您在该标签中提供的信息类型。内容：是实际的信息。内容：是实际的信息。4.3.1 制作表格制作表格p制作简单表格制作简单表格 “查看查看”“表格模式表格模式”“标准模标准模式

13、式” “插入记录插入记录”菜单中的菜单中的“表格表格” 光标定位到要插入表格的地方 4.3.1 制作表格制作表格p （1） 在在“表格大小表格大小”栏中的栏中的“行数行数”输入框中输入要创建的表格输入框中输入要创建的表格的行数为的行数为6。在。在“列数列数”输入框中输入表格的列数为输入框中输入表格的列数为2。p （2）“表格宽度表格宽度”输入框用于设置表格的宽度，右侧的列表中可输入框用于设置表格的宽度，右侧的列表中可选择选择“像素像素”或或“百分比百分比”。各选项的含义如下：。各选项的含义如下： 像素：若选择该项则将表格设置为固定宽度。 百分比：若选择该项，则按占浏览器窗口的百分比指定表格的宽

14、度。p （3）“边框粗细边框粗细”输入框用于设置表格边框的粗细。输入大于输入框用于设置表格边框的粗细。输入大于0的整数表示有边框，若输入的整数表示有边框，若输入0表示在网页中不显示边框，在设计页表示在网页中不显示边框，在设计页面中以虚线表示。此时设置为面中以虚线表示。此时设置为2p （4）“单元格边距单元格边距”输入框用于输入单元格边框和单元格内容之输入框用于输入单元格边框和单元格内容之间的像素数。间的像素数。p （5）“单元格间距单元格间距”输入框用于输入单元格与单元格间的间距值输入框用于输入单元格与单元格间的间距值，值越大间距越宽，值越大间距越宽。4.3.1 制作表格制作表格p （6）“页

15、眉页眉”栏用于设置栏用于设置“页眉页眉”在表格中的位置，在表格中的位置，它们的含义如下：它们的含义如下：无：插入不带表格标题列的表格。左：插入左侧为表格标题列的表格。顶部：插入顶部为表格标题列的表格。两者：插入左侧和顶部都为表格标题列的表格。p （7）设置好需要的参数后，单击）设置好需要的参数后，单击“确定确定”按钮即可将按钮即可将设置的表格插入到设计页面中。设置的表格插入到设计页面中。4.3.1 制作表格制作表格p （8）单击插入表格中）单击插入表格中“400”旁的向下箭头。各选项的含义如下：旁的向下箭头。各选项的含义如下： 选择表格：选择该项，就可选取整个表格。 清除所有行高：选择该项，表

16、格高度为默认值。 清除所有宽度：选择该项，表格宽度缩为一个字符宽。 使所有宽度一致：固定为第一行中所有单元格的宽度。 隐藏表格宽度：选择该项后表格中的宽度显示线被隐藏。此时，可选择 “查看”|“可视化助理”|“表格宽度”命令使其显示。p （9）单击）单击“400”上方的向下箭头按钮。各选项的含义如下：上方的向下箭头按钮。各选项的含义如下： 左侧插入列：在当前列左边插入一列，则将平分单元格宽度，同时每个单元格下方都出现列按钮。 右侧插入列：在当前列右边插入一列，重新平分所有单元格宽度。如果在表格的第如果在表格的第1行中输入文字，就会发现单元格中的文字自动加粗行中输入文字，就会发现单元格中的文字自

17、动加粗并居中到单元格中，这是因为第并居中到单元格中，这是因为第1行中的单元格被定义成了一种特行中的单元格被定义成了一种特殊的单元格殊的单元格-表头。表头中的文本会被自动加粗并居中。表头。表头中的文本会被自动加粗并居中。4.3.1 制作表格制作表格p制作嵌套表格制作嵌套表格p1将光标定位到要插入表格的单元格中将光标定位到要插入表格的单元格中。p2单击单击“常用常用”工具栏的工具栏的“表格表格”按钮按钮 ，打开，打开“插入表格插入表格”对话框。对话框。p3根据需要分别输入行数、列数、宽度根据需要分别输入行数、列数、宽度和边框等项。然后单击和边框等项。然后单击“确定确定”。 4.3.2 编辑表格编辑

18、表格p （1） 选择表格选择表格p 如果需要编辑、修改表格，首先必须选中表格，表格如果需要编辑、修改表格，首先必须选中表格，表格的选中方法有以下几种的选中方法有以下几种:p 将鼠标移到表格上鼠标变为图标将鼠标移到表格上鼠标变为图标 时，单击鼠标时，单击鼠标左键即可。左键即可。p 将鼠标移到表格的边框线上，表格四周的边框线呈将鼠标移到表格的边框线上，表格四周的边框线呈现红色，并且光标变为现红色，并且光标变为 或单击鼠标左键即可。或单击鼠标左键即可。p 将光标定位到表格中，表格弹出绿线的标志，单击将光标定位到表格中，表格弹出绿线的标志，单击标有大小标有大小“400”的绿线中的按钮。然后从列表中选取

19、的绿线中的按钮。然后从列表中选取“选择表格选择表格”项即可。项即可。4.3.2 编辑表格编辑表格p（2）选择行列）选择行列p将光标移到要选定的行的左侧，当所选将光标移到要选定的行的左侧，当所选行的边框线变为红色时单击鼠标左键即可行的边框线变为红色时单击鼠标左键即可。外层表格行的选定如左图所示，嵌套表。外层表格行的选定如左图所示，嵌套表格行的选定如右图所示。格行的选定如右图所示。4.3.2 编辑表格编辑表格p 将光标定位到所选行最左侧的单元格将光标定位到所选行最左侧的单元格中，再水平拖动鼠标到该行中最终一个单中，再水平拖动鼠标到该行中最终一个单元格中释放鼠标也可选定嵌套表格的行。元格中释放鼠标也

20、可选定嵌套表格的行。p 列的选取方法与行类似，只是从上方来列的选取方法与行类似，只是从上方来选取，如左图为选取外层表格的列，右图选取，如左图为选取外层表格的列，右图所示为选取嵌套表格的列。所示为选取嵌套表格的列。4.3.2 编辑表格编辑表格p（3）选定单元格）选定单元格p选择单个单元格：只需将光标定位到要选择单个单元格：只需将光标定位到要选定的单元格中即可。选定的单元格中即可。p选择相邻的多个单元格：将鼠标光标定选择相邻的多个单元格：将鼠标光标定位到开始的单元格中，按下鼠标左键不放位到开始的单元格中，按下鼠标左键不放，并开始拖动鼠标到同一个表格中需要选，并开始拖动鼠标到同一个表格中需要选取的单

21、元格区域的最后一个单元格中释放取的单元格区域的最后一个单元格中释放鼠标即可。鼠标即可。 p选中不相邻的单元格：按住键盘的选中不相邻的单元格：按住键盘的Ctrl键，用鼠标单击要选中的单元格，可以选键，用鼠标单击要选中的单元格，可以选定任意多个不相邻的单元格定任意多个不相邻的单元格 4.3.2 编辑表格编辑表格p（4）合并与拆分单元格）合并与拆分单元格 选取要合并的单元格区域。选取要合并的单元格区域。 单击单击“属性属性”面板左下角的按钮即可。如果未面板左下角的按钮即可。如果未见该按钮，则点击右下角见该按钮，则点击右下角 按钮可使该按钮出现按钮可使该按钮出现。将光标定位于要拆分的单元格中。将光标定

22、位于要拆分的单元格中。单击单击“属性属性”面板中的按钮，面板中的按钮，“拆分单元格拆分单元格”对对话框。话框。在在“把单元格拆分把单元格拆分”栏中，选中栏中，选中“行行(列列)”单选项单选项。在在“行行(列列)数数”框中输入要拆分的行框中输入要拆分的行(列列)数，如数，如输入输入3。单击单击“确定确定”按钮，即可按设置的参数拆分指定按钮，即可按设置的参数拆分指定的单元格的单元格合并单元格合并单元格 拆分单元格拆分单元格 的行的行(列列)4.3.2 编辑表格编辑表格p（5）插入行列）插入行列p插入单行插入单行p插入多行插入多行p插入单列和插入多列（与插入行相似）插入单列和插入多列（与插入行相似）

23、插入单行插入单行(当前行当前行上方插入上方插入 )法一：选择法一：选择“插入插入”|“表格对象表格对象”|“在上面插入行在上面插入行”命令，即可在当前行的上方插入一行，并且命令，即可在当前行的上方插入一行，并且该行成为当前行。该行成为当前行。 法二：选择法二：选择“修改修改”|“表格表格”|“插入行插入行”命令，或命令，或在当前单元格上单击鼠标右键，在弹出的菜单在当前单元格上单击鼠标右键，在弹出的菜单，选择，选择“插入行插入行”命令也可以实现插入行功能命令也可以实现插入行功能。4.3.2 编辑表格编辑表格插入多行插入多行(当前行当前行上方插入上方插入 )步骤一：将光标置于表格中希望插入多步骤一

24、：将光标置于表格中希望插入多行的位置上，单击鼠标右键，在打开的行的位置上，单击鼠标右键，在打开的菜单选择菜单选择“表格表格”|“插入行或列插入行或列”命令命令，如图，如图4-31所示，此时将打开一个所示，此时将打开一个“插插入行或列入行或列”对话框。对话框。 步骤二：在步骤二：在“插入插入”选项组中选择选项组中选择“行行”，在在“行数行数”文本框中输入数值文本框中输入数值3，在，在“位置位置”选项组中选中选项组中选中“所选之上所选之上”。单击。单击“确定确定”按钮后就能在光标所在的单元格之上插入按钮后就能在光标所在的单元格之上插入3行。行。 4.3.2 编辑表格编辑表格p（6）删除行列）删除行

25、列p 法一：选定要删除的行或列，按法一：选定要删除的行或列，按Delete键即可删除。键即可删除。p 法二：选定要删除的行或列，或将光标定位到表格中要法二：选定要删除的行或列，或将光标定位到表格中要删除的行或列中，单击鼠标右键，从弹出的快捷菜单中删除的行或列中，单击鼠标右键，从弹出的快捷菜单中选择选择“表格表格”中选择中选择-“删除行删除行”或或“删除列删除列”命令即可命令即可。4.3.2 编辑表格编辑表格p （7）隐藏单元格之间的分隔线）隐藏单元格之间的分隔线 高级高级p 在文档中插入一个在文档中插入一个43的表格，将的表格，将“边框粗细边框粗细”设为设为1像素，其他参数像素，其他参数为默认

26、状态，然后为单元格插入图片和文字，如左下图。为默认状态，然后为单元格插入图片和文字，如左下图。p 选中表格，单击选中表格，单击“文档文档”工具栏中的显示代码视图和设计视图按钮工具栏中的显示代码视图和设计视图按钮“拆拆分分”，将编辑窗口切换为拆分状态，在表格的，将编辑窗口切换为拆分状态，在表格的标签后输入标签后输入rule=“rows”标签值，如右下图。标签值，如右下图。4.3.2 编辑表格编辑表格p “rules”参数有参数有3个参数，分别是个参数，分别是“cols”、“rows”和和“none”，选取不同参数可以实现不同的效果。当取选取不同参数可以实现不同的效果。当取“rows”时，只能看到

27、表时，只能看到表格的行框线，隐藏的是表格的纵向分隔线。当取格的行框线，隐藏的是表格的纵向分隔线。当取“none”时，行框时，行框线和列框线全部隐藏。当取线和列框线全部隐藏。当取“cols”时，只能看到表格的纵向分隔时，只能看到表格的纵向分隔线，隐藏的是表格的行框线。线，隐藏的是表格的行框线。p 表格边框的显示与隐藏，可以用表格边框的显示与隐藏，可以用“frame”参数来控制，它只控参数来控制，它只控制表格的边框，而不影响单元格的框线。制表格的边框，而不影响单元格的框线。“frame”的参数有三种的参数有三种，分别是，分别是“vsides”表示只显示的左、右边框，表示只显示的左、右边框，“abo

28、ve”表示只显表示只显示表格的上边框，示表格的上边框，“below”表示只显示表格的下边框。表示只显示表格的下边框。设置设置rules属性属性4.3.3 表格属性面板的使用表格属性面板的使用p（1）引例）引例-效果图如下效果图如下4.3.3 表格属性面板的使用表格属性面板的使用p （2）设置表格格式）设置表格格式p 选定表格，打开窗口底部的选定表格，打开窗口底部的“属性属性”面板设置完成后，按面板设置完成后，按Enter键键进行确认进行确认 “间距”输入框用于设置相邻的单元格之间的距离 。“边框”输入框用于设置边框线的粗细。此例为“3”。“类”下拉列表框用于选择设置的CSS样式 清除表格的列宽

29、4.3.3 表格属性面板的使用表格属性面板的使用p （3）设置单元格格式）设置单元格格式p 1. 选定要设置属性的单元格行或列，选定要设置属性的单元格行或列，“属性属性”面板显示如下图参面板显示如下图参数数p 2“水平水平”下拉列表框用于设置单元格中文本在水平方向上的对下拉列表框用于设置单元格中文本在水平方向上的对齐方式；齐方式；“垂直垂直”列表框用于设置单元格中的文本在垂直方向上列表框用于设置单元格中的文本在垂直方向上的对齐方式。的对齐方式。p 3“宽宽”和和“高高”输入框用于分别设置单元格的宽度和高度。默输入框用于分别设置单元格的宽度和高度。默认的是像素，若用百分比则应在数值后加上百分号认

30、的是像素，若用百分比则应在数值后加上百分号 (%)。p 4“背景背景”输入框用于指定单元格、行或列的背景图像路径。也输入框用于指定单元格、行或列的背景图像路径。也可单击图标从其它位置选择一幅图像。可单击图标从其它位置选择一幅图像。.p 5“背景颜色背景颜色”和和“边框边框”色块用于设置单元格、列或行的背景色块用于设置单元格、列或行的背景颜色和边框颜色。此例背景色为颜色和边框颜色。此例背景色为“#0066CC”。4.4插入多媒体对象插入多媒体对象p4.4.1 使用图像使用图像p4.4.2 插入插入flash对象对象p4.4.3 插入视频对象插入视频对象p4.4.4 插入音频对象插入音频对象4.4

31、.1 使用图像使用图像p1、插入图像、插入图像1)“常用常用” “图像图像” -“Flash按钮按钮” 2)“选择图像源文件选择图像源文件” -“确定确定” 4.4.1 使用图像使用图像3)如果图像文件在站点外部，系统会提醒是否如果图像文件在站点外部，系统会提醒是否要将该文件保存在站点内部要将该文件保存在站点内部 单击单击“是是”4)“复制文件为复制文件为”(站点内寻找一个文件夹保存站点内寻找一个文件夹保存 )4.4.1 使用图像使用图像在插入图像文件时，如果在在插入图像文件时，如果在“首选参数首选参数”的的“辅助功能辅助功能”选项卡选项卡中选中了中选中了“图像图像”复选框，将会弹出复选框，将

32、会弹出“图像标签辅助功能属性图像标签辅助功能属性”对话框对话框 :替换文本:为图像输入一个名称或一段简短描述(50字符内)详细说明:输入文件的位置，或使用文件夹图标选择文件，提供指向与图像相关或者提供有关图像更多信息的文件链接插入图像效果图预览插入图像效果图预览另：另：4.4.1 使用图像使用图像p2、鼠标经过图像、鼠标经过图像: 一种在浏览器中查看并使用鼠标指针移过它时变化的图像一种在浏览器中查看并使用鼠标指针移过它时变化的图像,由主图由主图像和次图像（变化后的图像）两幅图像组成。像和次图像（变化后的图像）两幅图像组成。1)“常用常用” “图像图像” -“鼠标经过图鼠标经过图像像 ” 图像名

33、称：此文本框用于输入鼠标经过的图像的名称。原始图像：此选项用于指定在载入网页时显示的图像。 鼠标经过图像：此选项用于指定在鼠标滑过原始图像时显示的图像。预载鼠标经过图像：此复选框用于将图像预先载入浏览器的缓存，以便在用户经鼠标指针滑过图像时不发生延迟。前往的URL：此选项用于指定当用户按下鼠标经过图像时要打开的文件。 4.4.1 使用图像使用图像鼠标经过时效果图 4.4.1 使用图像使用图像p3、设置图像属性、设置图像属性“图像图像” -“属性属性” 对齐方式：此文本框用于输入鼠标经过的图像的名称。边距：此文本框用于输入鼠标经过的图像的名称。链接：直接输入要链接的对象的路径或选择浏览文件。4.

34、4.1 使用图像使用图像编辑 ：6个图标选项 图标名称功能编辑启动在首选参数中指定的外部编辑器，并打开选定的图像以进行编辑。使用Firework最优化在Dreamweaver中启动Fireworks来放置的Fireworks图像和动画进行快速的导出更改裁切可以修剪图像的大小，从所选图像中删除不需要的区域重新取样对已修剪的图像进行重新取样，提高图片在新的大小和形状下的品质亮度和对比度修改图像中像素的亮度和对比度锐化调整图像的清晰度4.4.2 插入插入flash对象对象p 1、插入、插入flash动画动画 将光标定位在要插入将光标定位在要插入flash动画的位置动画的位置 选择选择“插入插入”|“

35、媒体媒体”|“flash”命令，或单击命令，或单击“常用常用”工具栏多媒体按钮，在弹出的下拉菜单选择工具栏多媒体按钮，在弹出的下拉菜单选择flash命令命令，弹出，弹出“选择文件选择文件”对话框。对话框。 在在“查找范围查找范围”下拉列表框中选择需要插入的下拉列表框中选择需要插入的flash动动画文件。画文件。 单击确定按钮，会在网页中出现右上图所示单击确定按钮，会在网页中出现右上图所示flash标志标志。如果插入的。如果插入的flash文件不在站点文件夹下，系统会提文件不在站点文件夹下，系统会提示复制该示复制该flash文件到站点文件夹下。如果在首选参数文件到站点文件夹下。如果在首选参数那里

36、设置了插入图像的辅助功能，还会弹出那里设置了插入图像的辅助功能，还会弹出“对像标对像标签辅助功能属性签辅助功能属性”对话框。对话框。4.4.2 插入插入flash对象对象选择插入到网页中的选择插入到网页中的flash动画元件，此时动画元件，此时“属性属性”面板如图面板如图4-53示。示。选中此对象，可以在选中此对象，可以在“属性属性”面板中设置它的高度和宽度。可以面板中设置它的高度和宽度。可以点击点击“属性属性”面板上的面板上的“播放播放”按钮按钮 来预览效果。来预览效果。编辑：此按钮用于启动Macromedia Flash MX以更新Flash文件。如果计算机上没有加载Macromedia

37、Flash MX，此按钮将被禁用。 品质：此下拉列表框用于在对象播放期间控制抗失真。设置越高，效果越好比例：此下拉列表框用于指定对象如何在设置好的宽度和高度尺寸下显示。 “默认值”设置显示整个对象。参数：可设定ActiveX参数，这些参数用于ActiveX控件之间的数据交换。4.4.2 插入插入flash对象对象p2、插入、插入flash按钮按钮“常用常用” “媒体媒体”-“Flash按钮按钮” 4.4.2 插入插入flash对象对象p3、使用、使用Flash文本对象文本对象“常用常用” “媒体媒体”-“Flash文本文本”-“插入插入Flash文文本本” 4.4.2 插入插入flash对象对

38、象p4、插入、插入Flashpaperp将光标定位到插入将光标定位到插入Flashpaper的位置。的位置。p选择选择“插入插入”|“媒体媒体”|“Flashpaper”命令，或单击命令，或单击“常用常用”工具栏中多媒体按钮下的工具栏中多媒体按钮下的 命令，弹出命令，弹出“插入插入Flashpaper”对话框。对话框。p单击单击“源源”文本框后的文本框后的“浏览浏览”按钮，在弹出的按钮，在弹出的“选选择文件择文件”对话框中选择要显示的对话框中选择要显示的Flashpaper文档。文档。p在在“宽度宽度”和和“高度高度”文本框中输入文本框中输入Flashpaper文档文档在网页中显示范围的宽度和

39、高度，如下图。单击确定在网页中显示范围的宽度和高度，如下图。单击确定按钮即可插入按钮即可插入Flashpape文件。文件。4.4.2 插入插入flash对象对象p选择插入的选择插入的Flashpaper文件，单击文件，单击“属性属性”面板中的面板中的 按钮，即可预览按钮，即可预览Flashpaper的效果。如下图：的效果。如下图：4.4.3 插入视频对象插入视频对象p1、插入、插入FlashVideo1.将光标定位到要插入将光标定位到要插入FlashVideo的位置。的位置。2.选择选择“插入插入”|“媒体媒体”|“FlashVideo”命令，或单击命令，或单击“常用常用”工具工具栏中多媒体按

40、钮下栏中多媒体按钮下 命令，弹出命令，弹出“插入插入FlashVideo”对话对话框框3.在在“视频类型视频类型”下拉列表框中选择视频类型。下拉列表框中选择视频类型。4.单击单击“URL”文本框后面的文本框后面的“浏览浏览”按钮，在弹出的按钮，在弹出的“选择文件选择文件”对话框中选择要播放的对话框中选择要播放的Flash视频文件，这里选择视频文件，这里选择“1320281.flv”文件。文件。5.在在“外观外观”下拉列表框中选择视频播放器的外观界面。选择后在下拉列表框中选择视频播放器的外观界面。选择后在“外观外观”下拉列表框下方会显示选择的界面效果。下拉列表框下方会显示选择的界面效果。6.在在

41、“宽度宽度”和和“高度高度”文本框中输入视频画面的宽度和高度，也文本框中输入视频画面的宽度和高度，也可以单击按钮自动获取选择的视频文件的宽度和高度。可以单击按钮自动获取选择的视频文件的宽度和高度。4.4.3 插入视频对象插入视频对象7.设置完成后，对话框如左下图。设置完成后，对话框如左下图。8.单击单击“确定确定”按钮关闭对话框，即可插入按钮关闭对话框，即可插入FlashVideo。按。按F12键在浏览器中进行预览，效果如右下图。键在浏览器中进行预览，效果如右下图。4.4.3 插入视频对象插入视频对象p 2、插入、插入Shockwave影片影片1.将光标定位到插入将光标定位到插入Shockwa

42、ve影片所需的位置。影片所需的位置。2.选择选择“插入插入”|“媒体媒体”|“Shockwave”命令，或单击命令，或单击“常用常用”工具栏中多媒体按钮下的工具栏中多媒体按钮下的 命令，弹出命令，弹出“插入插入Shockwave”对话框。对话框。3.在该对话框中选择要插入的在该对话框中选择要插入的Shockwave影片文件，再影片文件，再单击单击“确定确定”按钮关闭该对话框，完成按钮关闭该对话框，完成Shockwave影影片的插入。在网页中会出现一个图标，如下图：片的插入。在网页中会出现一个图标，如下图：4.4.3 插入视频对象插入视频对象4.单击单击Shockwave影片图标，在如下图的影片

43、图标，在如下图的“属性属性”面板面板中设置其属性。中设置其属性。 5.按按F12预览得到如右图所预览得到如右图所示结果。示结果。4.4.3 插入视频对象插入视频对象p 3、插入、插入ActiveX1.将光标定位到插入将光标定位到插入ActiveX的位置。的位置。2.选择选择“插入插入”|“媒体媒体”|“ActiveX”命令，或单击命令，或单击“常用常用”工具栏工具栏中多媒体按钮下中多媒体按钮下 命令，即可在网页插入命令，即可在网页插入ActiveX对象。如对象。如上图。上图。3.选中该控件，然后选中选中该控件，然后选中“源文件源文件”前的复选框并单击后面的前的复选框并单击后面的“浏浏览文件览文

44、件”按钮，此时系统打开插件对话框。选择要播放的文件，按钮，此时系统打开插件对话框。选择要播放的文件，单击单击“确定确定”按钮。按钮。4.添加了视频文件后，如需做参数设置，则单击添加了视频文件后，如需做参数设置，则单击“属性属性”面板上面板上“参数参数”按钮，具体参数设置如下图，参数设置完成后，保存文件按钮，具体参数设置如下图，参数设置完成后，保存文件，在浏览器中就可以欣赏所插入的视频文件了。，在浏览器中就可以欣赏所插入的视频文件了。4.4.4 插入音频对象插入音频对象p 插入插件插入插件(视频文视频文件，音乐文件，件，音乐文件，动画文件动画文件)1.将光标定位到插入插件所需将光标定位到插入插件

45、所需的位置。的位置。2.选择选择“插入插入”|“媒体媒体”|“插插件件”命令，或单击命令，或单击“常用常用”工具栏中按钮工具栏中按钮 下的下的 命令，弹出命令，弹出“插入文件插入文件”对对话框，选择话框，选择22.mp3，如右图，如右图所示。所示。3.单击页面中插件图标，然后单击页面中插件图标，然后在其在其“属性属性”面板中面板中“宽宽”与与“高高”文本框中输入数据文本框中输入数据，按，按F12预览即可。预览即可。4.5插入插入Java Applet pJava程序分类程序分类:Java小程序小程序(Applet)和和Java应用程序应用程序(Application)。Java Applet嵌

46、入在嵌入在WWW的页面的页面,作为作为 页面的组成部分页面的组成部分被下载被下载,并能运行在实现并能运行在实现Java虚机器虚机器(JVM)的的Web浏览浏览 器中。器中。Java的安全机制可以防止小程序存取本地文件或的安全机制可以防止小程序存取本地文件或其他安全方面其他安全方面 的问题。而一个的问题。而一个Java应用程序运行于应用程序运行于Web浏览器之外浏览器之外,没有没有Applet运行运行 时的诸多限制。时的诸多限制。最大区别最大区别:Java Applet 没有主程序没有主程序,而而Java应用程序一定应用程序一定要有主程序。要有主程序。区别：区别：4.5插入插入Java Appl

47、etp例：在站点目录例：在站点目录media下有一个下有一个Applet程程序文件序文件flame.class，它的作用是显示出燃，它的作用是显示出燃烧的文字效果如右下图：烧的文字效果如右下图： 步骤一：步骤一：新建文档，保存到新建文档，保存到media下。在文档编辑窗口中，将光下。在文档编辑窗口中，将光标定位在插入标定位在插入Applet地方，然后在地方，然后在“媒体媒体”下拉列表中选择下拉列表中选择 。此时。此时将打开将打开”选择文件选择文件“对话框。在对话对话框。在对话框中找到框中找到Flame.class如右图。如右图。4.5插入插入Java Applet步骤二：步骤二：确定选中文件后

48、，选中文档图标确定选中文件后，选中文档图标 。接着。接着在在“属性属性”面板中设置其宽度和高度，如图：面板中设置其宽度和高度，如图：参数对话框中设参数对话框中设置好显示的文字置好显示的文字 【done】4.6 创建超级链接创建超级链接 p4.6.1 地址和链接地址和链接p4.6.2 添加链接添加链接p4.6.3 书签链接和热点链接书签链接和热点链接4.6.1 地址和链接地址和链接1、文件地址 相对地址 绝对地址：适用与创建外部链接。如http:/ 根目录相对地址 文件相对地址 要创建从exercise目录下的images.htm到站点根目录下的index.htm的链接，链接地址应是“./ind

49、ex.htm”。要创建到exercise目录下的images.htm的链接，任何文件中的链接地址都可以写成“/exercise/images.htm”。 2、超级链接 外部链接：超级链接的是站点目录内的文件 内部链接：超级链接的是站点目录外的文件 4.6.2 添加链接添加链接p1、添加外部链接、添加外部链接(文字文字/图像图像)-载体为文字为例载体为文字为例步骤一：步骤一：在编辑的网页中选择要创建超级链接的文字。此时在网页中在编辑的网页中选择要创建超级链接的文字。此时在网页中输入输入“武汉大学武汉大学”。然后选中文本。然后选中文本。步骤二：步骤二：在在“属性属性”面板的面板的“链接链接”文本框

50、中输入武汉大学的网址，文本框中输入武汉大学的网址，“http:/ _self:在链接所在的同一个框架或窗口中载入所链接的文档。(默认值,通常无需指定) _top:在整个浏览器窗口中载入所链接的文档，因而会删除所有框架。4.6.2 添加链接添加链接p2、添加内部链接、添加内部链接 （1）选择文件方式）选择文件方式属性”面板-“链挡”-“浏览文件” （2）拖放定位图标方式）拖放定位图标方式首先打开要添加链接的网页，并选中要添加链接的文字或者图首先打开要添加链接的网页，并选中要添加链接的文字或者图像。同时在像。同时在“文件文件”面板上展开要链接的文件所在的目录。单面板上展开要链接的文件所在的目录。单击击“属性属性”面板上按住链接定位图标不放，然后将其拖动到要面板上按住链接定位图标不放，然后将其拖动到要链接的