wml字体格式和图像PPT课件

第三章 WML字体格式和图像,前言,文本（文字）与图像是手机网页制作中最重要的两大元素。,文本组成了大部分网页的结构，作为网页中最常见也是运用的最广泛的元素之一，是网页内容的核心部分。Wap1.0手机网页中的字体虽然没有电脑网页中字体等绚丽设置，但是 WML中的字体格式标记可以设置文本字号大小，字体粗细，字体强调等，与word相似。,图像是网页美丽的衣衫。图像可以装饰网页，可以表达大量的信息。,作为网页元素，恰当地运用图像可以给网页带来生气，直观形象、丰富多彩的图片可以将网页点缀得令人流连忘返，会给网页带来更好的效果。,3.1 字体格式（七种）,3.2 预定格式,3.3 图像格式,3.4 图像标记及相关属性,3.5 设置图像大小,3.6 设置图像边缘距离,3.7 设置图像与文本对齐方式,3.8 图片与字体格式,3.9 图像路径问题,本章主要内容,【功能】,控制文本字体。,【字体格式标记（7种）】,：设置强调的字体emphasized斜体字,：设置斜体字体italic意大利Italy比萨斜塔,：设置有下划线的字体underline,：设置粗体字体bold,：设置强烈强调的字体,：设置小号的字体,：设置大号的字体,双字母,单字母,单 词,BS2B,EIU,WORD,【相同效果】,与效果同,与效果同,建议使用和,【记忆】哎呦（eiu），小魔鱼（BS2B）,字体标记的讲解以标记为例,WML字体格式标记,【语法格式】,所有字体格式均为对称标记，因为需把要修饰的包含进来。,其中省略号为：,#PCDATA（任意字符）,嵌套使用,标记任意嵌套实现字体格式多样化,嵌套,其他标记，如、。,【#PCDATA示例】,WAP,WAP,WAP,WAP,WAP,【示例】,WAP,WML字体格式标记,【嵌套使用示例】,WAP,WAP,说明：以上两者效果同，与顺序无关。,WAP,说明：可以局部修饰文本。,WAP,说明：和嵌套使用与不修饰相同效果同。,【错误示例】,WAP,说明：封闭、成对。,【其他标记示例】,WAP,WML字体格式标记,预定格式,【功能】,以原文样式来显示文本数据，保持空格和回车。,【语法格式】,示例,【相关说明】,1.保持空格和回车,2.取消文本数据过长会自动换行的功能,3.M3Gate模拟器尚未支持该标记,4.不要将和混淆,【在HTML文档中使用】,小学文凭，,叫做小本！,WML图像,【图像格式】,1.GIF(Graphics Interchange Format)：图像互换格式。GIF图像文件的数据是经过压缩的。GIF格式是其在一个GIF文件中可以存多幅彩色图像，可,构成一种最简单的动画,。,2.JPG或JPEG（Joint Photographic Experts Group：“联合图像专家组”的缩写，是最常用的图像文件格式，是一种有损压缩格式，图像中重复或不重要的资料会被丢失，因此容易造成图像数据的损伤。但,这种图像格式用最少的磁盘空间得到较好的图像品质,。,3.PNG(Portable Network Graphics)：“可移植性网络图像”，是网上接受的最新图像文件格式。Photoshop可以处理PNG图像文件，也可以用PNG图像文件格式存储。,有透明部分,。,4.BMP：就是“位图”,颜色丰富,可达2的,24次幂,种(即真彩色),缺点是图像文件太大。,不采用其他任何压缩，因此，BMP文件所占用的空间很大。,5.EXIF：1994年富士公司提倡的,数码相机图像文件格式,，其实与JPG格式相同，区别是除保存图像数据外，还能够存储摄影日期、使用光圈、快门、闪光灯数据等曝光资料和附带信息以及小尺寸图像。,【图像格式】,6.PSD：Photoshop图像处理软件的专用文件格式，可以支持图层、通道、蒙板和不同色彩模式的各种图像特征，是一种非压缩的原始文件保存格式。,在图像处理中对于尚未制作完成的图像，选用 PSD格式保存是最佳的选择。,【WML网页使用图像格式】,WML网页（手机浏览器（M3GATE）中能支持的图片格式为PNG格式图像文件。,【FLASH演示透明部分的区别】,WML图像,【相关属性】,1.src属性（必选属性）：设置图片所在路径,其值为图片存放的路径（可以为绝对路径和相对路径）,2.alt属性（必选属性）：以文本说明图片内容,当图片不存在或路径错误时，显示该属性值，一般用来说明该图片的内容。,【格式说明】,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张图片当路径不对时，当图片不存在时，显示alt值。,【设置图片大小】,即设置标记的height和width属性，相关说明如下：,（1）height属性和width属性为可选属性。,（2）功能：设置图片的高度和宽度（放大或缩小图片）,（3）语法格式,（4）属性值,该属性的属性值有两种单位，一种是以像素为单位，另一种是以百分比为单位。,（5）示例,M3GATE不好用,WML图像,【设置边缘距离】,即设置标记的vspace和hspace属性。,（1）vspace属性和hspace属性为可选属性,（2）功能：控制垂直与水平边缘的设置,（3）语法格式,（4）属性值,该属性的属性值有两种单位，一种是以像素为单位，另一种是以百分比为单位。,（5）示例,说明：hspace=“50%”，表示要求该图片在水平左右两端的空隙分别设为50%，所以该图的左右两边的空隙是一样的；vspace=“20%”，表示要求该图片在垂直上下两端的空隙分别设为20%和80%，所以该图上端的空隙将是下端空隙的1/4（M3AGTE中不好用）.后可设置动画效果,WML图像,【图片与文本对齐方式】,即设置标记的align属性,（1）align属性为可选属性,（2）功能：设置图片与文本第一行的位置,（3）语法格式,（4）属性值,top：设置文本第一行靠上显示,middle：设置文本第一行靠中显示,bottom：设置文本第一行靠下显示（默认值）,注：只对文本的第一行起作用,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字体格式和图像,实验,