第16课 综合实践——制作班级主页

实践目标

1、进一步熟悉FrontPage设计网站的环境

2、学会运用图片，超链接，声音和视频建立班级的网站 4、学会运用表单建立和发布班级的网站

5、养成独立运用信息技术的能力和与他人协作的能力 实践活动

1．自由分组，确定班级网页的创意；

2．小组成员内部分工，确定预计完成的时间；

3．制作班级的主页，感受制作过程，请老师指导，找班级其它同学提建议； 4．对班级网页进行发布及测试；

5．通过应用班级主页，分析总结班级主页设计的过程，撰写调查报告。 知识与技能

我们已经学习了很多FrontPage的知识，这节课我们通过综合实践活动，大家就运用这些知识制作一个班级的网站吧！并在网页上添加表单，并发布班级的网站： 一、建立班级网页的构思

1、用FrontPage建立一个“个人网站”类型的网站，保存到网站目录中

2、选择一个主题修饰网站

3、创意网站的结构，班级网站分成六页： 网页文件名 index.htm aboutme.htm favorite.htm feedback.htm interest.htm photo.htm 网页标题 首页 班级介绍 班级活动 留言反馈 班级荣誉 班级剪影 网页内容 主页，各分页内容的精华 班级新闻，班级的简介 通知，活动总结 留言本，反馈信息 班级奖状，个人荣誉证书 照片 FrontPage工具 组件，超链接 表格，文字修饰 表格，文字，超链接 表单 插入图片，背景音乐 表格，插入图片 4、将六个网页进行整理，加入相应内容 5、加入“Web 组件”和网页背景音乐 6、制作表单 7、发布班级网站

8、同学们分头收集班级网页所需的素材，丰富网页内容 二、制作网站

（1）用“个人网站”模板建立班级网站，存放在指定的网页目录下

（2）单击“格式”菜单，选择“主题…”，给班级网站中所有的网页设定主题

（3）将各网页设置好“导航栏”及“网页横幅属性”

（4）在各网页内添加相应的信息及“Web 组件”

（5）在“班级荣誉”的网页添加网页背景音乐

（6）在网页中添加表格，并添加相应的图片

三、打开班级的网页

（1）单击“文件”菜单，选择“打开网站…”，打开班级的网站

（2）打开班级的网站后，继续设计丰富班级网站的内容

四、继续设计班级的网页

（1）打开“留言反馈”网页，根据需要添加相应的表单

（2）打开“首页”网页，将各页的精华“复制”到“首页”，完成与各页之间的“超链接”

（3）预览“班级网页”，测试网页

（4）单击“文件”菜单下的“发布网站…”，将班级的网站发布

实践评价

1、在班级的网页上，还想放置哪些内容？

2、评价在网页上添加字幕，交互按钮等“Web 组件”的过程？ 3、对网页上填加的图片进行处理，对文字进行修饰？

4、请老师给你们设计的班级网页提建议，邀请老师参加你们的制作小组？并请老师对你们制作班级网页过程评价？

5、开个班级网页制作小组成员的总结会，将自己想说的话写成提纲，会后，写写自己的体会？

小资料

FrontPage与Dreamweaver网页制作工具的结合 1、结构

网页结构的架构是网页设计是否成功的关键之一。Dreamweaver在这方面做的要比FrontPage好的多。因此，在网页的整体设计阶段，大家可以使用Dreamweaver。 2、源代码

要想将一个网页设计得更好就要学会编辑网页的源代码，Dreamweaver源代码界面非常模糊。如使用FrontPage就可以避免这种现象。在FrontPage的源文件项中，当我们看网页源代码的时候，网页源代码是错落有置，而且各种不同的程序例如Javascript、Java、CSS等都呈现出各种不同的颜色。这样可以方便我们更改网页源代码。但是FrontPage在这个方面也有其缺点，比如在我们的网页中嵌入的ASP代码。如果在FrontPage编辑格式下看到是一片空白，让我们常常不知道要编辑代码的位置。在Dreamweaver编辑状态下我们就能够看到各种代码标记，一般显示为黄色的小标记。当我们选中它的时候在源文件状态下就可以方便地更改我们嵌入各种代码了。 3、修饰

Dreamweaver在网页修饰方面不如FrontPage做的好。我们在网页制作中经常会使用插入搜索框、下拉框等。使用FrontPage修饰边框要比Dreamweaver做出来的漂亮得多，也很有个性。每一个网页设计师都希望自己设计网页越小越好，如果他使用FrontPage，那么冗余代码就多，反之，Dreamweaver冗余代码相对较少。在网页的修饰的收尾阶段，建议大家使用Dreamweaver。