资源简介

课题 第3课 设置网页内容（1）
课时 2课时（90 min）
教学目标 知识目标： （1）掌握文档头信息和文档页面属性的设置方法 （2）掌握在网页中输入文本和设置文本格式的方法，了解水平线和特殊字符的插入 技能目标： （1）掌握网页的基本设置 （2）掌握在网页中对文本的操作 素质目标： 保持积极乐观心态，使大学时光丰富多彩
教学重难点 教学重点：网页中添加文本以及设置文本格式 教学难点：网页中水平线和特殊字符的插入
教学方法 问答法、讨论法、讲授法、练习法
教学用具 电脑、投影仪、多媒体课件、教材
教学设计 第1节课：课前任务→ 考勤（2 min）→ 问题导入（3 min）→传授新知（25 min）→课堂实训（15 min） 第2节课：问题导入（2 min）→ 传授新知（28 min）→ 课堂实训（10 min）→ 课堂小结（3 min）→ 作业布置（2 min）
教学过程 主要教学内容及步骤 设计意图
第一节课
课前任务 【教师】前面学习了创建与管理站点、编辑网页文档，让学生上网查询如何创建和编辑网页元素来完善网页 【学生】按照要求完成课前任务 通过课前任务，让学生了解各类网页元素
考勤 （2 min） 【教师】使用文旌课堂APP进行签到 【学生】班干部报请假人员及原因 培养学生的组织纪律性，掌握学生的出勤情况
问题导入 （3min） 【教师】提出以下问题，并随机邀请学生进行回答 我们通过百度等搜索引擎搜索信息的时候，各类网页是怎么被检索到的？ 【学生】聆听、思考、回答 【教师】总结学生的回答，导入本节课内容：网页基本设置 通过我们日常上网操作，引出通过网页关键字实现对网页的检索
传授新知 （25 min） 【教师】讲解新知，介绍网页基本设置 任务一 网页基本设置 一、任务说明 新建网页后，一般要对页面进行一些简单的设置，主要包括文档头信息和页面属性，下面分别介绍。 二、预备知识 （一）设置文档头信息 文档头信息包括网页关键字、网页说明等。网页关键字是指跟网页相关的词语或短语；网页说明是对网页的一个概括性介绍。 在使用Google、baidu、Yahoo等搜索引擎搜索网页时，不是检索网页的所有内容，而是只检索网页的关键字。如果希望自己的网页能够被搜索引擎检索到，最好把关键字设置为人们经常使用的词语。 在文档窗口中打开要设置头信息的网页后，单击“插入”面板“常用”类别中“文件头”按钮中的小三角图标 ，在打开的下拉列表中选择“关键字”，将弹出“关键字”对话框，如图3-1所示（详见教材）。 【知识库】 “插入”面板包含各种类型的对象按钮（如图像、表格和Flash动画等），通过单击这些按钮，可将相应的对象插入到文档中。默认状态下，“插入”面板中显示的是网页中最常用的对象按钮组，即“常用”类别。单击“常用”按钮右侧的小三角图标 ，可在弹出的下拉列表中选择其他类别，如布局、表单、数据等。 在“关键字”对话框中输入要设置为关键字的词语，各个词语之间用逗号隔开，之后单击“确定”按钮，便完成了关键字的设置。 说明文本的设置方法与关键字的设置大同小异，只需要在“文件头”下拉列表中选择“说明”，然后在弹出的“说明”对话框中设置即可。 （二）设置文档页面属性 一般通过设置页面属性来为网页文档设置标题和编码。 要设置页面属性，可在不选择网页文档中任何对象的前提下，单击属性检查器中的“页面属性”按钮，或者选择“修改”菜单下的“页面属性”命令，或按【Ctrl＋J】组合键，打开“页面属性”对话框。 在“页面属性”对话框左侧的“分类”列表中选择“标题/编码”，然后在“标题”文本框中输入网页标题；在“编码”下拉列表中选择一种编码方式，如图3-2所示（详见教材）。 此处的“标题”与“文档工具栏”中的“标题”文本框等效，它将出现在浏览器标题栏中，一般是表示网页特征或欢迎词之类的文本；编码用于设置网页文档中字符所用的编码类型，国内常用的有“简体中文（GB2312）”和“Unicode（UTF-8）”。 【课堂问答】 【教师】随机邀请学生回答以下问题 请同学们思考，简体中文（GB2312）和Unicode（UTF-8）有什么区别？ 【学生】聆听、思考、回答 【教师】总结学生的回答 简体中文（GB2312）主要用于汉字的编码，如果设计的网页主要面对使用汉语的中国人的话，使用 GB2312非常好，文字储存体积要小。如果设计的网页要面向世界的话，再用GB2312作为网页编码的话，有些电脑上的浏览器没有这种编码，网页汉字内容就会变成乱码。而UTF-8是全世界通用的，几乎支持所有字符，支持国际化。 【学生】聆听、思考、理解、记录 【教师】引入任务实施内容，讲解为“欧妮雅”网站主页设置基本信息 三、任务实施——为“欧妮雅”网站主页设置基本信息 在学习了文档头信息和页面属性的设置方法后，下面通过为“欧妮雅”网站主页设置头信息和页面属性，来看看头信息和页面属性在实际网页制作中的应用。 在开始执行下面的操作之前，请先将本书配套素材“素材与实例\素材\Dreamweaver”目录下的“cosmetic”文件夹拷贝至本地磁盘，并在Dreamweaver中定义站点“欧妮雅”，将“cosmetic”文件夹设置为站点根文件夹。 【多媒体】演示为“欧妮雅”网站主页设置基本信息的具体操作 步骤1 启动Dreamweaver CS5，打开“文件”面板，在“站点名称”下拉列表中选择“欧妮雅”，然后双击文件列表中的“index.html”，在文档窗口中打开。 步骤2 单击“插入”面板“常用”类别“文件头”按钮 中的小三角图标，在打开的下拉列表中选择“关键字”。 步骤3 打开“关键字”对话框。在“关键字”编辑框中输入要为网页设置的关键字，单击“确定”按钮，插入关键字。 步骤4 单击“插入”面板“常用”类别“文件头”按钮中的小三角图标，在打开的下拉列表中选择“说明”，打开“说明”对话框，在“说明”编辑框中输入文本，并单击“确定”按钮插入文本。 步骤5 单击“文档工具栏”中的“代码”按钮，可看到插入的“关键字”和“说明”文本。 【课堂问答】 【教师】随机邀请学生回答以下问题 代码中“关键字”和“说明”文本是如何实现的？ 【学生】聆听、思考、回答 【教师】总结学生的回答 meat标签的NAME变量语法格式是： 。 NAME后面的xxx为Keywords表示关键字，用来告诉搜索引擎你网页的关键字是什么。如果xxx为Description则表示简介，用来告诉搜索引擎你的网站主要内容。CONTENT后面表示具体内容。 步骤6 切换到“设计”视图，按【Ctrl＋J】组合键打开“页面属性”对话框，在左侧的“分类”列表中选择“标题/编码”，然后在右侧的“标题”文本框中输入网页标题，此处为“欧妮雅网站首页”；在“编码”下拉列表中选择“简体中文（GB2312）”。 步骤7 单击“确定”按钮，关闭“页面属性”对话框，可以看到标题栏中出现刚才设置的标题，按【Ctrl＋S】组合键保存文档。 【学生】聆听、观看、思考、理解、记录 通过教师讲解、课堂问答和多媒体演示等方式，让学生了解简单设置网页页面的方法，包括设置文档头信息和页面属性，文档头信息中设置网页关键字和网页说明，页面属性中设置标题和编码等；最后通过演示为“欧妮雅”网站主页设置基本信息，让学生进一步掌握本节所学知识
课堂实训 （15 min） 【教师】组织学生完成以下任务 按照上述任务实施中的具体操作步骤，为“欧妮雅”网站主页设置基本信息。 【学生】聆听、思考、上机操作、完成任务 【教师】根据学生的课堂表现对其考核进行评价 通过课堂实训，巩固课堂所学知识，帮助学生掌握网页的基本设置方法
第二节课
问题导入 （2 min） 【教师】随机邀请学生回答以下问题 我们所接触的网页中大多数都是以呈现什么内容为主？ 【学生】聆听、思考、回答 用问题导入，让学生探索网页的组成元素
传授新知 （28 min） 【教师】讲解新知，介绍输入文本并设置格式 任务二 输入文本并设置格式 一、任务说明 文本是网页最基本的组成元素，它能将各种信息有效地传达给浏览者，通常内容丰富的网页都有大量的文本。在Dreamweaver中可以直接输入文本，也可以从其他文档中复制文本，还可以插入水平线和特殊字符等。下面就来学习在网页中输入与编辑文本的相关知识。 二、预备知识 （一）输入文本 在Dreamweaver中输入文本的方法非常简单，只要将插入点定位在网页的某个位置（如某个表格单元格内），然后选择输入法输入文本就可以了。 对于大量的外部文本，可以利用剪贴板将其拷贝至网页文档中。例如，假设所需文本在Word文档“text.doc”中，可先打开该文档，然后复制其中需要的文本内容，接着将复制的内容拷贝至网页文档中。 【知识库】 为网页美观和便于浏览者阅读考虑，对于输入的长文本，需要对其进行换行和分段。其中，分段时可将插入点置于要作为下一段的文本起始处的左侧，然后按【Enter】键；换行时可按【Shift＋Enter】组合键。 （二）设置文本格式 文本属性检查器包括HTML和CSS两种类型，可以使用它们来设置文本格式。使用HTML类型时，Dreamweaver会为文本添加相应的HTML标签或标签属性（可从代码视图查看）；使用CSS类型时，Dreamweaver会使用CSS样式表设置文本属性，如字体、大小等。 【提示】 CSS用来设置网页的外观属性，如文本格式，图片格式，图片边框，网页中各对象的位置等。项目五中将具体讲解CSS样式表的使用方法。 1．使用HTML类型 【多媒体】展示“HTML类型属性”图片（详见教材） 如果属性检查器没有打开，请选择“窗口”>“属性”菜单将其打开。选择要设置格式的文本或将插入点置于要设置属性的段落中，属性检查器中默认将显示文本的HTML类型属性。 该面板中常用设置项意义如下。 格式：设置所选文本的格式。可以选择段落、标题1、标题2等。 ID：为所选内容分配一个ID，此时所选文本将应用该ID规定的样式。其下拉列表中将列出文档的所有未使用的已声明ID。 类：选择要应用于所选内容的类选择器。选择“无”可删除当前所选样式，选择“重命名”可重命名该样式，选择“附加样式表”可打开一个允许您向页面附加外部样式表的对话框。 【知识库】 用户可利用后面要介绍的文本属性检查器的CSS界面创建CSS的类、ID或标签选择器，并设置相应选择器的文本格式。此时便可以在文本属性检查器HTML界面的“ID”或“类”下拉列表中创建ID或类选择器，并自动应用它们设置的文本格式（属于CSS属性）。 若创建的选择器类型为“标签”，例如若创建的是段落标签

，则网页中所有由段落标签

定义的文本都将应用该标签设置的文本格式。 粗体、斜体：将文本显示为粗体或斜体。 项目列表和编号列表：将所选文本设置为项目列表或编号列表形式。 【知识库】 此处需要注意的是，在将文本设置为项目列表或编号列表之前，必须用【Enter】键把文本中的各项分为不同的段落。 文本缩进：缩进所选文本或删除所选文本的缩进。 链接、标题、目标：为所选文本设置超链接。 2．应用CSS类型 【多媒体】展示“CSS类型属性”图片（详见教材） 单击属性检查器左侧的CSS按钮，可显示文本的CSS类型属性。 此时属性检查器中常用设置项的意义如下： 目标规则：显示当前选定内容所应用的CSS规则（即CSS选择器）或用户正在编辑的CSS规则。另外，用户也可利用该下拉列表为选定内容新建CSS规则。 【知识库】 当在“目标规则”下拉列表中选择“新CSS规则”，并设置其他任意项时，将打开“新建CSS规则”对话框。在该对话框中选择“选择器类型”“选择器名称”和“规则定义”后，单击“确定”按钮可创建一个新的CSS规则。项目五中将具体学习CSS规则的创建和应用方法。 【课堂问答】 【教师】随机邀请学生回答以下问题 选择器类型中类的作用，选择器名称的作用分别是什么？ 【学生】聆听、思考、回答 【教师】总结学生的回答 根据图3-9所示（详见教材），建立的类可以应用到任何的HTML元素中。选择器名称可以理解为类的名称，HTML元素想使用该类设置文本格式，则选择该选择器名称即可。 字体：设置或更改目标规则的字体。 【知识库】 在“字体”下拉列表中选择“编辑字体列表”选项，将打开“编辑字体列表”对话框。在“可用字体”列表框中选择一种字体，然后单击按钮，可将选中的字体加入到字体列表中。 ……（详见教材） 大小：设置或更改目标规则的文本大小。 文本颜色：设置或更改目标规则的文本颜色，具体方法为单击颜色框 ，在弹出的颜色选择器中选择Web安全色，或直接在颜色框右侧的文本框中输入十六进制值（例如“#FF0000”）。 粗体：向目标规则添加粗体属性。 斜体：向目标规则添加斜体属性。 左对齐、居中对齐、右对齐和两端对齐：向目标规则添加各个对齐属性。 【课堂问答】 【教师】随机邀请学生回答以下问题 对比分析使用HTML和CSS设置文本格式的相同点与不同点？ 【学生】聆听、思考、回答 【教师】总结学生的回答 根据教材内容进行对比。 （三）插入水平线和特殊字符 1．插入水平线 水平线常用于组织信息和区分版块。如果网页文档由很长的内容构成，可在内容中间插入水平线，从而使网页内容更容易理解，阅读起来也更轻松。 【多媒体】展示“插入水平线”图片（详见教材） 定位插入点后，选择“插入”>“HTML”>“水平线”菜单，即可插入水平线。此外，单击“插入”面板“常用”类别中的“水平线”按钮，同样可插入水平线。 【知识库】 如要改变水平线颜色，可切换至代码视图，在水平线标签

---

中输入“color=‘颜色代码’”。但是，我们无法直接在编辑画面看到水平线的颜色设置效果，而只有在浏览器中预览时才能看到。 2．插入特殊字符 特殊字符主要是指版权符号、注册商标符号、不换行空格，以及常见的货币符号等。 【多媒体】展示“插入版权符号”图片（详见教材） 如要插入版权符号，可在定位插入点后，选择“插入”>“HTML”>“特殊字符”>“版权”菜单。 【小技巧】 有时候用户可能希望在某个地方插入几个空格，以便进行格式对齐。但是，无论按多少次空格键，却只能插入一个空格。此时可将输入法切换至“智能ABC输入法”，然后按【Shift＋空格】组合键，将半角输入状态切换至全角输入状态，之后多次按空格键即可在网页中输入多个空格。 【学生】聆听、思考、理解、记录 【教师】引入任务实施内容，讲解为“欧妮雅”网站子页设置文本内容 三、任务实施——为“欧妮雅”网站子页设置文本内容 【多媒体】展示网页文本效果图（详见教材），演示为“欧妮雅”网站子页设置文本内容的具体操作 步骤1 分别双击“欧妮雅”站点文件列表中的“sub1.html”和“text.txt”，在文档窗口中打开。 步骤2 首先切换至“text.txt”文档，在文档窗口中单击并依次按【Ctrl＋A】和【Ctrl＋C】组合键，以选择并复制所有文本。 步骤3 切换至“sub1.html”文档，将插入点置于“欧妮雅简介”下方的空白单元格中，然后按【Ctrl＋V】组合键粘贴文本。 步骤4 按【Ctrl＋A】组合键选中单元格中的所有文本，之后单击属性检查器上的“内缩区块”按钮 ，使文本向内缩进。 步骤5 现在来给文本分段，将插入点置于要作为第2段的文本起始处“全国乃至全世界”左侧，按下【Enter】键，则其后的所有文本都成为第2段。 步骤6至步骤11的具体内容详见教材。 【提示】 在实际的网页制作中，一般不用输入空格来设置段落首行缩进，而是用CSS样式来设置，后面将介绍具体方法。 【学生】聆听、思考、理解、记录 通过教师讲解、课堂问答和多媒体演示等方式，让学生明确网页最基本的组成元素是文本，掌握在网页中输入与编辑文本的方法；了解输入文本可以在插入点直接输入，也可以从外部文本进行拷贝；了解设置文本格式可以通过HTML和CSS两种方式，以及两种方式具体的设置方法；了解水平线和特殊字符特殊文本的使用方式；最后，通过演示为“欧妮雅”网站子页设置文本内容，让学生学以致用
课堂实训 （10 min） 【教师】组织学生完成以下任务 按照任务实施演示的具体步骤，在自己的实训电脑上为“欧妮雅”网站子页设置文本内容。 【学生】聆听、思考、上机操作、完成任务 【教师】根据学生的课堂表现对其考核进行评价 通过课堂实训，将所学知识马上得以运用，在实践中领会知识的要点，加深知识的理解
课堂小结 （3 min） 【教师】简要总结本节课的要点 本次课主要介绍了文档头信息和页面属性的设置，文档头信息包括对网页关键字和说明的设置，页面属性包括对网页标题、编码格式的设置；介绍了文本的输入与格式设置，文本输入可以直接在插入点输入，也可从外部拷贝文本；讲解了HTML和CSS两种设置文本格式的方法，以及特殊文本的使用。希望大家课下能够及时巩固复习，熟练掌握所学内容。 【学生】总结回顾知识点 回顾本次课所学，总结知识点，梳理知识要点，使学生加深印象
作业布置 （2 min） 【教师】布置课后作业 梳理本次课的相关知识点。 【学生】完成课后任务 通过课后练习，复习巩固所学知识
教学反思 本节课中完成了文档头信息和页面属性的设置，以及文本的输入与格式设置。本节课不足之处是没有将插入水平线和特殊字符应用到实例和实训当中。

展开更多......

收起↑