dreamweaver课件第四单元.ppt

Dreamweaver网页制作,第四单元 制作“心情日记”网页,主 编：王树平 副主编：杜大志、刘艳慧、范永泰,第四单元 制作“心情日记”网页,任务描述：本单元通过“创建框架集”、“使用链接控制框架内容”和“制作媒体日记页面”三个任务完成“幽幽我心的个人网站”中“心情日记”栏目的制作，学习如何使用框架结构来布局页面及如何在网页中插入多媒体文件，任务完成后效果如图：,第四单元 制作“心情日记”网页,第四单元 制作“心情日记”网页,任务二 使用链接控制框架内容,任务三 制作媒体日记网页,任务四 使用代码制作框架网页,任务一 创建框架集,第四单元 制作“心情日记”网页,任务一 创建框架集,任务： 创建“心情日记”页面的框架结构。,分析：依据“心情日记”效果图，页面分为上部、左下、右下三个部分，每个部分可以用一个框架页来实现。上部框架页用于放置标题“心情日记”和图像；左下部框架页用于放置“个人日记”等五个导航链接，每个导航链接一个页面；右下部框架页用于显示与导航链接相对应的页面。,第四单元 制作“心情日记”网页,自己动手,1创建 “心情日记”栏目的目录结构,任务一 创建框架集,2创建框架集,运行Dreamweaver 8，选择菜单栏“文件”菜单下的“新建”选项，弹出“新建文档”对话框。,任务一 创建框架集,在“常规”选项卡中，选择“框架集”类别中的“上方固定，左侧嵌套”。,还可以通过什么方法创建框架集？,3选择框架并设置属性,任务一 创建框架集,A.设置左下部框架属性：勾选“窗口”菜单的“框架”选项，在面板组中出现“框架”面板，如图所示。,在“框架”面板的左下部框架内部单击，“文档窗口”中的左下部框架会以黑色虚线包围，提示该框架被选中。,任务一 创建框架集,在框架“属性”面板中设置“源文件”为“D:mysitediary”文件夹中的“left.html”网页，其他属性保持默认 。,框架“属性”面板中其他属性的功能？,B.设置右下部框架属性：采用如上方法，设置 “源文件”为“D:mysitediary”文件夹中的“main1.html”网页。,4选择框架集并设置属性,A.选择框架集：如图下所示，如果在“框架”面板单击框架集的最外边框，将选中整个框架集；单击次外边框，将选中包含下方两个框架的框架集；单击最内边框，将选中相应框架。,任务一 创建框架集,B.设置框架集属性： 单击“框架”面板中最外边框，选择整个框架集，“属性”面板将显示此框架集属性，如下图所示。“边框”选择“否”，“边框宽度”设置为0，“行值”设置为186像素，其他保持默认。,框架集“属性”面板中选项的功能？,单击次外边框，选中下方一行两列的框架集，“属性”面板将显示此框架集属性，如下图所示。“边框”选择“否”，边框宽度为0，“列值”设为200像素，其他保持默认值。,任务一 创建框架集,5、 保存框架和框架集,选择菜单栏“文件”菜单的“保存全部”选项，Dreamweaver 8会以斜线框包围整个框架集，提示将要保存框架集页面，如右图所示。同时弹出“另存为”对话框，输入框架集页面名称“diary.html”，将其保存在“D:mysitediary”文件夹中。,任务一 创建框架集,接着出现“另存为”对话框，此时斜线框的包围区域提示要保存顶部的框架页。在“另存为”对话框中，输入文件名为“top.html”，保存在“D:mysitediary”文件夹中。,思考：为什么没有提示保存左下部和右下部框架页？,因为左下部和右下部框架页已经通过“属性”面板的“源文件”选项设置为从素材中拷贝过来的网页，页面内容没有修改，所以不需要保存。,任务总结,任务一 创建框架集,1创建框架集的方法 2选择框架并设置框架的属性 3选择框架集并设置框架集的属性 4保存框架及框架集文件,举一反三： 创建网页“practice4-1.html”，使用“新建文档”对话框，创建“右侧固定，上方嵌套”结构的框架集网页，设置显示框架边框，边框宽度为3，颜色为“#0000FF”。,1启发思路： 根据所学习的创建框架集方法，自己动手创建上述框架集网页。每个框架的属性设置按要求制作。,2分组完成任务。,任务一 创建框架集,作业： 1自己试一试如何手动创建框架。 2. 自己练习如何拆分框架和删除框架。 3创建如下图所示的框架集网页“practice4-2.html”。,任务一 创建框架集,创建如下图所示的框架集网页“practice4-3.html”。,任务一 创建框架集,任务二 使用链接控制框架内容,需求：使用上一任务创建的框架页面，在其左下部框架页内创建超级链接，链接目标显示到右下部框架中。,分析：为上一任务创建的顶部框架页面添加内容。左下部框架页在属性设置时，直接应用了网页“left.html”。该网页中有“个人日记”、“感情天地”等五行文本。为这五行文本创建超级链接，链接到素材中对应的网页，链接目标显示在右下部框架。,第四单元 制作“心情日记”网页,2创建超级链接控制框架显示内容,在Dreamweaver 8的“文件”面板中，打开框架集页面“diary.html”，选中左下部框架页“left.html”中的文本“个人日记”，“链接”到页面“main1.html”，在“目标”下拉列表中选择“mainFrame”，如图所示，表示“个人日记”文本链接到页面“main1.html”，在右下部框架“mainFrame”中显示。,1添加框架页内容,任务二 使用链接控制框架内容,在软件上演示操作：打开顶部框架页，添加内容；在“文件”面板中本站点“diary”文件夹下，创建一个 “main5.html”空白页面（该页面为“媒体日记”文字要链接的页面，下一任务介绍其具体制作过程）。,链接页面,目标项,任务二 使用链接控制框架内容,通过创建超级链接如何控制框架内容？,给全部文字添加链接,任务二 使用链接控制框架内容,知识总结：,1添加框架页的内容,2创建超级链接控制框架内容,任务二 使用链接控制框架内容,举一反三： 创建网站“pra4-3”,站点保存在“D:pra4-3”文件夹。使用框架技术制作一个网上相册，将自己拍摄或搜集的相片分类（至少分三类），把每一类相片显示在一个页面中。创建一个“上方固定，左侧嵌套”的框架集网页“practice4-6.html”。上部框架显示相册标题（自定），左下部框架显示分类名称并添加链接，右下部框架显示相应类别的相片页面（注意：除了框架集网页外其他网页文件名自定）。,任务二 使用链接控制框架内容,1启发思路： 要认真组织页面，力求达到美观的效果，最好使用css样式。,2分组完成任务。,作业： 设计一个个人网站进行自我介绍，要求使用框架技术布局页面。,任务二 使用链接控制框架内容,任务三 制作媒体日记网页,任务描述：插入多媒体文件，制作媒体日记网页。,任务分析：在“媒体日记”链接的网页“main5.html”中，插入一段视频文件。在上部框架页面“top.html”中，插入Flash动画作为装饰，美化页面 。,第四单元 制作“心情日记”网页,自己动手： 1布局“媒体日记”页面 A.运行 Dreamweaver 8，打开“main5.html”页面 B.设置页面属性网页上下边距为0像素，背景色为“#EEF0FF” C.插入一个宽366像素、2行2列的表格，设置表格属性：边框为0；第一行高20像素，第二行高272像素；第一列宽17像素，第二列宽349像素。,任务三 制作“媒体日记”页面,表格布局页面,2插入多媒体插件 通过“插入”菜单栏的“媒体”菜单项的“插件”选项向表格的第二行里插入“D:mysitediarymedia ”目录下的“ljsy.mpg”文件。,多媒体文件包括哪些？,多媒体插件,注意：插入插件后，用鼠标拖拽插件的控制柄，调整它的大小。,任务三 制作“媒体日记”页面,打开“top.html”文件，通过“插入”菜单栏的“媒体”菜单项的“FLASH”选项在图像“biaoti.jpg”的右边插入“D:mysitediarymedia ”目录下的“top.swf”文件。效果如图：,3插入Flash动画文件,动画与页面不协调,任务三 制作“媒体日记”页面,单击选中刚刚插入的FLASH动画，然后单击“属性”面板中的“参数”按钮，弹出“参数”对话框，如图所示。设置“参数”为“wmode”，“值”为“transparent”，表示背景为透明。然后单击“确定”按钮，完成插入Flash及其参数设置，保存页面。,添加参数,参数的含义是什么？,任务三 制作“媒体日记”页面,设好参数后 Flash动画和背景融合。,任务三 制作“媒体日记”页面,通过完成以上任务，学习了在网页中插入多媒体视频文件、FLASH动画的知识，另外学习了如何修改插入的FLASH动画的参数的知识。,任务总结：,任务三 制作“媒体日记”页面,举一反三： 创建网页“practice4-7.html”，在网页中插入“插件”，播放本单元素材“举一反三”文件夹中的“Boo.wav”。,1启发思路： 回忆使用哪个菜单、选项可以插入插件？本题应插入那个插件？每个插件可以插入什么类型的多媒体文件？,2分组完成任务。,任务三 制作“媒体日记”页面,作业： 1. 如何在网页中插入声音文件，插入的声音文件和网页的背景音乐有什么区别？ 2创建一个网页“practice4-8.html”，效果如图JYFS4-5所示，在网页下方插入“插件”，播放本单元素材“举一反三”文件夹中的“piantou.avi”。 3创建网页“practice4-9.html”，在网页中插入“插件”播放本单元素材“举一反三”文件夹中的“background.mid”，要求设置循环播放。 要点提示：在“插件”的属性面板添加参数“loop”，值为“-1”。,任务三 制作“媒体日记”页面,任务四 使用代码创建框架网页,任务描述：本任务将使用代码制作一个简单的框架网页，学习利用HTML代码生成框架网页的方法。,实例效果,任务分析：通过代码添加包含三个框架的框架集，设置框架的属性，在一个框架集内显示三个框架页的内容。,第四单元 制作“心情日记”网页,自己动手： 1新建一个文件夹“tcsx”，把随书光盘中本单元素材文件夹中“HTML”文件夹下的网页“top.html”、“left.html”、“main.html”、“main2.html”和“main3.html”拷贝到此新建文件夹中。,任务四 使用代码创建框架网页,素材文件,2运行Dreamweaver 8，新建一个空白页面，命名为“tcsx.html”，保存在“tcsx”文件夹中。将“文档窗口”切换到“代码”视图，修改网页标题为“唐代名词赏析” 。,修改标题,任务四 使用代码创建框架网页,3在和之间添加框架集代码创建框架集，并设置其属性 。,框架集标签代码的含义,任务四 使用代码创建框架网页,4在和之间添加框架代码创建框架并设置他们的属性 。,框架标签代码的含义,任务四 使用代码创建框架网页,5在和之间修改并添加代码，设置在不支持框架的浏览器中显示的信息 。,注意：框架集网页中标签与和标签不能互相包含。但是可以添加在标签中，用于设置不支持框架的浏览器中显示的提示信息。,在此添加不支持框架的浏览器中显示的信息 。,任务四 使用代码创建框架网页,任务总结： 通过完成以上任务，学习了使用网页创建框架集、框架的相关方法以及在代码里设置框架集框架属性的方法。,任务四 使用代码创建框架网页,举一反三： 使用HTML代码制作“上方固定”的框架集网页“practice4-10.html”，上方框架高度为120像素。,1启发思路： 这个框架集只包含上下两部分，不用嵌套。,2分组完成任务。,任务四 使用代码创建框架网页,作业： 1使用HTML代码制作框架集网页“practice4-11.html”，其结构为左侧固定、上方嵌套，左侧框架宽150像素，右上框架高100像素，显示框架边框，宽度为1像素，颜色为“#FF00FF”。 2通过各种途径完善框架的第二种方式-内联框架的知识储备，每一组同学都要完成一个内联框架的作业。,任务四 使用代码创建框架网页,返回,任务四 使用代码创建框架网页,唐代名词赏析网页效果图,相关知识,1创建框架集的另外一种方法 在Dreamweaver 8中，也可以通过单击“插入”栏“布局”类别中的“框架”按钮或在菜单栏中选择“插入”“HTML”“框架”选项，插入Dreamweaver 8预定义的框架集。,任务一 创建框架集,2框架“属性”面板介绍 “框架名称”：用于设置链接的“目标”属性或脚本中引用该框架时所用的名称。 “源文件”：用于设置在该框架中显示的网页文件。可以单击“浏览文件”按钮选择要显示的网页文件。 “滚动”：用于设置是否显示滚动条。其中“默认”表示由浏览器的默认设置确定是否显示滚动条。大多数浏览器默认设置为在浏览器窗口中没有足够空间来显示框架内容时，显示滚动条。 “不能调整大小”：用于设置在浏览器中是否可以通过拖动框架边框来调整框架大小。 “边框”：用于设置在浏览器中是否显示框架边框。大多数浏览器默认设置显示边框。 “边框颜色”：用于设置边框颜色。 “边界宽度”：以像素为单位设置框架左边框和内容之间的距离。 “边界高度”：以像素为单位设置框架上边框和内容之间的距离。,任务一 创建框架集,3框架集“属性”面板介绍 “边框”：用于设置在浏览器中是否显示框架边框。 “行列选定范围”：用于选定要修改属性的框架。 “值”：用于设置“行列选定范围”选中框架的宽度或高度。 “单位”：用于设置“值”的单位。其中“像素”指定选定列或行的大小设置为一个绝对值，对于应始终保持相同大小的框架（如导航条）而言，此选项是最佳选项。“百分比”指定选定列或行应相当于其框架集的总宽度或总高度的百分比。“相对”指定在“像素”和“百分比”框架分配空间后为选定列或行分配其余可用空间，剩余空间在单位设置为“相对”的多个框架中按值的比例划分。,任务一 创建框架集,相关知识,任务二 使用链接控制框架内容,1创建超级链接控制框架内容 给文本添加超级链接时，属性面板中的“目标”下拉菜单中的内容如下图，其中，mainFrame、leftFrame、topFrame是三个框架的名字，用于确定显示链接目标的框架。,相关知识： 1框架集标签格式： ,其中各部分功能： “rows”属性：设置子框架的高度。 “cols”属性：设置子框架的宽度。当横向有两个子框架 时，由“cols”分别设置它们的宽度。例如：“cols30%,70%”，即左框架宽度为浏览器宽度的