(教学课件)chapter13为网页添加特殊效果

站主页后，在浏览器的状态栏中显示加入收藏的提示信 息。
网页设计与制作实用教程（第3版）
21
STEP2：在网站主页上显示分时问候语
在主页的右上方，插入一个AP DIV，命名为 “spec”，“类”设置为“color-blue”。 利用Dreamweaver命令在“spec”AP DIV中插入 JavaScript脚本，以实现主页上显示分时问候语的功
高等教育出版社
学习目标
了解Spry框架的基本构成 了解JavaScript的基本概念 掌握Spry菜单栏的基本操作方法 掌握Spry选项卡式面板的基本操作方法 掌握使用JavaScript脚本丰富页面功能的基本方法
网页设计与制作实用教程（第3版）
2
实训项目
为了让“深圳慧衡科技有限公司”网站主页的版
网页设计与制作实用教程（第3版）
15
STEP：
要求 菜单栏左侧、顶部填充适当增加 子菜单项宽度适当增加 水平菜单栏的 CSS 规则 ul.MenuBarHorizontal 相关属性 padding-left padding-top 参考值 20px 5px 16em #95BDEE #1C5EAE
算术运算符：+(加)、-(减)、*(乘)、/(除)、%(取模)、++(增量)、--(减量)、-(取负)。 字符串连接运算符：+、+=。
逻辑运算符：&&(与)、||(或)、!(非)。
比较运算符：>(大于)、>=(大于等于)、<(小于)、<=(小于等于)、==(等于)、!=(不等于)、 ===(严格相等)、!==(不严格相等)。 赋值运算符：=(赋值)、op=(运算赋值)。 new 运算符：用于创建一个对象。
color
font-family 、 font- "幼圆"、14px size underline text-decoration font-style background-color color italic #CFE1F8 #FF9900
网页设计与制作实用教程（第3版）
16
任务2 ——使用SPRY选项卡式面板展示案例图片
网页设计与制作实用教程（第3版）
11
预备知识：JAVASCRIPT编程语言初探（5）
2.基本概念： （5） 函数：JavaScript函数用关键字 function来定义。定义格式：
function 函数名(参数表) { 函数体
}
函数是通过函数调用来执行的：
函数名(实际参数)
函数可以有一个返回值，有返回值的函数可以作为表达式使用：
ul.MenuBarHorizontal ul width li ul.MenuBarHorizontal a background-color
菜单项的背景颜色、字体颜色、 字体、字号变化 ul.MenuBarHorizontal 当鼠标悬停在链接的文字上时， a:hover 文字出现下划线、变为斜体 ul.MenuBarHorizontal 当鼠标指针移过菜单项上方时， a.MenuBarItemHover 其背景颜色、字体颜色变化
网页设计与制作实用教程（第3版）
6
预备知识：SPRY框架概述（2）
1.关于 Spry 构件： Spry构件是一个页面元素，通过启用交互来提供更丰富的用户体验。Spry构件由 构件结构、构件行为和构件样式等部分组成。构件结构用来定义由其组成的HTML 代码块，构件行为用来控制构件如何响应用户启动事件的JavaScript，而构件样 式用来指定构件外观的CSS。 2. Spry布局类构件： Spry布局类构件包括Spry菜单栏、选项卡式面板、折叠式以及可折叠面板，如图 所示。
网页设计与制作实用教程（第3版）
17
STEP：
在“慧衡网站”主页的“con-mid”DIV中，插入一个Spry选项 卡式面板“TabbedPanels1”。
根据案例图片展示的具体内容，修改“TabbedPanels1”Spry选 项卡式面板中的标签和内容。
通过修改“SpryTabbedPanels.css”样式表文件中相应的CSS 规则，改变“TabbedPanels1”Spry选项卡式面板的效果。 通过非常简单的方法，直接修改“SpryTabbedPanels.js”脚本 文件中的JavaScript代码，实现当鼠标移至面板上不同的选项卡上 时，同样可以显示相应的图像。 在现有脚本的基础上，通过在页面的HTML代码中添加简单的 JavaScript脚本，实现选项卡自动循环切换。
面更丰富、效果更动感、功能更强大，需要对一部分 原有的页面元素进行改造，同时增加一些实用的功能。
网页设计与制作实用教程（第3版）
3
项目分析
设计思路： （1）本页面需要的是动感效果和功能性得以提高，因而，已完成的 版面布局、配色方案无需改变。 （2）在基本框架保持不变的前提下，导航条由原来的一组文本变为 2级菜单。 （4）案例图片展示部分由原来的一张图片变为可以自动切换的一组
20px 0 0 20px
460px #95BDEE solid 5px #999
border-top
当鼠标指针移过面板选项卡 .TabbedPanelsTabHover 上方时，选项卡的背景颜色 变化 .TabbedPanelsTabSelecte background-color 选定选项卡的背景颜色、字 d 体颜色变化 color .TabbedPanelsContent background-color 内容面板的背景颜色、高度 height 变化，填充（顶部、左侧） 适当增加 padding
任务1 ——使用SPRY水平菜单栏制作导航条
网页设计与制作实用教程（第3版）
14
STEP：
在“慧衡网站”主页的“nav”DIV中，插入一个Spry 水平菜单栏“MenuBar1”。 根据导航条的具体内容，修改“MenuBar1”Spry菜 单栏中的各级菜单项。
通过修改“SpryMenuBarHorizontal.css”样式表文 件中相应的CSS规则，改变“MenuBar1”Spry水平菜 单栏的效果。
网页设计与制作实用教程（第3版）
7
预备知识：JAVASCRIPT编程语言初探（1）
JavaScript是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言，作为 一种轻量级的编程语言，可以插入到HTML页面中并由浏览器执行，因而广泛地应用
于PC、笔记本电脑、平板电脑和智能手机等设备。
1.基本功能： （1）写入HTML输出
任务3 ——使用JAVASCRIPT脚本实现加入收藏及分时 问候语
1将网站主页加入 收藏夹
2在网站主页上显 示分时问候语
网页设计与制作实用教程（第3版）
20
STEP1：将网站主页加入收藏夹
利用JavaScript函数，通过设置“banner.gif”图像 的“链接”属性，实现将网站主页加入收藏的功能。 编写简单的JavaScript函数，实现当鼠标移至 “banner.gif”图像上时，加入收藏的提示信息就会显 示出来；而当鼠标移出该图像时，提示信息就会清除。 使用“设置状态栏文本”行为，实现当浏览器载入网
声明原始类型的变量：var 变量名 = 值; 声明引用类型的变量：var 变量名 = new 类型名(初值);
网页设计与制作实用教程（第3版）
9
预备知识：JAVASCRIPT编程语言初探（3）
2.基本概念： （3）运算符：是一组符号，用于连接数据，JavaScript中的运算符包括数学、关系、 逻辑、位、赋值、条件和字符串连接等类型，针对主要的几种类型进行说明。
（3）设计趋势介绍部分由原来的Flash+文字变为具有特效的图文。
选项卡内的图片。
（5）增加了加入收藏和分时问候语等实用功能。
网页设计与制作实用教程（第3版）
4
设计目标
网页设计与制作实用教程（第3版）
5
预备知识：SPRY框架概述（1）
Spry框架是一个JavaScript库，使用它可以构建能够向站点访问者提供更丰富 体验的网页。
能。
网页设计与制作实用教程（第3版）
22
任务4 ——利用CSS+JAVASCRIPT脚本实现图文动态显示
网页设计与制作实用教程（第3版）
23
STEP：
根据网站主页中“设计趋势介绍”的主要特点，确定图文 并茂、动态显示的总体设计思路。
根据设计思路，找到制作特效所需的图片素材以及实现特 效的脚本和样式表，将其放在站点文件夹下对应的文件夹中。 在“设计”视图下，插入一个DIV，命名为“menu”， 在其中插入5幅图像作为列表元素，并进行属性设置。 链接“effect.css”样式表文件，并在“代码”视图下，输 入代码实现对脚本文件的调用
有了Spry，就可以利用HTML、CSS和极少量的JavaScript将XML数据合并到 HTML文档中创建构件，向各种页面元素中添加不同种类的效果，主要包括三 种类型的构件：数据类（如Spry数据集等）、表单类（如Spry 验证文本域等） 和布局类（如Spry 菜单栏等），主要应用于数据处理、表单构成和页面布局等 方面。本章介绍的是布局类Spry构件。
#1C5EAE color font-family 、 font- "楷书"、14px size 4px letter-spacing #FFF background-color #FF9900 #FF9900 #65768A 400px 20px 0 0 40px
网页设计与制作实用教程（第3版）
19
网页设计与制作实用教程（第3版）
24
项目总结
网页设计与制作实用教程（第3版）
25
课后练习
1. 配套实训 利用作业文件夹下提供的素材文件，根据所学的Spry布局类 构件以及JavaScript脚本等方面的知识，为网页设计和制作 较为复杂的特效。要求如下：
使用两种Spry布局类构件。 自行设计几个简单的页面动态效果。 参照教材中的示例代码，自行编写简单的JavaScript函数实现倒计时 功能。
return 表达式;
网页设计与制作实用教程（第3版）
12
制作流程
任务1：使用Spry水平菜单栏制作 导航条 任务2：使用Spry选项卡式面板展 示案例图片
任务3：使用JavaScript脚本实现加 入收藏及分时问候语 任务4：利用CSS+JavaScript脚本 实现图文动态显示
13
网页设计与制作实用教程（第3版）
（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引导，变量的类型取决于它的声明方式。
网页设计与制作实用教程（第3版）
10
预备知识：JAVASCRIPT编程语言初探（4）
2.基本概念： （4）语句：是向浏览器发出命令，其作用是告诉浏览器该做什么。分号用于分隔 JavaScript 语句，使用分号的另一用处是在一行中编写多条语句。JavaScript 对大小写敏感，这在编写语句时一定要特别注意。 与其他语言一样，JavaScript中也包括赋值语句、选择控制语句（switch和if）、 循环控制语句（while、for、for each、do...while、break和continue）以及 with语句、try…catch语句等。
网页设计与制作实用教程（第3版）
18
STEP：
要求 水平菜单栏的 CSS 规则 相关属性 padding Width background-color 参考值 整个构件的填充（顶部、左 .TabbedPanels 侧）适当增加、宽度固定 TabbedPanelsTab 面板选项卡的背景颜色、顶 部边界样式、字体颜色、字 体、字号、字符间隔变化