《创建超级链接》PPT课件.ppt

课堂讲解 上机实战,第5课 创建超级链接,课堂讲解,超级链接概念 超级链接分类 创建文本超级链接 创建锚链接 创建空链接 创建电子邮件超级链接 创建图像超级链接 创建下载超链接创建导航条,超级链接概念,超级链接是指页面对象之间的链接关系，它网页的灵魂，能合理、协调地把网站中的各个元素、页面通过超级链接构成了一个有机整体，使浏览者能快速地访问到想要访问的页面。,超级链接分类,绝对超级链接 文档相对路径 站点根目录相对路径,绝对超级链接,绝对超级链接就是形如“http:/www.china/zh_cn”的超级链接地址，它给出了超级链接目标端点完整的URL地址，包括使用的协议“http:/”。一般用于创建站外具有固定地址的超级链接。,文档相对路径,使用文档相对路径不需要给出完整的URL地址，可省去URL地址的协议，只需保留不同的部分。如pic/logo.gif，这是本地站点超级链接中最常用的链接形式。由于相对超级链接的文件之间相互关系并没有发生变化，因此使用文档相对路径创建的超级链接在上传时可以不用更新各个超级链接。,站点根目录相对路径,站点根目录相对路径是形如“/help/help.html”的超级链接地址，它基于站点根目录，在同一个站点中网页的超级链接也可采用这种方法。,创建文本超级链接,文本超级链接是最常见的超级链接，通过使用鼠标点击文本即可从一个网页跳转到另一个网页。,2、创建文字链接（1）选中文本（2）打开属性面板，在【链接】文本框里输入链接地址，或指向文件。（3）保存后按F12预览，当鼠标点击文本时会直接链接到刚才输入的网站。,创建锚链接,创建命名锚记 链接命名锚记,创建命名锚记,在制作网页时，为了达到跳转到网页固定位置的目的，可以使用锚链接。通过对网页中指定位置的命名，利用超级链接打开目标网页时可直接跳转到相应的命名位置上。,链接命名锚记,创建好锚记之后，必须创建对应的超级链接源端点。,创建锚记链接：（1）复制一篇文章，在顶部将大纲列出1.2 3（2）将光标放到每一段前依次添加锚记点，英文命名（3）选中大纲1.，在属性面板下【链接】中输入“#英文名”（5）重复操作，保存F12浏览,创建空链接,要想对文本设置行为，首先必须为文本建立空超级链接（空超级链接是一个未指派目标的超级链接），这样行为才会有效。为文本建立空超级链接时，只要先在文档窗口中选中需要建立空超级链接的文本，然后在属性面板的“链接”文本框中输入一个“#”符号即可。建立空超级链接的目的只是为了应用行为，其他情况下不必建立。,1、创建空链接 有时制作网页只是为了测试一下页面，这时我们就需要使用空链接。（1）选中要创建空链接的对象，打开属性面板（2）在【链接】文本框里输入“#”号（3）保存，F12键浏览，当光标指向链接对象时，光标会 变为小手的形状，这就创建了空链接,二、链接分类,创建电子邮件超级链接,电子邮件在网络应用中十分广泛，在网页中建立电子邮件超级链接可方便网页浏览者与设计者之间的联系。,创建电子邮件链接 与其他链接的区别是，电子邮件链接并不是移动到特定的站点或网页文档，而是直接调用了可发送邮件的程序,创建电子邮件链接,（1）将光标放在需要插入邮件地址的位置（2）执行【插入】-【电子邮件链接】，打开对话框（3）在【文本】中输入电子邮件链接要显示在页面上的文本，在【E-mail】中输入要链接的邮箱地址,创建图像超级链接,为一般图像创建超级链接 创建图像热点超级链接,为一般图像创建超级链接,3、创建图像链接 创建图像链接可以单击图像跳转到相关的浏览页面，是网页设计者常用的一种链接方式。（1）在文档中插入一幅图像（2）选择该图像，打开属性面板（3）在【链接】文本框中输入链接地址或指向文件。（4）保存并浏览,创建图像热点超级链接,要在一幅比较大的图片中添加许多超级链接时，应该将图片化整为零，分割成较小的图片，然后分别为这些小图像上建立超级链接来达到目的，但这时整幅图片就不能对齐，利用Dreamweaver 8的图像热点超级链接功能就能避免这个问题。,创建热点链接注意：热点链接只针对图像 热点工具：矩形热点、椭圆形热点、多边形热点 如果一个文档中只有一幅图像，而又想在这幅图像的不同位置创建多个链接，这时用图像链接的方法是行不通的。只能将图像划分为多个区域作为链接的热点。,创建热点链接,（1）选择热点绘制工具，绘制热点（2）打开属性面板在【链接】输入链接方向，确定目标,创建下载链接常用对象为：.doc、.ppt、.exe、.rar、.zip（1）选中文本（2）单击【链接】文本框右侧的“浏览文件”按钮，选择文件（3）将文件保存在站点下（4）单击【确定】按钮，保存并浏览,创建导航条,插入导航条 编辑导航条,插入导航条,导航条一般由图像或图像组组成，这些图像的显示内容随用户的操作不同而进行相应的变化。导航条为访问者浏览不同网页提供了一条捷径。,编辑导航条,二、导航条导航条由图像或图像组组成，图像显示内容会随用户不同操作而变化。导航条主要是为在站点上的页面和文件之间移动提供一条简捷的途径。导航条项目共包含有4种状态。一般：指用户尚未单击或尚未与此项目交互时所显示的图像。例如，此种状态的项目看起来未被单击过。滑过：指鼠标指针滑过“一般”图像时所显示的图像。项目的外观发生变化（例如变得更亮），以便让用户知道可与这个项目进行交互。,二、导航条按下：指项目被单击后所显示的图像。例如，用户单击某项目后，载入一个新的页面，而导航条仍然显示，只是被单击的项目变暗，表示它曾被选择过。按下时鼠标经过：指在项目被单击后，鼠标指针滑过“按下”图像时，所显示的图像。此状态可作为一个给用户的可视提示，告诉他们在站点的这一部分，此项目不能再被单击，例如，项目变淡或变灰。,二、导航条下图所示的4个图片即为用户自定义导航条4种不同状态下图片效果。1.插入导航条使用【插入导航条】命令之前，须先为各个导航项目的显示状态创建一组图像，并将该组图像拷贝到站点内。用户可将导航条项目视为按钮，因为单击它时，导航条项目将链接到其他网页。打开如下图所示的【插入导航条】对话框，设置完毕后单击【确定】按钮即可。,【插入导航条】对话框中各选项功能。添加项目：向【导航条元件】列表框中添加项目。,二、导航条删除项目：删除【导航条元件】列表框中项目。向上移动项目：向上移动【导航条元件】列表框中的项目。向下移动项目：向下移动【导航条元件】列表框中的项目。导航条元件：显示所有项目。项目名称：为导航条项目命名，例如Home。状态图像：单击【浏览】按钮可从打开的对话框中自由选择最初显示的图像。值得注意的是，此项为必添项，其他图像状态选项为可选项。鼠标经过图像：单击Browse按钮可从打开的对话框中自由选择当用户鼠标指针滑过项目所显示的图像。按下图像：单击Browse按钮可从打开的对话框中自由选择用户单击项目后显示的图像。按下时鼠标经过图像：单击rowse按钮可从打开的对话框中自由选择当用户将鼠 标指针滑过按下图像时所显示的图像。,二、导航条替换文本：输入项目的描述性名称。按下时，前往的URL：单击Browse按钮，以选择要打开的链接文件。该选项后包含一个下拉列表框：选择Main window(主窗口)选项可在同一窗口中打开文件。如果导航条位于框架集中，则应选择要在其中打开文件的框架。预先载入图像：可在载入页面时下载图像。如果未选择此选项，在用户鼠标指针滑过鼠标经过图像时可能会出现延迟。页面载入时就显示“鼠标按下图像”：可在显示页面时，以按下状态显示所选项目。选择此选项时，在【导航条元件】列表框中该项目后面出现一个星号。插入：可选择在文档中是设置导航条项目插入方式是垂直Vertically插入还是Horizontally水平插入。使用表格：以表格的形式插入导航条项目。,二、导航条打开【插入导航条】对话框的方法有两种。选择【插入】|【图像对象】|【导航条】命令。单击【插入】工具栏左侧的下拉三角按钮，从弹出的快捷菜单中选择【常规】选项，然后单击其右侧的【图像】按钮，从弹出的菜单中选择选择【导航条】选项，如图8-17所示。新创建一个网页，向其中添加一个“首页”导航按钮，其4种状态使用的图片分别为PIC01.jpg、PIC02.jpg、PIC03.jpg、PIC04.jpg，替换文本为“链接至首页”，链接目标为default.html。(1)选择【文件】|【新建】命令，创建一个HTML基本页。(2)将光标置于文件的顶部，然后单击【常规】工具栏中的【导航条】按钮，打开【插入导航条】对话框。(3)单击【状态图像】文本框右侧的【浏览】按钮，选择PIC01.jpg。(4)单击【鼠标经过图像】文本框右侧的【浏览】按钮，选择PIC02.jpg。(5)单击【按下图像】文本框右侧的【浏览】按钮，选择PIC03.jpg。,二、导航条(6)单击【按下时鼠标经过图像】文本框右侧的【浏览】按钮，选择PIC04.jpg。(7 在【替换文本】文本框中输入项目的描述性名称“链接至首页”。(8)单击【按下时，前往的】右侧的【浏览】按钮，选择站点中的default.html文件。(10)设置完毕后单击【确定】按钮即可完成导航条的设置。2.编辑导航条为文档创建导航条后，可使用【修改导航条】命令向导航条添加图像，或从导航条中删除图像。此命令可用于更改图像或图像组、更改单击项目时所打开的文件、选择在不同的窗口或框架中打开文件以及重新排序图像。若要修改导航条，选择【修改】|【导航条】命令，打开【修改导航条】对话框，从【导航条元件】列表框中选择要编辑的项目，再根据 实际需要进行设置，设置完毕后单击【确定】按钮即可。,三、动手实践为“卡通动漫”网站index.asp网页中左框架中的4张图片添加超级链接，为上框架中的“设为首页”、“加入收藏”、“联系站长”添加超级链接；打开dmjs.asp网页，添加“返回主页”、“动漫介绍”、“动漫图库”和“留言薄”导航条；并设置“鼠标未经过”时文字超级链接样式为去除下划线。步骤1 设置图像链接(1)进入ktzj站点，双击【文件】面板中的index.asp网页。(2)选择“返回主页”图片，拖动【属性】面板中的【指向文件】按钮，指向【文件】面板中的index.asp网页，打开【目标】下拉列表框，选择【_parent】选项。(3)选择“动漫介绍”图片，拖动【属性】面板中的【指向文件】按钮，指向【文件】面板中的dmjs.asp网页，打开【目标】下拉列表框，选择【_parent】选项。(4)选择“动漫图库”图片，拖动【属性】面板中的【指向文件】按钮，指向【文件】面板中的pic.asp网页，打开【目标】下拉列表框，选择【_parent】选项。(5)选择“留言薄”图片，拖动【属性】面板中的【指向文件】按钮，指向【文件】面板中的liuyan.asp网页，打开【目标】下拉列表框，选择【_parent】选项。,三、动手实践步骤2 设置“设为首页”链接将光标置于“设为首页”字样前，然后单击【文档】工具栏中的【拆分】按钮，在“设为首页”前添加一段代码：如右图所示：,三、动手实践步骤3 设置“加入收藏”链接在“加入收藏”前找到标签，加入如下代码：如右图所示：,三、动手实践步骤4 设置E-Mail链接选择设计区域中的“联系站长”文本，单击【常规】工具栏中的【电子邮件链接】按钮，打开【电子邮件链接】对话框，确定【文本】文本框输入的文字为“联系站长”，在【E-Mail】文本输入中输入，然后单击【确定】按钮，完成E-Mail链接设置。步骤5 设置导航条(1)选择【插入】|【图像对象】|【导航条】命令，打开【插入导航条】对话框。(2)在【项目名称】文本框中输入zhuye，单击【状态图像】右侧的【浏览】按钮，从站点的dmjs文件夹中选择zhuye.jpg；单击【鼠标经过图像】右侧的【浏览】按钮，从站点的dmjs文件夹中选择zhuye01.jpg；在【替换文本】文本框中输入“返回主页”；单击【按下时，前往的URL】右侧的【浏览】按钮，从站点中选择index.asp。(3)单击【添加元件】按钮，设置【项目名称】为jieshao，【状态图像】为 jieshao.jpg，【鼠标经过图像】为jieshao01.jpg，【替换文本】为“动 漫介绍”，【按下时，前往的URL】为dmjs.asp。,三、动手实践(4)单击【添加元件】按钮，设置【项目名称】为tuku，【状态图像】为tuku.jpg，【鼠标经过图像】为tuku01.jpg，【替换文本】为“动漫图库”，【按下时，前往的URL】为pic.asp。(5)单击【添加元件】按钮，设置【项目名称】为liuyan，【状态图像】为liuyan.jpg，【鼠标经过图像】为liuyan01.jpg，【替换文本】为“留言薄”，【按下时，前往的URL】为all.asp，如右图所示。(6)设置完毕后单击【确定】按钮。,(7)选择整个导航条布局表格，在【属性】面板中的【宽】文本框中输入812，单位选择【像素】。(8)选择导航条布局单元格，在【属性】面板中的,【宽】文本框中输入203，单位选择【像素】，如下图所示。,三、动手实践(9)设置完毕后保存文件，按F12键进行预览，将指针移至“动漫介绍”导航按钮上时，得到如右图所示的效果。,步骤6 改变超级链接样式在index.asp网页中“设为首页”、“加入收藏”和“联系站长”中前两个字样都不带下划线，而第三个电子邮件联接却带有下划线，看上去很不美观。下面介绍在鼠标未经过时超级链接样式的改变方法。（1）选择【文本】|【CSS样式】|【新建】命令，打开【新建CSS样式】对话框，。（2）从【选择器类型】列表框中选择【高级（ID、上下文选择器等）】单选按钮。（3）从【选择器】下拉列表框中选择【a:link】选项。,三、动手实践（4）选择【定义在】选项组中的【新建样式表文件】单选按钮，如左1图所示。（5）设置完毕后，单击【确定】按钮，打开【保存样式表文件为】对话框，在【文件名】文本框中输入ljcs，如左图2所示，单击【保存】按钮。（6）打开【a:link的CSS样式定义】对话框，设置【字体】为【华文新魏】，设置【大小】为16，选择【修饰】中的【无】，如左3图所示，设置完毕的单击【确定】按钮。(7)如果用户想要设置其它的CSS样式，可选择【文本】|【CSS样式】|【管理样式】命令，打开【编辑样式表】对话框，单击【编辑】按钮，如左4图所示。,三、动手实践(8)进入ljcs.css对话框，单击【新建】按钮，如左下图所示。(9)打开步骤（4）中的【新建CSS样式】对话框，选择a:visited选项，单击【确定】按钮，在打开的对话框中选择【修饰】选项组中的【无】选项，设置完毕后单击【确定】按钮回到ljcs.css对话框。(10)以同样的方式，设置a:hover和a:active。(11)连续单击【完成】按钮，完成设置。(12)保存后按F12键预览，这时我们就看不到默认状态下的下划线了，如右下图所示。,多项选择题,在dreamweaver中，热点工具有哪几项？（A）矩形工具（B）椭圆形工具（C）三角形工具（D）多边形工具,多项选择题,在dreamweaver中，可以绘制出的热点形状有：（A）矩形（B）椭圆形（C）三角形（D）多边形,HTML,1、超链接使用的是.标记2、空链接：.3、文字链接：文字4、图像链接：图像,上机实战,本课上机实战制作过程可分为左侧导航图像超级链接的创建、主要内容区文本和图像超级链接的创建、公司Logo下方的图像热点超级链接的创建及底部版权信息区电子邮件超级链接的创建4部分进行。,