Web前端开发实用案例教程(Axure RP+HTML5+CSS3+Photoshop)

　　单元3新闻系统网站——文字在　　网页中的应用　　文字是网页中不可缺少的组成元素，它能将各种信息有效地传递给浏览者，通常内容丰富的网页有大量的文本。利用CSS可以方便地设置网页的文本和段落效果，从而更好地向浏览者展现网页内容。　　教学目标： 　　 掌握与文字相关的HTML标签，能够在网页中插入标题、段落、列表等元素。　　 掌握设置文字和段落样式的CSS代码，能够使用CSS美化文字和控制段落格式。　　 掌握设置列表样式的CSS代码，能够在网页中插入列表并用CSS美化。　　任务31企业产品介绍页面——　　设置文字样式〖*4/5〗【知识储备】1. CSS文字样式常用属性CSS字体样式(Font Style)是网页中不可或缺的样式属性之一，有了字体样式，网页才能变得更加美观，因此字体样式属性也就成为设计者必须了解的知识。　　1） 字体样式： font　　语法如下:{font:font-style| font-variant| font-weight| font-size| font-family}fontstyle表示字体风格；fontvariant表示字体变形；fontweight表示字体粗细；fontsize表示字体大小；fontfamily表示字体类型。　　font的作用是简写属性，提供了对字体所有属性进行设置的快捷方法。　　2） 字体类型： fontfamily　　语法如下：{font -family:字体1,字体2,字体3,...}fontfamily的作用是调用客户端字体。当调用客户端字体时，指定多种字体，可用逗号“,”分隔每种字体的名称。当字体名称包含两个以上分开的单词时，用双引号把该字体名称括起来。当样式规则外已经有双引号时，用单引号代替双引号。　　如果在fontfamily后加上多种字体的名称，浏览器会按字体名称的顺序逐一在用户的计算机里寻找已经安装的字体，一旦遇到与要求相匹配的字体时，就按这种字体显示网页内容，并停止搜索；如果不匹配就继续搜索，直到找到为止，万一样式表里的所有字体都没有安装，浏览器就会用自己默认的字体来代替显示网页的内容。　　例如，{fontfamily:黑体,隶书;}表示调用客户端的字体类型为黑体。如果没有黑体，则调用客户端的字体类型为隶书。　　3） 字体大小： fontsize　　语法如下：{font-size:数值}fontsize的作用是设定文字的大小。　　例如，{fontsize:18px;}表示当前字体大小为18像素。　　4） 字体风格： fontstyle　　语法如下：{font-style:inherit|italic|normal|oblique}inherit表示字体继承；italic表示字体斜体；normal表示字体正常；oblique表示字体偏斜体。　　fontstyle的作用是使文本显示为偏斜体或斜体等，表示强调。　　5） 字体粗细： fontweight　　语法如下：{font-weight:100-900|bold|bolder|lighter|normal;}bold表示粗体（相当于数值700）；bolder表示特粗体；lighter表示细体；normal表示字体正常(相当于数值400)。　　在字体应用中，取值范围为100～900，浏览器默认的字体粗细为400。另外，可以通过参数lighter和bolder使得字体在原有基础上显得更细或更粗些。　　fontweight的作用是设定文字的粗细。　　6） 字体颜色： color　　语法如下：{color: 数值}color的作用是设置字体的颜色。　　字体颜色参数取值范围中，可以以RGB值表示，也可以以十六进制色彩值表示，或以默认颜色的英文名称表示。　　字体颜色的设定，以默认颜色的英文名称表示无疑是*为方便的。但由于预定义的颜色种类太少，所以更多的网页设计者喜欢用RGB方式。RGB方式的好处很多，不但可以用数字的形式精确地表示颜色，而且也是很多图像制作软件（比如Photoshop）默认使用的规范，这样一来就为如图片等和网页更好地结合打下了坚实的基础。　　7） 字体行高： lineheight　　语法如下：{line-height:数值|inherit|normal}inherit表示行高继承父元素的值；normal表示行高为默认值。　　lineheight的作用是设置行与行之间的距离。　　行距是指上下两行基准线之间的垂直距离。如果文字字体很大，而行距相对较小，可能会发生上下两行文字相互重叠的现象。　　8） 字间距： letterspacing　　语法如下：{letter-spacing:数值|inherit|normal}inherit表示字间距继承父元素的值；normal表示字间距为默认值。　　letterspacing的作用是控制文本元素字母间的间距，所设置的距离适用于整个元素。　　9） 单词间距： wordspacing　　语法如下：{word-spacing:数值|inherit|normal} 单词间距指的是英文每个单词之间的距离，不包括中文文字。间距的取值单位是points、em、pixes、in、cm、mm、pc、ex、normal等。　　2. 网页中元素的长度单位　　CSS设置样式时，长度单位有相对类型和绝对类型。相对类型包括px（像素）、%（百分比）、em（字符高度）。　　px表示像素，当使用它作为文字或其他网页元素尺寸单位时，屏幕分辨率越大，相同像素的网页元素就显得越小。　　%表示百分比，以父元素大小的百分比来定义当前文字或其他网页元素的大小。如果没有设定父元素大小，则浏览器采用默认字体大小的百分比。一般情况下，浏览器默认的字体大小为16px。　　em表示字符高度，以父元素大小的倍数来定义字体大小。例如，若父元素字体大小为12px，则1em就表示12px；2em就表示12px2=24px。若没有设定父元素大小，则相对于浏览器默认字体大小的倍数显示。　　绝对类型包括in（英寸）、cm（厘米）、mm（毫米）、pt（点数）。　　【素材收集】　　创建站点，用Dreamweaver CS制作网页。实例图片和文字内容见本单元中的素材文件夹。　　实例素材位置： “单元3”目录下的“文字.txt”和images子目录。　　效果文件位置： “单元3”目录下的plc.html。　　【任务实施】　　企业产品介绍页面的具体制作，分为构建HTML结构和设置CSS样式属性两部分来进行。　　1） 构建HTML结构　　（1） 将素材实例文件夹复制至创建My Web站点的根目录中。　　（2） 启动Dreamweaver CS，打开“文件”面板，在复制的文件夹中创建一个名为plc.html的网页文档，并在文档窗口中打开。　　（3） 将文字内容复制并粘贴到新建文档的设计视图中。　　（4） 添加文字标题。　　（5） 添加水平虚线。将标题文字和内容进行形式上的分开。　　水平虚线代码如下：　　（6） 保存文件。按Ctrl+S快捷键保存网页，然后按F12键在浏览器中预览效果，完成此页面的制作。如图31所示为页面预览效果。　　图31页面预览效果（1）　　2） 设置CSS样式属性　　（1） 页面中引入CSS样式属性方法。在“”标签对之间输入以下代码。　　　(2) 设置CSS样式属性。整体页面中文字元素代码如下:　　（3） 保存文件。按Ctrl+S快捷键保存网页，然后按F12键在浏览器中预览效果，完成此页面的制作。页面预览效果如图32所示。　　……