第十四课:制作多个子页面(小拓展页面) 演示

童老师 8年前 1636 次查看 0 次讨论


学习目标
1. 学习制作多个子页面的方法;2. 学习在规则子页面时,做好导航链接设计。

本节课,将要学习制作最后一个页面:xiaotuozhan.html (小拓展)。 我们设想的情况是这样的,小拓展知识有3个页面,供学有余力的同学在学完新课知识之后,进行拓展阅读。这三个子页面的文件名称规划如下:

xiaotuozhan.html xiaotuozhan_2.html xiaotuozhan_3.html

一、在站点目录中(gushi/),将首页文件复制1份,将复制后的文件重命名为: xiaotuozhan.html


二、打开Dreamweaver软件,并在右下角的站点管理中,点击刷新小图标,在出现xiaotuozhan.html文件之后,双击此文件进入编辑模式,然后删除内容框中的文字和图片,结果如下图:


三、在内容框架单元格中,插入表格,并设置表格的行数:1,列数:2,宽度:100%,其他设置为:0。


四、点击刚插入的表格的左侧单元格,在下方属性面板中,设置宽度值为:200。


五、在左侧单元格中输入三行文字:小拓展知识1 小拓展知识2 小拓展知识3 。(使用回车换行)

选中“小拓展知识1”,将链接地址设置为:xiaotuozhan.html

选中“小拓展知识2“,将链接地址设置为:xiaotuozhan_2.html

选中“小拓展知识3“,将链接地址设置为:xiaotuozhan_3.html


六、在右侧单元格中,输入小拓展知识1的文字或图片,并将文字调整到合适的大小。

(完成后,可按F12预览网页效果。)


七、在站点目录下(gushi/ 复制 xiaotuozhan.html 文件,并将复制后的文件命名为: xiaotuozhan_2.html


八、使用Dreamweaver软件打开 xiaotuozhan_2.html 文件,使用文字或图片材料替换掉右侧的文字。完成后保存并预览效果。


九、使用同样的方法,制作 xiaotuozhan_3.html 页面。完成后预览效果,参考下图:


至此,一个完整的HTML网页课件,就制作完成了。

可以将这个HTML课件放到web服务器上,供互联网上的用户访问,也可以在放在内网的服务器上,供网络教室教学时使用。

参考课件访问地址:http://ck.nljscx.com/kejian/gushi/(与实际制作略有不同)

(完)


1

籍山中心小学及城西校区同学使用博文账号登录!