Dreamweaver网页制作教案.doc
《Dreamweaver网页制作教案.doc》由会员分享，可在线阅读，更多相关《Dreamweaver网页制作教案.doc（42页珍藏版）》请在冰豆网上搜索。
认识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/HeadContent，显示文档的头部区域。
5.单击设计视图窗口中的文档头部窗格。
选择菜单Insert/InvisibleTags/Script，打开InsetScript对话框。
如图所示，在Language下拉列表框中选择javascript选项，并在Coctento文本框中输入“setTimeout（"self.close（）"，15000）”。
单击OK按钮，完成在文档头部插入15秒后自动关闭子窗口的脚本。
在代码中，15000表示15000毫秒，也即15秒，也可以根据需要将之修改为自己需要的时间毫秒数。
设置时间
6.在文档窗口中输入“关闭”字样，在属性面板上的Link文本框中输入“###”，将其设置为一个空链接。
7.在状态栏左端的快速标记编辑器上，单击标记按钮。
选中“关闭”链接，然后按下Ctrl+T组合键，打开快速标记编辑器，进入到快速标记编辑器的编辑标记模式。
然后在“>”前输入“onclick="selfclose（）"”。
如图所示，设置完毕，单击OK按钮，确认操作。
这样在Index.html被作为子窗口打开后，单击该链接就可以立刻关闭该子窗口。
8.保存Index.html文件，并退出index.html的Dremweaver窗口。
9.现在开始设计fristpage.html页面。
在本地站点的Smlple文件夹中，双击fristpage.html，打开该文档，进入到文档的设计视图窗口中。
10.在文档中输入“单击这里打开会自动关闭的子窗口”字样。
然后在属性面板上的Link文本框中输入“###”，将之设置为空链接。
11.可以通过为该链接应用OpenBrowserWindow行为来设置单击链接时打开Index.html窗口，不过更方便的方法是利用快速标识编辑器。
方法是首先将插入点放置到链接中，然后在状态栏左端的标识选择器上，单击标识按钮，选中整个链接。
然后按下Ctrl+T组合键，打开快速标记编辑器，进入到快速标记编辑器的编辑标识模式。
再在“>”前输入“onclick="window.open（'index.html',null','width=200px，height=200px'）"”（如图所示）。
设置完毕，按下回车键，确认操作。
设置单击链接时打开
12.上述操作就完成了本例的设置。
可以单击菜单用File/save，保存所做的工作。
然后按下F12键，在浏览器中预览页面效果。
三、小结
用Dreamweaver设计限时自动关闭的网页
用Dreamweaver做会移动的文字
一、学习目的
了解Dreamweaver，学会利用Dreamweaver制作网页。
二、学习内容
Dreamweaver的基本知识；用Dreamweaver做会移动的文字。
【学习步骤】
一、基本语法
文字移动属性的设置：
方向#=left,right啦啦啦，我从右向左移！
啦啦啦，我从左向右移！
方式#=scroll,slide,alternate啦啦啦，我一圈一圈绕着走！
啦啦啦，我只走一次就歇了！
啦啦啦，我来回走耶！
循环#=次数；若未指定则循环不止（infinite）啦啦啦，我只走3趟哟！
啦啦啦，我只走3趟哟！
啦啦啦，我只走3趟哟！
速度啦啦啦，我走得好快哟！
<;/marquee>
对齐方式（Align）#=top,middle,bottom
啦啦啦，我会移动耶！
对齐上沿、中间、下沿。
二、小结用Dreamweaver做会移动的文字
用Dreamweaver创建导航条
一、学习目的
了解Dreamweaver，学会利用Dreamweaver制作网页。
二、学习内容
Dreamweaver的基本知识；用Dreamweaver创建导航条。
【学习步骤】
一个网站的不同页面使用了同一导航条。
通过统一导航条的方法，我们可以实现网站风格的统一，同时也方便了浏览者在不同页面间的跳转。
用Dreamweaver可作出各种比较复杂的导航条。
网页上的导航条可由一个或几个部分组成，每个部分均由各种图像构成，可以链接到不同的网页页面。
在Dreamweaver中每部分中最多可设四个状态下的图像。
一开始是一个初始图像，当鼠标移动到导航条部位上时则显示另一个图像，还可以设置当鼠标点击后的初始图像，以及鼠标点击后当鼠标再次移动到这个部位上的图像。
一般地，每部位只设一到两种状态的图像。
因为图像太多了，会影响网页页面的访问、浏览的速度。
导航条制作方法：
移动光标到需要导航条的地方，单击主菜单栏的“Insert\NavigationBar”子命令，或直接单击Objects面板上的图标，弹出“InsertNavigationBar”对话框，如下图，此时我们可以进行各种设置来实现上述功能：
在“ElementName”项后的文本框填入这个部位的命名，也可以不填，这时Dreamweaver3将自动给它命名。
在Dreamweaver中每部分中最多可设四个状态下的图像：
“UpImage”项是该部位的初始图像，在其后文本框填入已准备好的图像的地址，或点击右边Browse按钮来选择。
每个部位可只设置UpImage项，其下的“OverImage”、“DownImage”和“OverWhileDownImage”三项可以不设置。
其中，“OverImage”项是鼠标移动到这个部位上时显示的图像（本例中选择）；“DownImage”项是鼠标点击该部位后显示的初始图像；“OverWhileDownImage”项是鼠标点击后当鼠标再次移动到这个部位上时显示的图像。
注意：
ElementName项和UpImage项是必需的，所有的调用图像都会在系统的提示下保存在Dreamweaver3文件夹中，以便调用。
三、小结
用Dreamweaver创建导航条
用Dreamweaver创建导航条
一、学习目的
了解Dreamweaver，学会利用Dreamweaver制作网页。
二、学习内容
Dreamweaver的基本知识；用Dreamweaver创建导航条。
【学习步骤】
当然，还可给该部位设置超级链接：
在下面的“WhenClickedGoToURL”项后文本框填入链接到的文件的地址，或单击Browse按钮选择，当鼠标移动到这个部位上时，在状态栏中可以看到链接到的地址。
WhenClickedGoToURL项后有一个下拉选框，这是设置超级链接的目标。
接着是“Options”项，若选中“PreloadImages”选框，则浏览者浏览页面时，所有图像将在页面下载的同时全部下载，整个页面打开的速度会慢些，但图像间转换会没有延迟，选中它。
反之，不选PreloadImages选框，则页面下载的同时只下载初始图像，其它图像按顺序下载，整个页面打开的速度较快，但图像间转换会有延迟。
若选中“Show“DownImage”Initially”选框，则将DownImage设为初始图像。
此时，OverWhileDownImage项改为鼠标移动到这个部位上时显示的图像，UpImage项改为鼠标点击该部位后显示的初始图像，Overimage项改为鼠标点击后当鼠标再次移动到这个部位上时显示的图像。
最下面是“Insert”项，选框中有Horizontally（水平）和Vertically（垂直）两个选项。
选中Horizontally为导航条水平展开，选中Vertically为导航条垂直展开。
UseTable项，选中后，Dreamweaver自动生成HTML代码将导航条各部位用表格隔开。
当一个部位设置完成后，要添加其他部位，可点击对话框上方的“＋”按钮，可按上面的步骤进行新部位的设置。
要删去某一个部位，在“NavBarElements”选框中先选中，再点击对话框上方的“－”按钮即可。
另外，使用设置导航条图像中的高级功能，可改变文档中基于当前按钮下的其他的图像。
在默认下,单击导航条中的元素时,所有导航条中元素都会自动地返回原来默认的状态。
若想设置被选中图像的上浮或是下沉的不同效果时，可用导航条中的高级功能：
在“Behaviors”面板中的“Actions”标签页，单击其上面的“＋”号按钮，在弹出的菜单中选择“SetNavBarImage”命令，弹出SetNavBarImage对话框中（见图2），选择“Advanced”标签页，对高级属性进行设置。
其中，若选择“OverImageoroverwhileDownImage”项，则当鼠标划过图片时显示其上面的图片，有上浮或是下沉的效果，并在“AlsoSetImage”文本框中选择要显示的图片，同时在其下面的“IfDownToImageFile”中选择当鼠标按下时要显示的图片路径；若选择“DownImage”项，则当浏览者单击所选图像后,显示另外的图片。
图2
存盘后，按F12键测试所作导航条。
三、小结
用Dreamweaver创建导航条
用Dreamweaver创建状态栏
一、学习目的
了解Dreamweaver，学会利用Dreamweaver制作网页。
二、学习内容
Dreamweaver的基本知识；用Dreamweaver创建状态栏。
【学习步骤】
状态栏制作方法：
设置浏览器状态栏中的文本信息,这一功能可在浏览网页面时,在浏览器窗口底下状态栏中显示相关信息。
其方法:
选择“Behaviors”面板中的Actions标签页的“SetTextofStatusBar”命令,在弹出的SetTextofStatusBar对话框中如图3,在“Message”的文本框中输入所在状态栏中显示的文档,按“OK”按钮完成。
再用按F12快捷键来测试,可看到其运行的效果。
当然可用JavaScript语言在Message文本框中加入些函数,让文本显示功态的效果。
三、小结
用Dreamweaver创建状态栏
用Dreamweaver的模板创建网页
一、学习目的
了解Dreamweaver，学会利用Dreamweaver制作网页。
二、学习内容
Dreamweaver的基本知识；用Dreamweaver的模板创建网页。
【学习步骤】
1、创建模板页面
最简单的办法是将一个网页另存为模板文件，通过执行命令：
File→SaveasTemplate，DreamWeaver会在网站根目录中建立一个模板文件夹——Templates来保存该模板。
当然，也可以新建一个模板：
Window→Templates，会出现的Templates面板，单击右下角的NewTemplate按钮，输入文件名，就建立了一个空模板；再单击OpenTemplate按钮打开该模板，保存后自动存放于网站模板文Templates中。
新建、打开的模板页面和普通的网页没什么两样，同样可以加入表格、层、图片、动画、脚本，设置页面属性等。
举例：
这里以制作一个模板为例来说明。
在该页面中，我们希望左侧的网站标识图和底部的导航图出现在每个页面中。
其中标识图由两幅图片叠加而成，导航图上的文字“最近更新”、“在线阅读”、“打包下载”等划分成几个热区分别链接到不同的文件，它们在每个页面中都不变。
右上部的主页面区和左下角弹出式选单按钮下面的页面说明则各不相同。
为了保持页面整洁，我们用表格来布置这些元素。
准确地说它只是一个没有可编辑区域的“准模板”，下面再设定可编辑区域。
2、设定可编辑区域
设定模板可编辑区域，一般来说有两种方法。
新建可编辑区域：
选择命令：
Modify→Template→NewEditableRegion。
在某一空白区域中单击后执行该命令即可将该区域变为可编辑区域。
标记某一区域为可编辑区域：
选择命令：
Modify→Template→MarkSelectinasEditableRegion。
如果某区域已经有一些文字，并且希望在以后新建的超文本文件中部分保留其内容，先选中该区域再执行标记命令即可。
取消可编辑状态：
选择命令：
Modify→Template→UnmarkEditableRegion。
执行该命令后会弹出一个对话框，其中有当前已有的可编辑区域列表，选中要取消的区域名称，确认即可。
举例：
在大片空白区中随便单击一下，执行Modify→Template→NewEditableRegion命令，在弹出对话框中输入名称：
Main；选中左下角本页说明下面的文字，执行Modify→Template→MarkSelectinasEditableRegion命令，输入名称：
exp。
可以看到可编辑区显示为浅蓝色，保存即完成模板制作。
三、小结
用Dreamweaver的模板创建网页
使用模板
一、学习目的
了解Dreamweaver，学会利用Dreamweaver制作网页。
二、学习内容
Dreamweaver的基本知识；用Dreamweaver的模板创建网页。
【学习步骤】
1、根据模板新建页面
命令：
File→NewFromTemplate。
弹出对话框，从模板列表中选取模板，出现的新页面中除可编辑区外均有淡黄色背景，是不能进行修改的部分。
空白的Main编辑区可直接进行插入表格、文字、图片等操作，Exp编辑区保留有原来的文字，修改或重新编辑均可。
2、对一个已经有内容的页面应用模板
命令：
Modify→Template→ApplyTemplatetoPage。
选择模板后还会弹出一个对话框，让您选择现有的孤立内容保存到哪个可编辑区域（ChooseEditableRegionforOrphanedContent）。
要是不想保留则可以选择“（none）”。
举例：
我们先新建一个普通页面，输入：
“CIW电脑工作室”，执行Modify→Template→ApplyTemplatetoPage命令，选择模板test，现有内容保存区域选择Main，确认后可看到页面自动变成了模板页的形式，而“CIW电脑工作室”这一行字就出现在主编辑窗口中。
3、更新模板以全面更新站点
基于某一模板建立了一些页面后，对模板进行修改后保存时，就会自动弹出一个对话框，列出所有使用了该模板的页面，询问是否要更新。
另外一种方法是执行Modify→Template→UpdatePages命令。
从UpdatePages对话框中选择一个站点或站点的某一种模板（同一站点中可以使用多个模板），单击右侧的Start按钮，软件会自动搜索与模板相关联的网页并进行更新。
非常方便！
举例：
Test模板左侧图形中的“读书破万站”图片是用一个图层叠加在另一幅图片之上的，现在不想要它，同时还想将所有页面中的该图片均删除。
就可以打开模板test.dwt，删除该图层，保存模板，单击右侧的“Update”按钮即可。
注意：
新建和使用模板前需定义站点。
方法是，执行命令：
Site→DefineSites；指定站点名称和本地根目录（LocalRoot）。
模板使用的是相对路径，如果没有指定网站在本地的位置，软件就不能准确找到并保存模板文件；并且应用模板新建和更新页面时，页面中的超链接也不能随页面文件保存位置的不同而相应变化。
三、小结
用Dreamweaver的模板创建网页
用Dreamweaver中插入背景音乐
一、学习目的
了解Dreamweaver，学会利用Dreamweaver制作网页。
二、学习内容
Dreamweaver的基本知识；用Dreamweaver中插入背景音乐。
【学习步骤】
一、直接插入法
1.打开一张需要插入背景音乐的网页，在菜单中找到这样的命令：
Windows->Behaviors，调出“Behaviors”行为面板，如下图所示（DreamweaverMX的面板）：
2.点击“+”号按钮，选择“playsound”命令，如下图：
如果此命令呈反白色，不可用，请在此命令下拉列表中选择“ShowEvenFor”命令，在此子菜单里选择“IE4.0”以上的版本，因为IE4.0以上的版本才支持此种格式的音乐插入方法。
3.此时弹出插入文件窗口，按“Browser”按钮选择音乐文件，当然是要浏览器支持的音乐文件格式（如mid、wav、AIFF、AU）
4.插入之后网页里会显示一个“plugin”插件图标，但我们还需要作进一步的调整。
因为Dreamweaver自动插入了一段控制代码，方便我们定制激活背景音乐。
但此功能不需要用到，那么就要把它删除。
代码有两段，分别如下：
代码一：
升级会员 