网页制作超链接

网页制作超链接第一页，共五十八页，2022年，8月28日6.1利用DreamweaverMX处理超链接6.1.1超链接简介1．什么是超链接

所谓的超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片、一个电子邮件地址、一个文件，甚至是一个应用程序。而在一个网页中用来超链接的对象，可以是一段文本或者是一个图片。当浏览者单击已经链接的文字或图片后，链接目标将显示在浏览器上，并且根据目标的类型来打开或运行。

第二页，共五十八页，2022年，8月28日按照链接路径的不同，网页中超链接一般分为以下3种类型：

内部链接：即在同一个站点内的不同页面之间相互联

系的超链接。锚点链接：可以链接到网页中某个特定位置的链接。外部链接：把网页与Internet中的目标相联系的链接。如果按照使用对象的不同，网页中的链接又可以分为：文本超链接、图像超链接、E-mail链接、锚点链接、多媒体文件链接、空链接等第三页，共五十八页，2022年，8月28日3．文档路径类型在一个网站中，有绝对路径、和根目录相对路径以及和文档相对路径3种类型的文档路径。

绝对路径：是包含服务器协议（对于网页来说通常是http://或ftp://）的完全路径。和文档相对的路径：是指一个文档与当前文件夹间相对的路径。

第四页，共五十八页，2022年，8月28日第五页，共五十八页，2022年，8月28日

6.1.2创建文本超链接1．建立文本超链接

在浏览网页时，鼠标指针经过某些文本时，指针的形状发生变化，同时文本也会发生变化（如出现下划线、文本的颜色发生变化、字体发生变化等），提示这是带链接的文本。此时点击鼠标，就会打开所链接的网页，这就是文本超链接。

第六页，共五十八页，2022年，8月28日在DreamweaverMX中创建文本超链接的步骤为：（1）在网页上选择需要添加超链接的文本，打开文本的属性面板。

（2）在属性面板上指定文字的链接目标。

（3）在“目标”下拉列表框中选择目标文件打开的方式。设置结束后，在网页中被选择的文字改变了颜色，且在文字底部出现一条下划线，即文字的超链接设置完成。在键盘上按“F12”键，即可将网页在浏览器中打开。单击链接的文字，即可打开目标文件。

第七页，共五十八页，2022年，8月28日2．编辑文本超链接

（1）设置文本链接的状态一个未被访问过的链接与一个被激活的链接在形式上肯定会有所区别，链接被访问过了也会发生变化，提示用户这是一个已经点击过的链接，所有这些都是链接的状态。通过设置不同的文本颜色可以使各个状态区别开来。

第八页，共五十八页，2022年，8月28日

（2）删除文本超链接在DreamweaverMX中要删除一个文本超链接很容易，先用鼠标选定文本对象，将光标定位于属性面板的“链接”文本框中，用“BackSpace”键或“Delete”键，将其显示的超链接对象文件名删除，再回车，或选择“修改”|“移除链接”命令，都可以删除超链接而保留原文本对象。第九页，共五十八页，2022年，8月28日

1．创建图像超链接6.1.3创建图像超链接给图像添加链接，使其指向其他的网页或者文档，就是图像超链接。（1）选中需要建立超链接的图像，此时属性面板显示图像的属性。（2）在属性面板中为图像添加文档相对路径的链接。（3）按“F12”预览网页。

2．删除图像超链接删除图片超链接与删除文本超链接的方法相同。第十页，共五十八页，2022年，8月28日锚记，也称为书签或锚点，用来标记文档中的特定位置，使用其可以跳转到当前文档或其他文档中的标记位置，免去浏览者翻阅网页寻找信息的麻烦。在网页中加入锚记包括两方面的工作，一是在网页中创建锚记，另一个就是为锚记建立链接。6.1.4创建锚记超链接第十一页，共五十八页，2022年，8月28日创建锚记的步骤如下：（1）将光标移到需要加入锚记的地方，一般是将光标放置在一行或是一段文字的开头部分。（2）单击插入“常用”面板上的按钮，或是选择主窗口的菜单“插入”|“命名锚记”命令，将弹出“命名锚记”对话框。（3）在对话框的“锚记名称”文本框输入锚记的名称。（4）单击“确定”按钮。1．创建锚记第十二页，共五十八页，2022年，8月28日在命名锚记时，必须遵循以下规定：①

只能使用字母和数字，锚记命名不支持中文。虽然在插入锚记对话框中能输入中文，但在属性面板上显示的则是一堆乱码，且在为锚记添加链接的时候，也无法工作。②

锚记名称的第1个字符最好是英文字母，一般不要以数字作为锚记名称的开头。③

锚记名称区别英文字母的大小写。④

锚记名称间不能含有空格，也不能含有特殊字符。第十三页，共五十八页，2022年，8月28日创建锚记后，还必须链接锚记。选择想要链接到锚记的文字或图片，然后按如下方法中的任意一种进行操作。2．链接锚记（1）在属性面板上的“链接”文本框中输入符号#和锚记名称。（2）选择文字或图片后，按住Shift键，然后拖动鼠标指向锚记。（3）按住属性面板上的“指向文件”按钮，并拖动鼠标指向锚记。

第十四页，共五十八页，2022年，8月28日在链接锚记时，应注意以下事项：①

在#和锚记名之间不要留有空格，否则链接会失败。②

在不同文件夹中为锚记创建链按时，其文件名后缀必定是“.htm”，而不能写成“.html”，否则链接也会失败。③

符号#必须是半角符号，而不能为全角符号。第十五页，共五十八页，2022年，8月28日如果希望浏览者在浏览网页时，只要浏览者单击E-mail链接时，就会在浏览端自动打开浏览器默认的E-mail处理程序，收件人的地址将会被E-mail超链接中的指定地址自动装入，无需浏览者输入，就需要创建电子邮件链接。6.1.5创建电子邮件超链接第十六页，共五十八页，2022年，8月28日创建电子邮件链接的步骤如下：（1）将光标置于网页中要添加E-mail链接的地方，或选中文字，通过插入“常用”面板上的“电子邮件链接”按钮，或通过主窗口菜单“插入”|“电子邮件链接”命令，将弹出“电子邮件链接”对话框。（2）如果未选中文字，可以在“文本”文本框中添加所需文字；如果已经选中超链接文字，将会在“文本”文本框中自动显示。然后在“E-mail”文本框中输入E-mail地址，单击“确定”按钮，就可以了。

第十七页，共五十八页，2022年，8月28日如果想让网站提供文件下载的功能，就必须建立下载文件超链接。实现文件下载的功能很简单，只需加入连接到文件的超链接就可以了。连接到网站中下载文件的超链接也算是内部超链接中的一种。创建下载文件超链接的方法如下：首先选择主窗口的菜单“站点”|“站点文件”命令，打开站点窗口，找到需要链接的目标文件。然后选择网页中需建立超链接的文字，按下“Shift”键拖动鼠标到站点窗口中的目标文件。

6.1.6创建下载文件超链接第十八页，共五十八页，2022年，8月28日空链接是一个未指定目标的链接，DreamweaverMX的行为面板中列出了许多行为，这些行为相当于使用JavaScript编写的程序或函数，要想对文本设置行为，首先为文本建立空链接，这样行为才有效。为文本建立空链接时，只要先在文档窗口选定文本，然后在属性面板中的“链接”栏中输入一个数值符“#”即可。建立空链接的目的就是为了应用行为，其他情况下不必建立空链接。

6.1.7创建空链接第十九页，共五十八页，2022年，8月28日通过本章学习，应该掌握以下内容：第4章网页表格的处理创建表格的方法编辑表格的方法表格的排序方法表格的格式化方法设置表格属性的方法用表格设计页面布局的方法第二十页，共五十八页，2022年，8月28日4.1利用DreamweaverMX处理网页表格

4.1.1创建表格1．新建表格利用DreamweaverMX创建新表格时，首先打开插入“常用”面板，然后可以通过下列四种方式中的任意一种：（1）在插入“常用”面板上，单击插入表格按钮。（2）通过主窗口的菜单“插入”|“表格”命令。（3）使用快捷组合键“Ctrl+Alt+T”。（4）在插入“常用”面板上，拖动表格按钮到主窗口的工作区中。第二十一页，共五十八页，2022年，8月28日执行完上述任何一种操作，都可以看到如图所示的“插入表格”对话框。

行数：初次指定表格的总行数。列数：初次指定表格的总列数。单元格填充：指定单元格的大小，以像素为单位。单元格间距：指定单元格之间的距离，以像素为单位。宽度：指定表格的宽度，以百分比或像素为单位（百分比用于根据浏览器窗口的大小来自动调整表格的宽度）。边框：指定表格边界的宽度，以像素为单位（如果在浏览器窗口中不显示表格的边框，则定义为0）。第二十二页，共五十八页，2022年，8月28日2．导入表格数据文件在DreamweaverMX中，利用插入列表数据命令可以很容易把表格数据加入到网页中。在插入外部数据前，首先要将表格数据文件转换成.txt（文本文件）格式，并且该文件中的数据要带有分隔符，如逗号、分号、冒号等，但加入到DreamweaverMX中的数据并不会出现分隔符，且会自动生成表格。要加入外部数据，选择如下的任何一种操作：（1）选择“文件”|“导入”|“表格式数据”命令。（2）选择“插入”|“表格对象”|“导入表格式数据”命令。（3）单击插入“常用”面板上的“表格数据”按钮。第二十三页，共五十八页，2022年，8月28日4.1.2编辑表格（1）如果要选择整个表格，可进行如下的操作之一：将光标置于表格中的某个单元格中，选择“修改”|“表格”|“选择表格”命令。将光标置于表格中的某个单元格中，单击鼠标右键，在弹出的快捷菜单中选择“表格”|“选择表格”命令。单击表格的边线。1．选择表格第二十四页，共五十八页，2022年，8月28日（2）选择单个单元格的方法有以下几种：将光标置于所要选择的单元格中，按一次组合键“Ctrl+A”。将光标置于所要选择的单元格中，向右拖动鼠标。按住Ctrl键，单击所要选择的单元格，再单击一次则取消对单元格的选择。第二十五页，共五十八页，2022年，8月28日（3）选择多个单元格的方法有以下几种：按住Ctrl键，单击所要选择的所有单元格。将光标置于单元格中，拖动鼠标，选择多个单元格。如果要选择整行，将光标置于该行的左边缘，当光标变成图标时单击鼠标左键。如果要选择整列，将光标置于该列的上边缘，当光标变成图标时单击鼠标左键。第二十六页，共五十八页，2022年，8月28日（4）选择的全部单元格的方法有以下几种：将光标置于第1个单元格中，并拖动鼠标至最后一个单元格。将光标置于第1个单元格中，按住Shift键，再单击最后一个单元格。将光标置于第1行的左边缘，当光标变成图标时，向下拖动鼠标至最后一行。将光标置于第1列的上边缘，当光标变成图标时，向右拖动鼠标至最后一列。

第二十七页，共五十八页，2022年，8月28日（1）在现有的表格中插入单元行，可以选择以下的操作之一：将光标移到要插入单元行的下一行，选择“修改”|“表格”|“插入行”命令。将光标移到要插入单元行的下一行，按组合键“Ctrl+M”。将光标移到要插入单元行的下一行，单击鼠标右键，在弹出的快捷菜单中选择“表格”|“插入行”命令。

2．添加/删除行列第二十八页，共五十八页，2022年，8月28日（2）在现有的表格中插入单元列，可以选择以上的操作之一：将光标移到在插入单元列的右边一列，选择“修改”|“表格”|“插入列”命令。将光标移到要插入单元列的右边一列，按组合键“Ctrl+Shift+A”。将光标移到要插入单元列的右边一列，单击鼠标右键，在弹出的快捷菜单中选择“表格”|“插入列”命令。第二十九页，共五十八页，2022年，8月28日（3）如果想在现有的表格中添加多行或多列，可执行以下操作：首先将光标移到要插入行或列附近的单元格中，单击鼠标右键，在弹出的下拉菜单中选择“表格”|“插入行或列”命令，或是选择“修改”|“表格”|“插入行或列”命令，将弹出如图4-5所示的“插入行或列”对话框。在此对话框中进行相关的设置，然后单击“确定”按钮，设置的多列或多行将插入到页面中。

第三十页，共五十八页，2022年，8月28日（4）删除整行/整列，可以采用下列办法之一：先选择欲删除的整行或整列，直接按Del键，即可删除。先将光标移到要删除的行或列中，选择“修改”|“表格”|“删除行”或“删除列”命令。将光标移到要删除的行或列中，单击鼠标右键，在弹出的快捷菜单中选择“表格”|“删除行”或“删除列”命令。

第三十一页，共五十八页，2022年，8月28日（1）设置表格的宽度及高度在DreamweaverMX中，修改表格的大小有以下两种方法。①通过鼠标拖曳法可以粗略地调整表格的大小。②通过“表格属性”对话框可以精确地调整表格的大小。在创建表格时，可以通过表格对话框来设置表格的宽度，但无法设置表格的高度，如果要设置表格的高度，可以通过表格属性面板来确定。

3．修改表格大小第三十二页，共五十八页，2022年，8月28日（2）设置单元格的宽度及高度在默认情况下，单元格的宽度是随表格的宽度而定的，表格中每一列的宽度基本上都相等，也就是说每一个单元格的宽度都是相同的。如果不指定表格的高度，则表格中同一行的高度也是相等的，即单元格的高度相同。在属性面板上可以改变单元格默认的宽度和高度。将光标置于需要设置宽度或高度的单元格中，此时属性面板显示单元格属性。在属性面板上的“宽”或“高”文本框中输入适当的数值即可。但单元格宽度与高度的单位只可以使用像素，不能使用百分比。

第三十三页，共五十八页，2022年，8月28日4．合并/拆分单元格

（1）合并单元格首先在表格中选择需合并的单元格，属性面板变成单元格属性面板，然后选择下列操作之一：选择“修改”|“表格”|“合并单元格”命令。单击鼠标右键，在弹出的快捷菜单中选择“表格”|“合并单元格”命令。按组合键“Ctrl+Alt+M”。单击单元格属性面板上的合并单元格图标。

第三十四页，共五十八页，2022年，8月28日

（2）拆分单元格首先在表格中选择需拆分的单元格，选择下列任何一种操作：选择“修改”|“表格”|“拆分单元格”命令。单击鼠标右键，在弹出的下拉菜单中选择“表格”|“拆分单元格”命令。按组合键“Ctrl+Alt+S”。单击属性面板上的拆分单元格图标。在“拆分单元格”对话框中，可以选择拆分成行和列以及行/列的数量。第三十五页，共五十八页，2022年，8月28日4.1.3表格属性的设置要将表格背景设为单一的颜色，首先选择整个表格，再单击属性面板上“背景颜色”后面的颜色框，在弹出的调色板中选择颜色，或者是在后面的文本框中直接输入颜色的色码；要将图像设为表格的背景，首先选择整个表格，再在属性面板上的“背景图像”文本框中输入图像所在的路径，或是单击其后的文件夹图标，在弹出的对话框中选择图像文件。1．设置表格的背景第三十六页，共五十八页，2022年，8月28日5．在表格中添加文字和图片

（1）在表格中添加文字在上图中的表格内按要求输入文字，调整文字的字号、字体、对齐方式等。

（2）在表格中插入图片①

选中要插入图片的单元格，选择“插入”|“图像”菜单命令，打开“选择图像源”对话框，如图所示；②在对话框中选择图像，选中图像文件之后，单击“确认”按钮，图片即插入到相应的单元格里。第三十七页，共五十八页，2022年，8月28日2．设置表格的边框颜色和宽度

设置表格的边框颜色和宽度时，必须指定表格的边框线的宽度不为0。

要为表格的边框指定颜色和宽度，可按如下步骤进行。（1）选择表格，单击其属性面板上“边框颜色”的颜色框，在弹出的调色板中选择颜色，或者是在后面的文本框中直接输入颜色的色码，即可为表格的边框添加颜色。（2）在表格属性面板上的“边框”文本框中输入边框的宽度数值。第三十八页，共五十八页，2022年，8月28日在DreamweaverMX中可以实现按数字的排序和按字母的排序，具体操作方法如下：（1）单击表格中的任一单元格，执行主菜单中的“命令”|“排序表格”命令，打开“排序表格”对话框，如图所示。（2）在“排序按”下拉列表框中选择要排序的列（第一关键字），在“顺序”下拉列表框中选择所需顺序。（3）在“再按”下拉列表框中选择要进行次级排序的顺序。（4）单击“确定”按钮完成设置。4.1.4表格的排序第三十九页，共五十八页，2022年，8月28日

DreamweaverMX预置了十几种表格设计，使用这些预置的表格样式格式化表格，可以大大提高表格的设计效率。格式化表格的具体操作方法如下：选择一个表格，然后执行主菜单中的“命令”|“格式化表格”命令，打开如图所示的“格式化表格”对话框。从中选择一种模板方案，再对各选项进一步自定义设置，然后应用于自己所设计的表格中。4.1.5表格的格式化

第四十页，共五十八页，2022年，8月28日

DreamweaverMX提供了一种新的网页排版视图——布局视图（LayoutView），在这种视图模式下，用户可以通过绘制布局表格和布局单元格，从而可以像在一张白纸上用笔来规划网页的布局，并可在布局单元格中插入文本和图像，通过移动布局表格和布局单元格的位置来精确地定位网页上的文本和图像。步骤如下：

1．打开“布局视图”面板

2.绘制布局表格4.1.6用表格进行页面布局

第四十一页，共五十八页，2022年，8月28日通过本章学习，应该掌握以下内容：认识框架网页创建框架网页的方法编辑框架网页的方法设置框架属性的方法第8章利用框架技术制作网页第四十二页，共五十八页，2022年，8月28日8.1认识框架网页

框架网页是—种特殊的HTML网页，它可将浏览器窗口分成不同的区域，称为框架区域。每个区域都可以显示不同的网页。在框架网页中，用来分隔网页的窗格称为框架。每个框架包括框架高度、框架宽度、滚动条和框架边框，此外还可指定框架的内边距（框架与网页正文之间的距离）。第四十三页，共五十八页，2022年，8月28日（1）只要单击某一个框架区域内的超链接，其指向的网页就会在另一个框架区域中显示，而不必将整个浏览器窗口中的内容更换一遍。（2）固定网页中的某些内容。（3）并不是所有的浏览器都能显示框架网页，这也是框架网页的一个局限。1．框架网页的特点第四十四页，共五十八页，2022年，8月28日

2．框架网页的结构

根据框架分布的不同和各框架作用的不同，框架网页被分为多种类型。常用到的框架结构有：左侧框架、右侧框架、顶部框架、底部框架、上方和下方框架以及各种嵌套框架结构。第四十五页，共五十八页，2022年，8月28日在DreamweaverMX中创建框架的具体操作步骤如下：（1）选择主菜单中的“文件”|“新建”命令，打开一个新文档窗。（2）将插入面板切换到“框架”类，插入面板如图所示。8.2利用DreamweaverMX处理框架

8.2.1创建框架网页1.建立框架

第四十六页，共五十八页，2022年，8月28日（3）执行以下操作之一，即可创建框架。选择“插入”|“框架”命令，从弹出的子菜单中选择任意一个选项。选择“修改”|“框架页”命令，从弹出的子菜单中选择任意一个选项。单击插入“框架”面板上的任一种插入框架图标按钮。第四十七页，共五十八页，2022年，8月28日

2．建立嵌套的框架组

一个框架组嵌套在另一个框架组内称之为嵌套框架组，使用嵌套框架组可以为一个文档创建多个框架。要创建嵌套的框架组，可执行以下操作操作步骤：（1）将光标放到与插入嵌套框架组的框架中。（2）执行以下操作之一，即可创建嵌套的框架组。选择“插入”|“框架”命令，从弹出的子菜单中选择任意一个选项。选择“修改”|“框架页”命令，从弹出的子菜单中选择任意一个选项。单击插入“框架”面板中的插入框架图标按钮。

第四十八页，共五十八页，2022年，8月28日（1）选择整个框架要选择整个框架可执行以下操作之一：①将鼠标指针移到整个边框位置的同时，按住Alt键，当鼠标指针变为垂直箭头（或水平箭头）时，单击边框即可选中整个框架。②如果当前选择的是一个子框架，需要重新选择整个框架，可以将鼠标指针移到第一次分割框架的边框位置，当鼠标指针变为垂直箭头（或水平箭头）时，单击边框即可选中整个框架组。③除了上述方法之外，选择框架还可以通过“框架”面板来完成。3．选择框架第四十九页，共五十八页，2022年，8月28日（2）选择子框架在文档窗口中按住Alt键，然后用鼠标单击欲选择的子框架。文档窗口中该子框架的周围被虚线包围，表示它已经被选中，同时在状态栏上加黑显示标记符<frame>。同样也可以通过“框架”面板来选择子框架。只要在框架面板中单击相应的子框架即可，

4．删除框架将光标放在框架的边框上，当光标变成垂直箭头（或水平箭头）时，按住鼠标左键，将框架的边框拖出父框架或页面之外，即可将这个框架删除。

第五十页，共五十八页，2022年，8月28日

8.2.2编辑框架网页框架创建好以后，就可以对框架进行编辑了。每一个框架里都是一个文档，可以直接添加内容，也可以在框架内打开已经存在的文档。

演示编辑框架网页

第五十一页，共五十八页，2022年，8月28日

8.2.3保存框架网页

每一个框架都包含一个文档，因此一个框架集会包含多个文档。在保存文档的时候，不能只简单地保存一个文档，要将整个网页文档都保存下来。演示编辑框架网页

第五十二页，共五十八页，2022年，8月28日8.2.4框架属性及框架组属性设置

1．框架属性利用框架属性面板可以查看和设置框架的属性，如为框架命名、设置框架的边框及颜色等。首先选择“窗口”|“其它”|“框架”命令，或按快捷键“Shift+F2”，打开“框架”