单元2 文本新闻浏览网页设计教案课件.ppt

单元2 文本新闻浏览网页设计,新闻网站通常以文本新闻为主体，本单元通过对新闻网站的导航网页和文本新闻网页设计的探析与训练，重点学习HTML5中常用的文本标签、CSS文本属性、字体属性、颜色值及颜色表示方法、CSS链接属性等，学会网页元素的水平对齐、CSS导航栏的设计，掌握文本新闻网页和导航网页的设计方法。,教学导航,【任务2-1】探析手机搜狐网的名站导航网页 【效果展示】 手机搜狐网的名站导航网页0201.html的浏览效果如图2-1所示。,手机搜狐网的名站导航网页0201.html的主体结构为上、中、下结构，顶部为标题文本，中部包括多个热点网站的链接按钮和多行分类网站导航链接，底部包括多个导航链接和版权信息。,图2-1 手机搜狐网的名站导航网页0201.html的浏览效果,【网页探析】 1．网页0201.html的HTML代码探析 2．网页0201.html的CSS代码探析,知识梳理,1．HTML5中常用的文本标签 （1）标签与标签 标签用于描述文档或文档某个部分的细节，目前只有Chrome浏览器支持标签，可以与标签配合使用。,（2）标签 标签用于设置一段文本，使其脱离其父元素的文本方向设置。,（3）标签、标签与标签 标签用于定义ruby注释（中文注音或字符）。与标签一同使用。 元素由一个或多个字符（需要一个解释或发音）和一个提供该信息的元素组成，还包括可选的元素，定义当浏览器不支持标签时显示的内容。,（4）标签 标签主要用来在视觉上向用户呈现那些需要突出显示或高亮显示的文字，典型应用是搜索结果中高亮显示搜索关键字。,（5）标签 标签用于定义日期或时间，也可以两者同时。,（6）标签 标签用于定义度量衡。仅用于已知最大和最小值的度量。 （7）标签 标签用于定义任何类型任务的运行进度，可以使用元素显示JavaScript中耗时时间函数的进程。,（8） 标签与标签 标签可插入一个简单的换行符，使用来输入空行，而不是分割段落。 标签是空标签（意味着它没有结束标签，因此这是错误的：）。在XHTML中，把结束标签放在开始标签中，也就是。,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-trans属性处理文本的大小 写，该属性有4个取值：none、uppercase、lowercase和capitalize。 默认值none对文本不做任何改动，将 使用源文档中的原有大小写。,顾名思义，uppercase和lowercase将文本转换为全大写和全小写字符，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服务器上，它会在需要时被自动下载到用户的计算机上。,表2-6 能够在@font-face 规则中定义的字体描述符,续表,4．CSS颜色,颜色是通过对红、绿和蓝光的组合来显示的。 （1）颜色值 CSS颜色使用组合了红、绿、蓝颜色值（RGB）的十六进制（HEX）表示法进行定义。,对光源进行设置的最低值可以是0（十 六进制00），最高值是255（十六进制FF）。 十六进制值使用3个两位数来编写，并 以#符号开头。CSS常用颜色的HEX表示法 与RGB表示法如表2-7所示。,表2-7 CSS常用颜色的HEX表示法与RGB表示法,（2）CSS中的颜色的表示方法,① 十六进制颜色 十六进制颜色是这样规定的：#RRGGBB，其中的RR（红色）、GG（绿色）、BB（蓝色）十六进制整数规定了颜色的成分，所有值必须介于0与FF之间。 所有浏览器都支持十六进制颜色值。,② RGB颜色 RGB颜色值的表示方式为rgb(red, green, blue)，每个参数(red、green及blue)定义颜色的强度，可以是介于0～255之间的整数，或者是百分比值（从0%～100%）。所有浏览器都支持RGB颜色值。,③ RGBA颜色 RGBA颜色值是RGB颜色值的扩展，带有一个alpha通道（它规定了对象的不透明度）。,RGBA颜色值的表示方式为：rgba(red, green, blue, alpha)，其中alpha参数是介于0.0（完全透明）与1.0（完全不透明）之间的数字。RGBA颜色值得到以下浏览器的支持：IE9+、Firefox 3+、Chrome、Safari及Opera 10+。,④ HSL颜色 HSL指的是Bue（色调）、Saturation （饱和度）、Lightness（亮度）。 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、purple、red、silver、teal、white、yellow。所有浏览器都支持的颜色名。,5．网页元素的水平对齐,在CSS中，可以使用多种属性来水平对齐元素。 （1）使用text-align属性水平对齐元素 块元素指的是占据全部可用宽度的元素，并且在其前后都会换行。 网页中常见的块元素有、、。,text-align是一个基本的属性，它会影响一个元素中的文本行互相之间的对齐方式。,（2）使用margin属性水平对齐块元素 将块级元素或表元素居中，要通过在这些元素上适当地设置左、右外边距来实现，可通过将左和右外边距设置为“auto”来对齐块元素。,把左和右外边距设置为auto，规定的是均等地分配可用的外边距，结果就是居中的元素。,（3）使用position属性进行左和右对齐 对齐元素的方法之一是使用绝对定位，绝对定位元素会从正常流中删除，并且能够交叠元素。 （4）使用float属性来进行左和右对齐,6．CSS链接属性（Hyperlink）,（1）设置链接的样式 链接的特殊性在于能够根据它们所处的状态来设置它们的样式，能够设置链接样式的CSS属性有很多种（如color、font-family、background等）。,链接有4种状态：a:link（普通的、未被访 问的链接）、a:visited（用户已访问的链接）、a:hover（鼠标指针位于链接的上方）和a:active （链接被单击的时刻）。,（2）常见的链接样式,① 文本修饰 text-decoration属性大多用于去掉链接中的下划线。 ② 背景色 background-color属性用于设置链接的背景色。,7．CSS导航栏,拥有易用的导航栏对于任何网站都很重要，通过CSS，能够把乏味的HTML菜 单转换为漂亮的导航栏。 导航栏基本上是一个链接列表，因此使用和 元素是非常合适的。,（1）垂直导航栏 （2）水平导航栏 ① 行内列表项 ② 对列表项进行浮动,引导训练,【任务2-2】设计手机搜狐网的站内导航网页 【任务描述】 编写HTML代码和CSS代码，设计图2-2所示手机搜狐网的站内导航网页0202.html。 手机搜狐网的站内导航网页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，在浏览器Google Chrome中的浏览效果如图2-2所示。 【任务2-3】设计手机搜狐网的文本新闻网页 【任务描述】 编写HTML代码和CSS代码，设计图2-3所示手机搜狐网的文本新闻网页0203.html。,手机搜狐网的文本新闻网页0203.html的主体结构为上、中、下结构，如图2-3所示。 顶部内容包括标题文字和主页链接按钮，中部内容包括文本新闻的标题和正文，底部内容包括多个超链接和版权信息。,图2-3 手机搜狐网的文本新闻网页 0203.html的浏览效果,网页0203.html顶部结构使用标签实现，中部结构使用标签实现，底部结构使用标签实现。,【任务实施】 1．网页0203.html的主体结构设计 在本地硬盘的文件夹“02文本新闻浏览网页设计\0203”中创建网页0203.html。,（1）定义网页0203.html通用CSS代码 （2）定义网页0203.html主体结构的CSS 代码 （3）编写网页0203.html主体结构的HTML代码,2．网页0203.html的局部内容设计,（1）网页0203.html的顶部内容设计 （2）网页0203.html的中部内容设计 （3）网页0203.html的底部内容设计,【网页浏览】 保存网页0203.html，在浏览器Google Chrome中的浏览效果如图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，在浏览器Google Chrome中的浏览效果如图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顶部结构使用标签实现，中部结构使用标签实现，底部结构使用标签实现。,【任务实施】 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，在浏览器Google Chrome中的浏览效果如图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导航栏的设计，学会了文本新闻网页和导航网页的设计方法。,