网页制作超链接精品文稿.ppt

《网页制作超链接精品文稿.ppt》由会员分享，可在线阅读，更多相关《网页制作超链接精品文稿.ppt（58页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、网页制作超链接第1页，本讲稿共58页6.1 利用利用Dreamweaver MX处理超链接处理超链接 6.1.1 超链接简介超链接简介 1什么是超链接什么是超链接 所所谓谓的的超超链链接接是是指指从从一一个个网网页页指指向向一一个个目目标标的的连连接接关关系系，这这个个目目标标可可以以是是另另一一个个网网页页，也也可可以以是是相相同同网网页页上上的的不不同同位位置置，还还可可以以是是一一个个图图片片、一一个个电电子子邮邮件件地地址址、一一个个文文件件，甚甚至至是是一一个个应应用用程程序序。而而在在一一个个网网页页中中用用来来超超链链接接的的对对象象，可可以以是是一一段段文文本本或或者者是是一一

2、个个图图片片。当当浏浏览览者者单单击击已已经经链链接接的的文文字字或或图图片片后后，链链接接目目标标将将显显示示在在浏浏览览器器上上，并且根据目标的类型来打开或运行。并且根据目标的类型来打开或运行。第2页，本讲稿共58页 按按照照链链接接路路径径的的不不同同，网网页页中中超超链链接接一一般般分分为为以以下下3 3种类型：种类型：内内部部链链接接：即即在在同同一一个个站站点点内内的的不不同同页页面面之之间间相相互互联联 系系的的超链接。超链接。锚锚点点链链接接：可可以以链链接接到到网网页页中中某某个个特特定定位位置置的的链链接接。外外部部链链接接：把网页与把网页与InternetInternet

3、中的目标相联系的链接。中的目标相联系的链接。如如果果按按照照使使用用对对象象的的不不同同，网网页页中中的的链链接接又又可可以以分分为为：文文本本超超链链接接、图图像像超超链链接接、E-mail链链接接、锚锚点点链链接接、多多媒体文件链接、空链接等媒体文件链接、空链接等 第3页，本讲稿共58页3文档路径类型文档路径类型 在在一一个个网网站站中中，有有绝绝对对路路径径、和和根根目目录录相相对对路路径径以以及和文档相对路径及和文档相对路径3 3种类型的文档路径。种类型的文档路径。绝绝对对路路径径：是是包包含含服服务务器器协协议议（对对于于网网页页来来说说通通常常是是http:/http:/或或ftp

4、:/ftp:/）的完全路径。）的完全路径。和和文文档档相相对对的的路路径径：是是指指一一个个文文档档与与当当前前文文件件夹夹间间相对的路径。相对的路径。第4页，本讲稿共58页第5页，本讲稿共58页 6.1.2 创建文本超链接创建文本超链接 1建立文本超链接建立文本超链接 在在浏浏览览网网页页时时，鼠鼠标标指指针针经经过过某某些些文文本本时时，指指针针的的形形状状发发生生变变化化，同同时时文文本本也也会会发发生生变变化化（如如出出现现下下划划线线、文文本本的的颜颜色色发发生生变变化化、字字体体发发生生变变化化等等），提提示示这这是是带带链链接接的的文文本本。此此时时点点击击鼠鼠标标，就就会会打打

5、开开所所链链接接的的网网页页，这就是文本超链接。这就是文本超链接。第6页，本讲稿共58页 在在Dreamweaver MXDreamweaver MX中创建文本超链接的步骤为：中创建文本超链接的步骤为：（1）在在网网页页上上选选择择需需要要添添加加超超链链接接的的文文本本，打打开开文文本本的的属属性面板。性面板。（2）在属性面板上指定文字的链接目标。）在属性面板上指定文字的链接目标。（3）在）在“目标目标”下拉列表框中选择目标文件打开的方式。下拉列表框中选择目标文件打开的方式。设设置置结结束束后后，在在网网页页中中被被选选择择的的文文字字改改变变了了颜颜色色，且且在在文文字字底底部部出出现现一

6、一条条下下划划线线，即即文文字字的的超超链链接接设设置置完完成成。在在键键盘盘上上按按“F12”键键，即即可可将将网网页页在在浏浏览览器器中中打打开开。单单击击链接的文字，即可打开目标文件。链接的文字，即可打开目标文件。第7页，本讲稿共58页2编辑文本超链接编辑文本超链接 （1 1）设置文本链接的状态）设置文本链接的状态 一一个个未未被被访访问问过过的的链链接接与与一一个个被被激激活活的的链链接接在在形形式式上上肯肯定定会会有有所所区区别别，链链接接被被访访问问过过了了也也会会发发生生变变化化，提提示示用用户户这这是是一一个个已已经经点点击击过过的的链链接接，所所有有这这些些都都是是链链接接的

7、的状状态态。通通过过设设置置不不同同的的文文本本颜颜色色可可以以使使各各个状态区别开来。个状态区别开来。第8页，本讲稿共58页 （2 2）删除文本超链接）删除文本超链接 在在Dreamweaver Dreamweaver MXMX中中要要删删除除一一个个文文本本超超链链接接很很容容易易，先先用用鼠鼠标标选选定定文文本本对对象象，将将光光标标定定位位于于属属性性面面板板的的“链链接接”文文本本框框中中，用用“BackSpace”BackSpace”键键或或“Delete”Delete”键键，将将其其显显示示的的超超链链接接对对象象文文件件名名删删除除，再再回回车车，或或选选择择“修修改改”|“|

8、“移移除除链链接接”命命令令，都都可可以以删删除除超超链链接接而而保保留留原原文文本对象。本对象。第9页，本讲稿共58页 1创建图像超链接创建图像超链接 6.1.3 创建图像超链接创建图像超链接 给给图图像像添添加加链链接接，使使其其指指向向其其他他的的网网页页或或者者文文档档，就就是是图像超链接。图像超链接。（1 1）选选中中需需要要建建立立超超链链接接的的图图像像，此此时时属属性性面面板板显显示示图图像像的的属性属性 。（2 2）在属性面板中为图像添加文档相对路径的链接。）在属性面板中为图像添加文档相对路径的链接。（3 3）按）按“F12”F12”预览网页。预览网页。2删除图像超链接删除图

9、像超链接 删除图片超链接与删除文本超链接的方法相同删除图片超链接与删除文本超链接的方法相同。第10页，本讲稿共58页 锚锚记记，也也称称为为书书签签或或锚锚点点，用用来来标标记记文文档档中中的的特特定定位位置置，使使用用其其可可以以跳跳转转到到当当前前文文档档或或其其他他文文档档中中的的标标记记位位置置，免免去去浏浏览览者者翻翻阅阅网网页页寻寻找找信信息息的的麻麻烦烦。在在网网页页中中加加入入锚锚记记包包括括两两方方面面的的工工作作，一一是是在在网网页页中中创创建建锚锚记记，另另一个就是为锚记建立链接。一个就是为锚记建立链接。6.1.4 创建锚记超链接创建锚记超链接 第11页，本讲稿共58页

10、创建锚记的步骤如下：创建锚记的步骤如下：（1 1）将将光光标标移移到到需需要要加加入入锚锚记记的的地地方方，一一般般是是将将光光标标放置在一行或是一段文字的开头部分。放置在一行或是一段文字的开头部分。（2 2）单单击击插插入入“常常用用”面面板板上上的的按按钮钮，或或是是选选择择主主窗窗口口的的菜菜单单“插插入入”|“|“命命名名锚锚记记”命命令令，将将弹弹出出“命命名名锚锚记记”对话框。对话框。（3 3）在对话框的）在对话框的“锚记名称锚记名称”文本框输入锚记的名称。文本框输入锚记的名称。（4 4）单击）单击“确定确定”按钮。按钮。1创建锚记创建锚记 第12页，本讲稿共58页在命名锚记时，必

11、须遵循以下规定：在命名锚记时，必须遵循以下规定：只只能能使使用用字字母母和和数数字字，锚锚记记命命名名不不支支持持中中文文。虽虽然然在在插插入入锚锚记记对对话话框框中中能能输输入入中中文文，但但在在属属性性面面板板上上显显示示的的则则是是一一堆堆乱码，且在为锚记添加链接的时候，也无法工作。乱码，且在为锚记添加链接的时候，也无法工作。锚锚记记名名称称的的第第1 1个个字字符符最最好好是是英英文文字字母母，一一般般不不要要以以数数字作为锚记名称的开头。字作为锚记名称的开头。锚记名称区别英文字母的大小写。锚记名称区别英文字母的大小写。锚记名称间不能含有空格，也不能含有特殊字符。锚记名称间不能含有空格

12、，也不能含有特殊字符。第13页，本讲稿共58页 创创建建锚锚记记后后，还还必必须须链链接接锚锚记记。选选择择想想要要链链接接到到锚锚记记的的文文字字或或图图片片，然然后后按按如如下下方方法法中中的的任任意意一一种种进进行行操操作。作。2链接锚记链接锚记 （1）在在属属性性面面板板上上的的“链链接接”文文本本框框中中输输入入符符号号#和和锚锚记名称。记名称。（2）选选择择文文字字或或图图片片后后，按按住住Shift键键，然然后后拖拖动动鼠鼠标标指指向锚记。向锚记。（3 3）按按住住属属性性面面板板上上的的“指指向向文文件件”按按钮钮，并并拖拖动动鼠鼠标指向锚记。标指向锚记。第14页，本讲稿共58

13、页在链接锚记时，应注意以下事项：在链接锚记时，应注意以下事项：在在#和锚记名之间不要留有空格，否则链接会失败。和锚记名之间不要留有空格，否则链接会失败。在在不不同同文文件件夹夹中中为为锚锚记记创创建建链链按按时时，其其文文件件名名后后缀缀必必定定是是“.htm”，而而不不能能写写成成“.html”，否否则则链链接接也也会失败。会失败。符号符号#必须是半角符号，而不能为全角符号。必须是半角符号，而不能为全角符号。第15页，本讲稿共58页 如如果果希希望望浏浏览览者者在在浏浏览览网网页页时时，只只要要浏浏览览者者单单击击E-mail链链接接时时，就就会会在在浏浏览览端端自自动动打打开开浏浏览览器器

14、默默认认的的E-mail处处理理程程序序，收收件件人人的的地地址址将将会会被被E-mail超超链链接接中中的的指指定定地地址址自自动动装入，无需浏览者输入，就需要创建电子邮件链接装入，无需浏览者输入，就需要创建电子邮件链接。6.1.5 创建电子邮件超链接创建电子邮件超链接 第16页，本讲稿共58页创建电子邮件链接的步骤如下：创建电子邮件链接的步骤如下：（1）将将光光标标置置于于网网页页中中要要添添加加E-mail链链接接的的地地方方，或或选选中中文文字字，通通过过插插入入“常常用用”面面板板上上的的“电电子子邮邮件件链链接接”按按钮钮，或或通通过过主主窗窗口口菜菜单单“插插入入”|“电电子子邮

15、邮件件链链接接”命命令令，将将弹弹出出 “电电子邮件链接子邮件链接”对话框。对话框。（2）如如果果未未选选中中文文字字，可可以以在在“文文本本”文文本本框框中中添添加加所所需需文文字字；如如果果已已经经选选中中超超链链接接文文字字，将将会会在在“文文本本”文文本本框框中中自自动动显显示示。然然后后在在“E-mail”文文本本框框中中输输入入E-mail地址，单击地址，单击“确定确定”按钮，就可以了。按钮，就可以了。第17页，本讲稿共58页 如如果果想想让让网网站站提提供供文文件件下下载载的的功功能能，就就必必须须建建立立下下载载文文件件超超链链接接。实实现现文文件件下下载载的的功功能能很很简简

16、单单，只只需需加加入入连连接接到到文文件件的的超超链链接接就就可可以以了了。连连接接到到网网站站中中下下载载文文件件的超链接也算是内部超链接中的一种。的超链接也算是内部超链接中的一种。创建下载文件超链接的方法如下：创建下载文件超链接的方法如下：首首先先选选择择主主窗窗口口的的菜菜单单“站站点点”|“|“站站点点文文件件”命命令令，打打开开站站点点窗窗口口，找找到到需需要要链链接接的的目目标标文文件件。然然后后选选择择网网页页中中需需建建立立超超链链接接的的文文字字，按按下下“Shift”Shift”键键拖拖动动鼠鼠标标到到站站点点窗窗口口中中的的目目标文件。标文件。6.1.6 创建下载文件超链

17、接创建下载文件超链接 第18页，本讲稿共58页 空空链链接接是是一一个个未未指指定定目目标标的的链链接接，Dreamweaver MX的的行行为为面面板板中中列列出出了了许许多多行行为为，这这些些行行为为相相当当于于使使用用JavaScript编编写写的的程程序序或或函函数数，要要想想对对文文本本设设置置行行为为，首先为文本建立空链接，这样行为才有效。首先为文本建立空链接，这样行为才有效。为为文文本本建建立立空空链链接接时时，只只要要先先在在文文档档窗窗口口选选定定文文本本，然然后后在在属属性性面面板板中中的的“链链接接”栏栏中中输输入入一一个个数数值值符符“#”即即可可。建建立立空空链链接接

18、的的目目的的就就是是为为了了应应用用行行为为，其其他他情况下不必建立空链接。情况下不必建立空链接。6.1.7 创建空链接创建空链接 第19页，本讲稿共58页 通过本章学习，应该掌握以下内容：通过本章学习，应该掌握以下内容：第第4章章 网页表格的处理网页表格的处理 1.创建表格的方法创建表格的方法2.编辑表格的方法编辑表格的方法3.表格的排序方法表格的排序方法4.表格的格式化方法表格的格式化方法5.设置表格属性的方法设置表格属性的方法6.用表格设计页面布局的方法用表格设计页面布局的方法 第20页，本讲稿共58页4.1 利用利用Dreamweaver MX处理网页表格处理网页表格 4.1.1 创建

19、表格创建表格 1新建表格新建表格 利利用用Dreamweaver MX创创建建新新表表格格时时，首首先先打打开开插插入入“常常用用”面面板板，然然后后可可以以通通过过下下列列四四种种方方式式中中的的任任意一种：意一种：（1）在插入）在插入“常用常用”面板上，单击插入表格按钮面板上，单击插入表格按钮 。（2）通过主窗口的菜单）通过主窗口的菜单“插入插入”|“表格表格”命令。命令。（3）使用快捷组合键）使用快捷组合键“Ctrl+Alt+T”。（4）在在插插入入“常常用用”面面板板上上，拖拖动动表表格格 按按钮钮到到主主窗窗口的工作区中。口的工作区中。第21页，本讲稿共58页 执执行行完完上上述述任

20、任何何一一种种操操作作，都都可可以以看看到到如如图图所所示示的的“插入表格插入表格”对话框。对话框。行数：初次指定表格的总行数。行数：初次指定表格的总行数。列数：初次指定表格的总列数。列数：初次指定表格的总列数。单元格填充：指定单元格的大小，以像素为单位。单元格填充：指定单元格的大小，以像素为单位。单元格间距：指定单元格之间的距离，以像素为单位。单元格间距：指定单元格之间的距离，以像素为单位。宽宽度度：指指定定表表格格的的宽宽度度，以以百百分分比比或或像像素素为为单单位位（百百分分比比用于根据浏览器窗口的大小来自动调整表格的宽度）。用于根据浏览器窗口的大小来自动调整表格的宽度）。边边框框：指指

21、定定表表格格边边界界的的宽宽度度，以以像像素素为为单单位位（如如果果在在浏浏览器窗口中不显示表格的边框，则定义为览器窗口中不显示表格的边框，则定义为0 0）。）。第22页，本讲稿共58页2导入表格数据文件导入表格数据文件 在在Dreamweaver Dreamweaver MXMX中中，利利用用插插入入列列表表数数据据命命令令可可以以很很容容易易把把表表格格数数据据加加入入到到网网页页中中。在在插插入入外外部部数数据据前前，首首先先要要将将表表格格数数据据文文件件转转换换成成 .txt.txt（文文本本文文件件）格格式式，并并且且该该文文件件中中的的数数据据要要带带有有分分隔隔符符，如如逗逗号

22、号、分分号号、冒冒号号等等，但但加加入入到到Dreamweaver Dreamweaver MXMX中中的的数数据据并并不会出现分隔符，且会自动生成表格。不会出现分隔符，且会自动生成表格。要加入外部数据，选择如下的任何一种操作：要加入外部数据，选择如下的任何一种操作：（1 1）选择）选择“文件文件”|“导入导入”|“表格式数据表格式数据”命令。命令。（2 2）选选择择“插插入入”|“表表格格对对象象”|“导导入入表表格格式式数数据据”命令。命令。（3 3）单单击击插插入入“常常用用”面面板板上上的的“表表格格数数据据”按按钮钮 。第23页，本讲稿共58页4.1.2 编辑表格编辑表格（1）如果要

23、选择整个表格，可进行如下的操作之一：）如果要选择整个表格，可进行如下的操作之一：将将光光标标置置于于表表格格中中的的某某个个单单元元格格中中，选选择择“修修改改”|“表表格格”|“选择表格选择表格”命令。命令。将将光光标标置置于于表表格格中中的的某某个个单单元元格格中中，单单击击鼠鼠标标右右键键，在在弹弹出的快捷菜单中选择出的快捷菜单中选择“表格表格”|“选择表格选择表格”命令。命令。单击表格的边线。单击表格的边线。1选择表格选择表格 第24页，本讲稿共58页（2）选择单个单元格的方法有以下几种：）选择单个单元格的方法有以下几种：将将光光标标置置于于所所要要选选择择的的单单元元格格中中，按按一

24、一次次组组合合键键“Ctrl+A”。将光标置于所要选择的单元格中，向右拖动鼠标。将光标置于所要选择的单元格中，向右拖动鼠标。按按住住Ctrl键键，单单击击所所要要选选择择的的单单元元格格，再再单单击击一一次次则则取取消消对单元格的选择。对单元格的选择。第25页，本讲稿共58页（3）选择多个单元格的方法有以下几种：）选择多个单元格的方法有以下几种：按住按住Ctrl键，单击所要选择的所有单元格。键，单击所要选择的所有单元格。将光标置于单元格中，拖动鼠标，选择多个单元格。将光标置于单元格中，拖动鼠标，选择多个单元格。如如果果要要选选择择整整行行，将将光光标标置置于于该该行行的的左左边边缘缘，当当光光

25、标标变成变成图标时单击鼠标左键。图标时单击鼠标左键。如如果果要要选选择择整整列列，将将光光标标置置于于该该列列的的上上边边缘缘，当当光光标标变变成成图标时单击鼠标左键。图标时单击鼠标左键。第26页，本讲稿共58页（4）选择的全部单元格的方法有以下几种：）选择的全部单元格的方法有以下几种：将将光光标标置置于于第第1个个单单元元格格中中，并并拖拖动动鼠鼠标标至至最最后后一一个个单单元元格。格。将将光光标标置置于于第第1个个单单元元格格中中，按按住住Shift键键，再再单单击击最最后后一个单元格。一个单元格。将将光光标标置置于于第第1行行的的左左边边缘缘，当当光光标标变变成成图图标标时时，向向下下拖

26、动鼠标至最后一行。拖动鼠标至最后一行。将将光光标标置置于于第第1列列的的上上边边缘缘，当当光光标标变变成成图图标标时时，向向右拖动鼠标至最后一列。右拖动鼠标至最后一列。第27页，本讲稿共58页（1）在现有的表格中插入单元行，可以选择以下的操作之一：）在现有的表格中插入单元行，可以选择以下的操作之一：将将光光标标移移到到要要插插入入单单元元行行的的下下一一行行，选选择择“修修改改”|“表格表格”|“插入行插入行”命令。命令。将光标移到要插入单元行的下一行，按组合键将光标移到要插入单元行的下一行，按组合键“Ctrl+M”。将将光光标标移移到到要要插插入入单单元元行行的的下下一一行行，单单击击鼠鼠标

27、标右右键键，在弹出的快捷菜单中选择在弹出的快捷菜单中选择“表格表格”|“插入行插入行”命令。命令。2添加添加/删除行列删除行列 第28页，本讲稿共58页（2）在现有的表格中插入单元列，可以选择以上的操作之一：）在现有的表格中插入单元列，可以选择以上的操作之一：将将光光标标移移到到在在插插入入单单元元列列的的右右边边一一列列，选选择择“修修改改”|“表表格格”|“插入列插入列”命令。命令。将将光光标标移移到到要要插插入入单单元元列列的的右右边边一一列列，按按组组合合键键“Ctrl+Shift+A”。将将光光标标移移到到要要插插入入单单元元列列的的右右边边一一列列，单单击击鼠鼠标标右右键键，在弹出

28、的快捷菜单中选择在弹出的快捷菜单中选择“表格表格”|“插入列插入列”命令。命令。第29页，本讲稿共58页（3）如果想在现有的表格中添加多行或多列，可执行以下操作：）如果想在现有的表格中添加多行或多列，可执行以下操作：首首先先将将光光标标移移到到要要插插入入行行或或列列附附近近的的单单元元格格中中，单单击击鼠鼠标标右右键键，在在弹弹出出的的下下拉拉菜菜单单中中选选择择“表表格格”|“插插入入行行或或列列”命命令令，或或是是选选择择“修修改改”|“表表格格”|“插插入入行行或或列列”命命令令，将将弹弹出出如如图图4-5所所示示的的“插插入入行行或或列列”对对话话框框。在在此此对对话话框框中中进进行

29、行相相关关的的设设置置，然然后后单单击击“确确定定”按按钮钮，设置的多列或多行将插入到页面中。设置的多列或多行将插入到页面中。第30页，本讲稿共58页（4）删除整行）删除整行/整列，可以采用下列办法之一：整列，可以采用下列办法之一：先选择欲删除的整行或整列，直接按先选择欲删除的整行或整列，直接按Del键，即可删除。键，即可删除。先先将将光光标标移移到到要要删删除除的的行行或或列列中中，选选择择“修修改改”|“表表格格”|“删除行删除行”或或“删除列删除列”命令。命令。将将光光标标移移到到要要删删除除的的行行或或列列中中，单单击击鼠鼠标标右右键键，在在弹弹出出的的快快捷菜单中选择捷菜单中选择“表

30、格表格”|“删除行删除行”或或“删除列删除列”命令。命令。第31页，本讲稿共58页（1）设置表格的宽度及高度）设置表格的宽度及高度 在在Dreamweaver MX中中，修修改改表表格格的的大大小小有有以以下下两两种方法。种方法。通过鼠标拖曳法可以粗略地调整表格的大小。通过鼠标拖曳法可以粗略地调整表格的大小。通过通过“表格属性表格属性”对话框可以精确地调整表格的大小。对话框可以精确地调整表格的大小。在在创创建建表表格格时时，可可以以通通过过表表格格对对话话框框来来设设置置表表格格的的宽宽度度，但但无无法法设设置置表表格格的的高高度度，如如果果要要设设置置表表格格的的高高度度，可可以以通通过过表

31、表格属性面板来确定。格属性面板来确定。3修改表格大小修改表格大小 第32页，本讲稿共58页（2）设置单元格的宽度及高度）设置单元格的宽度及高度 在在默默认认情情况况下下，单单元元格格的的宽宽度度是是随随表表格格的的宽宽度度而而定定的的，表表格格中中每每一一列列的的宽宽度度基基本本上上都都相相等等，也也就就是是说说每每一一个个单单元元格格的的宽宽度度都都是是相相同同的的。如如果果不不指指定定表表格格的的高高度度，则则表表格格中中同同一一行行的的高高度度也也是是相相等等的的，即即单单元元格格的的高高度度相相同同。在在属属性性面面板板上上可可以以改改变变单单元元格格默默认认的的宽宽度度和和高高度度。

32、将将光光标标置置于于需需要要设设置置宽宽度度或或高高度度的的单单元元格格中中，此此时时属属性性面面板板显显示示单单元元格格属属性性。在在属属性性面面板板上上的的“宽宽”或或“高高”文文本本框框中中输输入入适适当当的的数数值值即即可可。但但单单元元格格宽宽度度与与高高度度的的单单位位只可以使用像素，不能使用百分比。只可以使用像素，不能使用百分比。第33页，本讲稿共58页4合并合并/拆分单元格拆分单元格 （1）合并单元格）合并单元格 首首先先在在表表格格中中选选择择需需合合并并的的单单元元格格，属属性性面面板板变变成单元格属性面板，然后选择下列操作之一：成单元格属性面板，然后选择下列操作之一：选择

33、选择“修改修改”|“表格表格”|“合并单元格合并单元格”命令。命令。单单击击鼠鼠标标右右键键，在在弹弹出出的的快快捷捷菜菜单单中中选选择择“表表格格”|“合并单元格合并单元格”命令。命令。按组合键按组合键“Ctrl+Alt+M”。单击单元格属性面板上的合并单元格图标单击单元格属性面板上的合并单元格图标 。第34页，本讲稿共58页 （2）拆分单元格）拆分单元格首首先先在在表表格格中中选选择择需需拆拆分分的的单单元元格格，选选择择下下列列任任何何一一种种操作：操作：选择选择“修改修改”|“表格表格”|“拆分单元格拆分单元格”命令。命令。单单击击鼠鼠标标右右键键，在在弹弹出出的的下下拉拉菜菜单单中中

34、选选择择“表表格格”|“拆分单元格拆分单元格”命令。命令。按组合键按组合键“Ctrl+Alt+SCtrl+Alt+S”。单击属性面板上的拆分单元格图标单击属性面板上的拆分单元格图标 。在在“拆拆分分单单元元格格”对对话话框框中中，可可以以选选择择拆拆分分成成行行和列以及行和列以及行/列的数量。列的数量。第35页，本讲稿共58页4.1.3 表格属性的设置表格属性的设置 要要将将表表格格背背景景设设为为单单一一的的颜颜色色，首首先先选选择择整整个个表表格格，再再单单击击属属性性面面板板上上“背背景景颜颜色色”后后面面的的颜颜色色框框，在在弹弹出出的的调调色色板板中中选选择择颜颜色色，或或者者是是在

35、在后后面面的的文文本本框框中中直直接接输输入入颜颜色色的的色色码码；要要将将图图像像设设为为表表格格的的背背景景，首首先先选选择择整整个个表表格格，再再在在属属性性面面板板上上的的“背背景景图图像像”文文本本框框中中输输入入图图像像所所在在的的路路径径，或或是是单单击击其其后后的的文文件件夹夹图图标标，在在弹弹出出的的对对话话框框中中选选择图像文件。择图像文件。1设置表格的背景设置表格的背景 第36页，本讲稿共58页5在表格中添加文字和图片在表格中添加文字和图片 （1 1）在表格中添加文字）在表格中添加文字 在在上上图图中中的的表表格格内内按按要要求求输输入入文文字字，调调整整文文字字的的字字

36、号、字体、号、字体、对齐对齐方式等。方式等。（2 2）在表格中插入图片）在表格中插入图片 选选中中要要插插入入图图片片的的单单元元格格，选选择择“插插入入”|“图图像像”菜单命令，打开菜单命令，打开“选择图像源选择图像源”对话框，对话框，如图所示如图所示；在在对对话话框框中中选选择择图图像像，选选中中图图像像文文件件之之后后，单单击击“确认确认”按钮，图片即插入到相应的单元格里。按钮，图片即插入到相应的单元格里。第37页，本讲稿共58页2设置表格的边框颜色和宽度设置表格的边框颜色和宽度 设设置置表表格格的的边边框框颜颜色色和和宽宽度度时时，必必须须指指定定表表格格的边框线的宽度不为的边框线的宽

37、度不为0。要要为为表表格格的的边边框框指指定定颜颜色色和和宽宽度度，可可按按如如下下步步骤进行。骤进行。（1 1）选选择择表表格格，单单击击其其属属性性面面板板上上“边边框框颜颜色色”的的颜颜色色框框 ，在在弹弹出出的的调调色色板板中中选选择择颜颜色色，或或者者是是在在后后面面的的文文本本框框中中直直接接输输入入颜颜色色的的色色码码，即即可可为为表格的边框添加颜色。表格的边框添加颜色。（2 2）在在表表格格属属性性面面板板上上的的“边边框框”文文本本框框中中输输入入边框的宽度数值。边框的宽度数值。第38页，本讲稿共58页 在在Dreamweaver Dreamweaver MXMX中中可可以以

38、实实现现按按数数字字的的排排序序和和按按字母的排序，具体操作方法如下：字母的排序，具体操作方法如下：（1 1）单单击击表表格格中中的的任任一一单单元元格格，执执行行主主菜菜单单中中的的“命命令令”|“|“排排序序表表格格”命命令令，打打开开 “排排序序表表格格”对对话话框框，如如图所示图所示。（2 2）在在“排排序序按按”下下拉拉列列表表框框中中选选择择要要排排序序的的列列（第第一一关关键键字），在字），在“顺序顺序”下拉列表框中选择所需顺序。下拉列表框中选择所需顺序。（3 3）在在“再再按按”下下拉拉列列表表框框中中选选择择要要进进行行次次级级排排序序的的顺顺序。序。（4 4）单击）单击“确

39、定确定”按钮完成设置。按钮完成设置。4.1.4 表格的排序表格的排序 第39页，本讲稿共58页 Dreamweaver Dreamweaver MXMX预预置置了了十十几几种种表表格格设设计计，使使用用这这些些预预置置的的表表格格样样式式格格式式化化表表格格，可可以以大大大大提提高高表表格格的的设设计计效率。效率。格式化表格的具体操作方法如下：格式化表格的具体操作方法如下：选选择择一一个个表表格格，然然后后执执行行主主菜菜单单中中的的“命命令令”|“|“格格式式化化表表格格”命命令令，打打开开如如图图所所示示的的“格格式式化化表表格格”对对话话框框。从从中中选选择择一一种种模模板板方方案案，再

40、再对对各各选选项项进进一一步步自自定定义义设设置置，然后应用于自己所设计的表格中。然后应用于自己所设计的表格中。4.1.5 表格的格式化表格的格式化 第40页，本讲稿共58页 Dreamweaver Dreamweaver MXMX提提供供了了一一种种新新的的网网页页排排版版视视图图布布局局视视图图（Layout Layout ViewView），在在这这种种视视图图模模式式下下，用用户户可可以以通通过过绘绘制制布布局局表表格格和和布布局局单单元元格格，从从而而可可以以像像在在一一张张白白纸纸上上用用笔笔来来规规划划网网页页的的布布局局，并并可可在在布布局局单单元元格格中中插插入入文文本本和和

41、图图像像，通通过过移移动动布布局局表表格格和和布布局局单单元元格格的的位位置置来来精精确确地地定定位位网网页上的文本和图像。页上的文本和图像。步骤如下：步骤如下：1 1打开打开“布局视图布局视图”面板面板 2.2.绘制布局表格绘制布局表格 4.1.6 用表格进行页面布局用表格进行页面布局 第41页，本讲稿共58页通过本章学习，应该掌握以下内容：通过本章学习，应该掌握以下内容：1.认识框架网页认识框架网页2.创建框架网页的方法创建框架网页的方法3.编辑框架网页的方法编辑框架网页的方法4.设置框架属性的方法设置框架属性的方法第第8章章 利用框架技术制作网页利用框架技术制作网页 第42页，本讲稿共5

42、8页8.1 认识框架网页认识框架网页 框框架架网网页页是是种种特特殊殊的的HTML网网页页，它它可可将将浏浏览览器器窗窗口口分分成成不不同同的的区区域域，称称为为框框架架区区域域。每每个个区区域域都都可可以以显显示不同的网页。示不同的网页。在在框框架架网网页页中中，用用来来分分隔隔网网页页的的窗窗格格称称为为框框架架。每每个个框框架架包包括括框框架架高高度度、框框架架宽宽度度、滚滚动动条条和和框框架架边边框框，此此外外还还可可指指定定框框架架的的内内边边距距（框框架架与与网网页页正正文文之之间间的的距距离）。离）。第43页，本讲稿共58页 （1 1）只只要要单单击击某某一一个个框框架架区区域域

43、内内的的超超链链接接，其其指指向向的的网网页页就就会会在在另另一一个个框框架架区区域域中中显显示示，而而不不必必将将整整个个浏浏览览器器窗窗口口中中的内容更换一遍。的内容更换一遍。（2 2）固定网页中的某些内容。）固定网页中的某些内容。（3 3）并并不不是是所所有有的的浏浏览览器器都都能能显显示示框框架架网网页页，这这也也是是框框架网页的一个局限。架网页的一个局限。1框架网页的特点框架网页的特点 第44页，本讲稿共58页 2框架网页的结构框架网页的结构 根根据据框框架架分分布布的的不不同同和和各各框框架架作作用用的的不不同同，框框架架网网页页被被分分为为多多种种类类型型。常常用用到到的的框框架

44、架结结构构有有：左左侧侧框框架架、右右侧侧框框架架、顶顶部部框框架架、底底部部框框架架、上上方方和和下下方方框框架架以以及及各各种嵌套框架结构。种嵌套框架结构。第45页，本讲稿共58页 在在Dreamweaver MXDreamweaver MX中创建框架的具体操作步骤如下：中创建框架的具体操作步骤如下：（1 1）选选择择主主菜菜单单中中的的“文文件件”|“新新建建”命命令令，打打开开一一个个新新文档窗。文档窗。（2 2）将插入面板切换到）将插入面板切换到“框架框架”类，插入面板如图所示。类，插入面板如图所示。8.2 利用利用Dreamweaver MX处理框架处理框架 8.2.1 创建框架网

45、页创建框架网页 1.建立框架建立框架 第46页，本讲稿共58页（3）执行以下操作之一，即可创建框架。）执行以下操作之一，即可创建框架。选选择择“插插入入”|“框框架架”命命令令，从从弹弹出出的的子子菜菜单单中中选选择择任任意一个选项。意一个选项。选选择择“修修改改”|“框框架架页页”命命令令，从从弹弹出出的的子子菜菜单单中中选选择择任意一个选项。任意一个选项。单击插入单击插入“框架框架”面板上的任一种插入框架图标按钮。面板上的任一种插入框架图标按钮。第47页，本讲稿共58页 2建立嵌套的框架组建立嵌套的框架组 一一个个框框架架组组嵌嵌套套在在另另一一个个框框架架组组内内称称之之为为嵌嵌套套框框

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

47、“框架框架”面板中的插入框架图标按钮。面板中的插入框架图标按钮。第48页，本讲稿共58页（1）选择整个框架）选择整个框架要选择整个框架可执行以下操作之一：要选择整个框架可执行以下操作之一：将将鼠鼠标标指指针针移移到到整整个个边边框框位位置置的的同同时时，按按住住AltAlt键键，当当鼠鼠标标指指针针变变为为垂垂直直箭箭头头（或或水水平平箭箭头头）时时，单单击击边边框框即即可可选选中中整整个框架。个框架。如如果果当当前前选选择择的的是是一一个个子子框框架架，需需要要重重新新选选择择整整个个框框架架，可可以以将将鼠鼠标标指指针针移移到到第第一一次次分分割割框框架架的的边边框框位位置置，当当鼠鼠标标

48、指指针针变变为为垂垂直直箭箭头头（或或水水平平箭箭头头）时时，单单击击边边框框即即可可选选中中整整个个框架组。框架组。除除了了上上述述方方法法之之外外，选选择择框框架架还还可可以以通通过过“框框架架”面面板板来来完完成。成。3选择框架选择框架 第49页，本讲稿共58页（2）选择子框架）选择子框架 在在文文档档窗窗口口中中按按住住Alt键键，然然后后用用鼠鼠标标单单击击欲欲选选择择的的子子框框架架。文文档档窗窗口口中中该该子子框框架架的的周周围围被被虚虚线线包包围围，表表示示它它已已经经被选中，同时在状态栏上加黑显示标记符被选中，同时在状态栏上加黑显示标记符。同同样样也也可可以以通通过过“框框架

49、架”面面板板来来选选择择子子框框架架。只只要要在框架面板中单击相应的子框架即可，在框架面板中单击相应的子框架即可，4删除框架删除框架 将将光光标标放放在在框框架架的的边边框框上上，当当光光标标变变成成垂垂直直箭箭头头（或或水水平平箭箭头头）时时，按按住住鼠鼠标标左左键键，将将框框架架的的边边框框拖拖出出父父框框架架或或页页面面之之外外，即可将这个框架删除。即可将这个框架删除。第50页，本讲稿共58页 8.2.2 编辑框架网页编辑框架网页 框框架架创创建建好好以以后后，就就可可以以对对框框架架进进行行编编辑辑了了。每每一一个个框框架架里里都都是是一一个个文文档档，可可以以直直接接添添加加内内容容

50、，也也可可以以在在框框架架内内打打开已经存在的文档开已经存在的文档。演示编辑框架网页演示编辑框架网页 第51页，本讲稿共58页 8.2.3 保存框架网页保存框架网页 每每一一个个框框架架都都包包含含一一个个文文档档，因因此此一一个个框框架架集集会会包包含含多多个个文文档档。在在保保存存文文档档的的时时候候，不不能能只只简简单单地地保保存存一一个个文文档档，要要将将整个网页文档都保存下来。整个网页文档都保存下来。演示编辑框架网页演示编辑框架网页 第52页，本讲稿共58页8.2.4 框架属性及框架组属性设置框架属性及框架组属性设置 1框架属性框架属性 利利用用框框架架属属性性面面板板可可以以查查看