Dreamweaver网页制作教案.doc

1、 认识Dreamweaver一、学习目的了解Dreamweaver，学会利用Dreamweaver制作网页。二、学习内容Dreamweaver的基本知识。【学习步骤】1、Dreamweaver的功能Dreamweaver可以像普通的字处理软件一样编辑Internet上以HTML格式保存的所有文件，也就是网页；它支持动态HTML，可以在网页中产生动画；还可以在网页中插入各种插件，以产生特殊效果。Dreamweaver可用于管理站点，它像文件夹一样创建和打开站点，用不同的方式查看站点中各个网页之间的关系，调整站点的组织结构，使整个站点条理清晰。2、Dreamweaver的窗口（1） 标题栏（2）

2、菜单栏（3） 工具栏（4） 视图栏（5） 文件夹列表（6） 工作区3.网页工作区的三个视图方式选项它们分别是“普通”、“HTML”“预览”，它们之间的相互切换十分容易实现的。普通视图方式是Dreamweaver对网页所见即所得编辑方式的最佳体现，在此方式下，可以像在Word中那样直接进行各种编辑操作，实现网页编辑的所有功能。HTML视图实际上是一个文本编辑器，其中给出了普通视图方式下所件网页的HTML代码。在这里可以用菜单命令进行复制、粘贴、删除、查找等操作。对于HTML语言中的不同成分均用不同的颜色显示，这样比较容易区分各种语法成分。为了在制作网页过程中能够随时查看网页的实际效果，Dream

3、weaver提供了预览视图方式。4.安装dreameaver的方法 安装及注册5.关闭dreameaver6.保存网页的方法三、小结Dreamweaver的基本知识 建立一个简单的站点一、学习目的了解Dreamweaver，学会利用Dreamweaver制作网页。二、学习内容Dreamweaver的基本知识；建立一个简单的站点；进行简单的网页编辑。【学习步骤】1、创建空白站点。执行菜单命令“文件”“新建”“站点”，就会出现8中站点向导。出于简单，可选择“空站点”按钮，并在“指定新站点的位置”框中填入站点的位置。在指定新站点的位置后，单击“确定”即建成一个空站点。2、建立一个简单的文字网页建立了

4、一个站点之后，就应该在站点中加入网页了。创建空白网页执行菜单命令“文件”“新建”“网页”，就会出现一对话框，选择“普通网页”模板并单击“确定”即建立了一个新的空白页面。网页工作区的三个视图方式选项它们分别是“普通”、“HTML”“预览”，它们之间的相互切换十分容易实现的。普通视图方式是Dreamweaver对网页所见即所得编辑方式的最佳体现，在此方式下，可以像在Word中那样直接进行各种编辑操作，实现网页编辑的所有功能。HTML视图实际上是一个文本编辑器，其中给出了普通视图方式下所件网页的HTML代码。在这里可以用菜单命令进行复制、粘贴、删除、查找等操作。对于HTML语言中的不同成分均用不同的

5、颜色显示，这样比较容易区分各种语法成分。为了在制作网页过程中能够随时查看网页的实际效果，Dreamweaver提供了预览视图方式。输入文本网页中最基本的也是最重要的部分就是网页中由文本构成的内容，因此制作网页首先要从文本输入开始。3、设置网页中文字的字体、颜色、大小和效果在文本开始处按下鼠标左键，不放手拖到结束处，选择要设置的文本块。执行菜单命令“格式字体”。在“字体”对话框中，单击“字体”选项卡。在字体选择窗口中，选定所需要的字体，再确定文本的字型、大小、颜色、效果等。按“确定”即可。4、 网页编辑（1） 将图片插入网页（2） 将剪贴画插入网页（3） 加入GIF动画（4） 保存嵌入式图形文件

6、（5） 使用图片工具栏（6） 设置图片属性（7） 设置网页背景（8） 设置超链接（9） 应用框架（10） 表单的使用5、小结简单站点的建立过程 设计限时自动关闭的网页一、学习目的了解Dreamweaver，学会利用Dreamweaver制作网页。二、学习内容Dreamweaver的基本知识；用Dreamweaver设计限时自动关闭的网页。【学习步骤】设计页面时，经常会从一个页面打开一个子窗口以供浏览者查看。通常，这种子窗口中的内容一经浏览者看过，对于浏览者而言就不再需要，而他们常常会忘记关掉这些小窗口，致使许多的浏览器窗口打开着，耗用大量的资源。因此我们可以将子窗口设计成经过一段时间后可以自动

7、关闭的形式。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()，15

8、000)”。单击OK按钮，完成在文档头部插入15秒后自动关闭子窗口的脚本。在代码中，15000表示15000毫秒，也即15秒，也可以根据需要将之修改为自己需要的时间毫秒数。设置时间6. 在文档窗口中输入“关闭”字样，在属性面板上的Link文本框中输入“#”，将其设置为一个空链接。7. 在状态栏左端的快速标记编辑器上，单击标记按钮。选中“关闭”链接，然后按下Ctrl+T组合键，打开快速标记编辑器，进入到快速标记编辑器的编辑标记模式。然后在“”前输入“onclick=selfclose()”。 如图所示，设置完毕，单击OK按钮，确认操作。这样在Index.html被作为子窗口打开后，单击该链接就可

9、以立刻关闭该子窗口。8. 保存Index.html文件，并退出index.html的Dremweaver窗口。9. 现在开始设计fristpage.html页面。在本地站点的Smlple文件夹中，双击 fristpage.html，打开该文档，进入到文档的设计视图窗口中。10. 在文档中输入“单击这里打开会自动关闭的子窗口”字样。然后在属性面板上的 Link文本框中输入“#”，将之设置为空链接。11. 可以通过为该链接应用Open Browser Window行为来设置单击链接时打开Index.html窗口，不过更方便的方法是利用快速标识编辑器。方法是首先将插入点放置到链接中，然后在状态栏左端

10、的标识选择器上，单击标识按钮，选中整个链接。然后按下Ctrl+T组合键，打开快速标记编辑器，进入到快速标记编辑器的 编辑标识模式。再在“”前输入“onclick=window.open(index.html,null,width=200px，height=200px)”（如图所示）。设置完毕，按下回车键，确认操作。设置单击链接时打开12.上述操作就完成了本例的设置。可以单击菜单用File/save，保存所做的工作。然后按下F12键，在浏览器中预览页面效果。三、小结 用Dreamweaver设计限时自动关闭的网页用Dreamweaver做会移动的文字一、学习目的了解Dreamweaver，学会利

11、用Dreamweaver制作网页。二、学习内容Dreamweaver的基本知识；用Dreamweaver做会移动的文字。【学习步骤】一、基本语法 . 啦啦啦，我会移动耶！ 文字移动属性的设置：方向 #=left, right 啦啦啦，我从右向左移！ 啦啦啦，我从左向右移！ 方式 #=scroll, slide, alternate 啦啦啦，我一圈一圈绕着走！ 啦啦啦，我只走一次就歇了！ 啦啦啦，我来回走耶！ 循环 #=次数；若未指定则循环不止(infinite) 啦啦啦，我只走 3 趟哟！ 啦啦啦，我只走 3 趟哟！ 啦啦啦，我只走 3 趟哟！ 速度 啦啦啦，我走得好快哟！ 对齐方式(Alig

12、n) #=top, middle, bottom 啦啦啦，我会移动耶！对齐上沿、中间、下沿。二 、小结 用Dreamweaver做会移动的文字 用Dreamweaver创建导航条一、学习目的了解Dreamweaver，学会利用Dreamweaver制作网页。二、学习内容Dreamweaver的基本知识；用Dreamweaver创建导航条。【学习步骤】一个网站的不同页面使用了同一导航条。通过统一导航条的方法，我们可以实现网站风格的统一，同时也方便了浏览者在不同页面间的跳转。用Dreamweaver可作出各种比较复杂的导航条。网页上的导航条可由一个或几个部分组成，每个部分均由各种图像构成，可以链接

13、到不同的网页页面。在Dreamweaver中每部分中最多可设四个状态下的图像。一开始是一个初始图像，当鼠标移动到导航条部位上时则显示另一个图像，还可以设置当鼠标点击后的初始图像，以及鼠标点击后当鼠标再次移动到这个部位上的图像。一般地，每部位只设一到两种状态的图像。因为图像太多了，会影响网页页面的访问、浏览的速度。导航条制作方法：移动光标到需要导航条的地方，单击主菜单栏的“InsertNavigation Bar”子命令，或直接单击Objects面板上的图标，弹出“Insert Navigation Bar”对话框，如下图，此时我们可以进行各种设置来实现上述功能：在“Element Name”项

14、后的文本框填入这个部位的命名，也可以不填，这时Dreamweaver 3将自动给它命名。在Dreamweaver中每部分中最多可设四个状态下的图像：“Up Image”项是该部位的初始图像，在其后文本框填入已准备好的图像的地址，或点击右边Browse按钮来选择。每个部位可只设置Up Image项，其下的“Over Image”、“Down Image”和“Over While Down Image”三项可以不设置。其中，“Over Image”项是鼠标移动到这个部位上时显示的图像(本例中选择)；“Down Image”项是鼠标点击该部位后显示的初始图像；“Over While Down Ima

15、ge”项是鼠标点击后当鼠标再次移动到这个部位上时显示的图像。注意：Element Name项和 Up Image项是必需的，所有的调用图像都会在系统的提示下保存在Dreamweaver 3文件夹中，以便调用。三 、小结 用Dreamweaver创建导航条 用Dreamweaver创建导航条一、学习目的了解Dreamweaver，学会利用Dreamweaver制作网页。二、学习内容Dreamweaver的基本知识；用Dreamweaver创建导航条。【学习步骤】当然，还可给该部位设置超级链接：在下面的“When Clicked Go To URL”项后文本框填入链接到的文件的地址，或单击Brow

16、se按钮选择，当鼠标移动到这个部位上时，在状态栏中可以看到链接到的地址。When Clicked Go To URL项后有一个下拉选框，这是设置超级链接的目标。 接着是“Options”项，若选中“Preload Images”选框，则浏览者浏览页面时，所有图像将在页面下载的同时全部下载，整个页面打开的速度会慢些，但图像间转换会没有延迟，选中它。反之，不选Preload Images选框，则页面下载的同时只下载初始图像，其它图像按顺序下载，整个页面打开的速度较快，但图像间转换会有延迟。若选中“Show “Down Image”Initially”选框，则将Down Image设为初始图像。此时

17、，Over While Down Image项改为鼠标移动到这个部位上时显示的图像，Up Image项改为鼠标点击该部位后显示的初始图像，Over image项改为鼠标点击后当鼠标再次移动到这个部位上时显示的图像。最下面是“ Insert”项，选框中有Horizontally(水平)和Vertically(垂直)两个选项。选中Horizontally为导航条水平展开，选中Vertically 为导航条垂直展开。 Use Table 项，选中后，Dreamweaver自动生成HTML代码将导航条各部位用表格隔开。当一个部位设置完成后，要添加其他部位，可点击对话框上方的“”按钮，可按上面的步骤进行

18、新部位的设置。要删去某一个部位，在“Nav Bar Elements”选框中先选中，再点击对话框上方的“”按钮即可。另外，使用设置导航条图像中的高级功能，可改变文档中基于当前按钮下的其他的图像。在默认下,单击导航条中的元素时,所有导航条中元素都会自动地返回原来默认的状态。若想设置被选中图像的上浮或是下沉的不同效果时，可用导航条中的高级功能：在“Behaviors”面板中的“Actions”标签页，单击其上面的“”号按钮，在弹出的菜单中选择“Set Nav Bar Image”命令，弹出Set Nav Bar Image 对话框中(见图2)，选择“Advanced”标签页，对高级属性进行设置。其

19、中，若选择“Over Image or over while Down Image”项，则当鼠标划过图片时显示其上面的图片，有上浮或是下沉的效果，并在“Also Set Image”文本框中选择要显示的图片，同时在其下面的“If Down To Image File”中选择当鼠标按下时要显示的图片路径；若选择“Down Image”项，则当浏览者单击所选图像后,显示另外的图片。图2存盘后，按F12键测试所作导航条。三、小结 用Dreamweaver创建导航条用Dreamweaver创建状态栏一、学习目的了解Dreamweaver，学会利用Dreamweaver制作网页。二、学习内容Dreamw

20、eaver的基本知识；用Dreamweaver创建状态栏。【学习步骤】状态栏制作方法：设置浏览器状态栏中的文本信息,这一功能可在浏览网页面时,在浏览器窗口底下状态栏中显示相关信息。其方法:选择“Behaviors”面板中的Actions标签页的“Set Text of Status Bar”命令,在弹出的Set Text of Status Bar对话框中如图3,在“Message”的文本框中输入所在状态栏中显示的文档,按“OK”按钮完成。再用按F12快捷键来测试,可看到其运行的效果。当然可用JavaScript语言在Message文本框中加入些函数,让文本显示功态的效果。三、小结用Dream

21、weaver创建状态栏用Dreamweaver的模板创建网页一、学习目的了解Dreamweaver，学会利用Dreamweaver制作网页。二、学习内容Dreamweaver的基本知识；用Dreamweaver的模板创建网页。【学习步骤】1、创建模板页面最简单的办法是将一个网页另存为模板文件，通过执行命令：FileSave as Template，DreamWeaver会在网站根目录中建立一个模板文件夹Templates来保存该模板。当然，也可以新建一个模板：WindowTemplates，会出现的Templates面板，单击右下角的New Template按钮，输入文件名，就建立了一个空模板

22、；再单击Open Template按钮打开该模板，保存后自动存放于网站模板文Templates中。新建、打开的模板页面和普通的网页没什么两样，同样可以加入表格、层、图片、动画、脚本，设置页面属性等。举例：这里以制作一个模板为例来说明。在该页面中，我们希望左侧的网站标识图和底部的导航图出现在每个页面中。其中标识图由两幅图片叠加而成，导航图上的文字“最近更新”、“在线阅读”、“打包下载”等划分成几个热区分别链接到不同的文件，它们在每个页面中都不变。右上部的主页面区和左下角弹出式选单按钮下面的页面说明则各不相同。为了保持页面整洁，我们用表格来布置这些元素。准确地说它只是一个没有可编辑区域的“准模板”

23、，下面再设定可编辑区域。2、设定可编辑区域设定模板可编辑区域，一般来说有两种方法。新建可编辑区域：选择命令：ModifyTemplateNew Editable Region。在某一空白区域中单击后执行该命令即可将该区域变为可编辑区域。标记某一区域为可编辑区域：选择命令：ModifyTemplateMark Selectin as Editable Region。如果某区域已经有一些文字，并且希望在以后新建的超文本文件中部分保留其内容，先选中该区域再执行标记命令即可。取消可编辑状态：选择命令：ModifyTemplateUnmark Editable Region。执行该命令后会弹出一个对话框

24、，其中有当前已有的可编辑区域列表，选中要取消的区域名称，确认即可。举例：在大片空白区中随便单击一下，执行ModifyTemplateNew Editable Region命令，在弹出对话框中输入名称：Main；选中左下角本页说明下面的文字，执行ModifyTemplateMark Selectin as Editable Region命令，输入名称：exp。可以看到可编辑区显示为浅蓝色，保存即完成模板制作。三、小结 用Dreamweaver的模板创建网页 使用模板一、学习目的了解Dreamweaver，学会利用Dreamweaver制作网页。二、学习内容Dreamweaver的基本知识；用Dr

25、eamweaver的模板创建网页。【学习步骤】1、根据模板新建页面命令：FileNew From Template。弹出对话框，从模板列表中选取模板，出现的新页面中除可编辑区外均有淡黄色背景，是不能进行修改的部分。空白的Main编辑区可直接进行插入表格、文字、图片等操作，Exp编辑区保留有原来的文字，修改或重新编辑均可。2、对一个已经有内容的页面应用模板命令：ModifyTemplateApply Template to Page。选择模板后还会弹出一个对话框，让您选择现有的孤立内容保存到哪个可编辑区域（Choose Editable Region for Orphaned Content）。

26、要是不想保留则可以选择“（none）”。举例：我们先新建一个普通页面，输入：“CIW电脑工作室”，执行ModifyTemplateApply Template to Page命令，选择模板test，现有内容保存区域选择Main，确认后可看到页面自动变成了模板页的形式，而“CIW电脑工作室”这一行字就出现在主编辑窗口中。3、更新模板以全面更新站点基于某一模板建立了一些页面后，对模板进行修改后保存时，就会自动弹出一个对话框，列出所有使用了该模板的页面，询问是否要更新。另外一种方法是执行ModifyTemplateUpdate Pages命令。从Update Pages对话框中选择一个站点或站点的某

27、一种模板（同一站点中可以使用多个模板），单击右侧的Start按钮，软件会自动搜索与模板相关联的网页并进行更新。非常方便！举例：Test模板左侧图形中的“读书破万站”图片是用一个图层叠加在另一幅图片之上的，现在不想要它，同时还想将所有页面中的该图片均删除。就可以打开模板test.dwt，删除该图层，保存模板，单击右侧的“Update”按钮即可。注意：新建和使用模板前需定义站点。方法是，执行命令：SiteDefine Sites；指定站点名称和本地根目录（Local Root）。模板使用的是相对路径，如果没有指定网站在本地的位置，软件就不能准确找到并保存模板文件；并且应用模板新建和更新页面时，页面

28、中的超链接也不能随页面文件保存位置的不同而相应变化。三、小结 用Dreamweaver的模板创建网页用Dreamweaver 中插入背景音乐一、学习目的了解Dreamweaver，学会利用Dreamweaver制作网页。二、学习内容Dreamweaver的基本知识；用Dreamweaver 中插入背景音乐。【学习步骤】一、直接插入法1.打开一张需要插入背景音乐的网页，在菜单中找到这样的命令： Windows - Behaviors，调出“Behaviors”行为面板，如下图所示(Dreamweaver MX 的面板)：2.点击“+”号按钮，选择“play sound”命令，如下图：如果此命令呈反白色，不可用，请在此命令下拉列表中选择“Show Even For”命令，在此子菜单里选择“ IE 4.0 ”以上的版本，因为IE 4.0 以上的版本才支持此种格式的音乐插入方法。3.此时弹出插入文件窗口，按“Browser”按钮选择音乐文件，当然是要浏览器支持的音乐文件格式(如mid、wav、AIFF、AU) 4.插入之后网页里会显示一个“plugin”插件图标，但我们还需要作进一步的调整。因为 Dreamweaver 自动插入了一段控制代码，方便我们定制激活背景音乐。但此功能不需要用到，那么就要把它删除。代码有两段，分别如下：代码一：