【Dreamweaver+ASP】【第4章 Dreamweaver的基础应用】

第4章Dreamweaver基础应用在Dreamweaver中，创建网页非常简单。用户只要熟悉Word文档的编写，就可以以所见即所得的方式，在网页中插入文本、图像、Flash及超链接等内容，从而制作出各式各样的网页。本章将详细讲解如何在网页中插入各种资源。4.1插入文本文本是网页中的基础元素。根据文本的作用，网页中的文本可以分为网页标题、普通文本和特殊字符三大类。本节将详细讲解如何插入这三类文本。4.1.1插入网页标题网页标题是整个网页的标题。它现在在浏览器的标题栏上。设置合理的标题，可以帮助读者通过标题，就区分各个网页的内容。下面讲解如何设置网页的标题。（1）启动Dreamweaver，单击【文件】|【新建】命令，打开【新建文档】对话框，选择【空白页】选项，然后在【页面类型】选项框选择【HTML】选项，在【布局】选项框中选择【无】选项，如图4.1所示。图4.1【新建文档】对话框（2）单击【创建】按钮，Dreamweaver创建一个空白的页面，如图4.2所示。·34·图4.2【设计】视图（3）单击工具栏上的【代码】按钮，切换到【代码】视图，如图4.3所示。【代码】视图中，显示了Dreamweaver自动添加的一些HTML基本代码。如果设计视图中没有打开【文档】工具栏，可以单击【查看】|【工具栏】|【文档】命令，显示【文档】工具栏，如图4.4所示。图4.3【代码】视图图4.4【文档】工具栏（4）在【标题】文本框中输入网页的标题，例如“第一个网页”。用户页可以单击【属性】面板上的【页面属性】按钮，打开【页面属性】对话框，如图4.5所示。单击【标题/编码】选项，然后在【标题】文本框中输入标题，在【编码】下拉列表框中选择【简体中文（GB2312）】选项，如图4.6所示。第3章网站的创建与管理·35·图4.5【页面属性】对话框图4.6设置标题（5）选择【文件】|【保存】命令，打开【另存为】对话框。在【文件名】文本框中输入网页名称，如test。（6）单击【保存】按钮，将网页保存到存放网页文件的文件夹中。（7）在浏览器中打开该页面，如图4.7所示。可见该网页的标题是刚才输入的标题，但是网页正文还是空的。图4.7浏览网页4.1.2插入普通文本网页中文本内容是内容表达的主要方式。根据输入方式的不同，可以分为普通文本和特殊字符。本小节首先讲解普通文本的插入。普通文本就是使用者可以在网页文档中按照文本方式直接输入的文本。操作步骤如下所示。（1）打开上一小节创建的网页，在【设计】视图中，单击页面空白处，输入文字“秋日”。（5）选中“秋日”，单击【属性】面板的【字体】下拉列表框，选择【宋体】选项。如果下列列表中没有该选项，则单击【编辑字体列表】选项，打开【编辑字体列表】对话框，添加字体，如图4.8所示。（6）单击【大小】下拉列表框，选择“24”，字体设置效果如图4.9所示。·36·图4.8编辑字体列表图4.9更改文字大小（7）单击回车键，输入其他文本，在输入文本的过程中，也可以在属性面板对字体、大小和颜色等进行设置，昀终页面如图4.10所示。（8）完成文本输入后，选择【文件】|【另存为】命令，保存网页为test1.html。（9）在浏览器中打开该文档，网页显示效果如图4.11所示。图4.10输入普通文本图4.11网页昀终效果4.1.3插入特殊字符在网页中，设计人员还经常需要插入一些特殊字符，如版权符号。这些特殊字符在HTML中以名称或数字的形式表示。例如，版权符号©表示版权声明，在HTML中用“©”表示；注册商标符号®表示注册商标声明，在HTML中用“®”表示。插入特殊符号的操作如下所示。。（1）新建一个空白文档。在【设计】视图中，单击网页空白处。第3章网站的创建与管理·37·（2）输入版权的文字，如图4.12所示。（3）将光标插入到“Copyright”之后，单击【插入】面板的【文本】标签，打开【文本】工具栏，如图4.13所示。图4.12输入版权文字图4.13【文本】工具栏（4）单击工具栏末端的倒三角按钮，选择【©版权】命令，弹出信息提示对话框。该对话框提示特殊符号是否支持，如图4.14所示。单击【确定】按钮，关闭该对话框。插入版权符号完成，如图4.15所示。图4.14【Dreamweaver】对话框图4.15插入版权符号（5）单击【代码】标签，切换到【代码】视图。可以看到版权符号的HTML代码，如图4.16所示。·38·（6）保存网页。打开该文件，昀终效果如图4.17所示。图4.16版权符号实体代码图4.17版权符号单击【文本】工具栏的倒三角按钮，选择【其他字符】命令，弹出【插入其他字符】对话框，如图4.18所示。在该对话框中，显示了Dreamweaver可以支持的特殊字符。单击所需的字符，然后单击【确定】按钮，就可以将选择的字符插入到页面。图4.18【插入其他字符】对话框4.2设置文本样式在前面小节的实例中，输入的唐诗只是采用了普通文本，而在实际的生活中，各种各样的文本需要设置不同的字体、字号、颜色、样式等，这样才能更好地、准确无误地传达文字所要表达的信息。第3章网站的创建与管理·39·4.2.1设置标题和段落格式网页中的默认存在6种标题。它们依次为标题1、标题2、标题3、标题4、标题5和标题6。使用这些标题，可以标注文本内容的不同层次。而段落格式是对整个文档进行设置，使文档更便于阅读。设置标题和段落格式需要使用属性面板的【格式】下拉列表。操作过程如下所示。（1）新建空白网页。在【设计】视图中，单击网页空白处。（2）输入几段文字，效果如图4.19所示。（3）选中第1行文本。单击【格式】下拉列表框，选择【标题1】选项。设置后的效果如图4.20所示。图4.19输入所需的文字图4.20更改为标题1格式（4）选择文字“夏天”。单击【格式】下拉列表，选择【标题2】选项，效果如图4.21所示。（5）重复以上操作，依次设置“秋天”和“冬天”的格式为标题3和标题4。昀终效果如图4.22所示。图4.21更改为标题2格式图4.22加入了标题格式的网页·40·4.2.2设置文本字号设置标题和段落格式，都是从整体的角度设置文本样式。设计人员可以具体设置文本的细节，如文本所使用的字体和字号。在Dreamweaver中，字号的大小默认的有“无”、“1-36”、“极小-极大”等。其中的数值越大字号就越大。操作步骤如下所示。（1）新建空白网页。在【设计】视图中，单击网页空白处。（2）输入几段文字，效果如图4.23所示。（3）选择文字“Office帮助的使用”文字。打开【属性】面板，在【字体】下拉列表框中，选择【宋体】选项。在【大小】下拉列表框中选择【36】选项。将文字设置为宋体，字体大小为36。（4）选中文字“以上内容都不合适，请从Web上查看更多的帮助”，设置该文字字体为宋体，字体大小为16，并单击加粗按钮。昀终页面效果如图4.24所示。图4.23插入文本图4.24文字字体调整4.2.3设置文本字体不同字体给人带来的感觉不同。在Dreamweaver中，设计人员仅仅使用了“宋体”、“黑体”等常见的字体。如果要使页面的文字更贴近网页设计者所设计的网页风格，有时候就必须要添加新的字体。要在Dreamweaver中使用新字体，必须确保该字体已经安装到Windows的字体中。安装字体的步骤如下：（1）选择需要安装字体文件，一般字体文件后缀名为.TTF。（2）复制该字体文件到系统目录中的Fonts目录下。复制过程中，系统会提示正在安装字体文件。安装完成后，就可以使用该字体了。（3）打开【属性】面板。单击【字体】下拉列表框中的【编辑字体列表】命令，打开【编辑字体列表】对话框，如图4.25所示。（4）在【可用字体】列表框中选择要添加的字体名称，如“新宋体”。单击添加字体按钮，将选定字体添加到【选择的字体】列表框中，如图4.26所示。如果要删除该字体，在【选择的字体】列表框中选择该字体，然后单击删除字体按钮。第3章网站的创建与管理·41·图4.25【编辑字体列表】对话框图4.26添加新字体（5）单击加号按钮，在【字体列表】列表框中添加一行，用以添加新的字体。如果不单击加号按钮，那么一次只能添加一个字体。单击减号按钮，可以在【字体列表】列表框中删除所选的字体。单击上三角按钮和下三角按钮，可以对字体列表的次序进行更改。（6）单击【确定】按钮，关闭当前对话框，所添加的字体已经出现在【字体】下拉列表框中。（注意：在网页中设置字体时，需要考虑用户的计算机上是否安装相应的字体。如果没有安装，将使用其他字体进行替代。所以，设置字体的时候需要考虑字体应用的普遍性。对于特殊的效果的文字，可以使用图片的形式代替文本。4.2.4设置文本颜色在网页中，文本的颜色包括文本内容的背景色和文字字体颜色。通过设置文本颜色，可以提高文本内容的视觉效果，降低阅读疲劳。默认情况下，文本的背景色为白色，文字字体颜色为黑色。下面讲解如何设置文本的颜色。（1）新建空白网页。在【设计】视图中，单击网页空白处。输入几段文字。（2）打开【属性】面板，单击【页面属性】按钮，打开【页面属性】对话框，如图4.27所示。图4.27【页面属性】对话框（3）在【背景颜色】文本框中输入“#9966CC”，在【文本颜色】对话框中输入“#000033”。注意不要漏掉其中的“＃”。用户可以单击前面的小按钮，弹出颜色选择框进行颜色选择。（4）单击【确定】按钮，关闭对话框。这时页面效果如图4.28所示。（5）选中“Office帮助的使用”文字，单击【属性】面板中的【颜色设定】按钮，弹出【选择·42·颜色】对话框，如图4.29所示。图4.28设定文字颜色效果图429【选择颜色】对话框（6）选择一个颜色。昀终网页效果如图4.30所示。图4.30整体效果4.3设置文本列表使用文本列表可以将多个短小的内容并列起来，并添加各种并列编号。这样方便用户的浏览，降低用户的视觉疲劳。本节将讲解文本列表的类型和设置方法。第3章网站的创建与管理·43·4.3.1文本列表的类型文本列表根据每段文字之间是否有先后次序，可以分为有序列表和无序列表两种。有序列表中的每段文字之间具有明确的先后关系，并列编号常常是阿拉伯数字、罗马数字和英文字母等序号。无序列表中的各段文字没有先后次序，通常使用如正方形、菱形等符号作为列表的并列编号。图4.31和图4.32显示了有序列表和无序列表。图4.31有序列表图4.32无序列表4.3.2添加文本列表当存在大量并列关系的文本内容时，使用列表可以增加文本内容的条理性。在Dreamweaver中，创建文本列表过程如下所示。（1）新建一个空白网页，输入文字内容，如图4.33所示。（2）选择下面的几个项目，然后单击【文本】|【列表】|【编号列表】命令，建立一个有序列表，如图4.34所示。·44·图4.33键入文字图4.34建立有序列表（3）在网页中输入另一段文字，如图4.35所示。（4）选中刚刚输入的文字，单击【文本】|【列表】|【项目列表】命令，将选中的文字成为项目列表，如图4.36所示。图4.35键入文字图4.36创建项目列表4.3.3设置文字列表的并列编号添加文本列表后，默认只有一种前缀。在建立项目列表之后，往往还需要设置列表的编号形式。设置操作步骤如下所示。（1）打开上一节创建的网页，将光标插入到“篮球”文字后。（2）单击【文本】|【列表】|【属性】命令，打开【列表属性】对话框，如图4.37所示。图4.37【列表属性】对话框（3）在【样式】下拉列表框中选择【小写罗马字母】选项，如果要更改开始基数，还可以在【开始计数】文本框中输入开始计数的数字。（4）单击【确定】按钮，关闭对话框。网页界面如图4.38所示。（5）将光标插入到“足球”文字后，单击【属性】面板中的【列表项目】按钮，打开【列表属性】对话框，在【样式】下拉列表框中选择【正方形】选项。（6）单击【确定】按钮，关闭对话框，页面如图4.39所示。第3章网站的创建与管理·45·图4.38更改有序列表属性图4.39更改无序列表属性4.4插入图片除了文本，网页中另外一个重要的表现元