第3章 Dreamweaver基本网页编辑第3章 Dreamweaver基本网页编辑文本、图像和多媒体对象等是组成网页的最基本元素，制作精美、设计合理的网页元素不仅可以增强网页的丰富性和观赏性，还能够提高人们浏览网页的兴趣因此，正确恰当的插入文本、图像和多媒体对象是每个网页制作者必备的基本技能3.1 在网页中添加文本和图片首先启动Dreamweaver，确保已经用站点管理器建立好了一个网站（根目录）为了制作方便，最好事先打开资源管理器，把要使用的图片收集到网站目录的images文件夹内 3.1.1 在网页中添加文本文字是构成网页的重要部分，要向 Dreamweaver 文档添加文本，可以直接在文档窗口中键入文本，也可以复制文本1.添加文本（1）直接添加文本既可在设计视图中输入，也可在代码视图中输入打开一个网页文件，进入Dreamweaver设计视图，像在其他的文字编辑程序中一样直接输入文字，如图3-1所示也可以切换到代码视图直接输入文字，如图3-2所示图3-1 设计视图下的页面效果图3-2 代码视图输入过程中换行方法：l 自动换行：在输入文本的过程中，Dreamweaver会根据当前页面设置的边距自动换行，使得文本一直保持在页边距内。

自动换行的好处在于不管浏览器窗口有多大，网页文字都将依照窗口大小自动换行，避免超出水平页面之外而需要移动滚动条浏览的情况l 利用Enter键换行（硬换行）：按Enter键，则另起一个段落，并且插入点移到隔了一个空白行的位置上在代码视图中显示为标签l 利用Shift + Enter键换行（软换行）：如果要将文字手动换行，中间又不出现空白行，可以按Shift + Enter键，其行距比直接按Enter键小在代码视图中显示为
标签其在设计视图和代码视图下的显示效果分别如图3-3、3-4所示图3-3 设计视图下的页面效果图3-4 代码视图中的、
标签在Dreamweaver中，在文本开始处直接按空格键是不会输入空格的，在文字之间按空格键可以输入半个空格如果要在网页中输入空格，可以采用以下两种方法：第一种，按住“Ctrl+Shift”键，按一次空格键，键入半个空格 第二种，将输入法由半角状态切换到在全角状态，按一次空格键，键入一个空格2）复制文本打开字处理软件中含有文本的文档，如word文档，执行“编辑”菜单中的“复制”命令然后在Dreamweaver文档窗口中，将插入点置于要添加文本的位置，执行“编辑”菜单中的“粘贴”命令，完成文本复制。

3）导入Word文档如果用户已经在Word文档中将所需的信息收集完毕，可直接将其导入到Dreamweaver中导入方法：选择“文件”|“导入”|“Word文档”命令，在“打开”对话框中选择需要导入的Word文档，单击“确定”按钮，即可完成Word文档的导入Dreamweaver“导入”功能除了能够导入Word文档外，还可以实现导入EXCEL文档、表格式数据及XML到模板等功能2、格式化文本在Dreamweaver中，可以使用文本的属性面板方便地进行文本的格式设置Dreamweaver默认的属性面板即是文本的属性面板，如图3-5所示图3-5 文本的属性面板（HTML格式）注意：如果没有显示属性面板，可以通过执行“窗口”菜单下的“属性”命令来显示它1）在属性检查器中设置HTML格式选择要设置格式的文本，打开属性检查器，单击“HTML”按钮，设置要应用于所选文本的格式选项格式”下拉列表框列出了用于设置所选文本的段落样式在代码视图中，“段落”用标签的表示，“标题1”用

图3-6 各级标题“ID”下拉列表框用于为所选内容分配ID，以表示其唯一性ID”下拉列表框中默认情况下为“无”选项类”下拉列表框用于显示当前应用于所选文本的类样式如果没有对所选内容应用过任何样式，则“类”下拉列表框中显示“无”选项如果对所选内容应用了样式，则该下拉列表框中会显示出应用于该文本的样式使用该下拉列表框可以直接为文本选择样式列表中已经存在的样式，也可选择“无”选项以删除当前所选的样式，还可选择“重命名”选项以重命名该样式或者选择“附加样式表”选项以打开一个允许向页面附加外部样式表的对话框加粗和倾斜按钮：可以使选中的文本加粗和倾斜项目列表”按钮用于为所选文本创建项目列表，又称为无序列表编号列表”按钮用于为所选文本创建编号列表，又称为有序列表删除内缩区块”和“内缩区块”按钮：用于为所选文本减少缩进或增加缩进链接”下拉列表框用于创建所选文本的超级链接创建超级链接的方法有4种:单击“浏览文件”按钮可以浏览到站点中的文件；直接输入URL；将“指向文件”按钮拖曳到“文件”面板中的文件上以完成文件的超级链接；直接拖曳“文件”面板中的文件到“链接”下拉列表框中标题”文本框用于为超级链接指定文本工具提示。

目标”下拉列表框用于指定将链接文档加载到哪个框架或窗口，它包含_blanks、 _parent、_self和_top四种情况2）在属性检查器中编辑CSS规则打开属性检查器，将光标定位在一段已经应使用了CSS规则的文本中，单击“CSS”按钮，该规则将显示在“目标规则”下拉列表框中或者直接从“目标规则”下拉列表框中选择一个规则赋予需要应用样式的文本然后，通过使用CSS属性检查器中的各个选项对该规则进行更改，如图3-7所示图3-7 文本的属性面板（CSS格式）“目标规则”下拉列表框中的选项是指在CSS属性检查器中正在编辑的规则当文本已应用了样式规则时，在页面的文本内部单击，将会显示出影响该文本格式的规则如果要创建新规则，在“目标规则”下拉列表框中选择<新CSS规则>选项，然后单击“编辑规则”按钮，在打开的“新建CSS规则”对话框中进行设置即可编辑规则”按钮用以打开目标规则的CSS规则定义对话框CSS面板”按钮是另外一种打开CSS样式面板的方法，并且在当前视图中显示目标规则的属性字体”下拉列表框用于更改目标规则的字体如果是第一次安装Dreamweaver，会发现中文字体非常少，选择字体下拉列表框中的“编辑字体列表…”项，这时弹出“编辑字体列表”对话框，如图3-8所示。

在“可用字体”选项中选择一种字体比如“黑体”，单击 按钮，然后单击“确定”按钮，就可以把“黑体”字体加入字体列表中了图3-8 “编辑字体列表”对话框“大小”下拉列表框用于设置目标规则的字体大小文本颜色”选项可以将所选颜色设置为目标规则中的字体颜色可以通过单击颜色框选择或在相邻的文本框中输入颜色值加粗和倾斜按钮：可以使选中的文本加粗和倾斜对齐方式按钮：对齐方式的作用对象是整个段落文字，而无论光标是在该段的开始处、结尾处，还是在段落中间，只要将光标插入到需对齐的段落中，单击“左对齐”按钮、“居中对齐”按钮或“右对齐”按钮时，即可实现所选择的段落对齐方式注:“字体”、“大小”、“文本颜色”、“粗体”、“斜体”和“对齐”属性始终显示当前应用文档窗口中所选内容的规则的属性，更改其中的任何一项都将影响到目标规则3.1.2 在网页中添加特殊字符有时为了满足特殊要求，需在网页中插入一些特殊字符在Dreamweaver CS5中，这些特殊字符可以通过执行“插入”菜单中的子菜单“HTML”下的“特殊字符”命令来插入可插入的字符类型如图3-9（A）所示另外，在“插入”面板的“文本”类别中单击“字符”按钮上的箭头后，如图3-9（B）所示，也可选择所需的字符，插入的字符可以为：不换行空格、货币符号（如英镑符号，日元符号等）、版权信息等。

除了可以插入图3-9显示的可插入的特殊字符外，还可以插入其他字符 （A）通过菜单插入 （B）通过工具栏插入图3-9 插入特殊字符3.1.3 在网页中添加图片与文字相比，图像更加直观、生动在网页中恰当地使用图像，能够为网页增色不少目前互联网上支持的图像格式主要有GIF、JPEG和PNG三种格式GIF格式（Graphics Interchange Format 图像交换格式）：采用无损压缩算法进行图像的压缩处理，是目前在网页设计中使用最普遍、最广泛的一种图像格式GIF格式可以高度压缩图像使其变得相当小，它在网页中大量用于动画、站点图标LOGO、广告条及网页背景图像它最多支持256种颜色，不适合用作照片级的网页图像JPEG格式（Joint Photo Expert Graphics，联合图形专家组）：是另一种在Web上应用广泛的图像格式由于它支持的颜色数几乎没有限制，因此通常用来显示照片等颜色丰富精美图像与GIF格式采用无损压缩不同，JPEG格式使用有损压缩来减小图片文件的大小PNG格式（Portable Networks Graphics，可移植的网络图形格式）：是近年来新出现的一种图像格式，它适于任何类型、任何颜色深度的图片。

该格式既融合了GIF格式透明显示的特点，又具有JPEG处理精美图像的优势，因此PNG格式很可能会取代GIF格式和JPEG格式1.插入图像在Dreamweaver中插入图像非常简单，具体操作步骤如下：1）打开网页，在“文档”窗口中将光标移到将要插入图像的位置2）单击“插入”菜单中的“图像”命令，或单击“常用”子面板上的“图像”按钮，如图3-10所示，打开“选择图像源文件”对话框，如图3-11所示图3-10 “常用”子面板上的“图像”按钮图3-11 “选择图像源文件”对话框3）在图3-11所示的对话框中选择要插入的图像文件，可以选择已存放在当前站点中的图像文件，也可以在磁盘中查找其他的图像文件，然后单击“确定”按钮，此时，弹出“图像标签辅助功能属性”对话框，如图3-12所示这里会要求用户输入替换文本，替换文本就是当用户把鼠标指针放在图片上时会显示的文字，或当这个图片无法在浏览器中显示时所出现的文字详细说明”文本框要求用户输入一个链接地址，这个地址就是对替换文本的详细说明，单击“确定”按钮，即可在网页中插入图片图3-12 “图像标签辅助功能属性”对话框注意：如果要插入的图像文件不在当前站点的文件夹中，插入时会出现一个对话框，询问是否要将这个图像文件复制到当前站点的文件夹中，通常选择“是”，这时打开“复制文件为”对话框，要求在站点中选择一个文件夹加以保存，这样可以保证网页对这个图像文件的引用。

另外一个快捷插入图片的方法需要使用到“资源”面板，在“资源”面板中会列出该站点内包含的所有GIF、JPEG和PNG文件任意选择一个图片就会在“资源”面板的上面显示出它的缩略图，并且每个图片的尺寸、大小、文件类型以及文件的完整目录都会列出来这样在选择图片文件时，就可以避免因为不能直观地看到内容而发生错误的选择，如图3-13所示图3-13 “资源”面板插人图片时只需将图片选中，然后向文档窗口拖动，在随后出现的对话框内单击“确定”按钮就可以把图片插入网页中另外一种方法是在网页中选择图片所在的位置，然后在“资源”面板中找到需要插入的图片，再单击“插入”按钮2．图像属性设置在文档中插入图像后，用鼠标单击图像，图像四周出现可编辑的缩放手柄，说明该图像被选定这时图像“属性”面板中显示出关于图像的属性信息，如图3-14所示图3-14 图像“属性”面板“ID”：用于输入。