网页设计与制作 单元5 网页文本和图像-任务5.1

}
.sj { font-size: 22px; font-family: "楷体"; font-weight: bold;
}
body { background-image: url(images/bg1.gif); background-repeat: no-repeat; background-color: #FDF7E0; margin-left: 50px; margin-top: 50px; margin-right: 50px;
任务5.1 制作文本类网页
在插入日期时，如果勾选“储存时自动更新”复选框，表示每次 修改并保存网页文档后将更新并显示当前的日期时间；取消该项选择， 日期在插入后将作为文本，不会再自动更新。
谢 谢！
2020/9/7
28
任务5.1 制作文本类网页
插入特殊字符后，在文档窗口的“设计”视图中直接显示出特殊 字符的效果，但是，在“代码”视图中将以替代符号表示，例如，版 权符号“©”表示为“©”，注册商标“®”表示为“®” 等。
任务5.1 制作文本类网页
2．插入水平线 在网页中，水平线对应的标签为<hr>，使用一条或多条水平线 分隔网页元素可以增添网页的层次感。 插入水平线的具体方法为：将光标定位在要插入水平线的位置， 选择“插入”→“HTML”→“水平线”菜单命令，或单击“插入” 面板“HTML”选项卡中的【 水平线】按钮，即可插入一条水平线。 水平线插入后，可以体粗细font-weight属性。
• 大小：设置目标规则的字体大小，对应font-size属性。
任务5.1 制作文本类网页
• 按钮：用于设置文字的颜色，对应color属性，也可以在 后面
的文本框中输入十六进制RGB值。
•
按钮组：通过单击对齐按钮，分别向目标规则添加对齐
属性，对应text-align属性为left（左对齐）、center（居中对齐）、
单元5 网页文本和图像 任务5.1 制作文本类网页
任务5.1 制作文本类网页
2020/9/7
2
任务5.1 制作文本类网页
任务目标: （1）掌握在Dreamweaver中为网页文档添加文本元素的方法； （2）掌握在Dreamweaver中创建列表及设置列表符号或编号的方法； （3）掌握使用CSS设置文本样式的方法。
任务5.1 制作文本类网页
5.1.3 制作唐诗赏析网页 下面通过制作唐诗赏析网页，来介绍在网页中添加文本元素、列 表及设置其CSS样式的具体方法。
请在Dreamweaver中 完成案例操作。
任务5.1 制作文本类网页
5.1.4 设置文本属性 为了使页面中的文本更加美观，需要设置文本的字体、大小、颜 色及段落等样式。设置文本样式可以通过创建并应用CSS进行设置， 也可以通过“属性”面板进行快速操作。 文本“属性”面板分为“HTML”和“CSS”两个选项卡，可以分 别对文本应用HTML格式或CSS样式。应用HTML格式时，Dreamweaver 会将HTML标签或属性添加到页面正文的HTML代码中。
任务5.1 制作文本类网页
水平线“属性”面板中各项参数含义如下。 • 宽、高：设置水平线的宽度、高度，以像素为单位，或以占页面大 小百分比表示，默认宽度占页面的100%。 • 对齐：设置水平线的对齐方式。选项有默认、左对齐、居中对齐或 右对齐，默认为居中对齐。 • 阴影：设置绘制水平线时是否带阴影。取消此选项时，将使用纯色 绘制水平线。 • 类：设置可以应用的CSS样式。
}
任务5.1 制作文本类网页
5.1.5 使用CSS设置段落样式 在网页中，段落是由<p>…</p>标签设置的一段文本，可以通过 CSS设置段落的行高、首行缩进等样式。
.wbd { text-indent: 32px; line-height: 150%;
}
任务5.1 制作文本类网页
5.1.6 插入特殊字符、水平线和日期 1．插入特殊字符 插入特殊字符的具体方法：把光标置于要插入特殊字符的位置， 选择“插入”→“HTML”→“字符”菜单命令，弹出的快捷菜单从 中选择所需的特殊字符；或单击“插入”面板“HTML”选项卡中最后 一个图标按钮右侧的小三角 ，弹出特殊字符列表从中选择所需的字 符。
}
.yzy { font-style: normal; font-family: "微软雅黑"; font-size: 24px; text-align: center;
}
任务5.1 制作文本类网页
.mj { color: #606060; font-size: 18px; font-weight: bold; font-family: '仿宋'; text-align: center;
任务5.1 制作文本类网页
•
：单击【编辑规则】按钮可以打开层叠CSS的规则定义
对话框，从中编辑正在应用的CSS规则；对于内联样式，可以打开
“CSS设计器”面板进一步编辑CSS规则。
•
：单击【CSS和设计器】按钮可以打开“CSS设计器”
面板，进而编辑CSS规则。
• 字体：设置目标规则的字体系列，包括字体集font-family、字体
任务5.1 制作文本类网页
在列表某个项目之后按<Enter>键，可以添加与该项目同一层次 的新列表项。
在最后一个列表项后，连续按两次<Enter>键，即可完成列表的 创建。
提示：在现有文本的基础上创建列表时，每一个段落文本将作 为列表中的一项，并非网页中显示的一行。
任务5.1 制作文本类网页
2．创建嵌套列表 列表可以嵌套，以表示不同的层次。 选定需要嵌套的列表项或将光标定位到该列表项处，单击“属性” 面板“HTML”选项卡中的【缩进】图标按钮 ，或者在右键快捷菜单 中选择“列表”→“缩进”命令，均能使列表项缩进，作为嵌套的内 层列表显示。 反之，选择右键快捷菜单中的“列表”→“凸出”命令；或者单 击“属性”面板“HTML”选项卡中的【凸出】图标按钮 可以使列表 的级别提升一级。
任务5.1 制作文本类网页
5.1.2 在网页中创建与设置列表 列表是指将具有相似特性或某种顺序的文本进行有规则的排列， 用列表方式进行罗列会使得文本内容层次更清晰。 列表通常分为项目列表和编号列表两大类。 1．创建列表 创建列表的方法有如下三种： • 选择“插入”→“项目列表（或编号列表）”菜单命令； • 单击“属性”面板“HTML”选项卡中的【项目列表】图标按钮 或【编号列表】图标按钮 ； • 单击“插入”面板“HTML”选项卡中的【ul项目列表】按钮或【ol 编号列表】按钮。
任务5.1 制作文本类网页
• ：粗体按钮，可将<strong>或<b>应用于所选文本。 • ：斜体按钮，可将<em>或<i>应用于所选文本。 • ：项目列表和编号列表按钮，分别将选定文本设置为项目列表 或编号列表。 • ：内缩区块和删除内缩区块按钮，分别应用或删除 <blockquote>标签，来缩进所选文本或删除所选文本的缩进，也 用于列表中增加列表嵌套或删除列表嵌套层级。 • 链接、标题和目标：创建所选文本的超链接，以及为超链接指定文 本提示和打开方式。
任务5.1 制作文本类网页
3．插入日期 Dreamweaver CC提供了方便的日期对象，可使用多种格式插 入当前日期（可以包含时间），并且可以设置在每次保存文件时都自 动更新该日期。 具体操作方法：将光标定位在要插入日期的位置，选择“插 入 ” → “ HTML”→“ 日 期 ” 菜 单 命 令 ； 或 者 在 “ 插 入 ” 面 板 “HTML”选项卡中选择【 日期】按钮，弹出“插入日期”对话框， 从中选择适当的“星期格式”“日期格式”“时间格式”，单击【确 定】按钮即可在页面中插入日期。
任务5.1 制作文本类网页
1．使用HTML设置文本属性 文本“属性”面板“HTML”选项卡中各项参数含义如下。 • 格式：设置选定文本的格式。选择“无”将不应用任何HTML标签， “段落”应用<p>标签的默认格式，“标题n”应用<hn>标签默 认格式（n表示从1至6），“预格式化”应用<pre>标签默认格式。 • ID：为所选内容指定一个ID名称。 • 类：显示当前应用于所选文本的类样式。在下拉菜单中可以选择已 建立的类样式：选择“无”可以删除当前所选样式，“重命名”可 以重命名该样式，“附加样式表”可以打开“使用现有的CSS文件” 对话框来向本文档附加外部样式表。
如果希望文本间仅换行而不创建新的段落，操作方法有以下三种。 • 选择“插入”→“HTML”→“字符”→“换行符”菜单命令。 • 单击“插入”面板HTML选项卡中最后一个图标按钮【 字符】。 • 按<Shift+Enter>组合键。
任务5.1 制作文本类网页
2．复制文本 可以利用系统剪贴板将其他应用程序中的文本内容粘贴到网页 文档中。 Dreamweaver还提供了“选择性粘贴”功能，打 开“选择性粘贴”对话框方法有如下2种： • 选择“编辑”→“选择性粘贴”菜单命令 • 按<Crtl+Shift+V>组合键
right（右对齐）、justify（两端对齐）。
任务5.1 制作文本类网页
继续在Dreamweaver中对5.1.3小节唐诗赏析网页案例中使用 CSS设置文本属性，参考代码如下。
.tssx { color: #660000; font-family: "华文行楷"; text-align: center; font-size: 36px; font-style: italic;
任务5.1 制作文本类网页
3．修改列表项目符号或编号
在网页文档中创建了列表后，“属性”面板中的【列表项目】按
钮
变为可用，单击该按钮或选择“列表”→“属性”命令，
打开“列表属性”对话框，可以修改列表项目符号或编号。
任务5.1 制作文本类网页
“列表属性”对话框中各选项含义如下。 • 列表类型：该下拉列表中包含“项目列表”“编号列表”“目录列 表”“菜单列表”选项，供用户选择。 • 样式：可选择的列表符号（项目符号或正方形）或编号（数字、小 写罗马字母、大写罗马字母、小写字母、大写字母）的样式，项目 列表默认为项目符号，编号列表默认为数字（1，2，3…）。 • 开始计数：只用于编号列表，在其文本框中可输入一个数字，作为 编号列表中第一个项目的值，其后的项目在该值基础上递增。 • 新建样式：设置选定的列表项目的符号或编号样式。 • 重设计数：只用于编号列表，表示选定的列表项目从该数值开始重 新计数。
任务5.1 制作文本类网页
5.1.1 在网页中添加文本元素 在网页中可以通过直接输入和复制/粘贴的方式来添加文本元素。 1．输入文本 在网页文档中输入文本只需将光标定位在需插入文本的位置，选 择所需的输入法进行文本输入即可。 HTML中空格是由“&nbsp;”表示的，在Dreamweaver设计视图中添 加空格的方法有以下三种。 • 选择“插入”→“HTML”→“不换行空格”菜单命令。 • 单击“插入”面板“HTML”选项卡中的【 不换行空格】图标按钮。 • 按<Ctrl+Shift+Space>组合键。
任务5.1 制作文本类网页
2．使用CSS设置文本属性 应用CSS样式时，Dreamweaver会将CSS样式属性写入文本行内样 式表中。文本“属性”面板“CSS”选项卡中各项参数含义如下。
• 目标规则：显示在“属性”面板中正在编辑、使用的规则。可以在 下拉列表中选择“新建规则{**}”下的“<新内联样式>”选项， 为所选文本设置内联CSS样式；或选择“应用类{**}”下的“<删 除类>”选项来删除已应用的CSS规则。
任务5.1 制作文本类网页
提示：选择“编辑”→“首选项”菜单命令，或按<Ctrl+U>组 合键打开“首选参数”对话框，在“常规”分类选项中选定“编辑 选项”中的“允许多个连续的空格”，在文档的“设计”视图下即 可直接按下空格键输入多个连续的空格。
在Dreamweaver设计视图中，按<Enter>键可以建立新的段 落，Web浏览器在段落之间自动插入一个空白空格行。