网页设计与制作第05章高级网页制作

《网页设计与制作第05章高级网页制作》由会员分享，可在线阅读，更多相关《网页设计与制作第05章高级网页制作（50页珍藏版）》请在金锄头文库上搜索。

1、1,第5章 高级网页制作,网页设计与制作,南海学院计算机系制作,2,第5章 高级网页制作,行为 事件和动作 行为和JavaScript脚本程序,3,认识“行为”面板,“行为”面板是添加和控制操作行为的场所。选择“窗口/行为”命令或按Shift+F3键，打开“行为”面板，在面板中会显示已添加的行为。 “行为”面板中各按钮的功能如下：,4,认识“行为”面板,单击 按钮只显示已设置的事件列表。 单击 按钮显示所有事件列表。 单击 按钮会弹出“行为”菜单。在该菜单中 选择相应的行为后，会打开相应的对话框，设置完成后将为指定的对象添加行为。 单击 按钮会删除一个行为。,5,认识“行为”面板,单击 按钮将

2、向上移动所选择的动作。若该按钮为灰色，则表示不能移动。 单击 按钮将向下移动所选择的动作。,6,实例5.1：使用行为实现鼠标移动到图片上面改变状态栏文字。 事件 附加动作,7,检查浏览器,由于访问者可能会使用不同类型和版本的浏览器，利用“检查浏览器”行为可根据访问者使用的浏览器而跳转到不同的页面。,8,检查插件,“检查插件”行为的目的是检查浏览者的电脑是否安装了指定的插件，从而决定将网页转到不同的页面。如让安装了Shockwave插件的访问者转到有Shockwave影片的页面，让未安装该插件的访问者转到没有Shockwave影片的页面。,9,转到URL,“转到URL”行为可以在当前窗口或指定的

3、框架中打开一个新页面。利用此行为可以通过一次单击更改两个或多个框架的内容，非常方便。,10,跳转菜单,“跳转菜单”行为可通过选择“插入/表单/跳转菜单”命令进行创建，并可通过“行为”面板对已有的跳转菜单进行编辑修改。在“跳转菜单”对话框中可设置跳转菜单的属性，打开该对话框的方法有以下两种：,11,跳转菜单,选中已插入的跳转菜单，双击“行为”面板中的“跳转菜单”动作，打开“跳转菜单”对话框。 选中已插入的跳转菜单，在打开的“行为”面板中单击 +按钮，在弹出的“行为”菜单中选择“跳转菜单”命令，打开“跳转菜单”对话框。 在“跳转菜单”对话框中设置跳转菜单的方法和“跳转菜单”的创建基本相同，完成后单

4、击 按钮关闭对话框，如有需要可在面板中修改事件。,12,打开浏览器窗口,使用“打开浏览器窗口”行为可打开一个新的浏览器窗口显示指定的文档，并且可以指定新窗口的属性和名称。 实例2:在网页调入的同时,打开一个POP窗口.,13,弹出信息,添加了“弹出信息”行为后，当触发设定的事件时将会弹出预设对话框。 实例5.3：制作一个显示URL的对话框。,14,设置文本,“设置状态栏文本”行为 “设置状态栏文本”行为可用于在浏览器窗口底部左侧的状态栏中显示消息。 “设置层文本”行为 “设置层文本”行为可以设置层的内容和格式，但保留层的属性，如颜色等。该内容可以包括任何有效的HTML源代码。,15,实例一个显

5、示会员简介的网页,16,预先载入图像,“预先载入图像”行为将不会立即出现在页面上的图像预先载入浏览器缓存中，可防止图像出现时由于下载而导致延迟。,17,设置导航栏图像,使用“设置导航栏图像”行为不仅可以将某个图像变为导航条图像，还可以更改导航条中图像的显示和动作。,18,交换图像,在页面中插入鼠标经过图像实际上就是Dreamweaver自动添加了一个“交换图像”行为。“交换图像”行为通过更改标签的属性将一个图像和另一个图像进行交换，该行为创建了按钮变换和其他图像效果，包括一次交换多个图像。,19,改变属性,使用“改变属性”行为可更改对象的某些属性，其中可更改的属性是由浏览器决定的。 实例5.5

6、：鼠标移过图像时改变大小。,20,显示-隐藏层,“显示-隐藏层”行为用于交互时显示信息，可以显示、隐藏或恢复一个或多个层的可见性。 实例5.6:鼠标移动到会员图像上时显示会员介绍。,21,拖动层,浏览者在访问添加了“拖动层”行为的页面时可拖动层到页面的任意位置。 “拖动层”行为可通过“拖动层”对话框实现。选中所需的层并打开“行为”面板，单击 按钮，在弹出的 “行为”菜单中选择“拖动层”命令，打开“拖动层”对话框，该对话框中有“基本”和“高级”两个选项卡。可以设定浏览者向水平、垂直或任意方向拖动层，以及用JavaScript函数名或代码实现一些特殊功能。,22,拖动层,1“基本”选项卡 2. “

7、高级”选项卡,23,1“基本”选项卡,“基本”选项卡中可选择添加行为的层、拖动限制等。,24,2.“高级”选项卡,单击对话框的“高级”选项卡，在其中可进行层的拖动控制点、在拖动层时跟踪层的移动以及当放下层时触发一个动作等设置。,25,实例5.7：制作拖动图像进行类似拼图的效果，将会员图片拖到指定位置。,26,调用JavaScript,“调用JavaScript”行为允许用户使用“行为”面板指定当发生某个事件时执行自定义功能。,27,控制Shockwave或Flash,使用“控制Shockwave或Flash”行为可播放、停止、倒退、转到Flash或Shockwave文件中的帧。,28,播放声音

8、,使用“播放声音”行为可以在页面载入时播放音乐。,29,检查表单,检查表单行为用于检查用户输入的文本区的内容是否正确。 此行为可以附加给onBlur或Submit事件。,30,使用JavaScript代码,认识使用代码片断面板 执行窗口代码片断 拖动代码片断到编辑窗口得网页中； 在编辑窗口中要插入代码片断的地方单击，然后双击代码片断； 在编辑窗口要插入代码片断的地方单击，然后执行插入按钮。,31,JavaSrript代码实例,实例一：插入关闭窗口按钮。 实例二：会暂停的滚动字幕。,32,模板的使用,在创建模板前需先创建站点，因为模板必须保存在站点中，否则创建模板时系统会提示创建站点。创建模板有

9、两种方式：将现有网页另存为模板和直接创建空白模板。,33,1将现有网页另存为模板,34,2直接创建空白模板,35,设置模板的属性,1.设置模板的页面属性,使用菜单“修改”“ 页面属性”改变模板的页面属性。,2.定义模板的可编辑区,每个模板都包含可编辑区和不可编辑区两部分。可编辑区指的是一个页面中可以更改的部分，它所包含的内容是经常变换的。不可编辑区是指在所有页面中不能改变的内容，它的内容只能在模板中编辑，如某些公共标识符等。,36,3.定义重复区域,重复区域指的是一个页面中可以任意多地增加的部分，例如表格中的内容等。重复区域是不可编辑区，如果要在重复区域中编辑不同的内容，必须在重复区域中插入可

10、编辑区域。,4.定义可选区域,可选区域是指在满足一定条件下才在页面中显示的区域。,5.定义嵌套模板,嵌套模板是指在一个模板中调用了另一个模板的内容。,37,应用模板,1.基于模板创建文件,使用菜单“文件”“新建”，在弹出的对话框中选择“模板”选项卡，出现“从模板新建”对话框，在对话框中选择一个模板，然后单击“创建”按钮； 或使用资源面板。,2. 在已有的文件中应用模板,使用菜单“修改” “模板”“应用模板到页”，从列表中选择一个模板，然后单击“选定”按钮。,38,从资源面板的模板子面板中拖动模板到文本窗口中； 在资源面板中选中一个模板，然后，点击应用按钮。 3.将文件从模板中分离 使用菜单“修

11、改” “模板”“从模板中分离”。,39,应用举例创建和应用模板,40,使用库,生成库项目 在“设计”模式下，选中窗口中的一个或多个元素，然后，将其拖动到资源面板的库项目列表中，就生成了一个新的库项目。 应用库项目 在站点的任一网页中，可以通过拖动一个库项目到网页编辑窗口中。,41,编辑库项目 选中资源面板中的一个库项目，单击编辑按钮进行编辑。 修改使用库项目的页面 （1）执行修改库更新页面命令； （2）在“更新页面”对话框中，选择需要修改的文件； （3）单击开始按钮完成更新。,42,网站的发布与维护,站点的测试和发布的主要工作和步骤如下： 申请域名。 申请站点空间。 本地站点的测试。 网页的上

12、传。 网站的宣传推广。,43,申请主页空间及域名,若要发布网站，需要先申请一个主页存放空间，将完成的Web页上传到这个空间里，然后申请一个域名，浏览者即可通过该域名访问到站点。,44,申请主页空间,主页空间通常有免费和收费两种： 免费主页空间的大小和运行的支持条件会受一定限制。 收费主页空间一般由网站托管机构提供，其空间大小及支持条件可供用户根据需要进行选择。,45,申请免费主页空间,网上可申请免费主页空间的网站比较多，各个网站上的申请操作基本相同，下面以中华网(http:/)为例，介绍免费主页空间的申请过程。,46,站点的管理,1.配置FTP上传功能 使用菜单“站点”“管理站点”打开“管理站

13、点”对话框。 2.上传文件 使用菜单“窗口”“文件”打开“文件面板”，在文件面板的下面列出站点的文件。,47,管理站点的文件,1.站点中的文件结构,（1）分门别类地将文件存放在不同的目录下。,（2）在每个主目录下建立独立的images目录。,（3）目录的层次不要太深，建议不要超过3层。,（4）不要使用中文文件名和中文目录名，使用中文的名字可能对网址的正确显示造成困难，有一些浏览器不支持中文文件名和目录名的调用。,（5）不要使用过长的目录名，尽管大多数服务器支持长文件名，但是太长的目录名不便于记忆，也不容易管理。,48,2.文件管理窗口,单击“文件”面板的按钮,窗口转换为文件管理的模式。,单击其中的站点文件按钮,在左右两栏分别显示远程文件和本地文件。,3.地图视图,在文件管理窗口单击地图视图按钮,4.检查链接,使用菜单“站点” “检查站点范围的链接”可检查站点的全部链接，在属性面板的下面显示“结果”面板，报告检查结果 。,49,网站的宣传和推广,到各搜索引擎注册 在新闻组上发布你的主页 利用电子邮件群发送消息 在比较出名的ISP主页上注册 通过新闻媒体进行宣传 与相关网站进行友情链接,50,网站的宣传和推广,利用留言板进行宣传 利用电子邮件发出通知 参加各种广告交换组织 在聊天室里发出邀请 使用主页注册软件 通过其他可能的方法帮助宣传,