《 网页设计与制作 》 教学课件

1. 《网页设计与制作》教学课件

2. 项目八：使用框架布局制作网页 任务二： 使用浮动框架制作网页

3. （一）教学目标 教学目标 一、掌握浮动框架的制作方法

4. （二）相关知识 1.浮动框架的概念 2.浮动框架的创建及属性设置

5. （三）学习重点 1.在了解浮动框架的概念、及其属性设置 2.在网页设计中能熟练地使用浮动框架进行网页布局

6. （四）新课教学 1.新建站点，将project08文件夹下task02文件夹中各项素材文件夹复制到本地磁盘下站点文件夹中。素材站已经提供的网页包括：gqxx.html、gqxx-1-gy.html、gqxx-2-qg.html。 2.打开站点根目录中的网页gqxx,html，在NR-frame块站通过【插入】|【布局】|【IERAME】按钮插入一个浮动框架。 3.在代码编辑视图中给浮动框架设置属性：宽度为“635像素”，高度为“280像素”，名称为“NRframe”。. 4.在网页gqxx.html中，选中文字“供应信息”，在底部【属性】面板上，设置链接的目标为“NRframe”，链接设置为“gqxx-1-gy.html”。

7. （四）新课教学 5.同样在网页gqxx.html中，选中文字“求购信息”，在底部【属性】面板中，设置其链接的目标为“NRframe”，链接设置为“gqxx-2-qg.html”。 6.在DreamweaverCS3中打开网页index.html，选中文字“供应信息”，在底部【属性】面板中，设置其链接的目标为“mainFrame”，链接设置为“gqxx.html”。 7.保存并浏览网页index.html，单击文字“供应信息”，即可在右侧mainFtame框架中显示供求信息页面。 8.在打开的网页中单击“供应信息”和“求购信息”，即可在下方的浮动框架中显示相应的信息页面。

8. （四）新课教学 效果图如下：

9. （五）课后小结 通过这个项目的学习，学生基本上已经可以掌握框架布局的基本内容，网页布局不拘一格，学生也要在理论知识的基础上学会创新设计。