第3章 用HTML设置文字与段落
中职《信息技术》教学课件 第3章 任务2 设置文本格式
第3 章 图文编辑
操作步骤 行距与段间距的设定
（2）设置行距。 ① 选定要设置行距的段落。 ② 单击“开始”→“段落”按钮，打开“段落”对话框。 ③ 单击“行距”列表框下拉按钮，选择所需的行距选项。 ④ 在“设置值”框中可输入具体的设置值。 ⑤ 在“预览”框中查看，确认排版效果满意后，单击“确定”按钮；若排版效果不理想，则可单击“取消”按钮取消本次 设置。 ⑥ 选定标题文字“生态文明”，将标题的行距设置为“单倍行距”。选定除标题文字之外的正文文字，将行距设置为 “1.5倍行距”。
第3 章 图文编辑
操作步骤 项目符号和段落编号
（1）在输入文本时，自动创建编号或项目符号。 ① 在输入文本前，单击“开始”→“项目符号”按钮，选定一个项目符号。 ② 输入文本，当输入一段文字按【Enter】键后，新段落开始处便自动添加同样的项目符号。 ③ 如果要结束自动添加项目符号，可以按【Backspace】键删除插入点前的项目符号，或再按一次【Enter】键即可。 在建立了编号的段落中，删除或插入某一段落时，其余的段落编号会自动修改。
段落左右边界的设置
（1）用“开始”功能区“段落”分组中的对齐功能按钮设置段落的对齐方式。 ① 选定要设置对齐方式的段落。 ② 在“开始”→“段落”分组中，单击“格式”工具栏中相应的对齐方式按钮即可。 对齐方式有“左对齐”、“居中”、“右对齐”、“两端对齐”和“分散对齐”五个对齐按钮。Word默认的 对齐方式是“两端对齐”。 ③ 选定标题文字“生态文明”，将标题的对齐方式设置为“居中”。选定除标题文字之外的正文文字，将对 齐方式设置为“左对齐”。
第3 章 图文编辑
任务分析
图文编辑软件设置的文本格式包括文字的字体、字号和颜色，字符间距、字宽度和水平位置，添加下画线、着重号、 边框和底纹，格式的复制和清除等基本编辑技术。段落的排版包括左右边界、对齐方式、行间距与段间距等的设置及表 格转换为文本等。
第三章 HTML语言概述 fzy
第一节 HTML简介
1．HTML语言 网页一般是以HTML语言格式为基础编写成的。 HTML语言是超文本标记语言的缩写。 创建HTML文件也十分简单，使用任何的文本编
辑器都可以对它进行编辑。 HTML文件的后缀名必须是.html或移动的像素数； Scrolldelay，重复画面之间的时间间隔，以微妙（ms）为单位。
第四节 版面设置
6．META标记的使用 META标签用来描述一个HTML网页文档的属性，
例如作者、日期和时间、网页描述、关键词、页 面刷新等。 常用属性有Content、 http-equiv和 Name，其中http-equiv和Name不能同时使用。
第七节 表格
（2）定义表格行标记<TR> 表明所控制的内容为表格的一行，其属性为：
height，控制行高度（像素数或百分比） bordercolor，控制行的边框（即内框）颜色 Bgcolor，控制行的背景颜色 Align，控制行的文字水平对齐方式（left、right、
center） Valign，控制行的文字垂直对齐方式（top、middle、
第三节 文字编排
2．文字标记 文字标记：<FONT>，是双标记格式。 <font>的属性：
Face属性，控制字符使用字体的属性，语法： face=“字体名” （华文中宋、华文彩云、宋体、楷体、 隶书、华文新魏、华文行楷、黑体）
Size属性，控制字符大小，语法：size=字符等级 Color属性，用于控制字符的颜色，语法：color=“颜
Size，用于控制水平线的粗细，属性值为像素数。
第四节 版面设置
5．滚动文字 滚动文字标记<MARQUEE>控制内容在行内滚动。其属性
第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
第三章html、xml与xhtml
第三章html、xml与xhtmlHTML：超文本标记语言或超文本链接标示语言，是目前网络上应用最为广泛的语言，也是构成网页文档的主要语言。
HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等。
HTML的结构包括头部（Head）、主体（Body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。
HTML标签通常是英文词汇的全称（如块引用:blockquote）或缩略语（如“p”代表Paragraph），但它们的与一般文本有区别，因为它们放在单书名号里。
故Paragragh 标签是<p>,块引用标签是<blockquote>。
有些标签说明页面如何被格式化（例如，开始一个新段落），其他则说明这些词如何显示(<b>使文字变粗)还有一些其他标签提供在页面上不显示的信息－－例如标题。
HTML标准的版本历史：超文本置标语言(第一版)——在1993年6月发为互联网工程工作小组 (IETF)工作草案发布（并非标准）.HTML 2.0——1995年11月作为RFC 1866发布，在RFC 2854于2000年6月发布之后被宣布已经过时HTML 3.2——1996年1月14日，W3C推荐标准HTML 4.0——1997年12月18日，W3C推荐标准HTML 4.01（微小改进）——1999年12月24日，W3C推荐标准HTML 5——2007年HTML 5草案被W3C接纳，并成立了新的HTML工作团队。
08年1月22日第一份正式HTML 5草案发布。
XML：即可扩展标记语言，它与HTML一样，都是SGML(Standard Generalized Markup Language,标准通用标记语言)。
Xml是Internet环境中跨平台的，依赖于内容的技术，是当前处理结构化文档信息的有力工具。
扩展标记语言XML是一种简单的数据存储语言，使用一系列简单的标记描述数据，而这些标记可以用方便的方式建立，虽然XML占用的空间比二进制数据要占用更多的空间，但XML极其简单易于掌握和使用。
第三章 网页编辑
新建一个个人网站主页index.htm，对自己的 简要情况，兴趣爱好，所学专业等进行简要的 介绍。 要对网页中文本的格式进行设置，包括字形， 字号，加粗，下划线等效果。 插入自己的一张照片，并使用照片属性对其设 置，做到美观大方。 在不同的栏目之间用水平线进行分割。 在网页底部插入当前日期和时间。 用列表项列出自己的兴趣爱好。
第3章 网页编辑
3.1 网页的基本操作
3.1.1 新建网页 Dreamweaver提供了多种创建网页的方法，下面分 别介绍一下：（演示3-1） 1．如果Dreamweaver MX 2004 运行后显示起始页， 则在起始页中直接选择“新建HTML文档”。 2．如果Dreamweaver MX 2004运行后不显示起始 页，则在“文件”菜单选择“新建”命令，打开“新建 文档”对话框。 3．在文档窗口中，也可以直接按Ctrl+N组合键，打 开 “新建文档”对话框。
3.2 在网页中添加文本和图片
3.2.1 在网页中添加文本 1.添加文本 2）复制文本 打开字处理软件下含有文本的文档，如word 文档，执行“编辑”菜单中的“复制”命令复制 文本。然后在Dreamweaver文档窗口中，将插入 点置于要添加文本的位置，执行“编辑”菜单中 的“粘贴”命令，完成文本复制。
3.3 创建列表项
3.3.4修改列表属性（演示3-16） 首先将文字按照无序或有序列表方式 进行列表设置，然后将光标移到列表文字 中。单击“文本属性面板”中的“列表项 目”按钮，或者执行“文本”菜单下的子 菜单“列表”中的“属性”菜单命令，弹 出“列表属性”对话框。 介绍对话框的主要内容和功能。
上机操作指导
准备工作： 1. 首先启动Dreamweaver，确保已经用 站点管理器建立好了一个网站（根目录）。 2. 为了制作方便，最好事先打开资源管 理器，把要使用的图片收集到网站目录 images文件夹内。
HTML教程 03第三章
第三章段落与文字处理文本是所有语言需要具有的最基本功能，HTML更是如此。
本章讲解在HTML中如何编排段落和修饰文字。
3.1段落标记3.1.1<p>标记文本分段一般以<p>开头、以</p>结尾。
段落标记<p>是HTML中最常用的标记，虽然</p>可以省略，因为下一个<p>的开始就意味着上一个<P>的结束，但最好还是遵循规范，正规书写。
<P>标记的常用语法格式为：<p align = 对齐方式>……</p>其中，align用来定义段落的对齐方式，它可以取以下值：●center：居中对齐。
●left：靠左对齐，是默认值。
●right：靠右对齐。
【例1】<p>的用法。
<html><head><title>itsway -- 段落与文字</title></head><body><p align = center>劝学</p><p align = right>作者：颜真卿</p><p>三更灯火五更鸡，正是男儿立志时。
</p><p>黑发不知勤学早，白首方悔读书迟。
</p></body></html>显示结果如下图所示。
可以看出，标题“劝学”在页面中居中对齐，“作者：颜真卿”靠右对齐，而诗的主体则靠页面左边对齐。
3.1.2 <br>、<nobr>、<pre>和<center>标记段落与段落之间一般会空出一行距离。
如果不想分段而只想分行，可以使用<br>标记，常用格式为： <br>一般来说，每当浏览器窗口被缩小时，浏览器会自动将段落右边的文字转折至下一行。
HTML从入门到精通 第3章 文字与段落
·30·HTML网页设计参考手册标题文字的建立文字格式标记段落标记水平线标记其他标记在网页创作中，文字是最基本的元素之一。
增加文字的易读性，让浏览者在短时间内阅读更多、理解更多信息，并达到视觉艺术及传达的功能是网页创作者追求的目标。
本章将介绍各种文字标记的使用方法。
第3章文字与段落·31·3.1 标题文字的建立在浏览网页时，常常看到一些标题文字，用于对文本中的章节进行划分，它们以固定的字号显示。
HTML文档中的标题文字分别用来指明页面上的1～6级标题。
3.1.1 标题文字标记标题文字共包含6种标记，分别表示6个级别的标题，每一级别的字体大小都有明显的区别，从1级～6级依次减小。
语法：1级标题：<h1>…</h1>2级标题：<h2>…</h2>依次下去，到6级标题。
说明：在该语法中，1级标题使用最大的字号表示；6级标题使用的是最小的字号。
实例代码：<!--这是关于标题文字的实例--><html><head><title>标题文字的效果</title> Array </head><body><h1>1级标题的效果</h1><h2>2级标题的效果</h2><h3>3级标题的效果</h3><h4>4级标题的效果</h4><h5>5级标题的效果</h5><h6>6级标题的效果</h6></body></html>运行这段代码可以看到网页中6种不同大小的标图3-1 标题文字效果题文字，如图3-1所示。
3.1.2 标题文字的对齐方式——align默认情况下，标题文字是左对齐的。
html中的字符间距
html中的字符间距
在HTML中，可以使用CSS来控制字符间距。
CSS提供了两个属
性用于设置字符间距，letter-spacing和word-spacing。
1. letter-spacing，该属性用于设置字符之间的间距。
可以使
用负值来让字符更靠近，也可以使用正值来增加字符之间的间距。
例如，设置letter-spacing: 2px;将在字符之间增加2像素的间距。
2. word-spacing，该属性用于设置单词之间的间距。
与
letter-spacing类似，可以使用负值和正值来调整单词之间的间距。
例如，设置word-spacing: 5px;将在单词之间增加5像素的间距。
除了这两个属性，还可以使用CSS的text-align属性来调整字
符间距。
text-align属性有几个值可选，包括left（左对齐）、right（右对齐）、center（居中对齐）和justify（两端对齐）。
当使用justify值时，浏览器会自动调整字符间距，使每行的字符
填充满整个宽度。
需要注意的是，字符间距的效果可能因浏览器和操作系统而异。
某些浏览器可能不支持某些字符间距属性或值，因此在使用字符间
距时，最好进行兼容性测试。
总结起来，通过使用CSS的letter-spacing和word-spacing 属性，以及text-align属性的justify值，可以在HTML中调整字符间距，实现不同的排版效果。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
• 斜体
– <i>斜体文字</i> – <em>斜体文字</em> – <cite>斜体文字</cite>
• 下划线
– <u>下划线的内容</u>
3.3 设置段落的格式
• 把一段文字分成相应的段落，使网页层次 分明 • 3.3.1 段落标记
– 把一段文字标记起来，表示它们是一个段落 – 基本语法
• <p>段落文字</p>
• 默认的水平线是空心立体的效果 • 基本语法
– <hr noshade>
3.5 利用marquee设置滚动效果
• 滚动字幕
– 基本语法
<marquee align=left|center|right|top|bottom
bgcolor=#n direction=left|right|up|down behavior=type height=n hspace=n scrollamount=n scrolldelay=n width=n vspace=n loop=n>
第3章 用HTML设置文字、段落
GGAO CM WTU
学习目标
• • • • • • 输入文字 设置文字的格式 设置段落的格式 水平线的标记 创建列表 使用marquee设置滚动效果
3.1 插入其他标记
• 3.1.1 输入空格符号
– “＆nbsp”表示网页上的一个空格
• 3.1.2 输入特殊符号
3.6 综合练习－设置页面文本及段落
• 使用dreamweaver的代码视图操作
– 设置文本字体、大小、颜色 – 对齐方式 – 段落划分
• 实现类似Word一样的效果
பைடு நூலகம்
3.3.3 不换行标记
• 如果一行文字过长，浏览器会自动换行， 如果希望在显示的时候不换行，可以使用 该标签 • 基本语法
– <nobr>不换行文字</nobr>
• 演示
– 学生
3.3.4 换行标记
• HTML默认是连续显示文字，如果希望把一 个句子后面的内容在下一行显示，则要用 换行符 • 基本符号
– 例子
• <font face=“黑体”>传媒学院</font>
3.2.2 设置字号
• 文字的大小 • 基本语法
– <font size=“文字字号”>…</font> – size有7个等级
• 1最小，7最大 • 默认是3
• 例子
– <font size=“7”>WTU</font>
3.2.3 设置文字颜色
– <br>
• 例子
<body> Wuhan Textile University<br>CM </body>
3.4 水平线标记
• 3.4.1 插入水平线
– 基本语法
• <hr>
– 例子
<body> <p>Wuhan Textile University</p> <hr> <p>CM</p> </body>
• 基本语法
– <font color=“字体颜色”>…</font> – 颜色
• 颜色的英文单词 • #RRGGBB表示
• 例子
– <font color=“red”>CM</font>
3.2.4 设置粗体、斜体、下划线
• 粗体
– <b>加粗的文字</b> – <strong>加粗的文字</strong>
…. </marquee>
• 标签属性
3.5.2 使用marquee插入滚动公告
<html > <head> <title>macquee标签的使用</title> </head> <body> <marquee behavior="scroll" direction="up" scrollamount=1 width=100 height=100> 1.week1 HTML<br> 2.week5 HTML<br> </marquee> </body> </html>
3.2 设置文字格式
• <font>标记用来控制字体、字号和颜色等属性， HTML中的基本标记之一 • 3.2.1 设置字体
– 基本语法
• <font face=“字体样式”>…</font>
– 字体样式
• 字体的名称，比如“宋体”
– 可在word中获得系统支持的字体名称 – Dreamweaver中可以选择
3.4.2 设置水平线的宽度与高度属性
• 默认宽度是100％ • 基本语法
– <hr width=“宽度”> – <hr size=“高度”>
• 宽度
– 可以用像素，也可以用百分比
• 高度
– 只能用像素
3.4.3 设置水平线的颜色
• 基本语法
– <hr color=“颜色”>
• 颜色
– 颜色的英文名称或#RRGGBB（颜色代码）
3.4.4 设置水平线的对齐方式
• 水平线默认是居中对齐的 • 基本语法
– <hr align=“对齐方式”>
• 对齐方式
– left 左对齐 – center 居中对齐 – right 右对齐
• 演示例子
– 画一条占浏览器一半宽度的较粗的红色直线，且左 对齐 – 学生
3.4.5 利用水平线去掉阴影
3.3.2 段落的对齐属性
• 可以使用align参数设置
– 该参数不仅可以用在段落标记，还可以用到很多其 他标记中
• 基本语法
– <p align=“对齐方式”>…</p>
• 对齐方式
– left 左对齐 – center 居中对齐 – right 右对齐
• 例子
– <p align=center>Wuhan is a very big city in China</p>