教学chapter为网页添加特殊效果PPT课件

第13章为网页增加特殊效果丰富“慧衡科技”网站主页,计算机工程学院计算机基础教学部,学习目标,了解Spry框架的基本构成了解JavaScript的基本概念掌握Spry菜单栏的基本操作方法掌握Spry选项卡式面板的基本操作方法掌握使用JavaScript脚本丰富页面功能的基本方法,.3版）,2,深圳职业技术学院计算机基础教研室,实训项目,为了让“深圳慧衡科技有限公司”网站主页的版面更丰富、效果更动感、功能更强大，需要对一部分原有的页面元素进行改造，同时增加一些实用的功能。,.3版）,3,深圳职业技术学院计算机基础教研室,项目分析,设计思路：（1）本页面需要的是动感效果和功能性得以提高，因而，已完成的版面布局、配色方案无需改变。（2）在基本框架保持不变的前提下，导航条由原来的一组文本变为2级菜单。（3）设计趋势介绍部分由原来的Flash+文字变为具有特效的图文。（4）案例图片展示部分由原来的一张图片变为可以自动切换的一组选项卡内的图片。（5）增加了加入收藏和分时问候语等实用功能。,.3版）,4,深圳职业技术学院计算机基础教研室,设计目标,.3版）,5,深圳职业技术学院计算机基础教研室,预备知识：Spry框架概述（1）,Spry框架是一个JavaScript库，使用它可以构建能够向站点访问者提供更丰富体验的网页。有了Spry，就可以利用HTML、CSS和极少量的JavaScript将XML数据合并到HTML文档中创建构件，向各种页面元素中添加不同种类的效果，主要包括三种类型的构件：数据类（如Spry数据集等）、表单类（如Spry验证文本域等）和布局类（如Spry菜单栏等），主要应用于数据处理、表单构成和页面布局等方面。本章介绍的是布局类Spry构件。,.3版）,6,深圳职业技术学院计算机基础教研室,预备知识：Spry框架概述（2）,1.关于Spry构件：Spry构件是一个页面元素，通过启用交互来提供更丰富的用户体验。Spry构件由构件结构、构件行为和构件样式等部分组成。构件结构用来定义由其组成的HTML代码块，构件行为用来控制构件如何响应用户启动事件的JavaScript，而构件样式用来指定构件外观的CSS。2.Spry布局类构件：Spry布局类构件包括Spry菜单栏、选项卡式面板、折叠式以及可折叠面板，如图所示。,.3版）,7,深圳职业技术学院计算机基础教研室,预备知识：JavaScript编程语言初探（1）,JavaScript是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言，作为一种轻量级的编程语言，可以插入到HTML页面中并由浏览器执行，因而广泛地应用于PC、笔记本电脑、平板电脑和智能手机等设备。1.基本功能：（1）写入HTML输出（2）对事件做出反应（3）改变HTML内容,.3版）,8,深圳职业技术学院计算机基础教研室,预备知识：JavaScript编程语言初探（2）,2.基本概念：（1）对象：带有属性和方法的特殊数据类型。一组包含数据的属性和对属性中包含数据进行操作的方法，称为对象。（2）数据：JavaScript数据类型分为原始类型和引用类型两大类，其中，原始类型包括Undefined、Null、Boolean、Number、String等五种；所有对象都是引用类型，包括Boolean、Number、String、Array、Date、Math等。JavaScript中的数据有常量和变量两种形式，常量是值不会改变的数据，如9、hello，而变量是值是可以改变的数据。JavaScript中的变量声明用关键字var引导，变量的类型取决于它的声明方式。声明原始类型的变量：var变量名=值;声明引用类型的变量：var变量名=new类型名(初值);,.3版）,9,深圳职业技术学院计算机基础教研室,预备知识：JavaScript编程语言初探（3）,2.基本概念：（3）运算符：是一组符号，用于连接数据，JavaScript中的运算符包括数学、关系、逻辑、位、赋值、条件和字符串连接等类型，针对主要的几种类型进行说明。算术运算符：+(加)、-(减)、*(乘)、/(除)、%(取模)、+(增量)、-(减量)、-(取负)。字符串连接运算符：+、+=。逻辑运算符：,.3版）,12,深圳职业技术学院计算机基础教研室,制作流程,.3版）,13,深圳职业技术学院计算机基础教研室,任务1使用Spry水平菜单栏制作导航条,.3版）,14,深圳职业技术学院计算机基础教研室,STEP：,深圳职业技术学院计算机基础教研室,.3版）,15,在“慧衡网站”主页的“nav”DIV中，插入一个Spry水平菜单栏“MenuBar1”。根据导航条的具体内容，修改“MenuBar1”Spry菜单栏中的各级菜单项。通过修改“SpryMenuBarHorizontal.css”样式表文件中相应的CSS规则，改变“MenuBar1”Spry水平菜单栏的效果。,STEP：,深圳职业技术学院计算机基础教研室,.3版）,16,任务2使用Spry选项卡式面板展示案例图片,.3版）,17,深圳职业技术学院计算机基础教研室,STEP：,深圳职业技术学院计算机基础教研室,.3版）,18,在“慧衡网站”主页的“con-mid”DIV中，插入一个Spry选项卡式面板“TabbedPanels1”。根据案例图片展示的具体内容，修改“TabbedPanels1”Spry选项卡式面板中的标签和内容。通过修改“SpryTabbedPanels.css”样式表文件中相应的CSS规则，改变“TabbedPanels1”Spry选项卡式面板的效果。通过非常简单的方法，直接修改“SpryTabbedPanels.js”脚本文件中的JavaScript代码，实现当鼠标移至面板上不同的选项卡上时，同样可以显示相应的图像。在现有脚本的基础上，通过在页面的HTML代码中添加简单的JavaScript脚本，实现选项卡自动循环切换。,STEP：,深圳职业技术学院计算机基础教研室,.3版）,19,任务3使用JavaScript脚本实现加入收藏及分时问候语,.3版）,20,深圳职业技术学院计算机基础教研室,STEP1：将网站主页加入收藏夹,深圳职业技术学院计算机基础教研室,.3版）,21,利用JavaScript函数，通过设置“banner.gif”图像的“链接”属性，实现将网站主页加入收藏的功能。编写简单的JavaScript函数，实现当鼠标移至“banner.gif”图像上时，加入收藏的提示信息就会显示出来；而当鼠标移出该图像时，提示信息就会清除。使用“设置状态栏文本”行为，实现当浏览器载入网站主页后，在浏览器的状态栏中显示加入收藏的提示信息。,STEP2：在网站主页上显示分时问候语,深圳职业技术学院计算机基础教研室,.3版）,22,在主页的右上方，插入一个APDIV，命名为“spec”，“类”设置为“color-blue”。利用Dreamweaver命令在“spec”APDIV中插入JavaScript脚本，以实现主页上显示分时问候语的功能。,任务4利用CSS+JavaScript脚本实现图文动态显示,.3版）,23,深圳职业技术学院计算机基础教研室,STEP：,深圳职业技术学院计算机基础教研室,.3版）,24,根据网站主页中“设计趋势介绍”的主要特点，确定图文并茂、动态显示的总体设计思路。根据设计思路，找到制作特效所需的图片素材以及实现特效的脚本和样式表，将其放在站点文件夹下对应的文件夹中。在“设计”视图下，插入一个DIV，命名为“menu”，在其中插入5幅图像作为列表元素，并进行属性设置。链接“effect.css”样式表文件，并在“代码”视图下，输入代码实现对脚本文件的调用,项目总结,深圳职业技术学院计算机基础教研室,.3版）,25,课后练习,配套实训利用作业文件夹下提供的素材文件，根据所学的Spry布局类构件以及JavaScript脚本等方面的知识，为网页设计和制作较为复杂的特效。要求如下：使用两种Spry布局类构件。自行设计几个简单的页面动态效果。参照