1、第五课 为网页加入文字,课前导读 课堂讲解 上机实战 课后练习,课前导读,基础知识 重点知识,基础知识,插入普通文本、特殊文本、水平线和时间的方法，项目列表的建立方法。,重点知识,文本格式化的方法。,课堂讲解,插入文本 格式化文本 项目列表,插入文本,普通文本 特殊文本 在字符之间添加空格 水平线 日期,文本是网页制作的核心内容，Dreamweaver MX 2004允许通过以下方式在Web页中添加文本：直接将文本输入到页面中、从其他文档复制和粘贴文本或从其他应用程序中拖放文本。能够合并到Web页的常见文档类型有ASCII文本文件、RTF文件和MS Office文档，用Dreamweaver可
2、以从这些文档类型中的任何一种程序取出文本，然后将文本插入到Web页中。,普通文本,普通文本是指一般的汉字或英文文本，它的插入方法十分简单，将光标直接定位到编辑窗口中要输入文字的地方，然后直接输入文字即可。也可以在其他文本编辑器中编辑文本（如Word、WPS等），然后复制该文字，打开Dreamweaver中要添加该文字的Web页面，选择编辑粘贴菜单命令即可粘贴一般的文本。但Dreamweaver不保留在其他应用程序中设置的文本格式，只可以保留换行符。如果想保留文本的格式，可以选择编辑带格式粘贴菜单命令，如果不想保留文本格式，还可选择编辑粘贴文本菜单命令。若要将Word或Excel文档的内容添加到
3、新的或现有的Web页中，具体操作如下。,（1）打开要将Word或Excel文件的内容复制到的目标Web页。（2）选择文件导入Word文档或文件导入Excel文档菜单命令。在打开的“打开”对话框中，选择要添加的文件，然后单击 按钮，Word或Excel文档的内容将出现在页面中。,特殊文本,在Dreamweaver MX 2004中，可以在文档中插入多种特殊符号，如版权复制符号、并列符、注册商标符号等。要插入特殊符号，具体操作如下。 （1）将光标定位到插入特殊字符的位置。（2）单击“插入”栏中的“文本”选项卡，如图5-1所示。（3）单击 按钮，展开如图5-2所示的“字符”下拉列表。,图5-1,图5
4、-2,（4）单击相应的选项即可在Web页面中添加相应的特殊字符，如图5-3所示。如果没有使用西欧字符，则会弹出一个警告框，提示可能有些浏览器不能正常显示这些字符，如图5-4所示。,图5-3,图5-4,（5）如果还需要输入其他的特殊字符，可以在“字符”下拉列表中选择“其他字符”选项，打开如图5-5所示的“插入其他字符”对话框。（6）单击需要的字符后再单击 按钮即可输入相应的字符，如图5-6所示。也可以选择插入HTML特殊字符菜单命令下的相应命令插入相应字符。,图5-5,图5-6,在字符之间添加空格,Dreamweaver MX 2004的HTML代码只允许字符之间包含一个空格，若要在文档中添加其
5、他空格，必须插入不换行空格，也可以设置一个在文档中自动添加不换行空格的参数选择。 插入不换行空格 设置添加不换行空格的参数,插入不换行空格,插入不换行空格，可执行如下操作之一。 在“插入”栏的“文本”选项卡中，单击“字符”按钮，在下拉列表中选择“插入不换行空格”选项。 选择插入HTML特殊字符不换行空格菜单命令。 按【Ctrl+Shift+空格键】键输入。 将输入法切换到全角状态再按空格键。,设置添加不换行空格的参数,设置添加不换行空格的参数，具体操作如下。（1）选择编辑首选参数菜单命令。（2）在“分类”列表的“常规”选项中选中 复选框。（3）单击 按钮保存即可。,水平线,水平线对于信息的组织
6、很有用。在页面上，可以使用一条或多条水平线以可视方式分隔文本和对象。 创建水平线 修改水平线,创建水平线,（1）在“文档”窗口中，将插入点放在要插入水平线的位置。（2）执行以下操作之一。 选择插入HTML水平线菜单命令； 在“插入”栏的“HTML”选项中单击“水平线”按钮 。,修改水平线,（1）在“文档”窗口中，选择要修改的水平线。（2）选择窗口属性菜单命令，打开如图5-7所示的属性面板，然后根据需要对属性进行设置。也可以在图形软件中制作一些矩形条后用插入图形的方法插入到Web页面中，用这种方法做成的水平线更加丰富多彩。,图5-7,日期,Dreamweaver提供了一个方便的日期对象，该对象使
7、可以以任何喜欢的格式插入当前日期（包含或不包含时间都可以），并在每次保存文件时都自动更新该日期。将当前日期插入到文档中的具体操作如下。 （1）在“文档”窗口中将插入点放在要插入日期的位置。（2）执行下列操作之一。,“插入日期”对话框中显示的日期和时间不是当前日期，也不反映访问者查看站点时所看到的时期/时间，它们只是说明此信息的显示方式示例。,选择插入日期菜单命令，打开如图5-8所示的“插入日期”对话框； 在“插入”栏的“常用”选项中，单击“插入日期”按钮 ，打开如图5-8所示的“插入日期”对话框。（3）在弹出的“插入日期”对话框中选择星期格式、日期格式和时间格式，如图5-8所示。（4）单击 按
8、钮即可插入日期，最终效果如图5-9所示。如果选中了 复选框，则在日期格式插入到文档中后可以对其进行编辑，方法是单击已设置格式的日期文本，然后在属性面板中单击 按钮，接着在打开的“插入日期”对话框中重新进行设定即可。,图5-8,图5-9,如果希望在每次保存文档时都更新插入的日期，可选中 复选框。如果希望日期在插入后变成纯文本并永远不自动更新，请取消选择该选项。,格式化文本,Dreamweaver中的文本格式设置与使用标准字处理程序类似。可以为文本块设置默认格式化样式（段落、标题 1、标题 2等），更改所选文本的字体、大小、颜色和对齐方式，或者应用文本样式（如粗体、斜体、等宽字体和下划线等）。对字
9、体的特性进行设置一般有属性面板法和菜单命令两种方法，使用菜单命令时，只需要选择“文本”菜单下的相应命令，然后进行具体的设置即可。下面对制作中最常用的“文本”属性面板法进行介绍。“文本”属性面板如图5-10所示。,“文本”属性面板中各选项含义及设置方法如下。 格式 样式 粗体 斜体 字体 大小 颜色 对齐方式 链接,图5-10,格式,设置所选文本（一般是标题文本）的段落样式。“段落”是应用标签的默认格式，“标题 1”添加标签，各具体选项如图5-11所示，设置该选项可以将所选的文本设置成各种标题。标题号越小，字体越大。要设置字体的“格式”属性，只需在“格式”下拉列表中选择相应的选项即可，其效果如图
10、5-12所示。,图5-11,图5-12,样式,显示当前应用于所选文本的类样式。如果没有对选定内容应用过任何样式，则弹出式菜单中显示“无”；如果已对选定内容应用了多个样式，则弹出式菜单为空。没建立样式的“样式”列表框如图5-13所示，建立了样式的“样式”列表框如图5-14所示，应用了“样式”的文本效果如图5-15所示。其他具体的内容将在第12课讲解。,使用“样式”列表框可执行以下操作。 选择要应用于选定内容的样式即可将该样式应用于所选文本； 选择“无”选项可删除当前选定的样式，即所选文本不应用任何样式； 选择“管理样式”将打开“样式”对话框。利用“样式”对话框可以创建新样式、删除或编辑现有样式、
11、附加外部样式表。,图5-14,图5-13,图5-15,粗体,根据在“首选参数”对话框的“常规”选项中设置的样式参数选择，将或标签应用于选定的文本，即对所选文本加粗。单击 按钮即可设置“加粗”设置，再次单击 按钮可取消“加粗”设置。,斜体,根据在“首选参数”对话框的“常规”选项中设置的样式参数选择，将或标签应用于选定的文本，即对所选文本进行倾斜设置。选中 按钮即可将所选的文本应用“倾斜”。再次 单击 按钮可取消“倾斜”设置。,字体,在“字体”下拉列表框中可以对所选的文本进行字体设置，默认情况下中文字体是“宋体”。要设置文本的“字体”，只需单击“字体”下拉列表，然后在列表中选择一种字体即可。字体列
12、表中每一选项中包括多种字体，各种字体之间用“，”将其分隔，其含义是浏览者的浏览器中如果没有这种字体，则用“，”后面的字体进行显示，以此类推。因为全球网络很多，各的浏览器不尽相同，且各浏览器中的字体也不同，如果浏览者浏览器中没有网页中指定的字体，则不能正常显示该页面，所以，编辑一个字体列表是十分有必要的。可以对字体列表进行编辑，具体操作如下。,（1）选择“字体”下拉列表中的“编辑字体列表”选项，打开“编辑字体列表”对话框，如图5-16所示。（2）在如图5-16所示的对话框中，Dreamweaver自动选中“字体列表”中“在以下列表中添加字体”选项（如果没有选中该选项，也可以单击 按钮来添加），这
13、时可以在“可用字体”列表框中选择需要的字体，然后单击 按钮将其所选字体添加到左侧的“选择的字体”列表中。如果要添加多个，重复操作即可，如图5-17所示。,图5-17,图5-16,如果不想要“选择的字体”列表中的某种字体，可以选中该字体，然后单击 按钮将其删除，如图5-18所示。如果要调整“字体列表”中各项的排列顺序，可以选中要调整的字体列表，然后单击“向上移一项”按钮 或“向下移一项”按钮 ，如图5-19所示。如果想删除“字体列表”中某一项字体列表，则选中要删除的字体列表后单击 按钮即可。（3）设置好后，单击 按钮即可完成字体列表的编辑。,图5-19,图5-18,大小,通过“文本”属性面板，还
14、可对所选文本进行字体大小的设置。在“大小”下拉列表中选择相应的选项，在后面的“单位”下拉列表中选择相应的度量单位即可设置所选文本的字体大小。字体的度量单位有像素（px）、厘米（cm）等，可以根据具体情况进行选择，但一般都用像素。,颜色,通过单击 按钮，在弹出的颜色调色板中可以设置所选文本的字体颜色，或直接在 按钮后的文本框中输入颜色的英文名或“#00ff00”形式的颜色代码，也可以设置文本的颜色。“#00ff00”形式的颜色代码是RGB颜色，必须以“”字符开头。,对齐方式,下面对文本段落进行对齐设置。在Dreamweaver MX 2004的“文本”属性面板中提供了左对齐、居中对齐、右对齐和两
15、端对齐4种对齐方式，其设置方法如下。（1）选中要进行对齐设置的文本。 （2）单击“文本”属性面板中相应的对齐方式按钮，如图5-20所示。（3）再次单击相应按钮可以取消对齐方式的设置。,进行文本对齐设置时，只能对整个文本块设置对齐方式，而不能只对段落中的部分文本进行设置。,图5-20,链接,除了上述的字体格式化外，还可以对所选的文本建立超级链接，具体操作如下。 （1）选中要建立链接的文本。（2）单击“文本”属性面板“链接”文本框后的 按钮，在打开的“选择新文件”对话框中选择要链接的文件，这里选择“index.html”（即首页），同时在“相对于”下拉列表框中选择相应的选项，如图5-21所示。,（
16、3）单击 按钮返回到Dreamweaver编辑窗口，新建链接地址出现在“链接”后的文本框中，同时，编辑窗口中的文本显示为蓝色，且加上了下划线，如图5-22所示。,链接有相对链接和绝对链接两种，根据所链接对象的不同分为文档链接、图像链接、锚链接、热区链接、空链接脚本链接等。一般都采用相对链接，可使用基于文档的路径（如：contents.htm）或基于根目录的路径（如：/pic/bg.gif）。,图5-21,图5-22,（4）按【F12】键在IE浏览器中浏览，当鼠标移动到该链接上面时，会变成手形（如图5-23所示），单击它则可以在当前窗口中打开该文本所链接的页面，如图5-24所示。,图5-23,图
17、5-24,在Dreamweaver MX 2004中还可以建立命名锚记的链接，也就是锚链接。使用命名锚记的链接可以跳转至文档内的特定位置。建立锚链接分为创建命名锚记和创建到该命名锚记的链接两部分。创建命名锚记的具体操作如下。 （1）在“文档”窗口的“设计”视图中，将插入点放在需要命名锚记的地方。（2）执行下列操作之一。,选择插入命名锚记菜单命令； 按下【Ctrl+Alt+A】键； 在“插入”栏的“常用”选项中，单击“命名锚记”按钮 。（3）在打开的“命名锚记”对话框的“锚记名称”文本框中，输入锚记名称，如图5-25所示，并单击 按钮，锚记标记出现在插入点处，如图5-26所示。,图5-25,图5
18、-26,创建到该命名锚记的链接的具体操作如下。 （1）选择要创建命名锚记的文本或图像。（2）在属性面板的“链接”文本框中，输入一个数字符号“#”和锚记名称。 若要链接到当前文档中名为“top”的锚记，则输入“#top”，如图5-27所示。 若要链接到同一文件夹内其他文档中的名为“top”的锚记，则输入“index.html#top”形式的锚记引用。,（3）按【F12】键，在IE浏览器中单击“返回顶部”链接，则返回到页面顶部（命名锚记处），如图5-28所示。若要使用指向文件的方法链接到命名锚记，具体操作如下。（1）打开含有所需命名锚记的文档。（2）在“文档”窗口的“设计”视图中，选择要从其创建链
19、接的文本或图像（如果这是其他打开文档，则必须切换到该文档）。（3）执行下列操作之一。,单击属性面板“链接”文本框右侧的“指向文件”按钮， 然后将其拖到要链接到的锚记上（可以是同一文档中的锚记，也可以是其他打开文档中的锚记）； 在“文档”窗口中，按住【Shift】键进行拖动，将所选文本或图像拖动到要链接到的锚记（可以是同一文档中的锚记，也可以是其他打开文档中的锚记）。,图5-27,图5-28,利用“文本”属性面板的“链接”功能，还可以创建电子邮件链接。在浏览器中单击电子邮件链接，该链接打开一个新的空白邮件窗口（使用的邮件程序跟浏览者的计算机环境有关）。在电子邮件消息窗口中，“收件人”文本框会自动
20、更新为显示电子邮件链接中指定的地址。具体操作如下。 （1）在“文档”窗口的“设计”视图中，将插入点置于希望出现电子邮件链接的位置，或者选择要作为电子邮件链接的文本或图像。（2）执行下列操作之一插入该链接：,选择插入电子邮件链接菜单命令； 在“插入”栏的“常用”选项中，单击“插入电子邮件链接”按钮 。 （3）打开“电子邮件链接”对话框，如图5-29所示。 （4）在“文本”文本框中输入显示在Web页面中的链接文本，如“与我联系”，如图5-30所示。 （5）在“E-Mail”文本框中输入要链接到的电子邮箱地址，如“”，如图5-30所示。 （6）单击 按钮，其效果如图5-31所示。,图5-29,图5-
21、30,图5-31,也可以使用“文本”属性面板创建电子邮件链接，具体操作如下。 （1）在“文档”窗口的“设计”视图中选择要建立电子邮件链接的文本或图像，如“与我联系”。 （2）在属性面板的“链接”文本框中，输入“mailto:”，然后在它后面输入电子邮件地址，如“mailto:”，如图5-31所示，在IE浏览器中单击该链接的显示效果如图5-32所示。,图5-32,项目列表,有序列表 无序列表 定义列表 用现有文本创建列表 创建嵌套列表 列表属性设置,在文档窗口中，可以用现有文本或新文本创建有序列表（编号列表）、无序列表（项目列表）及定义列表。列表可以嵌套，嵌套列表是包含在其他列表中的列表。,有序
22、列表,有序列表又称为编号列表，是有一定排列顺序的列表，一般前面有数字前导字符，也可以是阿拉伯数字、英文字母、罗马数字等符号。创建有序列表的具体操作如下。 （1）在Dreamweaver文档中，将插入点放在要添加有序列表的位置。（2）然后执行下列操作之一。,单击属性面板中的“编号列表”按钮 ； 选择文本列表编号列表菜单命令。（3）输入列表项文本，然后按【Enter】键，下一个数字前导字符自动出现在新行的前面，如图5-33所示。（4）重复第3步操作直到完成整个编号列表的创建。（5）按两次【Enter】键完成整个列表的创建。,图5-33,无序列表,无序列表又称为项目列表，是一系列无顺序级别关系的项目
23、文本组成的列表，一般前面是用项目符号作为前导字符。创建无序列表的具体操作如下。 （1）在Dreamweaver文档中，将插入点放在要添加无序列表的位置。（2）然后执行下列操作之一。 单击属性面板中的“项目列表”按钮 ； 选择文本列表项目列表菜单命令。,指定列表项的项目符号前导字符出现在文档窗口中。 （3）输入列表项文本，然后按【Enter】键，下一个项目前导字符自动出现在新行的前面，如图5-34所示。（4）重复第3步操作直到完成整个编号列表的创建。（5）按两次【Enter】键完成整个列表的创建。,图5-34,定义列表,定义列表不使用项目符号或数字这样的前导字符，通常用在词汇表或说明书中。创建定
24、义列表的具体操作如下。 （1）在Dreamweaver文档中，将插入点放在要添加定义列表的位置。（2）选择文本列表定义列表菜单命令。,（3）输入列表项文本，然后按【Enter】键，如图5-35所示。（4）重复第3步操作直到完成整个编号列表的创建。（5）按两次【Enter】键完成整个列表的创建。,图5-35,用现有文本创建列表,具体操作如下。 （1）选择一系列段落组成一个列表。 （2）单击属性面板中的“项目列表”按钮 或“编号列表”按钮 ，或选择文本列表菜单命令，然后在下一级菜单中选择所需的列表类型（“项目列表”、“编号列表”或“定义列表”）。（3）在编辑窗口中进行编辑，完成后按两次【Enter
25、】键。,创建嵌套列表,创建嵌套列表的具体操作如下。 （1）选择要嵌套的列表项。 （2）单击属性面板中的“缩进”按钮 ，或选择文本缩进菜单命令。Dreamweaver自动缩进文本并创建一个单独的列表，该列表具有原始列表的HTML属性，如图5-36所示。 （3）按照以上列表的创建方法，对缩进的文本应用新的列表类型或样式。完成的效果如图5-37所示。,图5-36,图5-37,列表属性设置,使用“列表属性”对话框可以设置整个列表或个别列表项的外观，如设置编号样式、重置计数、设置个别列表项或整个列表的项目符号样式选项。 设置整个列表的列表属性 设置列表项的列表属性,设置整个列表的列表属性,具体操作如下。
26、（1）在“文档”窗口中，创建至少一个列表项。新样式将自动应用于添加到列表的其他项。（2）将插入点放到列表项的文本中，然后选择文本列表属性菜单命令打开“列表属性”对话框，如图5-38所示。（3）在打开的“列表属性”对话框中，设置要用来定义列表的选项，如图5-39所示。,列表类型：指定列表属性； 列表项目：指定列表中的个别项。使用弹出式菜单选择项目符号、编号、目录或菜单列表。根据所选的“列表类型”，对话框中将出现不同的选项； 样式：确定用于编号列表或项目列表的编号、项目符号的样式。所有列表项都将具有该样式，除非为列表项指定新样式； 开始计数：设置第一个编号列表项的值。（4）单击 按钮确定设置项并关
27、闭对话框，最终效果如图5-40所示。,图5-40,图5-39,图5-38,设置列表项的列表属性,具体操作如下。 （1）在“文档”窗口中，将插入点放在要格式化的列表项的文本中。（2）选择文本列表属性菜单命令。（3）在打开的“列表属性”对话框的“列表项目”下拉列表中，设置要用来定义列表项的选项：,新建样式：指定所选列表项的样式。“新建样式”下拉列表中的样式与“列表类型”下拉列表中显示的列表类型相关。例如，如果“列表项目”下拉列表显示“项目列表”，则“新建样式”下拉列表中只有项目符号选项可用。 重设计数：设置用来从其开始为列表项编号的特定数字。（4）单击 按钮确定设置选项并关闭对话框。,上机实战,在
28、本课的上机实战中，将在已有基本框架的“校园青春”网站的首页页面中添加一些文本、项目列表，并对它们进行设置，如缩进、加粗、倾斜、大小、颜色等，最终效果如图5-41所示。,图5-41,下面进行“校园青春”网页页面的制作。具体操作如下。（1）在Dreamweaver MX 2004的编辑窗口中，打开如图5-42所示的“校园青春”网站的首页页面。 （2）在如图5-42所示的“标题”部分中输入“热点追踪”的标题，如“北京成人高招新政策 专升本报名程序有调整”。 （3）选中“标题”中的文本，在“文本属性”面板的“格式”下拉列表中选择“标题 1”选项，设置该文本为“标题 1”文本。选择文本对齐居中对齐菜单命
29、令，其效果如图5-43所示。,图5-42,（4）在“文本内容”部分输入相应的内容，如图5-44所示。（5）将光标定位到“今年”前面，按【Shift+Enter】键，将输入法切换到全角状态再按两次空格键以设置文本首行缩进。将光标定位到“专升本报名”前面，按【Enter】键以便与上一段间空一行，将输入法切换到全角状态再按两次空格键以设置文本首行缩进。；再将光标定位到“据悉”前面，按【Enter】键，将输入法切换到全角状态再按两次空格键以设置文本首行缩进，效果如图5-45所示。,图5-43,图5-44,（6）在“新闻列表”中输入各条教育新闻内容，如图5-46所示。（7）选择“新闻列表”中的所有内容，
30、单击“文本”属性面板中的“编号列表”按钮 ，再选中“IT认证培训考试”和“学历教育最新动态”字段，单击“文本”属性面板中的“文本缩进”按钮 ，最后单击“文本”属性面板中的“项目列表”按钮 。对其他段落进行相应设置，设置完成后的效果如图5-47所示。,图5-45,（8）将光标定位到“版权信息”中，输入相应的版权信息，如图5-48所示。（9）将光标定位到“Copyright”字符后，在“插入栏”的“文本”选项卡中单击“字符”下拉列表中的 按钮，插入版权符号；选中“版权所有”字符，在“文本”属性面板的“地址”文本框中输入“mailto:”完成电子邮件链接，效果如图5-49所示。至此，文本的输入及格式
31、化全部完成，其最终效果如图5-41所示。,图5-46,图5-47,图5-48,图5-49,在创建一个页面时，可以先对整个页面进行布局，然后再向页面中填入各种内容。网页布局的方法很多，主要有表格布局、层布局和框架布局3种方式。,课后练习,填空题 判断题 问答题 上机操作题,填空题,（1）列表有 、 和 3种。（2）段落对齐有左对齐、右对齐、 和4种方式。 （3）“文本”属性面板中的 图标可以对所选文本进行 设置，用 图标可以对所选文本进行 设置。,居中对齐,有序列表,定义列表,倾斜,两端对齐,无序列表,加粗,判断题,（1）Dreamweaver MX 2004中只能进行无格式文本粘贴。 （ ） （2）建立锚链接分为创建命名锚记和创建到该命名锚记的链接两部分。 （ ） （3）对水平线进行颜色设置后只能在浏览器中才能看到颜色显示效果。 （ ）,问答题,（1）如何在Web页面中添加多个空格？ （2）如何添加和删除字体列表项中的字体种类？ （3）如何更改字体列表的顺序？,参考5.1.1节第1部分,参考5.1.2节,参考5.1.2节,上机操作题,根据本课所学内容，请读者自己创建一个Web页面，在文档中输入自已的简历，并根据自己的想法添加字体列表、并设置字体的大小、颜色及段落对齐方式。,参考本课相关部分。,
