《Dreamweaver 网页设计 教学课件 ppt 作者 吴权威 王绪溢 第六章》由会员分享，可在线阅读，更多相关《Dreamweaver 网页设计 教学课件 ppt 作者 吴权威 王绪溢 第六章（59页珍藏版）》请在金锄头文库上搜索。
1、1,第6章 多媒体互动网页设计,6-1 用CSS制作图片特效 6-2 提供多项小程序的行为面板 6-3 在网页中插入各种媒体文件 6-4 小知识,返回,2,6-1 用CSS制作图片特效,6-1-1 自动排列的相册 6-1-2 发光的文字与边框,返回,3,6-1-1 自动排列的相册,通过Dreamweaver提供的CSS功能，可以轻松完成一个依窗口大小自动排列的照片表格网页。 本例设计两个CSS样式： 一个是相册外框、背景与定位的样式； 另一个则是单一图片的位置与外框样式设计。 （1）打开CSS样式面板后，移动鼠标单击 新建样式按钮。,4,6-1-1 自动排列的相册,5,6-1-1 自动排列的相
2、册,（2）打开“新增CSS样式”对话框后，在“选择器”栏输入名称，接着在“选择器类型”区选择“高级”，然后在“定义在”区选择“仅对该文档”，最后单击“确定”按钮。,6,6-1-1 自动排列的相册,（3）出现CSS样式定义窗口后，在“分类”栏中选择背景，然后在“背景颜色”栏输入颜色代号。,选择“背景”,输入所需 要的颜色,7,6-1-1 自动排列的相册,（4）在“分类”栏中选择方框，然后在“宽”栏输入网页的宽度，并选择%为单位，接着在“填充”区输入与上方的间隔大小，并选择像素为单位。,选择“方框”,输入网页的宽度,选择%为单位,选择像素为单位,输入与上方的间隔,8,6-1-1 自动排列的相册,（
3、5）在“分类”栏中选择边框，接着在“样式”区选择线条的样式，并在“宽度”区设置线条的宽度与单位，然后在“颜色”区输入线条的颜色。,选择“边框”,选择线条样式,输入线条颜色,选择像素为单位,输入线条宽度,9,6-1-1 自动排列的相册,（6）在“分类”栏中选择定位，然后在“宽”栏输入网页的宽度，并选择%为单位，最后单击“确定”按钮。,10,6-1-1 自动排列的相册,（7）回到编辑窗口后，CSS样式面板中会出现新建的样式名称，移动鼠标选择新建样式按钮，设计新的样式。,11,6-1-1 自动排列的相册,（8）出现“新建CSS样式”对话框后，在“名称”栏输入样式名称，接着在“选择器类型”区选择“类”
4、，然后在“定义在”区选择“仅对该文档”，最后单击“确定”按钮。,12,6-1-1 自动排列的相册,（9）在“分类”栏中选择“方框”，接着在“浮动”栏选择靠左对齐，然后在“填充”区输入与上方字段的间隔大小，并选择像素为单位，在“边界”区输入与上方的边界距离，并选择像素为单位。,13,6-1-1 自动排列的相册,（10）在“分类”栏中选择“边框”，接着在“样式”区设置上方边框样式，并在“宽度”区设置与上方的间隔距离与单位，然后在“颜色”区设置边框的颜色，最后选择按钮。,14,6-1-1 自动排列的相册,（11）回到编辑窗口后，移动鼠标选择左下角状态栏的第一个按钮。,选择此按钮,15,6-1-1 自
5、动排列的相册,（12）移动鼠标选择要套用CSS样式的样式名称，接着单击鼠标右键，然后从弹出的快捷菜单中选择“套用”。,单击鼠标右键,16,6-1-1 自动排列的相册,（13）移动鼠标选择第一张插入的图片，然后选择左下方状态栏上的 按钮。,选择图片,选择此按钮,17,6-1-1 自动排列的相册,（14）移动鼠标选择要套用CSS样式的样式名称，接着单击鼠标右键，然后从弹出的快捷菜单中选择“套用”（同前图）。 重复步骤（13）、步骤（14）套用到所有已插入的图片上。回到编辑窗口后，移动鼠标到文件工具栏选择在浏览器中预览/调试按钮，弹出菜单后，从菜单中选择“预览在iexplore”。 打开浏览器窗口后
6、，就可以看到照片依窗口大小自动排列成表格。,18,6-1-1 自动排列的相册,返回,19,6-1-2 发光的文字与边框,为文字与边框加上发光的特效。 （1）移动鼠标选择要编辑的CSS样式名称，然后选择右下方的编辑样式按钮。,选择要编辑的CSS样式的名称,选择此按钮,20,6-1-2 发光的文字与边框,（2）出现CSS样式定义窗口后，在“分类”栏中选择“类型”，接着在“颜色”栏选择文字的颜色，然后单击“应用”按钮。,选择类型,选择颜色,21,6-1-2 发光的文字与边框,（3）接着在“分类”栏中选择“扩展”，然后在“过滤器”栏中选择Glow。,22,6-1-2 发光的文字与边框,（4）在“过滤器
7、”栏输入Glow所需要的参数(Color=#308148 Strenth=3)，然后选择按钮。,23,6-1-2 发光的文字与边框,完成以上的步骤后，移动鼠标到文件工具栏上单击 在浏览器中预览/调试按钮，再从弹出的菜单中选择“预览在iexplore”，打开浏览器窗口后，即可看到发光的文字与边框。,返回,24,6-2 提供多项小程序的行为面板,6-2-1 弹出信息窗口 6-2-2 加入弹出式菜单,返回,25,6-2-1 弹出信息窗口,所谓信息窗口是指提示给用户知道的说明文字，通常是在一进入网站时就会自动弹出。 （1）移动鼠标选择左下角状态栏的按钮。,选择 按钮,26,6-2-1 弹出信息窗口,（
8、2）打开行为面板后，单击 按钮，再从弹出的菜单中选择“弹出信息”。 （3）出现“弹出信息”对话框后，在“消息”栏输入信息窗口内显示的内容，然后单击“确定”按钮。,输入 信息 内容,27,6-2-1 弹出信息窗口,以后只要进入网站，就会自动弹出一个信息窗口，选择按钮后，就可以关闭这个窗口。,自动 弹出 信息 窗口,28,6-2-1 弹出信息窗口,可以指定信息窗口弹出的时机，只要在行为面板中选择onLoad旁边的按钮，再从下拉列表中选择onUnload，则信息窗口变成离开网页时才会弹出来。,返回,29,6-2-2 加入弹出式菜单,网页上的弹出式菜单是一种附着在鼠标指针上出现的链接菜单，只要设置菜单
9、中显示的名称与相对的链接地址，就可以方便浏览者经由弹出的菜单进行快捷链接。 （1）打开行为面板后，选择要加入下拉菜单的文字链接，单击 按钮，再从弹出的菜单中选择“显示弹出式菜单”。,30,6-2-2 加入弹出式菜单,31,6-2-2 加入弹出式菜单,（2）出现“显示弹出式菜单”窗口后，选择“内容”标签，然后进行图中各项设置。若要新增表单中的项目，可以单击 按钮。,在“文本”栏 输入文字内容,在“链接”栏 输入链接的网页,选择此项,选择“” 按钮增加 表单项目,32,6-2-2 加入弹出式菜单,（3）接着选择“外观”标签，分别设置菜单出现的方式、字体、大小以及在一般状态及滑过状态下，文字及单元格
10、的颜色设置，完成后单击“确定”按钮。,表单外 观的属 性设置,33,6-2-2 加入弹出式菜单,回到行为面板后，在行为列表中会出现一个onMouseOver事件，按下【F12】键打开浏览窗口，当鼠标移到文字链接时，会自动弹出所设置的下拉式菜单。,弹出下 拉式菜单,返回,34,6-3 在网页中插入各种媒体文件,6-3-1 插入Flash动画文件 6-3-2 插入影片 6-3-3 内嵌跑马灯动态效果的JavaApplet程序 6-3-4 显示最新更新日期,返回,35,6-3-1 插入Flash动画文件,（1）将光标移到要插入Flash动画文件的位置，然后到常用模式上单击Flash按钮。,单击Fla
11、sh按钮,光标位置,36,6-3-1 插入Flash动画文件,（2）从打开的“选择文件”对话框中找到所需的文件，然后单击“确定”按钮。,37,6-3-1 插入Flash动画文件,（3）回到Dreamweaver窗口后，光标位置会出现插入的动画文件图标，移动鼠标在属性面板单击“播放”按钮预览动画。,插入的 动画文 件图标,选择此 按钮预 览动画,38,6-3-1 插入Flash动画文件,Dreamweaver 窗口中预 览动画,返回,39,6-3-2 插入影片,（1）将光标移到要插入影片的位置，然后到常用模式上单击 外挂程序按钮。,光标位置,单击 外挂 程序 按钮,40,6-3-2 插入影片,（
12、2）出现“选择文件”对话框后，在“查找范围”栏中选择文件所在磁盘与文件夹，接着在列表中选择文件名，然后单击“确定”按钮（同前图）。 （3）回到Dreamweaver窗口后，光标位置会出现图标，在属性面板的“宽”和“高”栏分别输入影片的宽度和高度。,41,6-3-2 插入影片,输入影片的 宽度和高度,42,6-3-2 插入影片,适当的 影片尺寸,返回,43,6-3-3内嵌跑马灯动态效果的JavaApplet程序,（1）将光标移到要插入跑马灯的位置，然后到常用模式上单击 Applet按钮。 （2）在“选择文件”对话框中选择文件所在磁盘与文件夹，接着在列表中选择文件名，然后单击“”确定按钮。,单击
13、Applet按钮,44,6-3-3内嵌跑马灯动态效果的JavaApplet程序,（3）回到Dreamweaver窗口后，光标位置会出现图标，在属性面板的“宽”和“高”栏输入显示这个JavaApplet程序效果所需的宽度和高度，然后单击“参数”按钮。,出现 图标,45,6-3-3内嵌跑马灯动态效果的JavaApplet程序,（4）打开“参数”对话框后，分别在“参数”栏和“值”栏输入设置内容，接着单击 按钮增加设置项目，完成后单击“确定”按钮。,在参数栏 输入参数,在值栏输 入参数值,46,6-3-3内嵌跑马灯动态效果的JavaApplet程序,打开浏览器窗口后，会看到内嵌JavaApplet程序
14、后所产生的跑马灯。,加入JavaApplet 程序后所产生的 跑马灯,47,6-3-3内嵌跑马灯动态效果的JavaApplet程序,在参数窗口中： 参数栏的bgco为看板背景颜色， speed为移动速度， msg为看板内的文本信息， txtco为看板字体颜色。,返回,48,6-3-4 显示最新更新日期,（1）将光标移到要插入日期的位置，然后到常用模式上单击 日期按钮。,将光标移到要 插入日期的位置,49,6-3-4 显示最新更新日期,（2）出现“插入日期”对话框后，在“日期格式”列表中选择日期格式，并勾选“储存时自动更新”，然后单击“确定”按钮。,50,6-3-4 显示最新更新日期,如果要更改
15、设置好的日期格式，只要在属性面板上单击“编辑日期格式”按钮，出现“插入日期”窗口后，就可以重新设置日期的显示格式了。,选择此按钮可以 重新设置日期格式,插入的日期格式,返回,51,6-4 小知识,6-4-1 将Flash背景透明化 6-4-2 加入网页背景音乐,返回,52,6-4-1 将Flash背景透明化,（1）选择动画文件，然后在属性面板单击“参数”按钮。,单击“参数”按钮,53,6-4-1 将Flash背景透明化,（2）出现“参数”对话框后，在“参数”栏输入wmode，并在“值”栏输入transparent，然后单击“确定”按钮。,在“参数”栏 输入wmode， 在“值”栏输入 tran
16、sparent,54,6-4-1 将Flash背景透明化,Flash动画 的背景变 透明了,返回,55,6-4-2 加入网页背景音乐,（1）将光标移到要插入音乐文件的位置，然后到常用模式上单击 外挂程序按钮。,将光标移到要插入 音乐文件的位置,选择外挂程序按钮,56,6-4-2 加入网页背景音乐,（2）在打开的“选择文件”对话框中选取文件。 （3）回到Dreamweaver窗口后，光标位置会出现图标，移动鼠标在属性面板单击“参数”按钮。,出现图标,选择“参数” 按钮,57,6-4-2 加入网页背景音乐,（4）出现“参数”窗口后，在“参数”栏输入hidden，并在“值”栏输入true，接着单击 按钮新增设置项目，然后在“参数”栏输入autostart，在“值”栏输入true，最后单击“确定”按钮（同前“参数”对话框）。 hidden参数用来设置是否隐藏面板，autostart参数则是设置
