1、第4章 编辑网页基本元素,本章要点 编辑文本 编辑图像 编辑超级链接 插入多媒体 为了使读者更好地了解和学习网页设计，本章重点介绍网页基本元素的编辑。读者需要掌握的是网页中文本和图像的编辑，超级链接的设置和创建多媒体页面。 网页的基本组成部分包括文本、图像、多媒体和超级链接。制作网页时，首先要主题鲜明，其次要有丰富的内容，才能不断地吸引浏览者进行访问。文字是页面上不可缺少的元素，网站的诉求思想、内容的表达都需要文字加以传递。同时，适当地配合一些图像，能够提高网页的欣赏性。页面上的文本和图像应用超级链接就构成了一个有机整体，实现了网络互联，这样才能够让浏览者在不同的页面间进行跳转，找到所需要的内
2、容。 4.1编辑网页文本编辑文本是最基本的网页制作技能，文字是文类文明的结晶，是网页传递信息最基本的方式。编辑和设置内容丰富、格式美观的网页文本，既可以传达网站大量的信息，又可以激发浏览者的阅读兴趣。在Deramweaver 8中可以输入普通文字，也可以插入特殊字符，设置字体大小，改变文本颜色等。4.1.1设置文本属性 1.输入文本 在Dreamweaver 8中输入文本有三种方法。,（1）直接输入法 执行“文件”“新建”命令，新建一个HTML文档，将光标定位于页面中，选择输入法，输入文字，在Dreamweaver中输入的文字可以自动换行。需要重新开始一段时，按Enter键即可。如果要缩小段落
3、间距，则可以按Shift+Enter键。 （2）剪贴板法 可以从其他的程序窗口中复制或者剪贴一些文本，然后粘贴在Dreamweaver 8的文档窗口中。如果想使用剪贴板，首先在word或其他窗口中选中需要粘贴的文本，然后按Ctrl+C组合键在剪贴板上复制文字，或者通过执行“编辑”“复制”命令，最后再切换到Dreamweaver 8窗口，按Ctrl+V组合键，将其粘贴在指定位置。 （3）导入文档法 用Word文档，输入文字并将其做成网页的形式。然后在Dreamweaver 8窗口中，执行“文件”“导入”“Word文档”命令，即可将Word文档插入页面中。 2.设置文本字体 在Dreamweave
4、r 8中可以很方便地设置文本的大小、颜色和样式等格式。使用文本的属性面板可以改变大部分格式，而且全部选项都包含与“文本”菜单命令中。 （1）编辑字体样式 在设置字体之前，首先在网页中确定要改变格式的范围，将鼠标指针置于要选择的文字之前，然后拖动鼠标经过所有备选区域，即可完成对文字的选择。如果没有选择范围，新设置的字体样式只对以后输入的文字有效。 要改变字体，首先要选择页面中的文字，然后打开文本属性面板，在鼠标面板中单击“字体”下拉列表右侧的下三角按钮，如图4-3所示。在下拉列表中提供了可供选择的字体列表。 如果在该下拉列表中找不到所需要的字体，则选择最后一项“编辑字体列表”，弹出如图4-4所示
5、的对话框。在编辑字体列表对话框中，从“可用字体”列表中选择字体，然后单击左边的添加按钮，将其添加到“选择的字体”窗格内，单击【确定】按钮，所选字体就会出现在“字体列表”中。,图4-2 首选参数对话框,图4-3 字体样式列表图4-4 “编辑字体列表”对话框,还可以给字体添加粗体、斜体、下划线、删除线等样式以改变字体的风格和修饰效果。提示：Dreamweaver 8中的某些字体选项中含有多种字体组合，浏览器在显示时是从前到后的顺序来选择字体的。如果前面的字体在浏览者的计算机上已安装，则以这种字体来显示，否则，显示它后面的字体。 （2）编辑字号 如果要改变字号，选择改变字号的文本，单击文本属性面板上
6、“大小”下拉列表右侧的下三角按钮，弹出字号列表，如图4-5所示。图4-5 字号列表 在“大小”下拉列表中可以设置字号大小，还可以执行“文本”“大小”命令，来设置字体的大小。改变字体大小时可在下拉列表中选择，也可以直接输入字号，还可以执行“文本”“改变大小”命令来改变字体的大小。,（3）文本颜色 默认情况下，网页中文本的字体颜色为黑色。在页面中选中要改变颜色的文字，然后在属性面板中单击颜色框按钮弹出调色板，如图4-6所示。此时鼠标变成吸管形状，可以在文档界面中吸取任何看到的颜色。还可以直接在颜色框后的文本框中输入颜色值。也可以执行“文本”“颜色”命令，会弹出“颜色”对话框，如图4-7所示。从中选
7、择合适的颜色，然后单击【确定】按钮。图4-6 属性面板改变颜色 图4-7 “颜色”对话框 3.对齐文本 要对齐段落文本，可以使用属性面板中按钮，或选择“文本”“对齐”命令。在Dreamweaver 8中，文本的对齐方式共有4中：左对齐、居中对齐、右对齐和两端对齐，效果如图4-8所示。,图4-8 对齐文本 在设置文本对齐方式时，只能对整个文本块设置对齐属性，而不能对段落中的部分文本设置对齐属性。所谓的段落时指用Enter键分开的文字（网页的HTML代码标记为p），用Shift+Enter键分开的文字（网页的HTML代码标记为br）是换行而不是分段。 4. 使用段落和标题 使用属性面板中的“格式”
8、下拉列表框，或选择“文本”“段落格式”菜单命令，可以设置标准的段落和标题，不过在设置前，首先要选中相应的文本。如果要删除段落格式，可从菜单或列表中选择“无”选项。 要改变网页段落和标题的默认设置，可以选择“修改”“页面属性”命令，打开“页面属性”对话框进行设置，如图4-9所示。,图4-9 改变网页段落和标题的默认设置 4.1.2创建列表 列表是Dreamweaver 8中的一个很重要的格式设置功能。列表是将具有相似特征或者是具有先后顺序的几行文字进行对齐排列。Dreamweaver 8有项目列表、编号列表和定义列表。列表也可以被嵌入。 1. 创建列表,1)请按以下步骤操作： 将光标放置在要添加
9、新列表的段落上。单击属性面板上的【项目列表】或【编号列表】按钮。也可以选择“文本”“列表”，然后选择所需列表类型“项目列表”、“编号列表”或“定义列表”。 2)开始键入列表内容，按下Enter键开始其他列表项。 3)列表完成以后，两次按下Enter键。 要创建使用已有文本的列表，请按以下步骤操作： 1)选中要设置为列表形式的多个段落。 2)单击属性面板上的【项目列表】或【编号列表】按钮。 要创建嵌入式列表，请按以下步骤操作： 1)选择要嵌入的列表项。 2)单击属性面板上的文本缩进按钮。 2. 设置列表属性 在Dreamweaver中可以直接设置列表的属性。列表属性可决定整个列表和选定列表项的外
10、观。要查看列表属性，可选中一个列表项，然后选择“文本”“列表”“属性”命令，弹出如图4-11所示的对话框。,图4-11 列表属性对话框,列表属性对话框中各项参数说明见表4-1。 表4-1 列表属性参数说明4.1.3插入其他网页元素 用户可以输入普通文本，也可以插入日期、特殊符号。特殊字符在文本信息中具有画龙点睛的作用，通常用来调整和修饰文本，甚至可以传达特定的信息。 一般来说，网页中显示最多的就是文字，他们通过不同的排版方式、不同的设计风格排列在网页上，并提供丰富的信息。所以对文本的控制及布局在网页设计中占了很大的比重，能否灵活运用各种文本的控制手段是决定网页设计是否美观、富有创意及提高工作效
11、率的关键。本案例主要是让读者掌握制作网页的基本操作，首先为页面添加背景图片，输入文字信息，然后对这些文本的属性进行修改，比如设置字体、颜色、大小等，以及创建列表，以满足一定需求，同时使页面看起来更美观。,4.2编辑网页图像 图像和文字事网页中最重要的两种元素。图像是文本的说明和解释，如果在网页的适当位置上放置一些图像，不仅可以使文本清晰易读，而且使得网页更加具有吸引力。 4.2.1网页中的图像格式 图像的文件格式有很多种，但Web页中通常使用的只有GIF、JPEG和PNG 3种，这3种格式的一个共同特点是压缩率较高。目前，GIF和JPEG文件格式的支持情况最好，大多数浏览器都可以查看它们。PN
12、G文件具有较大的灵活性并且文件尺寸较小，所以它几乎对于任何类型的Web图形都是最适合的。但是，Microsoft Internet Explorer（4.0和更高版本）和Netscape Navigator（4.04和更高版本）只能支持部分PNG图像的显示。因此，为保证所有浏览者都能查看到图像，通常向网页中插入图像都是使用GIF和JPEG文件格式。 4.2.2插入图像并设置图像属性 1.插入图像 要在网页中插入图像，首先需要在文档窗口中指定图像的插入位置，然后单击“插入”工具栏上的“常用”选项卡，在“常用”选项卡中单击“图像”按钮，如图4-16所示，或者执行“插入”“图像”命令，打开“选择图像
13、源文件”对话框，如图4-17所示。,图4-16 “插入”栏中的“图像”菜单,图4-17 “选择图像源文件”对话框,2.设置图像属性 要设置图像的属性，可在网页文档中选择一个图像，然后选择“窗口”“属性”命令以显示“图像”属性面板，用户可在该属性面板中设置图像的所有参数。有关参数的详细说明见表4-2。 表4-2 图像属性面板各选项的功能,4.2.3插入其他图像元素 1.图像占位符 所谓“图像占位符”，是指图像尚未编辑完成，在网页中保留该图像的位置。例如，像站点徽标这样比较重要的图像可能需要经过多方同意才能定稿确认，那么在此之前设计网页时，就需要使用占位符，现将徽标的位置空出来，方便日后更新。 要
14、在网页中插入图像占位符，可以选择“插入”“图像对象”“图像占位符”命令，或选择“插入”工具栏中“常用”选项卡下“图像”下拉菜单中的“图像占位符”命令，将打开“图像占位符”对话框，如图4-22所示。在出现的对话框中，指定图像占位符的名称、宽度和高度等属性。图4-22 “图像占位符”对话框 在创建图像占位符之后，如果实际图像编辑完成，则可以通过其“属性”面板指定图像的源文件，也可以单击“属性”面板中的【创建】按钮来新建实际图像。图像占位符将被新的图像代替。由此可见，图像占位符时临时的，它的主要意义就是帮助确定图像大小和位置等，方便前期的网页布局和构图工作。提示：单击【创建】按钮之后，系统将打开Fi
15、reworks建立图像。,2.鼠标经过图像 鼠标经过图像效果是指当浏览者将鼠标移动到图像上时，图像发生变化，鼠标移开时，图像又可以还原。它实际上是由原始图像（当首次载入时显示的图像）和鼠标经过图像（当鼠标指针移动到初始图像上时显示的图像）两部分组成。 要在网页中创建鼠标经过图像效果，请执行以下操作： 1)选择“插入”工具栏上的“常用”选项卡，然后单击“图像”下拉菜单中的“鼠标经过图像”命令。 2)在出现的对话框中输入所需信息，如图4-23所示。图4-23 “插入鼠标经过图像”对话框 “图像名称”可按默认值，但是不能为空。 “原始图像”中键入初始图像的路径，或单击【浏览】按钮选定图像。 “鼠标经
16、过图像”中键入变换图像的路径，或单击【浏览】按钮选定图像。 “替换文本”输入图像的提示文字,勾选“预载鼠标经过图像”以提高浏览速度。 要创建链接，请单击“按下时，前往的URL”旁边的【浏览】按钮以选定文件。,3)单击【确定】按钮关闭该对话框。按F12在浏览器中预览该效果。如图4-24所示。当鼠标经过时，如图4-24b所示，鼠标移开，如图4-24a所示。图4-24 鼠标经过图像效果a)原始图像 b)鼠标经过时图像,4.2.4编辑图像 使用Dreamweaver 8软件编辑图像时，可以将它与其他外部的编辑器相接合，这些编辑器包括浏览器、HTML编辑器、图像编辑程序及动画编辑程序等。 1.设置图像编
17、辑器 如果计算机中已安装了Fireworks，则Dreamweaver会自动将Fireworks设置为首选图像编辑程序。如果首选图像编辑程序不是Fireworks，则可以按照以下方法进行指定： 1)选择“编辑”“首选参数”。 2)从左边的“分类”列表中选择“文件类型/编辑器”。 3)在“扩展名”列表中分别选择GIF，JPEG，JPE，JPG和PNG文件格式，将它们的编辑程序设置为Fireworks，单击【设为主要】可以将Fireworks设置为首选编辑程序。如图4-25所示。图4-25 设置图像编辑器,实训 实训目标：将文字、图片、链接和多媒体元素融合在页面中。 实训题目：设计一个包含文字、图片、多媒体元素的页面，同时设置相应的超链接。 习题 1.简述文本的输入和编辑方法。 2.目前，在web页中通常使用的图片格式有哪几种？ 3.链接的路径可以使用哪几种表示方式？ 4.在文档中指定位置上创建链接，应该选用什么链接？ 5.在设置图像超链接时，“替代”文本框中输入文字的作用是什么? 6.如何创建E-mail链接？ 7.如果要使Flash影片播放时背景透明，可添加什么参数和值？ 8.如何在网页中插入视频对象？ 9.在Dreamweaver中的Flash图像查看器支持哪种格式的图像？,
