任务一 用Dreamweaver制作简易网页

任务一用Dreamweaver制作简易网页

一、导入新课

同学们，请大家看大屏幕上，这是一个什么页面。大家说的非常对，都知道是一个网页，之前我们知道制作网页的工具有很多，你们还有印象吗？都有哪些呢？你来说一说，哦，他说有记事本、frontpage ，还有吗？你来说一说，哦，还有Dreamweaver和东方网页王。大家都说的都非常好！这个网页就是用Dreamweaver制作出来的网页，大家想不想学呢?这节课老师就带着大家一起来学习如何用Dreamweaver这个软件来制作一个简易的网页。

二、讲授新课

1、启动Dreamweaver软件

我们先来认识一下Dreamweaver网页制作工具，首先我们要启动这个软件，启动软件的方法大家还记得吗?对了，是单击开始——选择所有程序，再选择Macromedio下面的Macromedio Dreamweaver就启动了这个软件。大家都启动了吧。

2、认识Dreamweaver工作界面

接着展现在大家面前的就是Dreamweaver工作界面，这个界面的工作窗口有什么是你们熟悉的呢?你来说一说，哦他说有标题栏和菜单栏，还有呢？哦，对了，还有多功能面板、视图选项卡和编辑窗口。还不是特别清楚的同学参照课本第8页去看看。

3、如何管理站点

那我们已经认识了Dreamweaver工作界面，接着老师就带着大家一起来看看如何管理站点，想一想什么是Dreamweaver站点呢，大家知道吗？对了，Dreamweaver站点是指WEB站点文档的本地或远程存储位置，其中还包括三个部分设置：一是本地信息（本地根文件夹）;二是远程信息，一般位于运行WEB服务器的计算机上；三是测试服务器，用于处理动态页面。非常好，真不错，你们都找到了吗。

那接下来我们一起来看看如何管理站点，大家一起来跟着老师跟着书上的步骤来完成。

第一步是启动Dreamweaver CS4，大家都启动了这个软件了吗。

2好，接着点击菜单栏上的站点，选择管理站点命令，这时弹出“管理站点”对话框。大家都做好了吗。然后单击管理站点对话框的“新建”，出现“站点和FTP与RDS服务器，单击其中的站点命令，这时弹出如图4-2所示的对话框，在文本框里输入站点文件名。那大家还记得我们以前说过给站点怎么命名较好呢？好，你来说。（停顿两秒）他说的好不好啊！非常的棒，他说我们最好使用英文单词或汉语拼音命名，使用与网页内容有些联系，能见名知义，接着我们单击下一步按钮。

第三步是根据网站类型选择“是”或者“否”这里我们选择什么呢？对了，我们应该选择“否”，为什么呢？你来说一说，哦，他说本节课我们将制作的是静态的网页，所以就选择否。你观察的非常仔细，请坐下。然后我们再单击下一步。你们都选好了吗。

接着第四步是选择系统推荐的选项，在文本框里可以填入所建网站的保存路径，如图4-3所示，这里有什么要求呢。哦，这里我们设置为前期所做的“dilitd”，用Dreamweaver制作相关网页页面，丰富该网站的内容，然后单击下一步，大家都做好了吧。接下来出现如图4-4所示，这时我们应该怎么办呢?如果想上传到某服务器，就从下拉菜单中选择上传方法，如果不想上传，就选择无。这个我们要根据个人的实际情况去选择，选择后单击下一步，这时又出现了如图”4-6“管理站点的对话框，单击完成按钮，这样就可以使用Dreamweaver继续制作dilitd网站了。大家都完成了吗。

4、制作简易网页1、新建网页输入标题输入一段文字

好，大家看老师制作的这个网页，都有什么元素呢？你来说一说，哦，他说有背景图、动画还有文字，你说的非常的对，那现在呢，老师给大家布置一个任务，你们可以4人为一小组来完成这个任务，这个任务是新建页面，并输入标题“人文地理状况”以及正文，标题字号为一号，字体默认，居中对齐，那大家现在就开始动手做吧。巡视动作。

老师刚刚呢已经观察了各小组的表现，基本上大家都做的非常的好，那现在呢我们一起来看一下如何来完成这个任务。每一个小组都要观察自己本组内哪些地方做的不够好，我们先来看第一步，首先启动Dreamweaver软件，确保已经用站点管理建立好了一个网站。第一步大家基本上都完成了，第二步呢，新建页面，在弹出的界面中选择“新建——HTML”然后在视图选项卡里选择“设计”视图，哪个组做对了呢。告诉老师。哦，这个任务大家也都完成了。再来看第三步，在编辑器窗口中输入标题，使用属性面板或右键快捷菜单对标准进行格式设置，标题字号为一号，字体默认，居中对齐，接下来完成正文的输入以及格式设置。大家都做对了吗？你来说一说，哦，你们组做的不对，没有居中对齐，一定要注意了，我们的任务是要居中对齐的。

5、设置网页背景

好，到此为止我们大家都学会了新建页入、输入并设置了标题与正文，我们再来比较一下，这个网页跟老师展示出的网页有什么差别呢？还有什么不一样的呢？这个网页没有背景和动画，好，那紧接着老师就带着大家一起来学习如何设置页面背景和插入Flash动画吧。这个任务老师希望大家能够派一个代表来给老师念一下操作，老师来进行实际操作，好不好。谁来给老师念一下，好，你来，他说，首先用鼠标右键单击网页，在弹出的快捷菜单中执行“页面属性”命令，弹出“页面属性对话框选择“外观（HTML）分类，设置背景图像为“rwdl-bj.jpg。当背景图像不在站点文件夹内时，会出现什么，哦，会出

现一个提示框，这时我们选择确定，按提示将该图片保存到站点文件夹的“images”文件夹中，最后单击确定。好现在效果出来了，对比一下是不是一样的呢，对，是一样的。所以呢，设置网页背景我们完成了。

6、插入FLASH动画

接下来我们还要插入FLASH动画，我该怎么做了，你来给老师念一下操作。哦，应该先在第二段正文结束处单击鼠标，回车换一行，这时光标位于第二、三段中间，这时我们在哪找插入呢，哦，在菜单栏中找到插入，这时会弹出一个下拉菜单，选择媒体，再选择什么呢？哦，选择SWF，然后选择FLASH 动画文件并按提示保存至站点相应文件夹内，可通过属性面板对动画进行相关设置。

那现在再来对比一下这两个网页还有什么不一样吗？哦，你真细心，观察出每段文字段落首行没有空两格，那么老师现在给大家布置一个任务，我们每一个人都要自己来完成这个任务，任务是对每段文字段落首行空两格。（停顿，下去走一下），刚刚老师看了大家的操作，大部分同学都把它调整过来了，那现在老师要找一位同学来告诉老师，你是怎么做出来的呢。好，你来说一说，哦，他说首先要切换到全角中文输入法状态，敲两次空格键就可以了，大家说他说的对不对呢？我们来验证一下，非常正确，这样就可以把段落首行空两格了。那没有做出来的同学也不要紧，大家再尝试着按照这个步骤来动手做一做。最后我们还要做什么呀。点击文件，执行文件——保存，命名为rwdlmain.html。我们最好在建立网页的时候就先保存好。

三、巩固练习

到此为此，一个简单的网页就完成了。那现在呢老师想检验一下大家有没有把制作简易网页的各个操作步骤掌握好，现在就自己动手做一做书本53至54页的这个“做中学”，一起来完成这个任务。

四、课堂小结

现在呢，我们一起来回顾一下本节课我们有什么样的收获呢？大家可以分小组一起来讨论一下，呆会我会派代表来汇报。《巡视》好，这组先来说，我们进一步地认识了制作网页的另一个软件Dreamweaver以及它的工作界面，那你们组来说，我们知道了新建网页，知道网页中的元素有文字、图片和动画。哦，还知道了设置网页背景以及如何插入FLASH动画。刚刚讲的就是我们本节课学习的内容。

五、布置作业

在这节课下课之前，老师还想给大家布置一个任务，任务的内容：要求每个学生去找一找front page和Dreamweaver这两个软件的操作有什么不同，有兴趣的同学可以制作一个简单的网页与爸爸妈妈分享。