第1章 Delphi简介

Size: px

Start display at page:

Download "第1章 Delphi简介"

诈弥计
5 years ago
Views:

1 网页文本是网页中最主要也是最常用的元素网页文本的内容包括标题文字普通文字段落文字水平线等本章介绍如何使用 HTML 5 设计网页文本内容重点案例效果

2 4.1 标题文字的建立在 HTML 文档中, 文本的结构除了以行和段出现之外, 还可以作为标题存在通常一篇文档最基本的结构就是由若干不同级别的标题和正文组成的案例 1 标题文字标记 HTML 文档中包含有各种级别的标题各种级别的标题由 <h1> 到 <h6> 元素来定义 <h1> 至 <h6> 标题标记中的字母 h 是英文 headline( 标题行 ) 的简称其中 <h1> 代表 1 级标题, 级别最高, 文字也最大, 其他标题元素依次递减,<h6> 级别最低例 4.1 标题标记的使用 ( 案例文件 :ch04\4.1.html) <head> <title> 标题文字 </title> <h1> 这里是 1 级标题 </h1> <h2> 这里是 2 级标题 </h2> <h3> 这里是 3 级标题 </h3> <h4> 这里是 4 级标题 </h4> <h5> 这里是 5 级标题 </h5> <h6> 这里是 6 级标题 </h6> 在 IE 11.0 中预览, 效果如图 4-1 所示图 4-1 标题标记的使用作为标题, 它们的重要性是有区别的, 其中 <h1> 标题的重要性最高,<h6> 的重要性最低 62

3 4 第案例 2 标题文字的对齐方式使用标题文字的对齐方式主要有居左居中居右和两端对齐, 其中两端对齐方式不经常例 4.2 标题文字的对齐方式 ( 案例文件 :ch04\4.2.html) <h1 align="center"> 这里是 1 级标题居中对齐 </h1> <h2 align="left"> 这里是 2 级标题居左对齐 </h2> <h3 align="right"> 这里是 3 级标题居右对齐 </h3> <p> 上面的标题在页面中进行了各种对齐方式的排列上面的标题在页面中进行了各种对齐方式的排列上面的标题在页面中进行了各种对齐方式的排列 </p> 章设计网页文本内容在 IE 11.0 中预览, 效果如图 4-2 所示图 4-2 标题文字的对齐方式 4.2 设置文字格式一个杂乱无序堆砌而成的网页, 会使人感觉枯燥无味, 而一个美观大方的网页, 会让人有美轮美奂流连忘返的感觉下面介绍如何设置网页文字的格式案例 3 设置文字字体 font-family 属性用于指定文字字体类型, 如宋体黑体隶书 Times New Roman 等, 即在网页中, 展示字体不同的形状语法格式如下 : style="font-family: 黑体 " style="font-family: 华文彩云, 黑体, 宋体 " 63

4 从语法格式上可以看出,font-family 有两种声明方式第一种声明方式使用 name 字体名称, 按优先顺序排列, 以逗号隔开, 如果字体名称包含空格, 则应使用引号括起第二种声明方式使用所列出的字体序列名称如果使用 fantasy 序列, 将提供默认字体序列第一种声明方式比较常用例 4.3 设置文字字体及对齐方式 ( 案例文件 :ch04\4.3.html) <head><title> 字体 </title> <p style="font-family: 黑体 " align=center> 北国风光, 千里冰封 </p> 在 IE 11.0 中浏览, 效果如图 4-3 所示, 可以看到文字为黑体并居中显示图 4-3 设置文字字体及对齐方式在字体显示时, 如果指定一种特殊字体类型, 而在浏览器或者操作系统中该类型不能正确获取, 可以通过 font-family 预设多种字体类型 font-family 属性可以预置多个供页面使用的字体类型, 即字体类型序列, 其中每种字体类型之间使用逗号隔开如果前面的字体类型不能够正确显示, 则系统将自动选择后一种字体类型, 依次类推所以, 在设计页面时, 一定要考虑字体的显示问题为了保证页面达到预期效果, 最好提供多种字体类型, 而且最好以最基本的字体类型作为最后一个其样式设置如下 font-family: 华文彩云, 黑体, 宋体当 font-family 属性值中的字体类型由多个字符串和空格组成, 如 Times New Roman, 那么, 该值就需要使用双引号引起来 font-family: "Times New Roman" 案例 4 设置字号在一个网页中, 标题通常使用较大字体显示, 用于吸引人注意, 小字体用来显示正常内容, 大小字体结合形成网页, 既吸引了人的眼球, 又提高了阅读速度在 HTML 5 新规定中, 通常使用 font-size 设置文字大小其语法格式如下 : Style="font-size : 数值 inherit xx-small x-small small medium large x-large xx-large larger smaller length" 64

5 4 第其中, 通过数值来定义字体大小, 例如用 font-size:10px 的方式定义字体大小为 10 像素此外, 还可以通过 medium 之类的参数定义字体的大小, 其参数含义如表 4-1 所示表 4-1 设置字体大小的参数参数说明 xx-small 绝对字体尺寸根据对象字体进行调整最小 x-small 绝对字体尺寸根据对象字体进行调整较小 small 绝对字体尺寸根据对象字体进行调整小 medium 默认值绝对字体尺寸根据对象字体进行调整正常 large 绝对字体尺寸根据对象字体进行调整大 x-large 绝对字体尺寸根据对象字体进行调整较大 xx-large 绝对字体尺寸根据对象字体进行调整最大 larger 相对字体尺寸相对于父对象中字体尺寸进行相对增大使用成比例的 em 单位计算 smaller 相对字体尺寸相对于父对象中字体尺寸进行相对减小使用成比例的 em 单位计算 length 百分数或由浮点数字和单位标识符组成的长度值, 不可为负值其百分比取值是基于父对象中字体的尺寸章设计网页文本内容例 4.4 设置文字字号 ( 案例文件 :ch04\4.4.html) <head><title> 字号 </title> <p style="font-size:20pt"> 上级标记大小 </p> <p style="font-size:small"> 小 </p> <p style="font-size:larger"> 大 </p> <p style="font-size:x-small"> 小 </p> <p style="font-size:x-larger"> 大 </p> <p style="font-size:50%"> 子标记 </p> <p style="font-size:25pt"> 子标记 </p> 在 IE 11.0 中浏览, 效果如图 4-4 所示, 可以看到网页中文字被设置成不同的大小, 其设置方式采用了绝对数值关键字百分比等形式在上述例子中,font-size 字体大小为 50% 时, 其比较对象是上一级标签中的 20pt 同样, 我们还可以使用 inherit 值, 直接继承上级标记的字体大小例如 : <p style="font-size:50pt"> 上级标记 </p> <p style="font-size: inherit "> 继承 </p> 图 4-4 设置文字字号 65

6 4.2.3 案例 5 设置文字颜色没有色彩的网页是枯燥而无生机的, 这就意味着一个优秀的网页设计者不仅要能够合理安排页面布局, 而且还要具有一定的色彩视觉和色彩搭配能力, 这样才能够使网页更加精美也更具表现力, 并给浏览者以亲切感通常使用 color 属性来设置颜色其属性值通常使用下面的方式设定, 如表 4-2 所示表 4-2 颜色设定方式属性值 color_name hex_number rgb_number inherit hsl_number hsla_number rgba_number 说明规定颜色值为颜色名称的颜色 ( 如 red) 规定颜色值为十六进制值的颜色 ( 如 #ff0000) 规定颜色值为 rgb 代码的颜色 ( 如 rgb(255,0,0)) 规定应该从父元素继承颜色规定颜色值为 HSL 代码的颜色 ( 如 hsl(0,75%,50%)), 此为新增加的颜色表现方式规定颜色值为 HSLA 代码的颜色 ( 如 hsla(120,50%,50%,1)), 此为新增加的颜色表现方式规定颜色值为 RGBA 代码的颜色 ( 如 rgba(125,10,45,0.5)), 此为新增加的颜色表现方式例 4.5 设置文字颜色 ( 案例文件 :ch04\4.5.html) <head><title> 字体颜色 </title> <h1 style="color:#033"> 页面标题 </h1> <p style="color:red"> 本段内容用于显示红色 </p> <p style="color:rgb(0,0,0)"> 此处使用 rgb 方式表示了一个黑色文本 </p> <p style="color:hsl(0,60%,30%)"> 此处使用新增的 HSL 函数, 构建颜色 </p> <p style="color:hsla(100,50%,50%,1)"> 此处使用新增加的 HSLA 函数, 构建颜色 </p> <p style="color:rgba(125,20,45,0.5)"> 此处使用新增加的 RGBA 函数, 构建颜色 </p> 在 IE 10 中预览, 效果如图 4-5 所示, 可以看到文字以不同颜色显示, 并采用了不同的颜色取值方式图 4-5 设置文字颜色 66

7 案例 6 设置粗体斜体下画线 1. 粗体文本重要文本通常以粗体强调方式或加强调方式显示 HTML 中的 <b> 标记 <em> 标记和 <strong> 标记分别实现了这 3 种显示方式例 4.6 重要文本的显示 ( 案例文件 :ch04\4.6.html) <head> <title> 无标题文档 </title> <p><b> 我是粗体文字 </b> </p> <p><em> 我是强调文字 </em> </p> <p><strong> 我是加强调文字 </strong></p> 在 IE 11.0 中预览, 效果如图 4-6 所示, 实现了文本的 3 种显示方式图 4-6 重要文本的显示第章设计网页文本内容 2. 倾斜文本 HTML 5 中的 <i> 标记实现了文本的倾斜显示放在 <i></i> 之间的文本将以斜体显示例 4.7 设置倾斜文本 ( 案例文件 :ch04\4.7.html) <head> <title> 倾斜文本 </title> <i> 我将会以斜体字显示 </i> 在 IE 11.0 中预览, 效果如图 4-7 所示, 其中文字以斜体显示图 4-7 斜体文本的显示 HTML 中的重要文本和倾斜文本标记已经过时, 这些标记都应该使用 CSS 样式来实现随着后面学习的深入, 读者会逐渐发现, 即使 HTML 和 CSS 实现相同的效果, 但是 CSS 所能实现的控制远远比 HTML 要细致精确 3. 为文本添加下画线 HTML 5 中的 <u> 标记可以为文本添加下画线, 放在 < u ></ u > 之间的文本以添加下画线的方式显示例 4.8 为文本添加下画线( 案例文件 :ch04\4.8.html) 67

8 <p> 如果文本不是超链接, 请尽量不要 <u> 对其使用下画线 </u> </p> 在 IE 11.0 中预览, 效果如图 4-8 所示, 其中文字以添加了下画线的方式显示请尽量避免为文本添加下画线, 因为用户会把它混淆为一个超链接如果文本不是超链接, 请尽量不要对其使用下画线案例 7 设置上标与下标图 4-8 为文本添加下划线在 HTML 中用 <sup> 标记实现上标文字, 用 <sub> 标记实现下标文字 <sup> 和 <sub> 都是双标记, 放在开始标记和结束标记之间的文本会分别以上标或下标形式显示例 4.9 设置上标与下标 ( 案例文件 :ch04\4.9.html) <head> <title> 无标题文档 </title> <!- 上标显示 --> <p>c=a<sup>2</sup>+b<sup>2</sup></p> <!- 下标显示 --> <p>h<sub>2</sub>+o H<sub>2</sub>O</p> 在 IE 11.0 中预览, 效果如图 4-9 所示, 分别实现了上标和下标文本显示图 4-9 上标和下标预览效果案例 8 设置字体风格 font-style 通常用来定义字体风格, 即字体的显示样式在 HTML 5 新规定中, 使用 fontstyle 的语法格式如下 : font-style : normal italic oblique inherit 其属性值有 4 个, 具体含义如表 4-3 所示表 4-3 font-style 的属性值 normal italic 属性值默认值浏览器显示一个标准的字体样式浏览器会显示一个斜体的字体样式含义 68

9 4 oblique inherit 属性值含义没有斜体变量的特殊字体, 浏览器会显示一个倾斜的字体样式规定应该从父元素继承字体样式例 4.10 使用 font-style 定义字体风格 ( 案例文件 :ch04\4.10.html) <head><title> 字体风格 </title> <p style="font-style:italic"> 锄禾日当午, 汗滴禾下土 </p> <p style="font-style:normal"> 锄禾日当午, 汗滴禾下土 </p> <p style="font-style:oblique"> 锄禾日当午, 汗滴禾下土 </p> 续表第章设计网页文本内容在 IE 11.0 中预览, 效果如图 4-10 所示, 可以看到文字分别显示不同的样式, 如斜体案例 9 设置加粗字体图 4-10 使用 font-style 定义字体风格通过设置字体粗细, 可以让文字显示不同的外观通过 font-weight 属性可以定义字体的粗细程度其语法格式如下 font-weight: bold bolder lighter normal; font-weight 属性有 13 个有效值, 分别是 bold bolder lighter normal 100~900 如果没有设置该属性, 则使用其默认值 normal 属性值设置为 100~900, 值越大, 加粗的程度就越高 font-weight 属性值的具体含义如表 4-4 所示表 4-4 font-weight 的属性值属性值描述 bold bolder lighter normal 定义粗体字体定义更粗的字体, 相对值定义更细的字体, 相对值默认, 标准字体 69

10 浏览器默认的字体粗细是 400, 另外也可以通过参数 lighter 和 bolder 使得字体在原有基础上显得更细或更粗例 4.11 加粗字体显示 ( 案例文件 :ch04\4.11.html) <head><title> 加粗字体 </title> <p style="font-weight:bold"> 万水千山总是情 (bold)</p> <p style="font-weight:bolder"> 万水千山总是情 (bolder)</p> <p style="font-weight:lighter"> 万水千山总是情 (lighter)</p> <p style="font-weight:normal"> 万水千山总是情 (normal)</p> <p style="font-weight:100"> 万水千山总是情 (100)</p> <p style="font-weight:400"> 万水千山总是情 (400)</p> <p style="font-weight:900"> 万水千山总是情 (900)</p> 在 IE 11.0 中浏览, 效果如图 4-11 所示, 可以看到文字以不同方式加粗, 其中使用了关键字加粗和数值加粗图 4-11 加粗字体显示案例 10 设置字体复合属性在设计网页时, 为了使网页布局合理且文本规范, 对字体设计需要使用多种属性例如定义字体粗细, 并定义字体大小但是, 多个属性分别书写相对比较麻烦, 在 HTML 5 中提供了 font 属性就解决了这一问题 font 属性可以一次性地使用多个属性的属性值定义文本字体其语法格式如下 : font:font-style font-variant font-weight font-size font-family font 属性中的属性排列顺序是 font-style font-variant font-weight font-size 和 fontfamily, 各属性的属性值之间使用空格隔开但是, 如果 font-family 属性要定义多个属性值, 则需要使用逗号 (,) 隔开在属性排列中,font-style font-variant 和 font-weight 这 3 个属性值是可以自由调换的而 font-size 和 font-family 则必须按照固定的顺序出现, 而且还必须都出现在 font 属性中如果这两者的顺序不对或缺少一个, 那么整条样式规则可能就会被忽略 70

11 4 例 4.12 设置字体复合属性 ( 案例文件 :ch04\4.12.html) <head><title> 字体复合属性 </title> <style type=text/css> p{ font:normal small-caps bolder 25pt "Cambria","Times New Roman", 黑体 } </style> <p> 学习 HTML 5 标记语言, 开发完美绚丽网站 </p> 在 IE 11.0 中浏览, 效果如图 4-12 所示, 可以看到文字被设置成宋体并加粗图 4-12 字体复合属性第章设计网页文本内容案例 11 设置阴影文本在显示字体时, 有时根据需求, 需要给出文字的阴影效果, 以增强网页整体的吸引力, 并且为文字阴影添加颜色这时就需要用到 text-shadow 属性, 其语法格式如下 : text-shadow : none <length> none [<shadow>, ] * <opacity> 或 none <color> [, <color> ]* text-shadow 的属性值如表 4-5 所示表 4-5 text-shadow 的属性值属性值说明 <color> <length> <opacity> 指定颜色由浮点数字和单位标识符组成的长度值可为负值指定阴影的水平延伸距离由浮点数字和单位标识符组成的长度值不可为负值指定模糊效果的作用距离如果仅仅需要模糊效果, 则将前两个 length 全部设定为 0 text-shadow 属性有 4 个值, 最后两个值是可选的第一个属性值表示阴影的水平偏移, 可取正负值 ; 第二个值表示阴影垂直偏移, 可取正负值 ; 第三个值表示阴影模糊半径, 该值可选 ; 第四个值表示阴影颜色值, 该值可选其语法格式如下 : text-shadow: 阴影水平偏移值 ( 可取正负值 ); 阴影垂直偏移值 ( 可取正负值 ); 阴影模糊值 ; 阴影颜色例 4.13 设置阴影文本 ( 案例文件 :ch04\4.13.html) 71

12 <head><title> 阴影文本 </title> <p align=center style="textshadow:0.1em 3px 6px blue;fontsize:80px;"> 春蚕到死丝方尽 </br> 蜡炬成灰泪始干 </p> 在 IE 11.0 中浏览, 效果如图 4-13 所示, 可以看到文字居中并带有阴影显示通过上述实例, 可以看出阴影偏移由两个 length 值指定到文本的距离第一个长度值指定到文本右边的水平距离, 负值会把阴影放置在文本左边第二个长度值指定到文本下边的垂直距离, 负值会把阴影放置在文本上方在阴影偏移之后, 可以指定一个模糊半径图 4-13 文字居中并阴影显示模糊半径是一个长度值, 它指定了模糊效果的范围, 但如何计算效果的具体算法, 并没有指定在阴影效果的长度值之前或之后, 还可以指定一个颜色值颜色值会被用作阴影效果的基础如果没有指定颜色, 那么将使用 color 属性值来替代案例 12 控制换行当在一个指定区域显示一整行文字时, 如果文字在一行显示不完时, 则需要进行换行如果不进行换行, 则会超出指定区域范围, 此时我们可以采用新增加的 word-wrap 文本样式, 来控制文本换行 word-wrap 的语法格式如下 : word-wrap : normal break-word 其属性值含义比较简单, 如表 4-6 所示表 4-6 word-wrap 的属性值属性值 normal break-word 控制连续文本换行说明内容将在边界内换行如果需要, 词内换行 (word-break) 也会发生例 4.14 控制文本换行 ( 案例文件 :ch04\4.14.html) <head><title> 控制换行 </title> <style type="text/css"> div{ width:300px;word-wrap:break-word;border:1px solid #999999;} </style> <div> 本文测试控制换行功能, 可以使文本在指定框架中换行显示内容 </div><br> <div>wordwrapbreakwordwordwrapbreakwordwordwrapbreakwordwordwrapbreakword</ 72

13 4 div><br> <div>this is all English,This is all English,This is all English,This is all English,</div> 在 IE 11.0 中浏览, 效果如图 4-14 所示, 可以看到文字在指定位置被控制换行可以看出,word-wrap 属性可以控制换行, 当属性取值 break-word 时, 将强制换行, 中文文本没有任何问题, 英文语句也没有任何问题但是对于长串的英文则不起作用, 也就是说,break-word 属性是控制是否断词, 而不是断字符图 4-14 控制文本换行第章设计网页文本内容 4.3 设置段落格式在网页中如果要把文字合理地显示出来, 离不开段落标记的使用对网页中文字段落进行排版, 并不像文本编辑软件 Word 那样可以定义许多模式来安排文字的位置在网页中要让某一段文字放在特定的地方是通过 HTML 标记来完成的案例 13 设置段落标记段落标记是双标记, 即 <p></p>, 在 <p> 开始标记和 </p> 结束标记之间的内容形成一个段落如果省略结束标记, 从 <p> 标记开始, 直到遇见下一个段落标记之前的文本, 都在一个段落内段落标记中的 p 是英文单词 paragraph 即段落的首字母, 用来定义网页中的一段文本, 文本在一个段落中会自动换行例 4.15 设置段落标记 ( 案例文件 :ch04\4.15.html) <head> <title> 段落标记的使用 </title> <p>html 5 CSS3 应用教程之跟 DIV 说 Bye!Bye!</p> <p>web 设计师可以使用 HTML4 和 CSS2.1 完成一些很酷的东西我们可以在不使用陈旧的基于 table 布局的基础上完成文档逻辑结构并创建内容丰富的网站我们可以在不使用内联 <font> 和 <br> 标签的基础上对网站添加漂亮而细腻的风格样式事实上, 我们目前的设计能力已经让我们远离了那个可怕的浏览器战争时代专有协议和那些充满闪动滚动和闪烁的丑陋网页 <p> <p> 虽然我们现在已经普遍使用了 HTML4 和 CSS2.1, 但是我们还可以做得更好! 我们可以重组我们代码的结构并能让我们的页面代码更富有语义化特性我们可以缩减带给页面美丽外观样式代码量并让它们有更高的可扩展性现在,HTML 5 和 CSS3 正跃跃欲试地等待大家, 下面让我们来看看它们是否真的能让我们的设计提升到下一个高度吧 </p> <p> 曾经, 设计师们经常会更频繁使用基于 table 的没有任何语义的布局不过最终还是要感谢像 73

14 Jeffrey Zeldman 和 Eric Meyer 这样的思想革新者, 聪明的设计师们慢慢地接受了相对更语义化的 <div> 布局替代了 table 布局, 并且开始调用外部样式表但不幸的是, 复杂的网页设计需要大量不同的标签结构代码, 我们把它叫作 <div>-soup 综合征 </p> 在 IE 11.0 中预览, 效果如图 4-15 所示,<P> 标记将文本分成 4 个段落案例 14 设置换行标记图 4-15 段落标记的使用换行标记 <br> 是一个单标记, 它没有结束标记, 是英文单词 break 的缩写, 作用是将文字在一个段内强制换行一个 <br> 标记代表一个换行, 连续的多个标记可以实现多次换行使用换行标记时, 在需要换行的位置添加 <br> 标记即可例如, 下面的代码实现了对文本的强制换行例 4.16 设置换行标记 ( 案例文件 :ch04\4.16.html) <head> <title> 文本段换行 </title> 本节目标 <br /> 网页中的文字是如何设置的 <br/> 如何在 Dreamweaver 中处理文字 <br/> 如何对文本进行格式化 (CSS)<br /> 熟悉使用 Dreamweaver 进行样式表的创建与应用虽然在 HTML 源代码中, 主体部分的内容在排版上没有换行, 但是增加 <br> 标记后, 在 IE 11.0 中预览, 效果如图 4-16 所示, 实现了换行效果图 4-16 换行标记的使用 74

15 4 4.4 设置网页水平线使用 <hr> 标签可以在 HTML 页面中创建一条水平线, 并设置水平线的高度宽度颜色对齐方式等样式案例 15 添加水平线第章设计网页文本内容在 HTML 中,<hr> 标签没有结束标签例 4.17 添加水平线 ( 案例文件 :ch04\4.17.html) <p>hr 标签定义水平线 </p> <hr /> <p> 这是一个段落 </p> <hr /> <p> 这是一个段落 </p> <hr /> <p> 这是一个段落 </p> 图 4-17 添加水平线在 IE 11.0 中预览, 效果如图 4-17 所示, 在其中可以看到添加的水平线案例 16 设置水平线的宽度与高度使用 size 与 width 属性可以设置水平线的宽度与高度其中,width 属性规定水平线的宽度, 以像素计或百分比计 ;size 属性规定水平线的高度, 以像素计 HTML 5 已经不再支持 <hr> 标记的 size 与 width 属性例 4.18 设置水平线的宽度与高度 ( 案例文件 :ch04\4.18.html) <p> 普通的水平线 </p> <hr /> <p> 高度为 50 像素的水平线 </p> 75

16 <hr size="50" /> <p> 宽度为 50% 的水平线 </p> <hr width="30%" /> 在 IE 11.0 中预览, 效果如图 4-18 所示, 其中一条水平线的高度为 50 像素, 一条水平线的宽度为 50% 案例 17 设置水平线的颜色图 4-18 设置水平线的宽度与高度使用 color 属性可以设置水平线的颜色下面以给网页添加一个红色水平线为例, 来介绍设置水平线颜色的方法例 4.19 设置水平线的颜色 ( 案例文件 : ch04\4.19.html) <p> 下面是一条红色水平线 </p> <hr color="red" /> 在 IE 11.0 中预览, 效果如图 4-19 所示, 可以看出网页中显示的水平线是红色图 4-19 设置水平线的颜色案例 18 设置水平线的对齐方式 align 属性规定水平线的水平对齐方式, 包括 3 种对齐方式, 分别是 :left( 左对齐 ) right( 右对齐 ) center( 居中对齐 ) 需要提示用户的是除非 width 属性设置为小于 100%, 否则 align 属性不会有任何效果 HTML 5 已经不再支持 <hr> 标记的 align 属性例 4.20 设置水平线的对齐方式 ( 案例文件 :ch04\4.20.html) <p> 设置水平线的对齐方式 </p> <hr align="center" width="50%" /> <hr align="left" width="50%" /> <hr align="right" width="50%" /> 在 IE 11.0 中预览, 效果如图 4-20 所示, 可以看到图 4-20 设置水平线的对齐方式 76

17 4 网页中水平线的对齐方式案例 19 去掉水平线阴影 noshade 属性规定水平线的颜色呈现为纯色, 而不是有阴影的颜色下面介绍去掉水平线阴影的方法 HTML 5 已经不再支持 <hr> 标记的 noshade 属性第章设计网页文本内容例 4.21 去掉水平线阴影 ( 案例文件 :ch04\4.21.html) <p> 带阴影的水平线 ( 默认 )</p> <hr /> <p> 不带阴影的水平线 </p> <hr noshade="noshade" /> 在 IE 11.0 中预览, 效果如图 4-21 所示, 可以看到两种水平线的区别图 4-21 去掉水平线的阴影 4.5 综合案例成才教育网文本设计本章讲述了网页组成元素中最常用的文本本实例将综合运用网页文本的设计方法, 制作成才教育网的文本页面其具体操作步骤如下 step 01 在 Dreamweaver CC 中新建 HTML 文档, 并修改成 HTML 5 标准代码如下 : <html > <head> <meta charset="utf-8" /> <title> 成才教育网 </title> step 02 在 body 部分增加如下 HTML 代码保存页面 <p><h2> 成才教育 </h2></p> <p> 成才教育成立于 2003 年, 是一家专业致力于学生学习能力开发和培养学习社区建设课外辅导服务家庭教育研究的新型综合教育服务机构自成立起, 一直专业致力于初高中学生的课外辅导和学习能力的培养 </p> <h3> 教学模式 </h3> 77

18 <p> 为学生量身定制最佳的学习方案, 改善学习方法, 充分挖掘学生们的智力潜能, 激发学习兴趣, 培养学生的自学能力, 辅导老师 ( 以一线重点在校教师为主 ) 对学生设计适合学生的辅导教案与作业习题 </p> <h3> 教学特色 </h3> 分析学科不足制订辅导计划 ;<br /> 特级名师高考难点点睛 ;<br /> 专人陪读随时解除疑难 ;<br /> 专业学科导师一对一面授学科知识解题技巧学习方式 step 03 使用 IE 打开文件预览, 效果如图 4-22 所示图 4-22 成才教育网 4.6 高手解惑疑问 1: 换行标记和段落标记的区别? 答 : 换行标记是单标记, 不能写结束标记段落标记是双标记, 可以省略结束标记也可以不省略在默认情况下, 段落之间的距离和段落内部的行间距是不同的, 段落间距比较大, 行间距比较小 HTML 无法调整段落间距和行间距, 如果希望调整它们, 就必须使用 CSS 在 Dreamweaver CC 的设计视图下, 按 Enter 键可以快速换段, 按 Shift+Enter 组合键可以快速换行疑问 2:HTML 文档页面上边总是留出一段空白? 答 :body 默认有个上边距, 设置这个值的属性 topmargin=0 就可以了有时还需要设置 leftmargin rightmargin 和 bottommargin 属性值 78

A-1 HTML A-1-1 HTML 1 HTML JSP HTML HTML HTML JSP A HTML HTML HTML HTML HTML HTML HTML HTML.htm.html HTML Windows NotePad HTML IE [ / ] NotePad A-2

HTML A-1 HTML A-2 A-2 HTML A-8 A-3 A-14 A-4 A-26 A-5 A-30 A-6 A-42 A-1 HTML A-1-1 HTML 1 HTML JSP HTML HTML HTML JSP A HTML HTML HTML HTML HTML HTML HTML HTML.htm.html HTML Windows NotePad HTML IE [ /