第3章网页的基础操作

第3章网页的基础操作2/6/20231《网页设计技术》内容3.1设置网页属性3.2添加网页内容为网页加入添加文本给网页加入图像插入多媒体对象超链接的使用2/6/20232《网页设计技术》设置网页属性制作网页时，先需设置网页的页面属性，如网页标题、背景图像、超链接的颜色、文档编码方式等属性。“修改”｜“页面属性”命令，将打开“页面属性”对话框，各选项的含义：外观：用来设置页面的默认字体、背景颜色、背景图像、页面边距等链接：设置链接字符的字体、颜色等标题：设置当前网页文本的格式标题和编码：“标题”设置网页文档的标题；“编码”设置文档字体采用的编码方式。计算机中显示的每种文字都需要对应的编码支持，才能正常显示，否则出现乱码，在中文模式下默认编码为简体中文GB2312。跟踪图像：在设计页面时插入用作参考的图像文件，浏览网页时该图片是看不到的。3.1设置网页属性2/6/20233《网页设计技术》3.2添加网页内容插入文本普通文本特殊文本在字符之间添加空格水平线日期格式化文本项目列表

3.2.1为网页加入文本2/6/20234《网页设计技术》1.普通文本的录入直接输入文本复制文本。在其他文本编辑器中复制文本（如Word），在DW中执行粘贴命令即可。但DW不保留原有的文本格式。如果想保留文本的格式，可以选择[编辑][选择性粘贴]菜单命令插入Word或Excel等其它文档的内容。选择[文件][导入]

菜单命令。特殊文本。

“插入”栏中的“文本”，则弹出文本工具栏，单击字符按钮，单击相应的特殊字符。如果没有使用西欧字符，则会弹出一个警告框，提示可能有些浏览器不能正常显示这些字符。3.2添加网页内容2/6/20235《网页设计技术》在字符之间添加多个空格在“插入”栏的“文本”选项卡中，单击“字符”按钮，选择“插入不换行空格”

[插入][HTML][特殊字符][不换行空格]

按【Ctrl+Shift+空格键】键输入。设置添加不换行空格的参数。通过[编辑][首选参数]菜单命令去设置。水平线：在“插入”栏的“HTML”选项中单击“水平线”按钮。插入关键字：关键字为网络中的搜索引擎准备的，关键字要求简短、尽可能概括网页的主题，以便浏览者在输入很少关键字的情况下，就能很大程序地搜索到网页。通过“插入”“HTML”“文件头标签”“关键字”即可，各关键字用逗号分隔。日期：在“插入”栏的“常用”选项中，单击“插入日期”按钮。3.2添加网页内容2/6/20236《网页设计技术》2.普通文本的格式化一般有属性面板和菜单命令两种方法使用菜单命令时，只需要选择“文本”菜单下的相应命令即可。最常用的属性面板,

文本属性面板中各选项含义及设置方法如下。

格式：设置选定文本的段落格式。如段落、标题1、标题2等；样式：对选定内容应用文本样式CSS样式

；粗体、斜体、大小、颜色、对齐方式链接：除了上述的字符格式化外，还可以对所选的文本建立超级链接；目标：在此设置打开超级链接的窗口；字体3.2添加网页内容2/6/20237《网页设计技术》字体属性说明：默认情况下，DW提供了三种中文字体，如果要使用其它中文字体，可用“编辑字体列表”命令将系统的字体添加到DW字体列表中。字体列表中每一选项中包括多种字体，各种字体之间用“，”分隔。其含义是浏览者的浏览器中如果没有这种字体，则用“，”后面的字体进行显示，以此类推。3.2添加网页内容2/6/20238《网页设计技术》3.项目列表和编号列表编号列表：对于具有序列属性（即顺序性）、属性相同的内容，则可设置编号列表。单击属性面板中的“编号列表”按钮选择[文本][列表][编号列表]菜单命令。项目列表：对于一些具有相同或相似属性的文本，将内容条列成项目，以便组成一个整体项目分类。定义列表：不使用项目符号点或数字这样的前导字符，并且通常用于词汇表或说明

嵌套列表：包含其它列表的列表。属性面板中的“缩进”按钮，或选择[文本][缩进]菜单命令来实现。列表属性设置

默认的前导符为一个点或阿拉伯数字，如要改成其他前导字符，通过“列表属性”对话框。3.2添加网页内容2/6/20239《网页设计技术》3.2.2为网页加入图像1.图像的格式

由于受网络速度等方面的影响，一般用于网页的图像：GIF、JPEG或PNG，适合网页快速下载浏览。GIF压缩格式：无损压缩格式，只能支持256种颜色，适合对颜色数目要求不高的卡通画及程序界面等。GIF格式还可设置为透明及制作成动画文件。JPEG即JPG：为有损压缩格式，支持24位真彩色，最初为照片而设计。很高压缩比，删除人眼不易察觉的部分图像，适合表现颜色丰富、色彩过渡平滑的图像，不支持透明和动画。PNG：无损压缩格式，支持24位真彩色，FIREWORKS的文件格式。有较大的灵活性并且文件大小较小。3.2添加网页内容2/6/202310《网页设计技术》2.图像的插入

网页一般是图文混排结构，除了添加文本内容，还需要插入有说服力的资料图片。直接插入图像：可使用[插入][图像]菜单命令或“插入栏”的“常用”选项卡中的“图像”按钮。用占位符插入图像：在制作网页时，经常会出现所需的图像还没有制作完成的情况，此时先插入一个图像占位符。图像占位符是一个占有一定空间的符号，能替换为其他真实的图像，它不会在浏览器中显示。[插入][图像对象][图像占位符]注意：与添加文本不同，插入的图像不能从别的文档中复制，插入到网页中的图像只能以文件的形式独立存在于站点文件夹中。如果图像文件不在站点目录中，DW会保存到站点目录中。3.2添加网页内容2/6/202311《网页设计技术》图像的属性说明源文件：图像文件所在的目录及名称，可通过“指向文件”或“浏览”按钮设置。替代：为图片添加描述信息。在浏览器中，当鼠标指向图像时会显示这个描述信息。链接：为图像指定一个链接。编辑：启动“外部编辑器”，同时打开所选图像进行编辑。垂直/水平边距：图像相对于编辑窗口或文本等的间隔。低解析度源：设置低分辩率的图像。在主图像被下载之前，先载入低分辩率图像，以便浏览者及早地了解图像的信息。启动Firework优化当前图像对当前图像进行裁剪操作，去掉不需要的部分调整图像的对比度和亮度2/6/202312《网页设计技术》图像的属性说明地图：通过在一幅图像上选择局部范围（热点）来实现超链接，被选择并被标注的地方就叫图像地图。选取图片，属性面板中将出现4个热点工具。4个热点工具的作用如下： ：指针热点工具，用于移动、放大或缩小热区。 ：矩形热点工具，用于绘制矩形热区。 ：椭圆形热点工具，用于绘制圆形热区。 ：多边形热点工具，用于绘制多边形热区。返回2/6/202313《网页设计技术》“图像占位符”的具体设置“名称”（可选）：图像占位符标签显示的文本。“宽度”和“高度”：设置图像大小，这是必需的。“颜色”（可选）“替换文本”（可选）：设置描述该图像的文本。在浏览器中预览图片，当鼠标移到用占位符添加的图像上时替代文本就会出现。双击占位符打开“选择图像源文件”对话框，指定好要插入的图像文件即可返回2/6/202314《网页设计技术》3.创建鼠标经过图像（翻转图像）鼠标经过图像是一种在浏览器中查看并使用鼠标指针移过它时发生变化的图像。必须用两个图像来创建鼠标经过图像：主图像（首次加载页面时显示的图像）和次图像（鼠标指针移过主图像时显示的图像）。鼠标经过图像中的这两个图像应大小相等；如果这两个图像大小不同，DW将调整第二个图像的大小与第一个图像的尺寸相匹配。“插入”“图像对象”“鼠标经过图像”。鼠标经过图像与FLASH按钮、FLASH文本一般都用于制作超链接。3.2添加网页内容2/6/202315《网页设计技术》3.2.3插入多媒体对象

当前网页中多媒体包括：动画、音频、视频等元素。DW可有效地将多媒体元素和其它元素有机地整合在一起，以丰富网页的内容。Flash文件的格式：源文件(.fla)、影片文件(.swf)、模板文件(.swt)、视频文件(.flv)等；音频文件格式：midi或mid、wav、aif、mp3、ra、ram、rpm及RealAudio等。播放wav、aif和midi文件不需要插件；视频文件格式：AVI、WMV、RM等，视频格式不同，对应的播放器是有区别的。虽然它们播放器不同，但它们一般都是使用ActiveX控件或插件来播放。3.2添加网页内容2/6/202316《网页设计技术》1插入Flash内容插入Flash动画（影片文件.swf）“常用”“媒体”按钮，选择“Flash”选项；或执行[插入][媒体][Flash]菜单命令对话框属性说明：

标题：媒体对象的标题。

快捷键：输入A作为快捷键，则使用“Ctrl+A”键在浏览器中选择该对象。

Tab键索引：输入一个数字以指定该对象的Tab键顺序。注意：IE为了保护电脑的安全性，阻止了ActiveX。如何去掉这种阻止，微软提供了一种非常简便的方法，在网页的头部添加如下代码：<!--savedfromurl=(0013)about:internet-->3.2添加网页内容2/6/202317《网页设计技术》插入Flash按钮

DW提供了许多Flash动画按钮，也可以插入自已制作的Flash按钮，方法与插入Flash影片类似。样式：选择按钮的样式按钮文本：按钮上显示的文本链接：按钮链接的地址另存为：设置按钮的保存名称注意：此功能不支持中文名称。按钮保存的文档文件和站点文件夹的名称都不能为中文，否则不能正常使用按钮。3.2添加网页内容2/6/202318《网页设计技术》插入Flash文本

Flash文本对象允许DW创建一个仅包含文本的Flash影片文件。插入Flash文本时，保存Flash的路径对话框中的“另存为”不能出现中文，路径不能太长，并且要与当前的文档在一个文件夹里面。Flash文本具有与鼠标经过图象类似的效果，主要用于设置超级链接。插入FlashVideo（FLV格式）

在网页中浏览Flash视频时不仅显示该视频信息，还将显示播放该视频的控件。3.2添加网页内容2/6/202319《网页设计技术》2.ActiveX控件事实上，浏览器仅仅能显示几种文件格式，ActiveX控件或插件扩展了浏览器的能力。ActiveX控件是可充当浏览器插件的可重复调用的组件，可在Windows操作系统上的IE浏览器中运行。插入ActiveX控件后，在DW的文档窗口会显示一个占位符。在浏览器中，将出现了媒体播放器的界面，即可像平常使用播放器一样来对它进行控制，改变声音等。3.2添加网页内容2/6/202320《网页设计技术》ActiveX控件相关属性如下嵌入：为ActiveX控件在<object>标签内添加一个<embed>标签。如果ActiveX控件具有Netscape插件等效项，<embed>标签将激活该插件。源文件：如果“嵌入”项选中，则确定Netscape插件所使用的数据文件。基址：指定包含该ActiveX控件的URL。如果在浏览者系统中没有该ActiveX控件，IE会从该位置下载该ActiveX控件。如果你没有指定一个参数，而你的浏览者又没有安装相应的ActiveX控件，浏览者无法显示该ActiveX对象。替代图像：如果游览器不支持<object>标签，则指定显示一幅图像，该选项只在“嵌入”没有选中下才可使用。数据：指定ActiveX控件下载的数据文件。许多ActiveX控件，不使用该参数，如shockwave、realplay3.2添加网页内容2/6/202321《网页设计技术》3.利用插件添加视频文件

插件是一种程序。浏览器一般能够直接调用插件程序，插件安装后就成为浏览器的一部分。通过插件可将视频直接插入页面中，但只有用户在浏览网页时具有所选视频文件的适当插件后，视频才可以播放。典型的插件如RealPlayer和QuickTime。通过[插入][媒体][插件]菜单命令，选定视频文件，即将插件插入到网页中。在“插件URL”的文本框中可以输入下载插件的完整URL。如果在浏览页面时没有该插件，则IE将从这里提供的URL上下载。插入插件之后，在浏览器中，将出现了媒体播放器的界面，即可象平常使用播放器一样来对它进行控制，改变声音等。3.2添加网页内容2/6/202322《网页设计技术》Shockwave是Macromedia公司制定的一种网上媒体交互压缩格式的标准，其生成的压缩格式可以被快速下载，并且被目前的主流浏览器所支持，其扩展名：.dcr、dir、dxr。观看Shockwave影片时，浏览器需安装Shockwave播放器。JavaApplet是美国SUN公司开发的Java语言中的一个小应用程序，具有跨平台特点。JavaApplet可直接嵌入到HTML语言中，由支持Java的浏览器（IE或Netscape）解释执行，能够产生特殊效果的程序。3.2添加网页内容2/6/202323《网页设计技术》4.为网页添加声音以插件的形式向网页添加声音同插入其他插件的方法一样，同样以占位符的形式出现在网页中。通过插件可将声音直接插入页面中，但只有用户在浏览网页时具有所选声音文件的适当插件后，声音才可播放。在“插件URL”的文本框中可以输入下载插件的完整URL。如果在浏览页面时没有该插件，则IE将从这里提供的URL上下载。在属性面板中，将高度和宽度都设置为0，浏览器中将不会显示播放器。3.2添加网页内容2/6/202324《网页设计技术》在参数对话框编辑参数，实现循环和自动播放，由此实现背景音乐的设置。单击“参数”按钮，打开对话框，如下图所示。其实质，在<body>和</body>之间的加入如下代码

<embedsrc="media/Universe.mp3"hidden="true"autostart="true"loop="true"></embed>。

其中src指定音频文件的路径和文件名，hidden=true表示不显示播放器，loop=true表示循环播放，autostart=true表示自动播放。3.2添加网页内容2/6/202325《网页设计技术》以背景音乐形式添加到网页中在DW中，没有背景音乐的具体设置。添加背景音乐有两种方法，一种是通过手写代码或插件实现。将<bgsound>标记加入到<head>和</head>之间。<bgsound>标记是用来插入背景音乐的标记，但只适用于IE。打开网页文件，将网页切换到代码视图，在<head>和</head>之间加入如下代码：<bgsoundsrc="xxx.mp3"autostart="true"loop="-1">3.2添加网页内容2/6/202326《网页设计技术》以链接的形式添加到网页中链接音频文件是将声音添加到页面的一种简单而有效的方法。这种方法可在单击链接时自动调用外部播放器来播放音乐文件。具体方法：在文档窗口的设计视图中，选择要指向声音文件的文本或图像。在属性面板的“链接”栏后，单击浏览按钮，链接到指定的声音文件。3.2添加网页内容2/6/202327《网页设计技术》3.2.4超链接1.超链接概述对于超链接来说，路径是一个重要的概念。常用的路径有三种：绝对路径：提供所链接文档的完整URL，包括协议，服务器地址，路径。

例如：/china/contents.html

通常用于站内到站外的链接。如果是同一站点的文档，使用绝对路径会有弊端，因为在移动文件的时候，文件内所有的绝对路径都被打断，造成链接错误。3.2添加网页内容2/6/202328《网页设计技术》文档相对路径：相对于当前文档而言，此路径省略了与当前文档URL的相同部分，只提供了与其不同的部分。对于大多数的站内链接，一般使用文档相对路径。如当前文件与要链接的目标文档位于同一文件夹内，只需输入文件名即可。

例如：contents.html站点根目录相对路径：从站点的根文件夹到文档的路径，与当前文档无关。根目录相对路径由“/”开头，它代表站点根文件夹。3.2添加网页内容2/6/202329《网页设计技术》例如，假设一个站点的结构如图3.2添加网页内容resourcesproducts2/6/202330《网页设计技术》创建从contents.html到其它文件的链接，如下：若要从contents.html

链接到hours.html。

文档相对路径：hours.html；若要链接到tips.html，在当前文件夹下一级文件夹中。

文档相对路径：resources/tips.html；若要链接到index.html，站点根目录中。

站点根目录相对路径：/index.html；若要链接到catalog.html，在站点根目录下的products子文件夹中。

站点根目录相对路径：/products/catalog.html。3.2添加网页内容2/6/202331《网页设计技术》链接的类型

根据链接的对象不同，分为文件链接、锚点链接、邮件链接、热区链接、脚本和空链接

文件链接：链接到其它文档或文件；锚点链接：跳转到文档内的特定位置，可以是同一文档中的锚记，也可以是其他文档中的锚记；图像地图链接：指被分成多个区域（“热点”）的图像，而每个区域可设置链接；电子邮件链接：此类链接打开客户端邮件应用程序，并且新建一个已填好收件人地址的空白电子邮件；脚本链接：执行脚本代码或调用JavaScript函数。它非常有用，能够在不离开当前Web页面情况下，当访问者单击特定项时，执行计算、验证表单和完成其它处理任务等；空链接：是一个无指向的链接，用于向页面上的对象或文本附加行为。3.2添加网页内容2/6/202332《网页设计技术》链接文件的打开方式_blank——在新建窗口中加载链接文档。_self——将链接文档加载到与链接相同的框架或窗口中，该目标是默认值。_parent——将链接的文件载入含有该链接框架的父框架集或上一级的浏览器窗口中。_top——将在最顶端的浏览器窗口中加载链接文件。如果当前网页是框架网页，则删除所有框架。Parent和top用于框架网页。

3.2添加网页内容2/6/202333《网页设计技术》2.锚点链接允许用户在文档的任何位置设置标记（这些标记通常放在文件特定主题的前面或顶部），然后为对象创建这些标记的链接。锚点链接可以跳转至当前文档或其它文档内的指定位置。建立锚点链接分为创建命名锚记和创建到该命名锚记的链接两个步骤。

创建锚点：利用[常用]选项中[命名锚记]按钮。

创建锚点的链接：选择要创建锚点链接的对象，在属性面板的“链接”文本框中，输入一个数字符号“#”和锚记名称，中间不能有空格。3.2添加网页内容2/6/202334《网页设计技术》3.图像地图链接图像作为一个整体，只能创建一个链接。如果要在一张图像中建立多个链接，则用图像地图实现。图像地图指被分成多个区域（或称“热点”）的图像，可为每个热点指定一个链接。“属性面板”中的4个“热点工具”如下：

：指针热点工具，用于移动、放大或缩小热区

：矩形热点工具，用于绘制矩形热区

：椭圆形热点工具，用于绘制圆形热区

：多边形热点工具，用于绘制多边形热区选取图像→在“属性面板”中单击“热点工具”并创建热区→在“热区”属性面板中的“链接”文本框中创建链接。3.2添加网页内容2/6/202335《网页设计技术》2/6/202336《网页设计技术》2/6/202337《网页设计技术》选择一个热区后，自动打开“热区”属性面板，如图所示。在属性面板中进行对应的设置。在“链接”文本框中输入要链接的文件名称或相应的锚点名称。在“目标”下拉列表框中选择打开链接页的方式。如图所示，在新窗口中打开。在“替代”文本框中输入鼠标移动到链接热点上时显示的内容。2/6/202338《网页设计技术》4.电子邮件链接

网页中设置电子邮件链接非常普遍。当单击电子邮件链接文本时，该链接打开安装在系统中的电子邮件应用程序，并且创建了一个已指定好收件人地址的空白邮件。电子邮件链接创建方法如下：选择[插入][电子邮件链接]菜单命令；在属性面板的“链接”文本框中，输入“mailto:”，在后输入电子邮件地址。

如：mailto:lzj@

3.2添加网页内容2/6/202339《网页设计技术》5.脚本链接

执行脚本代码或调用JavaScript函数。它非常有用，能够在不离开当前Web页面的情况下为访问者提供有关某项的附加信息。脚本链接还可用于在访问者单击特定项时，执行计算、验证表单和完成其它处理任务。

在设计视图中创建脚本链接在“文档”窗口的“设计”视图中选择文本或图像对象。在属性检查器的“链接”框中，键入javascript:后跟脚本代码（在冒号与代码或调用之间不能键入空格）。

如：javascript:window.close()

3.2添加网页内容2/6/202340《网页设计技术》6.空链接

是未指派目标的链接，空链接用于向页面上的对象或文本附加行为。Dreamweaver行为面板中列出了许多行为，这些行为相当于JAVASCRIPT的程序或函数，对文本设置行为先要设置空链接，行为才有效。

在设计视图中创建空链接在“文档”窗口的“设计”视图中选择文本、图像或对象。在属性检查器中的“链接”框中键入javascript:;（javascript

一词后依次接一个冒号和一个分号，或直接输入“#”字符）。3.2添加网页内容2/6/20234