网页制作网页中的超链接课件

第五章 网页中图片、超链接及表格的处理,1,5.2 网页中的超链接,超链接简介 超链接的组成与特点 创建超链接 编辑及管理超链接 书签的使用 使用导航栏 为图形添加特点,第五章 网页中图片、超链接及表格的处理,2,超链接简介,超链接：网页中的关联，关联可以是一个网页、一幅图像、一个多媒体文件、一个Microsoft Office文档、一个电子邮件地址、一个可执行文件。 当浏览者单击超链接，目标将显示在Web浏览器中，并根据目标的类型打开或运行。,第五章 网页中图片、超链接及表格的处理,3,超链接的组成,超链接的组成 ：链接的载体以及链接的目标地址。 链接的载体：显示链接的部分，即包含超链接的图像和文字； 链接的目标地址：当单击超链接时所显示的内容，它可以是本站点的另一个网页，也可以是另一个站点中的一个网页，或进行文件下载等。,第五章 网页中图片、超链接及表格的处理,4,超链接的特点,(1)绝对超链接。当链接的目标地址是一个绝对URL，即完整的Internet地址，它可以实现Internet的直接定位。 (2)相对超链接。当链接的目标地址是一个相对URL，即URL中缺少一个或多个部分，如协议或域等。,第五章 网页中图片、超链接及表格的处理,5,超链接的种类,网页中的超链接一般有三种： 内部超链接：在同一站点内的网页之间的相互连接的通道。 外部超链接：通向Internet的通道。 书签：同一网页中的超链接。,第五章 网页中图片、超链接及表格的处理,6,创建超链接,(1)选定链接源（文本、图像或其他元素） (2)工具栏的“超链接”按钮或“插入”/“超链接” (3)选择超链接方式,第五章 网页中图片、超链接及表格的处理,7,链接到其他网站,方法1：在页面中直接输入网址 方法2：输入文字后设置超链接（输入URL地址） 方法3：通过浏览器链接。步骤： 1）用IE打开要链接目标（网页） 2）在FrontPage中执行“插入”/“超链接” 3）单击对话框中 “使用Web浏览器来选择网页或文件”按钮 4）单击已打开的链接目标，网址和网页名自动写入FrontPage超链接对话框的URL地址栏中。,第五章 网页中图片、超链接及表格的处理,8,“使用Web浏览器来选择网页或文件”按钮 链接到电子信箱 方法1：在页面中直接输入E-mail地址 方法2：输入文字后设置超链接，单击“制作发送电子邮件的 超链接”按钮，然后输入E-mail地址。,第五章 网页中图片、超链接及表格的处理,9,链接到一个新的网页 链接非网页数据以供他人下载 在“超链接”对话框中单击“制作一个指向你计算机上文件的超链接”按钮，选择要链接的文件。 链接到目前网站内部的文件 在“超链接”对话框的文件列表中选择 链接目标,第五章 网页中图片、超链接及表格的处理,10,编辑超链接,(1)设置超链接文本的颜色。 超链接：未被选中的超链接。 当前超链接：当前被选中的超链接。 已访问过的超链接：已经被浏览过的超链接。 步骤：在“普通”视图窗口的快捷菜单中选择“网页属性”命 令，在对话框的“背景”标签下修改。 (2)设置超链接文本的字体效果。步骤： 1）打开“网页属性”对话框，选择“背景”选项卡； 2）选中“启用超链接翻转效果”， 3）单击【翻转样式】按钮，在“字体”对话框中根据需要对超链接文本的字体、字号、字形等进行设置。,第五章 网页中图片、超链接及表格的处理,11,编辑超链接（Contd.）,(3)更改代表超链接的图片外观。步骤： 1）在图片的快捷菜单中选择“图片属性”命令。 2）在“图片属性”对话框的“外观”选项卡的“布局”区域设置图片的对齐方式、图片边框的粗细（如边框粗细为0，则取消图片的边框）及图片离边框的距离；当需要精确修改图片大小时，可在“大小”区域进行设置。 (4)更改超链接的链接地址：在“编辑超链接”对话框的URL框中，输入新的链接地址。 (5)删除超链接：若要彻底删除超链接（包括超链接文本），按 DELETE 键；若要删除超链接（保留超链接文本），在“编辑超链接”对话框中，选中 “URL” 框的内容按 【DELETE】 键。,第五章 网页中图片、超链接及表格的处理,12,管理超链接,查看网页间的链接关系，可以进入“超链接”视图查看。 (1) 自定义超链接视图：显示网页标题、指向图片的超链接等。 1）背景处快捷菜单中的命令： “显示网页标题”命令：显示网页标题 “指向图片的超链接”命令：显示网页上指向图片的超链接 “重复超链接”命令：显示重复超链接（一个网页上的多个超链接都指向相同的网页、图片或文件） “网页内部的超链接”命令：显示指向同一网页上书签的超链接 2）网页快捷菜单的 “移至中央”命令：将该网页移到超链接视图模式下的中央。,第五章 网页中图片、超链接及表格的处理,13,管理超链接（Contd.）,(2) 列出断开的超链接 一个断开的超链接（不指向任何位置的链接），会对站点访问者带来很大的烦扰。需定期检查并及时修复或删除。 查看站点上断开的超链接：单击【查看】/【报表】/【断开的超链接】命令。 (3) 修复断开的超链接：在“断开的超链接”报表中双击超链接项，出现 “编辑超链接”对话框。,第五章 网页中图片、超链接及表格的处理,14,管理超链接（Contd.）,【编辑网页】按钮：显示该网页并编辑 ； 可直接在 “将超链接替换为” 框中输入正确的链接地址URL ；或者单击 【浏览】按钮查找站点、文件或Internet上的网页或文件； “对所有网页进行更改”或 “对所选网页进行更改” ：修复因这个超链接而导致在当前站点中所有相关网页上或在当前所选网页上所发生的问题 ； 【替换】按钮：修复确定。,第五章 网页中图片、超链接及表格的处理,15,书签的使用,书签：网页中被标记的位置。 在网页中使用书签： 1）定义书签：在某一个位置上定义一个书签； 2）使用书签：定义一个到书签上的超链接。,第五章 网页中图片、超链接及表格的处理,16,定义书签,可以使用文本、图像、网页的空白处作为书签的载体。 文本书签，文本下有虚线显示；网页空白处为书签，以一小旗杆作标记；图像书签，无标志。 定义书签步骤： (1) 网页视图模式下，将插入点定位在要创建书签的地方，或者选择要指定书签的文本、图像。 (2)单击【插入】/【书签】命令，在对话框“书签名称” 框中，键入书签的名称。,第五章 网页中图片、超链接及表格的处理,17,创建到书签的链接,步骤： (1)选中超链接载体； (2)打开“创建超链接”对话框；在“可选”区域中单击【书签】下拉按钮，在列表中选择链接的书签名。,第五章 网页中图片、超链接及表格的处理,18,删除书签,步骤： (1)【插入】/【书签】命令 (2) 在对话框的“此网页中的其他书签”列表中双击要删除的书签名，单击【清除】按钮。,第五章 网页中图片、超链接及表格的处理,19,使用导航栏,前提：在导航视图中已建立网页的层次关系 “导航”视图 ：以层次结构显示站点中的网页 主页位于顶部，其他网页位于下面各层。 通过鼠标拖曳网页到新的位置来改变网站中的层次结构。 添加下层网页： 方法1：将文件窗口中未链接的网页直接拖曳到导航视图区 方法2：导航视图区某网页快捷菜单的“新建网页”命令,第五章 网页中图片、超链接及表格的处理,20,插入导航栏,步骤： (1)插入点定位。 (2)单击【插入】/【导航栏】命令， 出现“导航栏属性”对话框。 (3)在 “要添加到网页超链接” 区域中设定所需的超链接选项。当选择了一个选项时，相应的超链接就以蓝色出现在结构示意图中。 (4)在 “方向和外观”区域中选择水平或垂直、显示文本还是按钮。（如果使用了主题，则只能选择 “按钮”） (5)单击【确定】按钮。,第五章 网页中图片、超链接及表格的处理,21,插入网页横幅,步骤： (1)插入点定位。 (2)单击【插入】/【网页横幅 】命令。 (3)网页横幅：默认为网页标题（可修改） (4)“图片”/“文本”：使用主题时，网页横幅用图片形式或用文本形式 。 （如果无主题，则图片与文本形式相同）,第五章 网页中图片、超链接及表格的处理,22,修改导航结构,在“导航”视图中修改： (1) 添加现有网页：拖曳文件夹列表里的网页到需要的位置。 (2) 移动导航结构里的网页：拖曳。 (3) 重命名：快捷菜单【重命名】命令。 (4) 在现有网页下增加新网页：快捷菜单【新建网页】命令。 (5) 删除网页：单击网页，按【Delete】 键，在“删除网页”对话框中，选择 “将本网页从所有导航栏中删除”选项。,第五章 网页中图片、超链接及表格的处理,23,设置共享边框,共享边框：站点中一个或多个网页共享的区域，它可能是一个在网页顶端（类似于网页页眉）、底端（类似于网页页脚）、左边或右边的区域。 利用共享边框可设置属性相同的多张网页上的导航栏 设置步骤： (1)【格式】/【共享边框】命令。 (2) 在“应用到”区域中选择“所有网页”或“当前网页”选项。 (3) “上”、“下”、“左”、“右”复选框：确定边框的位置。 (4) 单击【确定】按钮。 可以在共享边框的任一点添加、更改或删除内容： (1)在网页视图模式中，单击共享边框区域。 (2)更改共享边框内部区域的内容，如键入文本或添加图片。,第五章 网页中图片、超链接及表格的处理,24,为图形添加热点,每一个热点区域都是一个超链接 在图片不同的热点区域上单击鼠标，分别链接到相应的网页中。,第五章 网页中图片、超链接及表格的处理,25,添加热点的方法,(1)选中图片。 (2)在图片工具栏上，根据所需形状选择相应的热点形状按钮。 (3)在图形的适当位置，画上矩形、圆形或多边形热点。 注意：必须是封闭的图形才能建立超链接.如果是比较复杂的多边形，找不到起始点，可以在结束绘图时双击鼠标将图形封闭。 (4)释放鼠标按钮，出现 “创建超链接” 对话框，设置该热点的链接目标。,第五章 网页中图片、超链接及表格的处理,26,编辑热点,编辑热点的链接地址：双击该热点区域 移动热点：拖曳 调整热点大小：拖曳热点的选择控点 删除热点：【 DELETE 】 若正在移动热点时，希望将热点恢复到它的原始位置，只要鼠标仍按住热点时按下【 ESC】 键即可。,第五章 网页中图片、超链接及表格的处理,27,突出显示图形上的热点,图片工具栏中的【突出显示热点】按钮。 更改超链接的目标位置：在“超链接”对话框中单击“更改目标框架”按钮，选择目标窗口。,第五章 网页中图片、超链接及表格的处理,28,5.3 网页中表格的制作及处理,表格在网页中的作用： (1)存放数据。 (2)合理组织网页布局。相同的网页在不同的系统和不同的浏览器中可以有很大区别，如果将网页元素添加到表格中，就不会出现这种问题。 创建表格 编辑表格 表格的格式设置 使用表格编排网页页面,第五章 网页中图片、超链接及表格的处理,29,创建表格,和Word中插入表格一样 在网页中表格可以嵌套,第五章 网页中图片、超链接及表格的处理,30,编辑表格,1.添加行或列 2.添加单元格 3.删除行或列 4.合并单元格 5.拆分单元格 6.设置单元格、行和列的尺寸,第五章 网页中图片、超链接及表格的处理,31,表格的格式设置,设置表格的属性：“表格”/“属性”/“表格” “布局”域 对齐方式：表格的位置 浮动：文本围绕表格的方式 单元格边距：单元格内容和内边框的距离。单位：像素 单元格间距：各单元格之间的距离。 指定宽度、指定高度：指定表格的宽度和高度。以像素或百分比为单位。 “边框”域 粗细、颜色：边框线的粗细和颜色 亮边框：上、左边框线颜色 暗边框：下、右边框线颜色 “背景”域 颜色：表格背景色；使用背景图片,第五章 网页中图片、超链接及表格的处理,32,表格的格式设置（Contd.）,设置单元格属性：“表格”/“属性”/“单元格” “布局”域 水平对齐方式、垂直对齐方式：单元格内容的对齐方式 行跨距、列跨距：在单元格内增加的行数或列数 标题单元格：选定单元格中内容居中对齐、加粗 不换行：避免浏览时单元格内容可能被换行 指定宽度、指定高度：指定单元格的宽度和高度。以像素或百分比为单位。 “边框”域设置单元格边框，与表格属性相似。 “背景”域设置单元格背景，与表格属性相似。,第五章 网页中图片、超链接及表格的处理,33,使用表格编排网页页面,1.用表格组织数据 例： (1)在空白网页上插入一个22的表格，并插入标题“唐诗欣赏”。 (2)将表格边框“粗细”设为15；对齐方式为水平居中，单元格间距和单元格边距均为5。 (3)第1行第1列的背景色设为绿色，第1行第2列的背景设为图片，第2行第2列设为红色。 (4)在4个单元格中分别输入唐诗或插入图片。 (5)保存网页文件，浏览网页。,第五章 网页中图片、超链接及表格的处理,34,使用表格编排网页页面（Contd.）,2.使用嵌套表格 优点：可以对某个