网页设计与制作案例教程-电子教案6.ppt

1、第5章 文本操作,网页上的信息大多都是通过文字来表达的，文字是网页的主体和构成网页最基本的元素，它具有准确快捷地传递信息、存储空间小、易复制、易保存、易打印等优点，其优势很难被其他元素所取代，制作网页时，文本的输入与编辑占了制作工作的很大部分。 本章主要学习文本的各项操作。通过编辑网页文本、对网页文本进行格式化处理，使网页内容更加丰富，网页布局更加美观。,课程引导,知识技能目标,（1）学会在网页中输入文本与编辑文本，掌握输入空格和实现文本换行的方法。 （2）学会在网页中插入水平线和日期。 （3）掌握网页文本格式化操作。,网页浏览效果展示,本章所制作的网页“02.html”浏览效果如图所示。,图

2、5-1网页的浏览效果,本章操作任务,（1）打开“长沙世界之窗”网站文件夹“02文本操作”中的网页02.html，然后在该网页中输入一段文字。 （2）利用按键方式输入一个或多个空格，利用“插入”工具栏插入“不换行空格”。,（3）利用按键方式实现文本换行，利用菜单插入“换行符”。 （4）在标题与正文之间插入一条水平线。 （5）在最后一行插入日期，且要求每次保存网页时自动更新日期。 （6）设置网页中文本的格式。,5.1网页中输入文本,打开“长沙世界之窗”网站文件夹“02文本操作”中的网页02.html，然后在该网页中输入一段文字。利用按键方式输入一个或多个空格，实现文本换行。,（1）用鼠标单击网页编

3、辑窗口中的空白区域，窗口中随即出现闪动的光标，标识输入文字的超始位置。 （2）选择适当的输入法输入文字，输入了一行文字作为页面文字的标题。,1输入文字,2输入文本空格,输入法切换到半角状态，按空格键只能输入一个空格。如果需要输入多个连续的空格可以通过以下几种方法来实现： （1）将输入法切换到中文全角状态。 （2）直接按“Ctrl+Shift+Space”组合键。 （3）在“文本”工具栏，选择【不换行空格】命令，可以插入多个连续的空格。,3实现文本换行,输入多行文本，要实现换行，可以按Enter键或者按ShiftEnter组合键来实现。按Enter键，换行的行距较大，按ShiftEnter组合键

4、，换行的行距较小。,网页中输入的文本与Word一样，也能进行编辑，常见的文本编辑操作有： （1）拖动鼠标选中一个或多个文字、一行或多行文本，也可以选中网页中的全部文本。 （2）按BackSpace键或Delete键实现删除文本操作。,5.2网页中编辑文本,（3）将光标移动到需要插入文本的位置，输入新的文本。 （4）实现复制、剪切、粘贴等操作。 （5）实现查找与替换操作。 （6）实现撤消或重做操作。,（1）通过菜单【插入】【HTML】【特殊字符】插入 先将光标放置到需要插入特殊字符的位置，然后展开菜单【插入】【HTML】【特殊字符】，在【特殊字符】的级联菜单中选择需要插入的特殊字符“换行符”。,

5、5.3插入相关文本要素,5.3.1插入特殊字符,（2）通过“文本”插入工具栏插入 先在Dreamweaver 8的“插入”工具栏中选择“文本”，显示“文本”插入工具栏。 将光标放置到需要插入特殊字符的位置，然后单击“文本”插入工具栏最右边的按钮，弹出快捷菜单，在快捷菜单中选择所需插入的特殊字符“不换行空格”即可插入到网页中。,5.3.2插入文本列表,在网页中插入文本列表可以使文本内容显得更加工整、直观。Dreamweaver 8中有两种类型：项目列表和编号列表。 设置项目列表的操作过程如下： （1）显示“文本”插入工具栏。 （2）输入多行文本，每一行必须按Enter键换行。 （3）选中需要设置

6、成项目列表的文本。,（4）在“文本”插入工具栏中单击“项目列表”按钮，则选中的文本会被设置成项目列表，并且项目符号为默认的列表标志，也就是圆点。 （5）选中已有的项目列表其中的一项，然后单击属性面板的【列表项目】按钮，弹出“列表属性”对话框。在对话框中“列表类型”下拉列表框中选中“项目列表”，在“样式”下拉列表框中选择“正方形”，则选中列表的列表标志将转换成正方形。 （6）保存网页文档，且浏览网页。,在标题与正文之间插入一条水平线，要求“对齐”方式设置为“居中对齐”，并且给水平线设置阴影效果。具体操作过程如下： （1）将“插入”工具栏切换到“HTML”类型。 （2）将光标放置到标题最后一个字符

7、的右边。,5.3.3插入水平线,（3）单击HTML插入工具栏的“水平线”按钮，即可向网页中标题与正文之间插入一条水平线。 （4）在文档中单击选中刚插入的水平线。 （5）保存网页文档，浏览网页。,在01.html文档的最后一行插入形式如“Friday, 2006-07-14 9:47 AM”所示的日期，且要求每次保存网页时自动更新日期。具体操作过程如下： （1）切换到“常用”插入工具栏。 （2）按Enter键，添加一空行，将光标放置在空行与正文对齐的最左端。,5.3.4插入时间,（3）单击菜单【插入】【日期】，或者单击“常用”插入栏的【日期】按钮，将弹出 “插入日期”对话框。 （4）在“插入日期

8、”对话框中，“星期格式”下拉表框中选取“Thursday,”，“日期格式”选取“1974-03-07”，在“时间格式”下拉列表框选取“10:18 PM”，选中“储存时自动更新”复选框，然后单击【确定】按钮，最后生成的日期效果为“Friday, 2006-07-14 9:47 AM”的形式。 （5）保存插入的日期，且浏览网页。,在Dreamweaver 8编辑窗口中，单击【窗口】【属性】命令可以打开属性面板，然后用鼠标选中要格式化的文本，此时属性面板上显示的就是当前文字的属性。,5.4文本的格式化,5.4.1文本属性面板,对网页02.html中的文本按以下要求设置其格式： （1）将网页02.ht

9、ml中标题“欢迎您光临长沙世界之窗”格式设置为“标题1”，字体设置为“隶书”，大小设置为“36”，文字颜色设置为“#0000FF”，且要求水平居中。 （2）将网页中标题以下的正文，字体设置为“楷体_GB2321”，大小设置为“16”。 （3）插入的日期字体设置为“宋体”，大小设置为“18”，文字颜色设置为“#FF6600”，且要求水平居中。,5.4.2设置网页中文本的格式,设置网页文本格式的具体过程如下： （1）选中标题“欢迎您光临长沙世界之窗”。 （2）在属性面板的“格式”下拉列表框中选择“标题1”。,（3）在“字体”列表中选择“隶书”，在“大小”列表中选择“36”，在“颜色”文本框输入“#

10、FF6600”或者单击颜色选取按钮，打开“颜色选择器”自行选择一种合适的颜色即可。,（4）单击“居中对齐”按钮，使标题居中对齐。 （5）保存文本的格式设置。, 课堂实践 ,（1）输入文本 打开“课堂实践”网站中文件夹“02文本操作”中的网页文档“02.html”，输入标题“湘江谷”，然后输入正文内容。这些文字内容存储在文件夹“02文本操作”中子文件夹“text”的文本文件“02.txt”中。,1操作要求,（2）插入一条“水平线”和日期。 （3）设置“主要景点”为列表格式。,（4）设置文本格式 将网页02.html中标题“湘江谷”格式设置为“标题1”，字体设置为“隶书”，大小设置为“36”，文字颜色设置为“aqua”，且要求水平居中。,将网页中标题以下的正文，字体设置为“华文行楷”，大小设置为“16”。 插入的日期字体设置为“楷体_GB2321”，大小设置为“18”，文字颜色设置为“#FF6600”，且要求水平居中。,2效果展示,课堂实践网页“02.html”的浏览效果如图所示。,图5-17 文本操作课堂实践项目展法,3制作要点提示,（1）插入水平线和日期利用插入工具栏或者插入菜单完成。 （2）设置文本格式利用“属性”面板完成