网页设计课件ch2文字版面的编辑.ppt
第2章 文字版面的编辑,2.1 页面布局2.2 字体属性,2.1.1 换行标签br2.1.2 强制不换行标签nobr2.1.3 分段控制标签p2.1.4 原样显示文字标签pre2.1.5 居中对齐标签center,2.1 页面布局,2.1.6 引文标签blockquote2.1.7 水平分隔线标签hr2.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三个参数，这三个设置值将依次把段落文字的水平对齐方式设为左对齐、居中对齐和右对齐。3示例：你好吗？很好。,2.1.3 分段控制标签p,和标签：可保留HTML文件原始的文件排版方式，直接在浏览器中显示出来。方法是把制作好的那段文本前后分别加上和标签。在预排格式中，仍可以用HTML语言对文字的格式进行设置，如文字的颜色、大小等。,2.1.4 原样显示文字标签pre,示例：,2.1.4 原样显示文字标签pre,中华人民共和国万岁！中华人民共和国万岁！中华人民共和国万岁！中华人民共和国万岁！,2.1.5 居中对齐标签center,文本在页面上中使用标签进行居中控制。是一个成对标签，在想居中的文本部分开头处加，结尾处加即可。示例：Hello,标签可以用来建立一个引文，它特别适合于较长文本的引用。引文显示时将会自动右移，左边空出几个格，以示区别。示例：见下页,2.1.6 引文标签blockquote,示例：,2.1.6 引文标签blockquote,Her Song:When I was young,I listened to the radio waiting for my favorite songs.,2.1.7 水平分隔线标签hr,作用：添加水平线，以将不同的内容信息分开，使文字看起来清晰、明确。说明：标签是单独使用的标签，它的作用是换行并在该行下画一条横线，横线的上下两端都会留出一定的空白。属性：见下表,标签属性说明,标签示例,示例：,键盘上没有的字符：在HTML文件中，有些字符没办法直接显示出来，比如说“”。使用特殊字符可以将键盘上没有的字符表达出来键盘上有但有特殊意义的字符：有些字符在键盘上虽然可以得到，但在HTML中有其特殊的含义，如“”等等，也必须用一些代码表示它们，以免发生混淆。,2.1.8 特殊字符,空格：在建立HTML文件时，若您利用键盘上的空格键，输入数个空格，不论输入的空格有多少个，都将视为一个。因此，如果您想要输入多个空格时，必须利用空格符号。,2.1.8 特殊字符,HTML常见特殊字符及其代码表,HTML常见特殊字符示例,显示的区别 春晓春眠不觉晓，处处闻啼鸟。夜来风雨声，花落知多少。春晓春眠不觉晓，处处闻啼鸟。夜来风雨声，花落知多少。,2.1.9 注释标签,注释标签：只起注释作用，不显示在页面上 注释标签的格式有两种：,2.1.10 设定网页背景和文字的颜色,设置标签内的属性，可控制整个页面的显示方式。,1格式：,2说明：（1）通过bgcolor属性可以改变网页的背景颜色，其格式如下：或,2.1.10 设定网页背景和文字的颜色,（A）其中#nnnnnn代表六位十六进制数，每两位的取值均是从00FF，代表ASCII码的00255，前两位设置红色的深浅，中间两位设置绿色的深浅，最后两位设置蓝色的深浅。（B）在指定文字的颜色时，也可以直接使用该颜色对应的英文单词，例如，我们指定背景的颜色为红色，可以表示为：也可以表示为。,（C）bgcolor属性的参数值可以是下表所示16种颜色中的任何一种。,（2）background属性指定网页的背景图像。格式：示例：（3）text属性用于指定网页内文字的颜色。格式：示例：,2.1.10 设定网页背景和文字的颜色,设置网页背景声音,在HEAD中添加：示例：,2.2.1 标题文字标签Hn2.2.2 文字格式控制标签Font2.2.3 特定文字样式标签,2.2 字体属性,标签用于设置网页中的标题文字，被设置的文字将以黑体、粗体的方式显示在网页中。1格式：标题文字,2.2.1 标题文字标签Hn,2说明：标签是成对出现的，在和之间的文字就是文档中的标题。标签共分六级，其中标签所括起的文字是第一级标题，最大最粗；标签所括起的文字是最后一级标题，最小最细。align属性用于设置标题的位置。align属性的参数值为left、center或right之一 标签本身具有换行的作用，标题总是从新一行开始。使用标题样式时，必须使用结束标记符。,3示例：标题文字标记实例 第一级文字标题 第二级文字标题 第三级文字标题 第四级文字标题 第五级文字标题 第六级文字标题,font标签用于控制文字的字体、大小与颜色。控制的方式是利用属性设置实现的，各属性的使用功能说明见下表。,2.2.2 文字格式控制标签Font,32,1格式：文字2说明：face属性的格式为：文字,face属性是字体标记符，用来指定字体样式。字体样式也就是通常所说的“字体”。例如，常用的英文字体有“Times New Roman”、“Arial”等；常用的中文字体有“宋体”、“楷体”等。在编写网页时，通过在FONT标记符中指定face属性，用户可以指定一个或几个字体名称(用逗号隔开)。,33,2说明：size属性的取值为17，默认值为3；也可以用“+”或“-”来设定字号的相对值。example color属性的格式为：或,34,3示例：字体型号标记实例 10号红色宋体文字 10号绿色黑体文字 10号蓝色隶书文字 6号橄榄色宋体文字 默认文字显示效果,35,用来产生一定的强调、突出、区别以及提示等效果的标签。HTML中用于这种功能的标签可以分为两类：物理类型和逻辑类型。,2.2.3 特定文字样式标签,36,1物理类型 粗体b标签放在与标签之间的文字将以粗体方式显示。斜体i标签放在与标签之间的文字将以斜体方式显示。下划线u标签放在与标签之间的文字将以加下划线的方式显示。,37,2逻辑类型逻辑类型:指使用一些标签来改变字体的形态和式样，以便产生一些公众习惯的或约定俗成的显示效果。常用的逻辑类型标签有八种，这些标签均有首标签和尾标签，放在首标签和尾标签之间的文本受其控制：,38,2逻辑类型（Emphasis）标签：用于强调的文本，以区别于其他文本，一般显示斜体字,与相似；标签：用于特别强调的文本，显示粗体字，与相似；（Citation）标签：用于引证、举例，通常是斜体字；,39,2逻辑类型 标签：用来指出这是一组代码；标签：规定文本以小号字显示；标签：规定文本以大号字显示；（Sample）标签：显示一段计算机常用的字体，即宽度相等的字体；,40,2逻辑类型（Keyboard）标签：由用户所输入文本，通常显示较粗的宽体字；（Variable）标签：用来表示变量，通常显示斜体字；（Definition）标签：表示一个定义或说明，通常为斜体字；,41,2逻辑类型 标签：用来表示带有下标的变量；标签：用来表示带有上标的变量。,42,3示例 换行标记、段落标记与文本修饰标记实例 位于strong标记对之间的文字被加重了!由于br的作用导致 换了一行。p标记导致此处自成一段且居中。由于段落标记 又要换行了。请注意几种文字修饰 的效果。,本章结束,
