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

网站实现-建立超链接,浏览镇江金山网,教学内容,1.超链接的概念,2.站点、网页的创建、保存,3.网页的布局、美化、充实,熟悉FrontPage,1.熟悉FrontPage,建立超链接（重点）,2.插入超链接的步骤,3.超链接的分类及插入方法,标题栏,菜单栏,标准工具栏,表格工具栏,格式化工具栏,视图栏,三个视图标签,图形工具栏,状态栏,页面编辑窗口,认识FrontPage窗口,2.站点的创建建立自己的主题网站，首先需要创建一个Web站点，用于保存和调试创建的网页。执行：“文件”“新建”“站点”,8个模板和向导,新建站点对话框：,制作新网页,保存按钮,打开按钮,新建按钮,设置好后点击“确定”按钮，系统会自动为用户建议一个新的站点（包含文件夹），这时屏幕上会自动列出“文件夹列表”，底下第一个文件夹是展开的，接着有两个子文件夹和一个文件。“_private”文件夹”：用户不想公开的文件保存在这个文件夹中。“_images”：保存网页中所使用的图片“index.htm”：index的中文意思是主页，后缀名是“html”或“htm”。,建立站点的注意点：a、站点中的所以文件及文件夹的命名最好不要出现中文b、建立完整的文件夹（如：images，html等名字的文件夹）c、网页的主页命名为index.htmd、所有的资料都要放在站点里面,保存网页,打开网站（网页）,1.先选定要打开的文件,2.再单击打开按钮,预览网页的方法,网页的基本内容,1.网页布局：利用表格定位网页表格是在网页设计中用得最多的元素，可以说几乎所有的网页都是使用表格来组织的。表格在网页中有定位和设置网页布局的作用，利用表格可将各块内容分类列出，使网页清晰美观、富有条理。表格中可以包含你喜欢的任何内容，包括图象、文本、多媒体文件，甚至有嵌套的表格。,利用表格定位网页,在用表格布局时，表格的边框粗细应设置为0.,？,注意：,在用表格布局时，表格的边框粗细应设置为0.网页中的表格除了可以用来定位和布局外，还可以当作普通表格来使用，但注意此时的表格边框粗细不能设置为0,2.网页美化-添加网页元素（1）编辑文字Frontpage提供了较为全面的文本处理功能，我们在网页中输入文本，然后通过各种字体、字号及字型的设置来美化版面。向网页中添加文本时，可直接输入，也可将现有文档复制到网页中。,（2）插入图片和动画在网页中可以插入多种格式的图片，但我们一般应选用那些压缩比高的格式的图片，例如GIF、JPG等格式的图片。,动画的格式有很多种，如GIF图片动画、FLASH动画、视频动画等。,1.链接结构网站的链接结构是指页面之间相互链接的拓扑结构。一般来说，网站的链接结构主要有两种：树状链接（一对一）、星状链接（一对多）,3.超链接超穿越时空,用超链接可以实现从一个网页到另一个目标的连接。超链接可分为文本超级链接和图片超链接两种表现形式，不管建立哪种超链接，方法都基本相同，关键是定义超链接的URL。,1.文字2.图形（图形热区）（类型）,链接的两个元素,建立超链接的一般步骤：,2、打开“创建超链接”对话框（插入超链接、右击超链接、常用工具栏上的按钮）,1、先选定链接源(文字、图片、图形热区),创建超链接对话框,1、请学生打开d盘上“dtgjzx”文件解压到d盘根目录，各自小组的实践任务在各小组文件夹里，合作学习完成本组的探究实践任务。2、其中书签式链接和图形热区超链接梅兰芳3、链接到网站的超链接，网址在“学生”文件夹里。,分组探究,超链接的分类,书签：就是网页中被标记的位置或被标记的选中文本，可以作为超链接的目的地。,难点突破,建立书签式超链接的步骤：1、在网页中某位置定义一个书签（插入菜单书签）2、建立一个连到该书签的超链接,图形热区超链接：就是在图片中的某个位置建立超链接，而这个位置就叫热区。,建立图形热区超链接的步骤：1、先在图片中的某个区域建立热区（图片工具栏）2、选择连到该热区的目标,进入实战,用FrontPage软件打开“课堂练习共八套”文件夹里的网页进行操作。利用本节课掌握的建立超链接的技能，试着设计并完善其中的超链接。,综合实践：,友情提示：可以参照“自主学习资料”进行自学。,设计要求：建立的超链接要正确、合理。,小结,一.链接就是跳转，有“小手”处就有链接,二.超链接的分类,三.链接方法：,选定起点,超链接,选择终点,1同一页面内部的链接（书签式链接）2不同页面之间的链接（链接到其他网页）3链接到Web站点（链接到网站、电子邮件）4建立图像映射（图形热区超链接）,课后思考与研究,1、观察未访问过超链接连接源的颜色，访问过后的颜色，正在访问的颜色有何不同。2、网站内超链接有“一对一”结构和“一对多”结构，如何灵活选择合适的链接结构。,这两种基本结构都只是理想方式，在实际的网站设计中，总是将这两种结构混合起来使用。,友情提示：可以参考网络技术应用的P94和P96。,3.超链接的色彩在网页中有三种不同状态的超链接：未访问过的超链接正在访问的超链接已访问过的超