HTML语言剖析(补充):图片链接

HTML语言剖析-补充 ▲Top

补充: 图片链接

■ HTML 基本架构：

图片一张，作图片连结之用；随便一个 HTML 档案，设名为 there.html。

■ 简单步骤：

A. 图片连结： 视窗状态：开启 Composer 及己插入图片之文章档。 以滑鼠双击该图片， 于视窗 Image Properties 之左上方按 Link， 于Link to 一栏之右方按 Choose File， 选出己准备好的 HTML 档案 there.html， 按 OK 或 开启旧档 回前一视窗， 按 OK 或 确定 回文章编辑画面，完成。 B. 文字连结： 视窗状态：开启 Composer 及己有文字的 HTML 档。 以滑鼠拉选欲加入连结之字句， 按 Link 键， 与【图片连结】之 3-6 步相同。

■ 文字连结颜色设定：

视窗状态：以 Composer 开启欲更改连结颜色的 HTML 新或旧档。 按 Format → Page Colors and Properties △ Colors and Background 按在各相应颜色块上以设定以下颜色： Link Text 为一般连结颜色（未被按过）。 Active Link Text 为连结后的颜色。（被按过）。 Followed Link Text 为滑鼠置于连结文字上的颜色。 若你担心自己不善于颜色配搭，可选择一些拟好的组合 Color Schemes。 按 OK 或 确定 回文章编辑画面，完成。

■ 外部连结：

"没有连结便没有 WWW"，你同意吗？ 非发生于同一页中的连结统称外部连结，并有以下种类之分：   网站连结 例子：PenPals Garden 填入：http://www.school.net.hk/~chi   电子邮件连结 例子：Chris Chan 填入：mailto:lung55@usa.net(Chris Chan)?Subject=Hello Chris 备注：(Chris Chan) 及 ?Subject=Hello Chris 皆可有可无。 Chris Chan 为内定件人姓名。 Hello Chris 为内定邮件标题。   FTP连结 例子：下载 Cute FTP 2.0 填入：ftp://ftp.school.net.hk/pub/internet/ftp/cute2032.exe   News连结 例子：HK School Net News服务 填入：news:news.school.net.hk   Gopher连结 例子：中大 Gopher 查询服务 填入：gopher://gopher.cuhk.edu.hk   Telnet 连结 例子：HK School Net Telnet服务 填入：telnet://telnet.school.net.hk 以上各种连结的应用方法： 视窗状态：开启 Composer 及一己有字画的 HTML 档。 以滑鼠拉选欲加入连结之字句或图片，(将会成为按键) 按 Link 键，将出现如下视窗：(局部) 填入任一连结种类， 按 确定 回文章编辑画面，完成。

■ 内部连结：

发生于同一页中的连结称内部连结。当某页的内容很多时，内部连结便可以令使用者快速 的找到资料。你可以到 PenPal Garden FAQ page 去体验一下。 基本上只是两步而己：1.) 抛锚 (在欲连结处做个记号)。 2.) 连结此记号。 视窗状态：开启 Composer 及一己有大量字画的 HTML 档。 将游标移至文章中欲作记号之处，(连结目标) 按快速键 Target， 于对话窗填入记号名称，可以任何中文、英文或数字，唯大小写是有分别的。 以滑鼠拉选欲加入连结之字句或图片，(将会成为按键) 按 Link 键，将出现如下视窗：(局部) 选出在第三步己做好的记号， 按 确定 回文章编辑画面，完成。

■ 相对及绝对路径：

相对路径： 特点：具详尽的位置叙述，多用于不同伺服器之档案互连，以指定的伺服器作起点。 例如：Creation of Webpage 填入：http://www.hkiwc.com/composer/index.html 绝对路径： 特点：只有简单位置叙述，多用于同一伺服器之档案互连，以本身所在目录作起点。 例如：Creation of Webpage 填入：index.html 上面两连结的结果是一样的，皆因本页 link.html 和 index.html 都处于 http://www.hkiwc.com/composer/ 的环境下，若连到别的伺服器则请用绝对路径，例如 http://www.microsoft.com/index.html 你可不能只填入 index.html 了。 以下为一例子比较同伺服器下相对路径及绝对路径的写法，当然建议采用相对路径： 连结 写法比较 1 相对 Gif/bg.gif 荡癸 http://www.school.net.hk/Chris55/Gif/bg.gif 2 相对 ../spare.html 荡癸 http://www.school.net.hk/spare.html 3 相对 ../SoftwareCity/crack.html 荡癸 http://www.school.net.hk/SoftwareCity/crack.html Chris55 及 SoftwareCity 都在同一伺服器 http://www.school.net.hk 上的目录， Chris55 是相对路径的起点目录， index.html 是当作编辑或加入连结的档案， ../ 表示上一层（于 Unix 系统中），

■ 连结属性设定：

此处将介绍连结标记的 target 参数 。 它用以设定网页连结的指向目标、作用的视窗，计有如下设定值：   target="框窗名称" 这只运用于框架中，若被设定则连结结果将显示于该“框窗名称”之框窗中。   target="_blank" 或 target="new" 将连结的画面内容，开在新的浏览视窗中。   target="_parent" 将连结的画面内容，当成文件的上一个画面。   target="_self" 将连结的画面内容，显示在目前的视窗中。(内定值)   target="_top" 将框架中连结的画面内容，显示在没有框架的视窗中。（即除去了框架) 以上各种参数的应用方法： 于【内部连结】、【外部连结】、【简单步骤】等出现的对话窗填入或设定好连结后，按 一下该对话窗右下方的 Extra HTML 键并输入上述参数（红色）即可。

■ 一图多连结：（Image Map）

一图多连结 (Image Map) 有不少译名如 「影像地 图」、「互动式地图」(Interactive Image Map) 等，而「一图多连结」 是自改的，反正多一个 也不伤大雅且可顾名思义，记哪一个请自便。 右边是一个样本，请试按。唯「一图多连结」与 「框架」同样不为旧的刘览器所支援。 制法： 这处不涉及以 HTML 手动制作及标记解释，君欲尽窥其原理请看【HTML 剖析】。 准备材料：图片一张，作多连结之用并加插于一个 HTML 档案中，设名为 map.html。 已安装好：MapEdit，若没有请到【工具预备】按连结下载。   开启 Mapedit 时会询问你开启旧档，你可随便打开 map.html 于 Select Inline Image 对话窗选取插于 map.html 中那图片的名称并按 OK 按以下任一按键去选取图片中欲作连结的区域： 用以选取矩形连结区， 用以选取圆形连结区， 用以选取多边形连结区，   当以滑鼠拉选范围之后会出现如下画面：（局部） 于第一栏填入连结，相对、绝对皆可， 按 OK 回原来 Mapedit 画面， 你可重复由 3-6 的步骤选取其它连结区， 最后请按 键存档，   结束 Mapedit 并以浏览器开启 map.html 作测试，完成。