《多媒体元素、列表及模板课件.ppt》由会员分享，可在线阅读，更多相关《多媒体元素、列表及模板课件.ppt（25页珍藏版）》请在三一办公上搜索。
1、,网页设计与制作实用教程,吴 丰 主编,清华大学出版社,第7章 多媒体元素、列表与模板,7.1.1 插入Flash动画,在网页中可以直接插入Flash动画，即扩展名为.swf的Flash文件。,【教与练7-1】：插入Flash动画。,图7-3 修改Flash动画参数,第7章 多媒体元素、列表与模板,7.1.2 使用透明背景的Flash动画制作Banner,【教与练7-2】：使用透明背景的Flash动画制作Banner。,图7-6 当前预览效果,前提：flash动画背景本身就是透明的！,第7章 多媒体元素、列表与模板,7.1.2 使用透明背景的Flash动画制作Banner,图7-8 最终预览效
2、果,图7-7 预览当前Flash动画,第7章 多媒体元素、列表与模板,7.1.3 插入FLV视频,FLV（Flash Video）格式是目前被众多新一代视频分享网站所采用，且增长最快、最为广泛的视频传播格式。,【教与练7-3】：插入FLV视频。,图7-10 预览效果,图7-11 FLV文件的属性面板,第7章 多媒体元素、列表与模板,7.1.4 插入其他多媒体元素,1插入Java Applet小程序,Java是一种程序的编程语言，而Java Applet是在Java的基础上演变而成的能够嵌入在网页中的可以执行一定任务的应用程序。当创建Applet小程序后，用户便可以用Dreamweaver将它插
3、入的XHTML文档中，Dreamweaver使用Applet标签来标识对小程序文件的引用。,【教与练7-4】：插入Java Applet小程序。,图7-12 Java applet属性面板,第7章 多媒体元素、列表与模板,图7-13 设置参数,图7-14 水波倒影效果,第7章 多媒体元素、列表与模板,7.1.1 插入Flash动画,2插入ActiveX控件,ActiveX控件是功能类似于浏览器插件的可复用组件，ActiveX对象的作用是向访问者浏览器中的ActiveX控件提供参数和属性。,图7-15 ActiveX属性面板,第7章 多媒体元素、列表与模板,7.2.1 列表的种类,1无序列表,无
4、序列表内的列表项之间没有先后顺序，ul标签在XHTML中代表的是无序列表的集合，并且ul标签中需要和li标签联合使用，正确的应用方式如下：,无序列表中的一个列表项 无序列表中的一个列表项,这里将无序列表中常见的错误嵌套方法罗列出来，请读者注意观察。,错误一：无序列表内部插入其他div容器。,无序列表中的一个列表项 无序列表中的一个列表项其他div容器,第7章 多媒体元素、列表与模板,改正一：移除div容器。,无序列表中的一个列表项 无序列表中的一个列表项其他div容器,错误二：多层无序列表嵌套时出错。,无序列表中的一个列表项 无序列表中的一个列表项,改正二：嵌套时应该将ul标签放在li标签之间
5、。,无序列表中的一个列表项 无序列表中的一个列表项,第7章 多媒体元素、列表与模板,无序列表中的一个列表项 无序列表中的一个列表项 无序列表中的一个列表项,错误三：无序列表中标签没有进行关闭。,改正三：关闭li标签。,无序列表中的一个列表项 无序列表中的一个列表项 无序列表中的一个列表项,第7章 多媒体元素、列表与模板,2有序列表,多级有序列表 多级有序列表 多级有序列表 多级有序列表 多级有序列表,有序列表与无序列表最大的区别就是能够自动排序，但不同的浏览器解析的效果可能会不一样。,自定义列表的标题 自定义列表的内容 自定义列表的内容,3自定义列表自定义列表就是以自定义形式形成的列表，在XH
6、TML文档中自定义列表以dl标签形式出现，在dl标签中包含了dt标签和dd标签，且一个dt标签对应着一个或多个dd标签。,7.2.2 用于列表的CSS样式,表7-1 CSS列表属性,第7章 多媒体元素、列表与模板,7.2.2 用于列表的CSS样式,表11-2 常用的list-style属性值,第7章 多媒体元素、列表与模板,第7章 多媒体元素、列表与模板,7.2.3 向列表添加图像修饰符,这里着重讲解工作中经常采用的处理方法，请读者注意“padding-left”属性在案例中的应用，至于“list-style-image”属性的用法，读者自行实验即可，这里不再赘述。,【教与练7-6】：图像修饰
7、符。,图7-24 最终预览效果,第7章 多媒体元素、列表与模板,7.2.4 列表模式的纵向导航,透过表象看本质，导航可以归纳为一个列表，而且列表项之间并无先后顺序，因此设计者通常采用无序列表实现导航。,【教与练7-7】：列表模式的纵向导航。,图7-28 最终预览效果,第7章 多媒体元素、列表与模板,7.2.5 列表模式的横向导航,上一节已经讲述了纵向列表导航的实现方法，如果想要让列表横向排列，“float”属性起到了至关重要的作用，这也是横向导航实现的核心所在。,【教与练7-8】：列表模式的纵向导航。,图7-32 最终预览效果,第7章 多媒体元素、列表与模板,7.2.6 图文信息列表,图文信息
8、列表的应用无处不在，例如当当网、淘宝网和迅雷看看等诸多门户，其中用于显示产品或电影的列表都是图文信息列表，如图7-33所示。,图7-33 图文信息列表,图7-40 最终预览效果,第7章 多媒体元素、列表与模板,7.3.1 认识模板,1模板的区域,在模板中有两种区域，一种是锁定区域，一种是可编辑区域，创建模板的过程就是指定和命名可编辑区域的过程。,2模板的作用范围,从模板创建的文档与该模板保持链接状态，当模板被用户修改时，所有使用这种模板的网页都将随之改变，除非这个网页与模板进行分离。,3创建模板的途径,（1）从空白文档中创建模板。（2）从现有文档中创建模板。,第7章 多媒体元素、列表与模板,图
9、7-41 作为模板的页面,图7-42 基于模板创建的页面,第7章 多媒体元素、列表与模板,7.3.2 使用模板创建网页,【教与练7-10】：使用模板创建网页。,使用模板创建网页大致分为四个阶段，即前期准备阶段、基于现有文档创建模板阶段、创建可编辑区域阶段、基于模板创建新页面阶段（1）前期准备阶段（2）基于现有文档创建模板阶段（3）创建可编辑区域阶段（4）基于模板创建新页面阶段,第7章 多媒体元素、列表与模板,7.3.3 修改模板与更新页面,1更新基于模板的文档 在文档编辑窗口，执行“修改”“模板”“更新页面”命令，打开“更新页面”对话框，如图7-49所示。根据需要选择更新站点的所有页面，还是只
10、更新特定模板的页面。在“文件”面板“资源”选项卡中，单击左侧分类中的“模板”按钮，打开“模板”面板。在模板上单击鼠标右键，在弹出的菜单中选择“更新站点”，如图7-50所示。在打开的“更新页面”对话框内，根据需要进行设置即可。,图7-49“更新页面”对话框,图7-50 利用“资源”面板更新站点,2从模板中分离页面打开一个基于模板创建的文档，执行“修改”“模板”“从模板中分离”命令，即可将当前文档从模板中分离。,第7章 多媒体元素、列表与模板,图7-51 网站主页效果,图7-52 网站子页效果,第7章 多媒体元素、列表与模板,图7-53 主页布局示意图,图7-54 子页布局示意图,第7章 多媒体元素、列表与模板,图7-87 最终效果,图7-88 布局示意图,
