第三章网页文本的编辑与控制
合集下载
第三章第2节编辑文本(图片﹑图形﹑艺术字﹑文本框的添加及编辑)
三．文本框的插入
四．添加背景
课后自评
一节课下来，同学们对所学知识掌握较好，课堂密度稍大，学生自己动手时间少，应多准备一些难度不同的样例，以适合不同层次的学生。
教学重点
图片、图形、艺术字、文本框的添加及编辑
教学难点
使学生灵活运用所学知识点解决实际问题
教学媒体
计算机
教学方法
引导式﹑演示法﹑讲练法
教学过程
步骤时间
教学内容
教师活动
学生活动
前
提
测
平
目
标
实
施
复习：输入一段文字：
大雪整整下了一夜。早晨，天放晴了，太阳出来了。俗话说，“瑞雪兆丰年。”
一．插入艺术字
插入艺术字并设置艺术字的格式，包括线条和填充﹑艺术字形状﹑版式、设置竖排文字﹑字体字号调整等方面。
课题
图片﹑图形﹑艺术字﹑文本框的添加及编辑
个数
课型
新授
备课日期
授课日期
教
学
目
标
知识目标：使学生学会对文档中的图片﹑自选图形﹑艺术字﹑文本框对象进行插入和处理，从而使创建的文档更加丰富多彩
能力目标：培养学生发现问题﹑分析问题﹑解决实际问题的能力；培养学生的设计及审美能力；培养学生的表达能力
情感目标：通过创设宽松﹑和谐的课堂气氛培养学生互帮互助的精神，促进师生之间﹑学生之间的情感交流
通过大屏幕来演示插入文本框的方法并举例。
在文本框中插入图片的好处。
教师辅导
演示一种填充效果，其他的由学生来完成。
学生观看
学生上机输入图形
学生练习
学生练习并找出其他的文本框的形式。
学生来完成其他的填充效果。
小结
本节课讲了文章的修饰重点掌握艺术字的添加及文本框的使用。
四．添加背景
课后自评
一节课下来，同学们对所学知识掌握较好，课堂密度稍大，学生自己动手时间少，应多准备一些难度不同的样例，以适合不同层次的学生。
教学重点
图片、图形、艺术字、文本框的添加及编辑
教学难点
使学生灵活运用所学知识点解决实际问题
教学媒体
计算机
教学方法
引导式﹑演示法﹑讲练法
教学过程
步骤时间
教学内容
教师活动
学生活动
前
提
测
平
目
标
实
施
复习：输入一段文字：
大雪整整下了一夜。早晨，天放晴了，太阳出来了。俗话说，“瑞雪兆丰年。”
一．插入艺术字
插入艺术字并设置艺术字的格式，包括线条和填充﹑艺术字形状﹑版式、设置竖排文字﹑字体字号调整等方面。
课题
图片﹑图形﹑艺术字﹑文本框的添加及编辑
个数
课型
新授
备课日期
授课日期
教
学
目
标
知识目标：使学生学会对文档中的图片﹑自选图形﹑艺术字﹑文本框对象进行插入和处理，从而使创建的文档更加丰富多彩
能力目标：培养学生发现问题﹑分析问题﹑解决实际问题的能力；培养学生的设计及审美能力；培养学生的表达能力
情感目标：通过创设宽松﹑和谐的课堂气氛培养学生互帮互助的精神，促进师生之间﹑学生之间的情感交流
通过大屏幕来演示插入文本框的方法并举例。
在文本框中插入图片的好处。
教师辅导
演示一种填充效果，其他的由学生来完成。
学生观看
学生上机输入图形
学生练习
学生练习并找出其他的文本框的形式。
学生来完成其他的填充效果。
小结
本节课讲了文章的修饰重点掌握艺术字的添加及文本框的使用。
第三章网页文本的编辑与控制
利用HTML处理网页文本 处理网页文本 利用
（3）设置文字和超链接的颜色
设置正文和超链接颜色时，可以使用BODY标记符的text、link、 设置正文和超链接颜色时，可以使用BODY标记符的text、link、 vlink和alink属性。 vlink和alink属性。
（4）设置页面背景声音
在HEAD中添加： HEAD中添加： < BODY BGSOUND src=“网页背景声音的地址”> src=“网页背景声音的地址”
利用HTML处理网页文本 处理网页文本 利用
设置页面属性
（1）设置页面背景颜色 在<BODY>标记符中使用bgcolor属性可以为网页设置背景颜色。 <BODY>标记符中使用bgcolor属性可以为网页设置背景颜色。 其格式为：<BODY 其格式为：<BODY bgcolor = “#ff0066”> #ff0066” （2）设置页面背景图像 选择特定图案作为页面的背景，使用BODY标记符的background 选择特定图案作为页面的背景，使用BODY标记符的background 属性即可。 HTML语句为：<BODY background="网页背景图案的地址"> HTML语句为：<BODY background="网页背景图案的地址">
注意：XHTML要求标记符区分大小写！养成习惯都用小写。 注意：XHTML要求标记符区分大小写！养成习惯都用小写。
绝大多数标记符都是成对出现的， 绝大多数标记符都是成对出现的，包括开始标记符和结束标记 符。某些标记符，例如<BR>，只要求单一标记符号。 某些标记符，例如<BR>，只要求单一标记符号。
网页图文网页上的文本编辑
（2）出现【列表属性】对话框后，在“列表类型”菜单中选择“项目列
表”或“编号列表”（如图所示），接着在“样式”下拉列表中选择
相应的符号或编号（如图所示），然后单击
按钮。
第三章 网页图文
21
第三章 网页图文
22
由于所有的列表项目被视为同一个段落，因此完成设置后，所有项目 符号或编号就会变成所选的正方形或大写罗马数字（如图所示），而不 需要一项一项修改。
第三章 网页图文
12
（ 1）编排文本段落 ①将光标移到要分段的位置后，按下【Enter】键。 ②当按下【Enter】键时，则会造成较大行距的段落。如图所示。
第三章 网页图文
13
若按下【Shift】+【Enter】键，则只是强迫文本换行而已。如 图所示。
第三章 网页图文
14
（2）修改文本色与字体
26
网格线
第三章 网页图文
27
项目一
1.实训题目
“长城—世界建筑史上一大奇迹”网页
2.实训目的
通过制作该网页作，可以掌握文本的标题设置、文字的移动和复 制、文字的查找与替换等基本设计过程。
第三章 网页图文
28
3.实训案例效果
第三章 网页图文
29
网页设计与制作
拼音缩写：根据每个页面的标题或主要内容，提取每个汉字的第1个字母作 为文件名。如“公司简介”页面的拼音是“gongsijianjie”，那么文件名就 是“gsjj.html”。
第三章 网页图文
（2）文件夹和文件命名规则 英文缩写：适用于专有名词。例如，“Active Server Pages”这个专 有名词一般用ASP来代替，因此文件名为“asp.html”。 英文原义：这种方法比较实用、准确。如可以将“图书列表”页面 命名为“BookList.html”。
第三章 网页编辑
新建一个个人网站主页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文件夹内。
第3章 网页元素编辑
• •
password file checkbox radio button submit reset
第三章 网页元素编辑
1、文字域text 、文字域 text属性值用来设定在表单的文本域中，输入任何 属性值用来设定在表单的文本域中， 属性值用来设定在表单的文本域中 类型的文本、数字或字母。输入的内容以单行显示。 类型的文本、数字或字母。输入的内容以单行显示。
第三章 网页元素编辑
• • • 3.4 建立表单 表单是实现交互动态网页的一种主要的外 在形式，是网站管理者与浏览者之间沟通的桥梁。 表单的主要功能是收集信息，接受浏览 者在网页中的操作，并传递给服务器端的表单处 理程序。
第三章 网页元素编辑
• 表单是网页上的一个特定区域，它由
• <form></form>标签定义。 • • • • • • 语法： <form name=“form_name” method=“method” action=“url” > …… </form>
文字域属值 name maxlength size value 描述 文字域的名称 文字域的最大输 入字符数 文字域的宽度 文字域的默认值
第三章 网页元素编辑
结果 代码 <form> 姓名： type=“text” 姓名：<input type=“text” name=“name” size=“20” name=“name” size=“20” /> </form>
(1)单选框 当type=“radio”时,表示该输入项是一个 单选项,具有相同name属性的单选按钮形成一个组,用户 只能选择单选项中的一项作为输入信息。 checked属性，用来表示此项被默认选中。 value属性，用来设定选中项目后传送到服务器 端的值。
第3章网页的编辑
大。一般换行使用Enter+Shift组合键，这样换
网
行才是正常行距。
页
的
编
使用Enter键的效果
辑
使用Enter+Shift组合键的效果
3.1.1 字体与字号-添加字体
由于Dreamweaver提供的默认字体中没有中文
第
字体，所以在设置字体之前，应该先将中文字
三
体添加到“属性面板” 字体下拉列表框中。
字号的字号大小。例如，5表示5号字，+3表 示默认字号大小加上3，-2表示默认字号大小
减去2。
3.1.2 文字的对齐方式
选中单元格, 这时属性面板显示的是单元格
第
设置的内容。单击“对齐”框在弹出的下拉
三
菜单内中选择“居中对齐”，单元格中文字
章
在单元格中居中显示。
网
选中整个表格，将属性面板中的“填充”值更 改为10，这样各个单元格间的距离更改为10像
操作。
3.2.3 设置图片
第 三
单击图片，图片被一个黑框框住，同时出现三 个小的实心黑框。鼠标指针指向实心黑框，当 鼠标指针变成双向箭头时，拖动鼠标，更改图
章
片的大小。
网
页
的
在单击图片时，属性面板同时被打开。在“替
编
代”框中输入文字。这样，当鼠标在浏览器中
辑
移动到该图片上时，会显示替代文字；特别地 ，由于网络慢等原因，图片不能正常下载时，
图片区域会显示替代文字，从而不会影响到网
页的整体效果。
3.2.4 添加网页背景
第
要使网页漂亮起来，设置页面属性必不可少。 用鼠标单击菜单栏上的“修改”，在下拉菜单
三
中单击“页面属性”，打开“页面属性”对话
网页编辑软件基本教程
网页编辑软件基本教程第一章：网页编辑软件的定义和作用网页编辑软件是一种用于创建和编辑网页的工具。
它提供了一个直观的界面和丰富的功能，使用户能够设计和制作具有良好用户界面的网页。
通过网页编辑软件，用户可以插入文本、图像、多媒体文件和其他各种元素，调整布局、风格和格式，以及进行网页的发布和管理。
第二章：常见的网页编辑软件1. Adobe DreamweaverAdobe Dreamweaver是一款功能强大的网页编辑软件，被广泛认可和使用。
它提供了一个所见即所得的界面，可以在设计模式和代码模式之间切换。
用户可以通过拖放方式轻松插入元素，使用CSS进行样式定义，并实时预览网页效果。
2. Microsoft Expression WebMicrosoft Expression Web是微软公司推出的一款专业网页编辑软件。
它提供了一套丰富的工具和模板，帮助用户轻松创建和编辑符合标准的网页。
Expression Web支持多种网络技术，包括HTML、CSS、JavaScript等，同时还提供了一个直观的用户界面和强大的调试功能。
第三章：网页编辑软件的基本操作1. 创建新网页在网页编辑软件中，用户可以通过选择新建项目或文件的方式来创建新网页。
用户可以选择相应的模板或者从头开始创建一个空白网页。
在创建过程中，用户可以定义网页的大小、布局以及其他基本设置。
2. 插入和编辑元素用户可以通过拖放方式将各种元素插入到网页中，包括文本、图像、链接、音频、视频等。
网页编辑软件通常提供了一系列的编辑工具，用户可以用于调整元素的大小、位置、颜色、字体等属性。
3. 设置样式和布局通过CSS（层叠样式表），用户可以轻松设置网页的样式和布局。
这包括网页的背景、字体、边距、对齐方式等。
用户可以直接在编辑器中编辑CSS，也可以链接外部CSS文件。
4. 调整和预览网页网页编辑软件通常提供了一个所见即所得的预览功能，用户可以实时查看网页的效果。
三章网页图文CSS样式ppt课件
3.4.4 应用CSS样式
① 选择需要应用CSS样式的文本，在CSS面板中，右击样式名称， 在弹出的列表中选择“编辑”命令，或CSS样式属性的目标规则 列表中选择所需的样式名称，可对已创建的CSS样式进行修改。
第三章 网页图文
11
实训项目
1. 将WORD中的文本复制，粘贴到网页中，并根据效果图进行相关文 本设置。
第三章 网页图文
7
3.4 用CSS样式设置文本格式
3.4.2 新建CSS样式
① 单击面板右下侧的“新建CSS规则”按钮，打开“新建CSS规 则”对话框。
② 选择“类 ” 样式，并为新建的CSS样式命名，如下图所示。
提示：样式名称不能使用中文，且不能包含空格符。
第三章 网页图文
8
3.4 用CSS样式设置文本格式
2. 在网页插入两张图片，并根据效果图对“图像属性”进行相关设置。 3. 选择一音频文件制作网页背景音乐。
第三章 网页图文
网页设计与制作
第三章 网页图文
3.3 在网页中插入各种媒体文件
3.3.1 插入透明Flash动画
④ 选择动画文件，然后在【属性】面板中设置Wmode选项为” 透明“，可将Flash背景透明化，预览后效果如图所示。
第三章 网页图文
Байду номын сангаас 3.4 用CSS样式设置文本格式
在制作网页过程中，每页都会用到文字、图像以及表 格、表单等元素。对于这些元素，如果没有CSS样式 控制，是无法使页面美观的。各浏览器之间不兼容， 也会导致同一个网页在不同的浏览器中显示效果不同， 而应用CSS样式则恰到好处地解决了这个问题。
3.3 在网页中插入各种媒体文件
3.3.1 插入透明Flash动画
① 选择需要应用CSS样式的文本，在CSS面板中，右击样式名称， 在弹出的列表中选择“编辑”命令，或CSS样式属性的目标规则 列表中选择所需的样式名称，可对已创建的CSS样式进行修改。
第三章 网页图文
11
实训项目
1. 将WORD中的文本复制，粘贴到网页中，并根据效果图进行相关文 本设置。
第三章 网页图文
7
3.4 用CSS样式设置文本格式
3.4.2 新建CSS样式
① 单击面板右下侧的“新建CSS规则”按钮，打开“新建CSS规 则”对话框。
② 选择“类 ” 样式，并为新建的CSS样式命名，如下图所示。
提示：样式名称不能使用中文，且不能包含空格符。
第三章 网页图文
8
3.4 用CSS样式设置文本格式
2. 在网页插入两张图片，并根据效果图对“图像属性”进行相关设置。 3. 选择一音频文件制作网页背景音乐。
第三章 网页图文
网页设计与制作
第三章 网页图文
3.3 在网页中插入各种媒体文件
3.3.1 插入透明Flash动画
④ 选择动画文件，然后在【属性】面板中设置Wmode选项为” 透明“，可将Flash背景透明化，预览后效果如图所示。
第三章 网页图文
Байду номын сангаас 3.4 用CSS样式设置文本格式
在制作网页过程中，每页都会用到文字、图像以及表 格、表单等元素。对于这些元素，如果没有CSS样式 控制，是无法使页面美观的。各浏览器之间不兼容， 也会导致同一个网页在不同的浏览器中显示效果不同， 而应用CSS样式则恰到好处地解决了这个问题。
3.3 在网页中插入各种媒体文件
3.3.1 插入透明Flash动画
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
注意：XHTML要求标记符区分大小写！养成习惯都用小写。 注意：XHTML要求标记符区分大小写！养成习惯都用小写。
绝大多数标记符都是成对出现的， 绝大多数标记符都是成对出现的，包括开始标记符和结束标记 符。某些标记符，例如<BR>，只要求单一标记符号。 某些标记符，例如<BR>，只要求单一标记符号。
标记符基础
在 HTML中，所有的标记符都用尖括号括起来。 HTML中 所有的标记符都用尖括号括起来。
例如，<html>、<a>。 例如，<html>、<a>。
HTML 标记符是不区分大小写的。<html>、<Html>和<HTML>没 标记符是不区分大小写的。<html>、<Html>和<HTML>没 有区别。 有区别。
注意：对于XHTML，这样的标记写为<br 注意：对于XHTML，这样的标记写为<br />
开始标记符与结束标记符的区别在于：结束标记符多一个斜杠 开始标记符与结束标记符的区别在于： “/”（不是反斜杠“\”！） 不是反斜杠“
标记符基础
属性是用来描述对象特征的特性。例如，一个人的身高、 属性是用来描述对象特征的特性。例如，一个人的身高、体重 就是人这个对象的属性。 就是人这个对象的属性。 在HTML中，所有的属性都放置在开始标记符的尖括号里，多个 HTML中 所有的属性都放置在开始标记符的尖括号里， 属性之间用空格分开，通常也不区分大小写。 属性之间用空格分开，通常也不区分大小写。
1、利用软件编辑文本 、
利用Dreamweaver 8编辑网页文本 利用 编辑网页文本
在网页中添加和处理文本（操作演示） 1．输入文字
（1）换行 （2）输入空格 （3）插入特殊的字符 （4）加入注释文字 （5）插入水平线 （6）插入日期和时间
利用Dreamweaver 8编辑网页文本 利用 编辑网页文本
利用HTML处理网页文本 利用 处理网页文本
2、强制换行标记符
强制换行标记符的格式为：文字<BR> 强制换行标记符的格式为：文字<BR>
3．换段标记符
（1）强制换段标记符 强制换段标记符的格式为：文字<P> 强制换段标记符的格式为：文字<P> （2）设置段落标记符 设置段落标记符的格式为：<P align="对齐方式"> 设置段落标记符的格式为：<P align="对齐方式"> 文字 </P>
水平线标记符的格式为： <HR align="对齐方式" size="横线粗细" width="横线长度" align="对齐方式" size="横线粗细" width="横线长度" color="横线颜色" color="横线颜色" noshade>
利用HTML处理网页文本 处理网页文本 利用
文本格式处理
4、项目实训 、
案例展示(制作唐诗网站)
项目分析
1、建站准备 建站准备
建立站点文件夹，收集文字、图片及相关素材并分类整理。
2、创建本地站点 创建本地站点 3、站点管理 站点管理
切换、编辑、复制、删除、导出/导入站点
4、管理网站中的文件和文件夹 管理网站中的文件和文件夹
创建文件夹和文件、移动和复制文件、重命名文件夹和文件、 删除文件夹和文件。
3、用HTML处理文本 、 处理文本
利用HTML处理网页文本 处理网页文本 利用
标题处理
标题文字标记符的格式为： <Hn align="对齐方式" > 标题文字 </Hn> align="对齐方式"
段落处理
1、注释标记符
HTML的注释标记符的格式为：<!--注释内容--> HTML的注释标记符的格式为：<!--注释内容--> 注释并不局限于一行，长度不受限制。结束标记符不必与开始标记 符在同一行。注释的内容不在浏览器中显示。 符在同一行。注释的内容不在浏览器中显示。
5、网页文档的基本操作 网页文档的基本操作
创建、打开、保存、预览、关闭网页文档
操作演示
（1）创建一个命名为“XXX唐诗网站”的静态网站， 创建一个命名为“XXX唐诗网站”的静态网站， 唐诗网站 该网站的所有文件存储在本机上E盘的“XXX唐诗 该网站的所有文件存储在本机上E盘的“XXX唐诗 网站”文件夹中。 网站”文件夹中。 （2）在文件夹“唐诗网站”中创建三个子文件夹 在文件夹“唐诗网站” image” music” text” “image”、“music”和“text”。 （3）将所需的图像文件复制到“image”文件夹中。 将所需的图像文件复制到“image”文件夹中。 （4）在文件夹“XXX唐诗网站”中创建一个命名为 在文件夹“XXX唐诗网站” 唐诗网站 index.htm”的网页文档。 “index.htm”的网页文档。 （5）编辑网页、保存并进行预览效果。 编辑网页、保存并进行预览效果。 （6）学生实践操作，并提交作业。 学生实践操作，并提交作业。
利用HTML处理网页文本 利用 处理网页文本
4．显示预排格式标记符
显示预排格式标记符的格式为：<PRE>预先排好的格式</PRE> 显示预排格式标记符的格式为：<PRE>预先排好的格式</PRE>
5．分区显示标记符
分区显示标记符的格式为：
<DIV align="对齐方式"> 文本或图像 </DIV > align="对齐方式"> 6．水平线
1．文字设置
（1）size属性 size属性 size属性是字号属性，用于控制文字的大小，它的取值既可以是 size属性是字号属性，用于控制文字的大小，它的取值既可以是 绝对值，也可以是相对值。 （2）face属性 face属性 face属性是字体标记符，用来指定字体样式 face属性是字体标记符，用来指定字体样式 （3）color属性 color属性 FONT标记符的color属性可用来控制文字的颜色，属性值可以是 FONT标记符的color属性可用来控制文字的颜色，属性值可以是 颜色名称或十六进制值。
2011年3月15日
学习目标
掌握文本的插入与编辑方法；能够用 Dreamweaver 8软件编辑网页文本. 掌握HTML语言的语法规则；掌握基本 的网页标记符和属性。 能够利用HTML语言处理网页文本
本章主要内容
一、利用Dreamweaver 8编辑网页文本 二、HTML基础 三、 利用HTML处理网页文本 四、项目实践：制作“唐诗”网站
利用HTML处理网页文本 处理网页文本 利用
设置页面属性
（1）设置页面背景颜色 在<BODY>标记符中使用bgcolor属性可以为网页设置背景颜色。 <BODY>标记符中使用bgcolor属性可以为网页设置背景颜色。 其格式为：<BODY 其格式为：<BODY bgcolor = “#ff0066”> #ff0066” （2）设置页面背景图像 选择特定图案作为页面的背景，使用BODY标记符的background 选择特定图案作为页面的背景，使用BODY标记符的background 属性即可。 HTML语句为：<BODY background="网页背景图案的地址"> HTML语句为：<BODY background="网页背景图案的地址">
利用HTML处理网页文本 处理网页文本 利用
（3）设置文字和超链接的颜色
设置正文和超链接颜色时，可以使用BODY标记符的text、link、 设置正文和超链接颜色时，可以使用BODY标记符的text、link、 vlink和alink属性。 vlink和alink属性。
（4）设置页面背景声音
在HEAD中添加： HEAD中添加： < BODY BGSOUND src=“网页背景声音的地址”> src=“网页背景声音的地址”
常用HTML标记符 常用 标记符
（1）HTML标记符 HTML标记符 （2）HEAD标记 HEAD标记 （3）TITLE标记符 TITLE标记符 （4）BODY标记符 BODY标记符 （5）强制换行标记符<br> 强制换行标记符<br> （6）注释标记符<!--注释内容--> 注释标记符<!--注释内容--> <!--注释内容-（7）强制换段标记符<p> 强制换段标记符<p> （8）显示预排格式标记符<pre> 显示预排格式标记符<pre> （9）水平线标记符<hr> 水平线标记符<hr> （10）分区显示标记符<div> 10）分区显示标记符<div>
2．编辑文本
（1）设置标题文字 （2）添加和删除中文字体 （3）设置字体的颜色 （4）添加项目符号和项目编号
在网页中添加图像 1．插入图像 2、修改图像参数 3、删除图像
2、HTML基础 、 基础
什么是HTML？ 什么是 ？
HTML（ HTML（Hypertext Markup Language，超文本标 Language， 识语言）是一种专门用于Web页制作的编程语言， Web页制作的编程语言 识语言）是一种专门用于Web页制作的编程语言， 用来描述超文本各个部分的内容， 用来描述超文本各个部分的内容，告诉浏览器如 何显示文本，怎样生成与别的文本或图像的链接 何显示文本， 点。
绝大多数标记符都是成对出现的， 绝大多数标记符都是成对出现的，包括开始标记符和结束标记 符。某些标记符，例如<BR>，只要求单一标记符号。 某些标记符，例如<BR>，只要求单一标记符号。
标记符基础
在 HTML中，所有的标记符都用尖括号括起来。 HTML中 所有的标记符都用尖括号括起来。
例如，<html>、<a>。 例如，<html>、<a>。
HTML 标记符是不区分大小写的。<html>、<Html>和<HTML>没 标记符是不区分大小写的。<html>、<Html>和<HTML>没 有区别。 有区别。
注意：对于XHTML，这样的标记写为<br 注意：对于XHTML，这样的标记写为<br />
开始标记符与结束标记符的区别在于：结束标记符多一个斜杠 开始标记符与结束标记符的区别在于： “/”（不是反斜杠“\”！） 不是反斜杠“
标记符基础
属性是用来描述对象特征的特性。例如，一个人的身高、 属性是用来描述对象特征的特性。例如，一个人的身高、体重 就是人这个对象的属性。 就是人这个对象的属性。 在HTML中，所有的属性都放置在开始标记符的尖括号里，多个 HTML中 所有的属性都放置在开始标记符的尖括号里， 属性之间用空格分开，通常也不区分大小写。 属性之间用空格分开，通常也不区分大小写。
1、利用软件编辑文本 、
利用Dreamweaver 8编辑网页文本 利用 编辑网页文本
在网页中添加和处理文本（操作演示） 1．输入文字
（1）换行 （2）输入空格 （3）插入特殊的字符 （4）加入注释文字 （5）插入水平线 （6）插入日期和时间
利用Dreamweaver 8编辑网页文本 利用 编辑网页文本
利用HTML处理网页文本 利用 处理网页文本
2、强制换行标记符
强制换行标记符的格式为：文字<BR> 强制换行标记符的格式为：文字<BR>
3．换段标记符
（1）强制换段标记符 强制换段标记符的格式为：文字<P> 强制换段标记符的格式为：文字<P> （2）设置段落标记符 设置段落标记符的格式为：<P align="对齐方式"> 设置段落标记符的格式为：<P align="对齐方式"> 文字 </P>
水平线标记符的格式为： <HR align="对齐方式" size="横线粗细" width="横线长度" align="对齐方式" size="横线粗细" width="横线长度" color="横线颜色" color="横线颜色" noshade>
利用HTML处理网页文本 处理网页文本 利用
文本格式处理
4、项目实训 、
案例展示(制作唐诗网站)
项目分析
1、建站准备 建站准备
建立站点文件夹，收集文字、图片及相关素材并分类整理。
2、创建本地站点 创建本地站点 3、站点管理 站点管理
切换、编辑、复制、删除、导出/导入站点
4、管理网站中的文件和文件夹 管理网站中的文件和文件夹
创建文件夹和文件、移动和复制文件、重命名文件夹和文件、 删除文件夹和文件。
3、用HTML处理文本 、 处理文本
利用HTML处理网页文本 处理网页文本 利用
标题处理
标题文字标记符的格式为： <Hn align="对齐方式" > 标题文字 </Hn> align="对齐方式"
段落处理
1、注释标记符
HTML的注释标记符的格式为：<!--注释内容--> HTML的注释标记符的格式为：<!--注释内容--> 注释并不局限于一行，长度不受限制。结束标记符不必与开始标记 符在同一行。注释的内容不在浏览器中显示。 符在同一行。注释的内容不在浏览器中显示。
5、网页文档的基本操作 网页文档的基本操作
创建、打开、保存、预览、关闭网页文档
操作演示
（1）创建一个命名为“XXX唐诗网站”的静态网站， 创建一个命名为“XXX唐诗网站”的静态网站， 唐诗网站 该网站的所有文件存储在本机上E盘的“XXX唐诗 该网站的所有文件存储在本机上E盘的“XXX唐诗 网站”文件夹中。 网站”文件夹中。 （2）在文件夹“唐诗网站”中创建三个子文件夹 在文件夹“唐诗网站” image” music” text” “image”、“music”和“text”。 （3）将所需的图像文件复制到“image”文件夹中。 将所需的图像文件复制到“image”文件夹中。 （4）在文件夹“XXX唐诗网站”中创建一个命名为 在文件夹“XXX唐诗网站” 唐诗网站 index.htm”的网页文档。 “index.htm”的网页文档。 （5）编辑网页、保存并进行预览效果。 编辑网页、保存并进行预览效果。 （6）学生实践操作，并提交作业。 学生实践操作，并提交作业。
利用HTML处理网页文本 利用 处理网页文本
4．显示预排格式标记符
显示预排格式标记符的格式为：<PRE>预先排好的格式</PRE> 显示预排格式标记符的格式为：<PRE>预先排好的格式</PRE>
5．分区显示标记符
分区显示标记符的格式为：
<DIV align="对齐方式"> 文本或图像 </DIV > align="对齐方式"> 6．水平线
1．文字设置
（1）size属性 size属性 size属性是字号属性，用于控制文字的大小，它的取值既可以是 size属性是字号属性，用于控制文字的大小，它的取值既可以是 绝对值，也可以是相对值。 （2）face属性 face属性 face属性是字体标记符，用来指定字体样式 face属性是字体标记符，用来指定字体样式 （3）color属性 color属性 FONT标记符的color属性可用来控制文字的颜色，属性值可以是 FONT标记符的color属性可用来控制文字的颜色，属性值可以是 颜色名称或十六进制值。
2011年3月15日
学习目标
掌握文本的插入与编辑方法；能够用 Dreamweaver 8软件编辑网页文本. 掌握HTML语言的语法规则；掌握基本 的网页标记符和属性。 能够利用HTML语言处理网页文本
本章主要内容
一、利用Dreamweaver 8编辑网页文本 二、HTML基础 三、 利用HTML处理网页文本 四、项目实践：制作“唐诗”网站
利用HTML处理网页文本 处理网页文本 利用
设置页面属性
（1）设置页面背景颜色 在<BODY>标记符中使用bgcolor属性可以为网页设置背景颜色。 <BODY>标记符中使用bgcolor属性可以为网页设置背景颜色。 其格式为：<BODY 其格式为：<BODY bgcolor = “#ff0066”> #ff0066” （2）设置页面背景图像 选择特定图案作为页面的背景，使用BODY标记符的background 选择特定图案作为页面的背景，使用BODY标记符的background 属性即可。 HTML语句为：<BODY background="网页背景图案的地址"> HTML语句为：<BODY background="网页背景图案的地址">
利用HTML处理网页文本 处理网页文本 利用
（3）设置文字和超链接的颜色
设置正文和超链接颜色时，可以使用BODY标记符的text、link、 设置正文和超链接颜色时，可以使用BODY标记符的text、link、 vlink和alink属性。 vlink和alink属性。
（4）设置页面背景声音
在HEAD中添加： HEAD中添加： < BODY BGSOUND src=“网页背景声音的地址”> src=“网页背景声音的地址”
常用HTML标记符 常用 标记符
（1）HTML标记符 HTML标记符 （2）HEAD标记 HEAD标记 （3）TITLE标记符 TITLE标记符 （4）BODY标记符 BODY标记符 （5）强制换行标记符<br> 强制换行标记符<br> （6）注释标记符<!--注释内容--> 注释标记符<!--注释内容--> <!--注释内容-（7）强制换段标记符<p> 强制换段标记符<p> （8）显示预排格式标记符<pre> 显示预排格式标记符<pre> （9）水平线标记符<hr> 水平线标记符<hr> （10）分区显示标记符<div> 10）分区显示标记符<div>
2．编辑文本
（1）设置标题文字 （2）添加和删除中文字体 （3）设置字体的颜色 （4）添加项目符号和项目编号
在网页中添加图像 1．插入图像 2、修改图像参数 3、删除图像
2、HTML基础 、 基础
什么是HTML？ 什么是 ？
HTML（ HTML（Hypertext Markup Language，超文本标 Language， 识语言）是一种专门用于Web页制作的编程语言， Web页制作的编程语言 识语言）是一种专门用于Web页制作的编程语言， 用来描述超文本各个部分的内容， 用来描述超文本各个部分的内容，告诉浏览器如 何显示文本，怎样生成与别的文本或图像的链接 何显示文本， 点。