第3章网页的基础操作

1、第第3章章 网页的基础操作网页的基础操作 2021-12-14网页设计技术2内容内容3.1 3.1 设置网页属性设置网页属性3.2 3.2 添加网页内容添加网页内容为网页加入添加文本为网页加入添加文本给网页加入图像给网页加入图像插入多媒体对象插入多媒体对象超链接的使用超链接的使用2021-12-14网页设计技术3设置网页属性设置网页属性p制作网页时，先需设置网页的页面属性，如网页标题、背景图像、超链接的颜色、文档编码方式等属性。p“修改”“页面属性”命令，将打开“页面属性”对话框，各选项的含义：外观：外观：用来设置页面的默认字体、背景颜色、背景图像、页面边距等链接链接：设置链接字符的字体、颜色

2、等标题：标题：设置当前网页文本的格式标题和编码：标题和编码：“标题”设置网页文档的标题；“编码”设置文档字体采用的编码方式。计算机中显示的每种文字都需要对应的编码支持，才能正常显示，否则出现乱码，在中文模式下默认编码为简体中文GB2312。跟踪图像：跟踪图像：在设计页面时插入用作参考的图像文件，浏览网页时该图片是看不到的。3.1 设置网页属性设置网页属性2021-12-14网页设计技术43.2 添加网页内容添加网页内容n插入文本插入文本普通文本普通文本 特殊文本特殊文本 在字符之间添加空格在字符之间添加空格水平线水平线 日期日期n格式化文本格式化文本 n项目列表项目列表 3.2.1 为网页加入

3、文本为网页加入文本2021-12-14网页设计技术51.1.普通文本的录入普通文本的录入n直接输入文本直接输入文本n复制文本。复制文本。在其他文本编辑器中复制文本（如Word），在DW中执行粘贴命令即可。但DW不保留原有的文本格式。如果想保留文本的格式，可以选择编辑选择性粘贴菜单命令n插入插入WordWord或或ExcelExcel等其它文档的内容。等其它文档的内容。选择文件导入 菜单命令。n特殊文本。特殊文本。 “插入”栏中的“文本”，则弹出文本工具栏，单击字符按钮 ，单击相应的特殊字符。如果没有使用西欧字符，则会弹出一个警告框，提示可能有些浏览器不能正常显示这些字符。3.2 添加网页内容添

4、加网页内容2021-12-14网页设计技术6n在字符之间添加多个空格在字符之间添加多个空格在“插入”栏的“文本”选项卡中，单击“字符”按钮，选择“插入不换行空格” 插入HTML特殊字符不换行空格 按【Ctrl+Shift+空格键】键输入。 设置添加不换行空格的参数。通过编辑首选参数菜单命令去设置。水平线：水平线：在“插入”栏的“HTML”选项中单击“水平线”按钮。n插入关键字：插入关键字：关键字为网络中的搜索引擎准备的，关键字要求简短、尽可能概括网页的主题，以便浏览者在输入很少关键字的情况下，就能很大程序地搜索到网页。通过“插入”“HTML” “文件头标签” “关键字”即可，各关键字用逗号分隔

5、。n日期：日期：在“插入”栏的“常用”选项中，单击“插入日期”按钮。3.2 添加网页内容添加网页内容2021-12-14网页设计技术72.2.普通文本的格式化普通文本的格式化n一般有属性面板和菜单命令两种方法一般有属性面板和菜单命令两种方法使用菜单命令时，只需要选择“文本文本”菜单下的相应命令即可。最常用的属性面板, 文本属性面板中各选项含义及设置方法如下。 格式：格式：设置选定文本的段落格式。如段落、标题1、标题2等；样式：样式：对选定内容应用文本样式CSS样式 ；粗体、斜体、大小、颜色、对齐方式粗体、斜体、大小、颜色、对齐方式链接：链接：除了上述的字符格式化外，还可以对所选的文本建立超级链

6、接；目标：目标：在此设置打开超级链接的窗口；字体字体3.2 添加网页内容添加网页内容2021-12-14网页设计技术8字体属性说明：字体属性说明：默认情况下，DW提供了三种中文字体，如果要使用其它中文字体，可用“编辑编辑字体列表字体列表”命令将系统的字体添加到DW字体列表中。字体列表中每一选项中包括多种字体，各种字体之间用“，” 分隔。其含义是浏览者的浏览器中如果没有这种字体，则用“，”后面的字体进行显示，以此类推。3.2 添加网页内容添加网页内容2021-12-14网页设计技术93. 3. 项目列表和编号列表项目列表和编号列表n编号列表：编号列表：对于具有序列属性（即顺序性）、属性相同的内容

7、，则可设置编号列表。单击属性面板中的“编号列表编号列表”按钮选择文本列表编号列表菜单命令。n项目列表：项目列表：对于一些具有相同或相似属性的文本，将内容条列成项目，以便组成一个整体项目分类。n定义列表：定义列表：不使用项目符号点或数字这样的前导字符，并且通常用于词汇表或说明 n嵌套列表：嵌套列表：包含其它列表的列表。属性面板中的“缩缩进进”按钮，或选择文本缩进菜单命令来实现。n列表属性设置列表属性设置默认的前导符为一个点或阿拉伯数字，如要改成其他前导字符，通过“列表属性列表属性”对话框。3.2 添加网页内容添加网页内容2021-12-14网页设计技术103.2.2 3.2.2 为网页加入图像为

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

9、网页内容添加网页内容2021-12-14网页设计技术112.2.图像图像的插入的插入网页一般是图文混排结构，除了添加文本内容，还需要插入有说服力的资料图片。n直接插入图像：直接插入图像：可使用插入图像菜单命令或“插入栏”的“常用”选项卡中的“图像”按钮。n用占位符插入图像：用占位符插入图像：在制作网页时，经常会出现所需的图像还没有制作完成的情况，此时先插入一个图像占位符。图像占位符是一个占有一定空间的符号，能替换为其他真实的图像，它不会在浏览器中显示。插入图像对象图像占位符n注意：注意：与添加文本不同，插入的图像不能从别的文档中复制，插入到网页中的图像只能以文件的形式独立存在于站点文件夹中。如

10、果图像文件不在站点目录中，DW会保存到站点目录中。3.2 添加网页内容添加网页内容图像的属性说明图像的属性说明源文件：源文件：图像文件所在的目录及名称，可通过“指向文件指向文件”或“浏览浏览”按钮设置。替代：替代：为图片添加描述信息。在浏览器中，当鼠标指向图像时会显示这个描述信息。链接链接：为图像指定一个链接。编辑：编辑：启动“外部编辑器”，同时打开所选图像进行编辑。垂直垂直/ /水平边距：水平边距：图像相对于编辑窗口或文本等的间隔。低解析度源：低解析度源：设置低分辩率的图像。在主图像被下载之前，先载入低分辩率图像，以便浏览者及早地了解图像的信息。启动Firework优化当前图像对当前图像进行

11、裁剪操作，去掉不需要的部分调整图像的对比度和亮度图像的属性说图像的属性说明明地图：地图：通过在一幅图像上选择局部范围（热点）来实现超链接，被选择并被标注的地方就叫图像地图。选取图片，属性面板中将出现4个热点工具。4个热点工具的作用如下： ：指针热点工具，用于移动、放大或缩小热区。 ：矩形热点工具，用于绘制矩形热区。 ：椭圆形热点工具，用于绘制圆形热区。：多边形热点工具，用于绘制多边形热区。返回“图像占位符图像占位符”的具体设置的具体设置“名称名称”（可选）（可选）：图像占位符标签显示的文本。“宽度宽度”和和“高度高度”：设置图像大小，这是必需的。 “颜色颜色”（可选）（可选）“替换文本替换文本

12、”（可选）：（可选）：设置描述该图像的文本。在浏览器中预览图片，当鼠标移到用占位符添加的图像上时替代文本就会出现。双击占位符打开“选择图像源文件”对话框，指定好要插入的图像文件即可返回2021-12-14网页设计技术153.3.创建鼠标经过图像（翻转图像）创建鼠标经过图像（翻转图像）n鼠标经过图像是一种在浏览器中查看并使用鼠标指针移过它时发生变化的图像。n必须用两个图像来创建鼠标经过图像：主图像主图像（首次加载页面时显示的图像）和次图像次图像（鼠标指针移过主图像时显示的图像）。鼠标经过图像中的这两个图像应大小相等；如果这两个图像大小不同，DW将调整第二个图像的大小与第一个图像的尺寸相匹配。n“

13、插入”“图像对象” “鼠标经过图像”。n鼠标经过图像与FLASH按钮、FLASH文本一般都用于制作超链接。 3.2 添加网页内容添加网页内容2021-12-14网页设计技术163.2.3 3.2.3 插入多媒体对象插入多媒体对象 当前网页中多媒体包括：动画、音频、视频等元素。DW可有效地将多媒体元素和其它元素有机地整合在一起，以丰富网页的内容。nFlashFlash文件的格式：文件的格式：源文件(.fla) 、影片文件 (.swf)、模板文件(.swt)、视频文件 (.flv)等；n音频文件格式：音频文件格式：midi 或mid、wav、aif、mp3、ra、ram、rpm及Real Audi

14、o等。播放wav、aif和midi文件不需要插件；n视频文件格式：视频文件格式：AVI、WMV、RM等，视频格式不同，对应的播放器是有区别的。虽然它们播放器不同，但它们一般都是使用ActiveX控件或插件来播放。3.2 添加网页内容添加网页内容2021-12-14网页设计技术171 插入Flash内容插入Flash动画（影片文件.swf）n“常用”“媒体”按钮，选择“Flash”选项；或执行插入媒体Flash菜单命令n对话框属性说明：标题：媒体对象的标题。 快捷键：输入A作为快捷键，则使用“Ctrl+A”键在浏览器中选择该对象。Tab键索引：输入一个数字以指定该对象的Tab键顺序。n注意：注意

15、：IE为了保护电脑的安全性，阻止了ActiveX。如何去掉这种阻止，微软提供了一种非常简便的方法，在网页的头部添加如下代码：!-=(0013)about:internet -3.2 添加网页内容添加网页内容2021-12-14网页设计技术18插入插入FlashFlash按钮按钮 DW提供了许多Flash动画按钮，也可以插入自已制作的Flash按钮，方法与插入Flash影片类似。样式：样式：选择按钮的样式按钮文本：按钮文本：按钮上显示的文本链接：链接：按钮链接的地址另存为：另存为：设置按钮的保存名称注意：注意：此功能不支持中文中文名称。名称。按钮保存的文档文件和站点文件夹的名称都不能为中文，否则

16、不能正常使用按钮。3.2 添加网页内容添加网页内容2021-12-14网页设计技术19插入插入FlashFlash文本文本 Flash文本对象允许DW创建一个仅包含文本的Flash影片文件。插入Flash文本时，保存Flash的路径对话框中的“另存为另存为”不能出现中文，路径不能太长，并且要与当前的文档在一个文件夹里面。 Flash文本具有与鼠标经过图象类似的效果，主要用于设置超级链接。插入插入FlashFlash Video Video（FLVFLV格式）格式）在网页中浏览Flash视频时不仅显示该视频信息，还将显示播放该视频的控件。3.2 添加网页内容添加网页内容2021-12-14网页设

17、计技术202.ActiveX2.ActiveX控件控件n事实上，浏览器仅仅能显示几种文件格式，ActiveXActiveX控件或插件控件或插件扩展了浏览器的能力。ActiveX控件是可充当浏览器插件的可重复调用的组件，可在Windows操作系统上的IE浏览器中运行。n插入ActiveX控件后，在DW的文档窗口会显示一个占位符。在浏览器中，将出现了媒体播放器的界面，即可像平常使用播放器一样来对它进行控制，改变声音等。3.2 添加网页内容添加网页内容2021-12-14网页设计技术21ActiveXActiveX控件相关属性如下控件相关属性如下n嵌入：嵌入：为ActiveX控件在标签内添加一个标签

18、。如果ActiveX 控件具有Netscape插件等效项， 标签将激活该插件。n源文件：源文件：如果“嵌入”项选中，则确定Netscape插件所使用的数据文件。n基址：基址：指定包含该ActiveX控件的URL。如果在浏览者系统中没有该ActiveX控件，IE会从该位置下载该ActiveX控件。如果你没有指定一个参数，而你的浏览者又没有安装相应的ActiveX控件，浏览者无法显示该ActiveX对象。n替代图像：替代图像：如果游览器不支持标签，则指定显示一幅图像，该选项只在“嵌入”没有选中下才可使用。n数据：数据：指定ActiveX控件下载的数据文件。许多ActiveX控件，不使用该参数，如s

19、hockwave、realplay3.2 添加网页内容添加网页内容2021-12-14网页设计技术223.3.利用插件添加视频文件利用插件添加视频文件 插件插件是一种程序。浏览器一般能够直接调用插件程序，插件安装后就成为浏览器的一部分。通过插件可将视频直接插入页面中，但只有用户在浏览网页时具有所选视频文件的适当插件后，视频才可以播放。典型的插件如RealPlayer和QuickTime。n通过 插入插入 媒体媒体 插件插件 菜单命令，选定视频文件，即将插件插入到网页中。n在“插件插件URL”URL”的文本框中可以输入下载插件的完整URL。如果在浏览页面时没有该插件，则IE将从这里提供的URL上

20、下载。n插入插件之后，在浏览器中，将出现了媒体播放器的界面，即可象平常使用播放器一样来对它进行控制，改变声音等。3.2 添加网页内容添加网页内容2021-12-14网页设计技术23nShockwaveShockwave是Macromedia公司制定的一种网上媒体交互压缩格式的标准，其生成的压缩格式可以被快速下载，并且被目前的主流浏览器所支持，其扩展名：.dcr、dir、dxr。观看Shockwave影片时，浏览器需安装Shockwave 播放器。nJava AppletJava Applet是美国SUN公司开发的Java语言中的一个小应用程序，具有跨平台特点。Java Applet可直接嵌入到

21、HTML语言中，由支持Java的浏览器（IE或Netscape）解释执行，能够产生特殊效果的程序。3.2 添加网页内容添加网页内容2021-12-14网页设计技术244.4.为网页添加声音为网页添加声音以插件的形式向网页添加声音以插件的形式向网页添加声音n同插入其他插件的方法一样，同样以占位符的形式出现在网页中。n通过插件可将声音直接插入页面中，但只有用户在浏览网页时具有所选声音文件的适当插件后，声音才可播放。n在“插件插件URL”URL”的文本框中可以输入下载插件的完整URL。如果在浏览页面时没有该插件，则IE将从这里提供的URL上下载。n在属性面板中，将高度和宽度都设置为0，浏览器中将不会

22、显示播放器。3.2 添加网页内容添加网页内容2021-12-14网页设计技术25n在参数对话框编辑参数，实现循环和自动播放，由此实现背景音乐的设置。单击“参数”按钮，打开对话框，如下图所示。n其实质，在和之间的加入如下代码 。其中srcsrc指定音频文件的路径和文件名，hidden=true hidden=true 表示不显示播放器，loop=trueloop=true表示循环播放，autostart=trueautostart=true表示自动播放。 3.2 添加网页内容添加网页内容2021-12-14网页设计技术26以背景音乐形式添加到网页中以背景音乐形式添加到网页中n在DW中，没有背景音

23、乐的具体设置。添加背景音乐有两种方法，一种是通过手写代码或插件实现。n将标记加入到和之间。标记是用来插入背景音乐的标记，但只适用于IE。n打开网页文件，将网页切换到代码视图，在和 之间加入如下代码：bgsound src=xxx.mp3 autostart=true -13.2 添加网页内容添加网页内容2021-12-14网页设计技术27以链接的形式添加到网页中以链接的形式添加到网页中n链接音频文件是将声音添加到页面的一种简单而有效的方法。n这种方法可在单击链接时自动调用外部播放外部播放器器来播放音乐文件。具体方法：在文档窗口的设计视图中，选择要指向声音文件的文本或图像。在属性面板的“链接”栏

24、后，单击浏览按钮，链接到指定的声音文件。3.2 添加网页内容添加网页内容2021-12-14网页设计技术283.2.4 3.2.4 超链接超链接1.1.超链接概述超链接概述 对于超链接来说，路径是一个重要的概念。常用的路径有三种：绝对路径：提供所链接文档的完整URL，包括协议，服务器地址，路径。例如：例如：http:/ 添加网页内容添加网页内容2021-12-14网页设计技术29文档相对路径：相对于当前文档而言，此路径省略了与当前文档URL的相同部分，只提供了与其不同的部分。对于大多数的站内链接，一般使用文档相对路径。如当前文件与要链接的目标文档位于同一文件夹内，只需输入文件名即可。例如：例如

25、：contents.html站点根目录相对路径：从站点的根文件夹到文档的路径，与当前文档无关。根目录相对路径由“/”开头，它代表站点根文件夹。3.2 添加网页内容添加网页内容2021-12-14网页设计技术30例如，假设一个站点的结构如图3.2 添加网页内容添加网页内容resourcesproducts2021-12-14网页设计技术31创建从contents.html 到其它文件的链接，如下：若要从 contents.html 链接到 hours.html。文档相对路径：文档相对路径：hours.html；若要链接到 tips.html，在当前文件夹下一级文件夹中。文档相对路径：文档相对路径

26、：resources/tips.html；若要链接到 index.html，站点根目录中。站点根目录相对路径：站点根目录相对路径：/index.html；若要链接到 catalog.html，在站点根目录下的products 子文件夹中。站点根目录相对路径：站点根目录相对路径：/products/catalog.html。3.2 添加网页内容添加网页内容2021-12-14网页设计技术32 链接的类型链接的类型根据链接的对象不同，分为文件链接、锚点链接、邮件链接、热区链接、脚本和空链接 n文件链接：文件链接：链接到其它文档或文件；n锚点链接锚点链接：跳转到文档内的特定位置，可以是同一文档中的锚

27、记，也可以是其他文档中的锚记；n图像地图链接图像地图链接：指被分成多个区域（“热点”）的图像，而每个区域可设置链接；n电子邮件链接电子邮件链接：此类链接打开客户端邮件应用程序，并且新建一个已填好收件人地址的空白电子邮件；n脚本链接脚本链接：执行脚本代码或调用JavaScript函数。它非常有用，能够在不离开当前 Web 页面情况下，当访问者单击特定项时，执行计算、验证表单和完成其它处理任务等；n空链接空链接：是一个无指向的链接，用于向页面上的对象或文本附加行为。3.2 添加网页内容添加网页内容2021-12-14网页设计技术33链接文件的打开方式链接文件的打开方式_blank_blank在新建

28、窗口中加载链接文档。 _self_self将链接文档加载到与链接相同的框架或窗口中，该目标是默认值。 _parent_parent将链接的文件载入含有该链接框架的父框架集或上一级的浏览器窗口中。 _top_top将在最顶端的浏览器窗口中加载链接文件。如果当前网页是框架网页，则删除所有框架。Parent和top用于框架网页。 3.2 添加网页内容添加网页内容2021-12-14网页设计技术342.2.锚点链接锚点链接允许用户在文档的任何位置设置标记（这些标记通常放在文件特定主题的前面或顶部），然后为对象创建这些标记的链接。锚点链接可以跳转至当前文档或其它文档内的指定位置。建立锚点链接分为创建命名

29、锚记和创建到该命名锚记的链接两个步骤。创建锚点：创建锚点：利用常用选项中命名锚记按钮。创建锚点的链接：创建锚点的链接：选择要创建锚点链接的对象，在属性面板的“链接”文本框中，输入一个数字符号“#”和锚记名称，中间不能有空格。 3.2 添加网页内容添加网页内容2021-12-14网页设计技术353.3.图像地图链接图像地图链接图像作为一个整体，只能创建一个链接。如果要在一张图像中建立多个链接，则用图像地图实现。图像地图指被分成多个区域（或称“热点”）的图像，可为每个热点指定一个链接。“属性面板”中的4个“热点工具”如下： ：指针热点工具，用于移动、放大或缩小热区 ：矩形热点工具，用于绘制矩形热区

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

31、子邮件链接 网页中设置电子邮件链接非常普遍。当单击电子邮件链接文本时，该链接打开安装在系统中的电子邮件应用程序，并且创建了一个已指定好收件人地址的空白邮件。电子邮件链接创建方法如下：选择插入电子邮件链接菜单命令；在属性面板的“链接”文本框中，输入“mailto:”，在后输入电子邮件地址。如：mailto:3.2 添加网页内容添加网页内容2021-12-14网页设计技术405.5.脚本链接脚本链接执行脚本代码或调用JavaScript函数。它非常有用，能够在不离开当前 Web 页面的情况下为访问者提供有关某项的附加信息。脚本链接还可用于在访问者单击特定项时，执行计算、验证表单和完成其它处理任务。

32、在设计视图中创建脚本链接在“文档”窗口的“设计”视图中选择文本或图像对象。 在属性检查器的“链接”框中，键入 javascript: 后跟脚本代码（在冒号与代码或调用之间不能键入空格）。如：javascript:window.closejavascript:window.close()() 3.2 添加网页内容添加网页内容2021-12-14网页设计技术416.6.空链接空链接是未指派目标的链接，空链接用于向页面上的对象或文本附加行为。Dreamweaver行为面板中列出了许多行为，这些行为相当于JAVASCRIPT的程序或函数，对文本设置行为先要设置空链接，行为才有效。在设计视图中创建空链接在“文档”窗口的“设计”视图中选择文本、图像或对象。 在属性检查器中的“链接”框中键入 javascript:; （javascript 一词后依次接一个冒号和一个分号，或直