商务网页实例项目05课件.pptx

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

2、和第二部分之间用“:/”符号隔开，第二部分和第三部分用“/”符号隔开。第一部分和第二部分是不可缺少的，第三部分有时可以省略。例如http的URL：http:/ 1 学习路径和超级链接的相关知识学习路径和超级链接的相关知识 2绝对路径、相对路径和站点根目录相对路径文档的路径一般分为3种类型：绝对路径、相对路径和根目录相对路径。（1）绝对路径绝对路径指所链接文档的完整路径，是精确的地址，包括服务器协议，例如：http:/ CS5中可以快速地在站点内创建超级链接，只需在属性面板的链接对话框中输入链接的相对路径即可。1文本链接（1）文本链接定义当需要产生链接的对象是文本时，创建的超级链接即称文本链接。

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

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

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

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

7、位置，在“插入栏”中选择“常用”类别，单击“命名锚记”按钮，如图5-8所示。打开“命名锚记”对话框创建书签链接。2）在“命名锚记”对话框中输入创建的命名锚记的名称，单击“确定”按钮，如图5-9所示。3）选中需要创建书签链接的内容，在属性面板的“链接”文本框中输入“#”，后接需要链接到的命名锚记的名字，创建完成，如图5-10所示。如需要链接到其他页面中命名锚记，则需要先链接到该页面，然后在地址后输入“#”和命名锚记的名称，如图5-11所示。5空链接空链接正如名字所言，是一个空的链接，不能跳转到任何页面。这种链接对于创建JavaScript事件非常有用。6脚本链接通过脚本链接，可以执行JavaSc

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

9、骤步骤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）选中所输入的文字，在属性面板中，设置该文字的格式为

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

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

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

13、5-23所示。2）在目标下拉列表中选择“_blank”选项，如图5-24所示。3）图像链接创建完成，预览时，已链接的图像有背景颜色的边框，此时在属性面板中，设置边框为“0”，如图5-25所示。4）完成后，在浏览器中预览时，单击链接图像“2.gif”将打开“detail.html”页面，如图5-26所示。步骤步骤4 完成预完成预览览完成后，选择菜单“文件”“保存”命令，保存文件，按键在浏览器中预览。制作“贸贸女装”商品购买须知页“help.html”（1）活动分析普通的文字和图像链接让网页之间可以自由跳转，除此以外，网站中还有一些不一样的链接能实现一些特殊的要求，比如在同一页面中的不同位置实现跳

14、转，这样的链接称为书签链接。比如能够调出电子邮件程序的链接，称为邮件链接。（2）知识要点 理解绝对路径、相对路径和超级链接的含义。学会创建电子邮件链接和书签链接的方法。（3）动手操作步骤步骤1 打开打开help.html页面页面打开Dreamweaver CS5软件，在文件面板中双击打开help.html。活动活动5 5 给给“贸贸女装贸贸女装”购买须知页购买须知页“help.htmlhelp.html”添加添加书签和电子邮件链接书签和电子邮件链接 步骤步骤2 创建文本链接创建文本链接1）选中左侧单元格内需要创建文本链接的文本“返回首页”，在属性面板的“链接”文本框内输入“index.html

15、”，如图5-27所示。2）完成后的效果如图5-28所示。步骤步骤3 创建命名锚记创建命名锚记1）将光标放在右侧单元格的“关于质量：”之前，如图5-29所示。图5-29 选择插入命名锚记的位置2）选择菜单“插入”“命名锚记”命令，在弹出的“命名锚记”对话框中输入锚记名称“zhiliang”，单击“确定”按钮，如图5-30所示。3）完成后，在文字前出现锚记小图标显示已创建锚记，如图5-31所示。图5-30 输入锚记名称 图5-31 创建好的锚记 步骤步骤4 创建书签链接创建书签链接1）选中左侧单元格的文本“关于质量”，在属性面板的“链接”文本框内输入“#zhiliang”，如图5-32所示。2）完

16、成后，在浏览器中预览时，单击链接文本“关于质量”将打开锚记所在的位置，如图5-33所示。3）重复步骤4，为“测量尺寸”“快递说明”“关于退换货”分别创建锚记“#chicun”“#kuaidi”“#tuihuanhuo”完成如图5-34所示。然后分别选中左侧单元格的文本“测量尺寸”“快递说明”“关于退换货”，在属性面板的“链接”文本框内也分别输入“#chicun”“#kuaidi”“#tuihuanhuo”，完成后，在浏览器中预览时，单击链接文本均可分别链接到锚记所在的位置。步骤步骤5 创建邮件链接创建邮件链接1）选中左侧单元格最后一行的文本“联系我们”，在属性面板的“链接”文本框内输入“mailto:”，如图5-35所示。2）完成后，在浏览器中预览时，单击链接文本“联系我们”将打开邮件窗口，如图5-36所示。步骤步骤6 完成预览完成预览选择菜单“文件”“保存”命令，保存文件，按键在浏览器中预览。超级链接是互联网的核心，它是一个文档到另一个文档或者到同一个文档的其他部分的连接方式，正因为有了超级链接，文档之间才能互相链接，才能形成庞大的网络，本项目我们学习了文本链接，图像链接，书签链接和电子邮件链接的创建和各自的特点。在链接中绝对路径和相对路径是很重要的内容，通过学习知道了绝对路径和相对路径的区别和各自的应用范围，在今后的网站中，我们都会用到。项项 目目 小小 结结