《第三章网页编辑》由会员分享，可在线阅读，更多相关《第三章网页编辑（63页珍藏版）》请在金锄头文库上搜索。
1、第三章网页编辑第三章网页编辑3.1 网页的基本操作 n3.1.1 新建网页新建网页Dreamweaver提供了多种创建网页的方法，下面分别介绍一下：（演示3-1）1如果Dreamweaver MX 2004 运行后显示起始页，则在起始页中直接选择“新建HTML文档”。2如果Dreamweaver MX 2004运行后不显示起始页，则在“文件”菜单选择“新建”命令，打开“新建文档”对话框。3在文档窗口中，也可以直接按Ctrl+N组合键，打开 “新建文档”对话框。3.1 网页的基本操作 n3.1.2 保存网页保存网页 （演示3-2）1.新建一个文件后，选择菜单“文件”中的“保存”命令 。2在文档窗
2、口中，也可以直接按Ctrl+S组合键。3.需要将文件以不同路径或名称保存时，选择“文件”菜单中的“另存为”命令。注意：网页的后缀必须为htm或html，否则上传到服务器之后，浏览器无法正常打开。通常网站首页名字是index.html或index.htm。3.1 网页的基本操作 n3.1.3 打开网页与关闭网页打开网页与关闭网页 （演示3-3）1启动Dreamweaver程序，在起始页面中显示了最近编辑过的文件，点击目标文件，即可打开。2选择“文件”菜单中“打开”命令（介绍下能打开的文件类型）。3在文档窗口中，也可以直接按Ctrl+O组合键，出现“打开”对话框。4通过“文件面板”打开文档。通过“
3、文件面板”找到相应的文档，双击即可打开相应文件。 3.1 网页的基本操作 n3.1.4 页面属性的设置页面属性的设置 （演示3-4）1.打开首页面，在编辑窗口下选择“修改”菜单中的“页面属性”，或在在工作区单击鼠标右键，在快捷菜单中选择“页面属性”，打开“页面属性”对话框。2.“页面属性”对话框中的各选项含义（在标题栏课本上有一处错误，以帮助文档为准）3.1 网页的基本操作 n3.1.5 网页预览网页预览（演示3-5）1按F12键。2选择“文件”菜单中的子菜单“在浏览器中预览”下的“Iexplore”命令。3单击“文档”工具栏的“在浏览器中预览/调试”按钮，并在弹出的下拉菜单中选择“预览在ie
4、xplore”命令。 3.2 在网页中添加文本和图片在网页中添加文本和图片n准备工作：1.首先启动Dreamweaver，确保已经用站点管理器建立好了一个网站（根目录）。2.为了制作方便，最好事先打开资源管理器，把要使用的图片收集到网站目录images文件夹内。 3.2 在网页中添加文本和图片在网页中添加文本和图片n3.2.1 在网页中添加文本 1.添加文本1）直接添加文本：（演示3-6）（1）输入过程中换行方法：自动换行（根据窗口宽度，英文不连续）：自动换行的好处在于不管浏览器窗口的大小，网页文字都将依照窗口大小自动换行，避免超出水平页面之外而需要移动滚动条浏览的情况。利用Enter键换行（
5、硬换行）：按Enter键，则另起一个段落，并且插入点移到隔了一个空白行的位置上。利用Shift + Enter键换行（软换行）：如果想要将文字手动换行，中间又不出现空白行，可以按Shift + Enter键，其行距比直接按Enter键小。3.2 在网页中添加文本和图片在网页中添加文本和图片n3.2.1 在网页中添加文本 1.添加文本添加文本1）直接添加文本：（演示）直接添加文本：（演示3-6）（2）输入空格）输入空格 Dreamweaver中，在文本开始处直接按空格键是不会输入空格的，在文字之间按空格键可以输入半个空格。如果要在网页中输入空格，可以采用如下三种方法：1.按住“Ctrl+Shif
6、t”键，按一次空格键，键入半个空格。 2.将输入法由半角状态切换到在全角状态，按一次空格键，键入一个空格。3.输入多个连续空格：编辑-首选参数- 常规3.2 在网页中添加文本和图片在网页中添加文本和图片n3.2.1 在网页中添加文本 1.添加文本添加文本 2）复制文本打开字处理软件下含有文本的文档，如word文档，执行“编辑”菜单中的“复制”命令复制文本。然后在Dreamweaver文档窗口中，将插入点置于要添加文本的位置，执行“编辑”菜单中的“粘贴”命令，完成文本复制。3.2 在网页中添加文本和图片在网页中添加文本和图片n3.2.1 在网页中添加文本 1.添加文本添加文本3）导入Word文档
7、（演示3-7，第3章_网页编辑.doc）选择“文件”菜单中的子菜单“导入”下的“Word文档”命令，从打开的“打开”对话框中选择需要导入到Dreamweaver的Word文档，选择完毕后单击“确定”按钮，即可完成Word文档的导入。Dreamweaver“导入”功能除了能够导入Word文档外，还可以实现导入EXCEL文档、表格式数据及XML到模板等功能。3.2 在网页中添加文本和图片在网页中添加文本和图片n3.2.1 在网页中添加文本 2、格式化文本、格式化文本在Dreamweaver中，可以使用文本的属性面板方便地进行文本的格式设置。文本的属性面板显示文档中被选中文本的格式属性。可以在文本的
8、属性面板中更改格式。注意：如果没有显示属性面板，可以通过执行“窗口”菜单下的“属性”命令来显示它。文本的属性面板各主要选项的功能(演示3-8，随意插入一段文字，操作添加字体)：3.2 在网页中添加文本和图片在网页中添加文本和图片n3.2.2 在网页中添加图片 GIF格式（格式（Graphics Interchange Format 图像交换格式）图像交换格式）采用无损压缩算法进行图像的压缩处理，是目前在网页设计中使用采用无损压缩算法进行图像的压缩处理，是目前在网页设计中使用最普遍、最广泛的一种图像格式。最普遍、最广泛的一种图像格式。GIF格式可以高度压缩图像使其变格式可以高度压缩图像使其变得相
9、当小，它在网页中大量用于动画、站点图标得相当小，它在网页中大量用于动画、站点图标LOGO、广告条及网、广告条及网页背景图像。它最多支持页背景图像。它最多支持256种颜色，不适合用作照片级的网页图种颜色，不适合用作照片级的网页图像。像。JPEG格式（格式（Joint Photo Expert Graphics，联合图形专家，联合图形专家组图片格式）是另一种在组图片格式）是另一种在Web上应用广泛的图像格式。由于它支持上应用广泛的图像格式。由于它支持的颜色数几乎没有限制，因此通常用来显示照片等颜色丰富精美图的颜色数几乎没有限制，因此通常用来显示照片等颜色丰富精美图像。与像。与GIF格式采用无损压缩
10、不同，格式采用无损压缩不同，JPEG格式使用有损压缩来减小格式使用有损压缩来减小图片文件的大小，因此用户将看到随着文件的减小，图片的质量也图片文件的大小，因此用户将看到随着文件的减小，图片的质量也降低了。降低了。PNG格式（格式（Portable Networks Graphics，可移植的网络，可移植的网络图形格式）是近年来新出现的一种图像格式，它适于任何类型、任图形格式）是近年来新出现的一种图像格式，它适于任何类型、任何颜色深度的图片。该格式既融合了何颜色深度的图片。该格式既融合了GIF格式透明显示的特点，又具格式透明显示的特点，又具有有JPEG处理精美图像的优势，因此处理精美图像的优势，
11、因此PNG格式很可能会取代格式很可能会取代GIF格式格式和和JPEG格式。格式。3.2 在网页中添加文本和图片在网页中添加文本和图片n3.2.2 在网页中添加图片 1.插入图像（演示插入图像（演示3-9，Toco Toucan.jpg）1）在）在“文档文档”窗口中将光标移到将要插入图像的位窗口中将光标移到将要插入图像的位置。置。2）单击）单击“插入插入”菜单中的菜单中的“图像图像”命令，或单击命令，或单击“常用常用”子面板上的子面板上的“图像图像”按钮，打开按钮，打开“选择图像源文件选择图像源文件”对话框，对话框，3）选择已存放在当前站点中的图像文件或在磁盘）选择已存放在当前站点中的图像文件或
12、在磁盘中查找其他的图像文件，然后单击中查找其他的图像文件，然后单击“确定确定”按钮。按钮。注意：如果要插入的图像文件不在当前站点的文件注意：如果要插入的图像文件不在当前站点的文件夹中，插入时会出现一个对话框，询问是否要将这个图夹中，插入时会出现一个对话框，询问是否要将这个图像文件复制到当前站点的文件夹中，通常选择像文件复制到当前站点的文件夹中，通常选择“是是”，这，这时打开时打开“复制文件为复制文件为”对话框，要求在站点中选择一个文对话框，要求在站点中选择一个文件夹加以保存，这样可以保证网页对这个图像文件的引件夹加以保存，这样可以保证网页对这个图像文件的引用。用。3.2 在网页中添加文本和图片
13、在网页中添加文本和图片n3.2.2 在网页中添加图片 2图像属性设置图像属性设置用鼠标单击图像，图像四周出现可编辑的缩放手柄，说明该图像被选定。在图像的属性面板中，各主要选项的功能如下（演示3-10）： 3.2 在网页中添加文本和图片在网页中添加文本和图片n3.2.2 在网页中添加图片 3.改变图像的尺寸改变图像的尺寸改变图像的尺寸大小，可以通过在属性面板改变图像的尺寸大小，可以通过在属性面板中的中的“宽宽”和和“高高”文本框中直接输入数值来改变图文本框中直接输入数值来改变图像的尺寸大小。像的尺寸大小。此外，还可以通过拖放图像的缩放边框来改此外，还可以通过拖放图像的缩放边框来改变图像的尺寸。为
14、了避免造成拖动的宽度和高度变图像的尺寸。为了避免造成拖动的宽度和高度比例不等而失真，可按下比例不等而失真，可按下Shift键进行键进行“锁定比例锁定比例”的缩放。的缩放。 （演示3-11） 3.2 在网页中添加文本和图片在网页中添加文本和图片n3.2.2 在网页中添加图片 4.对齐图像对齐图像在在Dreamweaver中调整图像位置的中调整图像位置的方法很简单，简述如下：方法很简单，简述如下：1）选中页面中要编辑的图像；）选中页面中要编辑的图像；2）打开图像属性面板中的）打开图像属性面板中的“对齐对齐”下拉下拉列表列表（演示3-12） 3.2 在网页中添加文本和图片在网页中添加文本和图片n3.
15、2.3 在网页中添加特殊字符 （演示3-13） 1. 在在Dreamweaver MX中中，这这些些特特殊殊字字符符可可以以通通过过执执行行“插插入入”菜菜单单中中的的子子菜菜单单“HTML”下下的的“特殊字符特殊字符”命令，来插入所需的字符。命令，来插入所需的字符。2. 另另外外，在在“插插入入”栏栏的的“文文本本”类类别别中中单单击击“字符字符”按钮上的箭头后，也可选择所需的字符。按钮上的箭头后，也可选择所需的字符。3. 还还可可以以插插入入其其他他字字符符，两两种种方方式式选选择择“其其他他字字符符”命命令令，会会出出现现一一个个“插插入入其其他他字字符符”对对话话框。框。3.2 在网页
16、中添加文本和图片在网页中添加文本和图片n3.2.4 在网页中添加水平线 （演示3-13） 在页面中，可以使用一条或多条水平分隔线在页面中，可以使用一条或多条水平分隔线以可视方式分隔文本和对象。插入水平线的方法以可视方式分隔文本和对象。插入水平线的方法如下：如下：在文档窗口中，将插入点放在要插入水平线在文档窗口中，将插入点放在要插入水平线的位置，在的位置，在“插入插入”工具栏的工具栏的“HTML”选项卡中单选项卡中单击击“水平线水平线”按钮，或者执行按钮，或者执行“插入插入”菜单下的子菜菜单下的子菜单单“HTML”中的中的“水平线水平线”命令来添加水平线。另命令来添加水平线。另外，选中插入的这条
17、水平线，可以在属性面板对外，选中插入的这条水平线，可以在属性面板对它的属性进行设置。它的属性进行设置。3.2 在网页中添加文本和图片在网页中添加文本和图片n3.2.5 插入更新日期插入更新日期（演示3-14） 将光标置于要插入的位置，选择将光标置于要插入的位置，选择“插入插入”菜单中的菜单中的“日日期期”命令，或单击命令，或单击“常用常用”工具栏上的日期按钮，将弹出工具栏上的日期按钮，将弹出“插入日期插入日期”对话框。对话框。从从“星期格式星期格式”下拉列表框中可选择星期的显示格式，下拉列表框中可选择星期的显示格式，当然也可以不显示星期；从当然也可以不显示星期；从“日期格式日期格式”列表框中可
18、选择列表框中可选择要插入的日期的显示格式，例如选择要插入的日期的显示格式，例如选择“年月日年月日”的显的显示格式；示格式； 从从“时间格式时间格式”下拉列表框中可选择要插入的时下拉列表框中可选择要插入的时间格式，时间格式有两种：即间格式，时间格式有两种：即12小时计时法和小时计时法和24小时计小时计时法，当然也可设置不要时间。时法，当然也可设置不要时间。若选择若选择“储存时自动更新储存时自动更新”复选框，这样在每次保存复选框，这样在每次保存文档时都可更新插入的日期和时间。设置完毕后单击文档时都可更新插入的日期和时间。设置完毕后单击“确确定定”按钮即可完成日期的插入。按钮即可完成日期的插入。3.
19、3 创建列表项创建列表项3.3.1 创建编号列表项（演示创建编号列表项（演示3-15，和项目列表一，和项目列表一起）起） 编号列表项又称有序列表，是有一定排列顺序的列编号列表项又称有序列表，是有一定排列顺序的列表，一般前面有数字前导字符，可以是阿拉伯数字、英表，一般前面有数字前导字符，可以是阿拉伯数字、英文字母、罗马数字等符号。创建编号列表的方法如下：文字母、罗马数字等符号。创建编号列表的方法如下：在文档窗口中，将插入点放在要添加编号列表的位在文档窗口中，将插入点放在要添加编号列表的位置，单击置，单击“文本属性面板文本属性面板”中的中的“编号列表编号列表”按钮；或者执按钮；或者执行行“文本文本
20、”菜单下的子菜单菜单下的子菜单“列表列表”中的中的“编号列表编号列表”菜单命菜单命令添加，指定列表项的数字前导字符出现在文档窗口中。令添加，指定列表项的数字前导字符出现在文档窗口中。若要添加编号的文本已经存在，也可将这些文本选若要添加编号的文本已经存在，也可将这些文本选定，使用上述方法，一次性给文本添加编号。定，使用上述方法，一次性给文本添加编号。3.3 创建列表项创建列表项3.3.2 设置项目列表设置项目列表（演示（演示3-15） 项目列表项又称无序列表，是一系列无顺序级别关项目列表项又称无序列表，是一系列无顺序级别关系的项目符号组成的列表，一般前面用项目符号作为前系的项目符号组成的列表，一
21、般前面用项目符号作为前导字符。创建项目列表的方法如下。导字符。创建项目列表的方法如下。在文档窗口中，将插入点放在要添加项目列表的位在文档窗口中，将插入点放在要添加项目列表的位置，单击置，单击“文本属性面板文本属性面板”中的中的“项目列表项目列表”按钮；或者执按钮；或者执行行“文本文本”菜单下的子菜单菜单下的子菜单“列表列表”中的中的“项目列表项目列表”菜单命菜单命令添加，指定列表项的项目前导字符出现在文档窗口中。令添加，指定列表项的项目前导字符出现在文档窗口中。若要添加项目列表的文本已经存在，也可将这些文若要添加项目列表的文本已经存在，也可将这些文本选定，使用上述方法，一次性给文本添加项目符号
22、。本选定，使用上述方法，一次性给文本添加项目符号。3.3 创建列表项创建列表项3.3.3 创建多级列表项（演示创建多级列表项（演示3-16） 有时在使用列表时可能还会用到嵌套有时在使用列表时可能还会用到嵌套列表，即在当前列表下还包含有一层或多列表，即在当前列表下还包含有一层或多层列表。创建嵌套列表的方法如下。层列表。创建嵌套列表的方法如下。在文档窗口中创建了任意列表，然后在文档窗口中创建了任意列表，然后选择要嵌套的列表项，单击选择要嵌套的列表项，单击“文本属性面板文本属性面板”中的中的“文本缩进文本缩进”按钮，就会将要嵌套的列按钮，就会将要嵌套的列表项文本缩进并创建一个单独的列表。表项文本缩进
23、并创建一个单独的列表。3.3 创建列表项创建列表项3.3.4修改列表属性（演示修改列表属性（演示3-16） 首先将文字按照无序或有序列表方式首先将文字按照无序或有序列表方式进行列表设置，然后将光标移到列表文字进行列表设置，然后将光标移到列表文字中。单击中。单击“文本属性面板文本属性面板”中的中的“列表项目列表项目”按钮，或者执行按钮，或者执行“文本文本”菜单下的子菜单菜单下的子菜单“列列表表”中的中的“属性属性”菜单命令，弹出菜单命令，弹出“列表属性列表属性”对话框。对话框。介绍对话框的主要内容和功能。介绍对话框的主要内容和功能。上机操作指导n新建一个个人网站主页index.htm，对自己的简
24、要情况，兴趣爱好，所学专业等进行简要的介绍。n要对网页中文本的格式进行设置，包括字形，字号，加粗，下划线等效果。n插入自己的一张照片，并使用照片属性对其设置，做到美观大方。n在不同的栏目之间用水平线进行分割。n在网页底部插入当前日期和时间。n用列表项列出自己的兴趣爱好。3.4 用表格布局网页用表格布局网页3.4.1 表格基本操作表格基本操作 n1插入表格（演示插入表格（演示3-17） 1）在插入）在插入“常用常用”工具栏上，单击插入表格工具栏上，单击插入表格按钮。按钮。2）通过主窗口）通过主窗口“插入插入”菜单中的菜单中的“表格表格”命令。命令。3）使用快捷组合键）使用快捷组合键“Ctrl+A
25、lt+T”。4）在插入）在插入“常用常用”工具栏上，拖动表格按钮工具栏上，拖动表格按钮到主窗口的工作区中。到主窗口的工作区中。“表格表格”对话框各主要选项的功能介绍：对话框各主要选项的功能介绍：3.4 用表格布局网页用表格布局网页3.4.1 表格基本操作表格基本操作 n1插入表格（演示插入表格（演示3-17） 注注意意：“表表格格宽宽度度”文文本本框框用用来来设设置置生生成成表表格格的的宽宽度度，可可以以填填入入数数值值，紧紧随随其其后后的的下下拉拉列列表表框框用用来来设设置置宽宽度度的的单单位位，有有两两个个选选项项百百分分比比和和像像素素。当当宽宽度度的的单单位位选选择择百百分分比比时时，
26、表表格格的的宽宽度度会会随随浏浏览览器器窗窗口口的的大大小小而而改改变变。例例如如设设置置宽宽度度为为窗窗口口宽宽度度的的60，那那么么当当浏浏览览器器窗窗口口大大小小变变化化的的时时候候表表格格的的宽宽度度也也随随之之变变化化；如如果果设设置置宽宽度度为为400像像素素，那那么么无无论论浏浏览览器器窗窗口口大大小小为为多多少少，表表格的宽度都不会变化。格的宽度都不会变化。3.4 用表格布局网页用表格布局网页3.4.1 表格基本操作表格基本操作 2编辑表格编辑表格1）选择表格）选择表格（1）选择整个表格（演示）选择整个表格（演示3-18） 方法一：将光标置于表格中的某个单元格中，选择方法一：将
27、光标置于表格中的某个单元格中，选择“修改修改”菜单菜单下的子菜单下的子菜单“表格表格”中的中的“选择表格选择表格”命令。命令。方法二：将光标置于表格中的某个单元格中，再按两次组合键方法二：将光标置于表格中的某个单元格中，再按两次组合键“Ctrl+A”。方法三：将光标置于表格中的某个单元格中，单击鼠标右键，方法三：将光标置于表格中的某个单元格中，单击鼠标右键，在弹出的快捷菜单中选择在弹出的快捷菜单中选择“表格表格”中的中的“选择表格选择表格”命令。命令。方法四：将光标置于表格的尾部（在表格的同一行，但不在表方法四：将光标置于表格的尾部（在表格的同一行，但不在表格之内），向左拖动鼠标。格之内），向
28、左拖动鼠标。方法五：单击表格的边线。方法五：单击表格的边线。3.4 用表格布局网页用表格布局网页3.4.1 表格基本操作表格基本操作 2编辑表格编辑表格1）选择表格）选择表格（2）选择单个单元格）选择单个单元格 （演示（演示3-19） 方法一：将光标置于所要选择的单元格中，按一次方法一：将光标置于所要选择的单元格中，按一次组合键组合键“Ctrl+A”。方法二：将光标置于所要选择的单元格中，向右拖方法二：将光标置于所要选择的单元格中，向右拖动鼠标。动鼠标。方法三：将光标置于所要选择的单元格中，选择方法三：将光标置于所要选择的单元格中，选择“编编辑辑”菜单中的菜单中的“全选全选”命令。命令。方法四
29、：按住方法四：按住Ctrl键，单击所要选择的单元格，再键，单击所要选择的单元格，再单击一次则取消对单元格的选择。单击一次则取消对单元格的选择。3.4 用表格布局网页用表格布局网页3.4.1 表格基本操作表格基本操作 2编辑表格编辑表格1）选择表格）选择表格（3）选择多个单元格）选择多个单元格 （演示（演示3-20） 方法一：按住方法一：按住Ctrl键，单击所要选择的所有单元格。键，单击所要选择的所有单元格。（可不连续）（可不连续）方法二方法二 ：将光标置于单元格中，拖动鼠标，选择多：将光标置于单元格中，拖动鼠标，选择多个单元格。个单元格。方法三：如果要选择整行，将光标置于该行的左边方法三：如果
30、要选择整行，将光标置于该行的左边缘，当光标变成图标时单击鼠标左键。缘，当光标变成图标时单击鼠标左键。方法四：如果要选择整列，将光标置于该列的上边方法四：如果要选择整列，将光标置于该列的上边缘，当光标变成黑色图标时单击鼠标左键。缘，当光标变成黑色图标时单击鼠标左键。3.4 用表格布局网页用表格布局网页3.4.1 表格基本操作表格基本操作 2编辑表格编辑表格1）选择表格）选择表格（4）选择全部单元格）选择全部单元格 （演示（演示3-21） 方法一：将光标置于第方法一：将光标置于第1个单元格中，并拖动鼠标个单元格中，并拖动鼠标至最后一个单元格。至最后一个单元格。方法二：将光标置于第方法二：将光标置于
31、第1个单元格中，按住个单元格中，按住Shift键，键，再单击最后一个单元格。再单击最后一个单元格。方法三：将光标置于第方法三：将光标置于第1行的左边缘，当光标变成行的左边缘，当光标变成黑色图标时，向下拖动鼠标至最后一行。黑色图标时，向下拖动鼠标至最后一行。方法四：将光标置于第方法四：将光标置于第1列的上边缘，当光标变成列的上边缘，当光标变成 黑色图标时，向右拖动鼠标至最后一列。黑色图标时，向右拖动鼠标至最后一列。3.4 用表格布局网页用表格布局网页3.4.1 表格基本操作表格基本操作 2编辑表格编辑表格2）添加）添加/删除行列（演示删除行列（演示3-22，一起演示），一起演示） （1）在现有的
32、表格中插入单元行，可以选择以下）在现有的表格中插入单元行，可以选择以下的操作之一：的操作之一：方法一：将光标移到要插入单元行的下一行，选择方法一：将光标移到要插入单元行的下一行，选择“修改修改”菜单下子菜单菜单下子菜单“表格表格”中的中的“插入行插入行”命令。命令。方法二：将光标移到要插入单元行的下一行，单击方法二：将光标移到要插入单元行的下一行，单击鼠标右键，在弹出的快捷菜单中选择鼠标右键，在弹出的快捷菜单中选择“表格表格”中的中的“插入行插入行”命令。命令。3.4 用表格布局网页用表格布局网页3.4.1 表格基本操作表格基本操作 2编辑表格编辑表格2）添加）添加/删除行列（演示删除行列（演
33、示3-22） （2）在现有的表格中插入单元列，可以选择以下）在现有的表格中插入单元列，可以选择以下的操作之一：的操作之一：方法一：将光标移到在插入单元列的右边一列，选方法一：将光标移到在插入单元列的右边一列，选择择“修改修改”菜单下子菜单菜单下子菜单“表格表格”中的中的“插入列插入列”命令。命令。方法二：将光标移到要插入单元列的右边一列，单方法二：将光标移到要插入单元列的右边一列，单击鼠标右键，在弹出的快捷菜单中选择击鼠标右键，在弹出的快捷菜单中选择“表格表格”中的中的“插入插入列列”命令命令3.4 用表格布局网页用表格布局网页3.4.1 表格基本操作表格基本操作 2编辑表格编辑表格2）添加）
34、添加/删除行列（演示删除行列（演示3-22） （3）如果想在现有的表格中添加多行或多）如果想在现有的表格中添加多行或多列，可执行以下操作：列，可执行以下操作：首先将光标移到要插入行或列附近的单元格首先将光标移到要插入行或列附近的单元格中，单击鼠标右键，在弹出的快捷菜单中选择中，单击鼠标右键，在弹出的快捷菜单中选择“表格表格”中的中的“插入行或列插入行或列”命令，或是选择命令，或是选择“修改修改”菜单下子菜单菜单下子菜单“表格表格”中的中的“插入行或列插入行或列”命令，在命令，在此对话框中进行相关的设置，然后单击此对话框中进行相关的设置，然后单击“确定确定”按按钮，设置的多列或多行将插入到页面中
35、。钮，设置的多列或多行将插入到页面中。3.4 用表格布局网页用表格布局网页3.4.1 表格基本操作表格基本操作 2编辑表格编辑表格2）添加）添加/删除行列（演示删除行列（演示3-22） （4）删除整行）删除整行/整列，可以选择以下的操作之一：整列，可以选择以下的操作之一：方法一：先选择欲删除的整行或整列，直接按方法一：先选择欲删除的整行或整列，直接按Del键，即可删除。键，即可删除。方法二：先将光标移到要删除的行或列中，选择方法二：先将光标移到要删除的行或列中，选择“修修改改”菜单下子菜单菜单下子菜单“表格表格”中的中的“删除行删除行”或或“删除列删除列”命令。命令。方法三：将光标移到要删除的
36、行或列中，单击鼠标方法三：将光标移到要删除的行或列中，单击鼠标右键，在弹出的快捷菜单中选择右键，在弹出的快捷菜单中选择“表格表格”中的中的“删除行删除行”或或“删除列删除列”命令。命令。3.4 用表格布局网页用表格布局网页3.4.1 表格基本操作表格基本操作 2编辑表格编辑表格3）修改表格大小（演示）修改表格大小（演示3-23） （1）设置表格的宽度及高度）设置表格的宽度及高度方法一：通过鼠标拖曳法可以粗略地调整表格的大方法一：通过鼠标拖曳法可以粗略地调整表格的大小。小。方法二：通过方法二：通过“表格属性表格属性”对话框可以精确地调整表对话框可以精确地调整表格的大小。格的大小。在创建表格时，可
37、以通过表格对话框来设置表格的在创建表格时，可以通过表格对话框来设置表格的宽度，但无法设置表格的高度，如果要设置表格的高度，宽度，但无法设置表格的高度，如果要设置表格的高度，可以通过表格属性面板来确定。可以通过表格属性面板来确定。3.4 用表格布局网页用表格布局网页3.4.1 表格基本操作表格基本操作 2编辑表格编辑表格3）修改表格大小（演示）修改表格大小（演示3-23） （2）设置单元格的宽度及高度）设置单元格的宽度及高度在默认情况下，单元格的宽度是随表格的宽度而定在默认情况下，单元格的宽度是随表格的宽度而定的，表格中每一列的宽度基本上都相等，也就是说每一的，表格中每一列的宽度基本上都相等，也
38、就是说每一个单元格的宽度都是相同的。如果不指定表格的高度，个单元格的宽度都是相同的。如果不指定表格的高度，则表格中同一行的高度也是相等的，即单元格的高度相则表格中同一行的高度也是相等的，即单元格的高度相同。在属性面板上可以改变单元格默认的宽度和高度。同。在属性面板上可以改变单元格默认的宽度和高度。将光标置于需要设置宽度或高度的单元格中，此时属性将光标置于需要设置宽度或高度的单元格中，此时属性面板显示单元格属性。在属性面板上的面板显示单元格属性。在属性面板上的“宽宽”或或“高高”文本文本框中输入适当的数值即可。但单元格宽度与高度的单位框中输入适当的数值即可。但单元格宽度与高度的单位只可以使用像素
39、，不能使用百分比。只可以使用像素，不能使用百分比。3.4 用表格布局网页用表格布局网页3.4.1 表格基本操作表格基本操作 2编辑表格编辑表格4）合并）合并/拆分单元格（演示拆分单元格（演示3-24） （1）合并单元格）合并单元格首先在表格中选择需合并的单元格，属性面板变成首先在表格中选择需合并的单元格，属性面板变成单元格属性面板，然后选择下列操作之一：单元格属性面板，然后选择下列操作之一：方法一：选择方法一：选择“修改修改”菜单下子菜单菜单下子菜单“表格表格”中的中的“合并合并单元格单元格”命令。命令。方法二：单击鼠标右键，在弹出的快捷菜单中选择方法二：单击鼠标右键，在弹出的快捷菜单中选择“
40、表格表格”中中“合并单元格合并单元格”命令。命令。方法三：单击单元格属性面板上的合并单元格图标。方法三：单击单元格属性面板上的合并单元格图标。3.4 用表格布局网页用表格布局网页3.4.1 表格基本操作表格基本操作 2编辑表格编辑表格4）合并）合并/拆分单元格（演示拆分单元格（演示3-24） （2）拆分单元格）拆分单元格方法一：选择方法一：选择“修改修改”菜单下子菜单菜单下子菜单“表格表格”中中“拆分单拆分单元格元格”命令。命令。方法二：单击鼠标右键，在弹出的下拉菜单中选择方法二：单击鼠标右键，在弹出的下拉菜单中选择“表格表格”中中“拆分单元格拆分单元格”命令。命令。方法三：单击属性面板上的拆
41、分单元格图标。方法三：单击属性面板上的拆分单元格图标。在在“拆分单元格拆分单元格”对话框中，可以选择拆分成行和列对话框中，可以选择拆分成行和列以及行以及行/列的数量。列的数量。 3.4 用表格布局网页用表格布局网页3.4.1 表格基本操作表格基本操作 2编辑表格编辑表格5）设置表格属性 （演示3-25） 选中一个表格后，可以通过表格属性面板更改表格属性 6）单元格属性 （演示3-26） 把光标移动到某个单元格内，可以利用单元格属性面板对这个单元格的属性进行设置 3.4 用表格布局网页用表格布局网页3.4.1 表格基本操作表格基本操作 2编辑表格编辑表格7）格式化表格（演示3-27） Dream
42、weaver还为我们提供了十几种表格模板，使设置表格格式变得非常方便，并且这些模板也可以通过设定参数来进行调整。选中表格，选择“命令”菜单中的“格式化表格” 。3.4 用表格布局网页用表格布局网页3.4.2 表格数据操作表格数据操作1导入表格数据导入表格数据（演示3-28） Dreamweaver 还支持将外部的数据导入表格，这还支持将外部的数据导入表格，这些数据文件一般是些数据文件一般是纯文本纯文本或者或者Excel等工具创建的文件，等工具创建的文件，一般是以制表符、逗号、分号等作为分隔符的格式。一般是以制表符、逗号、分号等作为分隔符的格式。选择选择“文件文件”菜单下子菜单菜单下子菜单“导入
43、导入”中的中的“表格式数据表格式数据”命令，再单击命令，再单击“浏览浏览”按钮选择数据源，按钮选择数据源，“分隔符分隔符”选项需选项需要和导入的数据文件保持一致，要和导入的数据文件保持一致，“表格宽度表格宽度”有两个选项，有两个选项，“匹配内容匹配内容”比较紧凑，但表格的宽度不一致，比较紧凑，但表格的宽度不一致，“指定宽度指定宽度”则可以以像素或百分比为单位设定宽度。则可以以像素或百分比为单位设定宽度。也可以通过选择也可以通过选择“文件文件”菜单下子菜单菜单下子菜单“导入导入”中的中的“EXCEL文档文档”命令，将一个现成的命令，将一个现成的EXCEL文档导入到文档导入到Dreamweaver
44、“文档文档“窗口中。窗口中。3.4 用表格布局网页用表格布局网页3.4.2 表格数据操作表格数据操作2导出表格数据导出表格数据（演示3-29） 可以将表格数据从可以将表格数据从 Dreamweaver 导出到导出到文本文件中，相邻单元格的内容由分隔符隔开，文本文件中，相邻单元格的内容由分隔符隔开，可以将逗号、冒号、分号或空格用作分隔符。可以将逗号、冒号、分号或空格用作分隔符。选择选择“文件文件”菜单下子菜单菜单下子菜单“导出导出”中的中的“表格表格”命令，命令， “定界符定界符”选择用何种分隔符分隔表格数据，选择用何种分隔符分隔表格数据，“换行符换行符”选择断行类型，若使用的是选择断行类型，若
45、使用的是Windows操作系统，则在换行符框内选择操作系统，则在换行符框内选择“Windows”，单击单击“导出导出”按钮，打开保存文件窗口保存即可。按钮，打开保存文件窗口保存即可。3.4 用表格布局网页用表格布局网页3.4.2 表格数据操作表格数据操作3表格排序表格排序 （演示3-30） 在实际使用表格时，经常需要将数据进行重在实际使用表格时，经常需要将数据进行重新排列顺序，例如按照年龄大小进行排列、按照新排列顺序，例如按照年龄大小进行排列、按照价格高低进行排列等等。在价格高低进行排列等等。在Dreamweaver中，中，可以根据表格单个列的内容进行排序。还可以根可以根据表格单个列的内容进行
46、排序。还可以根据两个列的内容执行更加复杂的表格排序。对表据两个列的内容执行更加复杂的表格排序。对表格的数据进行排序的方法如下：格的数据进行排序的方法如下：光标定位表格内，选择光标定位表格内，选择 “命令命令”菜单下的菜单下的“排排序表格序表格”命令，设置选项后，单击命令，设置选项后，单击“确定确定”按钮开按钮开始排序。始排序。3.4 用表格布局网页用表格布局网页3.4.3 初识表格布局初识表格布局布局设计是网页制作中一项很重要的工作，它涉及布局设计是网页制作中一项很重要的工作，它涉及到网页在浏览器中所显示的外观。到网页在浏览器中所显示的外观。在在Dreamweaver 中我们可以用表格、框架、
47、层来中我们可以用表格、框架、层来布局网页，布局网页，但表格是使用最广泛的一种。但表格是使用最广泛的一种。Dreamwear系系统除了提供了标准视图创建表格外，还提供了布局视图统除了提供了标准视图创建表格外，还提供了布局视图的表格，布局视图表格是的表格，布局视图表格是Dreamweaver提供的一个工提供的一个工具，用户可以通过绘制布局表格和布局单元格，从而可具，用户可以通过绘制布局表格和布局单元格，从而可以像在一张白纸上用笔来规划网页的布局，并可在布局以像在一张白纸上用笔来规划网页的布局，并可在布局单元格中插入文本和图像，通过移动布局表格和布局单单元格中插入文本和图像，通过移动布局表格和布局单
48、元格的位置来精确地定位网页上的文本和图像元格的位置来精确地定位网页上的文本和图像,目的是使目的是使人们能够更方便地进行网页布局设计。人们能够更方便地进行网页布局设计。3.4 用表格布局网页用表格布局网页3.4.4 表格整体布局的实现表格整体布局的实现 （演示3-31） 使使用用布布局局视视图图首首先先要要从从标标准准视视图图切切换换到到布布局局视视图图，方方法法是是：单单击击“查查看看”菜菜单单下下子子菜菜单单“表表格格视视图图”中中的的布布局局视视图图”命命令令，或或者者单单击击插插入入工工具具栏栏上上的的“布布局局”标标签签，然然后后选选择择“布布局局模模式式”按按钮钮，即可选择布局视图。
49、即可选择布局视图。 在在布布局局模模式式下下，表表格格中中的的单单元元格格可可以以通通过过鼠鼠标标拖拖动动任任意意改改变变大大小小和和位位置置（不不超超过过表表格格范范围围），这给页面布局带来了更大的灵活性。，这给页面布局带来了更大的灵活性。3.4 用表格布局网页用表格布局网页3.4.4 表格整体布局的实现表格整体布局的实现 1绘制布局单元格绘制布局单元格（演示3-32） 绘制一个布局单元格的步骤如下：在绘制一个布局单元格的步骤如下：在“布局布局”视图模视图模式下，单击式下，单击“绘制布局单元格绘制布局单元格”图标按钮，光标就会变成图标按钮，光标就会变成加号。把光标放在布局单元格开始的位置，单
50、击并拖动，加号。把光标放在布局单元格开始的位置，单击并拖动，就绘制了一个布局单元格。就绘制了一个布局单元格。按住按住Ctrl键键可以创建多个单元可以创建多个单元格。格。布局单元格边框默认为蓝色，它可以占据几行或几布局单元格边框默认为蓝色，它可以占据几行或几列，但他们不能重叠，创建了布局单元格，通过修改布列，但他们不能重叠，创建了布局单元格，通过修改布局局单元格的属性面板的参数，单元格的属性面板的参数，可以调整布局单元格。可以调整布局单元格。提示：布局单元格不能脱离布局表格而存在，每一个布局单元格都有一个能容纳它的布局表格。在页面中绘制布局单元格时，Dreamweaver系统会自动插入布局表格环
51、绕它，该表格将占据整个页面，作为布局单元格的容器。3.4 用表格布局网页用表格布局网页3.4.4 表格整体布局的实现表格整体布局的实现 2绘制布局表格绘制布局表格（演示3-33） 如果不希望把整个页面作为一个布局表格，可以先如果不希望把整个页面作为一个布局表格，可以先绘制布局表格：单击绘制布局表格：单击“绘制布局表格绘制布局表格”图标按钮，光标就图标按钮，光标就会变成加号，把光标放在页面上布局表格的起始位置，会变成加号，把光标放在页面上布局表格的起始位置，单击并拖动，就可绘制一个布局表格。单击并拖动，就可绘制一个布局表格。创建的第一个布创建的第一个布局表格将被放置在页面的左上角，按住局表格将被
52、放置在页面的左上角，按住Ctrl键可以创建多键可以创建多个布局表格。个布局表格。布局表的边框默认为绿色，布局表的边框默认为绿色，它们可以重叠，它们可以重叠，而且在而且在页眉区会显示出表格的大小。页眉区会显示出表格的大小。建了布局表格，选中布局表格，系统弹出布局表格建了布局表格，选中布局表格，系统弹出布局表格的属性面板，可以设置布局表格的属性参数来调整布局的属性面板，可以设置布局表格的属性参数来调整布局表格。表格。3.4 用表格布局网页用表格布局网页3.4.4 表格整体布局的实现表格整体布局的实现 （演示3-34） 3在已存在的布局表格和单元格的周围绘在已存在的布局表格和单元格的周围绘制布局表格
53、制布局表格单击单击“绘制布局表格绘制布局表格” 按钮，在存在的布局表按钮，在存在的布局表格和单元格周围单击并拖动，新的布局表格就会格和单元格周围单击并拖动，新的布局表格就会围绕已存在的布局单元格和表排列。围绕已存在的布局单元格和表排列。4.绘制一个嵌套的布局表格绘制一个嵌套的布局表格绘制嵌套布局表格的步骤如下：单击绘制嵌套布局表格的步骤如下：单击“绘制绘制布局表格布局表格”图标按钮，光标变成加号，把光标放图标按钮，光标变成加号，把光标放在已存在的布局表格的灰色区域里，单击并拖动，在已存在的布局表格的灰色区域里，单击并拖动，就可以创建嵌套的布局表格了。就可以创建嵌套的布局表格了。3.4 用表格布
54、局网页用表格布局网页3.4.4 表格整体布局的实现表格整体布局的实现5.在布局单元格中添加内容在布局单元格中添加内容 （演示3-35） 由于页面元素只能插入布局单元格中，所以必须创建布局单元由于页面元素只能插入布局单元格中，所以必须创建布局单元格，页面上的灰色区域是不能插入内容的。当插入的内容大于布局格，页面上的灰色区域是不能插入内容的。当插入的内容大于布局单元格时，布局单元格会自动增大，布局单元格周围的单元格也会单元格时，布局单元格会自动增大，布局单元格周围的单元格也会受到影响。受到影响。在在布局模式布局模式中可向布局表格中的布局单元格内添加文本、图像中可向布局表格中的布局单元格内添加文本、
55、图像和其他网页元素，与在标准模式中将内容添加到表格单元格相同。和其他网页元素，与在标准模式中将内容添加到表格单元格相同。1）在布局单元格中添加文本）在布局单元格中添加文本在布局单元格中需要添加文本处单击，可按以下两种方法进行在布局单元格中需要添加文本处单击，可按以下两种方法进行操作：在单元格里输入文本，单元格的大小会随着输入的文本而自操作：在单元格里输入文本，单元格的大小会随着输入的文本而自动增大或者用粘贴命令，复制其他文挡中的文本到单元格中。动增大或者用粘贴命令，复制其他文挡中的文本到单元格中。2）在单元格中添加图像）在单元格中添加图像在布局单元格中需要添加图像处单击，在在布局单元格中需要添
56、加图像处单击，在“常用常用”工具栏中单击工具栏中单击“插入图像插入图像”图标按钮，选择要插入的图像文件即可。图标按钮，选择要插入的图像文件即可。3.4 用表格布局网页用表格布局网页3.4.4 表格整体布局的实现表格整体布局的实现6移动和调整布局表和单元格移动和调整布局表和单元格（演示3-35） 1）自动调整布局单元格的高度）自动调整布局单元格的高度如果绘制的单元格比输入的内容大，这时就如果绘制的单元格比输入的内容大，这时就可以根据设置的需要调整单元格的高度。调整单可以根据设置的需要调整单元格的高度。调整单元格有以下两种方式：单击布局表格页眉区的下元格有以下两种方式：单击布局表格页眉区的下三角按
57、钮，在弹出的快捷菜单中选择清除单元格三角按钮，在弹出的快捷菜单中选择清除单元格高度命令；或者选择布局表格，然后单击属性面高度命令；或者选择布局表格，然后单击属性面板中的板中的“清除行高清除行高”图标按钮。图标按钮。3.4 用表格布局网页用表格布局网页3.4.4 表格整体布局的实现表格整体布局的实现6移动和调整布局表和单元格移动和调整布局表和单元格（演示3-36） 2）调整布局单元格的大小：单击布局单元格的边）调整布局单元格的大小：单击布局单元格的边框或者按住框或者按住Ctrl键单击单元格里的任何区域，在单元格的键单击单元格里的任何区域，在单元格的边框上会出现控制点，拖动控制点可调整单元格大小。
58、边框上会出现控制点，拖动控制点可调整单元格大小。3）移动单元格：单击布局单元格的边框，拖动或）移动单元格：单击布局单元格的边框，拖动或使用键盘上的方向键，将单元格移到合适的位置。按一使用键盘上的方向键，将单元格移到合适的位置。按一下方向键可以移动一象素的距离，如果同时按住下方向键可以移动一象素的距离，如果同时按住Shift键，键，则可以移动十象素。则可以移动十象素。4）调整布局表格的大小：单击布局表格边框，在）调整布局表格的大小：单击布局表格边框，在布局表格边框上就会出现控制点，拖动控制点可以调整布局表格边框上就会出现控制点，拖动控制点可以调整布局表格的大小。布局表格的大小。5）移动布局表格：
59、单击布局表格，拖动或使用方）移动布局表格：单击布局表格，拖动或使用方向键均可移动布局表格。按一下方向键可以移动一象素向键均可移动布局表格。按一下方向键可以移动一象素的距离，如果同时按住的距离，如果同时按住Shift键，则可移动键，则可移动10象素。象素。3.4 用表格布局网页用表格布局网页3.4.4 表格整体布局的实现表格整体布局的实现6移动和调整布局表和单元格移动和调整布局表和单元格（演示3-36） 2）调整布局单元格的大小：单击布局单元格的边）调整布局单元格的大小：单击布局单元格的边框或者按住框或者按住Ctrl键单击单元格里的任何区域，在单元格的键单击单元格里的任何区域，在单元格的边框上会
60、出现控制点，拖动控制点可调整单元格大小。边框上会出现控制点，拖动控制点可调整单元格大小。3）移动单元格：单击布局单元格的边框，拖动或）移动单元格：单击布局单元格的边框，拖动或使用键盘上的方向键，将单元格移到合适的位置。按一使用键盘上的方向键，将单元格移到合适的位置。按一下方向键可以移动一象素的距离，如果同时按住下方向键可以移动一象素的距离，如果同时按住Shift键，键，则可以移动十象素。则可以移动十象素。4）调整布局表格的大小：单击布局表格边框，在）调整布局表格的大小：单击布局表格边框，在布局表格边框上就会出现控制点，拖动控制点可以调整布局表格边框上就会出现控制点，拖动控制点可以调整布局表格的
61、大小。布局表格的大小。5）移动布局表格：单击布局表格，拖动或使用方）移动布局表格：单击布局表格，拖动或使用方向键均可移动布局表格。按一下方向键可以移动一象素向键均可移动布局表格。按一下方向键可以移动一象素的距离，如果同时按住的距离，如果同时按住Shift键，则可移动键，则可移动10象素。象素。3.4 用表格布局网页用表格布局网页3.4.4 表格整体布局的实现表格整体布局的实现7设置版面的宽度（演示设置版面的宽度（演示3-37） 在在“布局布局”视图里有指定宽度和自动伸展两种宽度设置。视图里有指定宽度和自动伸展两种宽度设置。1）设置自动伸展宽度）设置自动伸展宽度“布局布局”模式中的表格列可以具有
62、固定的宽度，模式中的表格列可以具有固定的宽度，或者其宽度可以自动扩展以填充浏览器窗口中尽或者其宽度可以自动扩展以填充浏览器窗口中尽量大的部分（量大的部分（自动伸展自动伸展）。）。如果您的布局中包括自动伸展如果您的布局中包括自动伸展列，则该布局始终填充访问者浏览器窗口的整个宽度。在给定的布列，则该布局始终填充访问者浏览器窗口的整个宽度。在给定的布局表格中，您只能让一个列自动伸展。自动伸展列会在列宽区域显局表格中，您只能让一个列自动伸展。自动伸展列会在列宽区域显示波浪线。示波浪线。 常见的布局是让页上包含主要内容的列自动伸展，这会将所有常见的布局是让页上包含主要内容的列自动伸展，这会将所有其他列自
63、动设置为固定宽度。当您让某个列自动伸展时，其他列自动设置为固定宽度。当您让某个列自动伸展时，Dreamweaver 会在固定宽度的列中插入间隔图像以确保这些列保会在固定宽度的列中插入间隔图像以确保这些列保持应有的宽度，除非您指定不使用间隔图像。间隔图像是透明的图持应有的宽度，除非您指定不使用间隔图像。间隔图像是透明的图像，用于控制间距，它在浏览器窗口中是不可见的。像，用于控制间距，它在浏览器窗口中是不可见的。2）设置指定宽度）设置指定宽度3.4 用表格布局网页用表格布局网页3.4.4 表格整体布局的实现表格整体布局的实现8使用间隔图（演示使用间隔图（演示3-38） 间隔图是透明图，在浏览器里是
64、不能看到，间隔图是透明图，在浏览器里是不能看到，可以用它来控制自动伸展的列的间隔。间隔图会可以用它来控制自动伸展的列的间隔。间隔图会维持在网页上设置的布局表格和单元格的宽度，维持在网页上设置的布局表格和单元格的宽度，如果在自动伸展列旁边的列不插入间隔图，且列如果在自动伸展列旁边的列不插入间隔图，且列中没有内容列就会改变大小，甚至完全不见。中没有内容列就会改变大小，甚至完全不见。1）建立间隔图：设置一列自动伸展或在页）建立间隔图：设置一列自动伸展或在页眉区单击，在快捷菜单中选择眉区单击，在快捷菜单中选择“添加间隔图像添加间隔图像”命令，弹出命令，弹出 “选择占位图像选择占位图像”对话框。对话框。
65、3.4 用表格布局网页用表格布局网页3.4.4 表格整体布局的实现表格整体布局的实现8使用间隔图（演示使用间隔图（演示3-38） 2）在一列中插入间隔图）在一列中插入间隔图在页眉区的下三角按钮上单击，选择在页眉区的下三角按钮上单击，选择“添加间隔图象添加间隔图象”命令，即将插入间隔图命令，即将插入间隔图到列中。到列中。3）在一列中移除间隔图）在一列中移除间隔图在页眉区的下三角按钮上单击，选择在页眉区的下三角按钮上单击，选择“删除间隔图象删除间隔图象”命令即可命令即可3.5 动画在网页中的应用动画在网页中的应用 3.5.1在网页中插入和播放媒体对象（演示在网页中插入和播放媒体对象（演示3-39）
66、 1在插入媒体文件时，最好选用兼容性较好的插在插入媒体文件时，最好选用兼容性较好的插件，支持性较高的媒体。影片文件如件，支持性较高的媒体。影片文件如wmv、asf、mov、avi、mpg或或mpeg等格式，声音文件如等格式，声音文件如wav、midi、mp3、rm等格式。等格式。2在网页中插入影片文件或声音文件在网页中插入影片文件或声音文件1）打开需要插入影片的网页文档，选择）打开需要插入影片的网页文档，选择“插入插入”菜菜单下子菜单单下子菜单“媒体媒体”中的中的“插件插件”命令，或在命令，或在 “常用常用”面板上，面板上，单击媒体按钮，选择单击媒体按钮，选择“插件插件”，在弹出的对话框中选择
67、要，在弹出的对话框中选择要插入的影片文件或声音文件，单击插入的影片文件或声音文件，单击“确定确定”按钮返回文档按钮返回文档编辑状态。插入后的插件并不会在文档窗口中显示内容，编辑状态。插入后的插件并不会在文档窗口中显示内容，而是用而是用图标图标来显示。来显示。2）选中要插入的影片文件或声音文件，在影片）选中要插入的影片文件或声音文件，在影片“属属性性”面板中的面板中的“高高”和和“宽宽”文本框输入数值或直接在文档中文本框输入数值或直接在文档中调整插件大小。调整插件大小。3）保存文件，按下）保存文件，按下F12功能键，打开浏览器预览。功能键，打开浏览器预览。 3.5 动画在网页中的应用动画在网页中
68、的应用 3.5.2 在网页中应用在网页中应用Flash动画动画Flash是美国是美国Macromedia公司出口的公司出口的制作交互动画的工具软件。通过制作交互动画的工具软件。通过Dreamweaver可以在网页中添加的可以在网页中添加的Flash元素包括元素包括Flash动画、动画、Flash按钮、按钮、Flash文本。通过文本。通过Flash文本，可以使用一些特殊文本，可以使用一些特殊的字体、自定义颜色，还可以设定链接及的字体、自定义颜色，还可以设定链接及变化。变化。Flash按钮可以为网页增加特殊效果。按钮可以为网页增加特殊效果。3.5 动画在网页中的应用动画在网页中的应用 3.5.2
69、在网页中应用在网页中应用Flash动画动画1插入插入Flash影片影片 （演示（演示3-40） 插入插入Flash影片之前，首先应在影片之前，首先应在Flash制作软制作软件中完成影片的制作，最好将其制作好后保存在件中完成影片的制作，最好将其制作好后保存在站点相应文件夹中，常用的站点相应文件夹中，常用的Flash影片文件类型影片文件类型为为.swf格式，可以在浏览器和格式，可以在浏览器和Dreamweaver中中直接播放。直接播放。1）打开需要插入）打开需要插入Flash影片的网页文档，选影片的网页文档，选择择“插入插入”菜单下子菜单菜单下子菜单“媒体媒体”中的中的“Flash”命令，命令，或
70、在或在 “常用常用”面板上，单击媒体按钮，选择面板上，单击媒体按钮，选择Flash，打开，打开“选择文件选择文件”对话框。对话框。3.5 动画在网页中的应用动画在网页中的应用 3.5.2 在网页中应用在网页中应用Flash动画动画1插入插入Flash影片影片 （演示（演示3-41） 2）选选择择要要插插入入的的Flash文文件件，单单击击“确确定定”按按钮钮返返回回网网页页编编辑辑窗窗口口，Flash影影片片即被插入到当前文档。即被插入到当前文档。3）保存文件，按）保存文件，按F12功能键预览。功能键预览。导入的导入的Flash影片在文档窗口中显示为影片在文档窗口中显示为图标（大小与图标（大小
71、与Flash动画原尺寸相同），在动画原尺寸相同），在属性面板中可以设定导入属性面板中可以设定导入Flash影片的属性。影片的属性。3.5 动画在网页中的应用动画在网页中的应用 3.5.2 在网页中应用在网页中应用Flash动画动画2插入插入Flash按钮（演示按钮（演示3-42） 1）打开需要插入）打开需要插入Flash按钮的网页文档，选按钮的网页文档，选择择“插入插入”菜单下子菜单菜单下子菜单“媒体媒体”中的中的“Flash按钮按钮”，或在，或在 “常用常用”面板上，单击媒体按钮，选择面板上，单击媒体按钮，选择Flash按钮，打开按钮，打开“插入插入Flash按钮按钮”对话框设定对话框设定F
72、lash按钮。按钮。2）设置完毕，单击）设置完毕，单击“应用应用”按钮，插入点显按钮，插入点显示该按钮，如果对插入的按钮不满意，还可在示该按钮，如果对插入的按钮不满意，还可在“插入插入Flash按钮按钮”对话框中进一步编辑。单击对话框中进一步编辑。单击“确确定定”按钮完成按钮的编辑操作。按钮完成按钮的编辑操作。3.5 动画在网页中的应用动画在网页中的应用 3.5.2 在网页中应用在网页中应用Flash动画动画3插入插入Flash文本（演示文本（演示3-43） Flash文本是文本是Dreamweaver集成的文本动集成的文本动画。插入画。插入Flash文本与插入文本与插入Flash按钮的方法类
73、似。按钮的方法类似。打开需要插入打开需要插入Flash文本的网页文档，选择文本的网页文档，选择“插入插入”菜单下子菜单菜单下子菜单“媒体媒体”中的中的“Flash文本文本”，或，或在在 “常用常用”面板上，单击媒体按钮，选择面板上，单击媒体按钮，选择Flash文文本，打开本，打开“插入插入Flash文本文本”对话框设定对话框设定Flash文本。文本。插入插入 Flash 文本对话框中各选项含义文本对话框中各选项含义 上机操作指导n对上次课的个人网站主页index.htm使用布局表格重新进行布局。做到熟练灵活运用布局表格和布局单元格。n在原有内容的基础上插入表格“课程表”。并使用“格式化表格”功能对表格进行格式化。n在你的主页上方插入一个flash横幅，内容不限。n在你的主页显要位置插入一段视频，突出你主页的主题。n使用flash按钮做出一排导航栏，并在合适位置插入一个flash文本。
