配色与网页设计 项目3：文字在网页中的应用 3-1.pptxVIP

学习目标知识目标掌握与文字相关的HTML标签；掌握设置文字样式的CSS代码；能力目标能够在网页中插入标题、文字等元素；能够使用CSS美化文字；素质目标能够坚持科学的价值观和道德观；具有良好的团队合作意识和较强的团队合作能力；任务说明 文字是网页中最为重要的元素，同样，对网页中文字的修饰也是至关重要的。在第2章中，我们已经学会了如何在网页中插入文字、段落和标题等。本案例中，我们将通过制作个人博客首页，学习如何运用CSS对文字进行美化和修饰，包括设置文字的字体、字号、颜色和加粗效果等。构建HTML结构任务步骤1.步骤 01步骤 02步骤 03将本书附赠素材“第3章”文件夹拷贝至本地磁盘创建的“My Web”站点的根目录中。打开“文件”面板，在刚拷贝的文件夹“第3章\task1”中新建一个名为blog-lx.html的网页文档，并在文档窗口中将其打开。打开task1文件夹中名为“文字”的文本文件，将文字内容复制粘贴到blog-lx.html文档代码视图中的body/body标签对中。任务步骤任务步骤添加标题。将最上方的“日志”文字用1号标题标签对h1/h1括起来；“女性的魅力”“情感解析：写给三十左右男人的一些密语”“美丽如画!世界海洋摄影佳作揭晓（组图）”这三个日志标题用3号标题标签对h3/h3括起来；为便于CSS设置，将处于右侧的三段文字“分类……”用4号标题标签对h4/h4括起来。提示在添加标签时，可以参照第2章介绍的方法使用“插入”面板进行插入，也可以直接在代码视图中输入，Dreamweaver采用了非常人性化的设计，在输入标签时会弹出“标签选择器”供用户选择，直接单击要输入的标签即可自动输入。步骤 04任务步骤添加段落。将其他没有添加标题标签但需要划分段落的文本，分别使用段落标签对p/p括起来。添加水平线。在最上方的1号标题“日志”后面添加水平线标签hr。步骤 05步骤 07步骤 06提取正文内容。为各摘要段落的标签设置class（类）属性并指定属性值（类别名）为“zw”，以方便后面使用CSS的类选择器对日志正文进行单独修饰。表3-1 涉及的HTML标签标签描述标签描述body/body网页主体标签h4/h44号标题标签h1/h11号标题标签p/p段落标签h3/h33号标题标签hr水平线标签设置CSS样式任务步骤2.步骤 01指定在HTML页面中引入CSS样式表的方法。此处使用内嵌样式，在head/head标签对之间添加如下标签。style type=text/css!----/style任务步骤使用CSS对整体页面进行设置。在步骤1中输入的!-- --语句之间输入如下语句。body{ background-color:#CCCCCC; /*设置整个页面的背景颜色为灰色*/ margin:0px 30px; /*设置整个页面的上下边距为0px，左右边距为30px*/ font-size:18px; /*整体设置文字大小为18px*/}步骤 02 margin属性叫做外边距，用来设置元素与元素之间的距离，属于CSS布局中较常用到的属性。在步骤3中会用到padding属性，它叫做填充（或内边距），用来设置块元素中的元素（如文字）同块边框之间的距离。任务步骤设置页头的“日志”（1号标题h1）标题效果。继续在步骤2输入的代码下面输入以下代码。步骤 03h1 { font-family: 黑体; /*设置文字字体为黑体*/ font-weight: bolder; /*设置文字加粗*/ color: #FFFFFF; /*设置文字颜色为白色*/ letter-spacing:1em; /*设置文字之间的字间距为一个文字大小*/ background-color: #FF0000; /*设置背景颜色为红色*/ padding: 10px; /*设置文字的内边距为10像素*/}任务步骤知识库继续在下面设置各日志标题（3号标题h3）效果，代码如下。标题标签属于块元素，其作用范围为标题段落所在的整个区域（相当于一个“块”），所以为标题设置的背景色会铺满整个标题所在区域。另外，可利用“padding”属性设置标题的内边距，即标题文字与标题块边框间的距离。属于块元素的HTML标签包括段落标签p、标题标签h和div标签等。步骤 04h3 { font-weight: bold; /*设置文字加粗*/ color: #FF0000; /*设置文字颜色为红色*/}任务步骤继续在下面设置文字“分类……”（4号标题h4）的效果，代码如下。h4{ text-align: right; /*文字右对齐*/ color: #FFFFFF; /*文字颜色为白色*/ font-family: 华文新魏; /*文字字体为华文新魏*/