商务网页实例项目05课件

1、 内容提要超级链接是WWW的灵魂，是网页中重要的组成部分，它使一个网站的主页和其他页面成为一个有机的整体，并将互联网上成千上万的网站联系起来。本项目将介绍超级链接的有关知识和创建超级链接的方法。1URL地址URL（Uniform Resource Location，统一资源定位符）是Internet上用来描述信息资源的字符串，主要用在各种WWW客户程序和服务器程序上。采用URL可以用一种统一的格式来描述各种信息资源，包括文件、服务器的地址和目录等。URL的格式由下列3个部分组成：协议（或称为服务方式）；存有该资源的主机IP地址（有时也包括端口号）；主机资源的具体地址，如目录和文件名等。第一部分

2、和第二部分之间用“:/”符号隔开，第二部分和第三部分用“/”符号隔开。第一部分和第二部分是不可缺少的，第三部分有时可以省略。例如http的URL：/111/welcome.html，使用超级文本传输协议HTTP，提供超级文本信息服务的资源。其计算机域名为。超级文本文件是在目录/111下的welcome.html。活动1 学习路径和超级链接的相关知识 2绝对路径、相对路径和站点根目录相对路径文档的路径一般分为3种类型：绝对路径、相对路径和根目录相对路径。（1）绝对路径绝对路径指所链接文档的完整路径，是精确的地址，包括服务器协议，例如：/z/CCP17-6.html。当创建当前站点以外的文件时必须

3、使用绝对路径。（2）相对路径和文档相对的路径是指当前文档所在的文件夹相对路径，当网页中需要链接的目标与该内容同属于一文件夹或位于上一级、下一级关系的文件夹时，且在保持这种状态的情况下，使用相对路径，例如imags/bj.gif，当站点目录位置发生改变时，不会影响站点内链接的网页。但在创建相对路径之前一定要先保存文件，当文件还没有保存时，文档的相对路径是无效的。在文档未被保存之前，Dreamweaver自动保存以file开头的绝对路径。 3站点根目录相对路径站点根目录是指不管现在在哪个目录下，都从根目录开始，使用斜杠作为开始，例如/web/index.html。在使用站点根目录相对路径时，即使包

4、含链接的文档在站内发生移动，链接也不会失效。通常站点规模偏大，需要多个设计者合作时，需要使用这种路径。4绝对路径和相对路径的使用当页面中需要创建的链接指向非本站点的地址时，必须用到绝对路径，只有用到绝对路径才能解析该链接的地址。虽然对于同一站点内文档的链接也可以使用绝对路径链接，但不建议采用这种方式，因为一旦将此站点移动到其他地方，则所有本地绝对路径链接都将失效。因此在同一站点内使用相对路径，还能够在站点内移动文件时提高灵活性。5超级链接的作用和意义超级链接是网页的灵魂，它是一种允许我们同其他网页或站点之间进行链接的元素。只有各个网页链接在一起后，才能真正构成一个网站。 超级链接是指从一个网页

5、指向一个目标的链接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。6超级链接的分类1）文本链接。通过文本创建超级链接，该链接最为常见。2）图像链接。通过图像创建超级链接。3）电子邮件链接。创建发送电子邮件的链接。4）书签链接。链接到任意文档的书签位置。5）空链接。不会发生跳转。6）脚本链接。执行JavaScript代码或调用JavaScript函数。7站点内超级链接的快速创建在Dreamweaver CS5中可以快速地在站点内创建超级链接，只需在属性面板的链接对话框中输入链接的相对路径即可。 1文本链接（1）文本链

6、接定义当需要产生链接的对象是文本时，创建的超级链接即称文本链接。当鼠标放到超链接文本上时，鼠标变成手的形状，这一般代表了这段文字创建了超级链接，当单击该文本时，就会打开链接目标的页面。（2）创建文本链接方法1：选择需要创建链接的文字，在属性检查器的链接文本框中填写需要链接的地址，也可以用浏览文件图标选中需要链接的页面，如图5-1所示。活动2 学习超级链接的创建 方法2：选择需要创建链接的文字，在“插入栏”中选择“常用”类别，单击“超级链接”按钮，如图5-2所示，打开“超级链接”对话框创建超级链接，如图5-3所示。 方法3：通过指向资源面板创建超级链接。选择需要创建链接的文字，在属性检查器中单击

7、链接后的定位按钮直接拖动鼠标指向需要链接到的页面。该方法适合创建本站点内的链接，如图5-4所示。 （3）文本链接属性在“链接”对话框中显示链接的页面的路径，在“目标”下拉菜单中可以设置链接目标，分别如下。 “_blank”：将文件载入新的无标题浏览器窗口中。 “_new”：将文件载入新的浏览器窗口中。 “_parent”：将文件载入到上级页面所在的浏览器窗口中。 “_self”：将文件载入到相同框架或窗口中。 “_top”：将文件载入到整个浏览器窗口中，将取消框架。 2图像链接（1）图像链接当需要产生链接的对象是图像时，创建的超级链接即称图像链接。当鼠标放到超链接图像上时，鼠标变成手的形状，这

8、一般代表了这张图像创建了超级链接，当单击该图像时，就会打开链接目标的页面。（2）创建图像链接方法1：选择需要创建链接的图像，在属性检查器的链接文本框中填写需要链接的地址，也可以用浏览文件图标选中需要链接的页面。方法2：选择需要创建链接的图像，在“插入栏”中选择“常用”类别，单击“超级链接”按钮，打开“超级链接”对话框创建超级链接，填写相关属性即可。方法3：通过指向资源面板创建超级链接。选择需要创建链接的图像，在属性检查器中单击链接后的定位按钮直接拖动鼠标指向需要链接到的页面。 3电子邮件链接（1）电子邮件链接在页面中，经常看到类似“联系我们”这样的超链接，单击后会弹出本机所安装的邮件发送程序，

9、而且此时的收件人是已经填写好的，这种链接就是电子邮件链接。（2）创建电子邮件链接1）选择需要创建链接的内容，在“插入栏”中选择“常用”类别，单击“电子邮件链接”按钮，如图5-5所示。打开“电子邮件链接”对话框创建电子邮件链接。 2）在“电子邮件链接”对话框中输入需要链接的电子邮件地址，单击“确定”按钮，如图5-6所示。 3）在属性面板中可以看到链接地址前“mailto：”，此时创建完成，如图5-7所示。4书签链接（1）书签链接书签链接又称锚记链接，一般用在同一个页面中，用于在文档中设置标记，这种标记通常放在指定的位置，创建书签链接后，便可迅速链接到指定的位置。书签链接通常用在内容较多的页面中，

10、方便浏览者阅读。 （2）创建书签链接1）选择需要被链接到书签的位置，在“插入栏”中选择“常用”类别，单击“命名锚记”按钮，如图5-8所示。打开“命名锚记”对话框创建书签链接。2）在“命名锚记”对话框中输入创建的命名锚记的名称，单击“确定”按钮，如图5-9所示。 3）选中需要创建书签链接的内容，在属性面板的“链接”文本框中输入“#”，后接需要链接到的命名锚记的名字，创建完成，如图5-10所示。 如需要链接到其他页面中命名锚记，则需要先链接到该页面，然后在地址后输入“#”和命名锚记的名称，如图5-11所示。 5空链接空链接正如名字所言，是一个空的链接，不能跳转到任何页面。这种链接对于创建JavaS

11、cript事件非常有用。6脚本链接通过脚本链接，可以执行JavaScript代码或者调用JavaScript函数，在用户单击该链接时，可以执行计算等其他任务。有关脚本链接在本书的项目11中将有所介绍。（1）活动分析在创建超级链接之前，我们运用之前所掌握的文字和图像的全部知识，完成购买须知页的制作。（2）知识要点 熟练运用文字的输入和编辑方法。 熟练运用图像的插入和编辑方法。（3）动手操作步骤1 前期准备将本书配套资源“网站素材”文件夹中的 “项目5素材”文件夹中的所有文件及文件夹复制到maomaonvzhuang站点内，如图5-12所示。活动3 制作“贸贸女装”商品购买须知页“help.htm

12、l” 步骤2 打开help.html页面 1）打开Dreamweaver CS5软件，在文件面板中，双击打开help.html。2）单击该页面属性面板的“页面属性”按钮，设置“外观（CSS）”选项卡中的页面字体为“宋体”，大小为“12px”，文本颜色为“#333”；在“标题（CSS）”选项卡中的“标题2”字体大小为“14px”，颜色为“#900”，如图5-13所示。 3）将光标停留在单元格空白处，如图5-14所示。 步骤3 输入文字1）选中该单元格，设置单元格对齐方式为水平居中对齐、垂直顶端对齐。2）输入文字，如图5-15所示。3）选中所输入的文字，在属性面板中，设置该文字的格式为“标题2”，

13、完成如图5-16所示。 步骤4 复制素材文字1）将光标停留在右侧单元格空白处，如图5-17所示。2）选中该单元格，设置单元格对齐方式为水平默认、垂直顶端对齐。 3）打开本书配套资源中的素材文件“帮助中心.txt”，将全部文字复制到刚刚编辑的单元格内。4）在第二段文字“测量尺寸”的“可通过以下图片对照尺寸”文字后换行插入图片“chicun.jpg”，如图5-18所示。 步骤5 完成预览完成后，选择菜单“文件”“保存”命令，保存文件，按键在浏览器中预览，如图5-19所示。 制作“贸贸女装”商品购买须知页“list.html”（1）活动分析在网站中，网页与网页之间的联系就是靠超级链接，它是互联网的核

14、心，更是网站的核心，正因为有了超级链接才会有庞大的网络世界，因此超级链接的意义非同凡响。（2）知识要点 理解绝对路径、相对路径和超级链接的含义。 熟练运用各种方法创建文本链接和图像链接。（3）动手操作步骤1 打开list.html页面打开Dreamweaver CS5软件，在文件面板中双击打开list.html。活动4 给“贸贸女装”商品列表页“list.html”添加文本和图像链接 步骤2 创建文本链接1）选中需要创建文本链接的文本“新款优雅套衫休闲圆领长袖针织市场价￥99售价￥50”，单击属性面板的“链接”文本框后面的“浏览文件”按钮，在弹出的“选择文件”对话框中选择需要链接的文件“det

15、ail.html”，如图5-20所示。 2）在目标下拉列表中选择“_blank”选项，如图5-21所示。3）文本链接制作完成，在浏览器中预览时，单击链接文字“新款优雅套衫休闲圆领长袖针织市场价￥99售价￥50”将打开“detail.html”页面，如图5-22所示。 步骤3 创建图像链接1）选中需要创建图像链接的图像“2.gif”，单击属性面板的“链接”文本框后面的“浏览文件”按钮，在弹出的“选择文件”对话框中选择需要链接的文件“detail.html”，如图5-23所示。 2）在目标下拉列表中选择“_blank”选项，如图5-24所示。 3）图像链接创建完成，预览时，已链接的图像有背景颜色的

16、边框，此时在属性面板中，设置边框为“0”，如图5-25所示。 4）完成后，在浏览器中预览时，单击链接图像“2.gif”将打开“detail.html”页面，如图5-26所示。步骤4 完成预览完成后，选择菜单“文件”“保存”命令，保存文件，按键在浏览器中预览。制作“贸贸女装”商品购买须知页“help.html”（1）活动分析普通的文字和图像链接让网页之间可以自由跳转，除此以外，网站中还有一些不一样的链接能实现一些特殊的要求，比如在同一页面中的不同位置实现跳转，这样的链接称为书签链接。比如能够调出电子邮件程序的链接，称为邮件链接。（2）知识要点 理解绝对路径、相对路径和超级链接的含义。 学会创建电

17、子邮件链接和书签链接的方法。（3）动手操作步骤1 打开help.html页面打开Dreamweaver CS5软件，在文件面板中双击打开help.html。活动5 给“贸贸女装”购买须知页“help.html”添加书签和电子邮件链接 步骤2 创建文本链接1）选中左侧单元格内需要创建文本链接的文本“返回首页”，在属性面板的“链接”文本框内输入“index.html”，如图5-27所示。 2）完成后的效果如图5-28所示。 步骤3 创建命名锚记1）将光标放在右侧单元格的“关于质量：”之前，如图5-29所示。 图5-29 选择插入命名锚记的位置2）选择菜单“插入”“命名锚记”命令，在弹出的“命名锚记

18、”对话框中输入锚记名称“zhiliang”，单击“确定”按钮，如图5-30所示。3）完成后，在文字前出现锚记小图标显示已创建锚记，如图5-31所示。图5-30 输入锚记名称 图5-31 创建好的锚记 步骤4 创建书签链接1）选中左侧单元格的文本“关于质量”，在属性面板的“链接”文本框内输入“#zhiliang”，如图5-32所示。 2）完成后，在浏览器中预览时，单击链接文本“关于质量”将打开锚记所在的位置，如图5-33所示。 3）重复步骤4，为“测量尺寸”“快递说明”“关于退换货”分别创建锚记“#chicun”“#kuaidi”“#tuihuanhuo”完成如图5-34所示。然后分别选中左侧单元格的文本“测量尺寸”“快递说明”“关于退换货”，在属性面板的“链接”文本框内也分别输入“#chicun”“#kuaidi”“#tuihuanhuo”，完成后，在浏览器中预览时，单击链接文本均可分别链接到锚记所在的位置。 步骤5 创建邮件链接1）选中左侧单元格最后一行的文本“联系我们”，在属性面板的“链接”文本