wml字体格式和图像.pptx

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

1、前言 文本（文字）与图像是手机网页制作中最重要的两大元文本（文字）与图像是手机网页制作中最重要的两大元素。素。文本组成了大部分网页的结构，作为网页中最常见也是文本组成了大部分网页的结构，作为网页中最常见也是运用的最广泛的元素之一，是网页内容的核心部分。运用的最广泛的元素之一，是网页内容的核心部分。Wap1.0手机网页中的字体虽然没有电脑网页中字体等绚丽设置，但手机网页中的字体虽然没有电脑网页中字体等绚丽设置，但是是 WML中的字体格式标记可以设置文本字号大小，字体粗细，中的字体格式标记可以设置文本字号大小，字体粗细，字体强调等，与字体强调等，与word相似。相似。图像是网页美丽的衣衫。图像可以

2、装饰网页，可以表达图像是网页美丽的衣衫。图像可以装饰网页，可以表达大量的信息。大量的信息。作为网页元素，恰当地运用图像可以给网页带来生气，作为网页元素，恰当地运用图像可以给网页带来生气，直观形象、丰富多彩的图片可以将网页点缀得令人流连忘返，直观形象、丰富多彩的图片可以将网页点缀得令人流连忘返，会给网页带来更好的效果。会给网页带来更好的效果。第1页/共21页3.1 字体格式（七种）字体格式（七种）3.2 预定格式预定格式3.3 图像格式图像格式3.4 图像标记及相关属性图像标记及相关属性3.5 设置图像大小设置图像大小3.6 设置图像边缘距离设置图像边缘距离3.7 设置图像与文本对齐方式设置图像

3、与文本对齐方式3.8 图片与字体格式图片与字体格式3.9 图像路径问题图像路径问题本章主要内容第2页/共21页【功能功能】控制文本字体。控制文本字体。【字体格式标记（字体格式标记（7种）种）】：设置强调的字体：设置强调的字体emphasized斜体字斜体字：设置斜体字体：设置斜体字体italic意大利意大利Italy比萨斜塔比萨斜塔：设置有下划线的字体：设置有下划线的字体underline：设置粗体字体：设置粗体字体bold：设置强烈强调的字体：设置强烈强调的字体：设置小号的字体：设置小号的字体：设置大号的字体：设置大号的字体双字母双字母单字母单字母单单 词词BS2BEIUWORD【相同效果相

4、同效果】与与效果同效果同 与与效果同效果同 建议使用建议使用和和【记忆记忆】哎呦（哎呦（eiueiu），小魔鱼（），小魔鱼（BS2BBS2B）字体标记的讲解以标记字体标记的讲解以标记为例为例WML字体格式标记第3页/共21页【语法格式语法格式】所有字体格式均为对称标记，因为需把要修饰的包含进来。所有字体格式均为对称标记，因为需把要修饰的包含进来。其中省略号为：其中省略号为：#PCDATA（任意字符）（任意字符）嵌套使用嵌套使用 标记任意嵌套实现字体格式多样化标记任意嵌套实现字体格式多样化 嵌套嵌套 其他标记，如其他标记，如、。【#PCDATA示例示例】WAP WAP WAP WAP WAP【示

5、例示例】WAPWML字体格式标记第4页/共21页【嵌套使用示例嵌套使用示例】WAP WAP 说明：以上两者效果同，与顺序无关。说明：以上两者效果同，与顺序无关。WAP 说明：可以局部修饰文本。说明：可以局部修饰文本。WAP 说明：说明：和和嵌套使用与不修饰相同效果同。嵌套使用与不修饰相同效果同。【错误示例错误示例】WAP 说明：封闭、成对。说明：封闭、成对。【其他标记示例其他标记示例】WAP WML字体格式标记第5页/共21页预定格式【功能功能】以原文样式来显示文本数据，保持空格和回车。以原文样式来显示文本数据，保持空格和回车。【语法格式语法格式】示例示例【相关说明相关说明】1.保持空格和回车

6、保持空格和回车 2.取消文本数据过长会自动换行的功能取消文本数据过长会自动换行的功能 3.M3Gate模拟器尚未支持该标记模拟器尚未支持该标记 4.不要将不要将和和混淆混淆【在在HTML文档中使用文档中使用】小学文凭，小学文凭，叫做小本！叫做小本！第6页/共21页WML图像【图像格式图像格式】1.GIF(Graphics Interchange Format)：图像互换格式。：图像互换格式。GIF图像文件的数据是经过压缩的。图像文件的数据是经过压缩的。GIF格式是其在一个格式是其在一个GIF文件中可文件中可以存多幅彩色图像，可以存多幅彩色图像，可构成一种最简单的动画构成一种最简单的动画。2.J

7、PG或或JPEG（Joint Photographic Experts Group：“联联合图像专家组合图像专家组”的缩写，是最常用的图像文件格式，是一种有损压缩的缩写，是最常用的图像文件格式，是一种有损压缩格式，图像中重复或不重要的资料会被丢失，因此容易造成图像数据格式，图像中重复或不重要的资料会被丢失，因此容易造成图像数据的损伤。但的损伤。但这种图像格式用最少的磁盘空间得到较好的图像品质这种图像格式用最少的磁盘空间得到较好的图像品质。3.PNG(Portable Network Graphics)：“可移植性网络图像可移植性网络图像”，是网上接受的最新图像文件格式。，是网上接受的最新图像文

8、件格式。Photoshop可以处理可以处理PNG图像图像文件，也可以用文件，也可以用PNG图像文件格式存储。图像文件格式存储。有透明部分有透明部分。4.BMP：就是：就是“位图位图”,颜色丰富颜色丰富,可达可达2的的24次幂次幂种种(即真彩色即真彩色),缺缺点是图像文件太大。点是图像文件太大。不采用其他任何压缩，因此，不采用其他任何压缩，因此，BMP文件所占用的文件所占用的空间很大。空间很大。5.EXIF：1994年富士公司提倡的年富士公司提倡的数码相机图像文件格式数码相机图像文件格式，其实与，其实与JPG格式相同，区别是除保存图像数据外，还能够存储摄影日期、使格式相同，区别是除保存图像数据外

9、，还能够存储摄影日期、使用光圈、快门、闪光灯数据等曝光资料和附带信息以及小尺寸图像。用光圈、快门、闪光灯数据等曝光资料和附带信息以及小尺寸图像。第7页/共21页【图像格式图像格式】6.PSD：Photoshop图像处理软件的专用文件格式，可以支持图层、图像处理软件的专用文件格式，可以支持图层、通道、蒙板和不同色彩模式的各种图像特征，是一种非压缩的原始文件通道、蒙板和不同色彩模式的各种图像特征，是一种非压缩的原始文件保存格式。保存格式。在图像处理中对于尚未制作完成的图像，选用在图像处理中对于尚未制作完成的图像，选用 PSD格式保存格式保存是最佳的选择。是最佳的选择。【WML网页使用图像格式网页使

10、用图像格式】WML网页（手机浏览器（网页（手机浏览器（M3GATE）中能支持的图片格式为）中能支持的图片格式为PNG格式格式图像文件。图像文件。【FLASH演示透明部分的区别演示透明部分的区别】WML图像第8页/共21页【相关属性相关属性】1.src属性（必选属性）：设置图片所在路径属性（必选属性）：设置图片所在路径 其值为图片存放的路径（可以为绝对路径和相对路径）其值为图片存放的路径（可以为绝对路径和相对路径）2.alt属性（必选属性）：以文本说明图片内容属性（必选属性）：以文本说明图片内容 当图片不存在或路径错误时，显示该属性值，一般用来说明该图当图片不存在或路径错误时，显示该属性值，一般

11、用来说明该图片的内容。片的内容。【格式说明格式说明】1.标记是一个空标记，不能涵盖任何标记或数据。标记是一个空标记，不能涵盖任何标记或数据。2.在在WML网页中，图片可以出现在任意位置，所以在网页中，图片可以出现在任意位置，所以在WML文件中文件中标记可以出现在标记可以出现在card内的任意位置。内的任意位置。3.src属性值：图片名大小写均可，扩展名大小写均可，如图片属性值：图片名大小写均可，扩展名大小写均可，如图片名为名为“year.png”,可以写为可以写为“Year.PNG”或或“YEAR.PNG”或或“year.png”等。等。【语法格式语法格式】说明：标记说明：标记img为英语为英

12、语“image”的简写的简写WML图像第9页/共21页WML图像【示例说明示例说明】第一张图片路径正确，且第一张图片路径正确，且pic/a.png确实存在；确实存在；因为因为pic/b.png不存在，所以显示不存在，所以显示alt值。可能改图片想要显示一值。可能改图片想要显示一张年画。张年画。【示例示例】插入两插入两3张图片张图片当路径不对时，当图片不存在时，显示当路径不对时，当图片不存在时，显示alt值。值。第10页/共21页【设置图片大小设置图片大小】即设置即设置标记的标记的height和和width属性，相关说明如下：属性，相关说明如下：（1）height属性和属性和width属性为可选

13、属性。属性为可选属性。（2）功能：设置图片的高度和宽度（放大或缩小图片）功能：设置图片的高度和宽度（放大或缩小图片）（3）语法格式）语法格式 （4）属性值）属性值 该属性的属性值有两种单位，一种是以像素为单位，另一种是该属性的属性值有两种单位，一种是以像素为单位，另一种是以百分比为单位。以百分比为单位。（5）示例）示例 M3GATE不好用不好用WML图像第11页/共21页【设置边缘距离设置边缘距离】即设置即设置标记的标记的vspace和和hspace属性。属性。（1）vspace属性和属性和hspace属性为可选属性属性为可选属性（2）功能：控制垂直与水平边缘的设置）功能：控制垂直与水平边缘的

14、设置（3）语法格式）语法格式 （4）属性值）属性值 该属性的属性值有两种单位，一种是以像素为单位，另一种是该属性的属性值有两种单位，一种是以像素为单位，另一种是以百分比为单位。以百分比为单位。（5）示例）示例 说明：说明：hspace=“50%”，表示要求该图片在水平左右两端的空隙分别，表示要求该图片在水平左右两端的空隙分别设为设为50%，所以该图的左右两边的空隙是一样的；，所以该图的左右两边的空隙是一样的；vspace=“20%”，表示要求该图片在垂直上下两端的空隙分别设为表示要求该图片在垂直上下两端的空隙分别设为20%和和80%，所以该图，所以该图上端的空隙将是下端空隙的上端的空隙将是下端

15、空隙的1/4（M3AGTE中不好用）中不好用）.后可设置动画后可设置动画效果效果WML图像第12页/共21页【图片与文本对齐方式图片与文本对齐方式】即设置即设置标记的标记的align属性属性（1）align属性为可选属性属性为可选属性（2）功能：设置图片与文本第一行的位置）功能：设置图片与文本第一行的位置（3）语法格式）语法格式 （4）属性值）属性值 top：设置文本第一行靠上显示：设置文本第一行靠上显示 middle：设置文本第一行靠中显示：设置文本第一行靠中显示 bottom：设置文本第一行靠下显示（默认值）：设置文本第一行靠下显示（默认值）注：只对文本的第一行起作用注：只对文本的第一行起

16、作用WML图像第13页/共21页【图片与字体格式图片与字体格式】文本文本 标记修饰图片无任何效果，在此处标记修饰图片无任何效果，在此处标记是用来修饰文本的。标记是用来修饰文本的。WML图像第14页/共21页【图片路径问题图片路径问题】制作网页时，应将网页和图片分开放置（分类，不能大杂烩）。制作网页时，应将网页和图片分开放置（分类，不能大杂烩）。（1）文档与图片同目录）文档与图片同目录 src=“1.png”（2）文档与图片所在文件夹同目录）文档与图片所在文件夹同目录 src=“subFolder/2.png”（3）文档所在文件夹与图片同目录（两点一线）文档所在文件夹与图片同目录（两点一线“./

17、”，再往上级以此，再往上级以此类推）类推）src=“./3.png”（4）文档所在文件夹与图片所在文件夹同目录）文档所在文件夹与图片所在文件夹同目录 src=“./outFolder/4.png”WML图像第15页/共21页WML图像第16页/共21页 1.WML字体格式标记有哪些，且每个标记的效果是什么？字体格式标记有哪些，且每个标记的效果是什么？2.根据下列条件，写出不同图片路径的根据下列条件，写出不同图片路径的img标记的标记的src值值（src=?URL）（1）文档与图片同目录时，）文档与图片同目录时，src值？值？（2）文档与图片所在文件夹同目录时，）文档与图片所在文件夹同目录时，src值？值？（3）文档所在文件夹与图片同目录时，）文档所在文件夹与图片同目录时，src值？值？（4）文档所在文件夹与图片所在文件夹同目录时，）文档所在文件夹与图片所在文件夹同目录时，src值？值？课后作业第17页/共21页WML字体格式标记第18页/共21页WML字体格式标记第19页/共21页实验三、实验三、WML字体格式和图像字体格式和图像实验第20页/共21页谢谢您的观看！第21页/共21页