Dreamweaver课件第2章网页文本操作2.ppt

1、第二章第二章 文本与文档文本与文档o本章学习要点：n网页文档的基本操作网页文档的基本操作n网页文档的属性设置网页文档的属性设置n插入普通文本、特殊文本插入普通文本、特殊文本n网页文本的属性设置网页文本的属性设置n插入水平线和时间插入水平线和时间n项目列表的建立方法项目列表的建立方法n移动文字的制作方法移动文字的制作方法插入文本插入文本o普通文本普通文本 o特殊文本特殊文本 o在字符之间添加空格在字符之间添加空格o上、下标的制作上、下标的制作o水平线水平线 o日期日期 文 本 是 网 页 制 作 的 核 心 内 容，文 本 是 网 页 制 作 的 核 心 内 容，Dreamweaver MX 2

2、004Dreamweaver MX 2004允许通过以下方式在允许通过以下方式在WebWeb页中添加文本：直接将文本输入到页面页中添加文本：直接将文本输入到页面中、从其他文档复制和粘贴文本或从其他中、从其他文档复制和粘贴文本或从其他应用程序中拖放文本。能够合并到应用程序中拖放文本。能够合并到WebWeb页的页的常见文档类型有常见文档类型有ASCIIASCII文本文件、文本文件、RTFRTF文件文件和和MS OfficeMS Office文档，用文档，用DreamweaverDreamweaver可以从可以从这些文档类型中的任何一种程序取出文本，这些文档类型中的任何一种程序取出文本，然后将文本插

3、入到然后将文本插入到WebWeb页中。页中。普通文本普通文本 普通文本是指一般的汉字或英文文本，将光标普通文本是指一般的汉字或英文文本，将光标直接定位到编辑窗口中要输入文字的地方，然后直直接定位到编辑窗口中要输入文字的地方，然后直接输入文字即可插入。接输入文字即可插入。也可在其他文本编辑器中编辑文本（也可在其他文本编辑器中编辑文本（WordWord、WPSWPS等），然后复制该文字，打开要添加该文字的等），然后复制该文字，打开要添加该文字的WebWeb页面，选择页面，选择 编辑编辑 粘贴粘贴 命令即可粘贴一般的文命令即可粘贴一般的文本。但本。但DreamweaverDreamweaver不保留

4、在其他应用程序中设置不保留在其他应用程序中设置的文本格式，只可以保留换行符。如果想保留文本的文本格式，只可以保留换行符。如果想保留文本的格式，可以选择的格式，可以选择 编辑编辑 带格式粘贴带格式粘贴 命令，如命令，如果不想保留文本格式，还可选择果不想保留文本格式，还可选择 编辑编辑 粘贴文本粘贴文本 命令。命令。特殊文本特殊文本 在在Dreamweaver MX 2004Dreamweaver MX 2004中，可以在文档中，可以在文档中插入多种特殊符号，如版权复制符号、并中插入多种特殊符号，如版权复制符号、并列符、注册商标符号等。要插入特殊符号，列符、注册商标符号等。要插入特殊符号，具体操作

5、如下。具体操作如下。（1 1）将光标定位到插入特殊字符的位置。）将光标定位到插入特殊字符的位置。（2 2）单击）单击“插入插入”栏中的栏中的“文本文本”选项卡，选项卡，如如图图3-13-1所示。所示。（3 3）单击）单击 按钮，展开如按钮，展开如图图3-23-2所示的所示的“字符字符”下拉列表。下拉列表。图图3-13-1图图3-23-2 （4 4）如果还需要输入其他的特殊字符，）如果还需要输入其他的特殊字符，可以在可以在“字符字符”下拉列表中选择下拉列表中选择“其他字符其他字符”选项，打开如选项，打开如图图3-33-3所示的所示的“插入其他字符插入其他字符”对话框。对话框。（5 5）单击需要的

6、字符后再单击）单击需要的字符后再单击 按按钮即可输入相应的字符，如钮即可输入相应的字符，如图图3-43-4所示。所示。也可以选择也可以选择 插入插入 HTMLHTML 特殊字符特殊字符 菜单命令下的相应命令插入相应字符。菜单命令下的相应命令插入相应字符。图图3-33-3图图3-43-4在字符之间添加空格在字符之间添加空格 Dreamweaver MX 2004Dreamweaver MX 2004的的HTMLHTML代码只代码只允许字符之间包含一个空格，若要在文允许字符之间包含一个空格，若要在文档中添加其他空格，必须插入不换行空档中添加其他空格，必须插入不换行空格，也可以设置一个在文档中自动添

7、加格，也可以设置一个在文档中自动添加不换行空格的参数选择。不换行空格的参数选择。o插入不换行空格插入不换行空格 o设置添加不换行空格的参数设置添加不换行空格的参数 插入不换行空格插入不换行空格 插入不换行空格，可执行如下操作之一。插入不换行空格，可执行如下操作之一。o在在“插入插入”栏的栏的“文本文本”选项卡中，单击选项卡中，单击“字符字符”按钮，在下拉列表中选择按钮，在下拉列表中选择“插入不插入不换行空格换行空格”选项。选项。o选择选择 插入插入 HTMLHTML 特殊字符特殊字符 不换行空不换行空格格 菜单命令。菜单命令。o按按【Ctrl+Shift+Ctrl+Shift+空格键空格键】键

8、输入。键输入。o将输入法切换到全角状态再按空格键。将输入法切换到全角状态再按空格键。设置添加不换行空格的参数设置添加不换行空格的参数 设置添加不换行空格的参数，具体操作设置添加不换行空格的参数，具体操作如下。如下。（1 1）选择）选择 编辑编辑 首选参数首选参数 菜单命令。菜单命令。（2 2）在）在“分类分类”列表的列表的“常规常规”选项中选项中选中选中 复选框。复选框。（3 3）单击）单击 按钮保存即可。按钮保存即可。添加上、下标的方法o利用标签选择器可以实现上、下标的插入 方法：在快速插入面版中找到 “标签选择器”htmlsup点击“插入”后，输入上标内容，确定即可。注：下标sub的插入方

9、法同上。水平线水平线 水平线对于信息的组织很有用。在页面上，水平线对于信息的组织很有用。在页面上，可以使用一条或多条水平线以可视方式分隔文可以使用一条或多条水平线以可视方式分隔文本和对象。本和对象。o创建水平线创建水平线 o修改水平线修改水平线 创建水平线创建水平线 （1 1）在）在“文档文档”窗口中，将插入点放在要插窗口中，将插入点放在要插入水平线的位置。入水平线的位置。（2 2）执行以下操作之一。）执行以下操作之一。o选择选择 插入插入 HTMLHTML 水平线水平线 菜单命令；菜单命令；o在在“插入插入”栏的栏的“HTML”HTML”选项中单击选项中单击“水平线水平线”按钮按钮 。修改水

10、平线修改水平线 （1 1）在）在“文档文档”窗口中，选择要修改的水平线。窗口中，选择要修改的水平线。（2 2）选择）选择 窗口窗口 属性属性 菜单命令，打开如图菜单命令，打开如图3-73-7所示的属性面板，然后根据需要对属性进行所示的属性面板，然后根据需要对属性进行设置。设置。也可以在图形软件中制作一些矩形条后用插也可以在图形软件中制作一些矩形条后用插入图形的方法插入到入图形的方法插入到WebWeb页面中，用这种方法做页面中，用这种方法做成的水平线更加丰富多彩。成的水平线更加丰富多彩。图图3-73-7日期日期 DreamweaverDreamweaver提供了一个方便的日期对象，该提供了一个方

11、便的日期对象，该对象使可以以任何喜欢的格式插入当前日期（包对象使可以以任何喜欢的格式插入当前日期（包含或不包含时间都可以），并在每次保存文件时含或不包含时间都可以），并在每次保存文件时都自动更新该日期。都自动更新该日期。将当前日期插入到文档中的具体操作如下。将当前日期插入到文档中的具体操作如下。（1 1）在）在“文档文档”窗口中将插入点放在要插入窗口中将插入点放在要插入日期的位置。日期的位置。（2 2）执行下列操作之一。）执行下列操作之一。o选择选择 插入插入 日期日期 菜单命令；菜单命令；o在在“插入插入”栏的栏的“常用常用”选项中，单击选项中，单击“插入日插入日期期”按钮。按钮。如果选中了

12、如果选中了 复选框，则在日期格复选框，则在日期格式插入到文档中后可以对其进行编辑，方法是单式插入到文档中后可以对其进行编辑，方法是单击已设置格式的日期文本，然后在属性面板中单击已设置格式的日期文本，然后在属性面板中单击击 按钮，接着在打开的按钮，接着在打开的“插入日期插入日期”对对话框中重新进行设定即可。话框中重新进行设定即可。如果希望在每次保存文档时如果希望在每次保存文档时都更新插入的日期，可选中都更新插入的日期，可选中“存存储时自动更新储时自动更新”复选框。如果希复选框。如果希望日期在插入后变成纯文本并永望日期在插入后变成纯文本并永远不自动更新，请取消选择该选远不自动更新，请取消选择该选项

13、。项。格式化文本格式化文本 “文本文本”属性面板中各选项含义及设置方法如下。属性面板中各选项含义及设置方法如下。o格式格式 o样式样式 o粗体粗体 o斜体斜体 o字体字体 o大小大小 o颜色颜色 o对齐方式对齐方式 o链接链接 格式格式 设置所选文本（一般是标题文本）的段落设置所选文本（一般是标题文本）的段落样式。样式。“段落段落”是应用是应用标签的默认格式，标签的默认格式，“标题标题 1”1”添加添加标签，各具体选项如标签，各具体选项如图图3-3-8 8所示，设置该选项可以将所选的文本设置成所示，设置该选项可以将所选的文本设置成各种标题。标题号越小，字体越大。各种标题。标题号越小，字体越大。

14、要设置字体的要设置字体的“格式格式”属性，只需在属性，只需在“格格式式”下拉列表中选择相应的选项即可，其效果下拉列表中选择相应的选项即可，其效果如如图图3-93-9所示。所示。图图3-83-8图图3-93-9项目列表项目列表o有序列表有序列表 o无序列表无序列表 o创建嵌套列表创建嵌套列表 有序列表有序列表 有序列表又称为编号列表，是有一定有序列表又称为编号列表，是有一定排列顺序的列表，一般前面有数字前导字排列顺序的列表，一般前面有数字前导字符，也可以是阿拉伯数字、英文字母、罗符，也可以是阿拉伯数字、英文字母、罗马数字等符号。马数字等符号。无序列表无序列表 无序列表又称为项目列表，是一系无序列

15、表又称为项目列表，是一系列无顺序级别关系的项目文本组成的列列无顺序级别关系的项目文本组成的列表，一般前面是用项目符号作为前导字表，一般前面是用项目符号作为前导字符。符。创建嵌套列表创建嵌套列表 创建嵌套列表的创建嵌套列表的具体操作如下。具体操作如下。（1 1）选择要嵌套的列表项。）选择要嵌套的列表项。（2 2）单击属性面板中的）单击属性面板中的“缩进缩进”按钮按钮 ，或选择或选择 文本文本 缩进缩进 菜单命令。菜单命令。DreamweaverDreamweaver自动缩进文本并创建一个单独的列表，该列表自动缩进文本并创建一个单独的列表，该列表具有原始列表具有原始列表的的HTMLHTML属性，如

16、属性，如图图3-103-10所示。所示。（3 3）按照以上列表的创建方法，对缩进的）按照以上列表的创建方法，对缩进的文本应用新的列表类型或样式。完成的效果如文本应用新的列表类型或样式。完成的效果如图图3-113-11所示。所示。图图3-103-10 图图3-113-11 在创建一个页面时，可以先对整个页面进行布局，然后再向页面中填入各种内容。网页布局的方法很多，主要有表格布局、层布局和框架布局3种方式。移动文字的制作o文字oBehavior（方式）nScroll:一圈一圈绕着走nSlide:只走一次nAlternate:来回走oDirection:方向oLoop:循环次数oScroll amo

17、unt:速度oScrolldelay:延时课后练习课后练习o填空题填空题o判断题判断题o问答题问答题o上机操作题上机操作题填空题填空题 （1 1）段落对齐有左对齐、右对齐、）段落对齐有左对齐、右对齐、和和 4 4种方式。种方式。（2 2）“文本文本”属性面板中的属性面板中的 图标可以对所选文本图标可以对所选文本进行进行 设置，用设置，用 图标可以对所选文本进行图标可以对所选文本进行 设置。设置。居中对齐居中对齐倾斜倾斜两端对齐两端对齐加粗加粗判断题判断题（1 1）Dreamweaver MX 2004Dreamweaver MX 2004中只能进行无格式文本。中只能进行无格式文本。（）（2 2

18、）对水平线进行颜色设置后只能在浏览器中才能看）对水平线进行颜色设置后只能在浏览器中才能看到颜色显示效。到颜色显示效。（）问答题问答题（1 1）如何在如何在WebWeb页面中添加多个空格？页面中添加多个空格？（2 2）如何添加和删除字体列表项中的字体种类？如何添加和删除字体列表项中的字体种类？（3 3）如何更改字体列表的顺序？如何更改字体列表的顺序？上机操作题上机操作题 1.1.根据本课所学内容，请读者自己创建一个根据本课所学内容，请读者自己创建一个WebWeb页面，在文档中输入自已的简历，并根据自己页面，在文档中输入自已的简历，并根据自己的想法添加字体列表、并设置字体的大小、颜色的想法添加字体

19、列表、并设置字体的大小、颜色及段落对齐方式。及段落对齐方式。要求：有上、下标的使用，有竖排文字，日期，要求：有上、下标的使用，有竖排文字，日期，水平线等水平线等 第二章 校园网站的制作o第一部分:o新建站点o网页标题o表格的使用o制作logo、特效图片o制作导航栏o建立超级链接并设置样式o层的介绍新建站点o请同学在dreamweaver中新建一站点；o在dreamweaver中打开站点；o在dreamweaver中关闭站点网页标题的设置o操作步骤：o在空白处点右键网页属性标题 输入网页的标题即可表格o插入表格；注：行数行数：定义表格行的数目。列数：列数：定义表格列的数目。表格宽度表格宽度：以像

20、素为单位或按占浏览器窗口宽度的百分比来定义该表格在浏览器中的显示宽度。边框粗细：边框粗细：指定表格边框的宽度（以像素为单位）。单元格边距：单元格边距：确定单元格边框和单元格内容之间相距的像素数。单元格间距：单元格间距：确定相邻的表格单元格之间相距的像素数。使用fireworks制作logo和特效图o新建文档的方法；o调整图象，画布大小；o图层的介绍；o选择工具；o渐变工具的介绍；o特效的添加；导航栏的制作o在单元格背景色上添加文字，形成最简单的导航；o背景图片上添加文字；o软件自带按纽；o代码实现图片翻转效果；超级链接的制作o插入超级链接；o设置超级链接文字翻转效果；（页面属性页面属性）o为超级链接文字设置css样式；o课后作业：每个同学按照课堂所讲方法，制作“电子信息分院首页”。