第一篇：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.保存网页的方法
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/Head Content，显示文档的头部区域。5.单击设计视图窗口中的文档头部窗格。选择菜单Insert/Invisible Tags/Script，打开Inset Script对话框。如图所示，在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.可以通过为该链接应用Open Browser Window行为来设置单击链接时打开Index.html窗口，不过更方便的方法是利用快速标识编辑器。方法是首先将插入点放置到链接中，然后在状态栏左端的标识选择器上，单击标识按钮，选中整个链接。然后按下Ctrl+T组合键，打开快速标记编辑器，进入到快速标记编辑器的 编辑标识模式。再在“>”前输入“onclick=“window.open('index.html',null','width=200px，height=200px')””（如图所示）。设置完毕，按下回车键，确认操作。
设置单击链接时打开
12.上述操作就完成了本例的设置。可以单击菜单用File/save，保存所做的工作。然后按下F12键，在浏览器中预览页面效果。
13、小结
课题 用Dreamweaver做会移动的文字
一、学习目的
了解Dreamweaver，学会利用Dreamweaver制作网页。
二、学习内容
Dreamweaver的基本知识；用Dreamweaver做会移动的文字。【学习步骤】
一、基本语法
文字移动属性的设置：方向 方式 循环 速度 2、小结 课题 用Dreamweaver创建导航条 一、学习目的 了解Dreamweaver，学会利用Dreamweaver制作网页。 二、学习内容 Dreamweaver的基本知识；用Dreamweaver创建导航条。【学习步骤】 一个网站的不同页面使用了同一导航条。通过统一导航条的方法，我们可以实现网站风格的统一，同时也方便了浏览者在不同页面间的跳转。用Dreamweaver 3可作出各种比较复杂的导航条。网页上的导航条可由一个或几个部分组成，每个部分均由各种图像构成，可以链接到不同的网页页面。在Dreamweaver中每部分中最多可设四个状态下的图像。一开始是一个初始图像，当鼠标移动到导航条部位上时则显示另一个图像，还可以设置当鼠标点击后的初始图像，以及鼠标点击后当鼠标再次移动到这个部位上的图像。一般地，每部位只设一到两种状态的图像。因为图像太多了，会影响网页页面的访问、浏览的速度。 导航条制作方法：移动光标到需要导航条的地方，单击主菜单栏的“InsertNavigation Bar”子命令，或直接单击Objects面板上的图标，弹出“Insert Navigation Bar”对话框(图1)，此时我们可以进行各种设置来实现上述功能： 图1 在“Element Name”项后的文本框填入这个部位的命名，也可以不填，这时Dreamweaver 3将自动给它命名。在Dreamweaver中每部分中最多可设四个状态下的图像：“Up Image”项是该部位的初始图像，在其后文本框填入已准备好的图像的地址，或点击右边Browse按钮来选择。每个部位可只设置Up Image项，其下的“Over Image”、“Down Image”和“Over While Down Image”三项可以不设置。其中，“Over Image”项是鼠标移动到这个部位上时显示的图像(本例中选择)；“Down Image”项是鼠标点击该部位后显示的初始图像；“Over While Down Image”项是鼠标点击后当鼠标再次移动到这个部位上时显示的图像。注意：Element Name项和 Up Image项是必需的，所有的调用图像都会在系统的提示下保存在Dreamweaver 3文件夹中，以便调用。 2、小结 课题 用Dreamweaver创建导航条 一、学习目的 了解Dreamweaver，学会利用Dreamweaver制作网页。 二、学习内容 Dreamweaver的基本知识；用Dreamweaver创建导航条。【学习步骤】 当然，还可给该部位设置超级链接：在下面的“When Clicked Go To URL”项后文本框填入链接到的文件的地址，或单击Browse按钮选择，当鼠标移动到这个部位上时，在状态栏中可以看到链接到的地址。When Clicked Go To URL项后有一个下拉选框，这是设置超级链接的目标。 接着是“Options”项，若选中“Preload Images”选框，则浏览者浏览页面时，所有图像将在页面下载的同时全部下载，整个页面打开的速度会慢些，但图像间转换会没有延迟，选中它。反之，不选Preload Images选框，则页面下载的同时只下载初始图像，其它图像按顺序下载，整个页面打开的速度较快，但图像间转换会有延迟。若选中“Show “Down Image”Initially”选框，则将Down Image设为初始图像。此时，Over While Down Image项改为鼠标移动到这个部位上时显示的图像，Up Image项改为鼠标点击该部位后显示的初始图像，Over image项改为鼠标点击后当鼠标再次移动到这个部位上时显示的图像。 最下面是“ Insert”项，选框中有Horizontally(水平)和Vertically(垂直)两个选项。选中Horizontally为导航条水平展开，选中Vertically 为导航条垂直展开。Use Table 项，选中后，Dreamweaver自动生成HTML代码将导航条各部位用表格隔开。 当一个部位设置完成后，要添加其他部位，可点击对话框上方的“＋”按钮，可按上面的步骤进行新部位的设置。要删去某一个部位，在“Nav Bar Elements”选框中先选中，再点击对话框上方的“－”按钮即可。 2、小结 课题 用Dreamweaver创建导航条 一、学习目的 了解Dreamweaver，学会利用Dreamweaver制作网页。 二、学习内容 Dreamweaver的基本知识；用Dreamweaver创建导航条。【学习步骤】 另外，使用设置导航条图像中的高级功能，可改变文档中基于当前按钮下的其他的图像。在默认下,单击导航条中的元素时,所有导航条中元素都会自动地返回原来默认的状态。若想设置被选中图像的上浮或是下沉的不同效果时，可用导航条中的高级功能：在“Behaviors”面板中的“Actions”标签页，单击其上面的“＋”号按钮，在弹出的菜单中选择“Set Nav Bar Image”命令，弹出Set Nav Bar Image 对话框中(见图2)，选择“Advanced”标签页，对高级属性进行设置。其中，若选择“Over Image or over while Down Image”项，则当鼠标划过图片时显示其上面的图片，有上浮或是下沉的效果，并在“Also Set Image”文本框中选择要显示的图片，同时在其下面的“If Down To Image File”中选择当鼠标按下时要显示的图片路径；若选择“Down Image”项，则当浏览者单击所选图像后,显示另外的图片。 图2 存盘后，按F12键测试所作导航条。 2、小结 课题 用Dreamweaver创建状态栏 一、学习目的 了解Dreamweaver，学会利用Dreamweaver制作网页。 二、学习内容 Dreamweaver的基本知识；用Dreamweaver创建状态栏。 【学习步骤】 状态栏制作方法： 设置浏览器状态栏中的文本信息,这一功能可在浏览网页面时,在浏览器窗口底下状态栏中显示相关信息。其方法:选择“Behaviors”面板中的Actions标签页的“Set Text of Status Bar”命令,在弹出的Set Text of Status Bar对话框中如图3,在“Message”的文本框中输入所在状态栏中显示的文档,按“OK”按钮完成。再用按F12快捷键来测试,可看到其运行的效果。 当然可用JavaScript语言在Message文本框中加入些函数,让文本显示功态的效果。 2、小结 课题 用Dreamweaver的模板创建网页 一、学习目的 了解Dreamweaver，学会利用Dreamweaver制作网页。 二、学习内容 Dreamweaver的基本知识；用Dreamweaver的模板创建网页。【学习步骤】 1、创建模板页面 最简单的办法是将一个网页另存为模板文件，通过执行命令：File→Save as Template，DreamWeaver会在网站根目录中建立一个模板文件夹——Templates来保存该模板。 当然，也可以新建一个模板：Window→Templates，会出现的Templates面板，单击右下角的New Template按钮，输入文件名，就建立了一个空模板；再单击Open Template按钮打开该模板，保存后自动存放于网站模板文Templates 中。 新建、打开的模板页面和普通的网页没什么两样，同样可以加入表格、层、图片、动画、脚本，设置页面属性等。 举例：这里以制作一个模板为例来说明。在该页面中，我们希望左侧的网站标识图和底部的导航图出现在每个页面中。其中标识图由两幅图片叠加而成，导航图上的文字“最近更新”、“在线阅读”、“打包下载”等划分成几个热区分别链接到不同的文件，它们在每个页面中都不变。右上部的主页面区和左下角弹出式选单按钮下面的页面说明则各不相同。为了保持页面整洁，我们用表格来布 置这些元素。 准确地说它只是一个没有可编辑区域的“准模板”，下面再设定可编辑区 域。 2、设定可编辑区域 设定模板可编辑区域，一般来说有两种方法。 新建可编辑区域：选择命令：Modify→Template→New Editable Region。在某一空白区域中单击后执行该命令即可将该区域变为可编辑区域。标记某一区域为可编辑区域：选择命令：Modify→Template→Mark Selectin as Editable Region。如果某区域已经有一些文字，并且希望在以后新建的超文本文件中部分保留其内容，先选中该区域再执行标记命令即可。 取消可编辑状态：选择命令：Modify→Template→Unmark Editable Region。执行该命令后会弹出一个对话框，其中有当前已有的可编辑区域列表，选中要取 消的区域名称，确认即可。 举例：在大片空白区中随便单击一下，执行Modify→Template→New Editable Region命令，在弹出对话框中输入名称：Main；选中左下角本页说明下面的文字，执行Modify→Template→Mark Selectin as Editable Region命令，输入名称：exp。可以看到可编辑区显示为浅蓝色，保存即完成模板制作。 2、小结 课题 使用模板 一、学习目的 了解Dreamweaver，学会利用Dreamweaver制作网页。 二、学习内容 Dreamweaver的基本知识；用Dreamweaver的模板创建网页。【学习步骤】 1、根据模板新建页面 命令：File→New From Template。弹出对话框，从模板列表中选取模板，出现的新页面中除可编辑区外均有淡黄色背景，是不能进行修改的部分。空白的Main编辑区可直接进行插入表格、文字、图片等操作，Exp编辑区保留有原来的文字，修改或重新编辑均可。 2、对一个已经有内容的页面应用模板 命令：Modify→Template→Apply Template to Page。选择模板后还会弹出一个对话框，让您选择现有的孤立内容保存到哪个可编辑区域（Choose Editable Region for Orphaned Content）。要是不想保留则可以选择“（none）”。 举例：我们先新建一个普通页面，输入：“CIW电脑工作室”，执行Modify→Template→Apply Template to Page命令，选择模板test，现有内容保存区域选择Main，确认后可看到页面自动变成了模板页的形式，而“CIW电脑工作室”这一行字就出现在主编辑窗口中。 3、更新模板以全面更新站点 基于某一模板建立了一些页面后，对模板进行修改后保存时，就会自动弹出一个对话框，列出所有使用了该模板的页面，询问是否要更新。另外一种方法是执行Modify→Template→Update Pages命令。从Update Pages对话框中选择一个站点或站点的某一种模板（同一站点中可以使用多个模板），单击右侧的Start按钮，软件会自动搜索与模板相关联的网页并进行更新。 非常方便！举例：Test模板左侧图形中的“读书破万站”图片是用一个图层叠加在另一幅图片之上的，现在不想要它，同时还想将所有页面中的该图片均删除。就可以打开模板test.dwt，删除该图层，保存模板，单击右侧的“Update”按钮即 可。 注意：新建和使用模板前需定义站点。方法是，执行命令：Site→Define Sites；指定站点名称和本地根目录（Local Root）。模板使用的是相对路径，如果没有指定网站在本地的位置，软件就不能准确找到并保存模板文件；并且应用模板新建和更新页面时，页面中的超链接也不能随页面文件保存位置的不同而 相应变化。 2、小结 课题 用Dreamweaver 中插入背景音乐 一、学习目的 了解Dreamweaver，学会利用Dreamweaver制作网页。 二、学习内容 Dreamweaver的基本知识；用Dreamweaver 中插入背景音乐。【学习步骤】 一、直接插入法 1.打开一张需要插入背景音乐的网页，在菜单中找到这样的命令： Windows> 设计教室-> HTML 部分中的“HTML语言剖析”中的一段，介绍一下< EMBED >标记的参数： 2、小结 课题 用Dreamweaver 中插入背景音乐 一、学习目的 了解Dreamweaver，学会利用Dreamweaver制作网页。 二、学习内容 Dreamweaver的基本知识；用Dreamweaver 中插入背景音乐。【学习步骤】 < EMBED > 是用来插入各种多媒体，格式可以是 Midi、Wav、AIFF、AU 等等，Netscape 及 新版的 IE 都支持。其参数设定较多。如下 : < EMBED src=“your.mid” autostart=“true” loop=“true” hidden=“true” > src=“your.mid” 设定 midi 档案及路径，可以是相对或绝对。 autostart=true 是否在音乐档下载完之后就自动播放。true 是，false 否(内定值)。 loop=“true” 是否自动反复播放。LOOP=2 表示重复两次，true 是，false 否。 HIDDEN=“true” 是否完全隐藏控制画面，true 为是，no 为否(内定)。 STARTTIME=“分:秒” 设定歌曲开始播放的时间。如 STARTTIME=“00:30” 表示从第30秒处开始播放。 VOLUME=“0-100” 设定音量的大小，数值是0到100之间。内定则为使用系统本身的设定。 WIDTH=“整数” 和 HIGH=“整数” 设定控制面板的高度和宽度。(若 HIDDEN=“no”) ALIGN=“center” 设定控制面板和旁边文字的对齐方式，其值可以是 top、bottom、center、baseline、left、right、texttop、middle、absmiddle、absbottom CONTROLS=“smallconsole” 设定控制面板的外观。预设值是 console。 console 一般正常面板 smallconsole 较小的面板 playbutton 只显示播放按钮 pausecutton 只显示暂停按钮 stopbutton 只显示停止按钮 volumelever 只显示音量调节按钮 2、小结 课题 用Dreamweaver 中插入背景音乐 一、学习目的 了解Dreamweaver，学会利用Dreamweaver制作网页。 二、学习内容 Dreamweaver的基本知识；用Dreamweaver 中插入背景音乐。【学习步骤】 二、代码法 < BGSOUND >： < BGSOUND > 是用来插入背景音乐，但只适用于 IE，其参数设定不多。如下 < BGSOUND src=“your.mid” autostart=true loop=infinite > src=“your.mid” 设定 midi 档案及路径，可以是相对或绝对。autostart=true 是否在音乐档下载完之后就自动播放。true 是，false 否(内定值)。loop=infinite 是否自动反复播放。LOOP=2 表示重复两次，Infinite 表示重复多次。 此种方法就是直接把< BGSOUND >标记放于网页文件的< head >< /head >之间，设置好mid文件的路径就行。参数的设置如文中解说。 三、插件法 有些人始终没有舍弃 FrontPage 也许就因为在一些元素的插入中，Dreamweaver 没有提供功能，或者不方便。但我们知道，Dreamweaver 支持插件，声音插入插件为我们提供了方便。 插件下载：sound.mxp 下载后双击文件，就可以直接安装了，安装完成你可以在“对象”面板的“Common”栏看到一个喇叭图标。直接点击此按钮，就弹出如下图所示的插入窗 口： Forever：设置无限循环播放 Never：不循环播放，即只播放一次 NO of times：设置播放的次数 点击“Browser”按钮选择好声音文件之后，按确定完成制作。 2、小结 课题 用Dreamweaver在主页中制作连续的背景音乐 一、学习目的 了解Dreamweaver，学会利用Dreamweaver制作网页。 二、学习内容 Dreamweaver的基本知识；用Dreamweaver在主页中制作连续的背景音乐。【学习步骤】 一、保持背景音乐的连续不断，效果很好，现介绍如下，供制作个人主页的朋友们参考： 首先使用标签 〈frameset〉〈frame...〉〈frame...〉〈frameset〉 将主页(index.html)屏幕分成上下两个帧，为了不破坏页面布局，将上帧的高度设为 0；然后，在主页上帧放置的超文本文件(back_music.htm)中设置网站的背景音乐，最好不要设置播放界面；最后，在主页的下帧放置网站主页的主要内容(main.htm)。这样一来，主页下帧的页面就成为主页实际的活动页面，上帧的页面在访问者的整个浏览过程中始终保持静止不动，设置的背景音乐也就不会中断了。主页文件 index.html: 〈html〉 〈head〉〈title〉连续不断的背景音乐〈/title〉〈/head〉 〈frameset frameborder=“0” rows=“0,*”〉 〈frame src=“back_music.htm” scrolling=“no” noresize frameborder=“0”〉 〈frame src=“main.htm” frameborder=“0”〉 〈noframes〉 〈body〉 〈p〉please browse the web pages with browser that supperts frames.〈/p〉 〈/body〉 〈/noframes〉 〈/frameset〉 〈/html〉 上帧文件 back_music.htm(背景音乐为当前目录下的liang_zhu.mid,只播放一次)： 〈html〉 〈head〉〈title〉〈/title〉〈/head〉 〈body〉 〈!-背景音乐:--〉 〈embed src=“./liang_zhu.mid” hidden=“true” autostart=“true” loop=“0”〉 〈/body〉 〈/html〉 2、小结 课题 DreamweaverMX制作导航下拉菜单 一、学习目的 了解Dreamweaver，学会利用Dreamweaver制作网页。 二、学习内容 Dreamweaver的基本知识；DreamweaverMX制作导航下拉菜单。【学习步骤】 Dreamweaver从出道以来，其简便易用而又功能强大的“行为”(Behavior)一直是大家所关注的热点之一。在Dreamweaver MX(DW MX)中，对这一功能又有了扩充与改进。 在DW MX中，行为指的是为了响应某一事件(Event)而采取的一个操作(Action)。其中Event 指的是浏览器的事件，比如窗口刷新、鼠标移动等。而 Action 指的是后台响应事件的 JavaScript 代码，可以完成相应的操作，比如播放声音、翻转图片等。 用DW MX制作导航下拉菜单是网页中经常使用的特效之一。(如图1)主要应用了DW MX中的“Show-Hide Layers”行为。 图1 首先制作好导航条(图1中的“产品中心”那一栏)，随后添加一个层，作为下拉菜单将要显示的位置，并填入下拉菜单的对应栏目。接下来，打开“Behaviors”面板，同时选中“产品中心”链接(注意，这个时候不能够选中刚刚建好的层，否则无法应用“Show-Hide Layers”行为)，单击“+”号，选择“Show-Hide Layers”，就可以看到我们刚刚建好的层在选择项中，可以设定为隐藏或者显示(如图2)。 图2 行为的妙用主要体现在：如果我们要实现下拉菜单，关键就是让鼠标移到“产品中心”链接上时，使层显示；而鼠标离开链接时，使层隐藏。根据这种思想，我们首先为这个层设立两个Action，一个选择Hide，一个选择Show。然后，调整Event，将Hide Layer的Event设为OnMouseOut，即为鼠标离开链接；而将Show Layer的Event设为OnMouseOver，即为鼠标选中链接。按“F12”预览，就可看到我们期盼的效果。 这样，平时我们觉得很神秘的导航下拉菜单就可以轻易在行为中实现。还可以在导航链接上继续应用 “Swap Image”行为，实现鼠标点选链接时出现图片 翻转效果。 行为不是一个个孤立的特效，可以由多个行为组合叠加实现复杂的功能，除了DW MX默认设置好的行为外，我们还可以从www.xiexiebang.com上下载更多更酷的第三方行为，我们只需将它们直接复制到DreamweaverMXConfigurationBehaviorsActions目录下即可，从而使DW MX的这一闪光点更加眩目。课题 用Dreamweaver做弹出窗口 一、学习目的 了解Dreamweaver，学会利用Dreamweaver制作网页。 二、学习内容 Dreamweaver的基本知识；用Dreamweaver做弹出窗口。【学习步骤】 1.打开一个页面，设置页面属性。左边界，顶部边界为 0，在标题处输入标题名称。 2.在页面中插入图片。也可以是文字，Flash 动画等。小窗口页面就准备好了。 给一个页面添加弹出小窗口： 1.打开需要添加弹出小窗口页面，例如一个网站的首页，在标签选择器中选择“ body ”标签。 2.打开行为面板，点击“ + ”按钮添加行为。 3.选择“打开浏览器窗口”。 4.在要显示的 URL 处，选择弹出小窗口页面文件。设置弹出小窗口属性。 5.按 F12，在浏览器中发布的效果如下图。 课题 Dreamweaver 页面制作 一、学习目的 了解Dreamweaver，学会利用Dreamweaver制作网页。 二、学习内容 Dreamweaver的基本知识；Dreamweaver 页面制作。【学习步骤】 一、下边的简单网页为例，叙述一下制作过程。简单网页如下图： 在开始制作之前，我们先对这个页面进行一下分析。看看这个页面用到了那些东西。 □网页顶端的标题“我的主页”是一段文字。 □网页中间是一幅图片。 □最下端的欢迎词是一段文字。 □网页背景是一深紫红颜色。 知道了这个网页的结构以后我们就来可以制作了。 首先启动Dreamweaver MX 2004，确保你已经用站点管理器建立好了一个网站（根目录）。 为了制作方便，请您事先打开资源管理器，把要使用的图片收集到网站目录images文件夹内。 【插入标题文字】 进入页面编辑设计视图状态。在一般情况下，编辑器默认左对齐，光标在左上角闪烁，光标位置就是插入点的位置。如果要想让文字居中插入，点属性面板居中按钮即可。启动中文输入法输入“我的主页”四个字。字小不要紧，我们可以对它进行设置。 【设置文字的格式】 选中文字，在上图属性面板中将字体格式设置成默认字体，大小可任意更改字号。并选中“B”将字体变粗。 【设置文字的颜色】首先选中文字，在属性面板中，单击颜色选择图标，在弹出的颜色选择器中用滴管选取颜色即可。 【设置网页的标题和背景颜色】 点击“修改”菜单选“页面属性”。系统弹出页面属性对话框（如下图） 请在标题输入框填入标题“我的主页”。 设置背景颜色： 网页背景可以是图片，也可以是颜色。此例是颜色。如上图打开背景颜色选择器进行选取。如果背景要设为图片，点击背景图象“浏览”按钮，系统弹出图片选择对话框，选中背景图片文件，点击确定按钮。设计视图状态，在标题“我的主页”右边空白处单击鼠标，回车换一行，按照以下的步骤插入一幅画图片，并使这张图片居中。您也可以通过属性面板中的左对齐按钮让其居左安放。 【插入图像】选择以下任意一种方法： （1）使用插入菜单：在“插入”菜单选“图像”，弹出“选择图像源文件”对话框，选中该图像文件，单击确定。如下图： 2）使用插入栏（如下图）：单击插入栏对象按钮>选源文件”对话框，其余操作同上。 按钮，弹出“选择图像 （3）使用面板组“资源”面板（如下图）：点 按钮，展开根目录的图片文件夹，选定该文件，用鼠标拖动至工作区合适位置。 注：为了管理方便，我们把图片放在“images”文件夹内。如果图片少，您也可以放在站点根目录下。注意文件名要用英文或用拼音文字命名而且使用小写，不能用中文，否则要出现一些麻烦。 一个图片就插入完毕了。（插入*.swf动画文件，选择“插入”菜单＞媒体＞Flash）。 【输入欢迎文字】 在图片右边空白处单击，回车换行。仍然按照上述方法，输入文字“欢迎您„„”然后，利用属性面板对文字进行设置。保存页面。 一个简单的页面就这样编辑完毕了。 【预览网页】在页面编辑器中按F12预览网页效果。网站中的第一页，也就是首页，我们通常在存盘时取名为index.htm。【小结】在今天的教程中我们制作了一个简单的网页。内容有四： ①图片插入和对齐设置； ②文字的格式、颜色和加粗等设置； ③背景颜色的设置； ④预览网页，查看实际效果。 不仅要掌握还要举一反三反复练习。 课题 用Dreamweaver 发布网站 一、学习目的 了解Dreamweaver，学会利用Dreamweaver制作网页。 二、学习内容 Dreamweaver的基本知识；用Dreamweaver 发布网站。【学习步骤】 在发布网站之前先使用Dreamweaver站点管理器对你的网站文件进行检查和整理，这一步很必要。可以找出断掉的链接、错误的代码和未使用的孤立文件等，以便进行纠正和处理。 步骤如下：在编辑视图点「站点」菜单＞选“检查站点范围的链接”，弹出“结果”对话框，如下图： 下图是检查器检查出本网站与外部网站的链接的全部信息，对于外部链接，检查器不能判断正确与否，请自行核对。 下图是检查器找出的孤立文件，这些文件您的网页没有使用，但是仍在你的网站文件夹里存放，上传后它会占据有效空间，应该把它清除。清除办法是：先选中文件，点Delete键，确定。这些文件就放在“回收站”。 如果不想删除这些文件，点保存报告按钮（上图所示），在弹出的对话框中您给报告文件一个保存路径和文件名即可。该报告文件为一个检查结果列表。你可以参照此表，进行处理。 纠正和整理之后，您的网站就可以发布了。 【发布站点操作】 如果您是第一次上传文件，您的远程 Web 服务器根文件夹是空文件夹时按以下操作进行。如果不是空文件夹，另行操作附后。 服务器根文件夹是空文件夹时，连接到远程站点，请执行以下操作： 在 Dreamweaver MX 2004中，选择“站点”>“管理站点”。管理站点对话框中“dwmx2004”是在本教程第5页设置的，如果想回忆一下，请查看“设置站点”。 选择一个站点（即本地根文件夹），然后单击“编辑”。 单击对话框顶部的“基本”选项卡。在前面“设置站点”时，已填写了“基本”选项卡中的前几个步骤，因此单击几次“下一步”，直到向导顶部高亮显示“共享文件”步骤。如下图： 在标有“您如何连接到远程服务器？”的弹出式菜单中，选择“FTP”。单击“下一步”，弹出如下对话框： 请输入以下选项： 输入服务器的主机名；（必须填入） “您打算将您的文件储存在服务器上的什么文件夹中？”（可以留空） 在相应的文本框中输入您的用户名和密码。 “使用安全 FTP(SFTP)”选项。（可不勾选） 单击“测试连接”。 如果连接不成功，请检查设置或咨询系统管理员。 在输入相应的信息后，单击“下一步”。 不要为站点启用文件存回和取出。 单击“下一步”。 单击“完成”以完成远程站点的设置。 再次单击“完成”以退出“管理站点”对话框。 【上传文件】 在设置了本地文件夹和远程文件夹（空文件夹）之后，可以将文件从本地文件夹上传到 Web 服务器。 请执行以下操作： 在“文件”面板（“窗口”>“文件”）中，选择站点的本地根文件夹。 单击“文件”面板工具栏上的“上传文件”蓝色箭头图标。 Dreamweaver MX 2004会将所有文件复制到服务器默认的远程根文件夹。 多数空间提供商都设置有服务器默认的文件夹，请在此文件夹下创建一个空文件夹，方法是：在“文件”面板，将“本地视图”转换为“远程视图”。右键点击文件夹，选“新建文件夹”，输入一个名称，用作您的远程根文件夹，名称与您本地根文件夹的名称一致，便于操作。 为了操作更直观，您也可以最大化“文件”面板。请打开“文件”面板的最右边的“扩展/折叠”按钮，最大化文件面板，如下图，左边为远端站点内容，右边为本地文件内容：（注）这是将文件夹展开的示例，便于您观察，供参考。 点击，Dreamweaver MX 2004将所有文件复制到您定义的远程文件夹。 提示：第一次上传必须搞清楚网络空间服务商指定的服务器默认的存放网页的文件夹，在此文件夹下存放您的站点文件。访问您的网站地址为：http://......./index.htm 如果你在服务器默认的文件夹下上建立了与本地根文件夹同名的文件夹，那么访问您的网站，需要用这样的地址：http://........./（您的文件夹名）/index.htm 上传完毕，请在浏览器中输入浏览地址，测试您上传的结果。 第一部分 网页基础 1、了解网页设计的相关知识： Frontpage/网页四剑客/ Html/ Asp/ Java脚本语言等 2、熟悉Dreamweaver工作窗口 3、掌握常用工具的打开方法 文档/标准/插入/属性/CSS样式/行为/站点/资源/框架/层/时间轴等 4、掌握HTML网页源代码编写的基本语法结构 第二部分 HTML的使用 1、HTML是超文本标记/描述语言，它编写网页源代码，是网页设计的基础。 2、掌握HTML的语法规则 3、掌握常用标签的使用，实例演示 4、页面属性设置：修改→页面属性(Ctrl+J)练习题：通过HTML设计简单网页 要求：1>新建站点 2>在站点中新建一个普通网页 3>在普通网页中添加常用网页元素 第三部分 文本的编辑与基本操作 1、熟悉网页的组成元素，其中文字是最基本的，是网页的主体，主要用来传达信息。 2、掌握文本的创建与编辑操作 3、设置网页文字效果 利用属性面板/插入面板 4、利用文本创建超链接 5、网页属性设置（页面属性/系统网页样式）上机练习： 图文混排（包括文本编辑/文本格式/水平线/超链接/ 图片/表格等） 第四部分 网页图像 1、图像点缀网页，形象直观、丰富多彩 2、掌握图像在网页中的作用及常用图像格式 3、掌握在网页中创建各种图像的具体操作 4、编辑图像（设置图像属性） 热点链接及改变大小等 练习：变换图片效果（照片变换）第五部分 层叠样式表（CSS） 1、了解CSS的含义、作用、分类 2、具体操作（样式面板） 创建CSS样式/编辑样式表/删除样式表/附加样式表/应用CSS样式 上机练习： <1>新建样式（内部样式） <2>新建一个外部样式表文件（.css）<3>新建CSS特殊样式（格式化超链接）<4>制作电子相册 第六部分 页面的版面布局 1、了解版面布局设计方案及要求 2、利用表格布局网页 掌握表格的创建、编辑、设置属性 上机练习： 用隐藏的表格进行整个网页布局 3、层的使用 <1>了解层的含义、作用 <2>层的操作（层面板） 创建/编辑/用层设计表格 上机练习： <1>在网页页面中应用描绘层实现图像和文字的精 <2>制作导航条（用导航条设计栏目） 准备好所需的按钮图片→插入面板→常用→导航条 4、使用框架布局页面 <1>了解框架的含义、作用、组成及HTML语法结构 <2>掌握创建框架的方法 <3>框架的基本编辑操作 选定/保存/删除/设置属性 第八部分 表单的使用（交互式表单） 1、了解表单的含义、作用、组成及HTML标签 2、认识各种表单对象并创建表单 3、使用行为验证表单 制作和验证客户表单或个人简历表单 4、提交表单 设置并上网申请站点→发布站点→预览效果 第九部分 生成动态特效（时间轴和行为） 一、时间轴 1、了解什么是时间轴及其作用 2、打开认识时间轴 3、使用时间轴创建动画 <1>创建层动画（文字/图像）：通过时间轴来改变图层的位置、大小、可见性及叠放顺序。<2>创建图像动画（切换） 4、编辑时间轴 二、行为 1、了解行为及其包含的基本元素 2、掌握网页设计中常用事件及常用动作 3、掌握为具体为对象附加行为的操作方法 举例：为网页中经常暴发的事件，指定执行各种特 定的任务 第十部分 插入多媒体组件 1、了解什么是多媒体 2、掌握在网页中应用Flash动画、声音文件、视频文 件、日期等 3、网页中使用计数器（免费申请获取代码→网站上传 →预览） 第十一部分 模板与库的应用 一、模板： 1、了解模板的定义、组成、作用、特点 2、认识模板面板 3、模板操作 创建（.dwt）/编辑/应用/更新/模板与文档分离/管理 二、库 1、了解库的概念、作用 2、了解什么是库项目、掌握库项目的创建/编辑/应用/更新/文档与库项目分离 第一课 软件简介与设置 1.1课程介绍 本课程主要内容 ①内容提要/学习目标 ②软件演示 ③实例操作步骤 本课程的三个特色栏目 ①网页色彩搭配； ②HTML基础； ③名词解释 1.2(软件)基础知识 内容提要： ①起始页的使用及相关设置； ②软件界面概览(菜单，工具，面板等)； ③“插入”工具栏显示模式的切换； ④文档窗口的工具栏和状态栏； ⑤如何设置，存储和管理界面布局。 学习目标： ①了解Dreamweaver软件的作用，基本界面布局，以及各功能区的应用范围； ②了解控制软件界面和文档的基本方法。 第1章 初识Dreamweaver安装、下载方法.一、教学目的：学习原DR的安装、下载方法.二、教学重点：概述和安装 三、教学过程 1.1 Dreamweaver MX概述 1、直观的新工作区 2、更加强大的模板 3、广泛的代码库 4、新服务器技术 5、帮助初学者起步的示例内容 6、XML和WEB标准支持 7、改进的级联样式表（CSS） 8、高性能的新编码功能 9、高性能的新编码功能 10、优化COLDFUSION MX开发环境 使用 Dreamweaver 工作区 一、教学目的：认识DR的界面，了解各面板的组成，菜单的组成。 二、教学重点：各面板的组成。 三、教学过程： 选择工作区布局（仅适用于 Windows）在 Windows 中首次启动 Dreamweaver 时，会出现一个对话框让选择一种工作区布局。如果以后改变了主意，可以使用“参数选择”对话框切换到一种不同的工作区。 选择工作区布局： 选择下列布局之一： Dreamweaver MX 工作区 HomeSite/代码编写者样式的 Dreamweaver MX 工作区 Dreamweaver 4 工作区 在选择一种工作区后切换到另一种工作区： Dreamweaver MX 工作区 浮动工作区布局（Windows 和 Macintosh）状态栏 “文档”窗口底部的状态栏提供与正创建的文档有关的其他信息。调整“文档”窗口的大小 将“文档”窗口的大小调整为预定义的大小： 向“窗口大小”弹出式菜单中添加新的大小： 将“文档”窗口最大化（仅适用于 Windows 集成工作区）： 使用快速启动条 快速启动条显示在状态栏中，包含用以打开和关闭各种面板、检查器和窗口的按钮。 若要显示快速启动条，请在“面板”参数选择中启用“在面板和启动器中显示图标”选项。可以指定在快速启动条中显示哪些项目。 使用文档工具栏 “显示代码视图 “显示代码视图和设计视图” “显示设计视图 “标题” “文件管理” “在浏览器中预览/调试” “换行符”在插入点处插入一个换行符。还可以按下 Shift+Enter(Windows)“不换行空格”在插入点处插入一个不换行的空格()。“左引号”、“右引号”和“破折线”在插入点处插入标点符号。“英镑符号”、“欧元符号”和“日元符号”在插入点处插入货币符号。“版权”、“注册商标”和“商标”在插入点处插入相应的符号。“其它字符” 第二单元 文本的编辑与基本操作 一、教学目的：学习网页的组成对象 设计要素 文本的字体大小颜色，段落的格式，基本的编辑命令。 二、学教重点：文本编辑的基本操作 三、教学过程： 网页的组成比报纸和杂志复杂的多，因为它包含图、声、文、动画、控件等多媒体，另一大特点有超级链接。 1、文字 标题：一般为图形 尺寸 系统默认大小 样式：一般少用下划线 字体：一般为系统默认大小 颜色：以颜色来强调文章的重点 2、图形 一般为GIF 和 JPG 格式 3、超级链接 站内链接 和站外链接 网页的设计要素 不同浏览器的显示效果 网络的传输速度 屏幕的分辨率 颜色的显示 网页的基本操作 创建网页 文件――新建――对话框 打开文件类型 HTML SHTM SHTML XML文件 库文件LBI 模板文件 DWT 样式表文件 CSS 微软服务器端文件 ASP JAVA 服务器端文件 PHP文件 TXT文件 CFM模板文件 JSF fireworks文件 LASSO 打开当前站点文件 从站点面板中打开 或 通过菜单－文件－打开命令 打开最近使用的文件 文件菜单下列出的文件名 从WORD中导入文件 先在WORD中将文件保存为HTML 文件 然后在DR 中 文件－导入－WORDHTML 还可打开后用命令－清除 保存网页 另存为模板 输入文本 直接输入 使用剪贴板 用ENTER 相当于插入 用SHIFT＋ENTER 相当于插入 要使字体不随浏览器的字体设置而改变就要用到层叠样式（CSS Style）文本的颜色 选择文字 然后用下列两种方式 用文字属性面板中调整 单击调色板中的右上角要将字体改为默认值点 按钮或菜单文本――颜色 上机练习： 段 落 格 式 创新新段落： ENTER 分段落 在段落 格式下拉菜单选择一种格式 对齐段落： 居中对齐 左对齐 右对齐 缩进段落 取消缩进 或菜单 或选择段落后右击弹出菜单 项目符号： 每个段落前加一个项目符号 用 利用 插入分隔线 列表下拉选择各种不同的情况 修改分隔线的属性 改变长度 改变高度 改变对齐方式 插入特殊字符和符号 菜单插入｜特殊字符｜ 弹出子菜单，进行所需要的项目选择 其中包括： 换行符 SHIFT＋RETURN 不换行空格 CTREL＋SHIFT＋SPACE 用于行首 插入符号 E－mail 地址链接 插入｜电子邮件链接｜ 其效果将看到“欢迎联系”字样并带下划线 可以发送邮件 插入日期时间： 插入注释文字 基本编辑命令 撤销和重复操作 查找和替换 移动和复制 直接用鼠标拖动 使用CUT COPY PASTE 灵活使用HISTORY 面板 SHIFT＋F10 表示当前刚完成的操作 重放按钮 复制到剪帖板按钮保存命令按钮 弹出菜单按钮可清除历史记录等操作 上机练习，重复上述操作，记录快捷键 作业：做一个文字型的小网页，将学到的知识运用在上面。 第3单元网页中的图像链接 教学目的：掌握网页中插入图像、修改属性、插入交互图像以及创建交互图像的方法。教学重点：插入图像、控制图像 创建链接、插入交互图像的方法。插入图像操作： 1.在“文档”窗口中，将插入点放置在您要显示图像的地方，然后执行以下操作之一： o 在“插入”栏的“常用”类别中，单击“图像”图标。 在“插入”栏的“常用”类别中，将“图像”图标拖入“文档”窗口中（或者，如果您正处理代码，则拖入“代码”视图窗口中）。 o 选择“插入”>“图像”。 o 将图像从“资源”面板（“窗口”>“资源”）拖到“文档”窗口中的所需位置；然后跳到第 3 步。o 将图像从“站点”面板拖到“文档”窗口中的所需位置；然后跳到第 3 步。o 将图像从桌面拖到“文档”窗口中的所需位置；然后跳到第 3 步。 2.在出现的对话框中执行下列操作之一： o 选择“文件系统”以选择一个图形文件。o 选择“数据源”以选择一个动态图像源文件。3.浏览以选择您要插入的图像或内容源文件。o 如果您正在一个未保存的文档中工作，则 Dreamweaver 生成一个对图像文件的 file:// 引用。将文档保存到站点中的任何位置后，Dreamweaver 将该引用转换为文档相对路径。4.在属性检查器（“窗口”>“属性”）中，设置该图像的属性。设置图像属性 1.设置以下任一选项： o 使用缩略图下面的文本域设置名称，以便在使用 Dreamweaver 行为（例如“交换图像”）或脚本撰写语言（例如 JavaScript 或 VBScript）时可以引用该图像。o “宽”和“高”以像素为单位指定图像的宽度和高度。o “源文件”指定图像的源文件。单击文件夹图标以浏览到源文件，或者键入路径。 “链接”指定图像的超链接。将“指向文件”图标拖到“站点”面板中的某个文件，单击文件夹图标浏览到站点上的某个文档，或手动键入 URL。有关创建链接的信息，“对齐”对齐同一行上的图像和文本。 “替代”指定只显示文本的浏览器或已设置为手动下载图像的浏览器中代替图像显示的替代文本。对于使用语音合成器（用于只显示文本的浏览器）的有视觉障碍的用户，将大声读出该文本。在某些浏览器中，当鼠标指针滑过图像时也会显示该文本。“地图名称”和“热点工具”允许您标注和创建客户端图像地图。“垂直边距”和“水平边距”沿图像的边缘添加边距（以像素为单位）。“垂直边距”沿图像的顶部和底部添加边距。“水平边距”沿图像左侧和右侧添加边距。“目标”指定链接的页应当在其中载入的框架或窗口。_blank，将链接的文件载入一个未命名的新浏览器窗口中。 _parent，将链接的文件载入含有该链接的框架的父框架集或父窗口中。如果含有该链接的框架不是嵌套的，则在浏览器全屏窗口中载入链接的文件。 _self，将链接的文件载入该链接所在的同一框架或窗口中。此目标为默认值，因此通常不需要指定它。 _top，在整个浏览器窗口中载入所链接的文件，因而会删除所有框架。“边框”是以像素为单位的图像边框的宽度。默认为无边框。 “编辑”启动您在“外部编辑器”参数选择中指定的图像编辑器并打开选定的图像。有关设置外部图像编辑器的信息，“重设大小” Control+代字号(~) 第四单元表格设计 教学目的：学习下列方法 在“标准”视图中创建和修改表格 向表格添加颜色 在“标准”视图中设置相对宽度的表格 教学重点：能进行表格设计 教学过程： 在“标准”视图中创建和修改表格 1.在 Dreamweaver 中，选择“文件”>“新建”。即出现“新建文档”对话框。 2.在“空文档”列表中，选择“HTML”，然后单击“创建”以创建一个新的 HTML 文档。3.在“文档”工具栏的“标题”文本域中，输入“表格设计”为文档添加一个标题。 4.选择“文件”>“保存”将该文档保存到本地站点文件夹中。将其命名为 tableModify.htm。 插入表格 现在就可以在文档中插入表格了。 1.在“文档”窗口，将插入点放到文档中，然后执行下列操作之一： o 选择“插入”>“表格”。o 在插入栏的“常用”类别中，单击“表格”图标。 出现“插入表格”对话框。 2.在该对话框中，设置下列选项： o 在“行数”文本框中，键入 2。o 在“列数”文本框中，键入 2。o 在“宽度”文本框中键入 600，然后在“宽度”文本框右边的弹出式菜单中选择像素。将宽度设置为 600 像素将创建一个固定宽度的表格。稍后，我们将在本教程中更详细地讨论表格宽度。 o 在“边框”文本框中，键入 1 将表格和表格单元格周围的边框宽度设置为 1 个像素。 3.单击“确定”。 Dreamweaver 将该表格插入到文档中。 4.执行下列操作之一来保存文档： o 选择“文件”>“保存”。o 按 Ctrl+S 组合键 修改表格 下一步，将修改表格的布局。将在表格中添加行和列，并且学习如何合并和拆分单元格以创建所需的页面布局。 1.在左上方的单元格中单击，然后向下拖动直到最下面的行以选择左边的一列。 2.选择“修改”>“表格”>“插入列”。现在该表格包含三列。 3.单击左下方的单元格，然后选择“修改”>“表格”>“插入行或列”。 即出现“插入行或列”对话框。提示： 如果想要插入特定数目的行或列，或者要选择在表格中插入行或列的位置，请选择“插入行或列”选项。 4.在该对话框中，设置下列选项： 对于“插入”，选择行。在“行数”框中，键入 2。对于“位置”，选择 所选之上。5.单击“确定”。 表格即会更新。现在的表格为四行三列。6.保存所做的更改（“文件”>“保存”）。合并和拆分单元格 通过合并和拆分单元格，可以自定义表格的设计以符合布局需要。接下来，将看到如何使用菜单选项或属性检查器来合并或拆分表格单元格。 1.在文档中，将指针从左上方的单元格拖到它下面的一个单元格，以选择表格左列的上面两个单元格。 2.选择“修改”>“表格”>“合并单元格”。 两个单元格合并成一个单元格。 3.单击第二列的第三行，然后向右向下拖动以选择第二列和第三列中的最后两行单元格。 4.在属性检查器中，单击“合并”按钮以合并单元格。选定的单元格合并为一个单元格。 可以拆分单个的单元格或列。 1.单击左上方的单元格。 2.在属性检查器中，单击“拆分单元格”按钮。“拆分单元格”对话框出现。 3.在该对话框中，设置下列选项： o 对于“把单元格拆分”，选择列。o 在“列数”框中，输入 2。4.单击“确定”。表格即被修改。 更改行高和列宽 现在调整该表格的尺寸。将要增加表格的行间距，并且调整表格列间距。 1.沿表格底部边框移动指针直到指针变成一个边框选择器，然后向下拖动以调整表格大小。 如果愿意，还可以使用此方法调整表格中的其他行高。 2.沿一个列的边框移动指针直到指针变成一个边框选择器，然后向左或向右拖动它以更改列宽。 3.调整完成后，保存文档。向表格添加颜色 可以向表格的任何部分添加颜色。将首先向整个表格添加背景颜色，然后对表格中的单元格应用不同的背景颜色。最后，将更改边框颜色。 1.在文档中，单击表格的任何一个单元格，然后在位于文档窗口左下方的标签选择器中单击 2.如果属性检查器尚未打开，则打开属性检查器（“窗口”>“属性”）。属性检查器中出现所选表格的属性。 3.在属性检查器中，执行下列操作之一，在“背景颜色”文本框中选择一种颜色： o 单击颜色选择器弹出式菜单，然后从颜色选择器中选择一种颜色。o 输入一个十六进制的颜色值，例如 #CC9933。o 输入一个网页安全色名称，如 goldenrod。将一种背景颜色应用到表格。 4.用同样的方法可以将一种背景颜色应用到表格的单元格中。在左上方的单元格中单击，然后在属性检查器的“背景颜色”文本框中选择一种不同的颜色。5.如果需要，还可以向其他单元格中添加颜色。添加边框颜色 现在，将设置表格边框的颜色。边框颜色同时应用于表格的外边框和内边框。 1.在文档窗口中，选择表格。 2.在属性检查器的“边框”文本框中，使用颜色选择器为表格选择一种边框颜色。 3.完成后，请保存文档。 4.按 F12 键（仅限于 Windows）或者选择“文件”>“在浏览器中预览”，然后选择一种浏览器以查看文档。 在“标准”视图中设置相对宽度的表格 1.在 Dreamweaver 中，选择“文件”>“新建”。 2.在“新建文档”对话框中，已经选定了“基本页”类别；在“基本页”列表中，双击“HTML”创建一个新的 HTML 文档。文档在文档窗口中打开。 3.将该文件保存到本地站点文件夹。将其命名为 tableWidth。4.将插入点放置在文档中。5.在插入栏的“常用”选项卡中，单击“表”按钮。6.在出现的对话框中，设置下列选项： 在“行数”文本框中，键入 2。在“列数”文本框中，键入 3。 在“宽度”文本框中，键入 90，并在“宽度”文本框右边的弹出式菜单中选择百分比。在“边框”文本框中，输入 1 将表格和表格单元格周围的边框宽度设置为 1 个像素。7.单击“确定”。 表格即出现在文档中。 8.单击中间列最上方的单元格并拖动到最下方的单元格以选择中间列。 9.在属性检查器中，使用颜色选择器将一种背景颜色应用于该列。 创建其宽度基于像素的表格 现在将添加另外一个表格。其宽度基于像素的表格被设置为某个特定宽度，并且不会随着浏览器窗口大小的改变而改变。 1.在刚刚插入的表格后面插入一个段落回车。2.在插入栏的“常用”选项卡中，单击“表”按钮。3.在出现的对话框中，设置下列选项： 在“行数”文本框中，键入 2。在“列数”文本框中，键入 3。 在“宽度”文本框中，键入 600，然后在“宽度”文本框右边的弹出式菜单中选择像素。在“边框”文本框中，键入 1 将表格和表格单元格周围的边框宽度设置为 1 个像素。4.单击“确定”。 表格即出现在文档中。 5.单击中间列的最上方单元格并向下拖动到最下方的单元格以选择中间列。 6.在属性检查器中，使用颜色选择器将一种背景颜色应用于该列。 7.按 F12 键（仅限于 Windows）或者选择“文件”>“在浏览器中预览”，然后选择一种浏览器以查看文档。 调整浏览器窗口大小以查看在浏览器窗口改变时，这两个表格是怎样变化的。基于像素的表格保持大小不变，而基于百分比的表格则调整大小以符合浏览器大小。8.文档查看完毕后，请关闭浏览器窗口。9.保存文档。创建和保存新文档 1.在 Dreamweaver 中，选择“文件”>“新建”。 2.在“新建文档”对话框中，已经选定“基本页”类别。在“基本页”列表中选择“HTML”，然后单击“创建”创建一个新的 HTML 文档。文档在文档窗口中打开。 3.将该文档保存到的本地站点文件夹中，并将其命名为 tableLayout.htm。 第五单元 版面设计 1.2.3.教学目的：能轻松地设计出合理的网页设计 教学重点：创建、布局和调整布局表格 课堂讲解： 创建布局表格和布局单元格 绘制布局表格： 如果要创建多个布局表格而又不想 每次都单击布局表格按钮，按住CTRL 再创建。 创建布局表格时会靠近页面边界＜8个像时会自动对齐。取消对齐功能用按ALT键 绘制布局单元格： 在页面上制作一个单元格以后，会自动创建了一个包含这个布局单元格的布局表格，在一个布局表格里可以创建几个单元格。 组件绘制嵌套的布局表格：在一个表格里绘制另一个布局表格，称为布局表格的嵌套，在一个表格里可以创建多个嵌套布局表格 使用辅助网格线：菜单中 查看｜网格｜网格设置 显示网格 CTRL＋ALT＋G 捕捉网格 SHIFT＋ALT＋CTRL＋G 在布局单 元格中添加内容：添加文本、添加图像、调整布局 表格和布局单元格 单击单元格的边框，或按住CTRL单击单元格中的任何位置，在布局单元格中的边框上会出现控制柄。拖动控制柄就可以改变布局单元格的大小。 移动布局单元格：1是选定，2是拖动或用方向键 每按一次移动一个像素。按住SHIFT键每按一次可移动10个像素。 设置布局单元格：选定单元格在属性面板中设置 设置布局表格：选定后在属性面板中设置 设置自动伸展宽度 设置指定宽度 使用间隔图 第六单元 框 架一、二、三、教学目的：学习框架集，框架集中保存及关联文件。教学重点：框架集的基本概念和基本操作 课堂讲解： 1、框架的作用 2、创建框架方法 用菜单方法 用拖动框架任一角，或一边。按ALT拖动边 框架拖出另一边合并 4、插入预定义框架集 5、嵌套的框架集 保存框架集文件 CTRL＋S 只能保存当前页面。保存框架 保存全部 一定要搞清楚框架集和各框架的名字于其对应的关系。 框架与框架的属性 边框 属性 框架集命名 确定框架的大小 设置框架集的边框 改变框架背景的颜色 使用链接控制框架的内容 空白小结：能利用框架更好地规划页面 作业：利用框架作一网页 上级 自身 顶部 第7单元层的运用 一、教学目的：创建层，层的参数选择和属性设置，层的操作，改变层的堆栈顺序，改变层的可见性，层与表格。 二、教学重点：层的运用 三、课堂讲解： 打开“层”面板，请选择“窗口”>“其他”>“层”。F2 创建层： 设置层的可见性 层的名称 创建嵌套层：嵌套层是其代码包含在另一个层中的层。嵌套通常用于将层组织在一起。嵌套层随其父层一起移动，并且可以设置为继承其父级的可见性。 1.层的属性设置：设置以下任一选项： 层 ID 用于指定一个名称，以便在“层”面板和 JavaScript 代码中标识该层。请输入一个名称。只应使用标准的字母数字字符，而不要使用空格、连字符、斜杠或句号等特殊字符。每个层都必须有它自己的唯一名称。 左和上（左侧和顶部）指定层的左上角相对于页面（如果嵌套，则为父层）左上角的位置。宽和高指定层的宽度和高度。 层的移动与对齐： 选择层。 选择“修改”>“对齐”，然后选择一个对齐选项。 调整层大小：当处理页面布局时，可以对层进行选择、移动、大小调整和对齐。在对一个层进行移动、大小调整或对齐之前，必须先选择该层。 若要防止在对层进行移动和大小调整时使层相互重叠，请使用“防止重叠”选项 层与网格对齐： 设置网格显示和对齐，拖动层然后释放即对齐 改变层的顺序：用鼠标拖动上下位置 层与表格：可以转变，菜单 修改｜转变｜层到表格 表格到层 要防止层的重叠 作业：利用层作一网页排版 第八单元使用“时间轴”面板 “时间轴”面板显示层和图像的属性在一段时间内如何更改。选择“窗口”>“其他”>“时间轴”可打开“时间轴”面板。 “时间轴”弹出式菜单指定当前在“时间轴”面板中显示文档的哪些时间轴。播放栏显示当前在文档窗口中显示时间轴的哪一帧。 帧编号指示帧的序号。“后退”和“播放”按钮之间的数字是当前帧编号。您可以通过设置帧的总数和每秒帧数(fps)来控制动画的持续时间。每秒 15 帧这一默认设置是比较适当的平均速率，可用于在通常的 Windows 和 Macintosh 系统上运行的大多数浏览器。备注： 较快的速率可能不会提高性能。浏览器始终会播放动画的每一帧，即使它们无法达到指定的帧速率。如果帧速率超过浏览器可以支持的速率，则将被忽略。上下文菜单包含各种与时间轴相关的命令。 “行为”通道是应该在时间轴中特定帧处执行的行为的通道。 动画条显示每个对象的动画的持续时间。一个行可以包含表示不同对象的多个条。不同的条无法控制同一帧中的同一对象。关键帧是动画条中已经为对象指定属性（如位置）的帧。Dreamweaver会计算关键帧之间帧的中间值。小圆标记表示关键帧。 “动画”通道显示用于制作层和图像动画的条。重命名时间轴 1.选择“修改”>“时间轴”>“重命名时间轴”。2.在“重命名时间轴”对话框中输入新的名称。时间轴制作层动画，请执行以下操作： 1.将层移至它在动画开始时应处于的位置。2.选择“窗口”>“其他”>“时间轴”。 3.选择您要制作动画的层。 4.在层中单击会将一个闪烁的插入点放入层中，但不会选定该层。5.选择“修改”>“时间轴”>“在时间轴上添加对象”，或者简单地将选定层拖至“时间轴”面板中。6.一个条将出现在时间轴的第一个通道中。层的名称将在该条中出现。7.单击位于条末端的关键帧标记。8.在页面上将层移至它在动画结束时应处于的位置。 9.将出现一条线，它显示文档窗口中动画的轨迹。10.如果要让层沿曲线移动，请选择其动画条，然后按住 Ctrl 键并单击(Windows)或按住 Command 键并单击(Macintosh)动画条中部的一个帧，从而在您单击的帧处添加一个关键帧，或者单击动画条中部的一个帧并从上下文菜单中选择“添加关键帧”。11.重复此步骤，定义其他关键帧。12.按住“播放”按钮，预览页面上的动画。 显示和隐藏层，而不是更改多图像动画的源文件。由于新的图像必须进行下载，所以切换图像的源文件会降低动画的速度。如果所有图像都在动画运行前在隐藏层中同时下载，将不会出现明显的停顿，并且不会缺少图像。 扩展动画条以创建更顺畅的动作。如果动画断断续续并且图像在不同位置之间跳动，请拖动该层动画条的结束帧，使动作延伸到更多的帧。通过延长动画条，可以在运动的开始点和结束点之间创建更多的数据点，同时也会使对象更为缓慢地移动。请尝试增加每秒帧数(fps)以提高速度，但应注意在普通系统上运行的大多数浏览器都不能支持超过 15 fps 的动画速度。请在不同的系统上用不同的浏览器对动画进行测试，以找到最佳的设置。 不要制作大型位图的动画。制作大型图像的动画会导致动画速度减慢。相反，应创建合成图像，并移动图像中较小的部分。例如，可以通过仅制作汽车轮胎的动画来显示汽车的运动。 创建简单的动画。不要创建对当前浏览器要求过高的动画。即使在系统或 Internet 性能降低时，浏览器始终会播放时间轴动画中的每一帧。多个时间轴： 1.若要新建时间轴，请选择“修改”>“时间轴”>“添加时间轴”。 2.若要删除选定的时间轴，请选择“修改”>“时间轴”>“删除时间轴”。这将永久删除选定时间轴中的所有动画。 3.若要重命名选定时间轴，请选择“修改”>“时间轴”>“重命名时间轴”，或者在“时间轴”面板的“时间轴”弹出式菜单中输入新的名称。 4.若要在“时间轴”面板中查看另一个时间轴，请从“时间轴”面板的“时间轴”弹出式菜单中选择一个新的时间轴。拖动轨迹来创建时间轴： 1.选择一个层。 2.将该层移至它在动画开始时应处于的位置。 确保您已选定该层；如果插入点位于该层中，则说明尚未选定该层。若要选择一个层，请单击层标记或层的选择柄，或者使用“层”面板。3.选择“修改”>“时间轴”>“记录层的轨迹”。4.在页面上拖动层以创建轨迹。 5.当到达动画应停止的点时释放该层。 Dreamweaver在时间轴上添加一个动画条，其中包含适当数量的关键帧。6.在“时间轴”面板中，单击“倒带”按钮；然后按住“播放”按钮预览动画。 第9单元行为1、2、3、教学目的：行为概述，自带的行为使用 教学重点：行为的使用 课堂教学 行为基础 在网页制作中，几乎所有的特效都是通过编写脚本语言来实现的。通常应用较多的脚本语言有两种：VBScript和JavaScript。其中JavaScript因为其简单易用和众多的支持者而在网页制作者中最为广泛流行。 在我们设计网页的时候，接受事件和响应事件的对象一般就是我们在前面章节中介绍的页面元素或浏览器本身。在HTML语言中，这些页面元素是用“Tag”（HTML标记）来表示的，下面列出了我们在这一章中可能用到的HTML标记： 第二篇：DreamWeaver教案
第三篇：Dreamweaver教案
第四篇：DREAMWEAVER电子教案
改变字体样式 改变字号 标签以选择整个表格。
定义图像；