（中职）网页设计与制作教程4.ppt

《（中职）网页设计与制作教程4.ppt》由会员分享，可在线阅读，更多相关《（中职）网页设计与制作教程4.ppt（34页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、YCF正版可修改PPT（中职）网页设计与制作教程4项目活动四化妆品网站设计项目活动四化妆品网站设计:超级链接超级链接的应用的应用任务一绝对任务一绝对 URL、相对、相对 URL及常见的超级链及常见的超级链接类型接类型任务二各种超级链接的创建方法任务二各种超级链接的创建方法任务三化妆品网站建设任务三化妆品网站建设返回任务一绝对、相对任务一绝对、相对 及常及常见的超级链接类型见的超级链接类型.的基本概念的基本概念统一资源定位符统一资源定位符(的缩写的缩写)，也被称为网页地址，也被称为网页地址，是因特网上标准的资源地是因特网上标准的资源地址。址。通常包括通常包括 个部分个部分:协议类型、主机名和路径

2、及文件名。协议类型、主机名和路径及文件名。协议应表明使用何种方法获得所需的信息，协议应表明使用何种方法获得所需的信息，常用的协议包括常用的协议包括(，超文超文本传输协议本传输协议)、(，文件传输协议文件传输协议)、(电子邮件协议电子邮件协议)、(新闻组协议新闻组协议)、(远程登录协议远程登录协议)等。等。对于对于 协议，协议，应在协议后放置一个冒号，应在协议后放置一个冒号，然后跟然后跟 地址，而对于常用的地址，而对于常用的 和和 等协议，等协议，则是在冒则是在冒号后加两个斜杠，号后加两个斜杠，斜杠之后是相关信息的主机地址。斜杠之后是相关信息的主机地址。下一页返回任务一绝对、相对任务一绝对、相对

3、 及常及常见的超级链接类型见的超级链接类型当用户在当用户在 上浏览或定位资源时，上浏览或定位资源时，常常可以省略所常常可以省略所要访问信息的详细地址和文件名，要访问信息的详细地址和文件名，因为服务器会按照默认设置为访问因为服务器会按照默认设置为访问者定位资源。者定位资源。例如，例如，如果在浏览器的地址栏中输入如果在浏览器的地址栏中输入:/.(协议名通常不区分大小写，协议名通常不区分大小写，因此因此 与与 的含义相同的含义相同)，实际上是访问实际上是访问“:/./.”或其他由服务或其他由服务器设置为主页的文件。器设置为主页的文件。.绝对路径与相对路径绝对路径与相对路径在指定在指定 资源时，资源时

4、，既可以使用绝对，既可以使用绝对，也可以也可以使用相对。使用相对。()绝对绝对 是指是指 上资源的完整地址，上资源的完整地址，其形式其形式通常如下通常如下:协议协议:/主机名主机名/路径路径/资源文件名资源文件名上一页 下一页返回任务一绝对、相对任务一绝对、相对 及常及常见的超级链接类型见的超级链接类型()相对相对 是指是指 上的资源相对于当前页面的上的资源相对于当前页面的地址，地址，它包含从当前页面指向目的页面位置的路径。它包含从当前页面指向目的页面位置的路径。.超级链接的类型超级链接的类型超级链接的主要作用是将物理上无序的内容组成一个有机的统一体。超级链接的主要作用是将物理上无序的内容组成

5、一个有机的统一体。常见的超级链接有文本超级链接、下载文件链接、电子邮件链接、图常见的超级链接有文本超级链接、下载文件链接、电子邮件链接、图像链接、空链接、热点链接与命名锚记链接等像链接、空链接、热点链接与命名锚记链接等。()文本超级链接是以文本为链接对象的一种常用的链接方式。文本超级链接是以文本为链接对象的一种常用的链接方式。作为作为链接对象的文本带有标志性，链接对象的文本带有标志性，它标志着链接网页的主要内容或主题。它标志着链接网页的主要内容或主题。()下载文件链接是指链接对象在浏览器中不能直接打开，下载文件链接是指链接对象在浏览器中不能直接打开，需要下载需要下载保存到本地主机上并利用相关的

6、软件及工具打开。保存到本地主机上并利用相关的软件及工具打开。()图像链接就是以图像为链接对象的超级链接，图像链接就是以图像为链接对象的超级链接，当用户单击该图像当用户单击该图像时打开链接网页或文档时打开链接网页或文档。上一页 下一页返回任务一绝对、相对任务一绝对、相对 及常及常见的超级链接类型见的超级链接类型()电子邮件超级链接就是让浏览者给网站发，电子邮件超级链接就是让浏览者给网站发，当浏览当浏览者单击包含电子邮件超级链接的网页对象时，者单击包含电子邮件超级链接的网页对象时，就会打开邮件出来工具就会打开邮件出来工具(如微软的如微软的)，并且自动将收信人地址并且自动将收信人地址设为网站建设者的

7、邮箱地址，设为网站建设者的邮箱地址，方便浏览者给网站反馈信息。方便浏览者给网站反馈信息。()空链接是未指派的链接。空链接是未指派的链接。空链接一般用于向页面上的对象或文本空链接一般用于向页面上的对象或文本附加行为。附加行为。()热点链接就是在一个图片上设定多个链接。热点链接就是在一个图片上设定多个链接。在因特网上浏览网页在因特网上浏览网页时，时，可以看到一个图像的各个部分链接到不同关联网页的情况。可以看到一个图像的各个部分链接到不同关联网页的情况。通通过设定热点链接，过设定热点链接，在单击图像的一部分时可以跳转到所链接的网页文在单击图像的一部分时可以跳转到所链接的网页文档或网站。档或网站。()

8、锚记也叫书签，锚记也叫书签，顾名思义，顾名思义，也就是网页中的标记。也就是网页中的标记。每当要在网每当要在网页中查找特定主题的内容时，页中查找特定主题的内容时，只需快速定位到相应的标记只需快速定位到相应的标记(锚点锚点)处即处即可，可，这就是命名锚记链接。这就是命名锚记链接。命名锚记链接一般用于内容比较多的网命名锚记链接一般用于内容比较多的网页。页。上一页返回任务二各种超级链接的创建方法任务二各种超级链接的创建方法一、文本超级链接的创建一、文本超级链接的创建文本超级链接有两种，文本超级链接有两种，一种是内部链接，一种是内部链接，一种是外部链接。一种是外部链接。下面将下面将分别介绍文本超级链接的

9、创建方法。分别介绍文本超级链接的创建方法。.内部链接内部链接选中要创建超级链接的文本对象，选中要创建超级链接的文本对象，在如在如图图 所示的属性面板中，所示的属性面板中，将光标定位到将光标定位到“链接链接”编辑栏中输入要链接的网页名称或单击后面的编辑栏中输入要链接的网页名称或单击后面的“浏览文件浏览文件”按钮按钮 ，打开打开“选择文件选择文件”对话框，对话框，如如图图 所示，所示，选择文件，选择文件，单击单击“确定确定”按钮。按钮。或选中要创建链接的文或选中要创建链接的文本对象，本对象，右键单击鼠标选择右键单击鼠标选择“创建链接创建链接”命令，命令，也可以打开也可以打开“选择选择文件文件”对话

10、框。对话框。还有一种方法就是选中文字对象，还有一种方法就是选中文字对象，按住按住 键拖动到文件面板上要链接的页面上即可。键拖动到文件面板上要链接的页面上即可。下一页返回任务二各种超级链接的创建方法任务二各种超级链接的创建方法链接一旦创建，链接一旦创建，属性面板中的属性面板中的“目标目标”项就有效，项就有效，单击单击“目标目标”下下拉菜单有四种状态，拉菜单有四种状态，表示打开链接文件的方法，表示打开链接文件的方法，其中各选项的含义其中各选项的含义如下如下:“”:表示在保留当前窗口的状态下，表示在保留当前窗口的状态下，在新窗口中显示在新窗口中显示被打开的链接网页。被打开的链接网页。“”:表示在当前

11、窗口中显示被打开的链接网页，如表示在当前窗口中显示被打开的链接网页，如果是框架网页，果是框架网页，则在副框架中显示被打开的链接网页。则在副框架中显示被打开的链接网页。“”:表示在当前窗口中显示被打开的链接网页，如果是表示在当前窗口中显示被打开的链接网页，如果是框架网页，框架网页，则在当前框架中显示被打开的链接网页。则在当前框架中显示被打开的链接网页。“”:表示在当前窗口中显示被打开的链接网页，如果是框表示在当前窗口中显示被打开的链接网页，如果是框架网页，架网页，则删除所有框架，则删除所有框架，显示当前网页。显示当前网页。上一页 下一页返回任务二各种超级链接的创建方法任务二各种超级链接的创建方法

12、.外部链接外部链接选中要创建超级链接的文本对象，选中要创建超级链接的文本对象，在属性面板的在属性面板的“链接链接”编辑栏中编辑栏中输入绝对地址即可。输入绝对地址即可。如果要给文本对象创建外部链接到如果要给文本对象创建外部链接到“百度百度”网网站，站，在在“链接链接”编辑栏中输入编辑栏中输入“:/.”网址即可网址即可。二、下载文件链接的创建二、下载文件链接的创建浏览网站的目的往往是查找并下载资料，浏览网站的目的往往是查找并下载资料，下载文件可利用下载文件链下载文件可利用下载文件链接来实现。接来实现。下载文件链接的创建方法和文本超级链接的相似，下载文件链接的创建方法和文本超级链接的相似，只是只是链

13、接的对象不能在网页中直接打开，链接的对象不能在网页中直接打开，单击此下载链接就会弹出如单击此下载链接就会弹出如图图 所示的对话框。所示的对话框。上一页 下一页返回任务二各种超级链接的创建方法任务二各种超级链接的创建方法三、电子邮件链接的创建三、电子邮件链接的创建.利用利用“属性属性”面板创建电子邮件链接面板创建电子邮件链接()在文档中，在文档中，选择要创建电子邮件链接的对象，选择要创建电子邮件链接的对象，一般是文字对象，一般是文字对象，如如“联系我们联系我们”。()在在“属性属性”面板的面板的“链接链接”编辑栏中输入编辑栏中输入“:电子电子邮件地址邮件地址”。.利用利用“电子邮件链接电子邮件链

14、接”对话框建立电子邮件链接对话框建立电子邮件链接()在文档中，在文档中，选择要创建电子邮件链接的对象。选择要创建电子邮件链接的对象。()单击单击“插入插入”工具栏的工具栏的“常用常用”选项卡，选项卡，单击单击“插入电子邮件插入电子邮件链接链接”按钮，按钮，弹出弹出“电子邮件链接电子邮件链接”对话框。对话框。在该对话框中输入在该对话框中输入 地址，地址，如如图图 所示。所示。上一页 下一页返回任务二各种超级链接的创建方法任务二各种超级链接的创建方法四、图像链接与空链接的创建四、图像链接与空链接的创建)图像链接就是为图像创建链接，图像链接就是为图像创建链接，创建方法如下创建方法如下:在文档中，在文

15、档中，选择图像，选择图像，在如在如图图 所示的图像所示的图像“属性属性”面板的面板的“链接链接”编辑栏中输入文档名称或单击编辑栏中输入文档名称或单击“浏览文件浏览文件”按钮按钮 ，打打开开“选择文件选择文件”对话框，对话框，选择相应文件，选择相应文件，单击单击“确定确定”按钮，按钮，即即为图像创建了链接。为图像创建了链接。)创建空链接，创建空链接，在文档中，在文档中，选择创建空链接的对象，选择创建空链接的对象，在在“属性属性”面板的面板的“链接链接”编辑栏中输入编辑栏中输入“”，即可创建空链接。即可创建空链接。上一页 下一页返回任务二各种超级链接的创建方法任务二各种超级链接的创建方法五、热点链

16、接的创建五、热点链接的创建为图像创建热点链接，为图像创建热点链接，需要使用四个工具，需要使用四个工具，分别为指针热点工具、分别为指针热点工具、矩形热点工具、椭圆热点工具及多边形热点工具。矩形热点工具、椭圆热点工具及多边形热点工具。指针热点工具主要指针热点工具主要用来选择并移动热点区域，用来选择并移动热点区域，其他三个工具则用于创建不同形状的热点其他三个工具则用于创建不同形状的热点区域。区域。热点链接的创建方法如下热点链接的创建方法如下:)选择文档中的图像，选择文档中的图像，如如图图 所示，所示，现在要为该图像上的现在要为该图像上的“首页首页”“产品介绍产品介绍”“精彩活动精彩活动”“下载专区下

17、载专区”“互动论坛互动论坛”“订订购产品购产品”及及“联系我们联系我们”创建链接。创建链接。)在如在如图图 所示的所示的“属性属性”面板的左下角有四个工具，面板的左下角有四个工具，分别分别为指针热点工具、矩形热点工具、椭圆热点工具及多边形热点工具。为指针热点工具、矩形热点工具、椭圆热点工具及多边形热点工具。上一页 下一页返回任务二各种超级链接的创建方法任务二各种超级链接的创建方法)选择矩形热点工具选择矩形热点工具 ，鼠标变成鼠标变成“十十”字形，字形，在如在如图图 所示的所示的“产品介绍产品介绍”上拖动，上拖动，即可创建热点区域。即可创建热点区域。)删除删除“热点热点”属性面板的属性面板的“链

18、接链接”编辑栏中的编辑栏中的“”，输入要输入要链接的文档名称或直接单击链接的文档名称或直接单击“浏览文件浏览文件”按钮按钮 ，打开打开“选择文选择文件件”对话框，对话框，选择相应文件，选择相应文件，即可创建热点链接。即可创建热点链接。创建热点链接完创建热点链接完成的效果图如成的效果图如图图 所示。所示。六、命名锚记链接的创建六、命名锚记链接的创建在浏览网页时，在浏览网页时，经常会遇到这种情况，经常会遇到这种情况，由于网页的内容较多，由于网页的内容较多，浏览浏览器的滚动条变得很长，器的滚动条变得很长，而使得浏览者无法快速找到所要查看的内容。而使得浏览者无法快速找到所要查看的内容。为了解决这种问题

19、，为了解决这种问题，我们可以通过创建命名锚记链接来为网页添加位我们可以通过创建命名锚记链接来为网页添加位于网页内部的超级链接，于网页内部的超级链接，单击该超级链接，单击该超级链接，就可以跳转到网页指定就可以跳转到网页指定位置位置上一页 下一页返回任务二各种超级链接的创建方法任务二各种超级链接的创建方法要创建命名锚记链接，要创建命名锚记链接，首先要插入命名锚记，首先要插入命名锚记，然后创建跳转到该命然后创建跳转到该命名锚记的链接，名锚记的链接，具体创建方法如下具体创建方法如下:)将光标定位到命名锚记的插入点，将光标定位到命名锚记的插入点，单击单击“插入插入”工具栏中工具栏中“常用常用”选项卡中的

20、选项卡中的“命名锚记命名锚记”图标图标 ，如如图图 所示，所示，打打开开“命名锚记命名锚记”对话框，对话框，输入锚记名称，输入锚记名称，如如图图 所示。所示。)单击单击“确定确定”按钮，按钮，插入命名锚记。插入命名锚记。)选择要创建命名锚记链接的对象，选择要创建命名锚记链接的对象，在在“属性属性”面板的面板的“链接链接”编辑栏中输入编辑栏中输入“”，如，如图图 所示，所示，即可创建命名锚记链即可创建命名锚记链接。接。上一页返回任务三化妆品网站建设任务三化妆品网站建设)创建本地站点，创建本地站点，将将 中的化妆品文件夹下的所有文件复制到中的化妆品文件夹下的所有文件复制到本地根文件夹下，打开本地根

21、文件夹下，打开.。为标题图像创建链接，为标题图像创建链接，链接至玉兰油中国官方网站去浏览该网站信息，网址是链接至玉兰油中国官方网站去浏览该网站信息，网址是“:/.”。)选中标题图像，选中标题图像，在在“属性属性”面板的面板的“链接链接”编辑栏中输入网址编辑栏中输入网址“:/.”，为标题图像创建外为标题图像创建外网链接，网链接，“属性属性”面板如面板如图图 所示。所示。)为导航条中的为导航条中的“产品介绍产品介绍”图像，图像，创建内部链接，创建内部链接，链接至网站链接至网站中的中的.页面。页面。)选择选择“产品介绍产品介绍”图像，图像，单击单击“属性属性”面板中的面板中的“指向文件指向文件”图标

22、，图标，拖动到文件面板中的拖动到文件面板中的.上，上，即可为即可为“产品介产品介绍绍”图像创建内部链接，图像创建内部链接，如如图图 所示。所示。下一页返回任务三化妆品网站建设任务三化妆品网站建设)为导航条中的为导航条中的“联系我们联系我们”图像，图像，创建电子邮件链接，创建电子邮件链接，地址为地址为“.”。)选择选择“联系我们联系我们”图像，图像，在在“属性属性”面板的面板的“链接链接”编辑栏中编辑栏中输入输入“:.”，即可为图像创建电即可为图像创建电子邮件链接。子邮件链接。)为导航条下面的图像的左侧产品部分创建多边形热点链接，为导航条下面的图像的左侧产品部分创建多边形热点链接，链接链接至至.

23、页面。页面。)选择图像，选择图像，在在“属性属性”面板中，面板中，单击多边形热点工具，单击多边形热点工具，在在 图像的左侧绘制热点区域，图像的左侧绘制热点区域，如如图图 所示。所示。)在在“热点热点”属性面板的属性面板的“链接链接”编辑栏右侧，编辑栏右侧，单击单击“浏览文件浏览文件”图标，图标，选择要链接的文件选择要链接的文件。上一页 下一页返回任务三化妆品网站建设任务三化妆品网站建设)为该文档底部的文字为该文档底部的文字“版权所有版权所有 千百度千百度化妆品有限公司化妆品有限公司”创建命名锚记链接创建命名锚记链接“”，返回至顶部。返回至顶部。)将光标定位到标题图像前，将光标定位到标题图像前，

24、具体定位方法如下具体定位方法如下:选择标题图像，选择标题图像，按键盘上的左箭头，按键盘上的左箭头，可以将光标定位到该图像的前面。可以将光标定位到该图像的前面。)执行菜单执行菜单“插入插入”“命名锚记命名锚记”命令，命令，弹出如弹出如图图 所示的所示的“命名锚记命名锚记”对话框，对话框，在该对话框中输入锚记名称在该对话框中输入锚记名称“”，单击单击“确定确定”按钮，按钮，插入命名锚记。插入命名锚记。)选择文档底部的文字选择文档底部的文字“版权所有版权所有 千百度千百度化妆品有限公司化妆品有限公司”，在在“属性属性”面板中的面板中的“链接链接”编辑栏中输入编辑栏中输入“”，即可为即可为“版权所有版

25、权所有 千百度化妆千百度化妆品销售公司品销售公司”文字创建命名锚记链接。文字创建命名锚记链接。单击该文字即可返回至顶部。单击该文字即可返回至顶部。)保存文档，保存文档，浏览页面效果，浏览页面效果，效果图如效果图如图图 所示。所示。上一页返回图图 创建文本超级链接创建文本超级链接返回图图 选择要链接的文件选择要链接的文件返回图图“文件下载文件下载”对话框对话框返回图图 电子邮件链接的创建电子邮件链接的创建返回图图“电子邮件链接电子邮件链接”对话框对话框返回图图 创建图像链接创建图像链接返回图图 创建热点链接的图像对象创建热点链接的图像对象返回图图“热点热点”属性面板属性面板返回图图 创建热点链接完成的效果图创建热点链接完成的效果图返回图图“插入插入”工具栏的工具栏的“常用常用”选项卡选项卡返回图图“命名锚记命名锚记”对话框对话框返回图图 命名锚记链接的创建命名锚记链接的创建返回图图 为标题图像创建外网链接为标题图像创建外网链接返回图图 创建内部链接创建内部链接返回图图 创建热点区域创建热点区域返回图图“命名锚记命名锚记”对话框对话框返回图图 化妆品网站效果图化妆品网站效果图返回