网页制作教案电子版.docx

教学内容第一章网页与网站基础知识校历第一周课时4课型理论+实践教学目标网站的策划与创建原则教学方法任务驱动法作业布置分析总结本章主要通过三个活动的开展，让学生了解DreamweaverCS3网页浏览的基本原理和网页制作技术的发展，知道目前网页制作常用的几种工具。了解HTML语法的基本构成及几种常用标签。通过具体的网页实例制作，掌握起始页的设置以及基本的界面操作。教学过程新课引入：越来越多的人开始熟悉网络，熟悉网页。人们已经渐渐意识到网络正在改变日常生活。人们需要为个人、企业制作一个精彩的网站，这就带来一个新的问题：怎样设计制作一个实用而美观的网站？实用与美观似乎总是相悖的。新课内容：一、网页与网站的概念网页：我们在浏览器中看到的页面，它是一个单个的文件。网页里可以有文字、表格、图像、声音、视频等等。网站中的第一个页面成为首页或主页。网站：存放在网络服务器上的完整信息的集合体，它包含一个或多个网页。这些网页按照一定的组织结构，以链接等方式连接在一起，形成一个整体，描述一组完整的信息。二、网页的设计网页的主题指网页所要表现的最主要的思想内涵，可以说师网页的灵魂。确定主题时应遵循的原则1 .自己擅长或喜欢的内容2 .主题小而精3 .不要太滥或目标太高2、网页的文字最适合于网页正文显示的字体大小为12磅左右，如果在一个页面中需要安排的内容较多可采用9磅的字号。标题和需要强调的内容可以用较大的字号。行距的变化也会对文本的可读性产生很大影响。一般情况下，接近字体尺寸的行距设置比较适合正文。行距的常规比例为10:12,即用字10点，则行距12点。在网页设计中，设计者可以为文字、文字链接、己访问链接和当前活动链接选用各种颜色。使用不同颜色的文字可以使想要强调的部分更加引人注目，但应该注意的是，对于文字的颜色，只可少量运用，在一个页面上运用过多的颜色，会影响浏览者阅读页面内容，除非你有特殊的设计目的。3、网页的色彩教学过程色彩助鲜明性 色彩的独特性 色彩的合适性 色彩的联想性 页面中各处用色的选择4、网页版式和布局1.版面设计的步骤(1)画出页面的结构草图：只需画出页面的大体结构。注：分辨率为640*480时，页面显示尺寸为620*311；分辨率为800*600时，页面显示尺寸为780*428；分辨率为1024*768时，页面显示尺寸为1007*600；(2)布局细化和调整：将需要放置的功能模块安排在页面上，注意突出重点和平衡协调(3)定格：确定出完美的布局方案，定格为最后的版式2.常见网页布局(1)T型结构教学过程(2)同字结构yxMVif,13MAM1I.,11工4-二Iawf*w¾-KihB*0«方大-文安WRWCaW¾H<NBMmXttt*W3EWvnMr费:CZ0VM5”x心E*R三5番上M8<MMSsa三nxaMiagM*w"w"ejw*qmcfm5wa三morxwrfi三三mmre03g今MyM-a田遁伴平4WtM8E.<u>raEEgVUMhac匕.4PI"!里*F5r主XRGfflMa0*/>公rjcyawx3M乃n»tf三ouHwMmea0*weuom3Eyngu.拿0,.gWMLeX：_)CfrCJBSMmK呻:SfEi"l2J6tGWEWygM*BW类&<(3»<M96:WS*kFMHV-SGT*TMMI*"IWr编假f蕾1.er3，3“f一mw竽立的(3)川字结构(4)三字结构<7OO1ZO&也教学过程o«r».s三24。XfuiaEmail夕*皎未支持oWAamOOnaMW。<三ftMS。ITIVBMfIo3esgsomm1MXR大U离b式U11Jtl*Mer3加白大。B阳光“日记*BOMiexa”，rnw三r”/«,*3”IWam务UMmmn<Baas±rwB«w*<内"AI8UWww<tw<e(3)川字结构(4)三字结构<7OO1ZO&也教学过程o«r».s三24。XfuiaEmail夕*皎未支持oWAamOOnaMW。<三ftMS。ITIVBMfIo3esgsomm1MXR大U离b式U11Jtl*Mer3加白大。B阳光“日记*BOMiexa”，rnw三r”/«,*3”IWam务UMmmn<Baas±rwB«w*<内"AI8UWww<tw<e(5)单一结构教学过程教学内容第一章网页与网站基础知识校历第一周课时2课型理论+实践教学目标网站的策划与创建原则教学方法任务驱动法作业布置分析总结本章主要通过三个活动的开展，让学生了解DreamweaverCS3网页浏览的基本原理和网页制作技术的发展，知道目前网页制作常用的几种工具。了解HTML语法的基本构成及几种常用标签。通过具体的网页实例制作，掌握起始页的设置以及基本的界面操作。三、网站的策划与创建原则1、定位网站主题和名称设计一个站点，首先遇到的问题就是定位网站主题。所谓主题也就是你的网站的题材。对于题材的选择，应注意：（1）主题要小而精。定位要小，（2）题材最好是你自己擅长或者喜爱的内容。（3）题材不要太滥或者目标太高。“太滥”是指到处可见，网站名称及域名的选择也是非常重要的。和现实生活中一样，网站名称是否正气，响亮，易记，对网站的形象和宣传推广也有很大影响。一般的建议是：（1）名称要正。也就是要合法，和理，和情。不能用反动的，色情的，迷信的，危害社会安全的名词语句。（2）名称要易记。根据中文网站浏览者的特点，除非特定需要，网站名称最好用中文名称，不要使用英文或者中英文混合型名称。另外，网站名称的字数应该控制在六个字（最好四个字）教学过程（3）名称要有特色。名称平实就可以接受，如果能体现一定的内涵,给浏览者更多的视觉冲击和空间想象力，则为上品。域名的选择也是如此，选一个简单易记，比如可以模仿知名网站扩大自己的影响，有一定含义的域名也是网站成功的一部分。2、网站的风格网站的整体风格及其创意设计是站长们最希望掌握，也是最难以学习的。难就难在没有一个固定的程式可以参照和模仿。给你一个主题,任何两人都不可能设计出完全一样的网站。有风格的网站与普通网站的区别在于：普通网站你看到的只是堆砌在一起的信息，你只能用理性的感受来描述，比如信息量大小，浏览速度快慢。但你浏览过有风格的网站后你能有更深一层的感性认识，比如站点有品位，和蔼可亲，是老师，是朋友。如何树立网站风格呢？我们可以分这样几个步骤：第一，确信风格是建立在有价值内容之上的。第二，你需要彻底搞清楚自己希望站点给人的印象是什么。第三，在明确自己的网站印象后，开始努力建立和加强这种印象。对于确定风格，这里提供一些参考：1.将你的标志log。,尽可能的出现在每个页面上。或者页眉，或者页脚，或则背景。2 .突出你的标准色彩。文字的链接色彩，图片的主色彩，背景色，边框等色彩尽量使用与标准色彩一致的色彩。3 .突出你的标准字体。在关键的标题，菜单，图片里使用统一的标准字教学过程体。4 .想一条朗朗上口宣传标语。把它做在你的banne里，或者放在醒目的位置，告诉大家你的网站的特色5 .使用统一的语气和人称。即使是多个人合作维护，也要让读者觉得是同一个人写的。6 .使用统一的图片处理效果。比如，阴影效果的方向，厚度，模糊度都必须一样。7 .创造一个你的站点特有的符号或图标。比如在一句链接前的一个点，可以使用,.食。口一（区位码里自己参看）等等。虽然很简单的一个变化，却给人与众不同的感觉。8 .用自己设计的花边，线条，点9 .展示你网站的荣誉和成功作品。10 .告诉网友关于你的真实的故事和想法。教学内容第二章站点的建立与管理校历第二周课时6课型理论+实践教学目标1、站点创建2、页面设置教学方法任务驱动法作业布置制作个人空间网站分析总结通过为“我的个人网站”收集相关资料，掌握站点素材及其制作工具的有关知识；为“我的个人网站”规划站点目录，并比较大型站点的站点结构与小型站点的站点结构区别，从而了解站点的设计流程；学会使用“高级”标签为“我的个人网站”建立站点，并设置相关参数；通过网站地图，实现对“我的个人网站”中的网站文件管理，检查链接等。一、站点概念多个网页文档通过各种链接并联起来就构成了站点。二、规划站点结构1、一个文件夹用于存放网站的所有文件，再在文件内建立几个文件夹,将文件分类，如图片文件放在image文件夹内，HTML文件放在HTML文件夹内，当然，如果站点比较大，文件比较多，可以先按栏目分类，在栏目里再分类。如I：html:放网页，img:放图像，SoUnd:放声音文件，back:放备份文件，Other:放其他2、用英文或者拼音给文件命名（推荐英文），不要使用中文的名字（因为有的机器对中文支持不太好，有可能出现链接的错误，你自己以为正确的东西在别人看来有可能是错的）。三、创建站点教学过程1、选择“窗口”/“文件”命令打开“文件”面板2、展开文件一项，选中站点，然后再选编辑站点3、点击“新建”未命名站点1的站点定义为本地信息站点名0）：未在gi1本地根文件夹0）:D5M名站点K-二3回自动即本地文件碉默UStt文件夹a）：I|。站点名称（N）处填上你要建立的站点的名称，这个名字只起着识别的作用，与网站发布后真实的名字无关；本地根文件夹（F）处选择设置网站在本地硬盘的位置，点击后面的文件夹图标可以选择硬盘的任意目录作为存放网站文件的目录；缓存可以使文件的移动、改名、查找等站点管理的操作速度大大提升，因此建议大家在这里打上钩；其它的可以默认，当然你可以试试选择不同的，默认图像文件夹为站点默认存放图片的文件夹（以后在做网页的过程中，使用非站点内的图片时，它会提示是否把该文件复制到这个文件夹内）；HTTP地址（三）为你站点的网址。作业：建立一个名字为“我的个人网站”的站点，站点内有imagxpicturehtml三个文件夹和index.html文件，远程FTP服务器为.1,用户名教学过程为：tastelife,密码为:教学内容第三章新建文档与对象校历第三周课时4课型理论+实践教学目标通过本章的学习，用户可以掌握DreamweaverMX中文版的基本操作及一些使用技巧。如文本的编辑、修改、文本列表的创建及网页性性的基本设置等。教学方法任务驱动法作业布置制作“中国民俗文化”网站分析总结通过本章练习，让我们学会网页制作中有关文档的一些基本操作，其中包括；通过三种方法创建网页、打开现有网页文档及保存网页；文本和特殊字符的输入及编辑方法以，学会创建列表；掌握在网页中插入日期、水平线等常见网页元素的方法以，并分析其共同之处；掌握设置网页属性的方法，并了解站点设计的一些基本理念。一、编辑文本1、输入文本(1)换行利用Enter键换行：在输入文字后按Enter键，文字成段，且上下段各空一行。利用Shift+Enier键换行：如果想要将文字手动换行，中间又不能出现空白行，可以按Shift+Enter键。(2)加入特殊字符有时为了内容的需要，要在网页中插入一些键盘上没有的特殊字符，例如注册商标®、版权符©等。(3)加入批注文字在网页中加入适当的批注文字，可以使日后修改、管理网页时更加方便。由于批注只有在编辑网页时或查看原代码时才能看到，所以不必担心批注教学过程文字破坏版面。2、查找和替换文本二、设置文本属性1、文本属性栏文本属性栏也就是DreamWeaVer默认的属性栏，如下图所示，其默认状态是打开。如果不小心将属性栏关闭，则可以通过以下2种途径打开文本属性栏：(1)按快捷键CM+F3(2)选择窗口/属性命令2、设置文本格式教学过程文本格式一般包括文字的字体、字号、颜色及文本的对齐方式等。3、设置文本样式(1)、粗体、斜体，以及其也样式(2)、对齐方式(3)、段落扩展/缩进三、文本列表1、创建创建文木列表最简单的方法是通过文本属性栏上的列表按钮将光标停在文本前，单击属性栏中的无序列表按钮与有序列表，即可对文本进行无序或有序排列。2、修改属性在网页中加入文本列表后，还可以根据个人的习惯改变列表的属性，如将无序列表的实心小圆圈改成实心矩形，将有序列表的阿拉伯数字改变为英文字母等。列表属性的修改是通过列表属性对话框来完成的。在列表类型下拉列表框中，可以设置列表的类型。列表类型包括无序列表、有序列表、目录列表和菜单列表。3、创建嵌套文本列表如果想把不同级别的文本内容用列表的形式表现出来，则需要用到文本列表的嵌套。创建文本列表的嵌套，需用到文本属性栏上的段落扩展/缩进按钮。作业：1、文本录入与编辑2、文本及其格式化教学内容第四章表格处理与网页布局校历第三周课时2课型理论+实践教学目标让学生熟练掌握对表格的使用插入表格表格的基本操作设置表格属性表格的高级操作层与表格的相互转换教学方法任务驱动法作业布置制作课程表等各种表格分析总结通过本章练习，让学生学会如何利用表格来布局页面，以及表可知及其单元格的编辑与属性设置。一、在网页中插入表1、定位插入点，使用鼠标单击。2、调出“插入表”对话框，方法一：单击“对象”面板（普通）中的“插入表格”对象按钮；方法二：单击“插入”I“表格”菜单；3、确定行与列数在“行”与“列”的输入框内输入所需的数值。4、确定边距与间距在“单元格边距”与“单元格间距”的输入框内输入所需的数值。边距：指单元格内的数据（内容）与边框线的距离，默认为1个像素。间距：指相邻单元格之间的距离（包括上、下、左、右），默认为2个像素。5、确定表格宽度在“宽度”输入框内输入所需的数值，在其右边选择教学过程单位。6、确定边框的厚度在“边框”输入框内输入所需的数值。默认为1,若为0,则没有边框线（在布局时应用相当广）二、在表格中添加内容1、插入文本直接输入文本定位单元格，直接输入文本，若文本超过宽度，则自动扩展。首先是按横向自动分摊宽度，若不够，则转到下行。粘贴其它文本先将其它文本存入到剪贴板中，再将剪贴板中的内容粘贴至当前光标处。教学过程2、在单元格中插入图片与在文档中插入图片一样操作。（1）选定位，鼠标单击；然后单击“对象”面板中的“插入图像”钮或选择“插入”I“图像”菜单，弹出查找图像文件对话框；选择所需的图像文件，单击“选择”即可。三、输入外部数据Dreamweaver可接受其它程序创建的表格数据，但这些表格数据要使用定界符。定界符即单元格间的分隔符，一般有制表位、冒号、分号等。还可以是Excel文件。导入Excel文件操作方法为：启动Dreamweaver,建立一个文档（2）选择“文件”I“导入"I“Excel文档”菜单，弹出对话框。选择EXCel文件，确定即可。导入表格数据文件操作方法为：启动Dreamweaver,建立一个文档选择“文件”I“导入”I“导入表格数据”菜单，弹出对话框。（6）选择“数据文件”单击“浏览”钮，查找到所需文件，选择“定界符”后，单击“确定”钮。还可进行其它设置：“表格宽度”、“边距”、“间距”、“格式化首行”、“边框”等。四、选择单元格元素1、选择单元格用鼠标在所要选定的单元格内单击。2、选择一行将指针指向待选行的最左边，当出现黑色的向右箭头时教学过程单击。3、选择一列将指针指向待选列的最上面，当出现黑色的向下箭头时，单击。4、选择整个表先在表中单击，再选择状态左边的粗黑标记“table”教学内容第四章表格处理与网页布局校历第五周课时6课型理论+实践教学目标1、认识布局模式2用布局视图布局页面3、掌握进入和退出页面模式的方法4、创建布局表格和布局单元格5、掌握布局表格和单元格属性教学方法任务驱动法作业布置制作“世锦赛”网站分析总结通过本章练习，让学生学会如何利用表格来布局页面，以及表可知及其单元格的编辑与属性设置。教学过程创建页布局的一种常用的方法是使用HTML表格对元素进行定位。但是，使用表格进行布局不太方便，因为最初创建表格是为了显示表格数据，而不是用于对Web页进行布局。为了简化使用表格进行页面布局的过程，Dreamweaver提供了“布局”模式。在“布局”模式中，您可以使用表格作为基础结构来设计页，同时避免使用传统的方法创建基于表格的设计时经常出现的一些问题。一、绘制布局单元格和表格绘制布局表格，请执行以下操作：1、确保您处于“布局”模式中。2、在“插入”栏的“布局”类别中，单击“绘制布局表格”按钮。3、鼠标指针变为加号(÷)o4、将鼠标指针放置在页上，然后拖动指针以创建布局表格。绘制布局表格，请执行以下操作：1、确保您处于“布局”模式中。2、在“插入”栏的“布局”类别中，单击“绘制布局单元格”按钮。3、鼠标指针变为加号(+)<.4、将鼠标指针放置在页上，然后拖动指针以创建布局单元格。二、绘制嵌套布局表格将一个布局表格绘制在另一个布局表格中，创建嵌套表格。对外部表格所进行的更改不会影响嵌套表格中的单元格；例如，当更改外部表格中行或列的大小时，内部表格中单元格的大小不发生变化。还可以插入多级嵌套表格。嵌套布局表格的大小不能超过包含它的表格。教学过程三、将内容添加到布局单元格1、将插入点放置在您要添加内容的布局单元格中。2、执行下列操作之一：在单元格中键入文本，当进行键入时，单元格将按需要自动扩展。也可粘贴从其他文档复制的文本。在“插入”栏的“常用”类别中，单击“图像”按钮上的箭头，然后选择“图像”。教学过程一、实训重点：1、掌握布局网页在创建、选择、设置、存储与应用方面的特点；2、掌握布局网页的制作方法；难点分析：1、布局中的表格嵌套一、实训目的与要求：目的：能过上机实训让学生学会使用布局，让学生加深理解布局；要求：做出布局网页四、实习内容：基本知识：1、布局的基本操作练习五、实训中可能产生的问题预测及处理：此次实训最容易出现的问题如下：问题：创建布局单元格时处理：；教学内容第五章图像插入与编辑校历第六周课时6课型理论+实践教学目标通过本章的学习，用户可以掌握DreamWeaVerMX中网页所支持的图像格式、插入图像、修改图像属性、利用外部图像处理软件编辑图像，以及创建图像映射等内容。教学方法任务驱动法作业布置制作“七彩云南”网站分析总结通过介绍网页中图像的分类及其特点，引入图像的基本概念，添加图像的基本方法及其属性的设置。此外还介绍了创建图像的变换效果以及使用其他工具编辑图像的方法。教学过程二、网页图像简述计算机领域中，图形基本上分为位图图像和矢量图形两大类，而网页图像也就是这两类图形中的一部份。明确两者之间的差异，对创建和编辑网页图像很有帮助。二、插入图像1、插入一般图像在网页中插入一般图像的方法很简单，首先将光标置于要插入图像的位置，单击插入栏中插入图像图标，或选择插入、图像命令，或是按下Clr1+A11+I组合键,无论选择上面的哪种方法都将弹出选择图像来源对话框。在此对话框中选择要插入网页的图像名，单击确定按钮，此时图像插入到网页中。2、插入网页背景图像如果想使网页得到美化，可以在网页中加入背景图像。加入背景图像的方法与设置网页背景图像的方法一样三、设置图像属性当在网页中选中一幅插入的图像时，在属性面板将反映图像的属性，如下图所示。在图像属性面板上，可以定义图像的多种属性1、定义图像大小2、图像的排列方式3、设置图像间距4、设置图像边框5、用文字代替图像6、图像编辑器四、创建图像映射1、映射图映射图指的是将一个图像划分为若干区域，并将每个区域链接到不同的网页、URL或其他的资源中，这样的一个图像叫做映射图。2、图像映射面板有关图像映射的操作大多数都是在图像映射面板中进行的。如果要打开图像映射面板，在图像属性面板上单击图像映射工具上的3个按钮口、。和B之一，并在图像上画出相应的形状，将弹出图像映射面板3、定义热点当在网页中插入了图像之后，可以利用热点工具为该图像定义热点，热点教学过程的基本形状有矩形、圆形和多边形3种。利用不同的工具，可以定义不同的热点形状。4、编辑热点定义热点后，就可以编辑热点。在DreamWeaVerMX中，热点的编辑包括改变单个热点的形状、大小，以及多个热点的对齐方式、热点间高与宽的设置等操作。5、为热点建立链接设定一个热点的轮廓后，就可以着手建立该热点的链接关系了。热点可以链接到不同的对象上，如一个已经设计好的网页、一个图像或一个动画等。作业：1、图像的插入2、图像映射图3、WEB相册一、实验目的：1、通过本例要求掌握常见的图像格式及图像的插入方法。2、能够修改图像属性，利用外部图像处理软件编辑图像。3、创建图像映射，建立WEB相册。教学过程二、实验器材：多媒体计算机。三、学时分配：2学时。四、实习地点：校内多媒体机房。五、实习内容：基本知识：1、了解网页图像的格式及常见的图像编辑软件的使用2、网页中图像插入及编辑练习3、映射图的创建及编辑4、WEB相册的创建及编辑实例设计：1、图像的插入2、图像映射图3、WEB相册教学内容第六章创建超级链接校历第七周课时6课型理论+实践教学目标1、熟练掌握设置文本超级连接的方法；2、熟练掌握设置图片超级连接的方法；3、熟练掌握设置图片热点超级连接的方法；教学方法任务驱动法作业布置各种链接的应用分析总结本章介绍链接的基本概念，其中包括URL地址、绝对路径和相对路径的概念及其区别。详细阐述了风种常见的超级链接的形式，通过活动掌握多种超级链接的创建方法，并且设置超级链接的目标窗口及文本提示。教学过程一、超级链接1、概念：超级链接简称链接，是指从一个网页指向一个目标对象的连接关系，它包含两个部分，即链接源和链接目标。2、超级链接的作用可以把一个网站的网页或多个网站连接起来，点击链接时从一个网页跳转到另一个网页，或者跳转到页面指定的位置。也正是超链接的存在是人们改变了以往的顺序阅读习惯，使整个Internet上的信息连为一个整体。分类、绝对路径：是一个完整的URL,包括协议、域名、路径，如，常用于链接外服务器上的文件。相对链接：只有路径，没有协议、域名，它又分为站点根目录相对路径和文档相对路径。a点根目录相对路径指从站点的根文件夹到文档的路径如b文档相对路径指和当前文档所在的文件夹相对的路径，它使用较多。如Jimage/bg.jpg。锚点：指在网页中对某个位置的标记，llop,jxgc.htm#top,用于转移到指定网页的指点位置。二、各种链接的功能和实现方法。1导航链接：实现站点内文档的链接。实现方法：a、向文件图标链接文档：将“属性”检查器的“链接”域右边的“指向文图标拖动到站点窗口的文档中。b、性检查器：选中添加链接的网页元素，点击属性面板中的“浏览图标。2、目标选择_blank在新的未命名的浏览器窗口中加载链接文档。.parent在父框架页或包含该链接的框架窗口中加载链接文档。如果包含链接的框架不是嵌套的，则链接文档将加载到整个浏览器窗口中。_self将链接文档加载到与链接相同的框架或窗口中，该目标是默认值，所以通常您不需要指定它。_top将在整个浏览器窗口中加载链接文件，同时移除所有框架。一个网站中，第一级链接或者导航链接选择_self,第二级链接和友情链接选择JMank。3锚点链接：链接到文档中的指定位置。链接到文档中的指定位置：在需要插入锚的地方，点一下光标，然后单击教学过程常用面板上的命名锚记工具。在文档中选取要创建链接的网页元素，点击属性面板中的“指向文件”图标，并将它拖动到您需要链接的锚记处，也可在链接文本框中输入锚点名字，W（op,也可链接到其他网页的锚点上，11jxgc.htm#top）4空链接：是一个无指向的链接，通常用于为页面上的对象或文本附加行为5.创建javascript脚本链接：创建步骤：教学过程在文档窗口中选取文本，图象或对象，在“属性”检查器的“链接”栏中键入javascripi:,其后紧接javascripl代码或函数调用。例如在链接栏中键入javascripi:alertC哈哈你上当了）创建一个链接，点击链接后就会出现一个警告框。作业：1、基本操作2、多彩文字链接教学内容第八章插入多媒体元素校历第八周课时2课型理论+实践教学目标1、掌握在网页中插入FIaSh元素的基本方法；2、掌握FlaSh相关属性的设置；教学方法任务驱动法作业布置在相应页面插入各种Flash元素分析总结本章主要通过三个活动的展开，介绍了在网页中插入FlaSh元素的方法，其中包括常见的FIaSh形式：FIaSh动画；FlaSh按钮；FlaSh文本等。介绍了在网页中添加视频和音效的方法，以及其他多媒体元素的插入，其中包括ACtiVCX控件、PIUgin插件、JavaApplet等。新课内容：在Dreamweaver中可以将以下媒体文件插入到网页：Flash和Shockwave影片、QuickTime、AVI、JavaappletActiveX控件以及各种格式的音频文件。一、添加Flash动画SWF格式的Hash文件，SWF文件是Flash(.a)文件的压缩版本，此文件可以在浏览器中播放并且可以在Dreamweaver中进行预览，但不能在Flash中编辑此文件。在“文档”窗口的“设计”视图中，将插入点放置在要插入影片的地方，然后在“插入”栏的“常用”类别中，选择“媒体”，然后单击“插入Flashw图标。或选择“插入”>“媒体”>“Flashwo二、创建和插入Flash按钮在“设计”视图或“代码”视图中工作时，可以在文档中创建和插入Flash教学过程按钮。在“文档”窗口中，将插入点放置在您要插入Flash按钮的位置。打开“插入Flash对象”对话框，在“插入”栏的“常用”类别中，选择“媒体”，然后单击“Flash按钮”图标。若要修改Flash按钮对象，在“文档”窗口中，单击Flash按钮对象以选择它。可以使用属性检查器修改按钮的HTML属性，例如宽度、高度和背景颜色。若要对内容进行更改，双击Flash按钮对象。在属性检查器中单击“编辑”。三、创建和插入Flash文本创建和插入Flash文本与Flash按钮类似。四、插入Shockwave影片Shockwave作为Web上用于交互式多媒体的Macromedia标准，是一种经压缩的格式。教学过程五、添加视频在Dreamweaver中可以通过不同方式和使用不同格式将视频添加到Web页面。视频可被下载给用户，或者可以对视频进行流式处理以便在下载;它的同时播放它。六、嵌入声音文件嵌入音频将声音直接并入页面中，但只有在访问站点的访问者具有所选声音文件的适当插件后，声音才可以播放。七、插入ActiveX控件可以在页面中插入ActiveX控件。ActiveX控件（以前称作OLE控件）是可以充当浏览器插件的可重复使用的组件，有些像微型的应用程序。八、插入Javaapplet可以使用Dreamweaver将JaVaaPPlel插入HTML文档中。Java是一种编程语言，通过它可以开发可嵌入Web页中的小型应用程序。s"width="100"height=,230"><paramname="imagevalue="1.jpg,><applet>注：插件必须与所在网页在同目录九、插入图像查看器作为图片之间互相交换方法：插入”>“媒体”>“图像查看器”，“窗口”>"标签选择器”教学过程bgColor:设置图像检看器的背景颜色。captionCo1or:设置图片的标题颜色。CaptionFont:设置图片标题的字体。CaPtionSkize:设置图片标题的字体大小。frameCo1or:设置边框的颜色。frameShow:设置是否显示边框。frameThickness:设置边框的宽度。imageCaption:设置图片的标题。imagel1RLs:指定图片的地址。ShowControls:设置是否显示控制台。SlideAUtoPlay:设置是否自动播放。SIideDelay:设置图片播放的延迟时间。SIideLOoP:设置图片是否循环播放。Iitle:设置图像检看器的标题。TtleColor:设置图像查看器的标题颜色。IitleFont:设置图像查看器的标题的字体。IitleSize:设置图像查看器的标题的字体大小。transitionsType：设置图片切换的模式。教学内容第七章建立框架网页校历第八周课时4课型理论+实践教学目标1、理解框架网页的基本原理；2、掌握新建框架网页的两种方法；教学方法任务驱动法作业布置建立框架网页分析总结本章主要通过四个活动的展开，让我们了解框架的基本概念，掌握框架网页的创建、调整、删除等基本集操作，能区分框架和框架集中的文件，并能区别保存。能够利用“属性”面板设置框架属性及相关的链接属性。掌握创建无框架内容及内嵌式框架的基本方法。教学过程一、框架与框架集的概念框架：是浏览器窗口中的一个区域，它可以显示与浏览器窗口的其余部分中所显示内容无关的HTML文档。框架集：是HTML文件，它定义一组框架的布局和属性，包括框架的数目、框架的大小和位置以及在每个框架中初始显示的页面的URL。框架集文件本身不包含要在浏览器中显示的HTML内容，但noframes部分除外；框架集文件只是向浏览器提供应如何显示一组框架以及在这些框架中应显示哪些文档的有关信息。二、框架的用途最常见用途就是导航。一组框架通常包括一个含有导航条的框架和另一个要显示主要内容页面的框架。三、框架和框架集工作流程要在浏览器中查看一组框架，请输入框架集文件的URL；浏览器随后打开要显示在这些框架中的相应文档。通常将一个站点的框架集文件命名为index.htm,以便当访问者未指定文件名时默认显示该名称。样例说明四、创建框架和框架集1、使用预定义的框架集通过预定义的框架集，您可以很容易地选择您要创建的框架集类型。创建预定义的框架集有两种方法：(1) 插入栏(2) “新建文档”对话框创建新的空框架集。2、设计框架集可以通过向窗口添加"拆分器"，在DreanIWeaVer中设计您自己的框架集。 创建框架集操作：选择“修改”>“框架集”，然后从子菜单选择拆分项 框架拆分操作：要拆分插入点所在的框架，从“修改”>“框架集”子菜单选择拆分项。请在按住Alt键的同时拖动框架边框。 删除框架操作：将边框框架拖离页面或拖到父框架的边框上。调整框架大小操作：五、嵌套框架集在另一个框架集之内的框架集称作嵌套的框架集。六、框架和框架集的编辑1、选择框架和框架集要更改框架或框架集的属性，首先要选择您要更改的框架或框架集。您既可以在“文档”窗口中选择框架或框架集，也可以通过“框架”面板进行选择。教学过程2、在框架中打开文档将插入点放置在框架中，选择“文件”>“在框架中打开"，选择要在该框架中打开的文档，该文档随即显示在框架中。3、框架和框架集文件浏览器中预览框架集前，必须保存框架集文件以及要在框架中显示的所有文档。可以单独保存每个框架集文件和带框架的文档，也可以同时保存框架集文件和框架中出现的所有文档。4、控制具有链接的框架内容九、Iframe的使用iframe也称作嵌入式框架，嵌入式框架和框架网页类似，它可以把一个网页的框架和内容嵌入在现有的网页中。在DreamWeaVerMX开始，可以可视化操作iframe,不再需要第三方插件。1、插入iframe1.点击“插入面板”的“标签选择器”教学过程2 .在“标签选择器”对话框中，选择iframe标签，点击“插入”按钮。3 .在“标签编辑器-IframJ对话框中，根据面板提示操作。最基本的两项是“源”和“名称”。2、设置链接在某个iframe中打开选中链接，在属性面板中的“目标”项，手工输入目标iframe的“名称”。3、iframe透明为了使iframe内容和网页背景相同，需要使iframe透明。在“标签编辑器-Iframe”对话框中，选择“浏览器特定的”项目卡，选中“允许透明”。教学内容第八章插入多媒体元素校历第九周课时4课型理论+实践教学目标