电子商务网页制作-项目ppt课件

1、DW,项目四,电子商务 网页制作,链接与导航,举例说明路径的概念； 列举超链接的分类； 会设置超链接； 描述导航的相关知识,项目目标,链接和路径,正确描述从链接源所在文档到链接目标之间的文件路径，对创建超链接至关重要。描述方式有三种：绝对路径、文档相对路径和站点根目录相对路径。这三种路径各有特点，灵活使用这些路径能起到事半功倍的效果,路径知识看上去略显枯燥，但却是建立超链接的基础，许多超链接错误都是因为路径问题导致的，所以请静下心来认真学习这部分内容,小贴士,绝对路径,绝对路径提供了链接目标文档的完整的URL地址。如： http:/ 当需要链接不同站点上的文档时，必须使用绝对路径。如在制作友情

2、链接时，需要链接到另一个网站的网页，这时就要使用绝对路径。 绝对路径也用于规模较大的网站中，因为大型网站并不是由一个域名构成的单个网站，而是由多个网站构成的网站群，如网易（），就有新闻（）、体育（）、娱乐（）等多个分站，各分站有独立的编辑团队，网站之间的超链接当然只能使用绝对路径了。然而，对于仅有一个域名的小型网站而言，虽然也可以使用绝对路径，但如果网站改变域名，所有使用绝对路径的链接就立刻失效了，因此小型网站没有必要使用绝对路径,相对路径,文档相对路径描述了链接源与链接目标之间的相对位置，在网站内部各页面的链接中使用相对路径最合适，因为相对路径不但描述简洁，而且与站点目录所在的位置无关，当站

3、点根目录位置发生改变时，不会影响到站点内链接的网页,当链接源与链接目标在同一文件夹中时，描述相对路径只需要指明链接目标的文件名即可，例如在index.html中创建指向login.html的链接，可使用相对路径：“login.html,相对路径,当链接目标在链接源下一级目录中时，可直接指明目录名称和文档名称，例如在index.html中创建指向cloth.html的链接，可使用相对路径：“list/cloth.html,当链接目标在链接源上一级目录中时，可用“.”符号来表示当前文件的父目录，使用多个“.”可以表示更高的父级目录，例如在cloth.html中创建指向index.html的链接，可

4、使用相对路径：“./index.html,站点根目录相对路径,基于站点根目录的相对路径从站点的根目录开始，通常使用“/”表示根目录，所有基于站点根目录相对路径均以“/”开始，如：/list/cloth.html。 由此可见，站点根目录相对路径同绝对路径十分相似，只是它略去了绝对路径中的协议部分。通常在站点规模稍大，需要多个设计者合作建设，并且使用模板和组件进行设计时，站点根目录相对路径被广泛使用,假设站点网址为http:/，在index.html文档中，创建指向list文件夹中的cloth.html文档的链接，使用三种路径形式描述这个链接目标如下： 绝对路径：http:/ / list / c

5、loth.html 相对路径：list / cloth.html 站点根目录相对路径：/ list / cloth.html,站点根目录相对路径,假设站点网址为http:/，在index.html文档中，创建指向list文件夹中的cloth.html文档的链接，使用三种路径形式描述这个链接目标如下： 绝对路径：http:/ / list / cloth.html 相对路径：list / cloth.html 站点根目录相对路径：/ list / cloth.html,超级链接的分类,超链接按链接目标的不同分为五种类型,超级链接的分类,超链接按链接源的不同分为三种类型,创建本地超链接的常用方法,

6、1使用属性面板创建超链接 选择要作为链接源的文本或图片，在属性面板中会有“链接”文本框、“指向文件”按钮和“浏览文件”按钮,将链接目标的路径直接输入到链接文本框中可以创建超链接。 点击“浏览文件”按钮可以打开“选择文件”对话框，可以浏览并指定链接目标文档以创建超链接,创建本地超链接的常用方法,点击“指向文件”按钮并拖动到“文件”面板中的某个文件也可以将该文件设置为链接目标,创建本地超链接的常用方法,2使用“超级链接”命令创建超链接 选择要作为链接源的文本或图片，然后打开“插入”菜单，选择“超级链接”命令，或者单击插入栏中“常用”类别中的“超级链接”按钮，可以打开“超级链接”对话框，在对话框里进

7、行相应设置以创建超链接,超级链接的目标窗口,当浏览者点击网页上的超级链接后会跳转到链接目标页面。当新页面出现时，可能会出现三种情况： （1）原有的页面被覆盖； （2）原有的网页不被覆盖，弹出一个新的窗口； （3）原有的网页内部分内容被替换。 这三种情况的出现是由于对超级链接的目标窗口进行了设置。在设置超级链接时会有一个“目标”下拉菜单，其中可以设置4种目标,超级链接的目标窗口,_blank”：将文件载入新的无标题浏览器窗口中； “_parent”：将文件载入到上级框架集或包含该链接的框架窗口中； “_self”：将文件载入到相同框架式窗口中，此目标是默认的，通过不需要量指定； “_top”：将

8、文件载入到整个浏览器窗口中，将取消所有框架,创建电子邮件超级链接,在网页中经常可以看到类似“联系我们”这样的超链接，单击后会弹出本机所安装的邮件发送程序，而且此时的收件人是已经填写好的，这种链接就是电子邮件链接。 创建电子邮件超级链接的方法如下： （1）选择需要创建链接的内容，在“插入栏”中选择“常用”类别，单击“电子邮件链接”按钮，打开 “电子邮件链接”命令创建电子邮件链接,创建电子邮件超级链接,2）在“电子邮件链接”对话框中输入需要链接的电子邮件地址，单击确定,3）在属性面板中可以看到链接地址中有“mailto：（+邮件地址）”，表示创建完成,创建锚记链接,锚记链接又称书签链接，一般用在同

9、一个页面中，用于在文档中设置标记，这种标记通常放在指定的位置，创建锚记链接后，便可迅速链接到指定的位置。 比如，一个篇幅较长的商品介绍网页，需要不断地滚动才能看到下面的信息，当浏览者阅读完毕后，希望能快速地回到文章开头，这时可以先在文章开头放置一个锚记，在文章尾部添加一个链接指向锚记，浏览时点击此链接就能迅速回到网页开头。亲，你一定注意到了，锚记是在制作超链接前就放置好了的,创建锚记链接,创建锚记链接的方法如下： （1）选择需要被链接到锚记的位置，在“插入栏”中选择“常用”类别，单击“命名锚记”按钮，打开 “命名锚记”命令创建锚记链接,2）在“命名锚记”对话框中输入创建的命名锚记的名称，单击确

10、定,创建锚记链接,3）选中需要创建锚记链接的内容，在属性面板的“链接”文本框中输入“#”，后接需要链接到的命名锚记的名字，创建完成,如需要链接到其他页面中命名锚记，则需要“链接”文本框中先输入其他页面的地址，然后在地址后输入“#”和命名锚记的名称,清除超级链接,清除超级链接的方法非常简单，只需要先选定超级链接对象，然后在属性面板中将“链接”文本框中的地址删除即可,电子商务网站导航的组织与分类,影响电子商务网站成功与否的关键因素是网站的可用性，即高效提供给浏览者满意的产品或服务，良好的导航设计是提高网站可用性的有力措施,如果浏览者知道各个信息都在网站的什么位置，他们就会感到更强的控制感、更舒服，

11、也就有可能浏览更多的页面来寻找他们所需的信息内容。用行话来说这叫做使“用户对于网页的粘滞系数增大。,小贴士,电子商务网站的导航通常有以下几种类型： （1）网站栏目导航，如图4-14所示。为浏览者提供该网站的主要栏目版块导航,电子商务网站导航的组织与分类,2）站内功能服务导航 此导航为浏览者提供电子商务网站的功能服务，如注册、购物、账户信息等。 此导航具有为浏览者提供帮助功能的导航,电子商务网站导航的组织与分类,3）产品分类导航，如图4-17所示。这是电子商务网站导航中展示产品和服务的部分，在网站导航中所占比例较大,电子商务网站导航的组织与分类,4）当前位置导航，如图4-18所示，标示浏览者当前

12、所在位置，以避免浏览者迷航。 （5）网站持有方信息导航，如图4-19所示。有关网站持有方信息的链接集群,电子商务网站的导航设计原则,电子商务网站为用户提供了十分详尽、方便的信息导航，浏览者可以通过各种途径方便地查找到要购买的商品，这说明网站的结构和导航确定了信息查找方式，对于每条信息来说，查找的路径越多，它被阅读的可能性就越大，这也是提高网站浏览量的一种好办法。但对于用户来说，过多的入口容易抓不住重点而忽略真正重要的链接，甚至可能在网站内部迷失方向。因此，链接数量过多会使用户混乱，降低重要链接的被点击率。所以要在链接数量的多少上取得平衡，同时要进行合理组织和规划，一般而言，主要功能和导航链接尽

13、量不要超过10个。找到一种解决方案。把握链接之中的重点和层次是设计的关键,电子商务网站的导航设计原则,商务网站链接与导航的设计要点： （1）对商务网站的导航进行适当的组织与分类。如图4-20所示，通常以产品导航为主导航，另外还兼有如联系方式和意见反馈等关于网站持有方的信息导航，以及购物车和密码登录等有关购物程序的功能导航。 （2）突出重点链接。 （3）让浏览者可对链接的相互关系以及点击后的效果产生正确的预期。 （4）降低页面的长度或者进行有效的分类和分页,将浏览者引向重要链接的方法,有经验的浏览者已经对链接有了先入为主的认知定式。并且大多数浏览者有着基本相同的使用习惯。因此，在设计中可以根据浏览者的使用经验，通过强化重要链接把浏览者引向重要的页面，在这个层面上链接与导航设计的关键是 （1） 清晰明确，有很强的点击感，让浏览者产生点击的欲望。 （2） 尊重浏览者现有的对链接的认识习惯，如有下划线的文字、动画图标、按钮等。 （3） 必要时对链接进行解释，如在“用户注册”按钮旁边添加“新用户点击此处注册”的说明文字,项目总结,本项目介绍了路径的基础知识，这是制作超链接的基础。路径分为绝对路径、文档相对路径、站点根目录相对路径。超链接是网页的灵魂，它将WWW上的不同的站点联系起来，浏览者可以使用链接从一个文档跳到另一个文档，按链接目标分，超链接被