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

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