HTML设置文本和图像.pptx

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,2019/11/18,Copyright 2010-2012 Hdwnt Inc.All Rights Reserved.,#,第三讲,HTML,设置文本和图像,本章目标,Copyright 2010-2012 Hdwnt Inc.All Rights Reserved.,掌握,HTML,如何设置本文样式,掌握,HTML,如何设置图片样式,HTML,标记与,HTML,属性,Copyright 2010-2012 Hdwnt Inc.All Rights Reserved.,HTML,标记（,Tag,）的语法是,:,HTML,标记（,Tag,）的,3,种用法是,:,内容,注意内容的位置,内容,不同的标记可以实现不同的效果,每个标记都用,（大于号）围住。,注意：,与标记之间不能留有空格或其他非标记字符,在标记前加,/,是结束标记,标记字母不区分大小写,对同一段要标记的内容，可以使用多个标记来共同作用，各个标记间的顺序是任意的。,Copyright 2010-2012 Hdwnt Inc.All Rights Reserved.,3.1,本文排版,本文排版,Copyright 2010-2012 Hdwnt Inc.All Rights Reserved.,设置文本格式,分段与换行,段落是文档的基本信息单位。将文档划分为段落，可以通过使用分段标记、换行标记、标题标记或插入水平线来实现。,1.,分段标记,P,分段标记定义了一个段落，使用该标记时要跳过一个空行，使后续内容隔一行显示。若同时使用,和,，则将段落包围起来，表示一个分段的块；若省略结束标记,，可以将开始标记,放在段尾。分段标记的常用属性是,ALIGN,，用于设置段落的水平对齐方式。,2.,换行标记,BR,标记强行规定了当前行的中断，使后续内容在下一行显示。,本文排版,Copyright 2010-2012 Hdwnt Inc.All Rights Reserved.,本文排版,Copyright 2010-2012 Hdwnt Inc.All Rights Reserved.,标记，它是一个换行标记，即在某一行的特定位置断开这一行。,本文排版,Copyright 2010-2012 Hdwnt Inc.All Rights Reserved.,实现段落与段内换行,(,和,),段落标记,:,双标记,内容,换行标记,:,单标记,和,在效果上有什么区别？,对齐方式,Copyright 2010-2012 Hdwnt Inc.All Rights Reserved.,语法,:,说明,:,ALIGN,属性可以用“,left”,、“,center”,、“,right”,，分别对应于将标记中间的字符块按照左、中、右对齐。,语法,:,说明,:,这个标记没有属性，它的作用是将标记中间的字符居中对齐，它的作用和,一样。,语法,:,说明,:,和,中的,ALIGN,属性的属性值一样，也是取“,left”,、“,center”,、“,right”,三个值，分别对应将中间的字体左、中、右对齐。,设置标题,Copyright 2010-2012 Hdwnt Inc.All Rights Reserved.,语法,:,说明,:,其中*可以选择,1,6;,数字越小,文字越大,.ALIGN,属性值可以选择“,left”,、“,center”,、“,right”,三个中间的一个。,段落格式化,标题,标题是一段文本的主题，标题可以按照所包含信息内容的逻辑层次进行组织。,在标题标记内的文本根据级别自动格式化，并且通常都为粗体字。,段落格式化,标题对齐,适用于段落标记的,align,属性同样也可以用在标题标记中。,文字段落缩进,Copyright 2010-2012 Hdwnt Inc.All Rights Reserved.,语法,:,说明,:,标记本来使用于文本中的引用，（比如引用名人名言），现在使用,都是把它作为缩进文本的手段,要缩进文本只要将光标置于相应的段落内，然后在属性检查器中单击缩进按钮,无属性,Copyright 2010-2012 Hdwnt Inc.All Rights Reserved.,文字段落缩进,段落格式化,预格式化段落标记,标记使文本以录入的原样显示，即保留预先定义的格式。该标记主要用于显示程序代码或类似的信息。,段落格式化,使用水平线,水平线可以把页面划分为几个部分。一般来说，较长的文本段落应该用水平线分开。这样做可以使文档设计更规范，也可以显示信息的变化。绘制水平线以及设置其属性的语法如下：,以上属性都是可选的。,width,属性：可以用像素值大小表示，也可以用浏览器窗口宽度的百分比表示。,size,属性：只能用像素大小表示，默认为,3,个像素。,noshade,属性：使得水平线在显示时周围没有阴影效果。,很多浏览器还指定了其他一些属性，如,color,。,段落格式化,水平线示例,设置文字列表,HTML,通常常用的有,三,种类型的列表（,list,），分别是,无序列表,，,有序列表,，,定义列表,。各种列表单元的,HTML,代码具有相同的结构：首先是起始标记，定义了整个列表的开始，同时定义这个列表的属性；然后在其中定义每一个选项；最后是列表的结束标记。,列表项中不仅可以含有文本，而且可以含有除标题以外的其他字块，包括其他列表和列表单元，因此，列表单元允许嵌套,设置文字列表,无序列表：,语法,:,说明,:,TYPE,属性可以分别取三个值,“,disc”,、“,square”,、“,circle”,，（在某些浏览器中，,TYPE,属性的值必须使用小写浏览器才可以识别）它是用来控制强调符风格的属性，三个值分别对应实心圆点，实心方块，空心圆圈。需要说明的是有些浏览器不支持该属性。,COMPACT,属性是个无值属性（名称标记），用来使列表的表项用紧凑格式显示。,设置文字列表,语法,:,说明,:,TYPE,属性是可选的，一般情况下是不需要的，因为在整体列表定义时应该已经定义完毕，只有在极少数情况下，需要使不同表项的强调符不同，才有必要在这里定义这个属性。属性值的选择和前面列表的属性选项一致。,设置文字列表,.,无序列表示例,设置文字列表,有序列表：,语法,:,说明,:,TYPE,属性可以分别取五个值“,1”,、“,a”,、“,A”,、“,i”,、“,I”,，它是用来控制强调符风格的属性，五个值分别对应数字、小写字母、大写字母、小写罗马数字、大写罗马数字。,START,属性是一个数字，表示从第几个数字（字母）开始计数。,设置文字列表,.,有序列表示例,使用列表,定义列表,定义列表是一种特殊的列表，每一个列表项都包括成对出现的术语和术语定义。,定义列表相当于一个术语表，它提供了两种不同级别的信息：术语以及术语的定义。,字典、书后的术语表以及常见问答页，都是这种类型的列表。,定义列表包含在,和,标记内，每一个待定义的术语使用,标记标识，而术语定义通过,标记来表示。,设置文字列表,定义列表：,语法,:,说明,:,COMPACT,属性是个无值属性（名称标记），用来使列表的表项用紧凑格式显示。,语法,:,说明,:,标记用于标注需要定义的术语,语法,:,说明,:,标记用于标注该术语的定义,设置文字列表,使用列表,定义列表,使用列表,列表嵌套,设置文字的特殊样式,HTML,中对文字进行格式化的标记分为两类：物理的和逻辑的。,物理标记：包括用于指定粗体的,标记和用于指定斜体的,标记等，它们指定文字应该如何显示。,逻辑标记：如,标记和,标记，它们指定文字的性质，但不指定文字该如何显示。一般来说，逻辑元素的使用相对较少。,设置文字的特殊样式,-,物理标记,语法,:,说明,:,B,标记用来指示以粗体字显示文本,语法,:,说明,:,I,标记用来指示以斜体字显示文本,语法,:,说明,:,U,标记用来指示为文本加上下划线,设置文字的特殊样式,-,物理标记,语法,:,说明,:,SUP,标记指示以上标方式显示文本,语法,:,说明,:,SUB,标记指示以下标方式显示文本,语法,:,说明,:,STRIKE,标记用来指示在文本的正中央画一条删去线,物理的字符格式化,设置文字的特殊样式,-,逻辑标记,语法,:,说明,:,BIG,标记放大文字显示,语法,:,说明,:,SMALL,标记缩小文字显示,语法,:,说明,:,STRONG,标记以加强强调方式显示,设置文字的特殊样式,-,逻辑标记,语法,:,说明,:,EM,标记以强调方式显示,语法,:,说明,:,ADDRESS,标记显示电子邮件地址或网址,语法,:,说明,:,CODE,标记说明代码与指令,逻辑格式化标记,设置文字的特殊样式,语法,:,说明,:,其中,SIZE,属性可以选择,1,7,；,COLOR,属性值可以选择,RGB,值或者预定义颜色名称,;FACE,说明字体类型。,常用的颜色名称有：,black,（黑）,white,（白）,red,（红）,green,（绿）,blue,（蓝）,yellow,（黄）,aqua,（浅绿）,fuchsia,（紫红）,gray,（灰）,Lime,（橙）,maroon,（栗色）,purple,（紫）,olive,（橄榄）,silver,（银色）,标记示例,设置文字的特殊样式,设计网页时，经常要插入一些空格。这本来是一个十分简单的问题，但在,HTML,网页中却变得比较麻烦。在输入文本时按了多次空格键，但在浏览器中打开网页时却只能看到一个空格。另外，在网页中有时可能要插入一些特殊符号，如版权符号,和注册符号,等。,在往,HTML,文档中写入特殊字符，如,“,”,、,“,”,、,“,&,”,、,“,”,等要使用特殊的代码，浏览器会用,HTML,命令对这些特殊代码进行翻译。,往网页中输入特殊字符，需在,HTML,代码中加入以,&,开头的字母组合或以,&#,开头的数字。,设置文字的特殊样式,字 符,对应字符标记,对应十进制编码标记,说 明,大于符号,双引号,版权符号,注册符号,空格,文字格式化,特殊字符,Copyright 2010-2012 Hdwnt Inc.All Rights Reserved.,3.6,网页图片的使用,在网页中使用图片,图像和文字都是组成网页的基本元素，与文字相比，图像更加直观、生动。无论是商业网站还是个人网站，都应该是图文并茂的网页。同时一定要注意图像的大小和数量。如果图像文件太大、太多会影响下载速度，这会使浏览者失去信心。,本章首先介绍了网页图像基础，然后通过一个精心设计的实例讲解了应用图像的大部分基础内容。学者应该专注于操作图像的基本方法。相信通过本章的学习，一定能制作出精美的网页。,设置网页图片,计算机图像格式有成百上千种，但网页中使用的只有,3,中，即,JPEG/JPG,，,GIF,和,PNG,。,图像格式,1.,JPEG/JPG,格式,扩展名是,.jpg/.jpeg,，其全称为,Joint Photograhic Experts Group,（联合图象专家组，一种压缩标准），,JPEG,是一种有损压缩格式，当读者将图像保存为,JPEG,格式时，可以指定图像的品质和压缩级别，应用于网页中的,JPEG,格式品质一般选中等的，比如在,photoshop,软件中读者可以选用压缩级别为,6,。,JPEG,格式可以支持多达,16M,种颜色，能很好地实现全彩图像，有利于表现带有渐变色彩且没有清晰轮廓的图像。网络上自然风景图片、鲜花图片多为,JPEG,格式，比如牡丹花。,2.,GIF,格式,扩展名是,.gif,，其全称为,Graphics Interchange Format,（交换的图像文件格式），,GIF,采用无损压缩存储，在不影响图像质量的情况下。,设置网页图片,它还支持透明色，可以去掉图像的背景。但是,GIF,只支持最多,256,色，因此多用于渐变色彩不明显或者轮廓清晰的图像。,GIF,最突出的一个特点是可以制作动画图像。网络上很多图标、按钮、漫画卡通图片等多为,GIF,格式。,扩展名是*,.png,，其全称为,Portable Network Graphics,（可移植的网络图象文件格式），从其名称就可以看出，它是专门为网络而生的图像格式。,PNG,是一种能存储,48,位超强色彩图像,，和,GIF,格式一样，,png,也使用无损压缩方式。类似于,GIF,，,PNG,可以也可以是动画，比,GIF,能容纳更多的颜色。,图像标签,常见的图片格式介绍,图像类型,优点,缺点,适用场合,制作工具,*,.jpg,体积小，比较清晰,有损压缩、画面失真,网页图片,Photoshop,*,.gif,支持,Internet,标准,支持无损耗压缩和透明度，很流行,支持有限的透明度,效果不如别的图像。最多只可以支持到,256,色,网页图片,Photoshop,*,.swf,体积小,便于网络传输,制作麻烦,网页动画,Flash,*.png,支持无损耗压缩和透明度,(,比,GIF,好,),半透明的,png8,在,ie6,以下浏览器显示为全透明；,Alpha,透明的全色,PNG,在,ie6,中会出现背景颜色为灰色,网页图片,Photoshop,*,.bmp,支持,24,位颜色深度，兼容性好,不支持压缩,容量大,桌面墙纸,photoshop,Copyright 2010-2012 Hdwnt Inc.All Rights Reserved.,使用图像,在,Web,页中添加图像,要向一个,HTML,文件中添加图片，只需在其中加入,标记，并使它指向所需的图片。,标记不是一个成对标记，不需要结束标志。最基本的使用,标记的语法如下：,src,属性设置为要插入图像文件的,URI,URI,既可以是绝对地址，也可以是相对地址。,在,Web,页中添加图像示例,Copyright 2010-2012 Hdwnt Inc.All Rights Reserved.,重点练习图片地址和,ALT,使用图像,设定图片高度和宽度,HTML3.2,版本以后，,标记引入了,height,和,width,属性，分别指定图片的高度和宽度。如第一章所述，这两个属性的值既可以用像素值，也可用百分比值。,使用图像,设置图片位置,标记也具有,align,属性，通过该属性可以调整图片在,Web,页中的对齐方式。,align,属性提供了垂直和水平两种对齐方式。,垂直对齐,top,：使图片的顶端与文本的顶端对齐，而使图片的下面部分低于后面的文字。,middle,：使图片垂直的中线与当前文字的基线对齐。,bottom,：使图片的底端与伴随文字的基线对齐。而使图片的顶部高于伴随文字。,水平对齐,left,：强制图片显示在当前窗口的左侧，而使其后的文字显示在图片右侧。,right,：强制图片显示在当前窗口的右侧，而使其后的文字显示在图片左侧。,图片垂直对齐示例,图片水平对齐示例,使用图像,设置图片周围空白大小,hspace,和,vspace,属性，它们用来设置图片周围的空白。,图片周围的空白并不一定是白色的，这种空白是指图片周围的一段距离内没有其它内容，而它的颜色是与背景的颜色一致的。,hspace,设置的是图片左右两端的空白大小,vspace,设置的是图片上下端的空白大小,空白的宽度单位是像素，并且对图片相对的两边都有效。,设置图片周围空白示例,使用图像,设置边框,可以使用,标记的,border,属性给图片加上边框。边框的宽度用像素数来指定。,(,边框颜色,),使用图像,设置背景图片,网页背景图片在,标记内指定，,标记的属性,background,用于指定文档的背景图片,URI,，给文档填充一个背景图片，背景图片将平铺在整个,Web,页中。,利用,DREAMWEAVER,设置文本和图像,P43,实验练习,1,在,DREAMWEAVER,中输入文字,2,在,DREAMWEAVER,中使用文字换行,3,设置文档属性,DREAMWEAVER,的字体大小如何设置 在首选项,利用,DREAMWEAVER,代码视图提高效率,P47,实验练习,1代码提示,属性提示,颜色提示,结束标记,2代码折叠,3使用拆分视图对代码快速定位,4,代码外观设置（字体大小、编码）,本章小结,本章首先介绍了对,HTML,文档中的文字、段落进行格式化的常见标记,文字级的格式化标记包括：,字体标记,字符格式化标记,、,、,、,、,等和特殊字符的表示法,段落级的格式化标记包括：,块标记,、,、,、,、,等；,标题标记,换行标记,。,除了这些内容，还介绍了超链接锚站标记,和列表标记。这些标记在,HTML,文档中被广泛使用。本章通过示例重点介绍了这些标记的一些常用属性，对于本章没有涉及到的同类标记和相关属性，读者可以查阅其他资料进一步了解。这章没有涉及网页中图像的使用，而图像信息在,web,中占有重要的地位，将在下一章中详细介绍。,本章小结,网络上常用的图像格式：,GIF,、,JPEG,、,PNG,标记具有多种属性：,alt,、,weight,、,height,、,align,、,hspace,和,vspace,等属性,图像地图,客户端图像地图,服务器端图像地图,要注意，尽管网页中加入图像会增加网页的生动性，但也不能滥用图像。滥用图像可能造成网页下载时间过长，也增加了图像布局的难度，毕竟加入图像并进行适当的布局，然后制作出赏心悦目的网页是一件很艺术化的工作。,思考题,常见的网络图像格式有哪些，在,HTML,中各适合什么场合？,怎样设置网页中图片的显示大小、位置和边框？,怎样创建图片链接？,什么是图像地图，它分为哪两种类型？,简要描述创建客户端图像地图的过程？,思考题,HTML,中怎样改变字体属性，怎样格式化文字？,HTML,中有哪些特殊字符，怎样表示？,HTML,中怎样使用超链接？,试列举,HTML,中常见的段落格式化标记，它们各自有哪些主要属性？,怎样给网页添加水平线？,HTML,中有哪几种列表，分别怎样定义？,千里之行 始于足下,更多详细信息请登录,65,