Dreamweaver网页制作教案

认识Dreamweaver

一、学习目的

了解Dreamweaver，学会利用Dreamweaver制作网页。

二、学习内容

Dreamweaver的基本知识。

【学习步骤】

1、 Dreamweaver的功能

Dreamweaver可以像普通的字处理软件一样编辑Internet上以HTML格式保存的所有文件，

也就是网页；它支持动态HTML，可以在网页中产生动画；还可以在网页中插入各种插件，以产生特殊效果。

Dreamweaver可用于管理站点，它像文件夹一样创建和打开站点，用不同的方式查看站点中各个网页之间的关系，调整站点的组织结构，使整个站点条理清晰。

2、 Dreamweaver的窗口

（1）标题栏

（2）菜单栏

（3）工具栏

（4）视图栏

（5）文件夹列表

（6）工作区

3.网页工作区的三个视图方式选项

它们分别是“普通”、“HTML”“预览”，它们之间的相互切换十分容易实现的。

普通视图方式是Dreamweaver对网页所见即所得编辑方式的最佳体现，在此方式下，可以

像在Word中那样直接进行各种编辑操作，实现网页编辑的所有功能。

HTML视图实际上是一个文本编辑器，其中给出了普通视图方式下所件网页的HTML代码。在这里可以用菜单命令进行复制、粘贴、删除、查找等操作。对于HTML语言中的不同成分均用不同的颜色显示，这样比较容易区分各种语法成分。

为了在制作网页过程中能够随时查看网页的实际效果，Dreamweaver提供了预览视图方式。

4.安装dreameaver的方法

安装及注册

5.关闭dreameaver

6.保存网页的方法

三、小结

Dreamweaver的基本知识

建立一个简单的站点

一、学习目的

了解Dreamweaver，学会利用Dreamweaver制作网页。

二、学习内容

Dreamweaver的基本知识；建立一个简单的站点；进行简单的网页编辑。【学习步骤】

1、创建空白站点。

执行菜单命令“文件”—“新建”—“站点”，就会出现8中站点向导。出于简单，可

选择“空站点”按钮，并在“指定新站点的位置”框中填入站点的位置。在指定新站点的位置后，单击“确定”即建成一个空站点。

2、建立一个简单的文字网页

建立了一个站点之后，就应该在站点中加入网页了。

①创建空白网页

执行菜单命令“文件”—“新建”—“网页”，就会出现一对话框，选择“普通网页”

模板并单击“确定”即建立了一个新的空白页面。

②网页工作区的三个视图方式选项

它们分别是“普通”、“HTML”“预览”，它们之间的相互切换十分容易实现的。

普通视图方式是Dreamweaver对网页所见即所得编辑方式的最佳体现，在此方式下，可以像在Word中那样直接进行各种编辑操作，实现网页编辑的所有功能。

HTML视图实际上是一个文本编辑器，其中给出了普通视图方式下所件网页的HTML代码。在这里可以用菜单命令进行复制、粘贴、删除、查找等操作。对于HTML语言中的不同成分均用不同的颜色显示，这样比较容易区分各种语法成分。

为了在制作网页过程中能够随时查看网页的实际效果，Dreamweaver提供了预览视图方式。

③输入文本

网页中最基本的也是最重要的部分就是网页中由文本构成的内容，因此制作网页首先要从文本输入开始。

3、设置网页中文字的字体、颜色、大小和效果

①在文本开始处按下鼠标左键，不放手拖到结束处，选择要设置的文本块。

②执行菜单命令“格式—字体”。

③在“字体”对话框中，单击“字体”选项卡。

④在字体选择窗口中，选定所需要的字体，再确定文本的字型、大小、颜

色、效果等。

⑤按“确定”即可。

4、网页编辑

（1）将图片插入网页

（2）将剪贴画插入网页

（3）加入GIF动画

（4）保存嵌入式图形文件

（5）使用图片工具栏

（6）设置图片属性

（7）设置网页背景

（8）设置超链接

（9）应用框架

（10）表单的使用

5、小结

简单站点的建立过程

设计限时自动关闭的网页

一、学习目的

了解Dreamweaver，学会利用Dreamweaver制作网页。

二、学习内容

Dreamweaver的基本知识；用Dreamweaver设计限时自动关闭的网页。【学习步骤】

设计页面时，经常会从一个页面打开一个子窗口以供浏览者查看。通常，这种子窗口中的内容一经浏览者看过，对于浏览者而言就不再需要，而他们常常会忘记关掉这些小窗口，致使许多的浏览器窗口打开着，耗用大量的资源。因此我们可以将子窗口设计成经过一段时间后可以自动关闭的形式。

1. 在本地站点中生成一个Smlple文件夹。

2. 在Smlple文件夹中，生成名为Index.html以及名为firstpage.html的文件。

3. 双击Index.html，打开该文档，进入到文档的设计视图窗口中。

4. 单击菜单View/Head Content，显示文档的头部区域。

5. 单击设计视图窗口中的文档头部窗格。选择菜单Insert/Invisible Tags/Script，打开Inset Script对话框。如图所示，在Language下拉列表框中选择javascript 选项，并在Coctento文本框中输入“setTimeout("self.close()"，15000)”。单击OK 按钮，完成在文档头部插入15秒后自动关闭子窗口的脚本。在代码中，15000表示15000毫秒，也即15秒，也可以根据需要将之修改为自己需要的时间毫秒数。

设置时间