【文档说明】HTML5+CSS3移动Web开发实战单元2--文本新闻浏览网页设计.ppt，共(90)页，867.000 KB，由小橙橙上传

转载请保留链接：https://www.ichengzhen.cn/view-2938.html

以下为本文档部分文字说明：

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

设计，掌握文本新闻网页和导航网页的设计方法。教学导航教学目标（1）熟悉HTML5中常用的文本标签和CSS文本属性（2）熟悉CSS的字体属性、颜色值及颜色表示方法、CSS链接属性（3）学会网页元素的水平对齐设置方法（4）学会CSS导航

栏的设计方法（5）掌握文本新闻网页和导航网页的设计方法关键字新闻网站文本网页导航网页文本标签与属性字体属性颜色值链接属性参考资料（1）HTML5的常用标签及其属性、方法与事件参考附录B（2）CSS的属性参考

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

。手机搜狐网的名站导航网页0201.html的主体结构为上、中、下结构，顶部为标题文本，中部包括多个热点网站的链接按钮和多行分类网站导航链接，底部包括多个导航链接和版权信息。图2-1手机搜狐网的名站导航网页0201.html的浏览效果【网页探析】1．网页

0201.html的HTML代码探析2．网页0201.html的CSS代码探析知识梳理1．HTML5中常用的文本标签（1）<details>标签与<summary>标签<details>标签用于描述文档或文档某个部分的细节，目前只有Chrome浏

览器支持<details>标签，可以与<summary>标签配合使用。（2）<bdi>标签<bdi>标签用于设置一段文本，使其脱离其父元素的文本方向设置。（3）<ruby>标签、<rt>标签与<rp>标签<ruby>标签用于定义ruby注释（中文注音或字符）。与<rt>标

签一同使用。<ruby>元素由一个或多个字符（需要一个解释或发音）和一个提供该信息的<rt>元素组成，还包括可选的<rp>元素，定义当浏览器不支持<ruby>标签时显示的内容。（4）<mark>标签<ma

rk>标签主要用来在视觉上向用户呈现那些需要突出显示或高亮显示的文字，典型应用是搜索结果中高亮显示搜索关键字。（5）<time>标签<time>标签用于定义日期或时间，也可以两者同时。（6）<meter>标签<meter>标签用于定义度量衡。仅用于已

知最大和最小值的度量。（7）<progress>标签<progress>标签用于定义任何类型任务的运行进度，可以使用<progress>元素显示JavaScript中耗时时间函数的进程。（8）<br>标签与<wbr>标签<br

>标签可插入一个简单的换行符，使用<br>来输入空行，而不是分割段落。<br>标签是空标签（意味着它没有结束标签，因此这是错误的：<br></br>）。在XHTML中，把结束标签放在开始标签中，也就是<br/>。2．CSS文本属性（Text）CSS文本属性可

定义文本的外观，通过文本属性，可以改变文本的颜色、字符间距、对齐文本、装饰文本，以及对文本进行缩进等。（1）缩进文本把Web页面中段落的第一行缩进，这是一种最常用的文本格式化效果。CSS提供了text-indent属性，该属性可以方便地实现文本缩进。通过使用text-indent属性，所有

元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值。（2）水平对齐text-align是一个基本的属性，它会影响一个元素中的文本行互相之间的对齐方式，其取值left、right和center会导致元素中的文本分别左对齐、右对齐和居中。（3）字间隔word-spacing属

性可以改变字（单词）之间的标准间隔，其默认值normal与设置值为0是一样的。word-spacing属性接受一个正长度值或负长度值。如果提供一个正长度值，那么文字之间的间隔就会增加。为word-spacing设置一个负值，就会把文字拉近。（4）字母间隔

与word-spacing属性一样，letter-spacing属性的可取值包括所有长度，默认关键字是normal（这与letter-spacing:0相同）。输入的长度值会使字母之间的间隔增加或减少指定的量。（5）字符转换text-t

ransform属性处理文本的大小写，该属性有4个取值：none、uppercase、lowercase和capitalize。默认值none对文本不做任何改动，将使用源文档中的原有大小写。顾名思义，uppercase和l

owercase将文本转换为全大写和全小写字符，capitalize只对每个单词的首字母大写。（6）文本装饰text-decoration属性提供了很多非常有趣的行为，text-decoration有5个值：none、underline、overline

、line-through、blink，不出所料，underline会对元素加下划线，overline的作用恰好相反，会在文本的顶端画一个上划线，line-through则在文本中间画一个贯穿线，blink会让文本闪烁。注意：如果显式地用这样一个规则去掉链接的下划线，那么超链接与正常文本

之间在视觉上的唯一差别就是颜色。（7）文本阴影在CSS3中，text-shadow可向文本应用阴影，允许规定水平阴影、垂直阴影、模糊距离及阴影的颜色。（8）处理空白符white-space属性会影响到对源文档中的空格、换行和tab字符的处理

。通过使用该属性，可以影响浏览器处理字之间和文本行之间的空白符的方式。从某种程度上讲，默认的XHTML处理已经完成了空白符处理——它会把所有空白符合并为一个空格。3．CSS字体属性（Font）CSS字体属性定义文本的字体

系列、大小、加粗、风格（如斜体）和变形（如小型大写字母）。（1）CSS字体系列在CSS中，有两种不同类型的字体系列：①通用字体系列：拥有相似外观的字体系统组合（如“serif”或“monospace”）。②特定字体系列：具

体的字体系列（如“Times”或“Courier”）。除了各种特定的字体系列外，CSS定义了5种通用字体系列：serif字体、sans-serif字体、monospace字体、cursive字体、fantasy字体。（2）字体风格font-style属性最常用于规定

斜体文本，该属性有3个取值：normal（文本正常显示）、italic（文本斜体显示）、oblique（文本倾斜显示）。（3）字体变形font-variant属性可以设定小型大写字母，小型大写字母不是一般的大写字母，也不是小写字母，这种字母采用不

同大小的大写字母。（4）字体加粗font-weight属性设置文本的粗细，使用bold关键字可以将文本设置为粗体。关键字100～900为字体指定了9级加粗度。如果一个字体内置了这些加粗级别，那么这些数字就直接映射到预定义的级别，100

对应最细的字体变形，900对应最粗的字体变形。数字400等价于normal，而700等价于bold。（5）字体大小font-size属性设置文本的大小，font-size值可以是绝对或相对值。绝对值是指将文本设置为指定的大小，不允许

用户在所有浏览器中改变文本大小，绝对大小在确定了输出的物理尺寸时很有用。相对大小是指相对于周围的元素来设置大小，允许用户在浏览器改变文本大小。注意：如果没有规定字体大小，普通文本（如段落）的默认大小

是16px（16px=1em）。（6）CSS3@font-face规则在CSS3之前，我们必须使用已在用户计算机上安装好的字体，通过CSS3，则可以使用我们喜欢的任意字体。当我们找到或购买到希望使用的字体时，可将该字体文件存放到Web服务器上，它会在需要时被自动下载到用户的计算机上。描述

符名称允许的取值使用说明font-familyname必需项，规定字体的名称srcURL必需项，定义字体文件的URLfont-stretchnormal、condensed、ultra-condensed、extra-condensed、semi-c

ondensed、expanded、semi-expanded、extra-expanded、ultra-expanded可选项，定义如何拉伸字体，默认是“normal”表2-6能够在@font-face规则中定义的字

体描述符描述符名称允许的取值使用说明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”续表4．CSS颜色颜色是通过对红、绿和蓝光的组合来显示的。（

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

。CSS常用颜色的HEX表示法与RGB表示法如表2-7所示。颜色HEX表示法颜色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)#FFFF

00rgb(255,255,0)#C0rgb(192,192,192)表2-7CSS常用颜色的HEX表示法与RGB表示法（2）CSS中的颜色的表示方法①十六进制颜色十六进制颜色是这样规定的：#RRGGBB，其中的RR（红色）、

GG（绿色）、BB（蓝色）十六进制整数规定了颜色的成分，所有值必须介于0与FF之间。所有浏览器都支持十六进制颜色值。②RGB颜色RGB颜色值的表示方式为rgb(red,green,blue)，每个参数(red、green及blue)定义颜色的强度，可以是介于0～2

55之间的整数，或者是百分比值（从0%～100%）。所有浏览器都支持RGB颜色值。③RGBA颜色RGBA颜色值是RGB颜色值的扩展，带有一个alpha通道（它规定了对象的不透明度）。RGBA颜色值的表示方式为：rgba(red,green,blue

,alpha)，其中alpha参数是介于0.0（完全透明）与1.0（完全不透明）之间的数字。RGBA颜色值得到以下浏览器的支持：IE9+、Firefox3+、Chrome、Safari及Opera10+。④HSL颜色HSL指的是Bue（色调）、Saturation（饱和度）、Lightn

ess（亮度）。HSL颜色值的表示方式为：hsl(hue,saturation,lightness)。⑤HSLA颜色HSLA颜色值是HSL颜色值的扩展，带有一个alpha通道（它规定了对象的不透明度）

。HSLA颜色值表示方式为：hsla(hue,saturation,lightness,alpha)，其中的alpha参数定义不透明度，alpha参数是介于0.0（完全透明）与1.0（完全不透明）之间的数字。⑥预定义/跨浏览器颜色名HTML和CSS颜色规范中

定义了147种颜色名（17种标准颜色加130种其他颜色）。17种标准色分别是aqua、black、blue、fuchsia、gray、green、lime、maroon、navy、olive、orange、pu

rple、red、silver、teal、white、yellow。所有浏览器都支持的颜色名。5．网页元素的水平对齐在CSS中，可以使用多种属性来水平对齐元素。（1）使用text-align属性水平对齐元素块元素指的是占据全部可用宽度的元素，并且在其前后都会换行。网页中常见的块元素有<h1>、<

p>、<div>。text-align是一个基本的属性，它会影响一个元素中的文本行互相之间的对齐方式。（2）使用margin属性水平对齐块元素将块级元素或表元素居中，要通过在这些元素上适当地设置左、右外边距来实现，可通过将左和右外边距设置为“auto”来对齐块

元素。把左和右外边距设置为auto，规定的是均等地分配可用的外边距，结果就是居中的元素。（3）使用position属性进行左和右对齐对齐元素的方法之一是使用绝对定位，绝对定位元素会从正常流中删除，并且能够交叠元素。（4）使用fl

oat属性来进行左和右对齐6．CSS链接属性（Hyperlink）（1）设置链接的样式链接的特殊性在于能够根据它们所处的状态来设置它们的样式，能够设置链接样式的CSS属性有很多种（如color、font-family、background等

）。链接有4种状态：a:link（普通的、未被访问的链接）、a:visited（用户已访问的链接）、a:hover（鼠标指针位于链接的上方）和a:active（链接被单击的时刻）。（2）常见的链接样式①文本修饰text-decoration属性大多用于去掉链接中的下划线。②背景色backgro

und-color属性用于设置链接的背景色。7．CSS导航栏拥有易用的导航栏对于任何网站都很重要，通过CSS，能够把乏味的HTML菜单转换为漂亮的导航栏。导航栏基本上是一个链接列表，因此使用<ul>和<l

i>元素是非常合适的。（1）垂直导航栏（2）水平导航栏①行内列表项②对列表项进行浮动引导训练【任务2-2】设计手机搜狐网的站内导航网页【任务描述】编写HTML代码和CSS代码，设计图2-2所示手机搜狐网的站内导航网页0202.h

tml。手机搜狐网的站内导航网页0202.html的主体结构为上、中、下结构，如图2-2所示。图2-2手机搜狐网的站内导航网页0202.html的浏览效果顶部内容包括返回链接按钮、标题文字和主页链接按钮，中部内容

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

结构的CSS代码（3）编写网页0202.html主体结构的HTML代码2．网页0202.html的局部内容设计（1）网页0202.html的顶部内容设计（2）网页0202.html的中部内容设计（3）网页0202.html的底部内

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

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

203.html顶部结构使用<header>标签实现，中部结构使用<article>标签实现，底部结构使用<footer>标签实现。【任务实施】1．网页0203.html的主体结构设计在本地硬盘的文件夹“02文本

新闻浏览网页设计\0203”中创建网页0203.html。（1）定义网页0203.html通用CSS代码（2）定义网页0203.html主体结构的CSS代码（3）编写网页0203.html主体结构的HTML代码2．网页0203.htm

l的局部内容设计（1）网页0203.html的顶部内容设计（2）网页0203.html的中部内容设计（3）网页0203.html的底部内容设计【网页浏览】保存网页0203.html，在浏览器GoogleChrome中的浏览效果如

图2-3所示。同步训练【任务2-4】设计新华网手机版的网址导航网页【任务描述】【任务实施】1．网页0204.html的主体结构设计（1）定义网页0204.html通用CSS代码（2）定义网页0204.html主体结构的CSS

代码（3）编写网页0204.html主体结构的HTML代码2．网页0204.html的局部内容设计（1）网页0204.html的顶部内容设计（2）网页0204.html的中部内容设计（3）网页0204.html的底部内容设计【网页浏览】

保存网页0204.html，在浏览器GoogleChrome中的浏览效果如图2-4所示。图2-4新华网手机版的网址导航网页0204.html的浏览效果【任务2-5】设计新华网手机版的文本新闻网页【任务描述】编写HTML代码和CSS代码，设计图2-

5所示新华网移动版的文本新闻网页0205.html。图2-5新华网移动版的文本新闻网页0205.html的浏览效果在网页0205.html中单击“A+”超链接，可以将文本新闻的文字大小设置为24px，单击“A-”超链接，可以将文本新闻的文字大小重新设

置为16px，即该网页中文本新闻的文字大小可以在“24px”和“16px”之间进行动态切换。新华网移动版的文本新闻网页0205.html的主体结构为上、中、下结构，如图2-5所示。顶部内容包括回首页超链接和标题文字，中部内容包

括文本新闻的标题、来源和正文，底部内容包括多个超链接和版权信息。网页0205.html顶部结构使用<header>标签实现，中部结构使用<article>标签实现，底部结构使用<footer>标签实现。【任务实施】1．网

页0205.html的主体结构设计在本地硬盘的文件夹“02文本新闻浏览网页设计\0205”中创建网页0205.html。（1）定义网页0205.html通用CSS代码（2）定义网页0205.html主体结构的CSS代码（3）编写网

页0205.html主体结构的HTML代码2．网页0205.html的局部内容设计（1）网页0205.html的顶部内容设计（2）网页0205.html的中部内容设计（3）网页0205.html的底部内容设计【网页浏览】保存网页0205.html，在浏览器Goog

leChrome中的浏览效果如图2-5所示。【任务2-6】设计新华网手机版的标题新闻及导航网页【任务描述】编写HTML代码和CSS代码，设计图2-6所示新华网手机版的标题新闻及导航网页0206.html。图2-6新华网手机版的标题新闻及导航网页0206.html的浏览效果在

新华网手机版的标题新闻及导航网页0206.html中单击“显示更多”超链接，可以显示更多的标题新闻。【操作提示】（1）网页0206.html的HTML代码编写提示（2）网页0206.html的CSS代码定义提示（3）网页0206.html的JavaScript代码定义提示单元小结本单元

通过对新闻网站导航网页和文本新闻网页设计的探析与三步训练，重点熟悉了HTML5中常用的文本标签、CSS文本属性、字体属性、颜色值及颜色表示方法、CSS链接属性等，学会了网页元素的水平对齐、CSS导航栏

的设计，学会了文本新闻网页和导航网页的设计方法。