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.关闭dreameaver6.保存网页的方法3、小结课题建立一个简单的站点一、学习目的了解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文本框中输入“###”，将其设置为一个空链接。5、小结课题设计限时自动关闭的网页一、学习目的了解Dreamweaver，学会利用Dreamweaver制作网页。二、学习内容Dreamweaver的基本知识；用Dreamweaver设计限时自动关闭的网页。【学习步骤】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键，在浏览器中预览页面效果。13、小结课题用Dreamweaver做会移动的文字一、学习目的了解Dreamweaver，学会利用Dreamweaver制作网页。二、学习内容Dreamweaver的基本知识；用Dreamweaver做会移动的文字。【学习步骤】一、基本语法marquee.../marqueemarquee啦啦啦，我会移动耶！/marquee文字移动属性的设置：方向direction=##=left,rightmarqueedirection=left啦啦啦，我从右向左移！/marqueePmarqueedirection=right啦啦啦，我从左向右移！/marquee方式bihavior=##=scroll,slide,alternatemarqueebehavior=scroll啦啦啦，我一圈一圈绕着走！/marqueePmarqueebehavior=slide啦啦啦，我只走一次就歇了！/marqueePmarqueebehavior=alternate啦啦啦，我来回走耶！/marquee循环loop=##=次数；若未指定则循环不止(infinite)marqueeloop=3width=50%behavior=scroll啦啦啦，我只走3趟哟！/marqueePmarqueeloop=3width=50%behavior=slide啦啦啦，我只走3趟哟！/marqueePmarqueeloop=3width=50%behavior=alternate啦啦啦，我只走3趟哟！/marquee速度scrollamount=#marqueescrollamount=20啦啦啦，我走得好快哟！;/marquee对齐方式(Align)align=##=top,middle,bottomfontsize=6marqueealign=#width=400啦啦啦，我会移动耶！/marquee/font对齐上沿、中间、下沿。2、小结课题用Dreamweaver创建导航条一、学习目的了解Dreamweaver，学会利用Dreamweaver制作网页。二、学习内容Dreamweaver的基本知识；用Dreamweaver创建导航条。【学习步骤】一个网站的不同页面使用了同一导航条。通过统一导航条的方法，我们可以实现网站风格的统一，同时也方便了浏览者在不同页面间的跳转。用Dreamweaver3可作出各种比较复杂的导航条。网页上的导航条可由一个或几个部分组成，每个部分均由各种图像构成，可以链接到不同的网页页面。在Dreamweaver中每部分中最多可设四个状态下的图像。一开始是一个初始图像，当鼠标移动到导航条部位上时则显示另一个图像，还可以设置当鼠标点击后的初始图像，以及鼠标点击后当鼠标再次移动到这个部位上的图像。一般地，每部位只设一到两种状态的图像。因为图像太多了，会影响网页页面的访问、浏览的速度。导航条制作方法：移动光标到需要导航条的地方，单击主菜单栏的“Insert\NavigationBar”子命令，或直接单击Objects面板上的图标，弹出“InsertNavigationBar”对话框(图1)，此时我们可以进行各种设置来实现上述功能：图1在“ElementName”项后的文本框填入这个部位的命名，也可以不填，这时Dreamweaver3将自动给它命名。在Dreamweaver中每部分中最多可设四个状态下的图像：“UpImage”项是该部位的初始图像，在其后文本框填入已准备好的图像的地址，或点击右边Browse按钮来选择。每个部位可只设置UpImage项，其下的“OverImage”、“DownImage”和“OverWhileDownImage”三项可以不设置。其中，“OverImage”项是鼠标移动到这个部位上时显示的图像(本例中选择)；“DownImage”项是鼠标点击该部位后显示的初始图像；“OverWhileDownImage”项是鼠标点击后当鼠标再次移动到这个部位上时显示的图像。注意：ElementName项和UpImage项是必需的，所有的调用图像都会在系统的提示下保存在Dreamweaver3文件夹中，以便调用。2、小结课题用Dreamweaver创建导航条一、学习目的了解Dreamweaver，学会利用Dreamweaver制作网页。二、学习内容Dreamweaver的基本知识；用Dreamweaver创建导航条。【学习步骤】当然，还可给该部位设置超级链接：在下面的“WhenClickedGoToURL”项后文本框填入链接到的文件的地址，或单击Browse按钮选择，当鼠标移动到这个部