第3章 文字在网页中的应用
合集下载
第3章 文字与段落
3.9上标、下标
3.10设置地址文字
地址文字<address>
–
<address>标记用来表示HTML文档的特定信息，如：E-mail、地址、 签名、作者、文档信息等。通常显示为斜体。
<address>…</address>
基本语法：
–
3.10设置地址文字
<!--程序3-11--> <html> <head> <title>设置地址文字</title> </head> <body> 给我们写信:<address>wangtao@</address> </body> </html>
3.2.1普通文字标记
3.3 段落标记
段落标记p
–
<p>是HTML文档中最常见的标记， <p>用来起始一个段 落。 <p >段落文字</p>
基本语法：
–
3.3段落标记
<!--程序3-6--> <html> <head> <title>段落标记</title> </head> <body> <p align="center"><b><font size="3">静夜思</font></b></p> <p align="center"><font size="2">李白</font></p> </body> </html>
第3章_HTML网页制作
北京清华万博网络技术股份有限公司版权所有
WS-NE30-3-01
03-23
3.5.9 列表（续）
• 无序列表：
语法: 说明: <UL TYPE=“” COMPACT></UL> TYPE属性可以分别取三个值“disc”、“square”、“circle”，（在 某些浏览器中，TYPE属性的值必须使用小写浏览器才可以识别） 它是用来控制强调符风格的属性，三个值分别对应实心圆点，实心 方块，空心圆圈。需要说明的是有些浏览器不支持该属性。 COMPACT属性是个无值属性（名称标记），用来使列表的表项用 紧凑格式显示。
北京清华万博网络技术股份有限公司版权所有
WS-NE30-3-01
03-25
3.5.9 列表（续）
• 有序列表：
语法: <OL TYPE=“” START=“” COMPACT></OL> 说明: TYPE属性可以分别取五个值“1”、“a”、“A”、“i”、 “I”，它是用来控制强调符风格的属性，五个值分别对应 数字、小写字母、大写字母、小写罗马数字、大写罗马数 字。START属性是一个数字，表示从第几个数字（字母） 开始计数。COMPACT属性是个无值属性（名称标记）， 用来使列表的表项用紧凑格式显示。
北京清华万博网络技术股份有限公司版权所有 WS-NE30-3-01 03-14
语法: 说明:
3.5.7 文字移动
• • • • • • 文字移动方向的设置 文字移动方式的设置 文字移动循环的设置 文字移动速度与延时的设置 文字移动底色的设置 文字移动面积的设置
北京清华万博网络技术股份有限公司版权所有
北京清华万博网络技术股份有限公司版权所有
WS-NE30-3-01
网页中图片与文字的使用教案
网页中图片与文字的使用教案一、教学目标1. 让学生了解网页中图片和文字的基本概念及作用。
2. 培养学生正确选择和使用网页图片与文字的能力。
3. 引导学生掌握图片与文字在网页中的排版技巧。
4. 培养学生创作具有美观、实用、协调性的网页。
二、教学内容1. 网页中图片的类型与作用2. 网页中文字的类型与作用3. 图片与文字的协调搭配4. 网页排版的基本原则5. 图片与文字在网页中的布局技巧三、教学重点与难点1. 教学重点：网页中图片与文字的类型、作用、协调搭配及排版技巧。
2. 教学难点：图片与文字的协调搭配、网页排版技巧。
四、教学方法1. 讲授法：讲解图片与文字的概念、类型及作用。
2. 案例分析法：分析优秀网页案例，引导学生体会图片与文字的协调搭配。
3. 实践操作法：学生动手实践，创作符合要求的网页。
4. 小组讨论法：分组讨论，分享图片与文字排版技巧。
五、教学准备1. 教师准备：图片与文字相关的教学素材、优秀网页案例。
2. 学生准备：电脑、网络access。
教学过程：一、导入（5分钟）1. 教师通过展示优秀网页案例，引导学生关注网页中图片与文字的使用。
2. 学生分享对网页中图片与文字的初步认识。
二、讲解图片与文字的概念、类型及作用（10分钟）1. 教师讲解网页中图片与文字的基本概念。
2. 教师介绍网页中图片与文字的类型及作用。
三、分析优秀网页案例，引导学生体会图片与文字的协调搭配（10分钟）1. 教师展示优秀网页案例，引导学生分析案例中图片与文字的协调搭配。
2. 学生分享分析心得，讨论如何提高图片与文字的协调性。
四、讲解网页排版的基本原则（5分钟）1. 教师讲解网页排版的基本原则。
2. 学生通过案例理解并掌握排版原则。
五、学生动手实践，创作符合要求的网页（10分钟）1. 学生根据所学知识，动手实践创作网页。
2. 教师巡回指导，解答学生疑问。
六、小组讨论，分享图片与文字排版技巧（5分钟）1. 学生分组讨论，分享在创作过程中使用的图片与文字排版技巧。
第3章 页面与文本
3.2文本属性
3.2.1课堂案例-百货公司 案例学习目标：学会设置网页中的文字样式。 案例知识要点：使用CSS样式改变文本大小、 颜色、字体等样式。 素材所在位置：光盘/案例素材/ch03/课堂案 例-百货公司。 案例效果如图3-37所示。
3.2文本属性
3.2.2 设置文本属性
3.5练习案例
3.5.1练习案例-楼盘网站 案例练习目标：练习页面属性设置、输入多个连续空格、文字换行、 分段和样式设定。 案例操作要点： 1. 选择菜单【修改】|【页面属性】，设置字体为12px，左边距、右 边距、上边距、下边距都为0px。 2. 在页面上部表格中输入5个空格，接着输入文字“首页 | 新闻中心 | 楼盘介绍 | 购房新政 | 其他项目 | 客服中心 | 联系我们”，新建类 样式.menu，设置字体大小14px、字体颜色#999999。将样式应用 在输入的文字上。 3. 在页面中部表格中输入文字，注意换行和分段。新建类样式.text， 设置字体大小12px、字体颜色#8D8D8D。将样式应用在输入的文 字上。 素材所在位置：光盘/案例素材/ch03/练习案例-楼盘网站，效果如图 3-91所示。
3.2.6插入特殊字符
在网页文档中有时需要插入一些特殊字符，如版权 符号、注册商标符号、破折号和英镑符号等。
3.3水平线
3.3.1课堂案例-个人网站 案例学习目标：学会使用水平线。 案例知识要点：插入水平线并设置其颜色、宽度、 粗细等属性。 素材所在位置：光盘/案例素材/ch03/课堂案例-个人 网站。 案例效果如图3-65所示。
3.1.7网页的标题
网页标题是浏览者在访问网页时浏览器标题栏中 显示的信息，可以帮助浏览者理解所查看网页的 内容，更改页面标题的操作步骤如下： 选择菜单【修改】|【页面属性】。 单击【页面属性】对话框中【分类】栏中的 【标题/编码】选项，在右侧【标题】文本框中 输入页面标题，如图3-34所示。单击【确定】完 成设置。
第3章网页文本应用
创建并设置了CSS样式后，便可将其 应用到网页对象中，应用CSS样式主要有 通过CSS样式面板应用和通过快捷菜单应 用 两种方法。
Dreamweaver网页制作
应用举例——用CSS样式设置文本格式 利用CSS样式为Triangel网页进行文本 格式设置，最终效果如下图所示 。
Dreamweaver网页制作
Dreamweaver网页制作
练习（四）
在Dreamweaver CS3中输入宋词《满江 红》，利用CSS样式设置其格式，参考效果 如下图所示。
Dreamweaver网页制作
提高：操作CSS样式表
页面文本的输入和设置比较简单，其操作与常 用的Word等文字处理软件差不多，但是关于文本样 式的设置和应用则有一些区别。
Dreamweaver网页制作
设置段落格式
设置段落缩进
设置文本对齐
Dreamweaver网页制作
设置段落缩进
将光标插入点定位到需要设置格式的段落 中，在“属性”面板的“格式”下拉列表框 中选择“段落”选项，可通过单击相应的按 钮设置缩进或凸出。
Dreamweaver网页制作
设置文本对齐
Dreamweaver提供了左对齐、居中对 齐、右对齐和两端对齐等4种对齐方式。可 在“属性”面板中进行设置，也可选择“ 文本/对齐”菜单中的对齐命令进行设置。
选择“窗口/CSS样式”命令可在浮动 面板组打开“CSS样式”面板，如下图所 示。
Dreamweaver网页制作
创建CSS样式
创建内部CSS
创建外部CSS
Dreamweaver网页制作
创建内部CSS
内部CSS样式只能用于当前网页，可在 CSS面板中单击鼠标右键，在弹出的快捷 菜单中选择“新建”命令，也可单击面板 右下角的“新建CSS规则”按钮进行创建 。
Dreamweaver网页制作
应用举例——用CSS样式设置文本格式 利用CSS样式为Triangel网页进行文本 格式设置，最终效果如下图所示 。
Dreamweaver网页制作
Dreamweaver网页制作
练习（四）
在Dreamweaver CS3中输入宋词《满江 红》，利用CSS样式设置其格式，参考效果 如下图所示。
Dreamweaver网页制作
提高：操作CSS样式表
页面文本的输入和设置比较简单，其操作与常 用的Word等文字处理软件差不多，但是关于文本样 式的设置和应用则有一些区别。
Dreamweaver网页制作
设置段落格式
设置段落缩进
设置文本对齐
Dreamweaver网页制作
设置段落缩进
将光标插入点定位到需要设置格式的段落 中，在“属性”面板的“格式”下拉列表框 中选择“段落”选项，可通过单击相应的按 钮设置缩进或凸出。
Dreamweaver网页制作
设置文本对齐
Dreamweaver提供了左对齐、居中对 齐、右对齐和两端对齐等4种对齐方式。可 在“属性”面板中进行设置，也可选择“ 文本/对齐”菜单中的对齐命令进行设置。
选择“窗口/CSS样式”命令可在浮动 面板组打开“CSS样式”面板，如下图所 示。
Dreamweaver网页制作
创建CSS样式
创建内部CSS
创建外部CSS
Dreamweaver网页制作
创建内部CSS
内部CSS样式只能用于当前网页，可在 CSS面板中单击鼠标右键，在弹出的快捷 菜单中选择“新建”命令，也可单击面板 右下角的“新建CSS规则”按钮进行创建 。
第3章在网页中使用文本
注意：<title></title>标记对只能放在<head></head>标记对之间。
4、文本的HTML标记应用
每个HTML标记都由标记符对（或单标记符）和属性组成， 其一般格式为：
<标记符 属性1=属性值1 属性2=属性值2…> 受影响的内容 <／标记符>
或<标记符 属性1=属性值1 属性2=属性值2…>
这个可以在“设计”视图里进行设置。具体步骤如下：
1）选择“页面属性”命令按钮，弹出“页面属性”对话框。
2）在页面属性对话框窗口左侧选择“分类”列表中“标题/编 码”命令，在右侧“编码”下拉列表框中选择“简体中文 （GB2312）”选项即可。
设置对话框技巧：一旦进行了编码设置，可以查看一 下“编辑”菜单下面的“首选参数”命令，在“分类”列表 框的“字体”类别里的“字体设置”命令也会发生相应的变 化。在查看“代码”视图时，感觉字体、大小不合适，也可 以在“分类”列表框的“字体”类别里设置字体、字体大小。
2）文字的拼写检查：单击“文本”菜单/“检查拼写”命令， Dreamweaver会检查网页内所有英文单词的拼写是否正常，如 果全部正常，则调出检查完毕的提示框；如果有不正确的英文 单词，则将调出“检查拼写”对话框。该对话框中会列出错误 的英文单词并推荐更改的英文单词，供用户修改错误的单词。
（2）文字的查找与替换
10. 选中联系方式的四行文字切换“常用工具栏”为“文本 选项”，点击其上的编号列表“”按钮。
11. 重复步骤3插入页面底部的水平线并设置其属性。 12. 在水平线，后面按【Enter】键。输入版权信息，设置其
属性为居中对齐，插入版权符号。
13. 插入日期。
4、文本的HTML标记应用
每个HTML标记都由标记符对（或单标记符）和属性组成， 其一般格式为：
<标记符 属性1=属性值1 属性2=属性值2…> 受影响的内容 <／标记符>
或<标记符 属性1=属性值1 属性2=属性值2…>
这个可以在“设计”视图里进行设置。具体步骤如下：
1）选择“页面属性”命令按钮，弹出“页面属性”对话框。
2）在页面属性对话框窗口左侧选择“分类”列表中“标题/编 码”命令，在右侧“编码”下拉列表框中选择“简体中文 （GB2312）”选项即可。
设置对话框技巧：一旦进行了编码设置，可以查看一 下“编辑”菜单下面的“首选参数”命令，在“分类”列表 框的“字体”类别里的“字体设置”命令也会发生相应的变 化。在查看“代码”视图时，感觉字体、大小不合适，也可 以在“分类”列表框的“字体”类别里设置字体、字体大小。
2）文字的拼写检查：单击“文本”菜单/“检查拼写”命令， Dreamweaver会检查网页内所有英文单词的拼写是否正常，如 果全部正常，则调出检查完毕的提示框；如果有不正确的英文 单词，则将调出“检查拼写”对话框。该对话框中会列出错误 的英文单词并推荐更改的英文单词，供用户修改错误的单词。
（2）文字的查找与替换
10. 选中联系方式的四行文字切换“常用工具栏”为“文本 选项”，点击其上的编号列表“”按钮。
11. 重复步骤3插入页面底部的水平线并设置其属性。 12. 在水平线，后面按【Enter】键。输入版权信息，设置其
属性为居中对齐，插入版权符号。
13. 插入日期。
第3章 网页中文本的应用
首先，将创建包含 CSS 规则（定义段落文本 样式）的外部样式表。在外部样式表中创建 样式时，可以在一个中央位置同时控制多个 Web 页面的外观，而不需要为每个 Web 页面 分别设置样式。
2020/2/29
31／58
3.2 文字样式
CSS 规则可以位于以下位置： 外部 CSS 样式表是存储在一个单独的外 部 .css 文件（并非 HTML 文件）中的一系列 CSS 规则。利用文档 head 部分中的链接， 该 .css 文件被链接到 Web 站点中的一个或多 个页面。
2020/2/29
26／58
3.2 文字样式
声明由两部分组成：属性（如 font-family） 和值（如 黑体）。上述示例为 H1 标签创建 了样式：链接到此样式的所有 H1 标签的文本 都将是 16 像素大小并使用黑体字体和粗体。
2020/2/29
27／58
3.2 文字样式
术语“层叠”是指对同一个元素或 Web 页面 应用多个样式的能力。例如，可以创建一个 CSS 规则来应用颜色，创建另一个规则来应 用边距，然后将两者应用于一个页面中的同 一文本。所定义的样式“层叠”到的 Web 页 面上的元素，并最终创建想要的设计。 CSS 的主要优点是容易更新；只要对一处 CSS 规则进行更新，则使用该定义样式的所 有文档的格式都会自动更新为新样式。
2020/2/29
7／58
3.1 文本的应用
3.1.3 插入特殊的字符 有时为了内容的需要，要在网页中插入
一些键盘上没有的特殊字符，在Dreamweaver MX中，这些特殊字符不仅可以通过“插入” 菜单中“HTML”下的“特殊字符”命令来插 入，还可以通过插入“字符”面板来直接插 入。
2020/2/29
2020/2/29
31／58
3.2 文字样式
CSS 规则可以位于以下位置： 外部 CSS 样式表是存储在一个单独的外 部 .css 文件（并非 HTML 文件）中的一系列 CSS 规则。利用文档 head 部分中的链接， 该 .css 文件被链接到 Web 站点中的一个或多 个页面。
2020/2/29
26／58
3.2 文字样式
声明由两部分组成：属性（如 font-family） 和值（如 黑体）。上述示例为 H1 标签创建 了样式：链接到此样式的所有 H1 标签的文本 都将是 16 像素大小并使用黑体字体和粗体。
2020/2/29
27／58
3.2 文字样式
术语“层叠”是指对同一个元素或 Web 页面 应用多个样式的能力。例如，可以创建一个 CSS 规则来应用颜色，创建另一个规则来应 用边距，然后将两者应用于一个页面中的同 一文本。所定义的样式“层叠”到的 Web 页 面上的元素，并最终创建想要的设计。 CSS 的主要优点是容易更新；只要对一处 CSS 规则进行更新，则使用该定义样式的所 有文档的格式都会自动更新为新样式。
2020/2/29
7／58
3.1 文本的应用
3.1.3 插入特殊的字符 有时为了内容的需要，要在网页中插入
一些键盘上没有的特殊字符，在Dreamweaver MX中，这些特殊字符不仅可以通过“插入” 菜单中“HTML”下的“特殊字符”命令来插 入，还可以通过插入“字符”面板来直接插 入。
2020/2/29
网页中图片与文字的使用教案
网页中图片与文字的使用教案一、教学目标1. 了解网页设计的基本原则，掌握图片与文字在网页中的使用方法。
2. 学会使用图片与文字进行有效搭配，提升网页的视觉效果和用户体验。
3. 培养学生创新意识和审美能力，提高网页设计水平。
二、教学内容1. 网页设计基本原则2. 图片在网页中的使用方法3. 文字在网页中的使用方法4. 图片与文字的搭配技巧5. 网页设计实践操作三、教学重点与难点1. 教学重点：网页设计基本原则，图片与文字的使用方法，搭配技巧。
2. 教学难点：图片与文字的创意搭配，网页设计实践操作。
四、教学方法1. 讲授法：讲解网页设计基本原则，图片与文字的使用方法。
2. 演示法：展示优秀网页案例，分析图片与文字的搭配技巧。
3. 实践法：学生动手实践，设计网页。
4. 互动法：学生提问，教师解答。
五、教学准备1. 教室环境：计算机、投影仪、白板。
2. 教学素材：优秀网页案例、图片、文字素材。
3. 软件工具：网页设计软件（如：Dreamweaver、HBuilder等）。
4. 评价工具：网页评价标准表格。
六、教学过程1. 导入新课：通过展示一些成功的网页设计案例，引起学生对网页中图片与文字使用的兴趣。
2. 讲解网页设计基本原则：介绍网页设计中色彩、布局、排版等方面的基本原则。
3. 讲解图片在网页中的使用方法：介绍如何选择合适的图片，调整图片大小，以及图片的插入方法。
4. 讲解文字在网页中的使用方法：介绍文字的字体、颜色、大小等方面的设置方法。
5. 讲解图片与文字的搭配技巧：介绍如何通过合理的搭配，使图片与文字相得益彰，提升网页的视觉效果。
6. 实践操作：学生利用网页设计软件，进行网页设计实践，教师巡回指导。
八、课堂练习1. 请学生利用网页设计软件，制作一个简单的网页，注意图片与文字的搭配。
2. 学生互相评价，教师给出指导意见。
九、课后作业1. 请学生课后继续完善自己的网页设计，注重图片与文字的搭配。
2. 下次上课时展示并进行评价。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
pica，1pc=12pt
— 22 —
案例二 制作个人博客子页——设置段落和其他文字样式
2. 相对长度单位
相对长度单位是指网页元素的大小相对于某个参照物来确定，如使用屏幕分辨 率、父元素或浏览器作为参照物等。
长度单位
px %
说 明
px表示像素，当使用它作为文字或其他网页元素的尺寸单位时，屏幕分辨率越大，相同像素 的网页元素就显得越小 以父元素大小的百分比来定义当前文字或其他网页元素的大小，如果没有设定父元素大小， 则相对于浏览器默认字体大小的百分比。一般情况下，浏览器默认的字体大小为16px 以父元素大小的倍数来定义字体大小。例如，若父元素字体大小为12px，则1em就表示12px； 2em就表示12px*2=24px。若没有设定父元素大小，则相ly: "黑体"; font-weight: bolder; color: #FFFFFF; letter-spacing:1em; background-color: #FF0000; padding: 10px; }
— 10 —
/*设置文字字体为黑体*/ /*设置文字加粗*/ /*设置文字颜色为白色*/ /*设置文字之间的字间距为一个文字大小*/ /*设置背景颜色为红色*/ /*设置文字的内边距为10像素*/
说 明 正常粗细（默认）
属性值 lighter 细体
说 明
粗 体 （ 约 为 数 字 700 ） number 加粗体
— 18 —
100 ～ 900 九个级别，数字越大 文字越粗
案例二 制作个人博客子页——设置段落和其他文字样式
5. 设置文字颜色 属性为color，基本语法：color: 颜色的名称|RGB值|十六进制数;。 其属性值可以是颜色的英文名称， 如red、blue；也可以是颜色的RGB 值，如rgb(255,0,0)；还可以是颜色 的十六进制值，如#ff0000。
— 17 —
案例二 制作个人博客子页——设置段落和其他文字样式
4. 设置文字粗细
属性为font-weight，基本语法为：fontweight:normal|bold|bolder|lighter|number; 。例如：p{font-weight:600;}。其 各属性值的意义如表3-3所示。
属性值 normal bold bolder
— 16 —
案例二 制作个人博客子页——设置段落和其他文字样式
3. 设置斜体 属性为font-style，基本语法为：font-style:normal|italic|oblique; 。其各属 性值的意义如表3-2所示。
属性值 normal italic oblique
说 明 正常显示（默认） 斜体显示文字 比斜体更斜的歪斜体显示
— 21 —
案例一 制作个人博客首页——设置文字样式
二、网页中元素的长度单位
一般来说，网页中元素的长度单位可分为绝对长度单位和相对长度单位2种。
1.
绝对长度单位
长度单位 in cm mm
说 明 inch，英寸 centimeter，厘米 millimeter，毫米
长度单位
说 明
pt
pc
point，印刷的点数，1pt=1/72inch
— 14 —
案例二 制作个人博客子页——设置段落和其他文字样式
1. 设置文字字体 属性为font-family，基本语法为：font-family:字体1,字体2,字体3; 。例如：
p{font-family:宋体,楷体,隶书;}
以上语句声明了页面中使用<p>标签的字体，并且同时声明了3个字体名 称，分别是宋体、楷体和隶书。 各字体之间用英文逗号隔开。另外，有些字体中间会出现空格，如 Times New Roman字体，这时需要用英文双引号将字体括起来。
— 19 —
案例二 制作个人博客子页——设置段落和其他文字样式
6. 设置变体
属性为font-variant，作用是将所有小写字母转换为小型大写字母，基本 语法为：font-variant:normal|small-caps; 。其各属性值的意义如表3-4所示。 小型大写字母与其余文本相比，其字体尺寸更小。
— 1—
目录页
Contents Page
第3章 文字在网页中的应用
案例一 制作个人博客首页——设置文字样式 案例二 制作个人博客子页——设置段落和其他文字样式 案例三 制作个人博客排行榜——设置列表样式
— 2—
案例一 制作个人博客首页——设置文字样式
案例说明 文字是网页中最为重要的 元素，同样，对网页中文字的 修饰也是至关重要的。在第2 章中，我们已经学会了如何在 网页中插入文字、段落和标题 等。本案例中，我们将通过制 作个人博客首页，学习如何运 用CSS对文字进行美化和修饰， 包括设置文字的字体、字号、 颜色和加粗效果等。
提示
在添加标签时，可以参照第2章介绍的
方法使用“插入”面板进行插入，也可以直
接在代码视图中输入，Dreamweaver采用 了非常人性化的设计，在输入标签时会弹出 “标签选择器”供用户选择，直接单击要输
入的标签即可自动输入。
— 6—
案例一 制作个人博客首页——设置文字样式
案例步骤
步骤 05 步骤 06
用户可先使用第三方调色工具，如Photoshop的拾色器来调制出需要的颜色，并 查看该颜色的RGB值或十六进制值，然后再输入。
— 24 —
案例一 制作个人博客首页——设置文字样式
在Dreamweaver的代码界面中输入代码“color:”后，会自动弹出标签选择器，选 择“颜色”，将打开颜色面板，可从中选择需要的颜色。如果没有弹出标签选择器， 也可右击要输入颜色值的位置，在弹出的快捷菜单中选择“代码提示工具”>“颜色 选择器”，来打开颜色面板。
<style type="text/css"> <!--
--> </style>
— 8—
案例一 制作个人博客首页——设置文字样式
案例步骤
步骤 02
使用CSS对整体页面进行设置。在步骤1中输入的<!-- -->语句之间输入如下语句。
body{ background-color:#CCCCCC; /*设置整个页面的背景颜色为灰色*/ margin:0px 30px; /*设置整个页面的上下边距为0px，左右边距为30px*/ font-size:18px; /*整体设置文字大小为18px*/ }
步骤 07
添加段落。将其他没有添加标题标签但需要划分段落的文本，分别使用段落标签对 <p></p>括起来。 添加水平线。在最上方的1号标题“日志”后面添加水平线标签<hr>。
提取正文内容。为各摘要段落的标签设置class（类）属性并指定属性值（类别名）为 “zw”，以方便后面使用CSS的类选择器对日志正文进行单独修饰。
— 13 —
案例一 制作个人博客首页——设置文字样式
支撑知识点 一、CSS文字样式常用属性
设置字体：font-family； 设置字号：font-size； 设置斜体：font-style； 设置加粗：font-weight； 设置颜色：color； 设置变体：font-variant； 组合设置字体属性：font。
属性值 normal small-caps
说 明 正常字母（默认） 小型大写字母
— 20 —
案例二 制作个人博客子页——设置段落和其他文字样式
7. 组合设置文字属性
可以用font来组合设置文字属性。例如：
p{font:italic bold small-caps 15pt 宋体;}
表示该段落文字为斜体加粗体的宋体文字，大小为15像素，其中英文采 用小型大写字母显示。
— 3—
案例一 制作个人博客首页——设置文字样式
案例步骤 1. 构建HTML结构
将本书附赠素材“第3章”文件夹拷贝至本地磁盘创建的“My Web”站点的根目录中。 打开“文件”面板，在刚拷贝的文件夹“第3章\task1”中新建一个名为blog-lx.html的 网页文档，并在文档窗口中将其打开。 打开task1文件夹中名为“文字”的文本文件，将文字内容复制粘贴到blog-lx.html文档 代码视图中的<body></body>标签对中。
h4{ text-align: right; color: #FFFFFF; font-family: "华文新魏"; font-style:oblique; } text-align属性用于设置块元素标签（如<p>、<div>、<h1> ~ <h6>等）中内容 的水平对齐方式，包括居中（center）、居左（left）、居右（right）对齐3种方式。
— 23 —
em
案例一 制作个人博客首页——设置文字样式
三、为网页元素设置颜色的技巧
在HTML页面中，颜色统一使用RGB颜色模式，该模式下，颜色由红、绿、蓝三 原色按一定比例混合而成。这三种原色的取值范围均为0～255，共可混合出一千多 万种颜色。
RGB颜色也可以使用十六进制表示，如#ff0000，其中前两位为红色分量，中间 两位为绿色分量，最后两位是蓝色分量。
步骤 01 步骤 02 步骤 03
— 4—
案例一 制作个人博客首页——设置文字样式
案例步骤
— 5—
案例一 制作个人博客首页——设置文字样式
案例步骤
步骤 04
添加标题。将最上方的“日志”文字用1号标题标签对<h1></h1>括起来；“女性的 魅力”“情感解析：写给三十左右男人的一些密语”“美丽如画!世界海洋摄影佳 作揭晓（组图）”这三个日志标题用3号标题标签对<h3></h3>括起来；为便于CSS 设置，将处于右侧的三段文字“分类……”用4号标题标签对<h4></h4>括起来。
— 22 —
案例二 制作个人博客子页——设置段落和其他文字样式
2. 相对长度单位
相对长度单位是指网页元素的大小相对于某个参照物来确定，如使用屏幕分辨 率、父元素或浏览器作为参照物等。
长度单位
px %
说 明
px表示像素，当使用它作为文字或其他网页元素的尺寸单位时，屏幕分辨率越大，相同像素 的网页元素就显得越小 以父元素大小的百分比来定义当前文字或其他网页元素的大小，如果没有设定父元素大小， 则相对于浏览器默认字体大小的百分比。一般情况下，浏览器默认的字体大小为16px 以父元素大小的倍数来定义字体大小。例如，若父元素字体大小为12px，则1em就表示12px； 2em就表示12px*2=24px。若没有设定父元素大小，则相ly: "黑体"; font-weight: bolder; color: #FFFFFF; letter-spacing:1em; background-color: #FF0000; padding: 10px; }
— 10 —
/*设置文字字体为黑体*/ /*设置文字加粗*/ /*设置文字颜色为白色*/ /*设置文字之间的字间距为一个文字大小*/ /*设置背景颜色为红色*/ /*设置文字的内边距为10像素*/
说 明 正常粗细（默认）
属性值 lighter 细体
说 明
粗 体 （ 约 为 数 字 700 ） number 加粗体
— 18 —
100 ～ 900 九个级别，数字越大 文字越粗
案例二 制作个人博客子页——设置段落和其他文字样式
5. 设置文字颜色 属性为color，基本语法：color: 颜色的名称|RGB值|十六进制数;。 其属性值可以是颜色的英文名称， 如red、blue；也可以是颜色的RGB 值，如rgb(255,0,0)；还可以是颜色 的十六进制值，如#ff0000。
— 17 —
案例二 制作个人博客子页——设置段落和其他文字样式
4. 设置文字粗细
属性为font-weight，基本语法为：fontweight:normal|bold|bolder|lighter|number; 。例如：p{font-weight:600;}。其 各属性值的意义如表3-3所示。
属性值 normal bold bolder
— 16 —
案例二 制作个人博客子页——设置段落和其他文字样式
3. 设置斜体 属性为font-style，基本语法为：font-style:normal|italic|oblique; 。其各属 性值的意义如表3-2所示。
属性值 normal italic oblique
说 明 正常显示（默认） 斜体显示文字 比斜体更斜的歪斜体显示
— 21 —
案例一 制作个人博客首页——设置文字样式
二、网页中元素的长度单位
一般来说，网页中元素的长度单位可分为绝对长度单位和相对长度单位2种。
1.
绝对长度单位
长度单位 in cm mm
说 明 inch，英寸 centimeter，厘米 millimeter，毫米
长度单位
说 明
pt
pc
point，印刷的点数，1pt=1/72inch
— 14 —
案例二 制作个人博客子页——设置段落和其他文字样式
1. 设置文字字体 属性为font-family，基本语法为：font-family:字体1,字体2,字体3; 。例如：
p{font-family:宋体,楷体,隶书;}
以上语句声明了页面中使用<p>标签的字体，并且同时声明了3个字体名 称，分别是宋体、楷体和隶书。 各字体之间用英文逗号隔开。另外，有些字体中间会出现空格，如 Times New Roman字体，这时需要用英文双引号将字体括起来。
— 19 —
案例二 制作个人博客子页——设置段落和其他文字样式
6. 设置变体
属性为font-variant，作用是将所有小写字母转换为小型大写字母，基本 语法为：font-variant:normal|small-caps; 。其各属性值的意义如表3-4所示。 小型大写字母与其余文本相比，其字体尺寸更小。
— 1—
目录页
Contents Page
第3章 文字在网页中的应用
案例一 制作个人博客首页——设置文字样式 案例二 制作个人博客子页——设置段落和其他文字样式 案例三 制作个人博客排行榜——设置列表样式
— 2—
案例一 制作个人博客首页——设置文字样式
案例说明 文字是网页中最为重要的 元素，同样，对网页中文字的 修饰也是至关重要的。在第2 章中，我们已经学会了如何在 网页中插入文字、段落和标题 等。本案例中，我们将通过制 作个人博客首页，学习如何运 用CSS对文字进行美化和修饰， 包括设置文字的字体、字号、 颜色和加粗效果等。
提示
在添加标签时，可以参照第2章介绍的
方法使用“插入”面板进行插入，也可以直
接在代码视图中输入，Dreamweaver采用 了非常人性化的设计，在输入标签时会弹出 “标签选择器”供用户选择，直接单击要输
入的标签即可自动输入。
— 6—
案例一 制作个人博客首页——设置文字样式
案例步骤
步骤 05 步骤 06
用户可先使用第三方调色工具，如Photoshop的拾色器来调制出需要的颜色，并 查看该颜色的RGB值或十六进制值，然后再输入。
— 24 —
案例一 制作个人博客首页——设置文字样式
在Dreamweaver的代码界面中输入代码“color:”后，会自动弹出标签选择器，选 择“颜色”，将打开颜色面板，可从中选择需要的颜色。如果没有弹出标签选择器， 也可右击要输入颜色值的位置，在弹出的快捷菜单中选择“代码提示工具”>“颜色 选择器”，来打开颜色面板。
<style type="text/css"> <!--
--> </style>
— 8—
案例一 制作个人博客首页——设置文字样式
案例步骤
步骤 02
使用CSS对整体页面进行设置。在步骤1中输入的<!-- -->语句之间输入如下语句。
body{ background-color:#CCCCCC; /*设置整个页面的背景颜色为灰色*/ margin:0px 30px; /*设置整个页面的上下边距为0px，左右边距为30px*/ font-size:18px; /*整体设置文字大小为18px*/ }
步骤 07
添加段落。将其他没有添加标题标签但需要划分段落的文本，分别使用段落标签对 <p></p>括起来。 添加水平线。在最上方的1号标题“日志”后面添加水平线标签<hr>。
提取正文内容。为各摘要段落的标签设置class（类）属性并指定属性值（类别名）为 “zw”，以方便后面使用CSS的类选择器对日志正文进行单独修饰。
— 13 —
案例一 制作个人博客首页——设置文字样式
支撑知识点 一、CSS文字样式常用属性
设置字体：font-family； 设置字号：font-size； 设置斜体：font-style； 设置加粗：font-weight； 设置颜色：color； 设置变体：font-variant； 组合设置字体属性：font。
属性值 normal small-caps
说 明 正常字母（默认） 小型大写字母
— 20 —
案例二 制作个人博客子页——设置段落和其他文字样式
7. 组合设置文字属性
可以用font来组合设置文字属性。例如：
p{font:italic bold small-caps 15pt 宋体;}
表示该段落文字为斜体加粗体的宋体文字，大小为15像素，其中英文采 用小型大写字母显示。
— 3—
案例一 制作个人博客首页——设置文字样式
案例步骤 1. 构建HTML结构
将本书附赠素材“第3章”文件夹拷贝至本地磁盘创建的“My Web”站点的根目录中。 打开“文件”面板，在刚拷贝的文件夹“第3章\task1”中新建一个名为blog-lx.html的 网页文档，并在文档窗口中将其打开。 打开task1文件夹中名为“文字”的文本文件，将文字内容复制粘贴到blog-lx.html文档 代码视图中的<body></body>标签对中。
h4{ text-align: right; color: #FFFFFF; font-family: "华文新魏"; font-style:oblique; } text-align属性用于设置块元素标签（如<p>、<div>、<h1> ~ <h6>等）中内容 的水平对齐方式，包括居中（center）、居左（left）、居右（right）对齐3种方式。
— 23 —
em
案例一 制作个人博客首页——设置文字样式
三、为网页元素设置颜色的技巧
在HTML页面中，颜色统一使用RGB颜色模式，该模式下，颜色由红、绿、蓝三 原色按一定比例混合而成。这三种原色的取值范围均为0～255，共可混合出一千多 万种颜色。
RGB颜色也可以使用十六进制表示，如#ff0000，其中前两位为红色分量，中间 两位为绿色分量，最后两位是蓝色分量。
步骤 01 步骤 02 步骤 03
— 4—
案例一 制作个人博客首页——设置文字样式
案例步骤
— 5—
案例一 制作个人博客首页——设置文字样式
案例步骤
步骤 04
添加标题。将最上方的“日志”文字用1号标题标签对<h1></h1>括起来；“女性的 魅力”“情感解析：写给三十左右男人的一些密语”“美丽如画!世界海洋摄影佳 作揭晓（组图）”这三个日志标题用3号标题标签对<h3></h3>括起来；为便于CSS 设置，将处于右侧的三段文字“分类……”用4号标题标签对<h4></h4>括起来。