室内设计培训
平面设计培训
部落窝教育
网站首页 >> 设计在线 >> 文章内容

设计和代码视图为文字和图片添加链接和提示文本

[日期:2010-02-01]   来源:IT部落窝  作者:IT部落窝   阅读:2198[字体: ]

  超级链接让网上各个网页奇妙地连接了起来,使我们可以畅游其中。下面就为大家系统和全面的介绍在Dreamweaver软件中超级链接这一重要核心技术。

  超链接的提示文字不仅可以帮助用户更好的体验网页,并且还可以起到SEO(搜索引擎优化)的作用,简单一点说就是链接的提示文字非常重要,是学习制作网页必需了解的。

  对于初学者可以在设计视图完成链接操作,对于已熟悉网页制作的高手来说,可以在代码视图操作,两种视图下操作达到的效果都一样,如果能熟悉两种视图下的编辑则可以更方便轻松的完成工作。

  一、在代码视图为文字添加链接和提示文本

  <a href="链接地址" target="_blank" title="提示文字">文字</a>
  在实际使用过程中注意以下几点:
  1、将href的“链接地址”替换为点击链接文字后要打开的网页;
  2、target="_blank" 此参数设定可以让目标链接在新窗口中打开,也可根据需要选择target="_parent", target="_self" ,target="_top" 。
  target="_self":表示相同框架,即在当前窗口(或当前选项卡)中打开该链接;
  target="_parent",将链接的文件载入含有该链接框架的父框架集或父窗口中。如果含有该链接的框架不是嵌套的,则在浏览器全屏窗口中载入链接的文件,就象_self参数一样。
  target="_top",在当前的整个浏览器窗口中打开所链接的文档,因而会删除所有框架。如果target参数框中不做任何选择,就表示默认值,同时默认值一般跟浏览器设置也有关系。
  3、将title的“提示文字”更改为在网页中鼠标移到链接文字时所提示的文字。
  例如:<a href="http://www.ittribalwo.com" target=_blank title=" IT部落窝">IT部落窝</a>
  效果:
IT部落窝 href="http://www.ittribalwo.com" target=_blank>IT部落窝

  二、在代码视图给图片添加链接和提示文本

  <a href="链接地址" target=_blank><img src="图片地址" alt=”图片提示文字" border=0></a>
  其中,alt=图片提示文字"为鼠标指向图片时的提示文字。
  例如:<a href=" www.ittribalwo.com " target=_blank><img src="http:// www.ittribalwo.com \images\logo.gif" border=0 alt=" IT部落窝" ></a>
  效果:
<spanIT部落窝 src="../upfiles/201002/20100201121800275.gif" border=0>

  三、在设计视图下为图片添加链接和提示文本

  在Dreamweaver里点击菜单“插入”-“图片”选择好图片之后,就会弹出一个“图像标签辅助功能属性”的对话框,只需在替换文本后面输入想要提示的文字就行。
  选中图片在下方的属性栏的链接输入框中输入你要链接的地址就好了。

  四、在设计视图下修改或添加已经添加了的图片的提示文字

  使用鼠标左键点击需要修改的图片,然后在属性面板里会看到有个“替换”属性,我们只要在替换属性后面输入提示文字即可。
  “源文件”处显示的是图片路径,“替换”处显示的是图片的替代文本,在图片显示不出时给人提示作用,“链接”输入框中填写链接地址,添加链接方法和上面步骤中相同,“目标”的选择方法也相同。

  通过以上的讲解,我们不难总结出:其实图片的提示文字说明即“Alt标签”,文字的提示文字说明即“title标签”。

IT部落窝PS,CDR,213班 分享到: QQ空间 新浪微博 腾讯微博 人人网
photoshop教程
Photoshop教程
平面设计教程
Photoshop教程