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