[其它语言学习]dreamweaver教程4.ppt

《[其它语言学习]dreamweaver教程4.ppt》由会员分享，可在线阅读，更多相关《[其它语言学习]dreamweaver教程4.ppt（72页珍藏版）》请在三一办公上搜索。

1、网站建设,主讲：韩维良,2010.4.10,第四章,DW 的高级应用,第一节 资源管理与库项目一、资源管理在“站点”面板组中有“资源”面板，对资源进行分类组织和管理，以列表形式显示出来。如图像类，显示出所有在该网站中的图像，无论是否使用过。当需要在网页中添加某个资源时，先在资源面板的左侧选择资源类型，然后直接从资源面板中将资源拖动到插入点所在位置。而且这样使用资源的好处是当某个资源被改变后，所有使用该资源的网页的信息都得到及时更新。如图像的编辑。,二、认识“库“项目库项目是可以在多个页面中重复使用的页面元素，被存贮为一个独立的库元素文件(.lbi)；文档 body 部分中的任意元素都可创建库项

2、目，这些元素包括文本、表格、表单、Java applet、插件、ActiveX 元素、导航条和图像等。当更改某个库项目时，所有使用该项目的页面都可以自动更新。,三、创建和编辑库项目1创建库项目创建库项目的方法：选择文档中欲存为库项目的元素；选择“窗口/资源”,将选定内容拖动到“资源”面板的“库”类别中。或者单击“资源”面板底部的“新建库项目”按钮（在“库”类别中）。或者选择“修改/库/增加对象到库”。,2、编辑库项目在“资源”面板的“库”类别中，双击欲修改的库项目。或者单击选中库项目，再单击面板下方的“编辑”按钮。然后在文档窗口中象修改HTML网页一样对其进行修改，最后在保存时，会提示是否更新

3、使用该层的所有文档。这是对多个地方重复出现的同一内容修改的一条有效途径。如：联系方式，以另存的方式多个网页，再修改库项目。,四、使用库项目1、库项目插入到网页中简易方法：将“资源”面板中“库”列表中的库项目直接拖动到文档中的合适位置。在文档中将光标移至需要链接库项目的位置。在“资源”面板的库类中，单击库项目，再单击面板底部的“插入”按钮。,2、设置插入到网页中的库项目属性选中插入的项目，在属性面板中设置。打开：打开并编辑库项目。从源文件中分离：断开与库项目的链接，成为独立的网页元素。重新创建：重新创建一个库项目。,第二节 模 板多个网页中共有的内容设置库项目然后供多个网页使用，是一种解决此类问

4、题的方法（便于修改），另外还有一种方法即模板(网页统一的服装)。模板：是为了统一网站风格而预先设计出来的一种特殊网页，具体网页基于模板创建。模板用途：可以设计出风格一致的页面，省去重复劳动部分。一次更新多个页面。从模板创建的文档与该模板保持连接状态（除非您以后分离该文档）。可以修改模板并立即更新基于该模板的所有文档中的设计。,一、创建编辑模板1创建模板方法：在“文档”窗口中打开想要另存为模板的文档，选择“文件/另存为模板”。模板文件的类型名：dwt.建完模板后，Dreamweaver会自动在站点的根目录下创建一个名为“Templates”的子目录，所有创建的模板文件都放在该目录下。模板中有两种

5、类型的区域：可编辑区域，不可编辑区域。,2创建可编辑区域可编辑模板区域控制基于模板的页面中的哪些区域可以编辑。方法：选定欲设置为可编辑区域的元素（一般是一个表格），在“常用”的“模板”中，单击“可编辑区域”，或者右击选“模板”中“新建可编辑区域”，也可以在“插入”菜单的“模板”中“可编辑区域”。,在弹出的“新建可编辑区域”对话框中，输入名称“EditRegion”即可可编辑区域新建后，Dreamweaver设计视图中会以蓝色边框突出显示,3删除可编辑区域如果已经将模板文件的一个区域标记为可编辑，而现在想使其不可编辑，即删除。方法：在文档中，选择欲更改的可编辑区域，执行“修改模板删除模板标记”。

6、或者右击选“模板”中“删除模板标记”,二、应用模板1新建基于模板的文档执行“文件/新建”命令，选择“模板”选项卡。在列表中选择想要使用的模板。2从“资源”面板中的模板创建新文档在站点的“资源”面板中，选择“模板”，右击欲应用的模板，选择“从模板新建”。然后在可编辑区域中添加内容，在网页标题区输入每一个网页的标题等。,3将模板应用到现有文档选择“文件/打开”命令，打开要应用模板的文档。在“文档”窗口中单击，然后选择“修改/模板/套用模板到页”命令。从列表中选择一个模板并单击“选择”。,三、更新模板当修改模板保存时，Dreamweaver会询问是否更新所有基于该模板的文档。如果确认，就可以修改站点

7、中所有基于该模板的文档。这一步是关键的应用点，应用模板的目的在于一方面统一网页的风格、形状，另一方面当修改所有网页都共有的成份时，只需修改模板即可。如果没有修改这个环节，体现不出使用模板的好处。例：演示案例库中的中国移动通信的模板。例：设计一个常见的二分栏网页布局，创建一个模板，并修改，体验全过程。,第三节 行为与行为面板背景：JavaScript编程实现一些动态效果（网页中移动的广告、状态栏的文字提示），但增加了难度，DW集成了一些套件，便于简单地实现此类功能。一、行为的工作原理行为是由事件（如用户移动鼠标到某个特定的对象上或者在某个对象上按下鼠标键等）和由该事件触发的动作（即对该事件的响应

8、）构成的。（在行为面板中看到这两个方面）。事件：是用户的某个操作。定义使用者的操作行为或者网页的状态。对象不同，相应的事件不同。,动作：是对用户的操作产生响应的Javascript程序片断。（即由用户操作发生某个事件时，网页中通过动作代码作出响应）。不同的事件对应不同的动作。动作是由预先编写的JavaScript代码组成的，这些代码执行特定的任务，例如打开浏览器窗口、显示或隐藏层、播放声音等。将行为附加到网页元素之后，只要对该元素发生了所指定的事件，浏览器就会调用与该事件关联的动作（JavaScript代码）。如同：面向对象编程中的事件与事件代码。,二、行为面板的应用1行为面板选择“窗口/行为

9、”菜单，显示行为面板。,“行为”面板具有以下选项：动作(+)是一个弹出式菜单，其中包含可以附加到当前所选元素（前提）的多个动作。删除(-)从行为列表中删除所选的事件和动作。上下箭头按钮将特定事件的所选动作在行为列表中向上或向下移动（改变行为动作的执行顺序）。,2应用事件每个浏览器(不同版本)都提供一组事件，这些事件可以与“行为”面板的动作（+）弹出式菜单中列出的动作相关联。在行为面板中的事件（当单击行为列表中所选事件名称旁边的箭头按钮时出现的菜单）是一个弹出式菜单，其中包含可以触发该动作的所有事件。3应用动作可以将动作附加到整个文档（即附加到body标签），还可以附加到链接、图像、表单元素或多

10、种其他HTML元素中的任何一种。,4应用行为给元素附加行为的方法：在网页上选择一个元素，在行为面板上单击“+”添加一个行为。再在左侧的列表中选相应的动作种类，以及该动作的具体参数。该动作的默认事件显示在事件栏中，如果不是所要的事件，则在事件下拉列表中选择所需的事件。例如一个图像或一个链接。若要将行为附加到整个页面，在文档窗口底部左侧的标签选择器中单击标签。,5常见行为的触发事件及其含义onMouseOver：鼠标指针移动到对象上时触发。onMouseOut：鼠标指针从对象上移走时触发。onMouseDown：按下鼠标键时触发。onMouseUp：按键抬起时触发。onClick：单击对象时触发。

11、onDblClick：双击对象时触发。onLoad：装入指定对象时触发，通常用Body对象。onUnLoad：卸载指定对象时触发。,三、编辑行为 为对象添加行为后，有时需要改变触发行为的事件，增加、删除动作或改变动作参数等，这些都属于编辑行为的操作。1更改事件Dreamweaver中设置动作时会自动创建一个事件，默认的事件有时并不是用户需要的，比如弹出消息窗口，默认事件是Onload事件，即网页加载时弹出消息窗口，但用户如果希望单击网页后弹出消息窗口，就必须更改事件为Onclick事件。,操作方法为单击“事件”栏，再单击事件旁边的下拉按钮，在事件下拉列表菜单中选择Onclick事件。事件和当前

12、选择的网页对象是相关联的，因此事件下拉列表菜单中的内容随所选网页对象不同而变化。,如果在选择了正确的网页对象后，发现所期望的事件并没有出现在事件列表菜单中，这时应尝试改变浏览器。方法是单击“+”按钮，选择“显示事件”命令，在子菜单中选择浏览器的版本，浏览器的版本越高，支持的事件越多。默认情况下，事件列表菜单中显示的都是IE4.0能够产生的事件。当找到所期望的事件后，选择该事件，对应行为面板的相应事件将会改变。,2修改行为的动作参数已经设置的行为，可以改变动作参数。只要双击该行为对应的“动作”栏，即可打开该动作的参数设置对话框，在对话框中修改各项参数。,添加行为按钮,删除行为按钮,事件列表,多动

13、作时，可用来调整先后次序,双击可设置参数,3删除行为在行为面板上选取欲删除的行为，单击行为面板左上方的“-”按钮，或按Delete键。4调整行为的执行顺序一个事件可以触发多个动作，比如Onload这一事件可以触发如播放声音，打开浏览器窗口等动作。在这种情况下就存在一个动作发生的先后问题，可以通过单击行为面板中“”，“”按钮来解决这个问题。,第四节 应用行为制作动态网页一、与层有关的行为 1制作可拖动的层方法：选择对象，在行为面板上单击“+”，在行为的动作列表中选择“拖动层”。例：制作案例中的拼图页面。(选中Body，添加“拖动层”，为每个层(列表选)逐个设置拖动层效果，为其Onload事件添加

14、行为),选中Body对象，添加行为；“层”列表中选择被拖动的对象层。取得当前位置使得当对象被置于该位置并在靠近距离范围内时，会自动归位。,在高级选项卡中，提示拖动结果，加代码：alert(唔,还不错哟!),如果没有添加拖动层行为，层是不能被拖动的。,2显示隐藏层显示-隐藏层可以对页面中所有的层进行设置，使其可显示或隐藏。可通过显示-隐藏层的功能制作一个网页中常见的导航用下拉菜单。其实质是网页中共有多个菜单，分别对应有多个层，每一层即一个下拉菜单，网页加载时，这多个层全部隐藏，当鼠标移动到某菜单上时，对应层显示，并可单击其中的超链接，而其它层隐藏。,方法：选择对象，在行为面板上单击“+”，在行为

15、的动作列表中选择“显示隐藏层”。制作层菜单，其中菜单项都在层中，这种菜单很实用。如青海大学的主页（用IE打开）。,步骤：先在Body的load事件中，隐藏所有层。再在导航条或菜单项的单击或越过事件中选择显示相应的层菜单。（显示一个，隐藏其它）注意：每一个菜单项的文字须是虚链接方可添加“显示隐藏层”行为。而在每一个层中又以表格布局添加相应的超级链接。这种菜单比较常用。,3改变层的背景色改变属性可以动态改变某一对象的属性值。方法：选择对象，在行为面板上单击“+”，在行为的动作列表中选择“改变属性”。在对话框中确定欲改变的对象类型和对象的属性。如改变一个层的背景颜色（backgroundcolor）

16、。,实例：使用改变属性制作图片阴影效果 1实例创意大多数行为的属性都可以修改，而且这些行为的显示效果取决于所使用的浏览器，本实例将实现图片阴影效果的功能，当鼠标移至图片上时，阴影效果显示，当鼠标离开图片时，阴影效果消失。,2制作步骤（1）新建网页，保存页面，在该页面中插入一个层，将图片flower.jpg插入到该层中，调整图层大小，使图层比图像略大一点所示。,（2）选择图像后，在行为选择菜单中选择“改变属性”命令。,（3）在弹出的对话框中作如图所示的选择，从中可以看出，图层属性的操作选择很多，虽然只有精通HTML语言才可选择，但比直接编写HTML代码方便得多，因为这里我们可以不关心语法格式。本

17、例效果是改变“Layer1”的背景色彩。,（4）为了得到阴影效果，在“新的值”框中输入“black”，当然你也可以输入其他色彩名称或代码。,（5）默认的事件是“onload”，在这里用鼠标单击其右方的黑三角，在弹出的下拉选项中选择“onMouseOver”（鼠标经过)。,（6）保存网页后，按F12预览，如图示：当鼠标经过图片时，图片显示阴影效果。,注意：鼠标离开图片，阴影效果消失的效果。,二、打开浏览器窗口打开浏览器窗口即在打开当前网页的同时，另外打开一个新的窗口显示一个指定的网页，而可根据需要对它的菜单、页面尺寸、滚动条等进行设置。添加“打开浏览器窗口”行为方法：选择一个事件对象（图像、超链

18、接或body等）并打开“行为”面板。单击加号（+）按钮并从“动作”列表中选择“打开浏览器窗口”。在“要显示的URL”域中输入要显示网页的URL或通过“浏览”按钮选择一个要显示的网页文件。,注意给文本添加行为时，要注意将其设置为超级链接#，否则很多行为都无法添加。窗口宽度：指定窗口的宽度（以像素为单位）。窗口高度：指定窗口的高度（以像素为单位）。属性：选择是否在新的浏览器窗口中包含：导航工具栏、地址工具栏、状态栏、菜单条、滚动条、调整大小手柄等内容。窗口名称是新窗口的名称。制作Click图像册。制作load招聘启事，广告（Body 的load事件中添加打开浏览器行为是一个好的操作）。,三、播放声

19、音有时浏览一些网页时，会发现当把鼠标移到链接或图像等元素上时，会听到一些声音；或者在打开一个页面时，伴随有声音效果等。在Dreamweaver中，可以通过使用控制声音行为来实现这一功能。,添加“播放声音”行为的方法：选择一个事件对象（链接、图象或整个文档“Body”）并打开“行为”面板。单击加号（+）按钮并从“动作”弹出式菜单中选择“播放声音”。经验：默认情况下，插入一个播放声音行为后，自动插入一个插件。如制作课件，单击喇叭,播放声音。,四、弹出消息应用“弹出消息”行为的方法：选择一个事件对象（链接、图象、导航按钮或整个文档“Body”）并打开“行为”面板。单击加号（+）按钮并从“动作”弹出菜

20、单中选择“弹出消息”。弹出信息设置对话框，在“消息”域中输入要显示的信息，如“欢迎光临”等。单击“确定”按钮，关闭设置对话框。通常显示如：浏览器的分辨率要求，购卖信息。,五、设置文本1设置框架文本“设置框架文本”动作允许动态设置框架的文本，用指定的内容替换框架的内容和格式设置。可以先获取当前框架中的内容，再设置新的内容；另外可用HTML标签设置格式。用指定的内容替换框架中原有的内容。,2设置层文本“设置层文本”行为可用指定的内容替换页上现有层的内容和格式设置。该内容可以包括任何有效的HTML源代码。3设置状态栏文本“设置状态栏文本”动作可在浏览器窗口底部左侧的状态栏中显示消息。,4设置文本域文

21、本“设置文本域文本”行为可用指定的内容替换表单文本域的内容。,六、显示弹出式菜单制作“弹出式菜单”的方法：选择要附加该行为的对象（导航栏按钮、链接文本、图片等）并打开“行为”面板。单击加号（+）按钮并从“动作”弹出式菜单中选择“显示弹出式菜单”。（如对文本设置，先将其设为超链接#，菜单选项本身具有超链接的性质）在四个标签“内容”、“外观”、“高级”、“位置”中选择设置相应的属性。例：制作一个可行的导航条。,七、制作时间轴动画前提：安装升级程序（dwmx2004_701update_cs.exe）。Dreamweaver为用户提供了时间轴（Timelines）功能。动画就是通过在Timeline

22、s中随着时间的推移，改变层的位置来实现的。时间轴只能移动层，若要使图像或文本移动，应将图像、文本或其他任何类型的内容插入到层中。前提：浏览器支持层和JavaScript语言。,1Timelines（时间轴）面板时间轴是用帧来记录对象出现以及移动的路径来产生动画的。即用时间轴产生的动画由许多帧组成。“时间轴”面板用来显示层和图像的属性在一段时间更改的过程。选择“窗口/时间轴”可打开“时间轴”面板。,时间轴弹出式菜单：指定当前在“时间轴”面板中显示的时间轴（可以有多个时间轴）。一个时间轴可有多个动画通道（默认为32个）。播放栏：控制动画播放的状态（方向、帧率、循环等），显示当前在文档窗口中显示时间

23、轴的帧号。行为通道：是在时间轴特定帧处设定、执行行为的通道。动画通道：显示动画的持续时间。,2通过定义关键帧制作时间线动画时间线动画是通过沿着一条轨迹移动层来实现的。通过设定不同关键帧处层的位置，可描绘出层运动的轨迹。制作方法：创建一个层，插入图片或者文字。选中层整体拖动到时间轴上。或者选择“修改”“时间轴”“在时间轴上添加对象”，该动画层条将出现在时间轴的第一个通道中。单击位于动画层末端的关键帧标记。在页面上将层移至它在动画结束时应处于的位置。,将出现一条线，它显示文档窗口中动画的轨迹。重复上面的操作，选择增加关键帧或者选中某关键帧，并改变层的位置，以实现在不同帧时，层的位置不同。从本质上讲

24、是通过定义关键帧制作时间线动画的。关键帧是动画条中已经为对象指定属性（如位置）的帧。添加方法：在现有定义好的两个关键帧之间的某一帧上右击鼠标，选择“增加关键帧”，再改变层的位置。,Dreamweaver会计算关键帧之间帧的中间值。然后在两个关键帧之间自动进行层的（大小或者位置）过渡。小圆标记表示关键帧。具体动画效果可以通过预览看到。,倒带将播放栏移至时间轴中的第一帧。后退将播放栏向左移动一帧。单击“后退”并按住鼠标按钮可向后播放时间轴。播放将播放栏向右移动一帧。单击“播放”并按住鼠标按钮可向前播放时间轴。自动播放使时间轴于当前页在浏览器中加载时自动开始播放。“自动播放”将一个行为附加到页的 b

25、ody 标签，它在页加载时执行“播放时间轴”操作。,循环使当前时间轴于页在浏览器中打开时无限地循环。“循环”在动画的最后一帧之后将“转到时间轴帧”行为插入到“行为”通道中。在“行为”通道中双击该行为的标记可打开行为面板，可编辑此行为的参数并更改循环的次数。制作一个水平移动的动画。制作一个曲折移动的动画（建立多个关键帧）,3通过录制层路径创建层动画要创建轨迹复杂的层动画，更为有效的方法是记录拖动层时经过的轨迹，而不是创建各个关键帧。方法：选中层，执行“修改”菜单的“时间轴”中的“录制层路径”。也可以单击时间轴右侧按钮，在时间轴菜单中选择“录制层路径”，然后移动层，时间轴自动记录层的移动轨迹。制作

26、一个任意路径移动的动画。,4、添加播放时间轴和停止时间轴的行为方法：选择要附加该行为的对象（按钮、链接文本、图片等）并打开“行为”面板。单击加号(+)按钮并从“动作”弹出式菜单的“时间轴”中选择“播放时间轴”或“停止时间轴”。再从弹出式菜单中选择要播放或停止的时间轴或者选择停止所有时间轴。,播放时间轴和停止时间轴让访问者通过单击链接或按钮来启动和停止时间轴。当访问者指向链接、图像或其他对象时，这些操作也可以自动启动和停止时间轴。也可以转到指定的动画，再从该帧开始播放。分别在两个对象上添加行为，给前面的动画加上播放和停止按钮。同时单击展开，单击收缩。,八、检查浏览器使用“检查浏览器”动作可根据访

27、问者不同类型和版本的浏览器将他们转到不同的页。例如，让使用Navigator40或更高版本浏览器的访问者转到一页，让使用InternetExplorer40或更高版本的访问者转到另一页，并让使用任何其他类型浏览器的访问者留在当前页上。,方法：选择一个事件对象（链接、图片、body等）并打开“行为”面板。单击加号（+）按钮并从“动作”弹出式菜单中选择“检查浏览器”。选择浏览器的版本，以及前往的页面。牵涉三个网页：本网页、前往URL、替代URL。一般选择“Body”对象的“onLoad”。,九、检查插件使用“检查插件”行为根据访问者是否安装了指定的插件这一情况将他们发送到不同的页。方法：选择一个事

28、件对象（链接、图片、body等）并打开“行为”面板。单击加号（+）按钮并从“动作”弹出式菜单中选择“检查插件”。从“插件”弹出式菜单中选择一个插件，或单击“输入”并在相邻的域中键入插件的确切名称。,在“如果有，前往URL”域中，为具有该插件的访问者指定一个URL。如果指定一个远程URL，则必须在地址中包括“http:/”前缀。在“否则，前往URL”域中，为不具有该插件的访问者指定一个替代URL。若要让不具有该插件的访问者留在同一页上，将此域留空。通常，如果插件内容对于您的页是必不可少的一部分，请选择“如果无法检测，总是转到第一个 URL”选项；浏览器通常会提示不具有该插件的访问者下载该插件。如果插件内容对于您的页不是必要的，请保留此选项的未选中状态。,