绝对路径和相对路径知识点教法之我见
刘超 刘翎
江苏省扬州中学 225009
网页设计是高中信息技术的必修知识单元,而网页设计中最基础且不失重要性的知识点即为绝对路径和相对路径的灵活使用。以往的教学活动中,我们大多把重点放在网站的整体结构设计上,而忽视类似绝对路径和相对路径等这些既是细节又是关节的知识点,结果学生完成作品的质量也大打折扣,问题多多。
下面笔者将以绝对路径和相对路径知识点为例,交流一下教学心得。
一般而言,我们可按以下四步开展教学:
一、引入
由于大部分学生是初次涉及网页制作,对绝对路径和相对路径的概念及应用缺乏理论基础,所以不建议开门见山式的引入话题,而应从与学生生活较贴切的“活”例子中寻求突破。这里笔者提供一例仅供参考。

注:图3中的 ?应为 ../微机房2/B
而如果使用绝对路径,可以表示为扬州中学/微机房/B,但是这只限于当前时刻,课后如果再用该路径寻找B,可能已经找不到B了。
二、归纳
在上述实例的铺垫下,我们即可趁热打铁,结合具体的理论知识点进行知识归纳。如表1所示。
表1相对路径知识点归纳
|
某基准文件 |
相对路径 |
|
上级中的文件 |
.. / 文件名 |
|
上级文件夹中的文件 |
.. / 文件夹名 / 文件名 |
|
同级文件 |
. / 文件名 或 文件名 |
|
同级文件夹中的文件 |
. / 文件夹名/文件名 或 文件夹名/文件名 |
三、巩固
巩固阶段,我们不妨借用其他学科中的“例题+习题”模式开展教学。仍以相对路径和绝对路径知识点为例,我们设计的例题和习题样式如下:
例题样式:
test.txt这个文件位于本机C盘的work文件夹的try子文件夹中,其路径表示为:C:\work\try\test.txt,那么以test.txt 为基准,相对路径和绝对路径对照表如表2所示。
表2 相对路径和绝对路径对照表
|
相对路径 |
绝对路径 |
|
fly.gif |
C:\work\try\fly.gif 或 File:/// C:/work/try/fly.gif |
|
image/fly.gif |
C:\work\try\image\fly.gif 或 File:/// C:/work/try/image/fly.gif |
|
../fly.gif |
C:\work\fly.gif 或 File:/// C:/work/fly.gif |
|
../image/fly.gif |
C:\work\image\fly.gif 或 File:/// C:/work/image/fly.gif |
习题样式:
以下为4个文件的本机绝对路径:
D:\ll\myroom\index.htm
D:\ll\myroom\poem.htm
D:\ll\myroom\image\email1.gif
D:\ll\myroom\myphoto\phoindex.htm
那么,
从文件index.htm链接到poem.htm,poem.htm的相对路径是:
从文件index.htm链接到email1.gif,email1.gif的相对路径是:
从phoindex.htm链接到index.htm,index.htm的相对路径是:
从phoindex.htm链接到email1.gif,email1.gif的相对路径是:
四、实践
实践的目的是为了让学生自行检验对知识点的掌握程度,理论联系实际,最终达到灵活运用所学知识。
本知识点笔者设计一名为“达芬奇密码”的小任务。具体实施策略为:给学生一压缩包,解压缩后存有两文件夹,名称分别为“author”和“works”,其中“author”文件夹内存放一名为index.htm的网页和一名为“达芬奇.jpg”的图片文件,“works”文件夹内存放一“蒙娜丽莎.jpg”的图片。当点击“index.htm”时,页面显示为“达芬奇“。
任务:要求利用记事本修改 index.htm 的 HTML代码,使得点击 index.htm 时显示蒙娜丽莎。
当学生顺利完成上述任务后,让学生尝试将“蒙娜丽莎.jpg”图片移动到“author”文件夹内且与“index.htm”在同一目标下或将“蒙娜丽莎.jpg”图片移动到“author”文件夹中新建的“works”文件夹内,代码中的路径又该如何修改。
教学实践证明,通过以上四步流程的讲解,绝大部分学生对绝对路径和相对路径知识点,尤其是相对路径,掌握的已较为深刻,对后续的网页制作打下良好的基础。希望该教学法能助诸位在其他类似知识点教学活动中发挥一定的作用。