《第4章让网页动起来ppt课件》由会员分享，可在线阅读，更多相关《第4章让网页动起来ppt课件（155页珍藏版）》请在金锄头文库上搜索。
1、,Tianjin Foreign Studies University,天津外国语学院 教育技术系,网页设计技术,天津外国语学院,2018年10月,总 目 录,第1章 网页无处不在 第2章 网页的风格设计 第3章 网页的基本语言HTML 第4章 让网页动起来 第5章 用Dreamweaver制作网页 第6章 用Dreamweaver制作动态网页,第4章 让网页动起来,4.1 动态的网页 4.2 层叠样式表 4.3 JavaScript 4.4 动态网页技术实例,4.1 动态的网页,动态网页指的是使用DHTML（动态HTML）技术的网页。比如，当鼠标移到某段文字上时能弹出一个快捷菜单，又比如一个
2、图片能慢慢显现出来等。 DHTML通常需要和脚本语言（JavaScript）、层叠样式表（CSS）、及层技术组合在一起使用。,第4章 让网页动起来,4.1 动态的网页 4.2 层叠样式表 4.3 JavaScript 4.4 动态网页技术实例,4.2 层叠样式表（CSS）,CSS是Cascading Style Sheet的缩写，人们通常把它翻译为“级联样式表”。 那么为什么会提出CSS呢? CSS又能做什么呢? 比如要把页面中的每段文字都用红色显示，可以将HTML源码写成如下形式：段落一段落二,1. CSS的提出,如果想让文字都用黑色显示，则必须对每段文字都进行修改。这对于一个庞大的HTML
3、页来说，是相当繁重的。于是人们想到可不可以只改一个地方，就让文字全显示成黑色呢?这就是CSS概念的形成。,CSS的提出,引入CSS之后，上面的语句可以写成如下形式：段落一 段落二,CSS最大的优点就在于把内容和格式分离开来，使得不仅能够统一内容的显示格式，而且通过改变显示格式(比如大小、颜色、字体等)，可以达到动态的效果。,CSS的提出,CSS可以分为三种：内联式样式表、嵌入式样式表和外部样式表。它们拥有不同的优先级，优先级越高，在显示时就被优先采用。,它利用现有的HTML标记，把特殊的样式直接加入到那些控制信息的标记中。,2. 内联式样式表,比如：内联式样式表 这种样式表只会对当前的这个p标
4、记起作用，而不会影响HTML文档中的其他p标记。,例1内联样式表举例。这段文字将显示为红色 这段文字的背景色为黄色 这段文字将以黑体显示 ,内联式样式表,内联式样式表,这种样式单通常写在HTML文档的头部中(和之间)，使用和标记装载。,3. 嵌入式样式表,书写格式： ,这种样式表会对HTML文档中所有标记都起作用。,例2嵌入式样式表举例。 嵌入式样式表举例网页设计与制作 CSS可以分为三种：内联式样式表、嵌入式样式表和外部样式表。 它们拥有不同的优先级，优先级越高，在显示时就被越后采用。,嵌入式样式表,嵌入式样式表,问题：并不想让所有p元素的文本都用同一种样式。,3. 嵌入式样式表,解决：通过
5、将p元素定义为多种样式，然后对不同段落通过class属性应用不同的样式。,嵌入式样式表举例网页设计与制作 CSS可以分为三种：内联式样式表、嵌入式样式表和外部样式表。 它们拥有不同的优先级，优先级越高，在显示时就被越后采用。,嵌入式样式表,嵌入式样式表,还有一种更灵活的方式，就是不为任何HTML元素定义样式表，而是直接定义一个样式，然后以添加class属性的方式将其应用到某个元素上。,3. 嵌入式样式表,嵌入式样式表举例网页设计与制作 CSS可以分为三种：内联式样式表、嵌入式样式表和外部样式表。 它们拥有不同的优先级，优先级越高，在显示时就被越后采用。,嵌入式样式表,是指保存在外部的样式表文件
6、，这个文件以.css为文件的扩展名，在HTML文档中通常用标记1ink来链接这个外部文件。,4. 外部式样式表,格式：,样式表文件的url,mystyle.css 内容如下：.firstcolor:#000000;font-family:宋体;font-size:9pt.secondcolor:#00ff00;font-family:宋体;font-size:10pth1color:#ff0000;font-family:黑体,外部式样式表,Html文件如下：,注意：link元素位于和之间。,一般来说，内联式样式表的优先级大于嵌入式样式表的优先级，嵌入式样式表的优先级又大于外部式样式表的优先级
7、。即内联式嵌入式外部式。优先级越高，在显示时就被优先采用。 注意：如果链接外部样式表的元素位于嵌入式样式表的后面，则外部式嵌入式,同时使用多层样式表,例3 举例。 嵌入式样式表举例网页设计与制作 CSS可以分为三种：内联式样式表、嵌入式样式表和外部样式表。 它们拥有不同的优先级，优先级越高，在显示时就被越后采用。,同时使用多层样式表,外部式,内联式,同时使用多层样式表,例3 举例。 嵌入式样式表举例网页设计与制作 CSS可以分为三种：内联式样式表、嵌入式样式表和外部样式表。 它们拥有不同的优先级，优先级越高，在显示时就被越后采用。,同时使用多层样式表,同时使用多层样式表,同时使用多层样式表,p
8、 color: #FF0000; font-family: 宋体;font-size: 9pt;font-style: italic;font-weight: bold;text-decoration: underline;background:yellow,用CSS滤镜制作文字特效,CSS滤镜只能作用于有区域限制的对象，比如表格(table)、单元格(td)、图片等。 1)光晕字 Glow(color=?,strength=?) Strength表示发光强度，范围是：0255。,2)阴影字 dropshadow(color=#000000,offx=-2,offy=2,positive=1)
9、 Offx和offy分别代表X方向和Y方向阴影偏离文字位置的量，单位为像素，为整数值。 Positive=1表示为所有不透明元素建立阴影。,用CSS滤镜制作文字特效,3)遮罩字（镂空字） mask(color=?) Color表示遮罩的颜色。,用CSS滤镜制作文字特效,4)动感字 blur(add=?,direction=?,strength=?) Add=1表示滤镜用于图片；Add=0表示滤镜用于文字。 Direction表示模糊方向，单位为度，按顺时针方向进行，0表示垂直向上，每45度一个单位，故可以取值：0、45、90、135、180、225、270、315。 Strength表示模糊移
10、动值，单位为像素。,用CSS滤镜制作文字特效,第4章 让网页动起来,4.1 动态的网页 4.2 层叠样式表 4.3 JavaScript 4.4 动态网页技术实例,4.3 JavaScript,1. 在HTML中加入JavaScript,JavaScript是一种描述语言，它可以被嵌入HTML文件中，可以做HTML语言做到和做不到的事。当然，我们是让它做HTML语言做不到的事啦。 例如，JavaScript可以回应读者的输入信息而不用任何的网络来回传送。也就是说，当输入一项信息时，它不用传给服务器处理，而直接可以用浏览器处理。 JavaScript和Java很类似，语言区分大小写。,在HTML
11、中加入JavaScript,例1一个JavaScript的例子。句以分号结尾,JavaScript中的注释符： /一行注释 /*多行注释*/,在HTML中加入JavaScript,语法格式：,在HTML中加入JavaScript,是为了避免老版本的浏览器不支持脚本语言。 JavaScript语句可以放在HTML文件中的任何地方。,JavaScript的数据类型有四种。,2. JavaScript的数据类型,(1) 数值类型：包括整数，如12，22；浮点数，如7.234，-3.4，2E3。 (2) 字符串类型：例如，“你好！”、“Hello!”、234、” ”。必须使用双（单）引号括起来。 (3
12、) 布尔类型：只有两个，即true或false。 (4) 空值类型：只有null一个值，它表示什么也没有。空null和0值或空字符串 是不一样的，0值或空字符串 是一个实际值。,注意：JavaScript使用的是弱类型定义，即在定义一个常量或变量时，不需要指明它的数据类型，常量或变量会自动根据所赋的值来选择最合适的数据类型。这一点大大简化了JavaScript的编程。,JavaScript的数据类型,3. JavaScript的变量,变量提供了可以存放信息和数据的地方。变量是可以改变的，它可以存放不同的数据。,变量使用var来声明，语法格式：var 变量名=数据的值,功能：定义一个名字为“变量
13、名”的变量，并且把“数据的值”赋给该变量。,例如：var myvar1;var myvar2=50;var myvar3=“good morning”;,变量的命名：以字母开头，中间可以是任何字母、数字和下划线的组合；其次，变量名不能使用JavaScript的关键字，比如var、JavaScript、alert等。 注意：变量名对大小写敏感（区分大小写）。 JavaScript语言区分大小写。,3. JavaScript的变量,JavaScript有六种运算符： (1)赋值运算符： “=”表示右边的数给左边的变量赋值。例如X=5，5被赋给X； “+=”表示左、右两边数相加，将其结果赋给左边的变
14、量。例如X=5，Y=5，X+=Y将10赋给了X； “=”表示左、右两边数相减，将其结果赋给左边的变量。例如X=5，Y=5，X-=Y将0赋给了X； “*=”表示左、右两边数相乘，将其结果赋给左边的变量。例如X=5，Y=5，X*=Y将25赋给了X； “/=”表示左边的数除右边的数，将其结果赋给左边的变量。例如X=5，Y=5，X/=Y将1赋给了X； “%=”表示左边的数除右边的数，余数赋给左边的变量。例如X=25，Y=7，X=Y将4赋给了X。,4. JavaScript的运算符,(2)算术运算符： 加“+” 减“-” 乘“*” 除“/” 取余“%” 取负“-”：Y=5，则X=-Y，X的值为-5。 递
15、增“+”：例如Y=+5，Y的值为6。 递减“-”： 例如Y=-6，Y的值为5。,4. JavaScript的运算符,(3)字符串运算符： “+”：合并运算符。表示两个字符串的合并，例如：abc+ “你好！”，这个表达式的值为“abc你好！”。 “+=”：将一个字符串加到另一个字符串尾部。如，s1=abc,s2=def,则s1+=s2后，s1的值为abcdef。理解为s1=s1+s2。,4. JavaScript的运算符,(4)比较运算符： “=”：如果两边数据相等返回true，否则返回false。例如，2=2返回true。 “!=”：如果两边数据不相等返回true，否则返回false。 例如， THE!=TH返回true。 “”：如果左边数大于右边数返回true，否则返回false 。例如， 21返回true。 “”：如果左边数大于或等于右边数返回true，否则返回false 。 “1 | 31 |34，其结果也为true。 “！”：逻辑非，当表达式的逻辑值为true时返回结果false，当表达式的逻辑值为false时返回结果true。例如：！21结果为false。,4. JavaScript的运算符,
