多媒体网页设计精选PPT.ppt

《多媒体网页设计精选PPT.ppt》由会员分享，可在线阅读，更多相关《多媒体网页设计精选PPT.ppt（44页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。

1、多媒体网页设计多媒体网页设计第1页，此课件共44页哦本章主要内容本章主要内容文本的添加文本的添加图像的插入图像的插入Flash动画的插入动画的插入插入导航条插入导航条音频与视频音频与视频 创建超链接创建超链接表单表单第2页，此课件共44页哦3.1文本文本 3.1.1 插入文本插入文本 3.1.2 设置文字属性设置文字属性3.1.3 设置段落属性设置段落属性 第3页，此课件共44页哦 3.1.1插入文本插入文本 将文本添加到文档，可在将文本添加到文档，可在“文档文档”窗口的窗口的“设设计计”视图下，执行如下几种操作：视图下，执行如下几种操作：定位插入点，直接在定位插入点，直接在“文档文档”窗口中

2、键入文本。窗口中键入文本。从其他应用程序中复制文本，定位插入点，执从其他应用程序中复制文本，定位插入点，执行粘贴操作。行粘贴操作。导入表格式数据。先将文件保存为分隔文本文导入表格式数据。先将文件保存为分隔文本文件；执行件；执行【文件文件】【导入导入】【导入表格式导入表格式数据数据】，或，或【插入插入】【表格对象表格对象】【表格表格式数据式数据】；导入导入WordWord文档（文件小于文档（文件小于300K300K）或）或EXCELEXCEL文档。文档。定位插入点，执行定位插入点，执行【文件文件】【导入导入】【WordWord文档文档】/【EXCELEXCEL文档文档】。第4页，此课件共44页哦

3、 3.1.1插入文本插入文本 1.在字符之间添加空格在字符之间添加空格l选择选择【插入插入】【HTML】【特殊字符特殊字符】【不换不换行空格行空格】。l按按 Ctrl+Shift+空格键。空格键。l在在“插入插入”面板中的面板中的“文本文本”选项卡中，单击选项卡中，单击“字符字符”按钮并选择按钮并选择“不换行空格不换行空格”图标。图标。2.换行换行l按按Shift+Enter组合键。组合键。l在在“插入插入”面板中的面板中的“文本文本”选项卡中单击选项卡中单击“换行换行符符”图标。图标。l执行执行【插入记录插入记录】【HTML】【特殊字符特殊字符】【换行符换行符】。第5页，此课件共44页哦3.

4、插入特殊字符插入特殊字符执行执行【插入插入】【HTML】【特殊字符特殊字符】，从子菜，从子菜单中选择字符名称。单中选择字符名称。在在“插入插入”面板中的面板中的“文本文本”选项卡中，单击选项卡中，单击“字字符符”按钮并从子菜单中选择字符。按钮并从子菜单中选择字符。还有很多其它特殊字符可供使用；若要选择其中的还有很多其它特殊字符可供使用；若要选择其中的某个字符，请单击某个字符，请单击【插入记录插入记录】【HTML】【特特殊字符殊字符】【其他其他】或者单击或者单击“插入插入”面板的面板的“文本文本”选项卡中的选项卡中的“字字符符”按钮，然后选择按钮，然后选择“其他字符其他字符”选项，从选项，从“插

5、入插入其它字符其它字符”对话框中选择一个字符。对话框中选择一个字符。3.1.1插入文本插入文本第6页，此课件共44页哦3.1.1插入文本插入文本4.创建项目列表和编号列表创建项目列表和编号列表 使用新文本创建列表，将插入点放在要添加列使用新文本创建列表，将插入点放在要添加列表的位置，然后执行下列操作之一：表的位置，然后执行下列操作之一：单击单击“属性属性”面板中的面板中的“项目列表项目列表”按钮或按钮或“编号列表编号列表”按钮。按钮。单击单击【文本文本】【列表列表】，然后根据需要选择，然后根据需要选择“项目列表项目列表”或或“编号列表编号列表”。注意：创建一个列表项目，新样式将自动应用注意：创

6、建一个列表项目，新样式将自动应用于添加到列表的其它项目。按于添加到列表的其它项目。按Enter键，即可创键，即可创建其他列表项目。按两次建其他列表项目。按两次Enter键可结束列表项键可结束列表项目的创建。目的创建。第7页，此课件共44页哦3.1.1插入文本插入文本【案例案例3.1】创建一张网页并输入文本创建一张网页并输入文本 创建站点创建站点web1，保存在，保存在D盘，并在其中创建三盘，并在其中创建三个子文件夹个子文件夹,分别命名为分别命名为flash、pic、sound。在。在站点里新建一网页文件，命名为站点里新建一网页文件，命名为“wenben.html”。在在“设计设计”视图中，定位

7、插入点，输入以下内视图中，定位插入点，输入以下内容，如图容，如图7.1所示，注意，每行输入完按所示，注意，每行输入完按Enter键，键，第二行每项间添加第二行每项间添加8个不换行空格。个不换行空格。第8页，此课件共44页哦 单击单击【文件文件】【导入导入】【Word文档文档】，在，在打开的对话框中选择打开的对话框中选择“CH03/other/摄影文本摄影文本1.doc”,将其导入。将其导入。定位插入点在定位插入点在“器材讨论器材讨论”类的类的“单反镜头单反镜头”后，按后，按Enter键，单击键，单击【文件文件】【导入导入】【Excel文档文档】，在打开的对话框中选择，在打开的对话框中选择“CH

8、03/other/器材排行器材排行.xls”,将其导入将其导入。在导入的在导入的Word内容的每行文字的后面分别按内容的每行文字的后面分别按Enter键，使自成段落，否则会对导入的全部内键，使自成段落，否则会对导入的全部内容视为一个段落。（如果段落内有多余空行请容视为一个段落。（如果段落内有多余空行请删除。）删除。）3.1.1插入文本插入文本第9页，此课件共44页哦 3.1.1插入文本插入文本 选中选中“精彩视频精彩视频”后的三项内容，在后的三项内容，在“属性属性”面板中单击面板中单击“编号列表编号列表”按钮，添加编号；按钮，添加编号；再依次选中再依次选中“图片精华图片精华”和其他项目后内容，

9、和其他项目后内容，在在“属性属性”面板中单击面板中单击“项目列表项目列表”按钮，添按钮，添加项目符号，加项目符号，打开打开“CH03/other/摄影文本摄影文本2.doc”，复制标，复制标题和第一段；回到题和第一段；回到“wenben.html”网页的网页的“设计设计”视图，定位插入点在最后一段后，按视图，定位插入点在最后一段后，按Enter键，另起一新段落，右键单击，选择键，另起一新段落，右键单击，选择“粘贴粘贴”。保存并浏览该网页。保存并浏览该网页。第10页，此课件共44页哦3.1.2 设置文字属性设置文字属性 对文字属性的更改，可以用对文字属性的更改，可以用“文本文本”菜单进行菜单进行

10、设置；也可以打开设置；也可以打开“属性属性”面板，在面板，在“属性属性”面面板中设置。板中设置。第11页，此课件共44页哦3.1.2 设置文字属性设置文字属性1.更改字体，更改字体，选取要更改的文字，单击选取要更改的文字，单击【文本文本】【字体字体】，在弹，在弹出的字体列表中选择字体名称；出的字体列表中选择字体名称；在在“属性属性”面板中，单击面板中，单击“字体字体”下拉列表，在弹出下拉列表，在弹出的字体中选择所需字体的字体中选择所需字体；第12页，此课件共44页哦 3.1.2 设置文字属性设置文字属性如如果果所所需需要要的的字字体体不不在在列列表表中中，可可以以在在上上面面两两图图所所示示的

11、的字字体体列列表表的的下下方方单单击击“编编辑辑字字体体列列表表”，打打开开“编编辑辑字字体体列列表表”对对话话框框，在在“可可用用字字体体”列列表表框框中中选选择择一一种种字字体体，单单击击左左向向双双箭箭头头，将将其其添添加加到到选选择择的的字字体体，新新字字体体将将会会显显示示在在字字体体列列表表中中；单单击击左左上上方方的的按按钮钮，可可再再次次添添加加新新的的字字体体。如如果果要要删删除除字字体体列列表表中中的的某某字字体体，可可以以选选中中，单单击击按按钮钮，将其删除。将其删除。第13页，此课件共44页哦3.1.2 设置文字属性设置文字属性2.更改字号更改字号 选择文字，单击选择文

12、字，单击“属性属性”面板中面板中“大小大小”列表框，在弹出的列列表框，在弹出的列表中设置，如果希望设置相对默认字符大小的增减量，可以选择表中设置，如果希望设置相对默认字符大小的增减量，可以选择“极小极小”、“特大特大”等选项；等选项；【文本文本】【大小大小】在弹出的列表中选择字号，选择在弹出的列表中选择字号，选择“默认默认”，将使用默认字号。，将使用默认字号。如果要设置相对默认字符大小的增减量，可单击如果要设置相对默认字符大小的增减量，可单击【文本文本】【改变大小改变大小】。3.更改字体颜色更改字体颜色在在“属性属性”面板中，单击面板中，单击“文本颜色文本颜色”按钮，在弹出的颜色板按钮，在弹出

13、的颜色板中选取所需颜色；中选取所需颜色；在在“文本颜色文本颜色”按钮右边的文本框中直接输入颜色的十六进制值，按钮右边的文本框中直接输入颜色的十六进制值，如如#EBE9ED;单击单击【文本文本】【颜色颜色】，在打开的，在打开的“颜色颜色”对话框中选择对话框中选择颜色。颜色。第14页，此课件共44页哦3.1.3 设置段落属性设置段落属性 对对段段落落的的设设置置主主要要包包括括对对文文本本块块（一一段段或或多多个个段段落落）的的对对齐齐、缩缩进进、行行距距、段段间间距距、段段落落格式等的设置。格式等的设置。1.对齐文本对齐文本 将插入点放在段落中，或者选择段落中的一些将插入点放在段落中，或者选择段

14、落中的一些文本。如果设置多个段落，则选择多个段落。文本。如果设置多个段落，则选择多个段落。对齐文本可执行如下操作之一：对齐文本可执行如下操作之一：【文本文本】【对齐对齐】的对齐命令的对齐命令“属性属性”面板中的对齐按钮（面板中的对齐按钮（“左对齐左对齐”、“右对齐右对齐”，“居中对齐居中对齐”，或，或“两端对齐两端对齐”）第15页，此课件共44页哦3.1.3 设置段落属性设置段落属性2.缩进文本缩进文本实现段落缩进的方法如下：实现段落缩进的方法如下：【文本文本】【缩进缩进】，文本左右距离文档窗口各增加一段距离；，文本左右距离文档窗口各增加一段距离；【文本文本】【凸出凸出】，文本左右距离文档窗口

15、各减少一段距，文本左右距离文档窗口各减少一段距离。离。单击单击“属性属性”面板上面板上“文本缩进文本缩进”按钮和按钮和“文本凸出文本凸出”按钮，按钮，实现文本的缩进和凸出。实现文本的缩进和凸出。利用快捷键利用快捷键Ctrl+Alt+Ctrl+Alt+实现缩进，利用快捷键实现缩进，利用快捷键Ctrl+Alt+Ctrl+Alt+实现凸实现凸出。出。注意：段落首行缩进，无法使用空格键输入，可以使用前面讲过的插入注意：段落首行缩进，无法使用空格键输入，可以使用前面讲过的插入不换行空格，也可以切换到不换行空格，也可以切换到“代码代码”视图，在段落文字的前面输入视图，在段落文字的前面输入4 4个个 “&n

16、bsp; ”代码，能空出两个汉字的位置。代码，能空出两个汉字的位置。第16页，此课件共44页哦3.1.3 设置段落属性设置段落属性3.设置段落格式设置段落格式 产生行距：输入文本过程中，按产生行距：输入文本过程中，按Enter键表示结键表示结束一个段落的输入，并进入下个段落，两个段落束一个段落的输入，并进入下个段落，两个段落间会产生一个较大的行距。若要使行距或段间距间会产生一个较大的行距。若要使行距或段间距增大，可单击增大，可单击“插入插入”面板的面板的“文本文本”选项卡中选项卡中的的“字符字符”，在弹出的列表中选择，在弹出的列表中选择 按钮。按钮。设置属性：使用设置属性：使用“属性

17、属性”面板中的面板中的“格式格式”弹弹出菜单如图出菜单如图7.15或单击或单击【文本文本】【段落格式段落格式】在弹出的子菜单中，可以设置段落格式。在弹出的子菜单中，可以设置段落格式。第17页，此课件共44页哦3.1.3 设置段落属性设置段落属性4.添加水平线和时间添加水平线和时间 添加水平：添加水平：【插入记录插入记录】【HTML】【水平水平线线】，即可插入一条水平线。在水平线上单击选，即可插入一条水平线。在水平线上单击选择水平线，在择水平线，在“属性属性”面板上修改水平线，制定面板上修改水平线，制定水平线的宽度和高度，对齐方式，以及是否带阴水平线的宽度和高度，对齐方式，以及是否带阴影。影。添

18、加时间添加时间：定位插入点，单击定位插入点，单击【插入记录插入记录】【日期日期】或者在或者在“插入插入”面板的面板的“常用常用”选项卡选项卡里单击按钮里单击按钮 ，即可打开，即可打开“日期日期”对话框，进行对话框，进行相关设置。相关设置。第18页，此课件共44页哦3.1.3 设置段落属性设置段落属性【案例案例3.2】对案例对案例3.1所创建的网页，设置文本属性。所创建的网页，设置文本属性。打开案例打开案例3.1所建立网页所建立网页“CH03/wenben.html”。将将“视点摄影网视点摄影网”，设置为，设置为“居中居中”，“标题标题1”，设置好后按，设置好后按Enter键。键。在标题下方在标

19、题下方插入两条水平线，第二条水平线，插入两条水平线，第二条水平线，“高度高度“为为7，有阴影。，有阴影。设置设置“首页首页”段落文字，居中，大小为段落文字，居中，大小为24，文字，文字为斜体；段落内各项文字，设置不同颜色。设置好为斜体；段落内各项文字，设置不同颜色。设置好最后一个后按最后一个后按Enter键，再添加一个水平线，高度仍键，再添加一个水平线，高度仍为为7，将，将“阴影阴影”框内对号去掉，无阴影。框内对号去掉，无阴影。第19页，此课件共44页哦3.1.3 设置段落属性设置段落属性【案例案例3.2】对案例对案例3.1所创建的网页，设置文本属性。所创建的网页，设置文本属性。第20页，此课

20、件共44页哦3.1.3 设置段落属性设置段落属性分分别别选选择择“精精彩彩视视频频”、“图图片片精精华华”等等标标题题，在在“属属性性”面面板板的的“颜颜色色”框框内内输输入入“#000099”，并并设设为为斜斜体体。在在每每个个大大项项下下都都添添加加水水平平线线，为为默默认认效效果。果。第21页，此课件共44页哦3.1.3 设置段落属性设置段落属性在在最最后后一一个个段段落落（“经经过过30年年的的艺艺术术开开放放”），多多次次单单击击“属属性性”面面板板上上的的“文文本本缩缩进进”按按钮钮，使使文文本本缩缩进进。将将插插入入点点定定位位在在网网页页最最后后，居居中中，单单击击“插插入入”

21、栏栏上上的的“常常用用”选选项项卡卡，选选择择“日日期期”图图标标，在在弹弹出出的的“插插入入日日期期”对对话话框框内内选选择择第第二二种种日日期期格格式式，并并勾勾选选“储储存存时时自自动动更更新新”，在在网网页页底底部部添加日期。添加日期。将设置好的网页将设置好的网页保存并浏览保存并浏览 第22页，此课件共44页哦3.2 图像图像3.2.2 编辑图像编辑图像选中已经插入的图像，可以对图像进行移动、选中已经插入的图像，可以对图像进行移动、复制和删除操作，也可拖动周围锚点调整图像复制和删除操作，也可拖动周围锚点调整图像大小。大小。对图像还可以在图像的对图像还可以在图像的“属性属性”面板中，对图

22、面板中，对图像进行编辑像进行编辑 第23页，此课件共44页哦3.2 图像图像图像命名：图像命名：图像的宽度和高度。以像素为单位。图像的宽度和高度。以像素为单位。图像的路径。图像的路径。“源文件源文件”文本框给出了图像的路文本框给出了图像的路径。径。图像链接。图像链接。“链接链接”对话框给出了被链接文件的对话框给出了被链接文件的路径。图像可以链接到一个网页，也可以链接到路径。图像可以链接到一个网页，也可以链接到一个具体的文件。一个具体的文件。设置图像链接后，只要单击该图像，即可打开相设置图像链接后，只要单击该图像，即可打开相关的网页或文件。关的网页或文件。建立超级链接可以直接在建立超级链接可以直

23、接在“链接链接”文本框内输入文本框内输入链接地址，也可以拖曳链接地址，也可以拖曳“指向文件指向文件”图标到图标到“站站点点”窗口要链接的文件上；或者单击该文本框右窗口要链接的文件上；或者单击该文本框右边边“文件夹文件夹”按钮，去选定要链接的文件。按钮，去选定要链接的文件。第24页，此课件共44页哦3.2 图像图像给图像加文字提示说明。在给图像加文字提示说明。在“替换替换”文本框中输文本框中输入文字，在浏览器中用鼠标指向该图像，会显示入文字，在浏览器中用鼠标指向该图像，会显示相应的文字。相应的文字。对齐图像。选中图像，分别单击三个按钮，使图对齐图像。选中图像，分别单击三个按钮，使图像左对齐、居中

24、或右对齐。像左对齐、居中或右对齐。图像边距。图像边距。“垂直边距垂直边距”和和“水平边距水平边距”文本框文本框可以沿图像的边添加边距，以像素表示。可以沿图像的边添加边距，以像素表示。“垂直垂直边距边距”沿图像的顶部和底部添加边距。沿图像的顶部和底部添加边距。“水平边水平边距距”沿图像的左侧和右侧添加边距。沿图像的左侧和右侧添加边距。第25页，此课件共44页哦3.2 图像图像图图像像边边框框。“边边框框”文文本本框框内内可可输输入入值值给给图图像像加加边框。默认无边框。边框。默认无边框。“低解析度源低解析度源”指定加载主图像之前应该加载的指定加载主图像之前应该加载的图像。许多设计人员使用主图像的

25、黑白版本，因图像。许多设计人员使用主图像的黑白版本，因为它可以迅速加载并使访问者对他们等待看到的为它可以迅速加载并使访问者对他们等待看到的内容有所了解。内容有所了解。第26页，此课件共44页哦3.2 图像图像图像和文字相对位置。图像和文字相对位置。“对齐对齐”下拉列表框中的选项可下拉列表框中的选项可以设置图文混排，可以将图像与同一行中的文本、另一以设置图文混排，可以将图像与同一行中的文本、另一个图像、插件或其它元素对齐。其各项含义如表所示个图像、插件或其它元素对齐。其各项含义如表所示.项目作用默认值使用浏览器默认的对齐方式，不同的浏览器会有不同基线图像的底部与文字的基线水平对齐顶端图像的顶端与

26、当前行中最高对象的顶端对齐居中图像的中线与文字的基线水平对齐底部图像的底部与文字的中线水平对齐文本上方图像的顶端与文本行中最高字符的顶端对齐绝对中间图像的中线与文字的中线水平对齐绝对底部图像的底部与文字的下沿水平对齐。左对齐图像在文字的左侧，文字从右侧环绕图像右对齐图像在文字的右侧，文字从左侧环绕图像第27页，此课件共44页哦3.2 图像图像 在在“编辑编辑”后面有一组按钮用来实现对图像进行编辑，后面有一组按钮用来实现对图像进行编辑，各按钮功能如下：各按钮功能如下：“编辑编辑”按钮启动在按钮启动在“外部编辑器外部编辑器”首选参数中首选参数中指定的图像编辑器并打开选定的图像。指定的图像编辑器并打

27、开选定的图像。“优化优化”按钮打开按钮打开“优化优化”对话框，对图像进行对话框，对图像进行优化。优化。“裁剪裁剪”按钮裁切图像的大小，从所选图像中删除按钮裁切图像的大小，从所选图像中删除不需要的区域。不需要的区域。第28页，此课件共44页哦3.2 图像图像“重新取样重新取样”按钮对已调整大小的图像进行重新取样，按钮对已调整大小的图像进行重新取样，提高图片在新的大小和形状下的品质，以适应其新尺提高图片在新的大小和形状下的品质，以适应其新尺寸。对位图对象进行重新取样时，会在图像中添加或寸。对位图对象进行重新取样时，会在图像中添加或删除像素，以使其变大或变小删除像素，以使其变大或变小“亮度和对比度亮

28、度和对比度”调整图像的亮度和对比度设置调整图像的亮度和对比度设置,修修改图像中像素的对比度或亮度。这将影响图像的高亮改图像中像素的对比度或亮度。这将影响图像的高亮显示、阴影和中间色调。修正过暗或过亮的图像时通显示、阴影和中间色调。修正过暗或过亮的图像时通常使用常使用“亮度亮度/对比度对比度”。“锐化锐化”按钮调整图像的锐度。锐化将增加对象边缘按钮调整图像的锐度。锐化将增加对象边缘的像素的对比度，从而增加图像清晰度或锐度。的像素的对比度，从而增加图像清晰度或锐度。第29页，此课件共44页哦3.2 图像图像案例案例【3.3】在网页中添加图像并设置属性在网页中添加图像并设置属性 打开打开web1站点

29、，新建一网页，命名为站点，新建一网页，命名为tuxiang.html。“文档文档”窗口中右键单击，打开窗口中右键单击，打开“页面属性页面属性”对话对话框选择框选择“外观外观”，设置文本颜色为白色，背景颜色为，设置文本颜色为白色，背景颜色为黑色；选黑色；选“标题标题/编码编码”，设置标题为，设置标题为“视点摄影网视点摄影网”。单击单击【插入记录插入记录】【图像图像】，在打开的文本框中，在打开的文本框中选择，在弹出的提示复制对话框里单击选择，在弹出的提示复制对话框里单击“是是”，将图，将图片复制到片复制到web1站点的站点的pic文件夹里，在文件夹里，在“图像标签辅助图像标签辅助功能属性功能属性”

30、对话框单击确定，将图片添加到网页中。对话框单击确定，将图片添加到网页中。利用相同方法将利用相同方法将“CH07/素材素材/e0702.jpg”插入，选中该插入，选中该图片，在图片，在“属性属性”面板中把高度设置为面板中把高度设置为60；在下行输；在下行输入文字，并设置大小为入文字，并设置大小为36和居中。和居中。第30页，此课件共44页哦3.2 图像图像案例案例【3.3】在网页中添加图像并设置属性在网页中添加图像并设置属性 打开打开“CH03/other/摄影文本摄影文本3.doc”，将文本复制到，将文本复制到网页中。打开图片网页中。打开图片“CH03/other/e0703.jpg”和和“C

31、H07/素材素材/e0704.jpg”，在网页中选择图片，在网页中选择图片e0703，在，在“属性属性”面板中设置宽度为面板中设置宽度为219，高度为，高度为130；单击；单击“对齐对齐”下拉列表框选择下拉列表框选择“左对齐左对齐”，“水平间距水平间距”文文本框中输入本框中输入20；选择图片；选择图片e0704，宽度为，宽度为500，高度为，高度为239；单击；单击“对齐对齐”下拉列表框选择下拉列表框选择“右对齐右对齐”，“水平间距水平间距”文本框中输入文本框中输入20。选择图片选择图片e0702，按住，按住Ctrl键拖动，复制到下方，设键拖动，复制到下方，设置高度为置高度为5。分别选择分别选

32、择e0703和和e0704，在，在“替换文本替换文本”中都输入中都输入“摄影大师摄影大师”。第31页，此课件共44页哦3.2 图像图像案例案例【3.3】在网页中添加图像并设置属性在网页中添加图像并设置属性 打开打开“CH03/0ther/摄影文本摄影文本3.doc”，将文本复制到，将文本复制到网页中。打开图片网页中。打开图片“CH03/0ther/e0703.jpg”和和“CH07/素材素材/e0704.jpg”，在网页中选择图片，在网页中选择图片e0703，在，在“属性属性”面板中设置宽度为面板中设置宽度为219，高度为，高度为130；单击；单击“对齐对齐”下拉列表框选择下拉列表框选择“左对

33、齐左对齐”，“水平间距水平间距”文文本框中输入本框中输入20；选择图片；选择图片e0704，宽度为，宽度为500，高度为，高度为239；单击；单击“对齐对齐”下拉列表框选择下拉列表框选择“右对齐右对齐”，“水平间距水平间距”文本框中输入文本框中输入20。选择图片选择图片e0702，按住，按住Ctrl键拖动，复制到下方，设键拖动，复制到下方，设置高度为置高度为5。分别选择分别选择e0703和和e0704，在，在“替换文本替换文本”中都输入中都输入“摄影大师摄影大师”。第32页，此课件共44页哦3.2 图像图像3.2.3 插入鼠标经过图像插入鼠标经过图像 鼠鼠标标经经过过图图像像是是一一种种在在浏

34、浏览览器器中中查查看看并并使使用用鼠鼠标标指指针针移移过过它它时时发发生生变变化化的的图图像像。必必须须用用以以下下两两个个图图像像来来创创建建鼠鼠标标经经过过图图像像：主主图图像像（首首次次加加载载页页面面时时显显示示的的图图像）和次图像（鼠标指针移过主图像时显示的图像）。像）和次图像（鼠标指针移过主图像时显示的图像）。鼠鼠标标经经过过图图像像中中的的这这两两个个图图像像应应大大小小相相等等；如如果果这这两两个个图图像像大大小小不不同同，Dreamweaver 将将调调整整第第二二个个图图像像的的大小以与第一个图像的属性匹配。大小以与第一个图像的属性匹配。单单击击【插插入入记记录录】【图图像

35、像对对象象】【鼠鼠标标经经过过图图像像】或或者者在在“插插入入”栏栏的的“常常用用”选选项项卡卡中中单单击击“图图像像”按按钮钮，然然后后选选择择“鼠鼠标标经经过过图图像像”图图标标，来来实实现现插插入鼠标经过图像。入鼠标经过图像。第33页，此课件共44页哦3.2 图像图像【案例案例3.4】插入鼠标经过图像。插入鼠标经过图像。打开上例中网页打开上例中网页tuxiang.html，在网页最后单击鼠标，选择插入点，单击，在网页最后单击鼠标，选择插入点，单击【插插入记录入记录】【图像对象图像对象】【鼠标经过图像鼠标经过图像】，在打开如图所示的对话框。，在打开如图所示的对话框。单击单击“原始图像原始图

36、像”和和“鼠标经过图像鼠标经过图像”后的后的“浏览浏览”按钮，选择两张按钮，选择两张图片图片“CH07/素材素材/e0705.jpg”和和“CH07/素材素材/e0706.jpg”插入，并复制到本站插入，并复制到本站点点pic文件夹下。文件夹下。保存修改并浏览网页。保存修改并浏览网页。第34页，此课件共44页哦3.3 插入插入Flash【案例案例3.5】为网页添加为网页添加Flash。在上例中新建一网页，命名为在上例中新建一网页，命名为flash.html。插入图片插入图片“CH07/素材素材/e0707.jpg”单击单击【插入记录插入记录】【媒体媒体】【Flash】；或者选择；或者选择“插入

37、插入”栏的栏的“媒体媒体”选项卡，单击选项卡，单击“Flash”图片按钮，图片按钮，如图如图7.30所示。所示。在弹出对话框中选择文件在弹出对话框中选择文件“CH07/素材素材/视点摄影视点摄影.swf”双双击，在弹出的提示复制对话框中单击击，在弹出的提示复制对话框中单击“是是”，将文件复，将文件复制到站点制到站点flash目录里，此时弹出的对话框，可不输入直目录里，此时弹出的对话框，可不输入直接单击接单击“确定确定”或或“取消取消”，将，将Flash添加到了网页中。添加到了网页中。选中插入的选中插入的Flash，在，在“属性属性”面板如图面板如图7.33所示，为其所示，为其设置属性。单击设置

38、属性。单击“播放播放”可在设计状态下观看可在设计状态下观看Flash内容。内容。第35页，此课件共44页哦3.3 插入插入Flash 为了美化网页，增加动态效果，可插入为了美化网页，增加动态效果，可插入Fash按钮，使按钮，使按钮具有动态效果，插入按钮具有动态效果，插入Fash按钮的操作步骤如下：按钮的操作步骤如下：单击单击【插入记录插入记录】【媒体媒体】【Flash按钮按钮】；或者；或者选择选择“插入插入”栏的栏的“媒体媒体”选项卡，单击选项卡，单击“Flash按钮按钮”。在弹出的对话框中进行设置，选择合适的样式，输入在弹出的对话框中进行设置，选择合适的样式，输入按钮上要显示的文本并设置字体

39、，也可以设置链接等。按钮上要显示的文本并设置字体，也可以设置链接等。如图所示。如图所示。第36页，此课件共44页哦3.3 插入插入Flash 单击确定，将单击确定，将Flash按钮插入到文档中。为在案例按钮插入到文档中。为在案例3.21中所创建的网页中所创建的网页“tuxiang.html”中删除图片中删除图片e7202.jpg，添加，添加Flash按钮后的效果，其中样式选择按钮后的效果，其中样式选择“Translucent Tab”，字体为，字体为“宋体宋体”，大小为，大小为20，背，背景色为黑色。景色为黑色。如果想修改如果想修改Fash按钮，可双击按钮，可双击Fash按钮，会再次打开按钮，

40、会再次打开如图所示对话框供设置。如图所示对话框供设置。注意：插入注意：插入Flash按钮时，文档的路径和文件名中不能有按钮时，文档的路径和文件名中不能有中文，否则会提示出错。中文，否则会提示出错。第37页，此课件共44页哦3.3 插入插入Flash3.3 Flash文本文本【案例案例3.5】修改修改“tuxiang.html”，添加，添加Flash文本。文本。打开打开“CH07/素材素材/tuxiang.html”，删除文字，删除文字“国际顶尖商国际顶尖商业摄影大师代表作图赏业摄影大师代表作图赏”。单击单击【插入记录插入记录】【媒体媒体】【Flash文本文本】；或者选；或者选择择“插入插入”栏

41、的栏的“媒体媒体”选项卡，单击选项卡，单击“Flash文本文本”，在打开的如图所示的文本框中进行设置，在打开的如图所示的文本框中进行设置 第38页，此课件共44页哦3.3 插入插入Flash 单击确定，效果如图所示，当鼠标移动到文本上，文本单击确定，效果如图所示，当鼠标移动到文本上，文本会变色。会变色。如果要修改插入的如果要修改插入的Flash文本，可以双击再次打开文本，可以双击再次打开“插入插入Flash文本文本”对话框设置。对话框设置。第39页，此课件共44页哦3.4 插入导航条插入导航条执行下列操作可以创建一个导航条：执行下列操作可以创建一个导航条：单击单击【插入记录插入记录】【图形对象

42、图形对象】【导航条导航条】。选择选择“插入插入”栏的栏的“图像图像”选项卡，单击选项卡，单击“导航条导航条”按钮。按钮。【案例案例7.6】为网页添加导航条。为网页添加导航条。“CH07/素材素材/flash.html”，将插入点定位在网页头图像下方。，将插入点定位在网页头图像下方。单击单击【插入记录插入记录】【图形对象图形对象】【导航条导航条】，打开，打开如图所示的对话框。如图所示的对话框。第40页，此课件共44页哦3.4 插入导航条插入导航条“项目名称项目名称”文本框为导航条内的每一组命名，命名符文本框为导航条内的每一组命名，命名符合要规则。在这里输入合要规则。在这里输入“d1”。“状态图像

43、状态图像”为网页显为网页显示时最初的导航按钮状态，单击其后示时最初的导航按钮状态，单击其后“浏览浏览”按钮，选按钮，选择文件择文件“CH07/素材素材/首页首页1.jpg”，将其复制到站点根目录，将其复制到站点根目录下，并确定插入到导航条。单击下，并确定插入到导航条。单击“按下图像按下图像”后的后的“浏浏览览”按钮，用同样的方法插入按钮，用同样的方法插入“CH07/素材素材/首页首页2.jpg”.单击最上面的图标，对话框下面的内容清空，在单击最上面的图标，对话框下面的内容清空，在“项目项目名称名称”后输入后输入“d2”，将，将“业界资讯业界资讯”的按钮图像分别的按钮图像分别导入到导入到“状态图

44、像状态图像”和和“按下图像按下图像”。用同样的方法在给的素材文件夹里找到相应图片，依次用同样的方法在给的素材文件夹里找到相应图片，依次插入其他导航元素。如图所示。插入其他导航元素。如图所示。第41页，此课件共44页哦3.4 插入导航条插入导航条“单击，可以删除导航元素。单击，可以删除导航元素。“预先载入图像预先载入图像”选择此选择此选项可在下载页面的同时下载图像。此选项可防止在用选项可在下载页面的同时下载图像。此选项可防止在用户将指针滑过鼠标经过图像时出现延迟。户将指针滑过鼠标经过图像时出现延迟。插入导航条后效果如图插入导航条后效果如图7.40所示，其中所示，其中“摄影器材摄影器材”按按钮处于

45、钮处于“鼠标按下鼠标按下”状态。状态。图图7.40 插入导航条后效果插入导航条后效果 如果要修改导航条，可选择如果要修改导航条，可选择“插入插入”栏的栏的“图像图像”选项选项卡，单击卡，单击“导航条导航条”按钮，将会弹出如图按钮，将会弹出如图7.41所示的对所示的对话框，单击确定可再次打开话框，单击确定可再次打开“插入导航条插入导航条”对话框进行对话框进行设置。设置。第42页，此课件共44页哦3.5 音频与视频音频与视频3.5.1 插入声音插入声音可以利用插件来插入各种格式的音乐（如可以利用插件来插入各种格式的音乐（如MP3、MDID、WAV、AIF、ra、ram等）；插件也可用来播放等）；插

46、件也可用来播放Director的影片的影片Shockwave、Authoware的的Shockwave以及以及Flash电影。电影。【案例案例7.7】在网页中添加声音。在网页中添加声音。打开打开“CH07/web/tuxiang.html”，将插入点定位在网，将插入点定位在网页最后。页最后。在在“插入插入”栏中选择栏中选择“媒体媒体”选项卡中的选项卡中的“插件插件”图标，图标，在打开的对话框中选择文件在打开的对话框中选择文件“CH07/素材素材/1.mp3”,将其复将其复制到站点目录下，单击确定，声音被插入网页。制到站点目录下，单击确定，声音被插入网页。拖动网页设计视图下的插件图标至最小。按拖动网页设计视图下的插件图标至最小。按F12，欣赏网，欣赏网页声音效果。页声音效果。第43页，此课件共44页哦Thats all for this chapter!第44页，此课件共44页哦