您好,欢迎来到刀刀网。
搜索
您的当前位置:首页《网页设计与制作》教案-第4讲 文字的操作二

《网页设计与制作》教案-第4讲 文字的操作二

来源:刀刀网


第4讲 文字的操作二

1.1教学目标:

 知识目标

1. 了解相对地址和绝对地址的用法。 2. 理解HTML标记在网页中的作用。 3. 掌握与文本相关联的各种链接状态。 4. 掌握外部文件插入网页的多种方法。  技能目标

1. 能够运用锚点链接为页面中的文本快速建立关联。 2. 能够把外部不同格式文件插入到网页。  品质目标

培养学生认真细致、勇于创新的精神

1.2教学重点:

1. 掌握与文本相关联的各种链接状态。 2. 掌握外部文件插入网页的多种方法。

1.3 教学难点

理解相对地址和绝对地址的区别,掌握与文本相关联的各种链接状态。

1.4教学方法:讲练结合,任务驱动、分子任务操练 1.5课时安排:2课时 1.6教学对象分析:

这个班学生具有基本专业技能,不仅仅是要教会他们方法,最重要的是教会他们的规范的动手能力与各种事件多方法的灵活处理能力,在保证全班同学教学进度一致的情况上,培养学生较好的专业基础与创新创作意识。

1.7教学过程:

一、超链接与文本超链接

每个网站实际上都是由众多的网页组成,网页之间通常都是通过超链接方式相互建立关联的。 在Dreamweaver 中,超链接的范围是很广的,利用它不仅可以链接到其他页面,还可以链接到其他图像文件、多媒体文件及下载程序等。

在Dreamweaver 中,可以将文档中的任何文字及任意位置的图像设置为超链接。

文本超链接是网页中最常见的超链接,创建文本超链接的方法如下:  在编辑窗口选中要建立链接的文本。

 单击属性检查器上“ 链接” 文本框右侧的文件浏览按钮,弹出选择文件对话框。  在该对话框中选择链接要指向的文件,或在URL 后的文本框内直接键入要链接的网

址或文件,单击确定。

 也可以在属性检查器上“链接”文本框内直接键入要链接的网址或文件。

 在编辑区的空白处单击,选中的文字已被建立链接,链接文本变成蓝色,并出现下

划线,在属性检查器上“目标”文本框中可以设置目标位置。

二、文本超链接设置

每个网站实际上都是由众多的网页组成,网页之间通常都是通过超链接方式相互建立关联的。在Dreamweaver中,超链接的范围是很广的,利用它不仅可以链接到其他页面,还可以链接到其他图像文件、多媒体文件及下载程序等。

在Dreamweaver中,可以将文档中的任何文字及任意位置的图像设置为超链接。

1

 了解链接路径

要正确创建链接,必须了解链接与被链接文档之间的路径。每个网页都有一个唯一的地址,称为统一资源定位符(URL,Uniform Resource Locator)。然而,当我们创建站点内部链接时,一般不会指定被链接文档的完整的URL,而是指定一个相对于当前文档或站点根文件夹的相对路径。一般来说,链接的路径可以使用三种表示方式:即绝对路径、相对路径和根目录相对路径。

绝对路径:http://www.macromedia.com/support/dreamweaver/contents.html。 相对路径: dreamweaver/contert.html。

根目录相对路径:根目录相对路径总是开始于当前站点的根目录。  设置文字的超链接

文本超链接是网页中最常见的超链接,它能给浏览者很直观的主题信息,对它所包含的信息一目了然。

图2-52建立在文本基础上的超链接

使用Dreamweaver创建超链接既简单又方便,只要选中要设置成超链接的文字或图像,然后在属性检查器“链接”文本框中添加相应的URL即可。

创建文本超链接的方法如下:

1. 在编辑窗口选中要建立链接的文本。如图2-53所示。

图2-53选择要建立链接的文本

2. 单击属性检查器上“链接”文本框右侧的文件浏览按钮,弹出选择文件对话框,如图2-54所示。

2

图2-54选择链接文件

3. 在该对话框中选择链接要指向的文件,或在URL后的文本框内直接键入要链接的网址或文件,单击确定。也可以在属性检查器上“链接”文本框内直接键入要链接的网址或文件。

4. 在编辑区的空白处单击,选中的文字已被建立链接,链接文本变成蓝色,并出现下划线,在属性检查器上“目标”文本框中可以设置目标位置。如图2-55所示。

图2-55文本超链接效果

 创建电子邮件链接

随着电子邮件通信的普及,电子邮件超链接已经被越来越多的网页所采用。在建有电子邮件超链接的网页里,浏览者只需单击该链接就能通过电子邮件进行交流,极大地方便了浏览者提供反馈信息。

创建电子邮件的步骤如下:

1. 首先在页面相应位置写上要添加电子邮件信箱链接的文本,如“请与我联系”,如图所示2-58。

图2-58输入要建立链接的文本

2. 选中该文本,选择“插入/电子邮件链接”命令或在“插入”栏的“常用”选项卡中

3

单击“电子邮件链接”按钮。弹出如图2-59所示对话框。在对话框中输入要添加电子邮

件信箱链接的E-Mail地址即可。

图2-59输入E-Mail地址

3. 单击“确定”,在编辑区空白处单击,蓝色的字为E-Mail超链接,并出现下划线,可以看到属性检查器上链接后面的文本框内出现了“mailto:.abc123@163.com”,如图2-60所示。

图2-60 E-Mail超链接的属性

E-Mail链接的格式与其他链接不同,在前面要添加“mailto:”,这是因为在设置E-Mail超链接时也要像网页一样声明链接的协议。

4. 按F12键预览网页,然后单击“请与我们联系”超链接文本,即可调出Outlook Express发送邮件窗口。如图2-61所示。

图2-61单击E-Mail超链接弹出的Outlook Express发送邮件窗口

 创建锚点链接

如果一个页面的内容较多,篇幅很长的话,为了使用户浏览起来方便,可以在页面的某个分项内容的标题上设置锚点,然后在页面上设置锚点的链接,从而使用户通过锚点链接快速直接地跳转到感兴趣的内容。

1. 创建锚点,在“常用”选项组,单击命名锚点按钮

记对话框。

。弹出如图2-62所示命名锚

图2-62命名锚记名称

2. 设置带有锚点的超链接,效果如下:

4

图2-63文档窗口中的锚点标记

在创建锚记的超链接时,必须在包含锚记的网页文件名称后加“#”,然后在输入锚记的名称。所以在制作这样的超链接时首先要了解链接目标文件中使用锚记的情况。

1.8归纳总结:

本讲主要是让同学们了解相对地址和绝对地址的用法。理解HTML标记在网页中的作用。 掌握与文本相关联的各种链接状态。掌握外部文件插入网页的多种方法。

1.9课后作业题:

1. 相对地址和绝对地址的区别? 2. HTML标记在网页中的作用? 3. 与文本相关联的各种链接状态有?

5

因篇幅问题不能全部显示,请点此查看更多更全内容

Copyright © 2019- gamedaodao.com 版权所有 湘ICP备2022005869号-6

违法及侵权请联系:TEL:199 18 7713 E-MAIL:2724546146@qq.com

本站由北京市万商天勤律师事务所王兴未律师提供法律服务