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

《第二讲用HTML设置文本和图像.ppt》由会员分享，可在线阅读，更多相关《第二讲用HTML设置文本和图像.ppt（96页珍藏版）》请在三一文库上搜索。

1、第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、签：把语句强行放在一行中。 在标签中包含的文本不管有多长，总是放在一行中进行显示。 主要用于把那些不适于分开的词和短语放在一行中 如果一行文本长度超过一定的限度，可能会突破右边边框跑到屏幕外面去,2.1.2 强制不换行标签nobr,作用：用于将文档划分为段落，标记为，其中结束标记符通常可省略。 效果：在浏览器中，不同段落文字间除了换行外，还会以一个空白行加以间隔，以便区别出文字的不同段落。,2.1.3 分段控制标签p,1格式： 文字 文字 文字 2说明： 其中align属性有left、center和right三个参数，这三个设置值将依次把段落文字的水平对齐方式设为左对齐、居中对齐和右对齐。,2

3、.1.3 分段控制标签p,和标签：可保留HTML文件原始的文件排版方式，直接在浏览器中显示出来。 方法是把制作好的那段文本前后分别加上和标签。 在预排格式中，仍可以用HTML语言对文字的格式进行设置，如文字的颜色、大小等。,2.1.4 原样显示文字标签pre,2.1.5 居中对齐标签center,文本在页面上中使用标签进行居中控制。 是一个成对标签，在想居中的文本部分开头处加，结尾处加即可。,标签可以用来建立一个引文，它特别适合于较长文本的引用。 引文显示时将会自动右移，左边空出几个格，以示区别。,2.1.6 引文标签blockquote,2.1.7 水平分隔线标签hr,作用：添加水平线，以将

4、不同的内容信息分开，使文字看起来清晰、明确。 说明：标签是单独使用的标签，它的作用是换行并在该行下画一条横线，横线的上下两端都会留出一定的空白。 属性：见下表,标签属性说明,键盘上没有的字符：在HTML文件中，有些字符没办法直接显示出来，比如说“”。使用特殊字符可以将键盘上没有的字符表达出来 键盘上有但有特殊意义的字符：有些字符在键盘上虽然可以得到，但在HTML中有其特殊的含义，如“”等等，也必须用一些代码表示它们，以免发生混淆。,2.1.8 特殊字符,空格：在建立HTML文件时，若您利用键盘上的空格键，输入数个空格，不论输入的空格有多少个，都将视为一个。因此，如果您想要输入多个空格时，必须利

5、用空格符号。,2.1.8 特殊字符,HTML常见特殊字符及其代码表,2.1.9 注释标签,注释标签：只起注释作用，不显示在页面上 注释标签的格式有两种： ,2.1.10 设定网页背景 和文字的颜色,设置标签内的属性，可控制整个页面的显示方式。,1格式： ,2说明： （1）通过bgcolor属性可以改变网页的背景颜色，其格式如下： 或 ,2.1.10 设定网页背景 和文字的颜色,（A） 其中#nnnnnn代表六位十六进制数，每两位的取值均是从00FF，代表ASCII码的00255，前两位设置红色的深浅，中间两位设置绿色的深浅，最后两位设置蓝色的深浅。 （B） 在指定文字的颜色时，也可以直接使用该

6、颜色对应的英文单词，例如，我们指定背景的颜色为红色，可以表示为： 也可以表示为 。,（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 标题

7、文字标签Hn,2说明： 标签是成对出现的，在和之间的文字就是文档中的标题。 标签共分六级，其中标签所括起的文字是第一级标题，最大最粗；标签所括起的文字是最后一级标题，最小最细。 align属性用于设置标题的位置。align属性的参数值为left、center或right之一 标签本身具有换行的作用，标题总是从新一行开始。 使用标题样式时，必须使用结束标记符。,font标签用于控制文字的字体、大小与颜色。 控制的方式是利用属性设置实现的，各属性的使用功能说明见下表。,2.2.2 文字格式控制标签Font,27,1格式： 文字 2说明： face属性的格式为： 文字,face属性是字体标记符，用来

8、指定字体样式。字体样式也就是通常所说的“字体”。例如，常用的英文字体有“Times New Roman”、“Arial”等；常用的中文字体有“宋体”、“楷体”等。在编写网页时，通过在FONT标记符中指定face属性，用户可以指定一个或几个字体名称(用逗号隔开)。,28,2说明： size属性的取值为17，默认值为3； 也可以用“+”或“-”来设定字号的相对值。 example color属性的格式为： 或,29,用来产生一定的强调、突出、区别以及提示等效果的标签。 HTML中用于这种功能的标签可以分为两类：物理类型和逻辑类型。,2.2.3 特定文字样式标签,30,1物理类型 粗体b标签 放在与

9、标签之间的文字将以粗体方式显示。 斜体i标签 放在与标签之间的文字将以斜体方式显示。 下划线u标签 放在与标签之间的文字将以加下划线的方式显示。,31,2逻辑类型 逻辑类型:指使用一些标签来改变字体的形态和式样，以便产生一些公众习惯的或约定俗成的显示效果。 常用的逻辑类型标签有八种，这些标签均有首标签和尾标签，放在首标签和尾标签之间的文本受其控制：,32,2逻辑类型 （Emphasis）标签：用于强调的文本，以区别于其他文本，一般显示斜体字,与相似； 标签：用于特别强调的文本，显示粗体字，与相似； （Citation）标签：用于引证、举例，通常是斜体字；,33,2逻辑类型 标签：用来指出这是一

10、组代码； 标签：规定文本以小号字显示； 标签：规定文本以大号字显示； （Sample）标签：显示一段计算机常用的字体，即宽度相等的字体；,34,2逻辑类型 标签：用来表示带有下标的变量； 标签：用来表示带有上标的变量。,第2讲 二、图像的处理,学习目标,理解矢量图和位图的区别，了解常用的Web图像格式。 理解Web图像的处理流程，初步掌握基本的Web图像处理操作。 掌握在网页中插入图像的方法，理解图像在网页中的作用和Web图像的基本使用原则。,矢量图,矢量图形是指用线条和填充色等数学信息来描述图像的一种图像类型。 制作矢量格式图像的软件有 Freehand、Illustrator、CorelD

11、raw、AutoCAD 。,位图,位图是指用像素一点一点地描述图像的一种图像类型。 常用的位图编辑软件有 Fireworks、Photoshop、ImageReady、PhotoImpact 等,常用Web图像格式,GIF JPEG PNG,GIF,GIF（Graphics Interchange Format，图形交换格式）格式的特点： 无损压缩 最多256色 能够使用透明色 有所占存储空间小、下载速度快、支持动画等特点,JPEG,JPEG（Joint Photographic Expert Group，联合图形专家组）格式的特点： 有损压缩 24位颜色 可以控制压缩比 图像质量好，对具有连

12、续色调的图像有最佳效果,PNG,PNG（Portable Network Graphics，可移植的网络图形）格式的特点： 无损压缩 24位颜色 支持透明度,BMP图像文件因为存储空间大，传输不够快，所以并不常用,常用的是jpg文件和gif文件。 对于徽标、公司厂标等在每一主页显示，要求能快速下载并能在低配置的系统中查询的图像,应采用GIF格式 而对于扫描图片、艺术作品这种对显示质量要求很高的图像则应采用JPEG格式。,图像使用说明,背景图案的设定,在网页中可以用图像平铺的方法制作背景。 定义背景图像的语法格式如下： 其中，“image-URL”指图像的位置。,说明： 注意平铺的效果：在建立这

13、种形式的背景之前，首先要确定所选定的图案能否看上去无痕迹地连接在一起，或者能否产生一种较好的背景效果。 尽量不用：用平铺图像作背景，将极明显地降低网页的显示速度。唯一的解决办法就是尽量使用小的图像文件，如果可能的话则不用。,是用于导入图像文件的标签，使用此标签可将图像文件导入到HTML文件中显示。 没有结束标签，因为当浏览器只有读取到标签时，会直接显示此标签所代表的图像。 1格式： ,网页中插入图形,2说明： src属性是用来指出一个图像的文件名，或是指出URL的路径名。 如果图像的显示有问题，应该检查以下内容： 文件名是否书写正确； 图像文件是否是BMP、GIF或JPG格式； 是否已经打开了

14、浏览器的图像下载功能。 若上述几项全部正确，图像就能够显示出来。,小技巧： 如果在同一个文件中需要反复使用一个相同的图像文件时，最好在标签中使用相对路径名，而不是使用绝对路径名或URL。因为使用相对路径名，浏览器只须将图像文件下载一次，再次使用这个图像时，只要重新显示一遍即可。如果使用的是绝对路径名，每次显示图像时，都要下载一次图像，这将会大大降低图像的显示速度。,img标签属性的使用,图像的取代文字 设定图像的高度和宽度 设定图像的边框 设定图像的对齐方式 设定图像与文本之间的距离,标签中的alt属性：当浏览器不能显示图像或找不到图像时，它可以将alt引导的文本显示在屏幕上，从而替代看不到的

15、图像。 ,图像的取代文字alt,标签中还提供了两个属性：height和width，用来设定图像的高度和宽度，二者可取像素值或百分比（相对窗口）。 示例： ,设定图像的高度和宽度,设定图像的边框border,标签的border属性可以给图像加一个边框。若border项默认或取值为0时，图像没有边框。 ,在标签中使用align属性，可控制图像相对于文字基准线（文字中线）的水平对齐方式，其语法如下： 各属性的设置值意义如下表所示：,设定图像的对齐方式align,align属性的设置值,把文本排到图像下面,如果文本还没有填满图像周围的空间时，就希望从图像下面重新开始另一行文本，这时，普通的换行标签就不

16、起作用了，它只能在图像旁边另起一行，而不能把文本排到图像下面去，这就需要在标签中使用clear属性来满足这一要求：,图像使用原则,在使用图像的问题上，网页的制作者可能会与浏览者产生一些矛盾。比如，制作者往往希望在自己的网页上有一些漂亮的图像，使网页充满艺术的魅力；而浏览者常常因为网页下载时间太长而不耐烦，甚至不愿等着下载全部内容。因此，我们可以采用以下的方法来缓解这个矛盾： 1在设计网页时，应该反复斟酌哪些图像必须要，哪些图像可有可无，对于那些不是必需的图像，要舍得忍痛割爱；,2把图像尽量做得小一点，小图像在网上的传输速度比较快，这对于网络传输速度较慢的用户更为重要。较小的图像可以是尺寸比较小

17、，也可通过减少图像颜色使图像文件减小； 3为了使不支持图像的浏览器能看到文本，可以同时使用图像和ALT的纯文本格式，这样，能使更多的用户看全这个网页；,列表项目,列表项目,无序列表ul 有序列表ol 3 嵌套列表 4 描述性列表dl/dt/dd,无序列表（Unordered list）也称强调式列表，它是一种在表的各项前显示有特殊项目符号的列表。 定义无序列表需要使用无序列表标记符和列表项（List item）标记符（结束标记符可省略）,1 无序列表ul,1格式： 项目符号 项目符号 2说明： 使用type属性来控制标号的类型，见表1 在同一个无序列表中，下一个的出现，就表明上一个列表项的结束

18、。,无序列表语法,无序列表的type属性表,2 有序列表ol,有序列表（Ordered list）：也称数字式列表，它是一种在表的各项前显示有数字或字母的缩排列表。,定义有序列表需要使用有序列表标记符和列表项（List item）标记符（结束标记符可省略），语法如下： 项目符号 项目符号 ,有序列表的定义,2说明： 在同一个有序列表中，下一个的出现，就表明上一个列表项的结束。 顺序编号是由属性type和start来设置的。type表示标号的类型，比如数字、字母以及罗马字母；start属性表示列表清单的标号从第几项开始 表2列出了type属性的取值及含义。,有序列表的TYPE属性表,窗口框架,1

19、 窗口框架简介,1.1 什么是窗口框架,窗口框架可用于将窗口画面分割成多个小窗口，且每个小窗口中，可以显示不同的网页，达到在浏览器中同时浏览多个不同网页的效果。,在介绍窗口框架文档之前，先来看看其应用实例，有一个感性认识，见下图。,1.2 窗口框架的基本结构,Frameset结构的基本格式 . . ,包含Frameset结构的HTML文件,文件framePage.htm的源代码 窗口框架文档 你的浏览器不支持带框架的网页 ,说 明 标签用于定义一个窗口框架 则用于定义窗口框架中的子窗口 窗口框架文档的书写格式与一般的HTML文档的书写格式相同，只是用代替标签，是一个成对标签，有开始和结束标签，

20、在标签内使用了另一个标签，用它来指定每一个窗口的内容。,1.3 窗口框架的分割方式,窗口框架的分割方式可分为两种，一种是水平分割(rows属性)，另一种是垂直分割(cols属性)。,2 窗口框架控制,是成对标签，首标签和尾标签之间的内容是HTML文档主体部分。 使用框架的HTML文档中不能出现标签，否则会导致web浏览器忽略所有的框架定义而只显示和之间的内容。 标签主要有rows、cols、border、bordercolor和frameborder五个属性。,2.1 框架设置标签frameset,1格式： 2说明： rows说明窗口横向分隔情况，cols说明纵向分隔。 各参数值之间用逗号分隔

21、，依次表示各个子窗口的高度（宽度）。,一、水平/垂直分割 窗口属性rows/cols, rows和cols可以用数字、百分比或剩余值以及这三种方式的混合来表示： 数字：表示子窗口高度（宽度）所占的像素点数。 百分比“%”：表示子窗口高度（宽度）占整个浏览器窗口高度（宽度）的百分比。,一、水平/垂直分割 窗口属性rows/cols, rows和cols可以用数字、百分比或剩余值以及这三种方式的混合来表示： 剩余值“*”。表示当前所有窗口设定之后的剩余部分。当符号*只出现一次，即其他子窗口的大小都有明确定义时，表示该子窗口的大小将根据浏览器窗口的大小而自动调整。当符号*出现一次以上时，表示按比例分

22、割浏览器窗口的剩余空间。,一、水平/垂直分割 窗口属性rows/cols,例如1： 表示将浏览器窗口分割为3列： 第一个子窗口在第一列，窗口宽度为整个浏览器窗口宽度的40%； 第二个子窗口在第二列，占浏览器窗口剩余空间的2/3，即其宽度为整个浏览器窗口宽度的40%； 第三个子窗口占剩余空间的1/3，宽度为整个浏览器窗口宽度的20%。,例2：横向与纵向同时分割, Simple FRAMESET ,例3：嵌套分割,在标签中，可运用border属性控制分割窗口的框架的宽度，其语法如下所示： 其中的数值代表此窗口框架的宽度，单位为像素。,二、设置窗口框架 宽度属性border,在标签中，可运用bord

23、ercolor属性设置边框的颜色，其语法如下所示： 其中的#代表此边框的颜色，取值可为RGB代码。,三、设置边框 颜色属性bordercolor,frameborder属性用于控制窗口框架四周，是否显示框架。此属性可使用在标签与标签中，使用在标签内时，可控制窗口框架的所有子窗口。使用在标签时，则仅能控制该标签所代表的子窗口，其语法为： 0代表不显示框线，1代表显示框线，其默认值为1。,四、设置框架 隐藏属性frameborder,2.2 子窗口设置标签frame,每个子窗口均由标签定义 是单个的标签，使用时，将它写在的开始和结束标签之间，它主要有六个属性：src、name、marginwidt

24、h、marginheight、scrolling和noresize。,src属性是用于指定要导入到该子窗口的HTML文件，其语法如下所示： 如果一个标签中没有src属性，则该窗口显示为空。,1 src属性,name属性是用来指定窗口的名称，此属性是可选的。当完成定义子窗口的名称后，我们便可在超链接中，指定显示网页的子窗口。其语法如下所示： ,2 name属性,scrolling属性用于描述该窗口是否有滚动条。该属性是可选的。其设置语法如下： 各设置值所代表的意义依序为显示、不显示、自动设置，默认值是auto。,3 scrolling属性,noresize 属性是一个标志，没有取值。它说明浏览者

25、是否可以自行用鼠标调整窗口的大小。如果设定了noresize属性，则窗口不能调整。如果默认，则可以自行调整窗口的大小。,4 noresize属性,marginwidth属性：用来控制窗口内显示的内容与窗口左右边缘的距离，该属性是取一个像素值，默认为1，该属性是可选的。 marginaheight属性：用来控制窗口内显示的内容与上下边缘的距离，该属性是取一个像素值，默认为1，该属性是可选的。,5设置边距属性marginwidth /marginheight,对于框架网页中的超链接，可用target属性指定该链接的内容在哪个窗口显示。,3 FRAME间的链接,93,用target属性指定的目标窗口

26、名称，必须使用字母/数字字符，否则窗口名将被忽略。 有几个特定的窗口名例外，这几个窗口名有特殊含义，它们是_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属性,本讲结束,