简单网页的形成课件

第三章简单网页的形成

3.3链接第三章简单网页的形成

3.3链接一、链接到另一网页【操作步骤】STEP1选择链接点。STEP2鼠标左键单击“插入”菜单，单击“超链接”，将出现“插入超链接”对话框，如图3-51所示。STEP3在“地址（E）”后面填写正确的网页地址（选择要链接到的文件，或者直接输入要链接文件的路径和文件名），单击“确定”。一、链接到另一网页【操作步骤】例14建立网站“c:\《Internet应用》\第3章例题\link”，练习链接的设置方法。具体操作：1．鼠标单击“文件”，单击“新建”，单击“由一个网页组成的网站”，选择“空白站点”，在“指定新站点的位置”一栏中输入“c:\《Internet应用》\第3章例题\link”，单击“确定”。例14建立网站“c:\《Internet应用》\第3章例2．建立四个页面，主页为index.htm，三个分页面分别为1.htm、2.htm、3.htm。（1）index.htm网页标题为“超链接”；第一行标题设为隶书、蓝色、7号字、加粗、居中，文字前插入图片link.gif；背景图片设为bg.gif。从第二行开始的所有文字设为楷体、蓝色、5号字、字符间距设为扩充、间距大小为10、左对齐、文本之前缩进200、双倍行距；使用多级编号：选择从第二行开始的所有文字，鼠标左键单击“格式”，单击“项目符号和编号”，出现“项目符号和编号方式”对话框，选择“编号”选项卡，选择所用编号的样式；单击“样式”，出现“修改样式”对话框，单击“格式”按钮，在出现的下拉式菜单中单击“字体”，在“字体对话框”的“字体”选项卡中将颜色改为蓝色，单击“字体对话框”中的确定，单击“修改样式对话框”中的确定，单击“项目符号和编号方式对话框”中的确定。选择四至七行，单击“格式”工具栏中的“增加缩进量”按钮（注意：这四行的1、2、3、4是键盘输入的）。保存文件2．建立四个页面，主页为index.htm，三个分页面分别为第三章简单网页的形成课件（2）1.htm网页标题为“链接的设计”；第一行标题设为幼圆、蓝色、5号字、加粗、居中；背景图片设为“从另一网页获得背景信息”，网页名为index.htm。第二、第四行为红色、加粗、居中，其他属性用默认值；第三、第五至第九行左对齐、文本之前缩进200、使用默认的项目符号；保存文件（2）1.htm（3）2.htm网页标题为“链接的方法”；第一行标题设为幼圆、蓝色、5号字、加粗、居中；背景图片设为bg.gif。输入“URL的四种情况”，插入一个四行四列、边框粗细为0的表格，将文字和图片输入到恰当的表格中，四幅图片的文件名从左至右依次为：Itss.jpg、Copy.gif、Clip.jpg、Mailbox.gif；保存文件（3）2.htm（4）3.htm网页标题为“链接的设计”；第一行标题设为幼圆、蓝色、5号字、加粗、居中；背景图片设为bg.gif。第二、第四行为红色、加粗、居中，其他属性用默认值；第三、第五至第九行左对齐、文本之前缩进200、使用默认的项目符号；保存文件。（4）3.htm3．设置四个网页之间的相互链接。方法一：一般的链接设置（1）在每一页的最后一行输入文字“主页链接的设计链接的方法链接的美化”；（2）将除本页外的三个标题链接到相应的网页。方法二：利用导航栏设置链接（1）显文件夹列表：单击常用工具栏中的“切换窗格”按钮，选择“文件夹列表”，从“视图”菜单中亦可找到。（2）选择导航页面：单击“视图”菜单，选择“导航”。3．设置四个网页之间的相互链接。（3）建立导航栏：用鼠标左键拖动“文件夹列表”中的文件1.htm到导航页面，则在“超链接”下会出现“链接的设计”；同理，将2.htm和3.htm拖动到导航页面。（3）建立导航栏：（4）在页面中插入导航栏：双击“文件夹列表”中的文件index.htm，光标放在页面最后一行，单击“插入”菜单，单击“导航”，在出现的“插入Web组件”窗口中，选择“链接栏”中的“基于导航结构的链接栏”，点击“下一步”，选择“选择栏样式”，点击“下一步”，选择链接栏方向，点击“完成”按钮。在随后弹出的“链接栏属性”窗口中选择“子层”和“附加网页”中的“主页”；同理，在另三个页面的最后一行插入导航栏，但要将“添加到网页的超链接”中的“子层”改成“同一层”。（4）在页面中插入导航栏：4．保存各个文件，主页index.htm。4．保存各个文件，主页index.htm。【注意事项】1．链接点可以是文字，也可是图片。2.注意链接时使用的URL地址是相对地址，还是绝对地址；先存盘再做链接，则链接默认用相对路径，否则默认为用绝对路径。相对路径是从当前位置开始写起的路径；绝对路径是从根目录写起的路径。【使用技巧】1.操作步骤中的STEP2，也可用以下两种方法实现：一是用鼠标右键单击被选择的部分，在出现的快捷菜单中选择“超链接”；二是用常用工具栏中的“超链接”按钮。2.默认的链接颜色是链接被使用前为蓝色，链接被使用后为紫红色，如果想改变颜色，可以单击“格式”，单击“背景”，在“网页属性”对话框中的“格式”选项卡中修改“颜色”部分的设置。【注意事项】【学习提示】1．为了使网站的浏览者在各个网页中方便地进行切换，我们通常会在每个网页中设定相同的链接，用一般的链接设置方法，步骤比较烦琐，而FrontPage2003为用户提供的导航栏，可以方便快捷地解决此问题。出现在导航栏中的链接可以自由选择，若能灵活运用，可以大大提高制作网页的速度和链接的正确率。2．在打开的网站中，如果在“文件夹列表”中做修改文件名、移动文件等操作，则FrontPage2003可以自动修复相关的链接。3．当从一个页面链接到另一个页面时，FrontPage2003提供了25种网页过渡效果，可以单击“格式”菜单，单击“网页过渡”，在出现的“网页过渡对话框”中进行选择，但这会影响网页的下载时间。【学习提示】二、链接到非网页文件【操作步骤】STEP1选择链接点。STEP2鼠标左键盘单击“插入”菜单，单击“超链接”，将出现“插入超链接”对话框。STEP3在“地址”后面填写正确的非网页文件的位置和名称，单击“确定”。二、链接到非网页文件【操作步骤】［例15］修改网站“c:\《Internet应用》\第3章例题\link”，练习链接到非网页文件设置方法。具体操作：1．打开站点c:\《Internet应用》\第3章例题\link：单击“文件”菜单，单击“打开站点”，选择站点所在的文件夹c:\《Internet应用》\第3章例题\link，单击“确定”。2．打开网页2.htm：双击文件夹列表中的2.htm。3．选择表格中的“链接到网页文件”，单击常用工具栏中的“超链接”按钮，在“地址”中填入index.htm；单击“目标框架”按钮，在“目标框架”对话框中的“公用的目标区”中选择“新建窗口”，单击“确定”，在单击“插入超链接”对话框中的“确定”。4．仿照具体操作3，将“链接到文本文件”链接到story.txt，将“链接到可执行文件”链接到Dancer.exe。5．保存文件。［例15］修改网站“c:\《Internet应用》\第33．选择表格中的“链接到网页文件”，单击常用工具栏中的“超链接”按钮，在“地址”中填入index.htm；单击“目标框架”按钮，在“目标框架”对话框中的“公用的目标区”中选择“新建窗口”，单击“确定”，在单击“插入超链接”对话框中的“确定”。4．仿照具体操作3，将“链接到文本文件”链接到story.txt，将“链接到可执行文件”链接到Dancer.exe。5．保存文件。3．选择表格中的“链接到网页文件”，单击常用工具栏中的“超链【注意事项】1．链接到非网页文件的设置方法和链接到网页文件的设置方法是一样的，只是被链接文件的扩展名不一样。2．当链接到可执行文件时，会出现“文件下载对话框”让用户选择是下载到磁盘上，还是在当前执行。3．链接到WORD、EXCEL等文档时，下载速度会比较慢；链接到纯文本的文档，则网页没有任何修饰，画面比较单调简陋。【注意事项】【使用技巧】1．若需要修改超链接，右键单击链接点，在出现的快捷菜单中单击“编辑超链接”，修改“编辑超链接对话框”中的参数，确定即可。2．若需要取消超链接，则在“编辑超链接对话框”中将“地址”中的内容全部删除，确定即可。【学习提示】1．当网站包含的文件较多时，最好使用文件夹来对文件进行分类管理，如所有的图片都放在images文件夹中，再建立一个文件夹files，将主页之下的所有被链接的文件放在其中……。2．在设置超链接时，若不改变目标框架，则新链接的文件将在当前窗口打开；若选择链接到新窗口，则原网页窗口保留，再打开一个新窗口来显示被链接的文件。【使用技巧】三、链接到书签【操作步骤】STEP1在需要的位置插入书签：确定光标位置，单击“插入”菜单，单击“书签”，填写书签名称后确定。STEP2选择链接点。STEP3鼠标左键盘单击“插入”菜单，单击“超链接”，将出现“插入超链接对话框”。STEP4单击“本文档中的位置”，在“请选择文档中的位置”对话框中选择要链接到位置的书签名称，单击“确定”。三、链接到书签【操作步骤】［例16］修改网站“c:\《Internet应用》\第3章例题\link”，练习链接到书签设置方法和链接的美化方法。具体操作：1．打开站点c:\《Internet应用》\第3章例题\link。2．新建一网页，保存为long.htm，网页标题为“长文件”，并输入如下内容：长网页第一部分ABCDE第二部分AABBCCDDEE第三部分AAABBBCCCDDDEEE［例16］修改网站“c:\《Internet应用》\第33．插入书签：鼠标单击“长网页”前，确定光标位置，单击“插入”菜单，单击“书签”，在“书签对话框”中的“书签名称”内填写名称“top”；同理，在“第一部分”前插入名称为1的书签，在“第二部分”前插入名称为2，的书签在“第三部分”前插入名称为3的书签。3．插入书签：鼠标单击“长网页”前，确定光标位置，单击“插入4．链接到书签：在标题“长网页”下面加一行，内容为“第一部分第二部分第三部分”，选择“第一部分”，单击“插入超链接”按钮，选择“本文档中的位置”，在“可选”部分的“书签”中选择1，单击“确定”；同理将“第二部分”链接到书签2、将“第三部分”链接到书签3。4．链接到书签：在标题“长网页”下面加一行，内容为“第一部分5．设置返回顶部的链接：在“E”之后加一行，并输入文字“返回顶部”，并链接到书签top；将此行复制到“EE”之后、“EEE”之后。6．将2.htm中的“某一长网页中利用书签进行跳转”以新建窗口中显示的方式链接到long.htm。7．对3.htm进行链接的美化：（1）链接的翻转：单击“格式”菜单，单击“背景”，选择“高级”选项卡，勾选“启用超链接翻转效果”选项，单击“翻转样式”按钮，选择加粗斜体、大小为18pt、粉色。（2）在“用图片进行链接”后，插入图片home.gif，并将该图片链接到主页index.htm。5．设置返回顶部的链接：在“E”之后加一行，并输入文字“返回（3）在“用各种按钮进行链接”后插入一个一行四列、边框粗细为0的表格；在第一列输入文字“以悬停按钮为例”；在第二列单击“插入”，选择“Web组件”，单击“动态效果”，选择“交互式按钮”效果，将出现“交互式按钮对话框”，在“文本”中输入“按钮1”，“字体”设为黄色、加粗、大小为18，链接到1.htm，按钮颜色为浅蓝，背景颜色为深蓝，按下时字体颜色为粉色，宽度为120，高度为55；将第二列的交互式按钮复制到第三列，右键单击第三列的交互式按钮，单击“交互式按钮”，将“按钮文本”改为“按钮2”，链接到2.htm，按钮颜色为藏蓝，背景颜色为自动，按下时字体颜色为深蓝；（3）在“用各种按钮进行链接”后插入一个一行四列、边框粗细为第三章简单网页的形成课件（4）将“显示下划线”链接到index.htm，选择代码选项卡，在开头部分的</head>之前加入下列文字。8．保存文件。（4）将“显示下划线”链接到index.htm，选择代码选项【注意事项】1．“链接到书签”通常用在页面较长的网页中，点击该链接后，链接到的书签位置自动变为显示窗口的第一行，以方便用户迅速找到所需要的部分。2．通常会在页面中为书签做一个目录以便链接。3．一般会在每一部分的结尾设置一个返回到本页顶部的书签链接。4．链接美化后的效果要在预览中或浏览器中才能看到。5．有些效果必须在保存之后才能在预览中看到效果。【使用技巧】1．同一网页中返回到本页顶部的书签链接是完全一样的，通常做好一个链接，复制到其他需要的部分即可。2．除了可以链接到本网页的指定部分（书签所在位置），还可以链接到其他网页的指定部分；例如链接到本网页的书签1，“地址”显示为#1，链接到2.htm的书签1，“地址”显示为#2。【注意事项】【学习提示】1．链接即可以设置在文字上，又可以设置在图片上。2．链接的美化（1）文字的链接可以通过“背景”中链接的颜色设置，决定链接未使用时和使用过后的颜色。可以通过“背景”中链接的翻转，设置鼠标悬停时链接文字的变化。下划线问题：

如果是在文字上设置链接，通常被链接的文字会自动加上下划线，当页面上设置的链接比较多时，过多的下划线会影响页面的美观性，如何解决“下划线”问题呢？简单的方法有二个：一是用图片代替文字，二是用按钮代替文字。（2）图片的链接完整图片的链接可以通过设置热区，将图片的一部分设置成链接。【学习提示】四、链接到邮箱【操作步骤】STEP1选择链接点。STEP2鼠标左键盘单击“插入”菜单，单击“超链接”，将出现“插入超链接对话框”。STEP3单击“电子邮件地址”按钮，在“插入超链接对话框”中填写正确的电子邮件，单击“确定”。

四、链接到邮箱【操作步骤】例17修改网站“c:\《Internet应用》\第3章例题\link”，练习链接到邮箱设置方法和利用热点进行链接的方法。具体操作：1．打开站点c:\《Internet应用》\第3章例题\link。2．打开2.htm。3．选择abc@263.net，单击“电子邮件地址”按钮，在“电子邮件地址