第二讲 用HTML设置文本和图像.ppt

,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,第,2,讲 一、文字版面的编辑,2.1,页面布局,2.2,字体属性,2.1.1,换行标签,br,2.1.2,强制不换行标签,nobr,2.1.3,分段控制标签,p,2.1.4,原样显示文字标签,pre,2.1.5,居中对齐标签,center,2.1,页面布局,2.1.6,引文标签,blockquote,2.1.7,水平分隔线标签,hr,2.1.8,特殊字符,2.1.9,注释标签,2.1.10,设定网页背景和文字的颜色,2.1,页面布局,2.1.1,换行标签,br,换行标签,:,用于在文档中强制断行，标记为一个单独的,。,在,HTML,文件中任何位置只要使用了,标签，当文件显示在浏览器中时，该位置之后的文字将显示于下一行。,标签：把,语句强行放在一行中,。在,标签中包含的文本不管有多长，总是放在一行中进行显示。,主要用于把那些不适于分开的词和短语放在一行中,如果一行文本,长度超过一定的限度，可能会突破右边边框跑到屏幕外面去,2.1.2,强制不换行标签,nobr,作用：用于将文档划分为段落，标记为,，其中结束标记符通常可省略。,效果：在浏览器中，不同段落文字间除了换行外，还会以一个空白行加以间隔，以便区别出文字的不同段落。,2.1.3,分段控制标签,p,1,格式：,文字,文字,文字,2,说明：,其中,align,属性有,left,、,center,和,right,三个参数，这三个设置值将依次把段落文字的水平对齐方式设为左对齐、居中对齐和右对齐。,2.1.3,分段控制标签,p,和,标签,：可保留,HTML,文件原始的文件排版方式，直接在浏览器中显示出来。,方法是把制作好的那段文本前后分别加上,和,标签。,在预排格式中，仍可以用,HTML,语言对文字的格式进行设置，如文字的颜色、大小等。,2.1.4,原样显示文字标签,pre,2.1.5,居中对齐标签,center,文本在页面上中使用,标签进行居中控制。,是一个成对标签，在想居中的文本部分开头处加,，结尾处加,即可。,标签,可以用来建立一个引文，它特别适合于较长文本的引用。,引文显示时将会自动右移，左边空出几个格，以示区别。,2.1.6,引文标签,blockquote,2.1.7,水平分隔线标签,hr,作用：添加水平线,，以将不同的内容信息分开，使文字看起来清晰、明确。,说明,：,标签,是单独使用的标签,，它的作用是,换行并在该行下画一条横线,，横线的上下两端都会留出一定的空白。,属性：见下表,标签属性说明,属性,参 数,功 能,单 位,默认值,size,设置水平分隔线的粗细,Pixel,（像素）,2,width,设置水平分隔线的宽度,Pixel(,像素,),、百分比,100%,align,left,、,center,、,right,设置水平分隔线的对齐方式,center,color,设置水平分隔线的颜色,black,noshade,水平分隔线不显示,3D,阴影,键盘上没有的字符,：在,HTML,文件中，有些字符没办法直接显示出来，比如说,“,”,。使用特殊字符可以将键盘上没有的字符表达出来,键盘上有但有特殊意义的字符,：有些字符在键盘上虽然可以得到，但在,HTML,中有其特殊的含义，如,“,”,等等，也必须用一些代码表示它们，以免发生混淆。,2.1.8,特殊字符,空格,：在建立,HTML,文件时，若您利用键盘上的空格键，输入数个空格，不论输入的空格有多少个，都将视为一个。因此，如果您想要输入多个空格时，必须利用,空格符号,。,2.1.8,特殊字符,HTML,常见特殊字符及其代码表,特殊或专用字符,数字代码,字符代码,&,!,;,空格,2.1.9,注释标签,注释标签：只起注释作用，不显示在页面上,注释标签的格式有两种：,2.1.10,设定网页背景,和文字的颜色,设置,标签内的属性，可控制整个页面的显示方式。,1,格式：,2,说明：,（,1,）通过,bgcolor,属性可以改变网页的背景颜色,，其格式如下：,或,2.1.10,设定网页背景,和文字的颜色,（,A,）其中,#,nn,nn,nn,代表,六位,十六进制数，,每两位的取值均是从,00,FF,，代表,ASCII,码的,00,255,，,前两位设置,红色,的深浅，中间两位设置,绿色,的深浅，最后两位设置,蓝色,的深浅,。,（,B,）在指定文字的颜色时，,也可以直接使用该颜色对应的英文单词,，例如，我们指定背景的颜色为红色，可以表示为：,也可以表示为,。,暗蓝绿,(#006666),Teal,白 色,White(#FFFFFF),紫红色,(#993333),Fuchsia,绿 色,Green(#66FF00),蓝 色,(#00FFFF),Blue,浅蓝绿,Aqua(#0066FF),黄 色,(#FFFF00),Yellow,紫 色,Purple(#660000),橄榄绿,(#336633),Olive,海军蓝,Navy(#0033CC),银白色,(#CCCCCC),Silver,灰 色,Gray(#999999),栗 色,(#993300),Maroon,石灰色,Lime(#666666),红 色,(#FF3300),Red,黑 色,Black(#000000),颜 色,名 称,颜 色,名 称,（,C,）,bgcolor,属性的参数值可以是下表所示,16,种颜色中的任何一种。,（,2,）,background,属性指定网页的背景图像。,格式：,示例：,（,3,）,text,属性用于指定网页内文字的颜色,。,格式：,示例：,2.1.10,设定网页背景,和文字的颜色,设置网页背景声音,在,HEAD,中添加：,2.2.1,标题文字标签,Hn,2.2.2,文字格式控制标签,Font,2.2.3,特定文字样式标签,2.2,字体属性,标签用于设置网页中的标题文字，被设置的文字将以,黑体、粗体,的方式显示在网页中。,1,格式：,标题文字,2.2.1,标题文字标签,Hn,2,说明：,标签是成对出现,的，在,和,之间的文字就是文档中的标题。,标签共分六级,，其中,标签所括起的文字是第一级标题，最大最粗；,标签所括起的文字是最后一级标题，最小最细。,align,属性用于设置标题的位置,。,align,属性的参数值为,left,、,center,或,right,之一,标签本身具有换行的作用,，标题总是从新一行开始。,使用标题样式时，必须使用结束标记符。,font,标签,用于控制文字的字体、大小与颜色,。,控制的方式是,利用属性设置实现,的，各属性的使用功能说明见下表。,2.2.2,文字格式控制标签,Font,控制文字的颜色,color,控制文字的大小,size,控制文字的字体,face,使用功能,属 性,27,1,格式：,文字,2,说明：,face,属性的格式为：,文字,face,属性是字体标记符，用来指定字体样式。字体样式也就是通常所说的“字体”。例如，常用的英文字体有“,Times New Roman”,、“,Arial”,等；常用的中文字体有“宋体”、“楷体”等。在编写网页时，通过在,FONT,标记符中指定,face,属性，用户可以指定一个或几个字体名称,(,用逗号隔开,),。,28,2,说明：,size,属性的取值为,17,，默认值为,3,；,也可以用“,+”,或“,-”,来设定字号的相对值。,example,color,属性的格式为：,或,29,用来,产生一定的强调、突出、区别以及提示等效果,的标签。,HTML,中用于这种功能的标签可以分为两类：,物理类型和逻辑类型,。,2.2.3,特定文字样式标签,30,1,物理类型,粗体,b,标签,放在,与,标签之间的文字将以粗体方式显示。,斜体,i,标签,放在,与,标签之间的文字将以斜体方式显示。,下划线,u,标签,放在,与,标签之间的文字将以加下划线的方式显示。,31,2,逻辑类型,逻辑类型,:,指使用一些标签来改变字体的形态和式样，以便,产生一些公众习惯的或约定俗成的显示效果。,常用的逻辑类型标签有八种，这些标签,均有首标签和尾标签,，放在首标签和尾标签之间的文本受其控制：,32,2,逻辑类型,（,Emphasis,）标签,：用于强调的文本，以区别于其他文本，一般显示斜体字,与,相似；,标签：用于特别强调的文本，显示粗体字，与,相似；,（,Citation,）标签：用于引证、举例，通常是斜体字；,33,2,逻辑类型,标签,：用来指出这是一组代码；,标签,：规定文本以小号字显示；,标签,：规定文本以大号字显示；,（,Sample,）标签,：显示一段计算机常用的字体，即,宽度相等的字体,；,34,2,逻辑类型,标签,：用来表示带有,下标,的变量；,标签,：用来表示带有,上标,的变量。,第,2,讲 二、图像的处理,学习目标,理解矢量图和位图的区别，了解常用的,Web,图像格式。,理解,Web,图像的处理流程，初步掌握基本的,Web,图像处理操作。,掌握在网页中插入图像的方法，理解图像在网页中的作用和,Web,图像的基本使用原则。,矢量图,矢量图形是指用线条和填充色等,数学信息,来描述图像的一种图像类型。,制作矢量格式图像的软件有,Freehand,、,Illustrator,、,CorelDraw,、,AutoCAD,。,位图,位图是指用,像素一点一点,地描述图像的一种图像类型。,常用的位图编辑软件有,Fireworks,、,Photoshop,、,ImageReady,、,PhotoImpact,等,常用,Web,图像格式,GIF,JPEG,PNG,GIF,GIF,（,Graphics Interchange Format,，图形交换格式）格式的特点：,无损压缩,最多,256,色,能够使用透明色,有所占存储空间小、下载速度快、支持动画等特点,JPEG,JPEG,（,Joint Photographic Expert Group,，联合图形专家组）格式的特点：,有损压缩,24,位颜色,可以控制压缩比,图像质量好，对具有连续色调的图像有最佳效果,PNG,PNG,（,Portable Network Graphics,，可移植的网络图形）格式的特点：,无损压缩,24,位颜色,支持透明度,BMP,图像文件因为存储空间大，传输不够快，所以并不常用,常用的是,jpg,文件和,gif,文件。,对于徽标、公司厂标等在每一主页显示，,要求能快速下载并能在低配置的系统中查询的图像,应采用,GIF,格式,而对于扫描图片、艺术作品这种,对显示质量要求很高的图像则应采用,JPEG,格式,。,图像使用说明,背景图案的设定,在网页中可以用图像平铺的方法制作背景。,定义背景图像的语法格式如下：,其中，“,image-URL”,指图像的位置。,说明：,注意平铺的效果,：在建立这种形式的背景之前，首先要确定所选定的图案能否看上去,无痕迹地连接在一起,，或者能否产生一种较好的背景效果。,尽量不用,：用平铺图像作背景，将极明显地降低网页的显示速度。唯一的解决办法就是尽量使用小的图像文件，如果可能的话则不用。,是用于导入图像文件的标签，使用此标签可将图像文件导入到,HTML,文件中显示。,没有结束标签，因为当浏览器只有读取到,标签时，会直接显示此标签所代表的图像。,1,格式：,网页中插入图形,2,说明：,src,属性是用来指出一个图像的文件名，或是指出,URL,的路径名。,如果图像的显示有问题，应该检查以下内容：,文件名是否书写正确；,图像文件是否是,BMP,、,GIF,或,JPG,格式；,是否已经打开了浏览器的图像下载功能。若上述几项全部正确，图像就能够显示出来。,小技巧：,如果在同一个文件中需要反复使用一个相同的图像文件时，,最好在,标签中使用相对路径名,，而不是使用绝对路径名或,URL,。因为,使用相对路径名，浏览器只须将图像文件下载一次,，再次使用这个图像时，只要重新显示一遍即可。如果,使用的是绝对路径名，每次显示图像时，都要下载一次图像,，这将会大大降低图像的显示速度。,img,标签属性的使用,图像的取代文字,设定图像的高度和宽度,设定图像的边框,设定图像的对齐方式,设定图像与文本之间的距离,标签中的,alt,属性：,当浏览器不能显示图像或找不到图像时，它可以将,alt,引导的文本显示在屏幕上，从而替代看不到的图像。,图像的取代文字,alt,标签中还提供了两个属性：,height,和,width,，用来设定图像的高度和宽度，二者可取像素值或百分比（相对窗口）。,示例：,设定图像的高度和宽度,设定图像的边框,border,标签的,border,属性可以给图像加一个边框。若,border,项默认或取值为,0,时，图像没有边框。,在,标签中使用,align,属性，可控制图像相对于文字基准线（文字中线）的水平对齐方式，其语法如下：,各属性的设置值意义如下表所示：,设定图像的对齐方式,align,align,属性的设置值,图像居右,right,图像居左,left,下对齐,bottom,居中对齐,middle,上对齐,top,对齐方式,设 置 值,把文本排到图像下面,如果文本还没有填满图像周围的空间时，就希望从图像下面重新开始另一行文本，这时，普通的换行标签,就不起作用了，它只能在图像旁边另起一行，而不能把文本排到图像下面去，这就需要在,标签中使用,clear,属性来满足这一要求,：,图像使用原则,在使用图像的问题上，网页的制作者可能会与浏览者产生一些矛盾。比如，制作者往往希望在自己的网页上有一些漂亮的图像，使网页充满艺术的魅力；而浏览者常常因为网页下载时间太长而不耐烦，甚至不愿等着下载全部内容。因此，我们可以采用以下的方法来缓解这个矛盾：,1,在设计网页时，应该反复斟酌哪些图像必须要，哪些图像可有可无，对于那些不是必需的图像，要舍得忍痛割爱；,2,把图像尽量做得小一点，小图像在网上的传输速度比较快，这对于网络传输速度较慢的用户更为重要。较小的图像可以是尺寸比较小，也可通过减少图像颜色使图像文件减小；,3,为了使不支持图像的浏览器能看到文本，可以同时使用图像和,ALT,的纯文本格式，这样，能使更多的用户看全这个网页；,列表项目,列表项目,无序列表,ul,有序列表,ol,3,嵌套列表,4,描述性列表,dl/dt/dd,无序列表（,Unordered list,）也称强调式列表，它是一种在表的各项前显示有特殊项目符号的列表。,定义无序列表需要使用无序列表标记符,和列表项（,List item,）标记符,（结束标记符可省略）,1,无序列表,ul,1,格式：,项目符号,项目符号,2,说明：,使用,type,属性来控制标号的类型，见表,1,在同一个无序列表中，下一个,的出现，就表明上一个列表项的结束。,无序列表语法,无序列表的,type,属性表,设定一个方形实心的行标号,type=square,设定一个空心圆点的行标号,type=circle,设定一个实心圆点的行标号，默认项,type=disc,含义,type,取值,2,有序列表,ol,有序列表（,Ordered list,）：也称,数字式列表,，它是一种在表的各项前显示有数字或字母的缩排列表。,定义有序列表需要使用有序列表标记符,和列表项（,List item,）标记符,（结束标记符可省略），语法如下：,项目符号,项目符号,有序列表的定义,2,说明：,在同一个有序列表中，下一个,的出现，就表明上一个列表项的结束。,顺序编号是由属性,type,和,start,来设置的。,type,表示标号的类型，比如数字、字母以及罗马字母；,start,属性表示列表清单的标号从第几项开始,表,2,列出了,type,属性的取值及含义。,有序列表的,TYPE,属性表,表示列表项用小写罗马字母标号（,I,，,II,，,III,）,type=I,表示列表项用大写罗马字母标号（,i,，,ii,，,iii,）,type=i,表示列表项用小写字母标号（,a,b,c,）,type=a,表示列表项用大写字母标号（,A,，,B,，,C,）,type=A,表示列表项用数字标号（,1,，,2,，,3,），默认项,type=1,含义,type,取值,窗口框架,1,窗口框架简介,1.1,什么是窗口框架,窗口框架可用于,将窗口画面分割成多个小窗口,，且每个小窗口中，可以显示不同的网页，,达到在浏览器中同时浏览多个不同网页的效果,。,在介绍窗口框架文档之前，先来看看其应用实例，有一个感性认识，见下图。,1.2,窗口框架的基本结构,Frameset,结构的基本格式,.,.,包含,Frameset,结构的,HTML,文件,文件,framePage.htm,的源代码,窗口框架文档,你的浏览器不支持带框架的网页,说明,标签用于定义一个窗口框架,则用于定义窗口框架中的子窗口,窗口框架文档的书写格式与一般的,HTML,文档的书写格式相同，只是,用,代替,标签,，,是一个成对标签，有开始和结束标签，在,标签内使用了另一个标签,，用它来指定每一个窗口的内容。,1.3,窗口框架的分割方式,窗口框架的分割方式可分为两种，一种是水平分割,(,rows,属性,),，另一种是垂直分割,(,cols,属性,),。,2,窗口框架控制,是成对标签,，首标签,和尾标签,之间的内容是,HTML,文档主体部分。,使用框架的,HTML,文档中不能出现,标签,，否则会导致,web,浏览器忽略所有的框架定义而只显示,和,之间的内容。,标签主要有,rows,、,cols,、,border,、,bordercolor,和,frameborder,五个属性,。,2.1,框架设置标签,frameset,1,格式：,2,说明：,rows,说明窗口横向分隔情况，,cols,说明纵向分隔。,各参数值之间用,逗号,分隔，依次表示各个子窗口的高度（宽度）。,一、水平,/,垂直分割,窗口属性,rows/cols,rows,和,cols,可以用,数字、百分比或剩余值以及这三种方式的混合,来表示：,数字：,表示子窗口高度（宽度）所占的像素点数。,百分比“,%”,：表示子窗口高度（宽度）占整个浏览器窗口高度（宽度）的百分比。,一、水平,/,垂直分割,窗口属性,rows/cols,rows,和,cols,可以用,数字、百分比或剩余值以及这三种方式的混合,来表示：,剩余值“*”,。表示当前所有窗口设定之后的剩余部分。当符号*只出现一次，即其他子窗口的大小都有明确定义时，表示该子窗口的大小将根据浏览器窗口的大小而自动调整。当符号*出现一次以上时，表示,按比例,分割浏览器窗口的剩余空间。,一、水平,/,垂直分割,窗口属性,rows/cols,例如,1,：,表示将浏览器窗口分割为,3,列：,第一个子窗口在第一列，窗口宽度为整个浏览器窗口宽度的,40%,；,第二个子窗口在第二列，占浏览器窗口剩余空间的,2/3,，即其宽度为整个浏览器窗口宽度的,40%,；,第三个子窗口占剩余空间的,1/3,，宽度为整个浏览器窗口宽度的,20%,。,例,2,：横向与纵向同时分割,Simple FRAMESET,例,3,：嵌套分割,在,标签中，可运用,border,属性,控制分割窗口的框架的宽度,，其语法如下所示：,其中的数值代表此窗口框架的宽度，单位为像素。,二、设置窗口框架,宽度属性,border,在,标签中，可运用,bordercolor,属性,设置边框的颜色,，其语法如下所示：,其中的,#,代表此边框的颜色，取值可为,RGB,代码。,三、设置边框,颜色属性,bordercolor,frameborder,属性用于,控制窗口框架四周，是否显示框架,。此属性可使用在,标签与,标签中，使用在,标签内时，可控制窗口框架的所有子窗口。使用在,标签时，则仅能控制该标签所代表的子窗口，其语法为：,0,代表不显示框线，,1,代表显示框线，其默认值为,1,。,四、设置框架,隐藏属性,frameborder,2.2,子窗口设置标签,frame,每个子窗口均由,标签定义,是单个的标签，使用时，将它写在,的开始和结束标签之间，它,主要有六个属性：,src,、,name,、,marginwidth,、,marginheight,、,scrolling,和,noresize,。,src,属性是用于,指定要导入到该子窗口的,HTML,文件,，其语法如下所示：,如果一个,标签中没有,src,属性，则该窗口显示为空。,1,src,属性,name,属性是用来,指定窗口的名称,，此属性是可选的。当完成定义子窗口的名称后，我们便可在超链接中，指定显示网页的子窗口。其语法如下所示：,2,name,属性,scrolling,属性用于描述该窗口,是否有滚动条,。该属性是可选的。其设置语法如下：,各设置值所代表的意义依序为显示、不显示、自动设置，默认值是,auto,。,3,scrolling,属性,noresize,属性是一个标志，没有取值。它说明浏览者,是否可以自行用鼠标调整窗口的大小,。如果设定了,noresize,属性，则窗口不能调整。如果默认，则可以自行调整窗口的大小。,4,noresize,属性,marginwidth,属性：,用来控制窗口内显示的内容与窗口左右边缘的距离,，该属性是取一个像素值，默认为,1,，该属性是可选的。,marginaheight,属性：,用来控制窗口内显示的内容与上下边缘的距离,，该属性是取一个像素值，默认为,1,，该属性是可选的。,5,设置边距属性,marginwidth/marginheight,对于框架网页中的超链接，可用,target,属性指定该链接的内容在哪个窗口显示。,3 FRAME,间的链接,93,用,target,属性指定的目标,窗口名称，必须使用字母,/,数字字符，否则窗口名将被忽略,。,有几个,特定的窗口,名例外，这几个窗口名有特殊含义，它们是,_blank,、,_self,、,_parent,和,_top,。,target,属性,94,target=_blank,当将,target,属性设置为,_blank,时，若单击超链接后，将打开一个新窗口来显示网页。,target=_self,当将,target,属性设置为,_self,时，则将在同一窗口中显示链接的网页。,target,属性,95,target=_parent,当将,target,属性设置为,_parent,时，若单击超链接后，该链接网页将导入目前子窗口的上一层框架。若没有上层，则导入在同一窗口中。,target=_top,当将,target,属性设置为,_top,时，则将脱离目前的窗口框架，在最上层的窗口框架中，显示链接的网页。,target,属性,本讲结束,