HTML5+CSS3移动Web开发实战单元2-文本新闻浏览网页设计.ppt

1、 新闻网站通常以文本新闻为主体，新闻网站通常以文本新闻为主体，本单元通过对新闻网站的导航网页和文本单元通过对新闻网站的导航网页和文本新闻网页设计的探析与训练，重点学本新闻网页设计的探析与训练，重点学习习HTML5中常用的文本标签、中常用的文本标签、CSS文本文本属性、字体属性、颜色值及颜色表示方属性、字体属性、颜色值及颜色表示方法、法、CSS链接属性等，学会网页元素的链接属性等，学会网页元素的水平对齐、水平对齐、CSS导航栏的设计，掌握文导航栏的设计，掌握文本新闻网页和导航网页的设计方法。本新闻网页和导航网页的设计方法。教学目标教学目标（1）熟悉）熟悉HTML5中常用的文本标签和中常用的文本标

2、签和CSS文本属性文本属性（2）熟悉）熟悉CSS的字体属性、颜色值及颜色表示方法、的字体属性、颜色值及颜色表示方法、CSS链接属性链接属性（3）学会网页元素的水平对齐设置方法）学会网页元素的水平对齐设置方法（4）学会）学会CSS导航栏的设计方法导航栏的设计方法（5）掌握文本新闻网页和导航网页的设计方法）掌握文本新闻网页和导航网页的设计方法关关 键键 字字新闻网站文本网页导航网页文本标签与属性字体属性颜色值链接属性新闻网站文本网页导航网页文本标签与属性字体属性颜色值链接属性参考资料参考资料（1）HTML5的常用标签及其属性、方法与事件参考附录的常用标签及其属性、方法与事件参考附录B（2）CSS的

3、属性参考附录的属性参考附录C（3）CSS的各种选择器的含义和用法参考附录的各种选择器的含义和用法参考附录D教学方法教学方法任务驱动法、分组讨论法、理论实践一体化、探究学习法任务驱动法、分组讨论法、理论实践一体化、探究学习法课时建议课时建议8课时课时【任务【任务2-1】探析手机搜狐网的名站导航网页】探析手机搜狐网的名站导航网页【效果展示】【效果展示】手机搜狐网的名站导航网页手机搜狐网的名站导航网页0201.html的浏览效果如图的浏览效果如图2-1所示。所示。手机搜狐网的名站导航网页手机搜狐网的名站导航网页0201.html的主体结构为上、中、下结构，顶部为标的主体结构为上、中、下结构，顶部为标

4、题文本，中部包括多个热点网站的链接按题文本，中部包括多个热点网站的链接按钮和多行分类网站导航链接，底部包括多钮和多行分类网站导航链接，底部包括多个导航链接和版权信息。个导航链接和版权信息。图图2-1手机搜狐网的名站导航网页手机搜狐网的名站导航网页0201.html的浏览效果的浏览效果【网页探析】【网页探析】1网页网页0201.html的的HTML代码探析代码探析2网页网页0201.html的的CSS代码探析代码探析1HTML5中常用的文本标签中常用的文本标签（1）标签与标签与标签标签 标签用于描述文档或文档某个标签用于描述文档或文档某个部分的细节，目前只有部分的细节，目前只有Chrome浏览器

5、支持浏览器支持标签，可以与标签，可以与标签配合标签配合使用。使用。（2）标签标签 标签用于设置一段文本，使其标签用于设置一段文本，使其脱离其父元素的文本方向设置。脱离其父元素的文本方向设置。（3）标签、标签、标签与标签与标签标签 标签用于定义标签用于定义ruby注释（中文注注释（中文注音或字符）。与音或字符）。与标签一同使用。标签一同使用。元素由一个或多个字符（需要一元素由一个或多个字符（需要一个解释或发音）和一个提供该信息的个解释或发音）和一个提供该信息的元元素组成，还包括可选的素组成，还包括可选的元素，定义当浏元素，定义当浏览器不支持览器不支持标签时显示的内容。标签时显示的内容。（4）标签

6、标签 标签主要用来在视觉上向用标签主要用来在视觉上向用户呈现那些需要突出显示或高亮显示的户呈现那些需要突出显示或高亮显示的文字，典型应用是搜索结果中高亮显示文字，典型应用是搜索结果中高亮显示搜索关键字。搜索关键字。（5）标签标签 标签用于定义日期或时间，标签用于定义日期或时间，也可以两者同时。也可以两者同时。（6）标签标签 标签用于定义度量衡。仅用标签用于定义度量衡。仅用于已知最大和最小值的度量。于已知最大和最小值的度量。（7）标签标签 标签用于定义任何类型任标签用于定义任何类型任务的运行进度，可以使用务的运行进度，可以使用元素元素显示显示JavaScript中耗时时间函数的进程。中耗时时间函

7、数的进程。（8）标签与标签与标签标签 标签可插入一个简单的换行符，使用标签可插入一个简单的换行符，使用来输入空行，而不是分割段落。来输入空行，而不是分割段落。标签标签是空标签（意味着它没有结束标签，因此这是是空标签（意味着它没有结束标签，因此这是错误的：错误的：）。在）。在XHTML中，把结束中，把结束标签放在开始标签中，也就是标签放在开始标签中，也就是。CSS文本属性可定义文本的外观，文本属性可定义文本的外观，通过文本属性，可以改变文本的颜色、通过文本属性，可以改变文本的颜色、字符间距、对齐文本、装饰文本，以及字符间距、对齐文本、装饰文本，以及对文本进行缩进等。对文本进行缩进等。把把Web页

8、面中段落的第一行缩进，这页面中段落的第一行缩进，这是一种最常用的文本格式化效果。是一种最常用的文本格式化效果。CSS提供了提供了text-indent属性属性，该属性可，该属性可以方便地实现文本缩进。以方便地实现文本缩进。通过使用通过使用text-indent属性，所有元素的属性，所有元素的第一行都可以缩进一个给定的长度，甚至第一行都可以缩进一个给定的长度，甚至该长度可以是负值。该长度可以是负值。text-align是一个基本的属性，它会是一个基本的属性，它会影响一个元素中的文本行互相之间的对影响一个元素中的文本行互相之间的对齐方式，其取值齐方式，其取值left、right和和center会导

9、会导致元素中的文本分别左对齐、右对齐和致元素中的文本分别左对齐、右对齐和居中。居中。word-spacing属性属性可以改变字（单词）可以改变字（单词）之间的标准间隔，其默认值之间的标准间隔，其默认值normal与设置与设置值为值为0是一样的。是一样的。word-spacing属性接受一个正长度值或属性接受一个正长度值或负长度值。负长度值。如果提供一个正长度值，那么文字如果提供一个正长度值，那么文字之间的间隔就会增加。之间的间隔就会增加。为为word-spacing设置一个负值，就设置一个负值，就会把文字拉近会把文字拉近。与与word-spacing属性一样，属性一样，letter-spaci

10、ng属性的可取值包括所有长度，默属性的可取值包括所有长度，默认关键字是认关键字是normal（这与（这与letter-spacing:0相同）。相同）。输入的长度值会使字母之间的间隔输入的长度值会使字母之间的间隔增加或减少指定的量增加或减少指定的量。text-transform属性属性处理文本的大小处理文本的大小写，该属性有写，该属性有4个取值：个取值：none、uppercase、lowercase和和capitalize。默认值默认值none对文本不做任何改动，将对文本不做任何改动，将使用源文档中的原有大小写。使用源文档中的原有大小写。顾名思义，顾名思义，uppercase和和lowerc

11、ase将文将文本转换为全大写和全小写字符，本转换为全大写和全小写字符，capitalize只只对每个单词的首字母大写。对每个单词的首字母大写。text-decoration属性属性提供了很多非常有提供了很多非常有趣的行为，趣的行为，text-decoration有有5个值：个值：none、underline、overline、line-through、blink，不出所料，不出所料，underline会对元素加下划线，会对元素加下划线，overline的作用恰好相反，会在文本的顶端的作用恰好相反，会在文本的顶端画一个上划线，画一个上划线，line-through则在文本中间则在文本中间画一个贯

12、穿线，画一个贯穿线，blink会让文本闪烁。会让文本闪烁。注意：如果显式地用这样一个规则去掉注意：如果显式地用这样一个规则去掉链接的下划线，那么超链接与正常文本链接的下划线，那么超链接与正常文本之间在视觉上的唯一差别就是颜色。之间在视觉上的唯一差别就是颜色。在在CSS3中，中，text-shadow可向文本应可向文本应用阴影，允许规定水平阴影、垂直阴影、用阴影，允许规定水平阴影、垂直阴影、模糊距离及阴影的颜色。模糊距离及阴影的颜色。white-space属性属性会影响到对源文档会影响到对源文档中的空格、换行和中的空格、换行和tab字符的处理。字符的处理。通过使用该属性，可以影响浏览器通过使用该

13、属性，可以影响浏览器处理字之间和文本行之间的空白符的方处理字之间和文本行之间的空白符的方式。式。从某种程度上讲，默认的从某种程度上讲，默认的XHTML处理已经完成了空白符处理处理已经完成了空白符处理它会把它会把所有空白符合并为一个空格。所有空白符合并为一个空格。CSS字体属性定义文本的字体系列、字体属性定义文本的字体系列、大小、加粗、风格（如斜体）和变形（如大小、加粗、风格（如斜体）和变形（如小型大写字母）。小型大写字母）。在在CSS中，有两种不同类型的字体系列：中，有两种不同类型的字体系列：通用字体系列：拥有相似外观的字体系统通用字体系列：拥有相似外观的字体系统组合（如组合（如“serif”

14、或或“monospace”）。）。特定字体系列：具体的字体系列（如特定字体系列：具体的字体系列（如“Times”或或“Courier”）。除了各种特定的字体系列外，）。除了各种特定的字体系列外，CSS定义了定义了5种通用字体系列：种通用字体系列：serif 字体、字体、sans-serif 字体、字体、monospace字体、字体、cursive 字体字体、fantasy字体。字体。font-style属性属性最常用于规定斜体文本，该最常用于规定斜体文本，该属性有属性有3个取值：个取值：normal（文本正常显示）、（文本正常显示）、italic（文本斜体显示）、（文本斜体显示）、obliqu

15、e（文本倾斜显（文本倾斜显示）。示）。font-variant属性属性可以设定小型大写可以设定小型大写字母，小型大写字母不是一般的大写字字母，小型大写字母不是一般的大写字母，也不是小写字母，这种字母采用不母，也不是小写字母，这种字母采用不同大小的大写字母。同大小的大写字母。font-weight属性属性设置文本的粗细，使设置文本的粗细，使用用bold关键字可以将文本设置为粗体。关键字可以将文本设置为粗体。关键字关键字100900为字体指定了为字体指定了9级加粗级加粗度。度。如果一个字体内置了这些加粗级别，那么这如果一个字体内置了这些加粗级别，那么这些数字就直接映射到预定义的级别，些数字就直接映

16、射到预定义的级别，100对应最对应最细的字体变形，细的字体变形，900对应最粗的字体变形。对应最粗的字体变形。数字数字400等价于等价于normal，而，而700等价于等价于bold。font-size属性属性设置文本的大小，设置文本的大小，font-size 值可以是绝对或相对值。值可以是绝对或相对值。绝对值是指将文本设置为指定的大绝对值是指将文本设置为指定的大小，不允许用户在所有浏览器中改变文小，不允许用户在所有浏览器中改变文本大小，绝对大小在确定了输出的物理本大小，绝对大小在确定了输出的物理尺寸时很有用。尺寸时很有用。相对大小是指相对于周围的元素来设置大相对大小是指相对于周围的元素来设置

17、大小，允许用户在浏览器改变文本大小。小，允许用户在浏览器改变文本大小。注意：如果没有规定字体大小，普通文本（如注意：如果没有规定字体大小，普通文本（如段落）的默认大小是段落）的默认大小是16px（16px=1em）。）。在在CSS3之前，我们必须使用已在用之前，我们必须使用已在用户计算机上安装好的字体，通过户计算机上安装好的字体，通过CSS3，则可以使用我们喜欢的任意字体。则可以使用我们喜欢的任意字体。当我们找到或购买到希望使用的字当我们找到或购买到希望使用的字体时，可将该字体文件存放到体时，可将该字体文件存放到Web服务服务器上，它会在需要时被自动下载到用户器上，它会在需要时被自动下载到用户

18、的计算机上。的计算机上。描述符名称描述符名称允许的取值允许的取值使用说明使用说明font-familyname必需项，规定字体的名称必需项，规定字体的名称srcURL必需项，定义字体文件的必需项，定义字体文件的 URLfont-stretchnormal、condensed、ultra-condensed、extra-condensed、semi-condensed、expanded、semi-expanded、extra-expanded、ultra-expanded可选项，定义如何拉伸字体，默认可选项，定义如何拉伸字体，默认是是“normal”表表2-6能够在能够在font-face 规则

19、中定义的字体描述符规则中定义的字体描述符描述符名称描述符名称允许的取值允许的取值使用说明使用说明font-stylenormal、italic、oblique可选项，定义字体的样式，默认是可选项，定义字体的样式，默认是“normal”font-weightnormal、bold、100、200、300、400、500、600、700、800、900可选项，定义字体的粗细，默认是可选项，定义字体的粗细，默认是“normal”unicode-rangeunicode-range可选项，定义字体支持的可选项，定义字体支持的UNICODE字符范围，默认是字符范围，默认是 “U+0-10FFFF”续表续

20、表 颜色是通过对红、绿和蓝光的组合颜色是通过对红、绿和蓝光的组合来显示的。来显示的。（1）颜色值）颜色值 CSS颜色使用组合了红、绿、蓝颜颜色使用组合了红、绿、蓝颜色值（色值（RGB）的十六进制（）的十六进制（HEX）表示）表示法进行定义。法进行定义。对光源进行设置的最低值可以是对光源进行设置的最低值可以是0（十（十六进制六进制00），最高值是），最高值是255（十六进制（十六进制FF）。）。十六进制值使用十六进制值使用3个两位数来编写，并个两位数来编写，并以以#符号开头。符号开头。CSS常用颜色的常用颜色的HEX表示法表示法与与RGB表示法如表表示法如表2-7所示。所示。颜色颜色HEX表示法

21、表示法颜色颜色RGB表示法表示法颜色颜色HEX表示法表示法颜色颜色RGB表示法表示法#000000rgb(0,0,0)#00FFFFrgb(0,255,255)#FF0000rgb(255,0,0)#FF00FFrgb(255,0,255)#00FF00rgb(0,255,0)#FFFFFFrgb(255,255,255)#0000FFrgb(0,0,255)#CCCCCCrgb(204,204,204)#FFFF00rgb(255,255,0)#C0rgb(192,192,192)表表2-7CSS常用颜色的常用颜色的HEX表示法与表示法与RGB表示法表示法 十六进制颜色十六进制颜色 十六进制

22、颜色是这样规定的：十六进制颜色是这样规定的：#RRGGBB，其，其中的中的RR（红色）、（红色）、GG（绿色）、（绿色）、BB（蓝色）十（蓝色）十六进制整数规定了颜色的成分，所有值必须介于六进制整数规定了颜色的成分，所有值必须介于0与与FF之间。之间。所有浏览器都支持十六进制颜色值。所有浏览器都支持十六进制颜色值。RGB颜色颜色 RGB颜色值的表示方式为颜色值的表示方式为rgb(red,green,blue)，每个参数，每个参数(red、green及及blue)定义颜色定义颜色的强度，可以是介于的强度，可以是介于0255之间的整数，或之间的整数，或者是百分比值（从者是百分比值（从0%100%）

23、。所有浏览）。所有浏览器都支持器都支持RGB颜色值。颜色值。RGBA颜色颜色 RGBA颜色值是颜色值是RGB颜色值的扩展，颜色值的扩展，带有一个带有一个alpha通道（它规定了对象的不透通道（它规定了对象的不透明度）。明度）。RGBA颜色值的表示方式为：颜色值的表示方式为：rgba(red,green,blue,alpha)，其中，其中alpha参数是介于参数是介于0.0（完全透明）与（完全透明）与1.0（完全不透明）之间的数（完全不透明）之间的数字。字。RGBA颜色值得到以下浏览器的支持：颜色值得到以下浏览器的支持：IE9+、Firefox 3+、Chrome、Safari及及Opera 1

24、0+。HSL颜色颜色 HSL指的是指的是Bue（色调）、（色调）、Saturation（饱和度）、（饱和度）、Lightness（亮度）。（亮度）。HSL颜色值的表示方式为：颜色值的表示方式为：hsl(hue,saturation,lightness)。HSLA颜色颜色 HSLA颜色值是颜色值是HSL颜色值的扩展，颜色值的扩展，带有一个带有一个alpha 通道（它规定了对象的通道（它规定了对象的不透明度）。不透明度）。HSLA颜色值表示方式为：颜色值表示方式为：hsla(hue,saturation,lightness,alpha)，其中的其中的alpha参数定义不透明度，参数定义不透明度，a

25、lpha参数是介于参数是介于0.0（完全透明）与（完全透明）与1.0（完全（完全不透明）之间的数字。不透明）之间的数字。预定义预定义/跨浏览器颜色名跨浏览器颜色名 HTML和和CSS颜色规范中定义了颜色规范中定义了147种颜种颜色名（色名（17种标准颜色加种标准颜色加130种其他颜色）。种其他颜色）。17种标准色分别是种标准色分别是aqua、black、blue、fuchsia、gray、green、lime、maroon、navy、olive、orange、purple、red、silver、teal、white、yellow。所有浏览器都支持的颜色名。所有浏览器都支持的颜色名。在在CSS中

26、，可以使用多种属性来水平中，可以使用多种属性来水平对齐元素。对齐元素。（1）使用）使用text-align属性水平对齐元素属性水平对齐元素 块元素指的是占据全部可用宽度的元块元素指的是占据全部可用宽度的元素，并且在其前后都会换行。素，并且在其前后都会换行。网页中常见的块元素有网页中常见的块元素有、。text-align是一个基本的属性，它会是一个基本的属性，它会影响一个元素中的文本行互相之间的对影响一个元素中的文本行互相之间的对齐方式。齐方式。（2）使用）使用margin属性水平对齐块元素属性水平对齐块元素 将块级元素或表元素居中，要通过将块级元素或表元素居中，要通过在这些元素上适当地设置左、

27、右外边距在这些元素上适当地设置左、右外边距来实现，可通过将左和右外边距设置为来实现，可通过将左和右外边距设置为“auto”来对齐块元素。来对齐块元素。把左和右外边距设置为把左和右外边距设置为auto，规定，规定的是均等地分配可用的外边距，结果就的是均等地分配可用的外边距，结果就是居中的元素是居中的元素。（3）使用）使用position属性进行左和右对齐属性进行左和右对齐 对齐元素的方法之一是使用绝对定对齐元素的方法之一是使用绝对定位，绝对定位元素会从正常流中删除，位，绝对定位元素会从正常流中删除，并且能够交叠元素。并且能够交叠元素。（4）使用）使用float属性来进行左和右对齐属性来进行左和右

28、对齐（1）设置链接的样式）设置链接的样式 链接的特殊性在于能够根据它们所处链接的特殊性在于能够根据它们所处的状态来设置它们的样式，能够设置链接的状态来设置它们的样式，能够设置链接样式的样式的CSS属性有很多种（如属性有很多种（如color、font-family、background等）。等）。链接有链接有4种状态：种状态：a:link（普通的、未被访（普通的、未被访问的链接）、问的链接）、a:visited（用户已访问的链接）、（用户已访问的链接）、a:hover（鼠标指针位于链接的上方）和（鼠标指针位于链接的上方）和a:active（链接被单击的时刻）。（链接被单击的时刻）。文本修饰文本修

29、饰 text-decoration属性大多用于去掉链属性大多用于去掉链接中的下划线接中的下划线。背景色背景色 background-color属性用于设置链接属性用于设置链接的背景色的背景色。拥有易用的导航栏对于任何网站都很拥有易用的导航栏对于任何网站都很重要，通过重要，通过CSS，能够把乏味的，能够把乏味的HTML菜菜单转换为漂亮的导航栏。单转换为漂亮的导航栏。导航栏基本上是一个链接列表，因此导航栏基本上是一个链接列表，因此使用使用和和 元素是非常合适的元素是非常合适的。（1）垂直导航栏）垂直导航栏（2）水平导航栏）水平导航栏 行内列表项行内列表项 对列表项进行浮动对列表项进行浮动【任务【任

30、务2-2】设计手机搜狐网的站内导航网页】设计手机搜狐网的站内导航网页【任务描述】【任务描述】编写编写HTML代码和代码和CSS代码，设计图代码，设计图2-2所示手机搜狐网的站内导航网页所示手机搜狐网的站内导航网页0202.html。手机搜狐网的站内导航网页手机搜狐网的站内导航网页0202.html的主体结构为上、中、下结构，如图的主体结构为上、中、下结构，如图2-2所所示。示。图图2-2手机搜狐网的站内导航网页手机搜狐网的站内导航网页0202.html的浏览效果的浏览效果 顶部内容包括返回链接按钮、标题顶部内容包括返回链接按钮、标题文字和主页链接按钮，中部内容包括多文字和主页链接按钮，中部内容

31、包括多行分类的站内页面导航超链接，底部内行分类的站内页面导航超链接，底部内容包括多个超链接和版权信息。容包括多个超链接和版权信息。【任务实施】【任务实施】1网页网页0202.html的主体结构设计的主体结构设计 在本地硬盘的文件夹在本地硬盘的文件夹“02文本新闻浏文本新闻浏览网页设计览网页设计0202”中创建网页中创建网页0202.html。（1）定义网页）定义网页0202.html通用通用CSS代码代码（2）定义网页）定义网页0202.html主体结构的主体结构的CSS代代码码（3）编写网页）编写网页0202.html主体结构的主体结构的HTML代码代码（1）网页）网页0202.html的顶

32、部内容设计的顶部内容设计（2）网页）网页0202.html的中部内容设计的中部内容设计（3）网页）网页0202.html的底部内容设计的底部内容设计【网页浏览】【网页浏览】保存网页保存网页0202.html，在浏览器，在浏览器Google Chrome中的浏览效果如图中的浏览效果如图2-2所示。所示。【任务【任务2-3】设计手机搜狐网的文本新闻网页】设计手机搜狐网的文本新闻网页【任务描述】【任务描述】编写编写HTML代码和代码和CSS代码，设计图代码，设计图2-3所示手机搜狐网的文本新闻网页所示手机搜狐网的文本新闻网页0203.html。手机搜狐网的文本新闻网页手机搜狐网的文本新闻网页0203

33、.html的主的主体结构为上、中、下结构，如图体结构为上、中、下结构，如图2-3所示。所示。顶部内容包括标题文字和主页链接按钮，顶部内容包括标题文字和主页链接按钮，中部内容包括文本新闻的标题和正文，底部内中部内容包括文本新闻的标题和正文，底部内容包括多个超链接和版权信息。容包括多个超链接和版权信息。图图2-3手机搜狐网的文本新闻网页手机搜狐网的文本新闻网页0203.html的浏览效果的浏览效果 网页网页0203.html顶部结构使用顶部结构使用标标签实现，中部结构使用签实现，中部结构使用标签实现，底标签实现，底部结构使用部结构使用标签实现。标签实现。【任务实施】【任务实施】1网页网页0203.

34、html的主体结构设计的主体结构设计 在本地硬盘的文件夹在本地硬盘的文件夹“02文本新闻浏文本新闻浏览网页设计览网页设计0203”中创建网页中创建网页0203.html。（1）定义网页）定义网页0203.html通用通用CSS代码代码（2）定义网页）定义网页0203.html主体结构的主体结构的CSS 代代码码（3）编写网页）编写网页0203.html主体结构的主体结构的HTML代码代码（1）网页）网页0203.html的顶部内容设计的顶部内容设计（2）网页）网页0203.html的中部内容设计的中部内容设计（3）网页）网页0203.html的底部内容设计的底部内容设计【网页浏览】【网页浏览】

35、保存网页保存网页0203.html，在浏览器，在浏览器Google Chrome中的浏览效果如图中的浏览效果如图2-3所示。所示。【任务【任务2-4】设计新华网手机版的网址导航】设计新华网手机版的网址导航网页网页【任务描述】【任务描述】【任务实施】【任务实施】1网页网页0204.html的主体结构设计的主体结构设计（1）定义网页）定义网页0204.html通用通用CSS代码代码（2）定义网页）定义网页0204.html主体结构的主体结构的CSS代代码码（3）编写网页）编写网页0204.html主体结构的主体结构的HTML代码代码（1）网页）网页0204.html的顶部内容设计的顶部内容设计（2

36、）网页）网页0204.html的中部内容设计的中部内容设计（3）网页）网页0204.html的底部内容设计的底部内容设计【网页浏览】【网页浏览】保存网页保存网页0204.html，在浏览器，在浏览器Google Chrome中的浏览效果如图中的浏览效果如图2-4所示。所示。图图2-4新华网手机版的网址导航新华网手机版的网址导航网页网页0204.html的浏览效果的浏览效果【任务【任务2-5】设计新华网手机版的文本新闻网页】设计新华网手机版的文本新闻网页【任务描述】【任务描述】编写编写HTML代码和代码和CSS代码，设计图代码，设计图2-5所所示新华网移动版的文本新闻网页示新华网移动版的文本新闻

37、网页0205.html。图图2-5新华网移动版的文本新闻新华网移动版的文本新闻网页网页0205.html的浏览效果的浏览效果 在网页在网页0205.html中单击中单击“A+”超链接，超链接，可以将文本新闻的文字大小设置为可以将文本新闻的文字大小设置为24px，单，单击击“A-”超链接，可以将文本新闻的文字大超链接，可以将文本新闻的文字大小重新设置为小重新设置为16px，即该网页中文本新闻的，即该网页中文本新闻的文字大小可以在文字大小可以在“24px”和和“16px”之间进之间进行动态切换。行动态切换。新华网移动版的文本新闻网页新华网移动版的文本新闻网页0205.html的的主体结构为上、中、

38、下结构，如图主体结构为上、中、下结构，如图2-5所示。所示。顶部内容包括回首页超链接和标题文字，顶部内容包括回首页超链接和标题文字，中部内容包括文本新闻的标题、来源和正文，中部内容包括文本新闻的标题、来源和正文，底部内容包括多个超链接和版权信息。底部内容包括多个超链接和版权信息。网页网页0205.html顶部结构使用顶部结构使用标标签实现，中部结构使用签实现，中部结构使用标签实现，底标签实现，底部结构使用部结构使用标签实现。标签实现。【任务实施】【任务实施】1网页网页0205.html的主体结构设计的主体结构设计 在本地硬盘的文件夹在本地硬盘的文件夹“02文本新闻浏文本新闻浏览网页设计览网页设

39、计0205”中创建网页中创建网页0205.html。（1）定义网页）定义网页0205.html通用通用CSS代码代码（2）定义网页）定义网页0205.html主体结构的主体结构的CSS代代码码（3）编写网页）编写网页0205.html主体结构的主体结构的HTML代码代码（1）网页）网页0205.html的顶部内容设计的顶部内容设计（2）网页）网页0205.html的中部内容设计的中部内容设计（3）网页）网页0205.html的底部内容设计的底部内容设计【网页浏览】【网页浏览】保存网页保存网页0205.html，在浏览器，在浏览器Google Chrome中的浏览效果如图中的浏览效果如图2-5所

40、示。所示。【任务【任务2-6】设计新华网手机版的标题新闻】设计新华网手机版的标题新闻及导航网页及导航网页【任务描述】【任务描述】编写编写HTML代码和代码和CSS代码，设计代码，设计图图2-6所示新华网手机版的标题新闻及导所示新华网手机版的标题新闻及导航网页航网页0206.html。图图2-6新华网手机版的标题新闻及导航网页新华网手机版的标题新闻及导航网页0206.html的浏览效果的浏览效果 在新华网手机版的标题新闻及导航在新华网手机版的标题新闻及导航网页网页0206.html中单击中单击“显示更多显示更多”超链超链接，可以显示更多的标题新闻。接，可以显示更多的标题新闻。【操作提示】【操作提

41、示】（1）网页）网页0206.html的的HTML代码编写提代码编写提示示（2）网页）网页0206.html的的CSS代码定义提示代码定义提示（3）网页）网页0206.html的的JavaScript代码定义代码定义提示提示 本单元通过对新闻网站导航网页和本单元通过对新闻网站导航网页和文本新闻网页设计的探析与三步训练，文本新闻网页设计的探析与三步训练，重点熟悉了重点熟悉了HTML5中常用的文本标签、中常用的文本标签、CSS文本属性、字体属性、颜色值及颜文本属性、字体属性、颜色值及颜色表示方法、色表示方法、CSS链接属性等，学会了链接属性等，学会了网页元素的水平对齐、网页元素的水平对齐、CSS导航栏的设导航栏的设计，学会了文本新闻网页和导航网页的计，学会了文本新闻网页和导航网页的设计方法。设计方法。