2022年Dreamweaver网页制作教案 .pdf

上传人:C****o 文档编号:33386085 上传时间:2022-08-10 格式:PDF 页数:41 大小:7.02MB
返回 下载 相关 举报
2022年Dreamweaver网页制作教案 .pdf_第1页
第1页 / 共41页
2022年Dreamweaver网页制作教案 .pdf_第2页
第2页 / 共41页
点击查看更多>>
资源描述

《2022年Dreamweaver网页制作教案 .pdf》由会员分享,可在线阅读,更多相关《2022年Dreamweaver网页制作教案 .pdf(41页珍藏版)》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。

1、认识 Dreamweaver一、学习目的理解 Dreamweaver ,学会应用Dreamweaver制造网页。二、学习内容Dreamweaver的根本学问。【学习步骤】1、 Dreamweaver的功用Dreamweaver能够像普通的字处置软件一样编辑Internet 上以 HTML 格式保管的一切文件,也就是网页;它支持动态HTML ,能够在网页中产生动画;还能够在网页中插入各种插件,以产生特殊效果。Dreamweaver可用于管理站点, 它像文件夹一样创立和翻开站点,用不同的方式查看站点中各个网页之间的关系,调整站点的组织构造,使整个站点条理明晰。2、 Dreamweaver的窗口(1

2、) 标题栏(2) 菜单栏(3) 工具栏(4) 视图栏(5) 文件夹列表(6) 工作区3.网页工作区的三个视图方式选项它们分别是 “ 普通 ” 、“HTML ”“预览 ” ,它们之间的互相切换非常容易完成的。普通视图方式是Dreamweaver对网页所见即所得编辑方式的最佳表现,在此方式下,能够名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 1 页,共 41 页 - - - - - - - - - 像在 Word 中那样直接停止各种编辑操作,完成网页编辑的一切功用。HTML 视图实践上

3、是一个文本编辑器,其中给出了普通视图方式下所件网页的HTML 代码。在这里能够用菜单命令停止复制、粘贴、删除、查找等操作。关于HTML 言语中的不同成分均用不同的颜色显现,这样比拟容易辨别各种语法成分。为了在制造网页过程中可以随时查看网页的实践效果,Dreamweaver提供了预览视图方式。4.装置 dreameaver的办法装置及注册5.关闭 dreameaver 6.保管网页的办法三、小结Dreamweaver的根本学问树立一个简单的站点一、学习目的理解 Dreamweaver ,学会应用Dreamweaver制造网页。二、学习内容Dreamweaver的根本学问;树立一个简单的站点;停止

4、简单的网页编辑。【学习步骤】1、创立空白站点。执行菜单命令 “ 文件 ”“新建 ”“站点 ” ,就会呈现8 中站点导游。出于简单,可选择 “ 空站点 ” 按钮,并在 “ 指定新站点的位置” 框中填入站点的位置。在指定新站点的位置后,单击“ 肯定 ” 即建成一个空站点。2、树立一个简单的文字网页树立了一个站点之后,就应该在站点中参加网页了。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 2 页,共 41 页 - - - - - - - - - 创立空白网页执行菜单命令 “ 文件 ”“新

5、建 ”“网页 ” ,就会呈现一对话框,选择“ 普通网页 ”模板并单击 “ 肯定 ” 即树立了一个新的空白页面。 网页工作区的三个视图方式选项它们分别是 “ 普通 ” 、“HTML ”“预览 ” ,它们之间的互相切换非常容易完成的。普通视图方式是Dreamweaver对网页所见即所得编辑方式的最佳表现,在此方式下,能够像在Word 中那样直接停止各种编辑操作,完成网页编辑的所有功用。HTML 视图实践上是一个文本编辑器,其中给出了普通视图方式下所件网页的HTML 代码。在这里能够用菜单命令停止复制、粘贴、删除、查找等操作。关于HTML 言语中的不同成分均用不同的颜色显现,这样比拟容易辨别各种语法

6、成分。为了在制造网页过程中可以随时查看网页的实践效果,Dreamweaver提供了预览视图方式。 输入文本网页中最根本的也是最重要的局部就是网页中由文本构成的内容,因而制造网页首先要从文本输入开端。3、设置网页中文字的字体、颜色、大小和效果在文本开端处按下鼠标左键,不放手拖到完毕处,选择要设置的文本块。执行菜单命令 “ 格式 字体 ” 。在“ 字体 ” 对话框中,单击 “ 字体 ” 选项卡。在字体选择窗口中,选定所需求的字体,再肯定文本的字型、大小、颜色、效果等。按“ 肯定 ” 即可。4、 网页编辑名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - -

7、 - - - - 名师精心整理 - - - - - - - 第 3 页,共 41 页 - - - - - - - - - (1) 将图片插入网页(2) 将剪贴画插入网页(3) 参加 GIF 动画(4) 保管嵌入式图形文件(5) 运用图片工具栏(6) 设置图片属性(7) 设置网页背景(8) 设置超链接(9) 应用框架(10)表单的运用5、小结简单站点的树立过程设计限时自动关闭的网页一、学习目的理解 Dreamweaver ,学会应用Dreamweaver制造网页。二、学习内容Dreamweaver的根本学问; 用 Dreamweaver设计限时自动关闭的网页。【学习步骤】设计页面时,经常会从一个

8、页面翻开一个子窗口以供阅读者查看。通常,这种子窗口中的内容一经阅读者看过,关于阅读者而言就不再需求,而他们常常会遗忘关掉这些小窗口,致使许多的阅读器窗口翻开着,耗用大量的资源。因而我们能够将子窗口设计成经过一段时间后能够自动关闭的方式。1. 在本地站点中生成一个Smlple 文件夹。2. 在 Smlple 文件夹中,生成名为Index.html以及名为 firstpage.html的文件。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 4 页,共 41 页 - - - - - - -

9、 - - 3. 双击 Index.html ,翻开该文档,进入到文档的设计视图窗口中。4. 单击菜单View/Head Content,显现文档的头部区域。5. 单击设计视图窗口中的文档头部窗格。选择菜单Insert/Invisible Tags/Script,翻开 Inset Script对话框。如图所示,在Language 下拉列表框当选择javascript选项,并在Coctento 文本框中输入“setTimeout(self.close() ,15000) ” 。单击 OK 按钮,完成在文档头部插入15 秒后自动关闭子窗口的脚本。在代码中, 15000 表示 15000 毫秒,也即1

10、5 秒,也能够依据需求将之修正为本人需求的时间毫秒数。设置时间6. 在文档窗口中输入“ 关闭 ” 字样,在属性面板上的Link 文本框中输入 “#”,将其设置为一个空链接。7. 在状态栏左端的快速标志编辑器上,单击标志按钮。选中“ 关闭 ” 链接,然后按下Ctrl+T 组合键,翻开快速标志编辑器,进入到快速标志编辑器的编辑标志形式。然后在“”前输入 “onclick=selfclose()”。 如图所示,设置终了,单击OK 按钮,确认操作。这样在Index.html被作为子窗口翻开后,单击该链接就能够立即关闭该子窗口。8. 保管 Index.html 文件,并退出index.html的 Dre

11、mweaver窗口。9. 如今开端设计fristpage.html页面。在本地站点的Smlple 文件夹中,双击 fristpage.html ,翻开该文档,进入到文档的设计视图窗口中。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 5 页,共 41 页 - - - - - - - - - 10. 在文档中输入 “ 单击这里翻开会自动关闭的子窗口” 字样。然后在属性面板上的 Link 文本框中输入 “#”,将之设置为空链接。11. 能够经过为该链接应用Open Browser Win

12、dow行为来设置单击链接时翻开Index.html窗口,不过更便当的办法是应用快速标识编辑器。办法是首先将插入点放置到链接中,然后在状态栏左端的标识选择器上,单击标识按钮,选中整个链接。然后按下Ctrl+T 组合键,翻开快速标志编辑器,进入到快速标志编辑器的 编辑标识形式。再在“”前输入 “onclick=window.open(index.html,null,width=200px,height=200px)”(如图所示)。设置终了,按下回车键,确认操作。设置单击链接时翻开12. 上述操作就完成了本例的设置。能够单击菜单用File/save ,保管所做的工作。然后按下F12 键,在阅读器中预

13、览页面效果。三、小结用 Dreamweaver设计限时自动关闭的网页用 Dreamweaver做会挪动的文字一、学习目的理解 Dreamweaver ,学会应用Dreamweaver制造网页。二、学习内容Dreamweaver的根本学问; 用 Dreamweaver做会挪动的文字。【学习步骤】一、根本语法名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 6 页,共 41 页 - - - - - - - - - 啦啦啦,我会挪动耶!文字挪动属性的设置:方向 #=left, right 啦

14、啦啦,我从右向左移!方式 #=scroll, slide, alternate 啦啦啦,我一圈一圈绕着走!循环 #= 次数;若未指定则循环不止(infinite) 啦啦啦,我只走 3 趟哟!名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 7 页,共 41 页 - - - - - - - - - 速度 啦啦啦,我走得好快哟!对齐方式 (Align) #=top, middle, bottom 啦啦啦,我会挪动耶!对齐上沿、中间、下沿。二 、小结用 Dreamweaver做会挪动的文字用

15、 Dreamweaver创立导航条一、学习目的理解 Dreamweaver ,学会应用Dreamweaver制造网页。二、学习内容Dreamweaver的根本学问; 用 Dreamweaver创立导航条 。【学习步骤】一个网站的不同页面运用了同一导航条。经过统一导航条的办法,我们能够完成网站作风的统一,同时也便当了阅读者在不同页面间的跳转。用Dreamweaver可作出各种比拟复杂的导航条。网页上的导航条可由一个或几个局部组成,每个局部均由各种图像构成,能够链接到不同的网页页面。在Dreamweaver中每局部中最多可设四个状态下的图像。一开端是一个初始图像,当鼠标挪动到导航条部位上时则显现另

16、一个图像,还能够设置当鼠标点击后的初始图像,以及鼠标点击后当鼠标再次挪动到这个部位上的图像。普通地,每部位只设一到两种状态的图像。由于图像太多了,会影响网页页面的访问、阅读的速度。导航条制造办法:挪动光标到需求导航条的中央,单击主菜单栏的“InsertNavigation Bar” 子命令,或直接单击 Objects 面板上的图标,弹出“Insert Navigation Bar”对话框,如下图,此时我们能够停止各种设置来完成上述功用:名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第

17、8 页,共 41 页 - - - - - - - - - 在“Element Name ” 项后的文本框填入这个部位的命名,也能够不填,这时Dreamweaver 3将自动给它命名。在 Dreamweaver中每局部中最多可设四个状态下的图像:“Up Image” 项是该部位的初始图像,在其后文本框填入已准备好的图像的地址,或点击右边Browse 按钮来选择。每个部位可只设置Up Image项,其下的 “Over Image” 、“Down Image ” 和“Over While Down Image ” 三项能够不设置。其中,“Over Image”项是鼠标挪动到这个部位上时显现的图像(本

18、例当选择 );“Down Image ” 项是鼠标点击该部位后显现的初始图像; “Over While Down Image ” 项是鼠标点击后当鼠标再次挪动到这个部位上时显现的图像。留意:Element Name项和 Up Image 项是必需的,一切的调用图像都会在系统的提示下保管在Dreamweaver 3文件夹中,以便调用。三 、小结用 Dreamweaver创立导航条用 Dreamweaver创立导航条一、学习目的理解 Dreamweaver ,学会应用Dreamweaver制造网页。二、学习内容Dreamweaver的根本学问; 用 Dreamweaver创立导航条 。【学习步骤】

19、名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 9 页,共 41 页 - - - - - - - - - 当然,还可给该部位设置超级链接:在下面的“When Clicked Go To URL ” 项后文本框填入链接到的文件的地址, 或单击 Browse 按钮选择, 当鼠标挪动到这个部位上时,在状态栏中能够看到链接到的地址。When Clicked Go To URL项后有一个下拉选框,这是设置超级链接的目的。接着是 “Options ”项,若选中 “Preload Images ”

20、选框,则阅读者阅读页面时,一切图像将在页面下载的同时全部下载,整个页面翻开的速度会慢些,但图像间转换会没有延迟,选中它。反之,不选Preload Images选框,则页面下载的同时只下载初始图像,其它图像按次第下载,整个页面翻开的速度较快,但图像间转换会有延迟。 若选中 “Show “Down Image ”Initially”选框,则将 Down Image设为初始图像。 此时,Over While Down Image项改为鼠标挪动到这个部位上时显现的图像,Up Image 项改为鼠标点击该部位后显现的初始图像, Over image项改为鼠标点击后当鼠标再次挪动到这个部位上时显现的图像。

21、最下面是 “ Insert”项,选框中有 Horizontally( 程度 )和 Vertically( 垂直 )两个选项。 选中 Horizontally为导航条程度展开,选中Vertically 为导航条垂直展开。 Use Table 项,选中后, Dreamweaver自动生成 HTML代码将导航条各部位用表格隔开。当一个部位设置完成后,要添加其他部位,可点击对话框上方的“ ” 按钮,可按上面的步骤停止新部位的设置。要删去某一个部位,在“Nav Bar Elements ” 选框中先选中,再点击对话框上方的“ ” 按钮即可。另外,运用设置导航条图像中的高级功用,可改动文档中基于当前按钮下

22、的其他的图像。在默许下,单击导航条中的元素时,一切导航条中元素都会自动地返回原来默许的状态。若想设置被选中图像的上浮或是下沉的不同效果时,可用导航条中的高级功用:在“Behaviors ”面板中的 “Actions ”标签页,单击其上面的“ ” 号按钮,在弹出的菜单当选择“Set Nav Bar Image ”命令,弹出 Set Nav Bar Image 对话框中 (见图 2),选择“Advanced”标签页,对高级属性停止设置。其中,若选择“Over Image or over while Down Image”项,则当鼠标划过图片时显现其上面的图片,有上浮或是下沉的效果,并在 “Also

23、 Set Image ”文本框当选择要显现的图片,同时在其下面的“If Down To Image File”当选择当鼠标按下时要显现的图片途径;若选择“Down Image” 项,则当阅读者单击所选图像后,显现另外的图片。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 10 页,共 41 页 - - - - - - - - - 图 2 存盘后,按F12 键测试所作导航条。三、小结用 Dreamweaver创立导航条用 Dreamweaver创立状态栏一、学习目的理解 Dreamwe

24、aver ,学会应用Dreamweaver制造网页。二、学习内容Dreamweaver的根本学问; 用 Dreamweaver创立状态栏 。【学习步骤】状态栏制造办法:设置阅读器状态栏中的文本信息,这一功用可在阅读网页面时,在阅读器窗口底下状态栏中显现相关信息。其办法 :选择 “Behaviors ”面板中的 Actions 标签页的 “Set Text of Status Bar”命令 ,在弹出的 Set Text of Status Bar 对话框中如图3,在“Message”的文本框中输入所在状态栏中显现的文档,按“OK ”按钮完成。再用按 F12 快捷键来测试 ,可看到其运转的效果。名

25、师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 11 页,共 41 页 - - - - - - - - - 当然可用 JavaScript 言语在 Message 文本框中参加些函数,让文本显现功态的效果。三、小结用 Dreamweaver创立状态栏用 Dreamweaver的模板创立网页一、学习目的理解 Dreamweaver ,学会应用Dreamweaver制造网页。二、学习内容Dreamweaver的根本学问; 用 Dreamweaver的模板创立网页。【学习步骤】1、创立模板页

26、面最简单的方法是将一个网页另存为模板文件,经过执行命令:File Save as Template ,DreamWeaver会在网站根目录中树立一个模板文件夹 Templates 来保管该模板。当然,也能够新建一个模板: Window Templates, 会呈现的 Templates 面板, 单击右下角的New Template按钮,输入文件名,就树立了一个空模板;再单击Open Template按钮翻开该模板,保管后自动寄存于网站模板文 Templates 中。新建、翻开的模板页面和普通的网页没什么两样,同样能够参加表格、层、图片、动画、脚本,设置页面属性等。举例:这里以制造一个模板为例来

27、阐明。在该页面中,我们希望左侧的网站标识图和底部的导航图呈现在每个页面中。其中标识图由两幅图片叠加而成,导航图上的文字“ 最近更新 ” 、“ 在线阅读 ” 、“ 打包下载 ” 等划分红几个热辨别别链接到不同的文件,它们在每个页面中都不变。右上部的主页面区和左下角弹出式选单按钮下面的页面阐明则各不相同。为了坚持页面整洁,我们用表格来布置这些元素。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 12 页,共 41 页 - - - - - - - - - 精确地说它只是一个没有可编辑区域的

28、“ 准模板 ” ,下面再设定可编辑区域。2、设定可编辑区域设定模板可编辑区域,普通来说有两种办法。新建可编辑区域: 选择命令: Modify TemplateNew Editable Region。在某一空白区域中单击后执行该命令即可将该区域变为可编辑区域。标志某一区域为可编辑区域:选择命令:Modify TemplateMark Selectin as Editable Region。假如某区域曾经有一些文字,并且希望在以后新建的超文本文件中局部保存其内容,先选中该区域再执行标志命令即可。取消可编辑状态:选择命令:Modify TemplateUnmark Editable Region。执

29、行该命令后会弹出一个对话框,其中有当前已有的可编辑区域列表,选中要取消的区域称号,确认即可。举例:在大片空白区中随意单击一下,执行Modify TemplateNew Editable Region命令,在弹出对话框中输入称号:Main ;选中左下角本页阐明下面的文字,执行Modify TemplateMark Selectin as Editable Region命令,输入称号:exp。能够看到可编辑区显现为浅蓝色,保管即完成模板制造。三、小结用 Dreamweaver的模板创立网页运用模板一、学习目的理解 Dreamweaver ,学会应用Dreamweaver制造网页。二、学习内容Dre

30、amweaver的根本学问; 用 Dreamweaver的模板创立网页。【学习步骤】1、依据模板新建页面命令: File New From Template。弹出对话框,从模板列表当选取模板,呈现的新页面中除可编辑区外均有淡黄色背景,是不能停止修正的局部。空白的Main 编辑区可直接停止插入表格、文字、图片等操作,Exp 编辑区保存有原来的文字,修正或重新编辑均可。2、对一个曾经有内容的页面应用模板名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 13 页,共 41 页 - - - -

31、 - - - - - 命令: Modify TemplateApply Template to Page。选择模板后还会弹出一个对话框,让您选择现有的孤立内容保管到哪个可编辑区域(Choose Editable Region for Orphaned Content)。要是不想保存则能够选择 “ ( none )” 。举例:我们先新建一个普通页面,输入:“CIW电脑工作室 ” ,执行 Modify TemplateApply Template to Page 命令,选择模板test ,现有内容保管区域选择Main ,确认后可看到页面自动变成了模板页的方式,而“CIW电脑工作室 ” 这一行字就呈

32、现在主编辑窗口中。3、更新模板以全面更新站点基于某一模板树立了一些页面后,对模板停止修正后保管时,就会自动弹出一个对话框,列出一切运用了该模板的页面,讯问能否要更新。另外一种办法是执行Modify TemplateUpdate Pages命令。从 Update Pages对话框当选择一个站点或站点的某一种模板(同一站点中能够运用多个模板),单击右侧的Start 按钮,软件会自动搜索与模板相关联的网页并停止更新。十分便当!举例: Test 模板左侧图形中的“ 读书破万站 ” 图片是用一个图层叠加在另一幅图片之上的,如今不想要它,同时还想将一切页面中的该图片均删除。就能够翻开模板test.dwt

33、,删除该图层,保管模板,单击右侧的“Update ”按钮即可。留意:新建和运用模板前需定义站点。办法是,执行命令:Site Define Sites ;指定站点称号和本地根目录( Local Root )。模板运用的是相对途径,假如没有指定网站在本地的位置,软件就不能精确找到并保管模板文件;并且应用模板新建和更新页面时,页面中的超链接也不能随页面文件保管位置的不同而相应变化。三、小结用 Dreamweaver的模板创立网页用 Dreamweaver 中插入背景音乐一、学习目的理解 Dreamweaver ,学会应用Dreamweaver制造网页。二、学习内容Dreamweaver的根本学问;

34、用 Dreamweaver 中插入背景音乐。【学习步骤】名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 14 页,共 41 页 - - - - - - - - - 一、直接插入法1.翻开一张需求插入背景音乐的网页,在菜单中找到这样的命令: Windows - Behaviors,调出 “Behaviors ”行为面板,如下图所示(Dreamweaver MX 的面板 ):2.点击 “+”号按钮,选择 “play sound”命令,如下图:假如此命令呈反白色,不可用,请在此命令下拉列表

35、当选择“Show Even For” 命令,在此子菜单里选择“ IE 4.0 ”以上的版本,由于IE 4.0 以上的版本才支持此种格式的音乐插入办法。3.此时弹出插入文件窗口,按“Browser ”按钮选择音乐文件,当然是要阅读器支持的音乐文件格式(如 mid 、wav 、AIFF 、AU) 4.插入之后网页里会显现一个“plugin ”插件图标, 但我们还需求作进一步的调整。由于 Dreamweaver 自名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 15 页,共 41 页 -

36、- - - - - - - - 动插入了一段控制代码,便当我们定制激活背景音乐。但此功用不需求用到,那么就要把它删除。代码有两段,分别如下:代码一: 代码二:5.完成插入,此时的背景音乐还不能自动播放,点选插件图标,按“ctrl + F3”快捷键,调出属性面板,点击右下角的 “Parameters” 按钮,在弹出的窗口中停止修正,把参数“AutoStart ”后面的 “Value”缺省值 “false ”改成“true ”(如下图所示),这样就到达翻开页面背景音乐就响起的效果。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师

37、精心整理 - - - - - - - 第 16 页,共 41 页 - - - - - - - - - 我们晓得,音乐的播放是有时间长短的,假如希望它反复播放,能够把上图中的“Loop”参数值改成 “true ”。在 Dreamweaver 中插入背景音乐的几种办法屡次收到喜欢安定洋网络学院的网友的信件,信中发问如何在 Dreamweaver 中插入背景音乐,如今让我一次性向大家引见几种背景音乐的插入办法,让更多的人去控制它。6.之前翻开删除代码时我们看到了插入音乐的 HTML 标志为 ,为了让大家对它有愈加深化的理解,接下来援用一段安定洋网络学院 - 设计教室 - HTML 局部中的 “HTM

38、L言语分析 ” 中的一段, 引见一下 标志的参数:三、小结用 Dreamweaver 中插入背景音乐用 Dreamweaver 中插入背景音乐一、学习目的理解 Dreamweaver ,学会应用Dreamweaver制造网页。二、学习内容Dreamweaver的根本学问; 用 Dreamweaver 中插入背景音乐。【学习步骤】 是用来插入各种多媒体,格式能够是 Midi、Wav 、AIFF 、AU 等等,Netscape 及 新版的 IE 都支持。其参数设定较多。如下:名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整

39、理 - - - - - - - 第 17 页,共 41 页 - - - - - - - - - src=your.mid设定 midi 档案及途径,能够是相对或绝对。autostart=true能否在音乐档下载完之后就自动播放。true 是, false 否 (内定值)。 loop=true 能否自动重复播放。LOOP=2 表示反复两次, true 是, false 否。HIDDEN=true能否完整躲藏控制画面,true 为是, no 为否 (内定 )。STARTTIME= 分:秒设定歌曲开端播放的时间。如 STARTTIME=00:30 表示从第 30 秒处开端播放。 VOLUME=0-1

40、00设定音量的大小, 数值是 0 到 100之间。内定则为运用系统自身的设定。WIDTH= 整数 和 HIGH= 整数 设定控制面板的高度和宽度。(若 HIDDEN=no) ALIGN=center设定控制面板和旁边文字的对齐方式,其值能够是 top、bottom 、center 、baseline 、 left、right 、texttop 、middle 、absmiddle 、absbottom CONTROLS=smallconsole设定控制面板的外观。预设值是 console 。console 普通正常面板smallconsole 较小的面板playbutton 只显现播放按钮pa

41、usecutton 只显现暂停按钮stopbutton 只显现中止按钮volumelever 只显现音量调理按钮二、代码法: 是用来插入背景音乐,但只适用于 IE,其参数设定不多。 src=your.mid 设定 midi 档案及途径,能够是相对或绝对。autostart=true 能否在音乐档下载完之后就自动播放。true 是, false 否 (内定值 )。loop=infinite 能否自动重复播放。LOOP=2 表示反复两次,Infinite 表示反复屡次。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 -

42、 - - - - - - 第 18 页,共 41 页 - - - - - - - - - 此种办法就是直接把 标志放于网页文件的之间,设置好mid 文件的途径就行。参数的设置如文中讲解。三、插件法有些人一直没有舍弃 FrontPage 或许就由于在一些元素的插入中,Dreamweaver 没有提供功用,或者不便当。但我们晓得,Dreamweaver 支持插件,声音插入插件为我们提供了便当。插件下载: sound.mxp 下载后双击文件, 就能够直接装置了,装置完成你能够在“ 对象 ” 面板的 “Common”栏看到一个喇叭图标。直接点击此按钮,就弹出如下图所示的插入窗口:Forever :设置

43、无限循环播放Never :不循环播放,即只播放一次NO of times :设置播放的次数点击 “Browser”按钮选择好声音文件之后,按肯定完成制造。三、小结应用代码法和插件法在Dreamweaver 中插入背景音乐用 Dreamweaver在主页中制造连续的背景音乐一、学习目的名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 19 页,共 41 页 - - - - - - - - - 理解 Dreamweaver ,学会应用Dreamweaver制造网页。二、学习内容Dreamw

44、eaver的根本学问; 用 Dreamweaver在主页中制造连续的背景音乐。【学习步骤】一、坚持背景音乐的时断时续,效果很好,现引见如下,供制造个人主页的朋友们参考:首先运用标签 frameset frame. frame. frameset 将主页 (index.html) 屏幕分红上下两个帧,为了不毁坏页面规划,将上帧的高度设为 0;然后,在主页上帧放置的超文本文件(back_music.htm)中设置网站的背景音乐,最好不要设置播放界面;最后,在主页的下帧放置网站主页的主要内容(main.htm) 。这样一来,主页下帧的页面就成为主页实践的活动页面,上帧的页面在访问者的整个阅读过程中一

45、直坚持静止不动,设置的背景音乐也就不会中缀了。主页文件 index.html: htmlhead title 时断时续的背景音乐/title /head frameset frameborder=0 rows=0,*frame src=back_music.htm scrolling=no noresize frameborder=0frame src=main.htm frameborder=0noframes body pplease browse the web pages with browser that supperts frames. /p/body /noframes /fra

46、meset /html 上帧文件 back_music.htm(背景音乐为当前目录下的liang_zhu.mid, 只播放一次 ):名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 20 页,共 41 页 - - - - - - - - - htmlhead title /title /head body !-背景音乐 :-embed src=./liang_zhu.mid hidden=true autostart=true loop=0/body /html 三、小结用 Dream

47、weaver在主页中制造连续的背景音乐 DreamweaverMX制造导航下拉菜单一、学习目的理解 Dreamweaver ,学会应用Dreamweaver制造网页。二、学习内容Dreamweaver的根本学问; DreamweaverMX制造导航下拉菜单。【学习步骤】Dreamweaver从出道以来,其烦琐易用而又功用强大的“ 行为 ”(Behavior) 不断是大家所关注的热点之一。在 Dreamweaver MX(DW MX)中,对这一功用又有了扩大与改良。在 DW MX 中,行为指的是为了响应某一事情(Event) 而采取的一个操作(Action) 。其中 Event 指的是阅读器的事

48、情,比方窗口刷新、鼠标挪动等。而 Action 指的是后台响应事情的 JavaScript 代码,能够完成相应的操作,比方播放声音、翻转图片等。用 DW MX 制造导航下拉菜单是网页中经常运用的特效之一。(如图 )主要应用了DW MX 中的 “Show -Hide Layers ” 行为。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 21 页,共 41 页 - - - - - - - - - 首先制造好导航条(图 1 中的 “ 产品中心 ” 那一栏 ),随后添加一个层, 作为下拉菜

49、单将要显现的位置,并填入下拉菜单的对应栏目。接下来,翻开 “Behaviors ”面板,同时选中 “ 产品中心 ” 链接 (留意,这个时分不可以选中刚刚建好的层,否则无法应用 “Show -Hide Layers ” 行为 ),单击 “+”号,选择 “Show -Hide Layers ” ,就能够看到我们刚刚建好的层在选择项中,能够设定为躲藏或者显现(如图 )。行为的妙用主要表现在:假如我们要完成下拉菜单,关键就是让鼠标移到“ 产品中心 ” 链接上时,使层显现;而鼠标分开链接时,使层躲藏。依据这种思想,我们首先为这个层设立两个Action ,一个选择Hide ,一个选择 Show 。然后,调

50、整Event ,将 Hide Layer 的 Event 设为 OnMouseOut ,即为鼠标分开链接;而将Show Layer的 Event 设为 OnMouseOver ,即为鼠标选中链接。按“F12”预览,就可看到我们期盼的效果 。这样,平常我们觉得很神秘的导航下拉菜单就能够随便在行为中完成。还能够在导航链接上继续应用 “Swap Image ” 行为,完成鼠标点选链接时呈现图片翻转效果。行为不是一个个孤立的特效,能够由多个行为组合叠加完成复杂的功用,除了DW MX 默许设置好的行为外,我们还能够从上下载更多更酷的第三方行为,我们只需将它们直接复制到DreamweaverMXConfi

展开阅读全文
相关资源
相关搜索

当前位置:首页 > 教育专区 > 高考资料

本站为文档C TO C交易模式,本站只提供存储空间、用户上传的文档直接被用户下载,本站只是中间服务平台,本站所有文档下载所得的收益归上传人(含作者)所有。本站仅对用户上传内容的表现方式做保护处理,对上载内容本身不做任何修改或编辑。若文档所含内容侵犯了您的版权或隐私,请立即通知淘文阁网,我们立即给予删除!客服QQ:136780468 微信:18945177775 电话:18904686070

工信部备案号:黑ICP备15003705号© 2020-2023 www.taowenge.com 淘文阁