动态导航栏spry布局控件.docx
《动态导航栏spry布局控件.docx》由会员分享,可在线阅读,更多相关《动态导航栏spry布局控件.docx(5页珍藏版)》请在三一办公上搜索。
1、动态导航栏spry布局控件动态导航栏-spry布局控件 一、 教学目标 1、 动作与技能:学会Spry布局控件的编辑、应用。 学会使用spry布局控件创建动态导航栏的方法。 2、 知识目标:在运用中理解spry框架是一组用标准HTML、CSS和JavaScript编写的可重用控件。 3、 情感态度与价值观:提高了对网页设计的理解能力和认识水平,能够树立学生探索知识的兴趣。 二、 教学重点、难点: 1、 学会Spry布局控件的编辑、应用。 2、 学会使用spry布局控件创建动态导航栏的方法。 三、 教学准备: 1、 完整的实训8的步骤。 2、 课件的准备 3、 应用软件dreamweaver c
2、s5安装良好。 教学过程 1、 首先引入spry,说出本节课需要学习的内容的重难点。 2、 启动Dreamweaver cs5,选择站点“网页特效制作”,新建文件spry1.html. 3、 选择“插入spryspry菜单栏”命令,打开“spry菜单栏”对话框,如图3-57所示。选择“水平”单选项,单击“确定”按钮,网页效果如图3-58所示。 图3-57 “spry菜单栏”对话框 图3-58 网页效果图 4、 在“属性”面板中或者在“设计”视图中添加项目的属性值,“项目1:站内质询,项目2:原创图书,项目3:图文教程,项目4:视频教程”,如图3-59和3-60所示: 1 图3-59 属性面板
3、图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 “
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 动态 导航 spry 布局 控件
链接地址:https://www.31ppt.com/p-3333528.html