动态导航栏----spry布局控件(教案)

动态导航栏--------spry布局控件（教案）

一、教学目标

1、动作与技能：①学会Spry布局控件的编辑、应用。

②学会使用spry布局控件创建动态导航栏的方法。

2、知识目标：在运用中理解spry框架是一组用标准HTML、CSS和JavaScript编写的

可重用控件。

3、情感态度与价值观：提高了对网页设计的理解能力和认识水平，能够树立学生探索

知识的兴趣。

二、教学重点、难点：

1、学会Spry布局控件的编辑、应用。

2、学会使用spry布局控件创建动态导航栏的方法。

三、教学准备：

1、完整的实训8的步骤。

2、课件的准备

3、应用软件dreamweaver cs5安装良好。

教学过程

1、首先引入spry，说出本节课需要学习的内容的重难点。

2、启动Dreamweaver cs5,选择站点“网页特效制作”，新建文件spry1.html.

3、选择“插入→spry→spry菜单栏”命令，打开“spry菜单栏”对话框，如图3-57

所示。选择“水平”单选项，单击“确定”按钮，网页效果如图3-58所示。

»图3-57 “spry菜单栏”对话框

»图3-58 网页效果图

4、在“属性”面板中或者在“设计”视图中添加项目的属性值，“项目1：站内质询，

项目2：原创图书，项目3：图文教程，项目4：视频教程”，如图3-59和3-60所

示：

»图3-59 属性面板

»图3-60 网页“设计”视图

5、继续在“属性”面板中或者在“设计”视图中添加“站内咨询”的二级项目的属

性值，”项目1.1：图书咨询，项目1.2：会员信息，项目1.3：业界新闻，项目

1.4：课件质询“，如图3-61和3-62

»图3-61 “属性”对话框

»图3-62 网页“设计”视图

6、同样的操作，添加“图文教程“的”二级项目“的属性值，“项目3.1：文化课，

项目3.2：职业生涯，项目3.3：专业课，项目3.4：选修课”，添加“专业课”的下级项目属性值，“项目3.3.1：网页制作，项目3.3.2：PS图像处理，项目3.3.3：flash动画”，如图3-63和图3-64所示：

»图3-63 “属性”面板

7、按【F12】键保存并浏览网页，在浏览器窗口显示网页spry1.htm，如图3-65所示。

8、新建文件spry2.htm，选择“插入→spry→spry选项卡面板”命令，在属性面板

中或者设计视图中添加“标签”的属性值，”标签1：咨询，标签2：音乐，标签3：电视，标签4：电影“，并在电影选项卡下的内容区域插入图像images/dy.jpg 和文字，在CSS中调整”tabbedpanels层“的宽度为”190px”,如图3-66、图3-67和图3-68所示：

9、按【F12】键保存并浏览网页，在浏览器窗口显示网页spry2.htm，如图3-69所示。

10、新建文件spry3.htm，选择“插入→spry→spry折叠式”命令，在“属性”面

板中或者在“设计”视图中，首先添加标签的属性值，“标签1：含笑，标签2：荷包牡丹，标签3：春兰，标签4：爆杖花”，然后在内容1，内容2，内容3，内容4，“区域内分别插入图像images文件夹中的”hx.jpg,hbmd.jpg,xcl.jpg,和pzh.jpg”,最后在CSS中调整“acction层”的宽度230px,”accordionpanelcontent层“的宽度230ＰＸ，高度

»图3-64 网页“设计”视图

»图3-65 添加“spry菜单栏”的导航栏效果

»图3-66 “tabbedpanels层”的属性

»图3-67 “属性”面板

»图3-68 网页“设计”视图»图3-69 添加“spry选项卡是面板”的

导航栏效果

为１８０ＰＸ，如图３－７０――图３――７３所示。

»图3-70调整“acction＂的属性»图3-71 调整“acctionpanelcontent”的属性

»图3-72 “属性”面板

»图3-73 网页“设计”视图

11、按【F12】键保存并浏览网页，在浏览器窗口显示spry3.htm，效果如图3-75

所示。

12、新建文件spry4.htm，选择“插入→spry→spry可折叠式面板”命令，在设计

视图中，首先添加“标签”的属性值为“唯美油画”，然后在内容区域内插入图象images/yh.jpg,最后在CSS中调整“collapsiblepanel层’的宽度为350px,如图3-74、图3-75所示。

»图3-73 “collapsiblepanel层”的属性

»图3-76 “属性”面板

»图3-77 添加“spry可折叠式”的导航栏效果