《HTML+CSS+DIV网页设计与布局 教学课件 ppt 作者 聂斌 1_ 第2章 网页文字和图片》由会员分享，可在线阅读，更多相关《HTML+CSS+DIV网页设计与布局 教学课件 ppt 作者 聂斌 1_ 第2章 网页文字和图片（26页珍藏版）》请在金锄头文库上搜索。
1、第2章 网页文字和图片,网页的文字是设计一个网页的基础，而网页图片则使网页内容更加的丰富。使用HTML代码来编辑网页文字和图片可以达到在Word软件里设计文档几乎一样的效果。当然，与Word软件相比较起来，使用标签来设计网页文字和图片没有使用菜单来设计Word文档方便，但是正因为网页的这种标签属性，使得网页具有跨平台的特性，可以在任何一种平台上显示。,2.1 文字格式,文字格式主要是用一些HTML元素来标记文本的方式，用来更改文字的大小、字体、颜色等属性。另外还能为文本增加如粗体、斜体、上标、下标等修饰效果。,2.1.1 设置文字大小,在HTML里，元素可以用来显示文字的属性，包括文字的大小、
2、颜色、字体等。其中设置文字大小的属性为SIZE，其语法代码如下所示： 文字,2.1.2 设置字体,文字可以设置成多种字体，中文的有宋体、仿宋、黑体等，英文字体也有Arial、Times New Roman等，为了保证网页的通用性，HTML的早期版本里是不允许为文字指定字体的，然而从HTML3.2版本开始，可以为网页中的文字指定不同的字体，使得网页的表现形式更为丰富。 1.设置网页字体 设置文字字体使用元素中的FACE属性，其语法代码如下所示： 文字 2.设置浏览器默认字体,2.1.3 设置字体颜色,如果一个网页不能设置文字字体的颜色，那么这个网页就是黑白的，失去了其缤纷的色彩。使用元素的COL
3、OR属性可以将文字设置成不同的颜色。其语法代码为： 文字,2.1.3 设置字体颜色,颜色可以有两种表示方法：颜色名称与RGB颜色数值。颜色名称就是类似于RED、BLUE等颜色的英文名。 RGB颜色是由红色、绿色、蓝色的组合来指定的一种颜色，任何一种颜色都可以用0255之间的一个数值来表示，但必须要使用16进制的数字来表示这些组合。 例如，一种颜色的RGB代码为“#FFC0CB”，这就代表是用强度为FF（也就是255）的红色、强度为C0的绿色与强度为CB的蓝色混合成的颜色，也就是粉红色。,2.1.3 设置字体颜色,几乎所有浏览器都能识别以下16种预定义的颜色：Red（红色）、Yellow（黄色）
4、、Blue（蓝色）、Navy（深蓝色）、Green（绿色）、Lime（浅绿色）、Aqua（浅绿色）、Olive（橄榄绿）、Black（黑色）、Gray（灰色）、Silver（银色）、Maroon（原色）、Purple（紫色）、Fuchsia（紫红色）、Teal（深青色）。 而Internet Explorer浏览器可以识别更多的颜色单词，如下表列出了Internet Explorer 9浏览器所能识别的颜色单词。,2.1.3 设置字体颜色,2.1.3 设置字体颜色,2.1.4 加粗与斜体,通常在进行文字处理时，都会对比较重要的内容使用加粗、斜体来引起读者的注意。在网页上同样可以使用加粗与斜体来
5、达到相同的效果。 在HTML元素中，可以用元素来加粗文字，用元素来使文字倾斜。除了元素与元素之外，还可以使用元素来加粗文字、元素来使文字倾斜的。其语法代码如下 ： 加粗的文字 倾斜的文字 加粗的文字 倾斜的文字,2.1.5 下划线与删除线,在有些时候希望文字带下划线显示，例如要对一些文字说明，可以使用下划线元素突出显示。删除线一般在修改文章的时候常常用到，表示原来的这部分文字被删除了。 1.被反对使用的元素 在HTML的早期版本里，使用元素来标注带有删除线的文字，使用元素来标注带有下划线的文字。,2.1.5 下划线与删除线,2.被赞成使用的元素 HTML从4.0版本开始，正式使用了两个新元素：
6、元素（删除线）和元素（插入线）来替代元素与元素，不过他们在浏览器里的显示结果都是一样的。 删除线与下划线元素的语法代码如下所示： 删除线 下划线 删除线 插入线,2.1.6 上标与下标,在描述一些复杂的表达式时，特别是一些数学公式，经常会用到上标和下标，例如3的平方（32）。在HTML页面中，上标采用元素，下标采用元素。其具体语法是： 作为上标的文字 作为下标的文字,2.1.7 等宽字,等宽字体一般是针对英文字体而言的，所谓等宽就是像打字机文本一样的字体，在默认情况下，这种字体是Courier字体。在HTML中的元素可以用来设置等宽字体。使用“”标签表明标注的文字为类似打印机文本（typewr
7、iter text）所使用的等宽字体。TT元素的语法代码为： 英文文字,2.2 与文字排版相关的元素,与文字排版相关的元素就是对某段文字进行设置的元素，包括文本缩进、段落、换行、段落居中等。一个好的网页，文字段落的设置是必不可少的，它可以使网页更加的简洁和漂亮。本节就来详细讲解与文字排版相关的一些元素。,2.2.1 文本缩进,文本缩进元素主要用于设置文本的缩进效果。通过使用该元素，可以实现页面文字的段落缩排，从而使页面的文字布局更加错落有致。文本缩进元素的语法是： 需要进行缩排的文字,2.2.3 换行,HTML里的换行元素在前面的章节里已经多次提到并且也多次使用过了。元素就是用来对文字进行换行
8、的。元素没有结束标签，也就是说，一个元素就是换一次行。,2.2.3 段落,在HTML里，使用元素可以用来区分一个与另一个段落，在“”标签与“”标签之间的文字是一段文字。其语法代码如下： 一段文字,2.2.4 段落居中,如果想要居中显示网页中的段落，可以使用元素。居中对齐元素是双元素，成对出现，以开始，以结束。在元素之间的所有内容都居中对齐，包括文字、图像、表格等。其具体的语法如下所示： 需要居中对齐的内容,2.2.5 预定义格式,通过前面章节的学习可以知道，在HTML源代码里，即使文字已经换行，但是只要没有使用“”标签，那么在浏览器里显示出来的文字是不会被换行的。如果想要在浏览器里显示出源代码
9、里所设置的所有格式，包括其文字之间的空白，如空格、制表符等，可以使用元素。元素相当于设置了一个“块”，这个块可以将源代码里的所有文本（除HTML标签外）在浏览器中按原样显示出来。其语法如下所示： 设定了格式的文字,2.2.6 水平分隔线,当页面内容比较繁琐时，可以在段与段之间插入一条水平分隔线来使页面显得层次分明，便于阅读。在HTML中可以使用元素来创建一个水平分隔线，其语法如下所示： ,2.3 文字闪烁,使用元素可以使网页中的文字闪烁。这是除了粗体与斜体之外的另一种使文字突出显示的方式，通常用来设置比较重要的超链接或文本。其语法代码如下所示： 闪烁的文字,2.4 设置网页背景颜色,在前面章节
10、里多次使用过元素，不过在使用元素时，都没有对其属性值进行过设定。元素里有一个BGCOLOR属性可以用来设置网页的背景颜色，其语法代码如下： 网页内容,2.5 在网页中插入图像,一个网页中可以插入如Logo（网站标志）、Banner（横幅广告）、照片等各种图片，当浏览者浏览网页时，这些图片将会自动显示出来。合理的应用图片，可以让网页看起来更漂亮、重点更突出、形式更活泼、浏览更方便。在HTML里可以通过元素来插入图片，其语法代码为： ,2.6 设置背景图片,元素里的BACKGROUND属性可以为网页指定背景图片，背景图片作为背景出现在网页文字的下方，其语法代码如下所示： 网页内容,2.7 小结,本章主要介绍了网页中文字和图片的设置。其中，网页文字的设置详细讲解了文字格式、与文字排版相关的元素以及文字闪烁。图片的设置讲解了图和设置网页背景颜色、如何在网页中插入图片以及如何设置网页背景颜色。,
