wml字体格式和图像.ppt

《wml字体格式和图像.ppt》由会员分享，可在线阅读，更多相关《wml字体格式和图像.ppt（21页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、,前言,文本（文字）与图像是手机网页制作中最重要的两大元素。 文本组成了大部分网页的结构，作为网页中最常见也是运用的最广泛的元素之一，是网页内容的核心部分。Wap1.0手机网页中的字体虽然没有电脑网页中字体等绚丽设置，但是 WML中的字体格式标记可以设置文本字号大小，字体粗细，字体强调等，与word相似。 图像是网页美丽的衣衫。图像可以装饰网页，可以表达大量的信息。 作为网页元素，恰当地运用图像可以给网页带来生气，直观形象、丰富多彩的图片可以将网页点缀得令人流连忘返，会给网页带来更好的效果。,3.1 字体格式（七种） 3.2 预定格式 3.3 图像格式 3.4 图像标记及相关属性 3.5 设置

2、图像大小 3.6 设置图像边缘距离 3.7 设置图像与文本对齐方式 3.8 图片与字体格式 3.9 图像路径问题,本章主要内容,【功能】 控制文本字体。 【字体格式标记（7种）】,：设置强调的字体emphasized斜体字 ：设置斜体字体italic意大利Italy比萨斜塔 ：设置有下划线的字体underline ：设置粗体字体bold ：设置强烈强调的字体 ：设置小号的字体 ：设置大号的字体,双字母,单字母,单 词,BS2B,EIU,WORD,【相同效果】 与效果同 与效果同 建议使用和,【记忆】哎呦（eiu），小魔鱼（BS2B）,字体标记的讲解以标记为例,WML字体格式标记,【语法格式】

3、所有字体格式均为对称标记，因为需把要修饰的包含进来。 其中省略号为： #PCDATA（任意字符） 嵌套使用 标记任意嵌套实现字体格式多样化 嵌套 其他标记，如、。,【#PCDATA示例】 WAP WAP WAP WAP WAP,【示例】 WAP,WML字体格式标记,【嵌套使用示例】 WAP WAP 说明：以上两者效果同，与顺序无关。 WAP 说明：可以局部修饰文本。 WAP 说明：和嵌套使用与不修饰相同效果同。 【错误示例】 WAP 说明：封闭、成对。,【其他标记示例】 WAP ,WML字体格式标记,预定格式,【功能】 以原文样式来显示文本数据，保持空格和回车。 【语法格式】 示例 【相关说明

4、】 1.保持空格和回车 2.取消文本数据过长会自动换行的功能 3.M3Gate模拟器尚未支持该标记 4.不要将和混淆,【在HTML文档中使用】 小学文凭， 叫做小本！ ,WML图像,【图像格式】 1.GIF(Graphics Interchange Format)：图像互换格式。 GIF图像文件的数据是经过压缩的。GIF格式是其在一个GIF文件中可以存多幅彩色图像，可构成一种最简单的动画。 2.JPG或JPEG（Joint Photographic Experts Group：“联合图像专家组”的缩写，是最常用的图像文件格式，是一种有损压缩格式，图像中重复或不重要的资料会被丢失，因此容易造成图

5、像数据的损伤。但这种图像格式用最少的磁盘空间得到较好的图像品质。 3.PNG(Portable Network Graphics)：“可移植性网络图像”，是网上接受的最新图像文件格式。Photoshop可以处理PNG图像文件，也可以用PNG图像文件格式存储。有透明部分。 4.BMP：就是“位图”,颜色丰富,可达2的24次幂种(即真彩色),缺点是图像文件太大。不采用其他任何压缩，因此，BMP文件所占用的空间很大。 5.EXIF：1994年富士公司提倡的数码相机图像文件格式，其实与JPG格式相同，区别是除保存图像数据外，还能够存储摄影日期、使用光圈、快门、闪光灯数据等曝光资料和附带信息以及小尺寸图

6、像。,【图像格式】 6.PSD：Photoshop图像处理软件的专用文件格式，可以支持图层、通道、蒙板和不同色彩模式的各种图像特征，是一种非压缩的原始文件保存格式。在图像处理中对于尚未制作完成的图像，选用 PSD格式保存是最佳的选择。 【WML网页使用图像格式】 WML网页（手机浏览器（M3GATE）中能支持的图片格式为PNG格式图像文件。 【FLASH演示透明部分的区别】,WML图像,【相关属性】 1. src属性（必选属性）：设置图片所在路径 其值为图片存放的路径（可以为绝对路径和相对路径） 2. alt属性（必选属性）：以文本说明图片内容 当图片不存在或路径错误时，显示该属性值，一般用来

7、说明该图片的内容。,【格式说明】 1.标记是一个空标记，不能涵盖任何标记或数据。 2.在WML网页中，图片可以出现在任意位置，所以在WML文件中标记可以出现在card内的任意位置。 3.src属性值：图片名大小写均可，扩展名大小写均可，如图片名为“year.png”,可以写为“Year.PNG”或“YEAR.PNG”或“year.png”等。,【语法格式】 说明：标记img为英语“image”的简写,WML图像,WML图像,【示例说明】 第一张图片路径正确，且pic/a.png确实存在； 因为pic/b.png不存在，所以显示alt值。可能改图片想要显示一张年画。, ,【示例】 插入两3张图片

8、当路径不对时，当图片不存在时，显示alt值。,【设置图片大小】 即设置标记的height和width属性，相关说明如下： （1）height属性和width属性为可选属性。 （2）功能：设置图片的高度和宽度（放大或缩小图片） （3）语法格式 （4）属性值 该属性的属性值有两种单位，一种是以像素为单位，另一种是以百分比为单位。 （5）示例 M3GATE不好用,WML图像,【设置边缘距离】 即设置标记的vspace和hspace属性。 （1）vspace属性和hspace属性为可选属性 （2）功能：控制垂直与水平边缘的设置 （3）语法格式 （4）属性值 该属性的属性值有两种单位，一种是以像素为单位

9、，另一种是以百分比为单位。 （5）示例 说明：hspace=“50%”，表示要求该图片在水平左右两端的空隙分别设为50%，所以该图的左右两边的空隙是一样的；vspace=“20%”，表示要求该图片在垂直上下两端的空隙分别设为20%和80%，所以该图上端的空隙将是下端空隙的1/4（M3AGTE中不好用）.后可设置动画效果,WML图像,【图片与文本对齐方式】 即设置标记的align属性 （1）align属性为可选属性 （2）功能：设置图片与文本第一行的位置 （3）语法格式 （4）属性值 top：设置文本第一行靠上显示 middle：设置文本第一行靠中显示 bottom：设置文本第一行靠下显示（默认

10、值）,注：只对文本的第一行起作用,WML图像,【图片与字体格式】 文本 ,标记修饰图片无任何效果，在此处标记是用来修饰文本的。,WML图像,【图片路径问题】 制作网页时，应将网页和图片分开放置（分类，不能大杂烩）。 （1）文档与图片同目录 src = “1.png” （2）文档与图片所在文件夹同目录 src = “subFolder/2.png” （3）文档所在文件夹与图片同目录（两点一线“./”，再往上级以此类推） src = “./3.png” （4）文档所在文件夹与图片所在文件夹同目录 src = “./outFolder/4.png”,WML图像,WML图像,1.WML字体格式标记有哪些，且每个标记的效果是什么？ 2.根据下列条件，写出不同图片路径的img标记的src值（src = ?URL） （1）文档与图片同目录时，src值？ （2）文档与图片所在文件夹同目录时，src值？ （3）文档所在文件夹与图片同目录时，src值？ （4）文档所在文件夹与图片所在文件夹同目录时，src值？,课后作业,WML字体格式标记,WML字体格式标记,实验三、WML字体格式和图像,实验,