《网站实现-建立超链接》课件.ppt

《《网站实现-建立超链接》课件.ppt》由会员分享，可在线阅读，更多相关《《网站实现-建立超链接》课件.ppt（31页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、浏览镇江金山网浏览镇江金山网教学内容1. 超链接的概念超链接的概念2. 站点、网页的创建、保存站点、网页的创建、保存3.网页的布局、美化、充实网页的布局、美化、充实熟悉熟悉FrontPage1. 熟悉熟悉FrontPage建立超链接建立超链接 （重点）（重点）2. 插入超链接的步骤插入超链接的步骤3. 超链接的分类及插入方法超链接的分类及插入方法标题栏标题栏菜单栏菜单栏标准工标准工具栏具栏表格工表格工具栏具栏格式化格式化工具栏工具栏视视图图栏栏三个视图标签三个视图标签图形工具栏图形工具栏状态栏状态栏页面编辑窗口认识认识FrontPageFrontPage窗口窗口2.站点的创建站点的创建 建立自

2、己的主题网站，首先需要创建一个建立自己的主题网站，首先需要创建一个Web站点，站点，用于保存和调试创建的网页。用于保存和调试创建的网页。 执行：执行：“文件文件”“新建新建”“站点站点”8个模板和向导个模板和向导新建站点对话框：新建站点对话框：种站点模板种站点模板站点所在位置站点所在位置制作新网页新建网页名字新建网页名字保存按钮保存按钮打开按钮打开按钮新建按钮新建按钮 设置好后点击设置好后点击“确定确定”按钮，系统会自动按钮，系统会自动为用户建议一个新的站点（包含文件夹），这为用户建议一个新的站点（包含文件夹），这时屏幕上会自动列出时屏幕上会自动列出“文件夹列表文件夹列表”，底下第，底下第一个

3、文件夹是展开的，接着有两个子文件夹和一个文件夹是展开的，接着有两个子文件夹和一个文件。一个文件。 “_private”文件夹文件夹”：用户不想公开的文：用户不想公开的文件保存在这个文件夹中。件保存在这个文件夹中。 “_images”：保存网页中所使用的图片：保存网页中所使用的图片 “index.htm”：index的中文意思是主页，的中文意思是主页，后缀名是后缀名是“html”或或“htm”。 a、站点中的所以文件及文件夹的命名、站点中的所以文件及文件夹的命名最好不要出现中文最好不要出现中文 b、建立完整的文件夹（如：、建立完整的文件夹（如：images， html 等名字的文件夹）等名字的文

4、件夹） c、网页的主页命名为、网页的主页命名为index.htm d、所有的资料都要放在站点里面、所有的资料都要放在站点里面保存网页打开网站（网页）1.先选定要先选定要打开的文件打开的文件2.再单击打再单击打开按钮开按钮预览网页的方法网页的基本内容网页的基本内容1. 网页布局：利用表格定位网页网页布局：利用表格定位网页 表格是在网页设计中用得最多的元素，可以表格是在网页设计中用得最多的元素，可以说几乎所有的网页都是使用表格来组织的。说几乎所有的网页都是使用表格来组织的。 表格在网页中有定位和设置网页布局的作用表格在网页中有定位和设置网页布局的作用，利用表格可将各块内容分类列出，使网页清晰美利用

5、表格可将各块内容分类列出，使网页清晰美观、富有条理。表格中可以包含你喜欢的任何内观、富有条理。表格中可以包含你喜欢的任何内容，包括图象、文本、多媒体文件，甚至有嵌套容，包括图象、文本、多媒体文件，甚至有嵌套的表格。的表格。利用表格定位网页利用表格定位网页 在用表格布局时，表格的边框粗细应设置为在用表格布局时，表格的边框粗细应设置为0.？注意：注意：u在用在用表格布局表格布局时，表格的边框粗细应设置为时，表格的边框粗细应设置为0.u网页中的表格除了可以用来定位和布局外，还可网页中的表格除了可以用来定位和布局外，还可以当作以当作普通表格普通表格来使用，但来使用，但注意此时的表格边框注意此时的表格边

6、框粗细不能设置为粗细不能设置为02. 网页美化网页美化-添加网页元素添加网页元素（1）编辑文字）编辑文字 Frontpage提供了较为全面的文本处理功能，提供了较为全面的文本处理功能，我们在网页中输入文本，然后通过各种字体、字号我们在网页中输入文本，然后通过各种字体、字号及字型的设置来美化版面。向网页中添加文本时，及字型的设置来美化版面。向网页中添加文本时，可直接输入，也可将现有文档复制到网页中可直接输入，也可将现有文档复制到网页中。（2）插入图片和动画）插入图片和动画 在网页中可以插入多种格式的图片，但我在网页中可以插入多种格式的图片，但我们一般应选用那些压缩比高的格式的图片，例们一般应选用

7、那些压缩比高的格式的图片，例如如GIF、JPG等格式的图片。等格式的图片。 动画的格式有很多种，如动画的格式有很多种，如GIF图片动画、图片动画、FLASH动画、视频动画等。动画、视频动画等。1. 链接结构链接结构网站的链接结构是指页面之间相互链接的拓扑结网站的链接结构是指页面之间相互链接的拓扑结构。一般来说，网站的链接结构主要有两种：构。一般来说，网站的链接结构主要有两种：树状链接（一对一）、星状链接（一对多）树状链接（一对一）、星状链接（一对多）3.超链接超超链接超穿越时空穿越时空用超链接可以用超链接可以实现从一个网页到另一个目标的连接。超实现从一个网页到另一个目标的连接。超链接可分为链接

8、可分为文本超级链接文本超级链接和和图片超链接图片超链接两种表现形式，两种表现形式，不管建立哪种超链接，方法都基本相同，关键是定义不管建立哪种超链接，方法都基本相同，关键是定义超链接的超链接的URL。1.1.文字文字2.2.图形图形（图形热区）（图形热区）（类型）（类型）一切网络资源一切网络资源链接源链接源链接目标链接目标网页网页网站网站电子邮件电子邮件书签书签链接的两个元素建立超链接的一般步骤：2 2、打开、打开“创建超链接创建超链接”对话框（插入对话框（插入超链接、右击超链接、右击超链接、常用工具栏超链接、常用工具栏上的上的 按钮按钮 ）1 1、先选定链接源、先选定链接源( (文字、图片、图

9、形热区文字、图片、图形热区) )3 3、设置链接目标。、设置链接目标。To 网站To 网页To 电子邮件To 书签创建超链接对话框创建超链接对话框1 1、请学生打开、请学生打开d d盘上盘上“dtgjzx”dtgjzx”文件文件解压到解压到d d盘根目录盘根目录，各自小组的实践任务在各小组文件夹里，合作学习，各自小组的实践任务在各小组文件夹里，合作学习完成本组的探究实践任务。完成本组的探究实践任务。2 2、其中书签式链接和图形热区超链接、其中书签式链接和图形热区超链接 梅兰芳梅兰芳3 3、链接到网站的超链接，、链接到网站的超链接，网址在网址在“学生学生”文件夹里。文件夹里。分组探究分组探究超链

10、接的分类根据链接目标的不同性质，可以将链接分为四种：根据链接目标的不同性质，可以将链接分为四种：1 1同一页面内部的链接同一页面内部的链接 (1) 书签式链接书签式链接2 2不同页面之间的链接不同页面之间的链接（2）链接到其他网页）链接到其他网页 .cn 3 3链接到链接到WebWeb站点站点（3）链接到网站）链接到网站 （4）链接到电子邮件）链接到电子邮件4 4建立图像映射建立图像映射（5）图形热区超链接）图形热区超链接书签：就是网页中被标记的位置或被标记的选中文本，可书签：就是网页中被标记的位置或被标记的选中文本，可以作为超链接的目的地。以作为超链接的目的地。难点突破难点突破建立书签式超链

11、接的步骤：建立书签式超链接的步骤：1 1、在网页中某位置定义一个书签（插入菜单、在网页中某位置定义一个书签（插入菜单书签）书签）2 2、建立一个连到该书签的超链接、建立一个连到该书签的超链接图形热区超链接：就是在图片中的某个位置建立超链接，图形热区超链接：就是在图片中的某个位置建立超链接，而这个位置就叫热区。而这个位置就叫热区。建立图形热区超链接的步骤：建立图形热区超链接的步骤：1 1、先在图片中的某个区域建立热区（图片工具栏）、先在图片中的某个区域建立热区（图片工具栏）2 2、选择连到该热区的目标、选择连到该热区的目标进入实战进入实战 用用FrontPageFrontPage软件打开软件打开

12、“课堂练习共八套课堂练习共八套”文件夹文件夹里的网页进行操作里的网页进行操作。利用本节课掌握的建立超链接。利用本节课掌握的建立超链接的技能，试着设计并完善其中的超链接。的技能，试着设计并完善其中的超链接。友情提示：可以参照友情提示：可以参照“自主学习资料自主学习资料”进行自学。进行自学。 设计要求：建立的超链接要正确、合理。设计要求：建立的超链接要正确、合理。小结一一. . 链接就是跳转，有链接就是跳转，有“小手小手”处就有链接处就有链接二二. . 超链接的分类超链接的分类三三. 链接方法：链接方法：选定起点选定起点超链接超链接选择终点选择终点1 1同一页面内部的链接同一页面内部的链接（书签式

13、链接）（书签式链接） 2 2不同页面之间的链接不同页面之间的链接（链接到其他网页）（链接到其他网页） 3 3链接到链接到Web站点站点（链接到网站、电子邮件）（链接到网站、电子邮件） 4 4建立图像映射建立图像映射（图形热区超链接）（图形热区超链接） 课后思考与研究1、观察未访问过超链接连接源的颜色，访观察未访问过超链接连接源的颜色，访问过后的颜色，正在访问的颜色有何不同。问过后的颜色，正在访问的颜色有何不同。 2、网站内超链接有、网站内超链接有“一对一一对一”结构和结构和“一一对多对多”结构，如何灵活选择合适的链接结结构，如何灵活选择合适的链接结构。构。 这两种基本结构都只是理想方式，在实际

14、的网站设计中，总是将这两种结构混合起来使用。友情提示：可以参考友情提示：可以参考网络技术应用网络技术应用的的P94和和P96。3. 超链接的色彩超链接的色彩在网页中有三种不同状态的超链接：在网页中有三种不同状态的超链接：u未访问过的超链接未访问过的超链接u正在访问的超链接正在访问的超链接u已访问过的超链接已访问过的超链接l超链接颜色的修改超链接颜色的修改 在“网页属性网页属性”的“背景背景”选项卡中设置小结与作业课堂情况课堂情况 作业布置作业布置 本节内容本节内容比较丰富，比较丰富，相对简单而相对简单而实用，较容实用，较容易掌握。易掌握。练习建立练习建立一个简单一个简单的班级或的班级或个人站点。个人站点。 1.1.自主练自主练习题习题2.2.参考练参考练习题九套习题九套（选做）（选做）