网页设计与制作
- 格式：pdf
- 大小：3.03 MB
- 文档页数：53
23
创建交互式按钮
PhotoImpact
“Web”/ “部件设计器”
24
导出交互式按钮图像
25
动画原理与制作
动画的形成是由连续显示数张图片所造的视觉效果，其原 理与卡通影片是一样的，我们可以设定每张图片所停滞时 间，从而造成不同的动画显示速度。 当要制作一张动画时，可使用有支持GIF格式的绘图软件 来制作图像(或扫描进来的影像)，将这些构成动画的连续数 张图像分别储存成不同名称的GIF文档，然后再使用动画制 作软件，如GIF Construction Set或Ulead GIF Animator动画制 作软件来整合这些图像，针对每张图像设定相关的属性(如 显示的停滞时间)，以完成一幅动画的制作，且在这些软件 中就可以直接观看动画的显示。
步骤四：在DreamWeaver的代码视图中，将特效代码 粘贴进去即可。
42
在什么地方插入代码?
一般来说，在网页源代码的 <body>与</body>之间的任何地 方插入代码都可以, (除非特别 指明，例如要求插入到<head> 与</head>之间）。 如何修改代码？ 插入代码之后，可以把代码中的 文本文字替换成你自己的内容。 注意：为避免出错， 不改动文本 文字之外的代码，否则程序可能 会不能运行！ 可修改文字内容
<html> <head> <title></title> <script language="javascript"> <!-today=new Date(); document.write("今天日期是: ",today.getMonth()+1, "/", today.getDate(),"/",today.getYear()); --> </script> </head> <body> </body> </html>
46
简单的Javascript样例1
<html> <head> <title></title> <script language="javascript"> <!-today=new Date(); document.write("今天日期是: ",today.getMonth()+1, "/", today.getDate(),"/",today.getYear()); --> </script> </head> <body> </body> </html>
13
背景
方框
样式的格式
分类 边框 列表 定位 功能 边框属性设置，可设置上、右、下、左边框的 颜色和大小及边框的风格。 列表属性设置，可设置列表的类型、图像列表、 位置。 位置属性设置，可设置层的类型、层的可见性、 层的Z索引值(Z-index) 、当层中的内容超过图 层大小时的处理、定位、图层可见区域。 扩展属性设置,可设置分页打印方式、视觉特效。
26
动态Gif图片的制作
Ulead GIF Animator 对 象 管 理 器 工作窗口
帧窗格
27
使用动画向导制作动画
Ulead GIF Animator
在启动ulead gifanimator 程序时，会显 示一个启动向导来引导我们创建动系列静态图 片连接生成动画
35
制作渐变动画
自动创建
手动创建
36
网页特效
所谓“特效”是指用某种语言编写，或用特效软件编制的， 实现某种网页特殊效果的一段编程代码。 JavaScript是一种扩展到HTML的脚本设计语言,它使网页 开发者可以更有效地控制页面，并能对用户触发事件作出 即时响应，而且这些都不需要客户机与服务器的交互通信, 既为用户提供了更快速的操作，又减小了服务器端的负担。 JavaScript不能脱离HTML而独立存在，只有在支持 JavaScript的浏览器中才能作为HTML页面的一部分起作 用，但它增强了网页的表现力。
欢迎光临
43
可动图片特效
1.图片保存在网 页文件所在的 文件夹下 2.生成代码后就 可以把代码复 制到剪贴板中
44
可动图片特效
3.把代码粘 贴到网页的 源代码中 4.把要替换 的图片复制 到网页所在 文件夹下,在 代码中替换 原图片名.
dragon.gif
45 1.jpg
简单的Javascript样例1
嵌入的javascript以<script language=“javascript”>开头，以</script>结束。 <!-- 和 -->符号用于使脚本跳过没有脚本处理能力的浏览器。 today=new Date() 创建日期对象 document.write(“今天是…) 输出“今天是…” getDate()是Date对象的一种方法，其功能是获得当前的日期。
创建自定义样式
设置链接文字格式 重定义HTML标记 内部样式 外部样式
11
创建CSS样式
4.设置样式的格式
“分类”列表框中提供了8种类型，每个类型对应若 干个CSS属性，一般来说一个样式表只使用部分属性。
12
样式的格式
分类 类型 功能 文字属性设置，可设置文字的字体、大小、样式 (正常、斜体、偏斜体) 、行高、字体粗细、变量 （字母变形） 、大小写、文字颜色、文字修饰。 背景属性设置，可设置背景色、背景图片、是否 重复显示背景图、背景图是否固定、背景图水平 位置、背景图垂直位置。 区块 文字块属性设置，可设置英文单词间距、字母间 距、垂直对齐方式 、文本水平对齐方式、文字缩 进、空格处理和显示方式。 周围边界设置，可设置英文单词间的空白距离、 英文单词中字母与字母之间的间隔距离、图文环 绕方式、文绕图设置、填白区域、边界区域。
网页设计与制作
第六讲
清华大学计算机系基础教学部 2007年4月
内容提要
CSS样式 制作导航栏 制作动画gif图像 网页特效
PhotoImpact
Ulead GIF Animator
2
CSS
CSS(Cascading Style Sheet)层叠式样式表，是国际组织 W3C制定的用来控制页面外观的一系列格式规则。 CSS样式广泛适用于文本、图形等网页元素的格式化工 作，使网页内容与样式设置分开，方便网页的制作和维护， 减少代码，加快网页下载速度。 CSS样式除了广泛应用文本格式外，还可控制页面块级元 素的格式和定位， 实现HTML属性无法实现的样式，使用 CSS的滤镜还可生成特效。
步骤２：执行“帧”/ “添加横幅文本”命令 在文本标签中设置字 体、字号、颜色、阴 影等效果
32
制作横幅文字
设置文字动画效果 设置帧画面的延迟时间
添加霓虹效果
33
制作横幅文字
步骤３：创建横幅文本
步骤４：导出gif动画
34
制作渐变动画
添加图像 修剪画布 执行“帧”/“添加帧副本”命令 选定范围工具：魔术棒
19
CSS应用举例-5
设置文本字体
设置背景图像
20
CSS应用举例-5
使用Alpha滤镜设置半透明图像
Alpha(Opacity=80, FinishOpacity=20, Style=1, StartX=0, StartY=0, FinishX=250, FinishY=180)
使用Glow滤镜制作发光文字
48
简单的Javascript样例2
<html> <head> <script language="javascript"> function message() { alert("欢迎光临!"); } </script> </head> <body onLoad="message()"> </body> </html>
3
CSS的种类(1)
外部样式表
将CSS样式保存为单独的一个文件(.css)，网 页中可以创建对某个现成样式表的链接，而 且多个网页可以使用同一个样式表的样式。
链接外部样式表
4
CSS的种类(2)
内部样式表
•
嵌入式样式
对某个具体的网页定义的样式,它的表现形式是直接将样式 插入到网页的HTML代码中，定义的样式自动应用到网页中
39
使用特效代码
/goodweb/javascript/index0.htm
40
使用特效代码
/js/js.asp?jscat_id=5
41
使用呼吸主页秀制作网页特效
步骤一：选择一种特效，设置 参数，然后生成代码 步骤二：预览，观看效果 步骤三：复制特效代码
function 函数名(参数列表) { 函数体 } alert() 以对话框显示信息 Javascript的方法 onLoad 元素装载 javascript的事件
事件是浏览器响应用户操作的机制，如单击链接按钮时，便产生一 个事件。浏览器总在等待事件发生，并在发生事件时，进行相应的 处理。处理的过程称为事件处理，进行这种处理的代码称为事件处 理器。
<style type=“text/css> 样式定义 </style>
5
CSS的种类(2)
内部样式表
•局部应用样式
也是对某个具体的网页定义的样式，定 义的样式显示在样式表面板中，可以选 择网页对象使用所定义的样式
创建交互式按钮
PhotoImpact
“Web”/ “部件设计器”
24
导出交互式按钮图像
25
动画原理与制作
动画的形成是由连续显示数张图片所造的视觉效果，其原 理与卡通影片是一样的，我们可以设定每张图片所停滞时 间，从而造成不同的动画显示速度。 当要制作一张动画时，可使用有支持GIF格式的绘图软件 来制作图像(或扫描进来的影像)，将这些构成动画的连续数 张图像分别储存成不同名称的GIF文档，然后再使用动画制 作软件，如GIF Construction Set或Ulead GIF Animator动画制 作软件来整合这些图像，针对每张图像设定相关的属性(如 显示的停滞时间)，以完成一幅动画的制作，且在这些软件 中就可以直接观看动画的显示。
步骤四：在DreamWeaver的代码视图中，将特效代码 粘贴进去即可。
42
在什么地方插入代码?
一般来说，在网页源代码的 <body>与</body>之间的任何地 方插入代码都可以, (除非特别 指明，例如要求插入到<head> 与</head>之间）。 如何修改代码？ 插入代码之后，可以把代码中的 文本文字替换成你自己的内容。 注意：为避免出错， 不改动文本 文字之外的代码，否则程序可能 会不能运行！ 可修改文字内容
<html> <head> <title></title> <script language="javascript"> <!-today=new Date(); document.write("今天日期是: ",today.getMonth()+1, "/", today.getDate(),"/",today.getYear()); --> </script> </head> <body> </body> </html>
46
简单的Javascript样例1
<html> <head> <title></title> <script language="javascript"> <!-today=new Date(); document.write("今天日期是: ",today.getMonth()+1, "/", today.getDate(),"/",today.getYear()); --> </script> </head> <body> </body> </html>
13
背景
方框
样式的格式
分类 边框 列表 定位 功能 边框属性设置，可设置上、右、下、左边框的 颜色和大小及边框的风格。 列表属性设置，可设置列表的类型、图像列表、 位置。 位置属性设置，可设置层的类型、层的可见性、 层的Z索引值(Z-index) 、当层中的内容超过图 层大小时的处理、定位、图层可见区域。 扩展属性设置,可设置分页打印方式、视觉特效。
26
动态Gif图片的制作
Ulead GIF Animator 对 象 管 理 器 工作窗口
帧窗格
27
使用动画向导制作动画
Ulead GIF Animator
在启动ulead gifanimator 程序时，会显 示一个启动向导来引导我们创建动系列静态图 片连接生成动画
35
制作渐变动画
自动创建
手动创建
36
网页特效
所谓“特效”是指用某种语言编写，或用特效软件编制的， 实现某种网页特殊效果的一段编程代码。 JavaScript是一种扩展到HTML的脚本设计语言,它使网页 开发者可以更有效地控制页面，并能对用户触发事件作出 即时响应，而且这些都不需要客户机与服务器的交互通信, 既为用户提供了更快速的操作，又减小了服务器端的负担。 JavaScript不能脱离HTML而独立存在，只有在支持 JavaScript的浏览器中才能作为HTML页面的一部分起作 用，但它增强了网页的表现力。
欢迎光临
43
可动图片特效
1.图片保存在网 页文件所在的 文件夹下 2.生成代码后就 可以把代码复 制到剪贴板中
44
可动图片特效
3.把代码粘 贴到网页的 源代码中 4.把要替换 的图片复制 到网页所在 文件夹下,在 代码中替换 原图片名.
dragon.gif
45 1.jpg
简单的Javascript样例1
嵌入的javascript以<script language=“javascript”>开头，以</script>结束。 <!-- 和 -->符号用于使脚本跳过没有脚本处理能力的浏览器。 today=new Date() 创建日期对象 document.write(“今天是…) 输出“今天是…” getDate()是Date对象的一种方法，其功能是获得当前的日期。
创建自定义样式
设置链接文字格式 重定义HTML标记 内部样式 外部样式
11
创建CSS样式
4.设置样式的格式
“分类”列表框中提供了8种类型，每个类型对应若 干个CSS属性，一般来说一个样式表只使用部分属性。
12
样式的格式
分类 类型 功能 文字属性设置，可设置文字的字体、大小、样式 (正常、斜体、偏斜体) 、行高、字体粗细、变量 （字母变形） 、大小写、文字颜色、文字修饰。 背景属性设置，可设置背景色、背景图片、是否 重复显示背景图、背景图是否固定、背景图水平 位置、背景图垂直位置。 区块 文字块属性设置，可设置英文单词间距、字母间 距、垂直对齐方式 、文本水平对齐方式、文字缩 进、空格处理和显示方式。 周围边界设置，可设置英文单词间的空白距离、 英文单词中字母与字母之间的间隔距离、图文环 绕方式、文绕图设置、填白区域、边界区域。
网页设计与制作
第六讲
清华大学计算机系基础教学部 2007年4月
内容提要
CSS样式 制作导航栏 制作动画gif图像 网页特效
PhotoImpact
Ulead GIF Animator
2
CSS
CSS(Cascading Style Sheet)层叠式样式表，是国际组织 W3C制定的用来控制页面外观的一系列格式规则。 CSS样式广泛适用于文本、图形等网页元素的格式化工 作，使网页内容与样式设置分开，方便网页的制作和维护， 减少代码，加快网页下载速度。 CSS样式除了广泛应用文本格式外，还可控制页面块级元 素的格式和定位， 实现HTML属性无法实现的样式，使用 CSS的滤镜还可生成特效。
步骤２：执行“帧”/ “添加横幅文本”命令 在文本标签中设置字 体、字号、颜色、阴 影等效果
32
制作横幅文字
设置文字动画效果 设置帧画面的延迟时间
添加霓虹效果
33
制作横幅文字
步骤３：创建横幅文本
步骤４：导出gif动画
34
制作渐变动画
添加图像 修剪画布 执行“帧”/“添加帧副本”命令 选定范围工具：魔术棒
19
CSS应用举例-5
设置文本字体
设置背景图像
20
CSS应用举例-5
使用Alpha滤镜设置半透明图像
Alpha(Opacity=80, FinishOpacity=20, Style=1, StartX=0, StartY=0, FinishX=250, FinishY=180)
使用Glow滤镜制作发光文字
48
简单的Javascript样例2
<html> <head> <script language="javascript"> function message() { alert("欢迎光临!"); } </script> </head> <body onLoad="message()"> </body> </html>
3
CSS的种类(1)
外部样式表
将CSS样式保存为单独的一个文件(.css)，网 页中可以创建对某个现成样式表的链接，而 且多个网页可以使用同一个样式表的样式。
链接外部样式表
4
CSS的种类(2)
内部样式表
•
嵌入式样式
对某个具体的网页定义的样式,它的表现形式是直接将样式 插入到网页的HTML代码中，定义的样式自动应用到网页中
39
使用特效代码
/goodweb/javascript/index0.htm
40
使用特效代码
/js/js.asp?jscat_id=5
41
使用呼吸主页秀制作网页特效
步骤一：选择一种特效，设置 参数，然后生成代码 步骤二：预览，观看效果 步骤三：复制特效代码
function 函数名(参数列表) { 函数体 } alert() 以对话框显示信息 Javascript的方法 onLoad 元素装载 javascript的事件
事件是浏览器响应用户操作的机制，如单击链接按钮时，便产生一 个事件。浏览器总在等待事件发生，并在发生事件时，进行相应的 处理。处理的过程称为事件处理，进行这种处理的代码称为事件处 理器。
<style type=“text/css> 样式定义 </style>
5
CSS的种类(2)
内部样式表
•局部应用样式
也是对某个具体的网页定义的样式，定 义的样式显示在样式表面板中，可以选 择网页对象使用所定义的样式
