第
Download
1 / 24

第 5 章 网页制作基础 - PowerPoint PPT Presentation


  • 140 Views
  • Uploaded on

第 5 章 网页制作基础. 主要内容. 概述 设计站点 编辑网页 页面布局 建立超链接 使用 CSS 样式 层、行为和时间轴 模板 管理和发布站点. 5.5 建立超链接. 超链接概述 超链接基本概念 两种链接路径 创建各种超链接 文本超链接 电子邮件链接. 制作图像地图链接 创建图像地图 修改图像地图 创建特定位置的链接 插入命名锚记 建立命名锚记链接. 使用属性检查器 “ 指向文件 ” 按钮. 5.5.1 超链接概述. 超链接基本概念 超链接是 从源端点到目标端点 的一种 跳转 。 源端点是被链接的对象, 可以是 : 文本

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about '第 5 章 网页制作基础' - mavis


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

5章 网页制作基础


主要内容

  • 概述

  • 设计站点

  • 编辑网页

  • 页面布局

  • 建立超链接

  • 使用CSS样式

  • 层、行为和时间轴

  • 模板

  • 管理和发布站点

《大学计算机信息科技教程(第二版)》——第5章 网页制作基础


5.5 建立超链接

超链接概述

超链接基本概念

两种链接路径

创建各种超链接

文本超链接

电子邮件链接

制作图像地图链接

创建图像地图

修改图像地图

创建特定位置的链接

插入命名锚记

建立命名锚记链接

使用属性检查器“指向文件”按钮

《大学计算机信息科技教程(第二版)》——第5章 网页制作基础



5 5 1
5.5.1 网页制作基础超链接概述

  • 超链接基本概念

    • 超链接是从源端点到目标端点的一种跳转。

    • 源端点是被链接的对象,可以是:

      • 文本

      • 图像等

    • 目标端点是连接到的对象,可以是任何网络资源:

      • 一个页面

      • 一幅图像

      • 一段视频

      • 一个页面中的某个位置等

    • 浏览网页时,单击超链接后显示对应的页面、图像和视频,或者跳转到网页中的某个位置。如果超链接的链接到的对象无法在浏览器中直接打开,则弹出“文件下载”对话框,从而达到了下载文件的目的。

《大学计算机信息科技教程(第二版)》——第5章 网页制作基础


5 5 11
5.5.1 网页制作基础超链接概述

  • 在浏览器中访问网页时,作为超链接源端点的文本(即超文本)有3种状态:

    • 未被访问的超文本

    • 已被访问的超文本

    • 正在被访问的超文本

  • 默认状态下,不同状态的超文本的颜色由浏览器决定。通过设置页面属性,可以定义各种链接状态下文本的字体颜色。

《大学计算机信息科技教程(第二版)》——第5章 网页制作基础


5 5 12
5.5.1 网页制作基础超链接概述

  • 根据目标端点的对象不同,可以把超链接分为

    • 外部链接

      • 外部链接的目标端点是本站点以外的站点或文档,利用外部链接可以跳转到其他网站。

    • 内部连接

      • 内部链接的目标端点是本站点中的文档,利用内部链接可以跳转到本站点中的其他页面。

    • E-mail链接

      • E-mail链接的目标端点是电子邮件程序,单击这种超链接后自动启动电子邮件程序,并以超链接指定的E-mail地址为收件人,开始撰写新邮件。

    • 局部链接

      • 局部链接的目标端点是网页中标记的位置,利用局部链接可以跳转到网页中的指定位置。

《大学计算机信息科技教程(第二版)》——第5章 网页制作基础


5 5 13
5.5.1 网页制作基础超链接概述

  • 链接路径

    • 绝对路径

      • 提供所链接文档的完整URL,它包括了所使用的协议,例如http://www.traveler.net.cn/travel/jianzhu/hebjzzl.htm

      • 绝对路径与链接的源端点没有任何关系,只要目标端点的地址不变,无论超链接所在的网页文件在站点文件夹中如何移动,都可以实现正常的跳转而不会出错。

      • 绝对路径通常用于表示外部链接。

    • 相对路径

      • 常用于表示内部链接,相对路径包括文档相对路径和站点根目录相对路径两种。

《大学计算机信息科技教程(第二版)》——第5章 网页制作基础


5 5 14
5.5.1 网页制作基础超链接概述

  • 文档相对路径

    • 是以当前网页所在文件夹为基础来描述路径的,对于Web站点中的文件来说,使用相对路径比较适合。

  • 站点根目录相对路径

    • 从当前站点的根目录开始描述路径的,站点根目录相对路径以一个正斜杠开始,该正斜杠表示站点根文件夹。例如:/contents/yjsx.html是相对路径,表示yjsx.html文件位于站点的根文件夹的contents文件夹中。

《大学计算机信息科技教程(第二版)》——第5章 网页制作基础


5 5 15
5.5.1 网页制作基础超链接概述

    • 若要从yjsx.html链接到rwjg.html,其相对路径是rwjg.html。

    • 若要从yjsx.html链接到mulu.html,其相对路径为lywh/mulu.html。

    • 若要从yjsx.html链接到index.html,其相对路径为../index.html。

    • 若要从yjsx.html链接到changjiang.jpeg,其相对路径为../photo/changjiang.jpeg。

《大学计算机信息科技教程(第二版)》——第5章 网页制作基础


5 5 16
5.5.1 网页制作基础超链接概述

  • 在 “文件”面板中改变文件名或者移动文件时,将弹出“更新文件”对话框,显示出需要更新的文件名列表,单击“更新”按钮可以完成超链接的路径更新。

《大学计算机信息科技教程(第二版)》——第5章 网页制作基础


5 5 2
5.5.2 网页制作基础创建各种超链接

选中文本

  • 插入文本超链接★

①插入工具栏/“常用”/“超级链接”按钮

②“插入”/“超级链接”命令

③属性检查器

下一张

《大学计算机信息科技教程(第二版)》——第5章 网页制作基础


5 5 21
5.5.2 网页制作基础创建各种超链接

《大学计算机信息科技教程(第二版)》——第5章 网页制作基础


5 5 22
5.5.2 网页制作基础创建各种超链接

  • 使用属性检查器建立超链接

    • 在属性检查器的“链接”文本框中输入超链接目标文档的路径和文件名;

    • 单击“链接”文本框右侧的文件夹图标,可以通过浏览选择一个文件作为超链接的目标文件;

    • 将“链接”文本框右侧的“指向文件”图标拖动到“文件”面板中的文件上。

《大学计算机信息科技教程(第二版)》——第5章 网页制作基础


5 5 23
5.5.2 网页制作基础创建各种超链接

  • 建立电子邮件链接

①插入工具栏/“常用”/“电子邮件链接”按钮

②“插入”/“电子邮件链接”命令

《大学计算机信息科技教程(第二版)》——第5章 网页制作基础


5 5 3
5.5.3 网页制作基础制作图像地图链接

同一幅图像上不同区域超链接到不同的目标端点

  • 热点

    是在图像地图上画出的封闭区域,图像地图是含有多个热点的图像,不同的热点指向不同的超链接。 在图像地图中,单击不同的热点,可以超链接到相应的网页。

  • 图像地图有服务器端图像地图和客户端图像地图两种,它们的不同之处在于鼠标单击热点后的处理方法上。

《大学计算机信息科技教程(第二版)》——第5章 网页制作基础


5 5 31
5.5.3 网页制作基础制作图像地图链接

椭圆形热点

矩形热点

多边形热点

《大学计算机信息科技教程(第二版)》——第5章 网页制作基础


5 5 32
5.5.3 网页制作基础制作图像地图链接

  • 创建客户端图像地图

    • 首先在网页中插入作为图像地图的图像;

    • 单击图像的属性检查器中的热点工具,绘制出一个热点区域:

      • 矩形热点工具

      • 椭圆形热点工具

      • 多边形热点工具

    • 通过属性检查器设置热点对应的超链接和目标位置。

三种热点

《大学计算机信息科技教程(第二版)》——第5章 网页制作基础


5 5 33
5.5.3 网页制作基础制作图像地图链接

③在图片上拖曳

①单击图片②单击热点工具

④拖曳指向文件按钮

《大学计算机信息科技教程(第二版)》——第5章 网页制作基础


5 5 34
5.5.3 网页制作基础制作图像地图链接

  • 修改图像地图

    • 选中热点

      • 选中图像地图后,单击“指针热点工具”按钮,然后单击热点,即可选中热点。若需要同时选中多个热点,可以从选择第二个热点开始,按住Shift键同时单击需要选择的热点。按Ctrl+A键,则选中图像地图中的所有热点。

    • 改变热点的位置

      • 选中热点后,将鼠标移到热点上然后进行拖动

    • 改变热点区域的形状或大小

      • 选中热点后,拖动热点的控制点

    • 改变叠放次序

      • 右单击热点区域,在快捷菜单中选择“移到最上面”或“移到最下面”命令

单击

拖曳

拖曳控制点

快捷菜单

《大学计算机信息科技教程(第二版)》——第5章 网页制作基础


5 5 4
5.5.4 网页制作基础创建特定位置的链接

  • 锚记

    • 通过插入命名锚记可以,这些标记通常放在文档的特定主题处或顶部。然后可以创建到这些命名锚记的链接,这些链接可快速将访问者带到指定位置。

设置标记,超链接到网页指定位置

《大学计算机信息科技教程(第二版)》——第5章 网页制作基础


5 5 41
5.5.4 网页制作基础创建特定位置的链接

②插入工具栏命名锚记

  • 插入命名锚记

    • 将插入点定位于要设置标记的位置

    • 选择“插入”/“命名锚记”命令。

    • 插入命名锚记后,网页中出现一个标记,标志出锚记的位置。如果看不到锚记标记,可以选中“查看”/“可视化助理”/“不可见元素”命令,将锚记标记显示出来。

①定位插入点

或“插入”/ “命名锚记”

《大学计算机信息科技教程(第二版)》——第5章 网页制作基础


5 5 42
5.5.4 网页制作基础创建特定位置的链接

  • 建立锚记链接

    • 选择“插入”/“超级链接”命令,输入超链接文本内容,并在“链接”下拉列表中选择锚记名称。

    • 属性检查器中,链接到锚记的超链接的表示形式为锚记名称前加数字符号“#”。在属性检查器中直接输入这样的超链接(如:#psj)。

    • 如果要链接到其他网页的命名锚记,则需要在锚记前加上网页文档名称。例如,如果要链接到网页maoji.html名为xdj的锚记,应在“链接”文本框中输入:maoji.html#xdj。

    • 在属性检查器中将“链接”文本框右侧的“指向文件”图标拖动到网页中的锚记标记上。

①选定文本

②属性检查器“链接”文本框

输入:(网页文件名)#锚记名

例如:#1、index.htm1#b

《大学计算机信息科技教程(第二版)》——第5章 网页制作基础


作业 网页制作基础

  • 完善课堂演示页面

    • 为文字“杜甫”、“白居易”、“李商隐”添加链接,单击这些链接时在右侧显示相应的作品列表页面。作品列表页面仿照“李白”的作品列表页面。

    • 为图片“宋词”添加链接,当鼠标移上去时,图片文字显示阴影;单击“宋词”图片则在左侧显示文字“苏轼”、“辛弃疾”。

    • 为文字“苏轼”、“辛弃疾”添加链接,所链接至的作品列表页面参照“李白”的作品列表页面。

《大学计算机信息科技教程(第二版)》——第5章 网页制作基础


ad