网页设计与制作教程杨帆严耀伟王方网页设计第五章.pptVIP

网页动态效果的实质 网页中菜单、列表和树结构等的都是由网页中嵌入的脚本语言如JavaScript或VBScript等实现的。对于编程熟练的专业制作者，直接用脚本语言实现上述动态功能，十分快捷，功能也很强大，效果易于定制。但对于一般的网页制作者，脚本语言编程显然有一定的难度，不过有了功能强大的Dreamweaver，使用者总可以找到变通的方法，让这些专业级的效果可以用所见即所得的方式完成。 5.1 菜单设计 网页中的菜单一般是下拉式菜单或弹出式菜单，它们又会在不同的场合中被使用到，包括： ① 命令菜单：根据用户所选的选项，进行不同的操作； ②导航菜单：把用户带到网上新的位置； ③表单填写：在填写表单时，让用户通过下拉菜单来选择某一选项； ④挑选值：从一系列可用的值中，选择一个。 好的菜单设计可以使网页整体上增色不少，它们节省了用户的屏幕空间，当菜单显示一个正确的选择时，可以防止用户选择不正确的项目。 5.1.1 菜单设计分析 实现网页中的弹出式菜单或下拉式菜单的方法有很多种，如采用“AP元素”和“行为”实现，或利用“行为”面板中的“显示弹出式菜单”选项实现，或者用Dreamweaver CS3 中集成的Spry功能实现。 AP（绝对定位）元素，是具有准确位置的HTML页面元素，是由层叠样式表发展而来的。利用AP元素可以对网页中的各种对象进行有效的控制，AP元素上可以放置文本、图像等可放置在HTML文档正文中的内容，使用起来类似于Photoshop、Flash和AutoCAD等软件中的“图层” AP元素 绘制AP元素的方法 Dreamweaver CS3 中，可以用多种方法绘制AP元素，如选择插入栏的“布局”类别中的“绘制AP Div”选项，再将鼠标移动至文档窗口中拖动绘制；也可以将插入点放置在文档窗口中，点击菜单“插入记录”?“布局对象”?“AP Div”，在页面上绘制一个预设大小的AP元素；另外，还可以直接将插入栏中的“绘制AP Div”按钮拖动到文档中，即可在文档中加入一个AP元素 “插入”工具栏：“布局”选项卡 管理AP元素 Dreamweaver CS3 提供了一个集中管理网页中AP元素元素的面板。通过AP元素面板可以管理文档中的所有AP元素。单击“窗口”?“AP元素”选项，就可以打开“AP元素面板”，也可以直接在面板组中点击“CSS”?“AP元素”选项卡。 在AP元素面板中，各元素显示为接Z轴排列的名称列表。默认情况下，首先创建的AP元素（Z轴顺序为1）出现在列表的底部，必威体育精装版创建的AP元素（Z轴顺序为最大的一个）出现在最顶部。在面板左侧，点击“眼睛”图标，“眼睛”睁开表示该AP元素是可见的，“眼睛”闭合则AP元素不可见 “AP”元素面板 行为和行为面板 在解释什么是Dreamweaver设计中的“行为”之前，先要了解什么是“事件”和“动作”。事件（Event）指发生的某件事，动作（Action）就是产生的某种变化，行为（Behavior）是某个事件和由该事件触发的动作的组合。行为是Dreamweaver中预置的JavaScript程序。每个行为至少包括一个动作和一个事件。在将行为附加到某个页面元素之后，每当该元素的某个事件发生时，行为即会执行与这一事件关联的动作（JavaScript代码） 行为面板 Dreamweaver中的行为都集成在“行为面板”中。在该面板中，可以先指定一个动作，然后指定触发该动作的事件，以此将行为添加到页面中 在Dreamweaver CS3 中，行为面板中保留了“显示弹出式菜单”功能，但该功能不推荐使用，被放入“~建议不再使用”项目组。因此在Dreamweaver中一般用“层和行为”或Spry实现菜单的各种功能。 Spry 框架 Spry 框架是一个 JavaScript 库，Web 设计人员使用它可以构建能够向站点访问者提供更丰富体验的 Web 页。有了 Spry，就可以使用 HTML、CSS 和极少量的 JavaScript 将 XML 数据合并到 HTML 文档中，创建构件（如折叠构件和菜单栏），向各种页面元素中添加不同种类的效果 5.1.2 使用Dreamweaver设计菜单 第一步，绘制一个AP元素 第二步，在AP元素中插入表格并输入文本 第三步，给AP元素上方的文字，也就是菜单名，插入超链接 第四步，给刚做好的超链接加入行为 第五步，为AP元素添加“显示-隐藏元素”行为 最后一步，打开“AP元素”面板，设置刚才绘制的AP元素为不可见 利用Spry实现菜单功能 在Spry插入栏中，单击Spry菜单栏按钮，如图5-10所示，在弹出的对话框中选择是“水平”菜单栏还是“垂直”菜单条。 利用Spry实现菜单功能 单击“确定”后，则插入了一个菜单栏。选中该菜