网页中文本图像和动画元素.ppt

网页中文本图像和动画元素
Speaker：
适用于公司介绍/新品发布/融资宣讲/商务路演
1. 网页中的文本元素
文字应尽量符合人们的阅读****惯
除一般文字外，网页中可能还会包含一些特殊文字 ，如换行符、不换行空格符、水平线等
样张所示，其中的“计算机的发展史”，单击“显示器的使用”，。
19
华东师范大学计算中心
图1
20
华东师范大学计算中心
（3），在文档的最下方，增加能够左右交替移动的文字“电脑与生活”，蓝色的文字在黄色的背景上。
21
华东师范大学计算中心
（4）在c:\sy站点中建立文件夹txt，并将素材中的“”文件导入到其中。
最终效果在浏览器中显示
22
华东师范大学计算中心
3. 图像处理
恰当的使用图像，可以使网页的表现能力事半功倍。但是过多的使用图片，会增加网页下载流量，影响网页的浏览速度
目前网页中使用较多的图像格式
GIF：
GIF图像格式用于透明图像或动画
256色
JPG：
JPG图像格式多用于质量要求较高的图像
真彩色，可设定质量因子
图像的HTML标签：<img src=“……" />
23
华东师范大学计算中心
插入图像
插入图像时，为了确保图像引用的正确性，图像文件尽量置于当前站点中
菜单【插入】【图像】，在【选择图像源文件】对话框中选择所需文件
或者，将图像从【文件】面板中直接拖曳到【文档】窗口中的所需位置
弹出【图像标签辅助功能属性】对话框，用以设置【替代文本】和【详细描述】。根据需要输入，完成图像插入
24
华东师范大学计算中心
设置图像
设置图像大小
直接用鼠标拖曳改变图像大小
使用【属性检查器】精确设置
设置替换文字
设置替换文字后，当在浏览器浏览时，图像如果没有被正常下载，将会在浏览器中显示替换文字
为图像添加超级接
在【属性检查器】中设置图像链接和目标后，浏览时点击图像即可转向目标位置
25
华东师范大学计算中心
设置图像
设置图像边距
【垂直边距】指图像的顶部和底部与其他元素的距离
【水平边距】指图像左侧和右侧与其他元素的距离
设置低解析度源
低解析度源指定在载入主图像之前应该载入的图像
有时，对于一些比较大的图像，可以设置低解析度源为原图像的黑白版本（黑白图较原图小）
设置对齐方式
设置图像边框
26
华东师范大学计算中心
设置图像
图像地图与热点设置
图像地图指已被分为多个区域（或称“热点”）的图像；当用户单击某个热点时，会发生某种操作（例如，打开一个新网页等）。这样，就相当于在一幅图像上设置了多个链接
矩形热点工具
椭圆热点工具
多边形热点工具
27
华东师范大学计算中心
一幅中国地图的北京与上海位置处设置了两个热点，分别指向北京和上海网页的链接
28
华东师范大学计算中心
编辑图像
裁剪图像
单击【裁剪】按钮，用鼠标在图像的8个切割点上拖曳裁剪
修正图像亮度和对比度
调整图像的高亮显示、阴影和中间色调
锐化图像
通过增加图像中边缘的对比度来调整图像的焦点，使图像更清晰
29
华东师范大学计算中心
插入网页背景图
切忌使用过大的图像，这样会影响浏览速度
一般也不用颜色太深太复杂的图像，这样容易“喧宾夺主”
在【属性检查器】中单击【页面属性】，弹出【页面属性】对话框，选择【外观】，然后选择需要添加的背景图
30
华东师范大学计算中心
4. 在网页中插入Flash动画及其他多媒体
Flash动画凭借其较好的画质、精简的大小、开发较易和提供简单的互动等诸多优点，已被越来越多的应用在网页设计中
31
华东师范大学计算中心
插入已有的Flash动画
打开菜单【插入】【媒体】，在弹出的选单中选择Flash
插入Flash动画后，使用【属性检查器】可以设置常用Flash动画属性
大小、边距、是否循环、是否自动播放、品质、显示比例、背景颜色、对齐方式等
还可以设置Flash插件的各种特殊参数
32
华东师范大学计算中心
单击【属性检查器】右下方的【参数】按钮，在弹出的【参数】对话框中，可以设置Flash插件的特殊参数。
如参数“wmode”设置为“transparent”，表示Flash动画背景将为透明
33
华东师范大学计算中心
插入Flash按钮
Flash按钮可用于网页导航，样式较文字导航美观
打开菜单【插入】【媒体】【Flash按钮】，选择按钮样式，输入按钮文本、链接地