第03章网页文本

合集下载

第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

HTML5网页设计与制作教学课件第3章定义网页文本

第3章
定义网页文本
第3章定义网页文本
文字是网页信息传递的主要载体，虽然使用图像、动画或视频等多媒体信息也可以表情达意，但是文字所传递的信息是最准确，也是最丰富的。字体和文字样式与传统印刷排版的样式相似。例如，在Word软件中，用户经常要设置字体类型、大小和颜色，段落文本的版式和样式，这些效果在网页中都可以通过CSS来实现。
● sans-serif：无衬线字体，没有突变、交叉笔划或其他修饰线，无衬线字体通常是变宽的，字体粗细笔划的变化不明显。
● cursive：草体，表现为斜字型、连笔或其他草体的特征。看起来像是用手写笔或刷子书写的，而不是印刷出来的。
● fantasy：奇异字体，主要是装饰性的，但保持了字符的呈现效果，换句话说就是艺术字，用画写字，或者说字体像画。
3.2 设计网页文本样式
3.2.5 定义斜体字体
CSS使用font-style属性来定义字体倾斜效果，该属性用法如下所示。
其中normal表示默认值，即正常的字体，italic表示斜体，oblique表示倾斜的字体。 Italic和oblique两个取值只能在英文等西方文字中有效。
3.2 设计网页文本样式
学习要点
学习要点
01 了解HTML字体标签 02 了解CSS字体和文字属性
03 熟悉字体和文字属性的特殊取值
训练要点
●能够使用HTML标签标识不同类型的文本
●能够使用CSS正确设置网页字体和文字样式
●能够灵活使用CSS字体和文字属性设计出精美的网页正文版式
3.1 使用文本标签
3.1.1 标题文本
3.2.6 定义下划线
CSS使用text-decoration属性来定义字体下划线效果，该属性用法如下。

HTML教程 03第三章

第三章段落与文字处理文本是所有语言需要具有的最基本功能，HTML更是如此。

本章讲解在HTML中如何编排段落和修饰文字。

3.1段落标记3.1.1标记文本分段一般以开头、以结尾。

段落标记是HTML中最常用的标记，虽然可以省略，因为下一个的开始就意味着上一个的结束，但最好还是遵循规范，正规书写。

标记的常用语法格式为：……其中，align用来定义段落的对齐方式，它可以取以下值：●center：居中对齐。

●left：靠左对齐，是默认值。

●right：靠右对齐。

【例1】的用法。

<html><head><title>itsway -- 段落与文字</title></head><body>劝学作者：颜真卿三更灯火五更鸡，正是男儿立志时。

黑发不知勤学早，白首方悔读书迟。

</body></html>显示结果如下图所示。

可以看出，标题“劝学”在页面中居中对齐，“作者：颜真卿”靠右对齐，而诗的主体则靠页面左边对齐。

3.1.2 、、<pre>和<center>标记段落与段落之间一般会空出一行距离。

如果不想分段而只想分行，可以使用 标记，常用格式为： 一般来说，每当浏览器窗口被缩小时，浏览器会自动将段落右边的文字转折至下一行。

第3章为网页添加文本

首页末页向上向下返回结束调音
南昌市第一中等专业学校
定义列表
定义列表不使用项目符号或数字这样的前导字符，通常用在词汇表或说明书中。
首页末页向上向下返回结束调音
南昌市第一中等专业学校
为现有文本创建列表除了先创建列表项再输入文本外，还可以先输入文本，然后再设置列表项。
南昌市第一中等专业学校
设置字体大小
在属性面板的“大小”下拉列表框中选择相应的选项，并选择其后的 “单位”下拉列表框中相应的单位选项，即可设置所选文本的字体大小。其中字体的度量单位有像素（px）、厘米（cm）等，可根据具体情况进行选择，但一般都以像素为单位。
首页末页向上向下返回结束调音
南昌市第一中等专业学校
首页末页向上向下返回结束调音
南昌市第一中等专业学校
插入特殊字符
在Dreamweaver 8中编辑文本时，往往会遇到一些无法通过键盘直接输入的特殊字符，如版权符号©、注册商标符号®等，这时可通过 Dreamweaver 8插入特殊字符的功能进行插入。
首页末页向上向下返回结束调音
南昌市第一中等专业学校
在字符之间添加空格
南昌市第一中等专业学校
设置颜色
单击属性面板中的按钮，在弹出的颜色列表框中选择相应的选项可设置所选文本的字体颜色，在其后的文本框中直接输入颜色的英文名（如Red、Green等）或以“#” 开头的十六进制颜色代码（如 #ff0000、＃00ff00）设置所选文本的颜色。
首页末页向上向下返回结束调音
首页末页向上向下返回结束调音
南昌市第一中等专业学校
创建嵌套列表

第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规则”按钮进行创建。

第3章文字在网页中的应用

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。

第3章页面与文本

3.5练习案例
3.5.3练习案例-化妆品网站
案例练习目标：项目列表的使用。案例操作要点： 1. 将表格中的文字设置为项目列表。 2. 新建ID样式li。在【分类】|【类型】选项中的【Font-size】下拉列表框中输入12px，在【Color】文本框中输入 #727272）;在【分类】|【方框】选项中取消【Margin】的【全部相同】勾选，在【Top】下拉文本框中输入14px；在【分类】|【列表】的【List-style-image】下拉文本框中找到并选择本地站点下images文件夹中的icon.gif文件。素材所在位置：光盘/案例素材/ch03/练习案例-化妆品网站，效果如图3-93所示。
3.5练习案例
3.5.2练习案例-移动银行网站
案例练习目标：文字样式设定。案例操作要点： 1. 在页面相应位置分别输入文字。 2. 新建多个类样式分别应用在文字上。样式设置：.menu （字体大小12px、字体颜色#FFFFFF）；.t1（字体大小 12px、字体颜色#666666）; .t2（字体大小14px、字体颜色#000000、字体粗细bold）；.t3（字体大小13px、字体颜色#CD3E00）；.t4（字体大小18px、字体颜色 #000000）；.t5（字体大小18px、字体颜色 #2C9BC9）；.t6（字体大小18px、字体颜色#EF9514）。素材所在位置：光盘/案例素材/ch03/练习案例-移动银行网站，效果如图3-92所示。
1．应用段落格式 2．指定预格式
3.2.5插入日期 3.2.6插入特殊字符
在网页文档中有时需要插入一些特殊字符，如版权符号、注册商标符号、破折号和英镑符号等。
3.3水平线
3.3.1课堂案例-个人网站

第03章

3.2 处理段落
3.2.1 设置段落格式使用【属性】面板的【格式】弹出式菜单或选择【文本】| 【段落格式】菜单可以应用标准段落和标题标签。 3.2.2 对齐段落段落的对齐方式，指的是段落相对文档窗口（或浏览器窗口）在水平位置的对齐方式。有三种对齐方式：左对齐、居中对齐、右对齐、两端对齐。 3.2.3 缩进段落许多时候需要缩进段落，例如希望强调一段文字，或引用其他来源的文字，都需要将文字缩进，以示同普通段落的区别。所谓缩进，主要是相对于文档窗口（或浏览器窗口）左端而言的。
3.7.3 简答题（1）简述美化文本的意义？（2）简述编辑文本格式具有那些样式？ 3.7.4 操作题通过表格布局一个页面，并完成页面内容的添加。最后对td、body标签进行定义，设置字体为宋体9磅字。
本节学习结束
（2）若要插入更多的特殊字符，请选择______ | ______ | ______或在______栏
中选择______图标，选择一个字符，然后单击【确定】。
3.7.2 选择题（1）设置文本属性可以通过_______来设置。 A．属性面板 B．控制面板 C．启动面板 D．文本菜单（2）在网页中连续输入空格的方法是_______。 A．连续按空格键 B．按下Ctrl键再连续按空格键 C．转换到中文的全角状态下连续按空格键 D．按下Shift键再连续按空格键
3.3.3 添加字体颜色打开【文本】菜单，选择【颜色】，可以打开Windows标准的颜色对话框，允许用户选择颜色，如图所示。
3.3.4 设定字体样式字符的样式指的是字符的外观显示方式，例如字符的加粗、倾斜和下划线等，利用Dreamweaver，可以设置多种字符样式。 1. 加粗 2. 倾斜 3. 下划线 4. 删除线 5. 打字型 6. 强调 7. 加强 8. 代码，变量，范例和键盘 9. 引用和定义 10. 已删除 11. 已插入

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

中文版Dreamweaver MX 2004基础培训教程 2011-4-30
中文版Dreamweaver MX 2004基础培训教程 2011-4-30
常见问题答疑
如何在页面中制作由下向上滚动的文字？代码如下： <marquee direction=up width=110id=cool scr ollamount=2 scrolldelay=80 height=50 onM ouseOver=cool.stop() onMouseOut=cool.sta rt()> 想了解更多的信息 </marquee> 其中SCROLLAMOUNT=‘’‘’‘’‘’*‘设置快慢 DIRECTION=‘*’设置方向。
第3章网页文本
中文版Dreamweaver MX 2004基础培训教程
2011-4-30
教学Байду номын сангаас的
熟练掌握普通文本的设置方法掌握编辑文本格式
中文版Dreamweaver MX 2004基础培训教程
2011-4-30
创建文本文档
在学习设置文本之前首先要了解如何创建一个文档以及如何保存文档。
中文版Dreamweaver MX 2004基础培训教程
2011-4-30
处理段落
设置标题设置段落格式定义预格式化文本缩进段落
中文版Dreamweaver MX 2004基础培训教程
2011-4-30
编辑文本格式
设置字体调整文本的大小改变文本颜色对齐文本
中文版Dreamweaver MX 2004基础培训教程
2011-4-30
课堂串讲
本章主要学习如何设置网页文本。网页文本的设置是制作网页过程中的一项最基本操作，通过对文本使用编辑和设置文本工具，能够使文本在网页中的排版更加整齐美观、条理清晰。学习好本章是对网页内容进行排版的关键所在。熟练掌握处理文本段落、编辑文本格式和设置列表是实现在网页设计和制作过程对网页文本和图像进行准确定位和布局的关键所在。
中文版Dreamweaver MX 2004基础培训教程 2011-4-30
常见问题答疑
如何在文本之间插入空格？答：可以在输入的时候直接按Ctrl+Shift+ 空格，连按4次，就可以得到两个汉字大小的空格。注意：对于段落的首行缩进，不用加空格，最好设置CSS让缩进来得到首行缩进效果。