网页制作基础教程第12章使用Spry构件.ppt

《网页制作基础教程（Dreamweaver CS3）》电子教案 第12章　使用Spry构件 　　　　本章重点：Spry折叠构件、菜单栏构件、验证文本域构件、验证复选框构件与重复区域构件等多种构件的使用方法 。 第12章　站点的整理维护与上传 12.1 使用Spry构件——新功能展示 12.2 Spry构件 13.3 使用Spry显示数据 13.4 Spry效果 12.1 使用“Spry”构件-----新功能展示 12.1.1 案例综述 　　新增的Spry功能不仅增加了页面的布局形式，简化并增强了表单的验证功能，还与XML数据相结合，方便构造动态数据显示。本例就将这些新功能集合到一个网页中，使读者从中体会Spry的无穷魅力 。 12.1.2 案例分析 　　我们要做的工作是： 申请网站空间 检查站点 上传网站。 12.1 使用“Spry”构件-----新功能展示 12.1.2 案例分析 　　Dreamweaver CS3中的Spry功能由四个部分组成： ① Spry构件。 ② Spry验证表单。 ③ Spry XML数据显示。 ④ Spry特效。 12.1 使用“Spry”构件-----新功能展示 12.1.3 实现步骤 用Spry构件创建页面 （1）插入Spry菜单栏 （2）插入“Spry选项卡式面板” （3）插入“Spry折叠式” （4）插入“Spry折叠面板” 12.1 使用“Spry”构件-----新功能展示 12.1.3 实现步骤 使用Spry验证表单域 （1）插入Spry验证文本域 （2）插入“Spry验证复选框” （3）插入“Spry验证选择” （4）插入“Spry验证文本区域” 12.1 使用“Spry”构件-----新功能展示 12.1.3 实现步骤 使用Spry XML显示数据 （1）绑定Spry XML 数据集。 （2）插入Spry表，显示Spry XML数据在页面 （3）插入Spry详细区域 12.2 Spry构件 12.2.1 Spry菜单栏 1．插入Spry菜单栏 ① “插入”栏|“Spry”类型|“Spry菜单栏”按钮 或 菜单栏“插入”|“布局对象”|“Spry菜单栏” 或 “插入”|“Spry”|“Spry菜单栏”命令。 ② 在弹出的“Spry菜单栏”对话框中选择“水平”或“垂直”，然后单击“确定”按钮。 12.2 Spry构件 12.2.1 Spry菜单栏 2．编辑Spry菜单栏属性 “菜单项”：单击列表框中的具体菜单项，在“文本”文本框中编辑输入文本即重新定义该列表项的内容。 “添加菜单项”按钮：表示为该菜单项添加了“子菜单”。 “删除菜单项”按钮：将该菜单项与“子菜单”同时删除。 “上移项”或“下移项”按钮：进行菜单项的显示排序。 “链接”：输入链接的目标页面地址，或者单击“浏览”按钮以浏览到相应的文件。 “目标”：指定要在何处打开所链接的页面。 12.2 Spry构件 12.2.1 Spry菜单栏 3．设置Spry菜单栏样式 设置方法：先选中要设置的菜单（单击选中）。然后在“属性”面板中选择“样式”就可以进行设置 12.2 Spry构件 12.2.1 Spry菜单栏 4．保存含有“Spry菜单栏”的页面 12.2 Spry构件 12.2.2 Spry选项卡式面板 1．插入选项卡式面板 ① “插入”栏|“Spry”类型|“Spry选项卡面板 ”按钮 或 菜单栏“插入”|“布局对象”|“Spry选项卡面板 ” 或 “插入”|“Spry”|“Spry选项卡面板 ”命令。 ②对于插入到网页中的“Spry选项卡式面板”，单击左上角的蓝色区域即表示选择了该“Spry选项卡式面板”，进行编辑操作。。 12.2 Spry构件 12.2.2 Spry选项卡式面板 2．添加与删除选择卡面板 ① 在“文档”窗口中单击选项卡左上角的蓝色区域选择该“Spry选项卡式面板”。 ② 在“属性”面板中，单击“添加面板”按钮或“删除面板”按钮。 12.2 Spry构件 12.2.2 Spry选项卡式面板 3．设置默认的打开面板 ① 在“文档”窗口中单击选项卡左上角的蓝色区域选择该“Spry选项卡式面板”。 ② 在“属性”面板中，从“默认面板”下拉列表中选择默认情况下要打开的面板。 12.2 Spry构件 12.2.2 Spry选项卡式面板 4．编辑面板 ① 将鼠标定位在选项卡标题所在区域即可对该标题进行编辑操作。 ② 对于插入到页面中各“Spry选项卡式面板”所对应的内容，鼠标移动到相应的“Spry选项卡”标题时，会显示“单击以显示面板内容”按钮，单击该按钮即可显示面板内容。 12.2 Sp