第一篇：Dreamweaver总教学指南
第3章
网页布局（8学时）
[学习目标] 理解表格与层的概念及特点 掌握表格的创建与编辑
掌握表格与单元格的属性设置
掌握通过表格进行网页页面布局的方法 掌握层的创建、编辑 掌握层属性的设置 时间轴的基本操作 [重点和难点] ·重点 表格和层的布局
·难点 表格的嵌套，时间轴的使用 [教学建议] 教师使用多媒体投影演示制作过程，学生上机操作完成实例与实训。[内容检核]
基本概念：表格、单元格、嵌套表格、层。
表格基本的操作：表格的插入、选择、删除；行、列的插入与删除。
表格、单元格属性的设置：单元格的折分、合并；边框颜色、背景图像、背景颜色的设置；行高、列宽的设置；对齐方式的设置。
使用表格布局：布局模式的切换，布局表格、布局单元格的使用。
布局表格、布局单元格属性的设置：高度、宽度的设置；填充、间距的设置；对齐的设置。
层的基本操作：层的插入、选择、排列、删除。
层的属性：层的显示与隐藏，层的命名，层的位置、大小的设置；层溢出的设置；层的背景图像、背景颜色的设置。
层与表格的相互转换：将层转换为表格；将表格转换为层。时间轴的使用：移动路径的设置。
第5章
框
架（4学时）
[学习目标] 了解使用框架的优缺点
掌握框架网页在创建、选择、设置、存储方面的特点 掌握框架和框架集的创建 掌握框架结构网页的制作 掌握嵌入式框架的使用 [重点和难点] ·重点 框架结构网页的制作 ·难点 嵌入式框架 [教学建议] 教师使用多媒体投影演示制作过程，学生上机操作完成实例与实训。[内容检核]
基本概念：框架、框架集。
框架和框架集的基本操作：创建、选择、删除。
框架集属性的设置：框架边框的设置，高度、宽度的设置。
框架属性的设置：框架网页的链接，滚动条的设置，框架边框的设置。嵌入式框架：嵌入式框架的插入、删除，属性的设置。
第五章 超链接
[学习目标] ·知识目标：掌握超链接基础知识以及超链接的创建、设置、更改方法。
·能力目标：能运用超链接知识，创建文本链接、锚点链接、电子邮件链接、图像映射。[重点和难点]
·重点：文本链接和图片链接的创建方法。·难点：创建映射图像链接的方法。[教学建议] 讲授、多媒体演示及观看声像资料等。[内容检核]
·超级链接：是指站点内不同网页之间、站点与Web之间的链接关系，它可以使站点内的网页成为有机的整体，还能够使不同站点之间建立联系。超级链接由两部分组成：链接载体和链接目标。
·超链接元素：文本、图像、图像热区、动画等
·链接目标：可以是任意网络资源，如：页面、图像、声音、程序、其他网站、Email甚至是页面中的某个位置--锚点。·超链接的类型：
内部链接：同一网站文档之间的链接。
外部链接：不同网站文档之间的链接。
锚点链接：同一网页或不同网页中指定位置的链接。
E-mail链接：发送电子邮件的链接。·超链接路径
（1）绝对路径，为文件提供完全的路径，包括适用的协议，例如http、ftp，rtsp等。
（2）相对路径，相对路径最适合网站的内部链接。如果链接到同一目录下，则只需要输入要链接文件的名称。要链接到下一级目录中的文件，只需要输入目录名。然后输入“/“，再输入文件名。如链接到上一级目录中的文件，则先输入”../“再输入目录名，文件名。
（3）根路径：是指从站点根文件夹到被链接文档经由的路径，以前斜杠开头。·创建外部链接的方法：
（1）直接输入地址：选中要加超链接元素，在属性面板中，“链接”文本框直接输入外部绝对地址。
（2）使用超级链接对话框：选中要加超链接元素,单击常用快捷栏中的“超级链接”按钮。输入“文本”、“链接”、“目标”、“标题”等信息。·创建内部链接的方法：
在文档窗口选中文字，单击属性面板“链接”后的按钮，弹出“选择文件”对话框，按钮到选择要链接到的网页文件，即可链接到这个网页。我们也可以拖动“链接”后的站点面板上的相应网页文件，则链接将指向这个网页文件。此外，我们还可以直接将相对地址输入到“链接”文本框里来链接一个页面。
·创建E-mail链接：单击常用快捷栏中的“电子邮件链接”按钮，弹出“电子邮件链接”对话框，在对话框的文本框那输入要链接的文本，然后在E-mail文本框内输入邮箱地址。
·创建其他超链接： 1）空链接
有时候我们需要一种超链接的样式效果，但不需要其链接跳转到任何其他页面或站点。此时，空链接无疑是非常适合的。空链接指向的被链接文件是文件本身，操作方法是在“属性”面板“链接”文本框中直接输入“#”即可。
2）下拉菜单链接
多个超链接使用一个下拉的菜单包括，单击显示菜单选择其中的链接文本即可打开对应的超链接，多应用在超链接较多、超链接分类的页面中。
3）框架网页链接
主要应用在框架结构的网页中，在效果方面的显示是这样的：一个页面，在某块区域为页面的链接导航，某块区域为内容的显示，单击不同的超链接，该区域显示不同的信息内容。图像地图映射概念 ·图像映射：就是将一幅图像分成若干区域，并且每个区域都有自己的链接。图像映射可用于地图，导航等应用中。·使用绘图工具：
从插入栏中选择“绘制矩形热点”选项，单击要映像的区域的一角，然后沿对角线拖动鼠标绘制出一个矩形，释放鼠标，则会显示出指定区域。最后在“属性”面板中设置链接、目标和替换文本框。
按照以上步骤，在插入栏中选择“绘制椭圆热点”或“绘制多边形热点”选项，可以使用椭圆热点工具或多边形热点工具绘制热点区域。·修改热点区域：
每个热点区域边框上都有控点，可用来改变热点的大小及形状。移动修改各控点之前，应先选中“属性”面板中的指针热点工具。
矩形图形有四个控点，位于图形的四个角上。拖曳任意一个控点可以改变图形大小及形状。拖动时按住Shift键，将保持矩形为正方形。
椭圆形热点也有四个控点，拖曳任意一个控点都可以缩小或放大圆形的直径。例如，如果拖住圆形顶部的控点向上移动，圆形将往上扩展。
每一个多边形热点的角上都有一个控点，单击某个控点将其拖至新的位置，多边形的形状也会随之变化。
第九章 表单
[学习目标] ·知识目标：了解表单基础知识，掌握表单元素以及各元素的属性，并进行表单验证。·能力目标：能运用表单知识，制作留言板、调查表等综合表单页面，并通过Spry表单验证功能对表单信息进行验证。[重点和难点]
·重点：利用表单元素创建表单。·难点：Spry表单验证 [教学建议] 讲授、多媒体演示及观看声像资料等。[内容检核] ·表单概念
表单由一个或多个输入框、单选按钮、复选框、下拉菜单和图像按钮等组成，一个文档中可以包含多个表单，而且在每个表单中可以放置通常的主体内容，包括文字和图像在内。文字可以为用户提供表单元素标记以及各种提示和指示，告诉他们该如何填写表单，非常有用。与表格不同的是，虽然一个页面上可以有多个表单，但是用户不能嵌套表单。·表单的工作过程
1、访问者在浏览有表单的网页时，填写信息然后按下“提交”按钮。
2、这些信息通过Internet传送到服务器上。
3、服务器上专门的程序对这些数据进行处理，如果有错误会返回错误信息，并要求纠正错误。
4、当数据完整无误后，服务器反馈一个输入完成信息。
表单的开发分成两个部分，一是具体在网页上制作必须的表单项目，即前端，主要是在Dreamweaver中制作完成；另一部分是编制如何处理这些信息的程序，称为后端，主要是用具体的解释或编译程序制作。·表单元素：
1.表单：在文档中定义一个表单区域。
：可以输入任意文本，包括字母、数字、其他字符。该类型又分为单2.文本字段行文本框、多行文本框和密码文本框（可在“属性”面板中设置）。3.隐藏域4.文本区域5.复选框6.单选按钮7.单选按钮组8.列表/菜单：用于保存某些在网页中需连续传递的信息。
：可以任意输入多行文本，包括字母、数字、其他字符。：提供多个选项，即在一组选项中可同时选择多个项。：提供多个选项，即在一组选项中可同时选择多个项。：一次可以选择一组（多个）单选项。
：“列表”是普通列表框，供用户在列表框中选择一项或多项；“菜单”为菜单列表框，如果用户希望选择其中一项后能够打开指定的网页，则必须与跳转的菜单结合使用。9.跳转菜单：可以实现在页面中插入一个菜单列表框，并将菜单中的每一项链接到指定的网页。当选择某项后，浏览器即打开该项链接的网页。10.图像域11.文件域12.按钮：可以使用图片替代提交按钮的作用。：上载文件时使用。
：接受鼠标单击并执行指定的任务。该类型又分为提交表单按钮、普通按钮和重置表单按钮。13.标签14.字段集·表单元素的属性
·Spry 验证文本域：用于在站点访问者输入文本时显示文本的状态是有效或无效。·Spry验证文本区域：是在当用户输入文本信息时显示文本的状态是否有效。例如当文本区域选择必填域时，如果用户没有输入任何文本，则将返回一条提示消息要求用户必须输入内容。
·Spry验证复选框：可以验证表单中的一个或一组复选框，当用户选择或没有选择复选框时会显示其状态有否有效。例如在向表单中添加验证复选框进，要求表单一次进行2项选择，如果用户选择没有选择2项，则会返回一条提示消息，说明不符合最小选择数要求。
·Spry验证选择：用于下拉菜单，其功能是当用户选择菜单时会判断其状态是否有效。：使用标签来定义表单控制间的关系。：将一群表单元素形成一个组。
第十章 模板与库
[学习目标] ·知识目标 了解模板与库的基本概念及作用，掌握模板与创建的方法应用。
·能力目标 能制作模板和将模板应用到页面；能创建库项目和使用库项目制作和更新页面。[重点和难点]
·重点 模板与库项目的创建以及应用。
·难点 熟练应用模板和库项目制作网页。
[教学建议] 以任务驱动为主，操作演示及观看声像资料等为辅。
[教学内容]
·模板的创建：模板的创建方法以及模板可编辑区的定义；
删除可编辑区域；模板与页面文档分离。·模板的应用：如何将模板应用到页面的方法。·库项目的创建：库项目创建的基本操作方法。·库项目的应用：如何利用库项目来制作和更新页面； 使用库项目更新文件；库项目和源文件分离。·利用模板创建页面：利用模板创建页面的过程。
第十一章 综合实例
[学习目标] ·知识目标 了解网站创建的一些相关基本知识，掌握创建网站的一般过程。
·能力目标 能制独自完成网站创建的前期规划，特别是网站定位、网站的结构、页面的布局设计；能熟练制作网页；能完成网站本地和远程测试；能将网站上传到服务器。
[重点和难点]
·重点 网站本地和远程测试；网站上传到服务器。
·难点 网站创建的前期规划。
[教学建议] 以任务驱动为主，操作演示及观看声像资料等为辅。
[教学内容]
·网站创建的前期规划：理解前期规划的意义；创建网站的一般过程。
·网页制作：熟练页面制作的方法。·网站本地和远程测试：使用DW CS3进行网站在本地以及远程测试的基本方法。·网站上传到服务器：①使用DW CS3内部上传功能将网站上传到服务器的基本操作方法。②使用CuteFTP软件来发布网站。
第二篇：Dreamweaver 8.0实例教学
Dreamweaver mx2004 实例教学（实例1--实例10）
实例1 站点的建立
了解和掌握怎么建一个网站,这是做网站的第一步,因此必须掌握。
要对Dreammeaver mx2004的工具栏有一定的了解，还要熟悉其的用途。
～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～
创作步骤
（1）启动Dreamweaver mx2004,如图1.1.1所示.图1.1.1 启动后所示的界面
(2)选择菜单栏的站点(S)→站点管理(M)命令,打开对话框,如图1.1.2所示.图1.1.2 “站点管理”对话框
(3)单击”站点管理”对话框的 新建(N)出现”站点(S)和FTP与RDS服务器(F)”,选择其中的”站点(S)”出现对话框,如图1.1.3所示.图1.1.3 “站点定义1”对话框
(4)在文本框里可以为你的站点起个名字,然后按 下一步 出现对话框,如图1.1.4所示.1.1.4
“定义站点2”对话框
(5)在对话框中,根据自己所做的网站选择”否”或者”是”.如果你做的是静态网页,那么就可以选择”否”,如果你做的是动态网页,那你就要选择”是”,然后在下拉菜单中选择你所用的服务器技术类型.我做的是静态网页,因此我选择”否”,然后再按 下一步 出现对话框,如图1.1.5所示.图1.1.5
“站点定义3”对话框
(6)选择系统推荐的选项,在文本框里可以填入你所建网站的保存路径,也可以不变系统默认的路径,然后按 下一步 出现对话框,如图1.1.6所示.1.1.6
“站点定义4”对话框
(7)根据你自己的实际情况,如果你想下传到某服务器上的话,那你就从下拉菜单中选择你所用的上传方法,如果不想上传的话,就选择”无”,然后再按 下一步 ,出现对话框,如图1.1.7所示,按 完成 ,出现图1.1.8所示,再按 完成 这就完成了建一个站点的过程.1.1.7
“站点定义5”对话框
图1.1.8
“站点定义6”对话框
实例2 布局表格
学会制作表格,能熟悉掌握表格的作用,在大部分网页都运用到了表格,它是做网页不可缺少技术,也要熟悉掌握.最终效果如图:.现的主要应用布局表格和布局单元表格来制表格,同时在表格中插入图片和添加文本,或者flash等等,最终实现你所想的效果.～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～
绘创作步骤
(1)启动Dreamweaver mx 2004 软件.(2)选择 文件 → 新建(N)…
Ctrl+N 命令,打开 新建文档 对话框,如图1.2.1所示,单击 创建(R)按钮,创建一个空白HTML文档,如图1.2.2
图1.2.1
“新建文档”对话框
图1.2.2 新建空白HTML文档
(3)选择菜单栏的 修改 → 页面属性(P)…
Ctrl+J 命令,弹出 页面属性 对话框,如图1.2.3所示,在 标题(T): 栏中输入文字作为标题,如现在输入”布局表格”,再按 确定 ,返回主界面.图1.2.3
“页面属性”对话框(4)单击工具栏的按钮,切换到”布局视图”工作界面,如图1.2.4所示.图1.2.4
“布局视图”工作界面
(5)单击在工具栏上的布局表格按钮,在页面中拖曳鼠标绘制一个布局表格,如图1.2.5所示.还可以根据你的需要来调整表格的大小.图1.2.5
绘制布局表格
(5)单击工具栏上的绘制布局单元格按钮,在需要添加布局单元格的位置拖曳鼠标,绘制布局单元格,如图1.2.6所示.1.2.6
绘制布局单元格
(6)重复第(4)和(5)步的操作,绘制其它布局表格和布局单元格,如图1.2.7所示.图1.2.7
绘制其它单元格
(7)在布局单元格添加文本和图像,如图1.2.8所示.图1.2.8
表格添加内容
(8)选择 文件(F)→ 另存为(A)…
Ctrl+Shift+S 命令,保存文件.按快捷键F12,观看在浏览器中的效果,如图1.2.9所示.1.2.9 浏览器中的效果
实例3 层的运用
学会使用层的技术,虽然现在的大部分的网页是没有用到层,但要制作一些比较特别的网页时,用层比用表格简单得多.本例要用到层的技术,建层,改变层的属性等,制作一些布局比较简单的网页.～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～
创作步骤
(1)启动Dreamweaver MX 软件.按上例创建一个名为”层的运用”的网页,如图1.3.1所示.图1.3.1 “层的运用”网页的建立
(3)选择插入(I)→布局对象→层(Y)命令,插入一个层,如图1.3.2所示.1.3.2 层的建立
(4)点击层的里面便可对层的内容进行编辑,你可插入图片也可插入文字,现在就来插入图片,选择插入(I)→图像(I)…
Ctrl + Alt +I打开对话框,如图1.3.3所示
图1.3.3
“打开”的对话框
(4)选择你所定好的图片,然后再按确定,再调整图的大上和层的位置,最后可得效果如图1.3.4所示.图1.3.4 插入图片
(5)重复步骤3再插入一个层,输入文字在层里,根据你的需要移动和调整层的位置大小,也可以在”属性”修改层,最后效果如图1.3.5所示.图 1.3.5 最终效果
(6)选择 文件(F)→ 另存为(A)…
Ctrl+Shift+S 命令,保存文件.按快捷键F12,观看在浏览器中 ,如图1.3.6所示
图1.3.6 在浏览器中的效果 显示隐实藏图层
制作显示隐藏图层的效果,使网页具有动态效果.如右图.本例主要应用”显示隐藏图层”命令.单击”显示”按钮,页面中显示所有的图层,单击”隐藏”按钮,隐藏所有的图层.～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～
创作步骤
(1)启动Dreamweaver MX 软件.(2)按上例创建一个名为”显示隐藏图层”的网页,如图1.4.1所示.图1.4.1 “显示隐藏图层”网页的建立
(3)在网页使用布局表格技术建立表格,如1.4.2所示.(4)单击第一个单元表格内,单击插入(I)→布局对象(Y)→层(Y)命令,调整层的大小刚好等于 ,单击层里面,选择插入(I)→图像(I)…
Ctrl +Alt +I 命令,出现对话 如图1.4.3所示,选择图像按..(5)单击第二个单元表格,按步骤4,插入层和图像,并在第三和第四个单元表格内分别写上”显示”和”隐藏”.最后效果如图1.4.4所示.图1.4.2 建立表格的网页
图 1.4.3 “打开”对话框
(6)选择第三单元表格里的”显示”,单击窗口(W)→行为(E)…
Shift + F3,打开行为面板,如图1.4.5所示
(7)单击”添加行为”按钮,在弹出的下拉菜单中选择显示-隐藏层命令,打开显示隐藏层对话框,如图1.4.6所示.(8)选中所有图层,单击按钮,为所有层添加显示行为,如图1.4.7所示,单击按钮,关闭显示-隐藏层对话框.单击面板中的”下拉箭头”按钮,在弹出的下拉菜单中选择onClick选项,如图1.4.8所示.(10)重复6~9步的操作,选中第四单元表格里的”隐藏”,为那二层(即那二张图像)添加隐藏图层及相应触发事件,如图1.4.9.所示.1.4.4
插入图像的网页
图
1.4.5 行为面板
图1.4.6 “显示-隐藏层”对话框
图
图1.4.7 设置显示层行为
图1.4.8 设置触发事件
图1.4.9设置隐藏层行为
(11)选择 文件(F)→ 另存为(A)…
Ctrl+Shift+S 命令,保存文件.按快捷键F12,观看在浏览器中的效果,如图1.4..10和1.4.11所示
图1.4.10 单击”显示”的效果
图1.4.11 单击”隐藏的效果
实例5 插入背景音乐
使网页更加活泼生动.如右图所示.本例主要让你了解本软件的基本功能,习怎么在网页中添加音乐.～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～
学创作步骤
(1)启动Dreamweaver MX 软件.(2)按上例创建一个名为”背景音乐”的网页,如图1.5.1所示.图1.5.1 “背景音乐”网页的建立
(3)按上例在网页中插入图像居中,再插入一个层,并在层里输入文字”让我唱支歌!”调整层的 大小和位置.如图1.5.2所示.(4)按上例单击窗口(W)→行为(E)…
Shift + F3,打开行为面板.(5)单击”添加行为”按钮,在弹出的下拉菜单中选择播放声音命令,打开播放声音对话框,如图1.5.3所示.单击播放声音文本框后的图1.5.4所示)单击按钮.按钮,在弹出选择文件对话框中选中一个音乐文件(见
图1.5.2 插入图像和层的效果.图1.5.3 “播放声音”对话框
图1.5.4 “选择文件”对话框
(7)单击所示.面板中的”下拉箭头”按钮,在弹出的下拉菜单中选择onLoad选项,如图1.5.5
选择 文件(F)→ 另存为(A)…
Ctrl+Shift+S 命令,保存文件.按快捷键F12,观看在浏览器中的效果,如图1.5.6所示.图1.5.5 设置触事件
图1.5.6
浏览器中的效果
实例6 插入背景图像
使网页在颜色方面不是那么单调.效果如右图所示.本例主要学习如果把一张图片作为网页的背景图像,使网页更加好看.～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～
创作步骤
(1)启动Dreamweaver MX 软件.(2)按上例创建一个名为”插入背景图像”的网页,如图1.6.1所示.如图1.6.1 ”插入背景图像”网页的建立
(3)在网页中输入文字,并在网页下面的中,改变文字的大小和位置,如图1.6.2所示.(4)在网页空白处按右键,选择页面属性(T)…出现对话框,如图1.6.3所示,(5)单击页面属性对话框中的出现选择文件对话框,如图1.6.4所示.按.(6)选择 文件(F)→ 另存为(A)…
Ctrl+Shift+S 命令,保存文件.按快捷键F12,观看在浏览器中,如图1.6.5所示.图1.6.2 在网页中输入文字
图1.6.3 页面属性的对话框
图1.6.4 选择文件对话框
图1.6.5
在浏览器中的效果
实例7 文本超链接
制作具有超链接的网页.如右图所示.本例学习如何设置超链接,它是制作网站的最基本技术,因为现在的网站可以说没有一个不用到它,因此学会它是非常有必要的.～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～
创作步骤
(1)启动Dreamweaver MX 软件.(2)按上例创建一个名为”超链接”的网页,如图1.7.1所示.图1.7.1 ”超链接”的网页建立
(3)按上例的步骤制作同样的网页,并在诗的下面加多一行字”更多的诗”,效果如图1.7.2所 示.(4)选择最后一行字”更多的字”点击右键,选择创建链接(L)出现选择文件对话框,如图1.7.3所示.然后选择你选定的网页,即当点击文字”更多的诗”时所显示的网页,你应该先做好它.最后按.1.7.2
添加字后的网页
图1.7.3 选择文件的对话框
(5)选择 文件(F)→ 另存为(A)…
Ctrl+Shift+S 命令,保存文件.按快捷键F12,观看在浏览器中的效果,如图1.7.4所示..当你点击”更多的字”时,网页就会转到你所链接的网页.图1.7.4
在浏览器中的效果
实例8 图像热点链接
制作出具有图像链接的网页,即当你点击图像中的某一处时,网页会转到它所链接的网页去,最后如右图所示.本例所用到的技术跟上例差不多,上例是文本的超链接,而本例是图像的一小处的超链接.特别是介绍照片中很多人的其中一个是谁时,就能用到这种技术.～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～
创作步骤
(1)启动Dreamweaver MX 软件.(2)按上例创建一个名为”图像热点链接”的网页,如图1.8.1所示.图1.8.1 ”图像热点链接”的网页的建立
(3)按以上几例所讲到的技术在网页中插入图片,并调整图片的大小和位置,结果如图1.8.2所示.(4)选择图片,点击下面的,鼠标就变成一个”+”,然后在图片中选择区域的大小,如图1.8.3所示.(5)在后面的文本框里填入你要链接的文件或者点击下面右边的,出现 , 如图1.8.4所示,并在后面写上”了解我更多”..图1.8.2 插入图片后的网页
图1.8.3
选择图片的区域
图1.8.4 选择文件对话框
(6)选择 文件(F)→ 另存为(A)…
Ctrl+Shift+S 命令,保存文件.按快捷键F12,观看在浏览器中的效果,如图1.8.5所示..当你鼠标移到刚才你所选的区域时,就会显示”了解我更多”点击它网页就会转到你所链接的网页.图1.8.5 在浏览器中的效果
实例9 弹出信息
制作一些能自动跳出信息的网页.如右图所示.本例主要应用了”添加行为”的技术,跟例5有点相像,也是用到”添加行为”技术.～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～
创作步骤
(1)启动Dreamweaver MX 软件.(2)选择文件(F)→打开(Q)…
Ctrl + 0命令,打开打开对话框(见图1.9.1),选择上例的网 页,如图1.9.2所示.图1.9.1 “打开”对话框
(3)按上例单击窗口(W)→行为(E)…
Shift + F3,打开行为面板.如图1.9.3所示.(4)单击”添加行为”按钮,在弹出的下拉菜单中选择 弹出信息命令,打开弹出信息对话框 并文本框里写入”欢迎光临本站”.按确定退出.如图1.9.4所示
(5)选择 文件(F)→ 另存为(A)…
Ctrl+Shift+S 命令,保存文件.按快捷键F12,观看在浏览器中的效果,如图1.9.5所示.图1.9.3 “行为”面板
图1.9.2 打开上例的网页
图1.9.4 “弹出信息”对话框
图1.9.5 在浏览器中的效果
实例10 自动跳转链接
制作”自动跳转链接”效果的网页.本例主要实现网站首先自动跳转功能,当用户浏览网页时,系统会自动进入新的网址.～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～
创作步骤
(1)启动Dreamweaver MX 软件.(2)选择文件(F)→打开(Q)…
Ctrl + 0命令,打开打开对话框(见图1.10.1),选择例8的网 页,如图1.10.2所示.图1.10.1 “打开”对话框
(3)单击文档窗口左下角标签栏中的
标签,选择窗口(W)→行为(E)…Shift + F3命令,打开行为面板,如图1.10.3所示.(4)单击”添加行为”按钮,在弹出的下拉菜单中选择 转到URL命令,打开转到URL对话框,并在URL后面的文本里输入一个网站如www.xiexiebang.com,如图1.10.4所示.单击确定.(5)单击行为面板中的”下拉箭头”按钮,在弹出的下拉菜单中选择onload项,即设置触发事件为当用户浏览系统自动进入相应的网址,如图1.10.5所示,(6)选择 文件(F)→ 另存为(A)…
Ctrl+Shift+S 命令,保存文件.按快捷键F12,观看在浏览器中的效果,如图1.10.6所示.图1.10.3 行为面板
1.10.2 打开例8的网页
图图1.10.5 设置触发事件
1.10.4 “转到
URL”对话框
图
1.10.6 在浏览器中的效
第十三课 Dreamweaver MX2004 实例教学（实例21--实例30）实例21 页面配色方案...................................................................40 实例22 CSS的使用........................................................................44 实例23 自动格式化表格...............................................................48 实例24 使用表格间隔图像...........................................................52 实例25 单元格自动延伸...............................................................55 实例26 炽热文字...........................................................................58 实例27 显示当前日期...................................................................61 实例28 显示登陆时间...................................................................64 实例29 状态栏中跳动的文字.......................................................67 实例30 左右移动的图片..............................错误！未定义书签。
实例21 页面配色方案
制作”页面配色方案.如右图所.”设定配色方案”命令来改变网页背景颜色以及文本链接的颜色.～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～
创作步骤
(1)启动Dreamweaver MX 软件.(2)新建一个名为”页面配色方案”的网页,如图1.21.1所示.图1.21.1
”页面配色方案”的网页
(3)按以上所讲的知识,在网页中手稿表格,并在表格中插入图片和文字,如图1.21.2所示(4)选择命令(C)→设置配色方案(T)…命令,打开设置配色方案对话框,如图1.21.3所示.(5)在对话框的列表框中选择适当的颜色,在列表框中选择指定的配色方案,如图1.21.4所示,(6)选择 文件(F)→ 另存为(A)…
Ctrl+Shift+S 命令,保存文件.按快捷键F12,观看在浏览器中的效果.如图1.21.5所示.图1.21.2
插入表格
图1.21.3 “设置配色方案”对话框
图1.21.4 选择适当的配色方案
图1.21.5
观看在浏览器中的效果
实例22 CSS的使用
制作”CSS的使用”效果.如右图所示．
本例主要学习如何使用CSS,CSS在很多网页中都有使用,因为有了它,制作网页就更加方便简单.～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～
创作步骤
(1)启动Dreamweaver MX 软件.(2)新建一个名为”CSS的使用”的网页,如图1.22.1所示.图1.22.1
”CSS的使用”的网页建立
(3)插入一个有二行二列的表格,调整表格的大小和位置,并在每个单元表格内写入一首诗,如 图1.22.2所示.提示:由于每首诗的字体和位置都没有调整好,还有每个单元表格的背景也没有设置好,如果一个一个单元表格轮着来调整的话,那就很浪费时间,因此使用了CSS,它就一个模板直接套在每个单元表格就可以了.(4)在表格中按右键选择CSS样式(C)→新建(N)…弹出对话框,如图1.22.3所示.图122.2
表格和文字的插入
图1.22.3
“新建CSS样式”对话框
(5)在“新建CSS样式”对话框的后面输入”gushi”作为名称,其它不用改变.按确定,弹出 保存对话框,如图1.22.4所示.(6)在对话框中,输入gushi作为文件名,按确定.弹出CSS样式定义对话框,如图1.22.5所示.(7)在的列表框中,选择设置的分类,然后在右边的中设置想要的效果,现在把那些诗设置字体为隶书,大小为18号,居中,表格背景为灰色.按确定.(8)在网页中右击一个单元表格,选择样式(C)→gushi,那表格里的文字格式就变成刚才你设置的格式了,如图1.22.6所示.把其它的单元表格也应用到CSS,这样就轻易把全部都变成了自己设置的格式了.(9)选择 文件(F)→ 另存为(A)…
Ctrl+Shift+S 命令,保存文件.按快捷键F12,观看在浏览器中的效果.如图1.22.7所示.图1.22.4 保存对话框
图1.22.5
CSS样式定义对话框
1.22.6
应用了CSS(gushi)的效果
图1.22.7
观看在浏览器中的效果
实例23 自动格式化表格
制作”自动格式化表格”效果.如右图所示
本例主要应用”格式化表格”命令,学习如何应用.～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～
创作步骤
(1)启动Dreamweaver MX 软件.(2)选择文件(F)→打开(O)…
Ctrl +O命令,打开打开对话框(见图1.23.1),打开网页”课程表”, 如图1.23.2所示.图1.23.1
“打开”对话框
(3)单击表格边框选中表格,选择命令(C)→格式化表格(F)…命令,打开格式化表格对话框,从格式列表框中选中AltRows:Green&Yellow选项,如图1.23.3所示.(4)单击确定按钮,对选中的表格应用所选样式,如图1.23.4所示.(5)选择 文件(F)→ 另存为(A)…
Ctrl+Shift+S 命令,保存文件.按快捷键F12,观看在浏览器中的效果.如图1.23.5所示.图1.23.2所示
打开”课程表
1.23.3
“格式化表格”对话框
图1.23.4 自动格式化表格
第三篇：dreamweaver习题
（习题包括判断题和选择题以及实验题）单元1习题：（1）判断题
1、Dreamweaver 是美国Macromedia公司开发的集网页制作与管理网站于一身的网页编辑器和开发工具。√
2、一个WEB站点至少需要一个主页（home Page），可以有其他子页（二级页面等）。√
3、网页的交互是指浏览者单击栏目、超级链接等，以及鼠标经过或放于某处时，页面会作出相应的反应。√
4、网页是指采用超文本标记语言编写的，可以在浏览器下浏览的一种文档。√ 单元2习题：(1)判断题：
1、一个超级链接链接的地址为：this.html#x11，其中x11是this.html页中的某个锚点。√
2、Dreamweaver 支持在网页中插入各种图像，简单的方法是选择Insert（插入）菜单的中的image(图像)子菜单项。√
3、×
4、采用目录与锚点结合的办法，可以实现在长的网页文档内若某网页背景颜色设置为FFFFF，则背景的颜色为黑色。部跳转的功能。√
5、在网页设计过程中，有时需要将几个单元格进行合并，一般在Dreamweaver中操作方法是，拖动鼠标，将需要合并的单元格选中，然后点击属性工具栏中的“合并单元格”。√
6、选中表格后，Dreamweaver 中即可显示表格属性，即可对表格的对齐方式、高度、宽度，边框样式等进行设置。√7、8、在Dreamweaver中，非连续的单元格也可直接合并。× 对于框架网页的保存方法是，若要保存所有框架页，则在菜单项里选择“file(文件)”菜单下的“save(保存）”即可。×
9、一幅图像在网页中是作为一个独立的对象插入的，但是如果情况需要，则可以一幅图象中设置多个“对象点”完成特定的功能，这个就是图像热点。√
10、若需要对文件进行超级链接设定，只需选中文字，鼠标右键打开属性中在Link（链接）项中输入需要链接的URL即可。√
(2)不定项选择题：
1、在网页中录入文档的方法有： abc A)直接录入法。
B）从已有的文档中通过剪贴板复制剪切粘贴的方法。
C）修改录入的文档的方法。D）以上均不正确
2、关于Dreamweaver的操作界面，下列说法正确的是：abd A)工具箱包含了常用的工具，制作网页时用到这些工具。B)对象属性浮动工具栏，对网页制作时选择的对象相适应，用来设置对象的属性。C)状态栏，是表示出被编辑网页的效果。
D)状态栏，是表示出被编辑网页中正在被编辑的标记名。
(3)实验习题1：创建网站与网页布局
一.创建一个个人网站
1.创建一个本地站点，存放在E盘或F盘上；文件夹名用自己姓名拼音缩写。在该文件夹下创建一个图象文件夹(如Images)，用于存放图形文件。
2.创建一个远程站点，存放在C:Inetpubwwwroot文件夹下，自己新建一个用于存放自己网站的文件夹，文件夹名mysite
二.制作网页，使用表格设计网页布局
3.在站点根文件夹下创建一个新文件，命名为default.htm,该页为主页，在标题栏输入网页标题(某某的网站)
4.新建 3-4 个网页文件，网页内容自定。
5.建立default.htm页与其它网页的链接
实验习题2：文本与图像制作 顶部
一.网页文字制作
1.建立文章网页，内容自己设计，进行文本的输入。在段落结尾处使用段落标记
(直接按回车键)；在换行处使用换行符
(Shift+回车键)。
2.对当前网页中的文本设置字体、字号(在使用不属于系统基本字体时使用后备字体)
3.对当前网页中的文本设置颜色
4.对当前网页中的文本标题设置居中对齐
5.对当前网页中的文本进行缩进
6.对当前网页中的文本进行项目列表或与编号列表
二.在网页中进行图像的插入与处理
1.建立图象网页，插入图片
2.自己设置各种图片属性。可使用fireworks处理图象(如重新设置图像大小、剪裁、改变亮度、优化等)。
3.自选大小相同的图片，创建轮换图象。并建立与本站点网页的链接
4.插入一张图片，创建图象地图，并建立与本网站文件的链接
5.制作网站像册，制作缩略图到原图的链接。
实验习题3：超链接制作 顶部
1.新建一个网页，创建以下各种超链接。选择目标在新窗口打开
链接至网站
链接至当前站点网页文件
链接至图片文件
链接至word文档
链接至flash动画
链接至mp3声音文件
链接至应用程序文件
缩略图至大图的链接
2.制作文章网页，在各节开头处建立锚点；对各节标题建立至锚点的链接；在各节处建立返回到网页项部的锚点链接
3.在网页上建立一个信箱，创建给自己发送电子邮件的超链接。
4.制作一个推荐网站的跳转菜单，加入各网站的URL地址 单元3习题（1）判断题：
1、在制作网页显示时，若有一些网页，他们有共同的标题、共同的目录格式，只是某些内容部分不太相同，这时，可以应用框架网页来加快网页的显示速度，避免重复载入页面。√
2、WEB站点是指一系列可以通过Internet 浏览器浏览的，具有相互超级链接的多媒体文档的集合以及完成这些文档的存放、查找、搜索、发布的物理设备和其他相关软硬件系统的集合√
3、在制作框架网页时，如果需要保存所有框架网页，则只需要选择文件菜单中的SAVE即可保存所有框架网页。×（2）不定项选择题：
1下列不属于站点管理器的功能的是：ab E)可以实现快速超级链接。
B）可以自动纠正超级链接的更改。
C）可以自动发布制作好的网页。D）可以自动升级网站的WEB服务。
2在框架式网页中添加超级链接时，如果对象的“target(目标框架)”属性为以下时，则可以新窗口打开链接页。abd F)_blank
B）_parent
C）_self
D）_top
E）main
（3）实验习题：使用表格进行网页布局
1.新建一个网页，根据网页布局要求插入一个表格，行列数自定，宽度为780象素，边框为0
2.对以上建立的表格进行单元格合并或拆分；对表格行宽和列高进行适当调整； 对表格进行插入行或列的操作
3.对建立的表格的单元格中插入嵌套表格
4.对表格或单元格设置自选背景图象
5.在以上建立的表格中插入图象与文字；设置对各单元格水平居中对齐，垂直顶端对齐；设置单元格为“不换行 单元4习题（1）判断题：
1、作为网页定位技术的表格与层，相对来说表格更为通用，因为层需要浏览器的支持，而表格在任何浏览器下都没有问题。√
2、网页中引入层技术，在层中可以插入各种对象，而且各个层可以嵌套、重叠、交盖等，但不是所有的浏览器都支持层技术。√
3、表单网页中，一页表单，至少且只能有一个表单标记，至少有一个提交的按钮。×（2）不定项选择题
3、网页中的若有多层，下列哪个属性决定层的视觉关系。ac A)Z-index
B）Layer
C）Top
D）left
4、Dreamweaver 能实现的关于站点管理的内容有：abcd A)检查站点的超级链接
B）生成站点报告、错误查找和修改。
C）定义站点
D）测试站点
5、在网页中插入水平线，一般可以设置水平线的以下属性abc A)水平线的宽度。B）水平线的颜色。C）水平线的粗细程度。D）水平线的层叠次序。
6、网页中的超级链接可以链接到。abcd A)链接到本网站中的其他网页。
B）链接到本文件中某锚点位置。
C）可以其他站点中的某个位置。
D）可以链接到某网站中的某个文件对象。
7、在Dreamweaver MX 中，站点管理包括五大设置项，下列说法错误的是：bcd A)Local info 设置站点的名称、本地文件夹映射位置，站点在Internet 上的位置等。
B)Remote info 设置站点的远程信息，包括远程服务器的访问方式，帐号、密码等。
C)Design Notes 设置网页设计过程中是还否保持制作的记录等。
D)Quick View 设置站点网页显示效果。E)Site Map Layer 站点地图项，设置站点地图的显示方式等。（3）实验习题
.使用布局视图进行网页布局
1.使用Fireworks设计网页布局，文档大小760*700像素、导入或自己绘制网页所需图形。将各个图形分别导出，存放在自己站点图象文件夹中、将整个网页图象保存做为跟踪图。
2.新建一个网页存盘，修改页面属性，设置跟踪图象(使用Fireworks设计的网页布局图象作为跟踪图象)，透明度为50%
3.进入布局视图，绘制布局表格与布局单元格。
4.根据网页的跟踪图象，对绘制的布局表格与单元格进行调整或移动
5.在布局单元格中插入图象
6.返回标准视图，设置为单元格背景、输入文字等。三.制作框架网页
1.新建一个框架网页(框架类型自选)
2.在各框架内插入内容或打开网页，保存各框架页与框架集
3.设置各框架属性(边框、滚动条等)
4.建立左框架与右框架文章中锚点的链接，要求目标框架为右边的框架
5)建立左边导航条中返回主页的链接，设置目标框架为top 单元5、6习题(1)判断题
1、网页制作中，层的“Z-index”属性表示层的层叠次序，数值大于0表示在页面的上面，数据小于0表示在页面的上面，数值越大就越先看见。×
2、在Dreamweaver里，层与表格之间是可以转换的，但要求层之间不能有重叠多层的情况
3、flash中的导线工具，在真正的层中显示时并不可见。×
4、GIF动画的文件大小相对较大，若用flash 导入后转换为矢量动画就可缩小。√
5、在追求速度为先的网页设计时，可以多用图象，在追求美观为先的网页设计时，可以多用文字。×
6、Dreamweaver模板可以在局部应用，但不能应用于整个站点。×
CSS样式的使用实验习题
一.制作文章页或诗词页，设置页面属性
1)新建或打开网页，设置页面默认字体。
2)设置页面上边距为0、左边距为10。
3)设置页面背景图片
4)设置链接颜色
二.创建自定义的CSS样式
1.创建自定义的CSS样式(存放在CSS样式表文件中)——标题
1、标题2等，使用类型面板设计字体样式，并应用到当前网页中。
2.创建自定义的CSS样式“正文”，字体大小为10点数，字体幼圆；行高为1.8倍行高，并应用到当前网页中。
三.重定义HTML标签
1.修改Body标签,使用背景面板设置背景图象.不重复、固定、自定位置
使用区块面板设置文本对齐为居中。
四.修改CSS样式.1.修改自己所建的标题1模式，使用区块面板设置文本对齐为居中
2.重定义“正文”模式，缩进2个字
3.修改标题模式，使用边框面板设置下边框为双线、颜色自选
五.附加CSS样式表
新建一个网页，附加以上建立的CSS样式表，并应用样式。
六.使用CSS样式中的过滤器
1.新建一个图片网页，使用表格布局后插入图片。
2.新建样式，仅应用该文档，设置Alpha透明度为50%(在扩展面板的滤镜下拉列表框中设置Alpha(Opacity=50)
3.新建一个样式invert，仅应用该文档，(在扩展面板的滤镜下拉列表框中选择invert)
4.建立样式gray，FlipH，Xray，5.对图片后分别设置以上新建的样式后在浏览器中查看效果
第四篇：dreamweaver笔记
弹出菜单
弹出菜单在网页制作中是一种非常常用的菜单方式，这种菜单不但制作简单，而且效果也很
好。
效果说明
本实例所要完成的效果是当鼠标移动到文字上时，就会弹出一个漂亮的菜单，如图 17-1
和图 17-2 所示。
创作思想
本实例首先在网页中输入一行文字，并对文字做一个特殊的超链接，然后利用
Dreamweaver MX 2004 自带的行为制作弹出菜单。
操作步骤
（1）输入文字并设置超链接。在网页中输入文字，因为单独的文本文字是无法添加行为的，按照 Dreamweaver 中的约定，将文字的超链接设置为“ javascript:;”才能够添加行为。所以将文字的超链接设为“ javascript:;”，并执行【显示弹出式菜单】行为，如图 17-3 所示。
（2）设置菜单项和子菜单项，并为菜单设置超链接，然后安排好各个菜单的次序，如图 17-4 所示。
（3）设置页面元素。将菜单设置为垂直菜单，并分别设置菜单的字体、字号、对齐方式、一般状态和鼠标滑过时的状态，如图 17-5 所示。
（4）设置【高级】标签。在【高级】标签选项中设置菜单的延迟时间，以及是否显示菜单边框。然后设置边框的宽度、颜色、阴影、高亮，如图 17-6 所示。
注意：【菜单延迟】中时间的单位是毫秒（ms），1000 毫秒等于 1 秒，在设置时
注意换算。
（5）设置的 x 轴和 y 轴参数。在【位置】标签选项中设置弹出菜单的 x 轴和 y 轴参数，这两个参数表示弹出菜单左上角到网页左上角的距离，如图 17-7 所示。
（6）保存网页文件，然后在浏览器中打开该网页，将鼠标光标移动到文字上方时即可看到有菜单弹出，本实例操作完毕。通过 Dreamweaver，可以快速制作出以往只能用复杂代码才能实现的弹出菜单，这样可以实现复杂菜单的弹出和收缩，方便使用又能让页面美
观、整洁。
滑动折叠菜单
在网页展示平面有限的情况下，折叠菜单是一个很不错的选择。这种菜单在一般情况下是折叠起来的，只有当浏览者将鼠标移动到菜单上时，菜单才会滑动展开。
效果说明
当鼠标不在菜单上时，菜单处于折叠状态，看起来是很普通的一个菜单栏，如图 18-1 所示。当鼠标移动到菜单栏上时，该菜单的子菜单就会慢慢滑动展开，如图 18-2 所示。
创作思想
先在一个图层中输入文字，形成菜单折叠时的状态，再使用图层展开时间轴动画来实现
滑动展开菜单的效果。
操作步骤
（1）新建文件并添加层。新建一个网页文件，在网页中添加一个父层（第一级的层）和一个子层（第二级的层），分别设置两个图层的大小和位置，如图 18-3 所示。
（2）设置表格和文字。在 layer1 层中插入表格，设置好表格的高度和背景，然后在表格内输入文字并设置好文字的格式，如图 18-4 所示。
3）设置 layer2 层。设置 layer2 层的背景颜色，然后在其上输入文本并设置超链接，再将 layer2 层添加到时间轴上，以后便可对 layer2 层进行时间轴动画操作，如图 18-5 所
示。
（4）新建一个时间轴 Timeline2，然后将 layer2 层添加到新的时间轴上，如图 18-6
所示。
提示：不同的时间轴可以实现对不同对象的控制，也可以实现多个不同动画。
（5）设置时间轴。分别对时间轴 Timeline1 的第 1 帧和时间轴 Timeline2 的第 15 帧进行设置（这里以第 15 帧作为动画的最后一帧），如图 18-7 所示。
提示：只需要改变时间轴的关键帧，就可以直接生成动画效果，本例将时间轴 Timeline1 第 1 帧中 Layer2 层的高设置为 0px，这样就生成了层慢慢滑出的动画效果。
（6）添加行为。选择表格中的第一个单元格，然后为单元格添加 onMouseOver（鼠标移到单元格上面时）时的行为到播放时间轴 Timeline1，如图 18-8 所示。
（7）继续添加行为。再为该单元格添加 4 个 onMouseOut（鼠标移开时）行为，参数设
置如图 18-9 所示。
（8）添加 2 个行为。选择 layer2 层，并分别添加两个 onMouseOver 和两个
onMouseOut，具体操作如图 18-10 所示。
（9）保存网页文件，然后在 IE 中进行预览，本实例操作完毕。通过时间轴上不同对象在不同时间的状态，再结合时间轴的播放、停止和跳转是 Dreamweaver 中实现动画效果的最基本方法，读者可以充分利用这些功能来实现更精彩的效果。
全景图浏览效果
是否有见过游戏中的全景图效果，充满动画与真实感，让人难以忘怀。在本例中就介绍如何
制作这样的网页。
效果说明
建立文件，选择一张全景图素材，然后插入少量的代码就可以实现全景图浏览效果，如图 43-1 所示。实际效果请浏览随书光盘中《源文件》目录下的相关文件。
创作思想
打开 Dreamweaver MX 2004 软件新建页面并插入表格，在表格的 HTML 代码中插入
操作步骤
（1）新建一个基本的 html 文件，然后保存页面为“ 43.htm ”。
（2）插入表格。要使全景图在指定的区域中走动，必须先插入表格，如图 43-2 所
示。
提示：图 43-2 中的第五步操作必须将高度设置得与图片一样高。
（3）插入标签。然后在工具栏中单击【标签选择器】图标，打开【标签选择器】对话框，在该对话框中设置参数，插入
提示：标签选择器对话框中汇集了一些常用的标签，如 HTML 标签、CFML 标签、ASP.NET 标签等，通过双击相应的代码标签，就可以很轻松地在代码视图中插入代码。
（4）设置参数。接着设置
（5）再接下来需要在代码视图里手动添加代码。回到代码面板，将光标切换到
（读者可打开【光盘】｜【源文件】｜【实例 43 】｜【 43.1.txt 】文件，直接复制
代码）
提示：
中第三步操作里的 HTML 代码进行调整。
（6）保存文件，完成操作。
全景图合适用于厂房、展厅等大型演示上，因为单一镜头图片不能让用户看到全景，通过全景图则能够让需要展示的大型场景一览无余。
随机播放背景音乐的网页
相信很多人在打开娱乐网站或个人主页时，经常都会听到一些音乐。本例将介绍如何实现在网页上随机播放背景音乐。
效果说明
建立文件，循环插入要播放的音乐，便可制作出动感的背景音乐，而且是随机的。实际效果请浏览随书光盘中【源文件】下的对应文件。
创作思想
打开 Dreamweaver MX 2004 软件新建页面，再选择【行为】面板下的【 + 】选项插播音乐，设置参数。然后重复此操作 4 次，就可以随机播放背景音乐。
操作步骤
（1）打开 Dreamweaver MX 2004 软件新建文件，并保存页面。
（2）选择好“标签”页，在“行为”面板中插入要播放的音乐文件，如图 55-1 所
示。
（3）接着选择插入的声音文件，打开参数窗口，设置其参数，如图 55-2 所示。
（4）重复执行图 55-1 和图 55-2 所示的操作 4 次，这样就添加了 4 种音乐，使得程序可以随机在这四种音乐中挑选其中一首来播放。因此，图 55-1 中所示的第四步操作
要选择不同的音乐文件。
（5）保存文件，完成操作。适当放置轻松的音乐背景，可以让用户感觉更轻松、愉
快。
网页滚动布告栏
如果想要在网页里显示最新信息、新闻、通知、布告等较长的文字信息，而又不想占用太多的网页空间，可以使用滚动报告栏。
滚动报告栏通常是通过利用 Javascript 技术控制网页中的层的滚动来实现的，然而手工编写 Javascript 代码进行制作肯定是比较复杂、困难的事情。使用 Dreamweaver 为用户提供的【 ScrollableArea 】插件可以快速便捷地制作出滚动报告栏。
效果说明
用户可以通过滚动栏上的【向上滚】和【向下滚】两个按钮控制报告栏文字的滚动速度和方向。实际效果请浏览随书光盘中【源文件】下的对应文件。
创作思想
在随书光盘中找到“ ScrollableArea ”插件，然后运行 Macromedia 的插件管理器安装插件。接着打开 Dreamweaver MX 2004, 在【命令】菜单中单击【 dHTML AP Scrollable Area 】选项，就可以开始设计滚动布告栏了。
操作步骤
（1）安装插件。首先在随书光盘中的【源文件】 / 【实例 56 】目录里面找到 Dreamweaver 的“ ScrollableArea.mxp ”插件，接着运行 Macromedia 的插件管理器“ Extension Manager.exe ”，Macromedia 的插件管理器是随 Dreamweaver 自动安装的，通常和 Dreamweaver 安装在同一目录下面的“ Extension Manager ”文件夹里面。
（2）选择插件管理器菜单栏上的【文件】菜单进行操作，如图 56-1 所示。
提示：如果插件文件已经和 Macromedia 的插件管理器建立了文件关连，那么直接双击插件文件就可以自动打开 Macromedia 的插件管理器安装插件了。
（3）单击【安装】按钮后会弹出一个安装协议窗口。单击安装协议窗口上面的【接
受】按钮完成安装。
（4）设置 滚动布告栏。安装完插件后运行 Dreamweaver MX 2004，打开或者新建一个 web 文档，进行如图 56-2、图 56-3 和图 56-4 所示的操作。
（5）经过上面的操作，基本完成了滚动布告栏的制作。在 Dreamweaver 中执行【文件】 / 【在浏览器中预览】 / 【 IE 浏览器】命令或者单击键盘上的 F12 键预览网页时，可能会出现不正常显示的情况，这是由于 ScrollableArea 产生的代码中没有设置图层位置的单位。执行如图 56-5 和图 56-6 所示的操作，即可解决这个问题。
（6）执行完如图 56-6 所示的操作后，在图 56-5 中所示的第 3 步再分别选择【＃ divDownControl 】、【＃ divContainer 】和【＃ divContent 】选项，然后再分别执行如图 56-6 所示的操作。给 4 种样式分别加上【像素】单位后测试网页，就可以看到如图
56-7 所示的滚动公告栏了。
（7）将鼠标光标分别移动到【 Scroll up 】和【 Scroll down 】上面，就可以看
到中间的文字上下滚动了。
Dreamweaver 的插件种类繁多，功能强大。善于发现和使用插件，可以制作出一些
Dreamweaver 本身望尘莫及的效果。
更多实例请阅读《Dreamweaver网
第五篇：Dreamweaver教学大纲
www.xiexiebang.com
Dreamweaver3.0教学大纲
课程名称：边用边学Dreamweaver3.0 总学时：30
授课学时：14
实验学时：16
注：以一讲为一授课学时，实验学时不少于授课学时
使用教材：甘登岱、周水平主编，《边用边学Dreamweaver3.0》，人民邮电出版社，2000 先修课要求：Internet基础，边用边学Fireworks，边用边学Filsh，边用边学Windows 9.x等 教学目的：使学生通过本课程的学习，掌握Dreamweaver3.0的使用方法，学会使用Dreamweaver3.0制作Web网页的技术。
教学内容和教学要求：
第一章 初识Dreamweaver 学习指南：
学习软件的安装、设置过程。学习重点：
Dreamweaver3.0的人—机交互界面的组成与使用方法。学习难点：
理解站点、网站、网页及网页属性的概念。教学要求：
掌握Dreamweaver3.0的使用界面中各组成元素的名称与功能； 掌握打开与关闭工具窗口的方法；
理解站点、网站、网页及网页属性的概念； 了解Driamweaver3.0的汉化方法。
第二章 网页制作入门
学习指南：
要求先修Internet基础课。学习重点：
本章通过一个网页制作示例，比较全面的介绍了Web站点的创建过程，概括的介绍了使用Dreamweaver制作网页的主要方法。学习难点：
理解站点、网站、网页及网页属性的概念； 站点管理器的使用。教学要求：
掌握创建Web站点的基本方法与步骤；
熟悉网页制作过程中所涉及的一些基本概念与常识。
www.xiexiebang.com 第三章 站点管理
学习指南：
先修Internet基础，计算机网络基础。学习重点：
本章重点介绍了站点的创建、站点地图的使用以及文件的下载、上传与同步更新。学习难点：
站点管理器的使用。教学要求：
了解通过站点管理器规划、创建站点的方法与站点设置参数的意义和设置方法；
熟悉站点管理器的用途，学会利用站点地图查看、管理各网页之间的超链接关系；
掌握通过站点管理器发布站点的方法与上传、下载与同步更新站点内容的方法。
第四章 页面的基本设置
学习指南：
先修Internet基础课和Word2000。学习重点：
本章主要介绍制作网页的一些基本常识，例如：文档的创建、打开与保存，标尺与网格的使用，捕捉与辅助设计图片的应用等。
学习难点：
理解属性面板的概念。教学要求：
了解网格、捕捉与辅助设计图片的功能以及打开、关闭与设置其特性的方法； 掌握系统属性及网页属性的设置方法，及各设置参数的作用。
第五章 超链接与导航
学习指南：
先修Internet基础课。学习重点：
本章全面介绍了网页设计中使用的几种超级链接设置的方法与步骤，包括：E-mail,书签，脚本，跳转菜单和导航条的设置方法。学习难点：
理解导航条与跳转菜单 教学要求：
了解建立超级链接各目标参数的意义，掌握设置超级链接的方法； 掌握制作超级链接、E-mail链接、书签等形式的超级链接；
www.xiexiebang.com 掌握导航条与跳转菜单的特点与用法。
第六章 文本格式的设置与样式的运用
学习指南：
先修Internet基础课和Word2000。学习重点：
本章主要介绍手工设置文本格式的方法，文本的断行与缩进，以及如何利用HTML样式和CSS样式格式化文本的方法。学习难点：
使用HTML样式和CSS样式格式化文本 教学要求：
要求重点了解制作网页时的断行方法， 掌握使用HTML样式和CSS样式创建、编辑网页的方法。
第七章 使用水平线、日期对象及图片
学习指南：
先修Internet基础和边用边学Fireworkse等。学习重点：
本章全面介绍了在网页中插入水平线、日期、图片、反转图片的方法，以及如何制作图片映像和设置图形行为。学习难点：
图片的运用。教学要求：
掌握水平线、日期、图象对象的主要属性与设置方法； 掌握图象映像、反转图片对象等的特点、用途及设置方法。
第八章 使用表格
学习指南：
先修Internet基础、Excel2000、Word2000。学习重点：
本章全面介绍了在Dreamweaver中表格的创建、调整、单元格的编辑与属性设置等操作的方法。教学要求：
掌握表格的创建、结构调整与美化方法； 熟悉表格与单元格的主要属性及其设置方法； 掌握通过表格来进行网页页面的布局方法。
www.xiexiebang.com
第九章 使用层来灵活布置网页的布局
学习指南：
先修Internet基础。学习重点：
本章全面介绍了层的概念以及层的创建与修改方法。学习难点：
图层的概念与运用。教学要求：
掌握在网页中创建、修改层和嵌套层的方法； 掌握层的属性和编辑层属性的方法； 掌握移动、删除层的方法。
第十章 使用时间线制作动态网页
学习指南：
先修Internet基础和Flish。学习重点：
本章详细介绍了时间线的创建、编辑、行为设置等内容。学习难点：
时间线和动态网页的概念。教学要求：
掌握时间线的创建与调整方法；
学会通过如何为时间线增加行为等方式来控制时间线的播放效果； 掌握利用时间线制作网页动画的方法。
第十一章 使用框架设计网页
学习指南：
先修Internet基础 学习重点：
本章全面介绍了框架网页的特点、框架网页的创建、编辑、保存与应用方法。学习难点：
制作动态网页。教学要求：
了解框架网页与普通网页之间的区别与联系；
掌握框架网页在创建、选择、设置、存储与应用方面的特点； 掌握框架结构网页的制作方法。
www.xiexiebang.com
第十二章 使用行为制作交互式网页
学习指南：
先修Internet基础。学习重点：
本章介绍了行为、事件、动作的基本概念，以及如何利用行为面板为选定的对象设置行为。
学习难点：
行为的概念。教学要求：
了解行为、事件与动作的概念；
学会利用行为面板设置控制对象的行为；
会利用系统提供的主要行为，设置网页对象的行为从而实现交互式网页的设计。
第十三章 模板和库的使用
学习指南：
先修Internet基础。学习重点：
本章介绍了模板与库元素的特点、用途、制作与使用方法，以及如何利用模板控制面板及库控制面板来管理模板与库元素。学习难点：
模板和库的概念。教学要求：
要求掌握Dreamweaver中模板与库元素的概念与作用； 了解模板的固定区域与可编辑区域的区别和用途；
了解更改模板或库元素对使用选定的模板或包含选定库元素的网页的影响； 学会通过模板和库元素创建网页的方法。
第十四章 在网页中插入表单
学习指南：
先修Internet基础，JavaScrip。学习重点：
本章全面介绍了表单的创造、编码、处理方法，以及各种表单对象的特点与使用方法。
学习难点：
理解表单、表单欲的概念。
www.xiexiebang.com 教学要求：
学会使用Dreamweaver 中应用表单设计网页的方法， 全面掌握表单的创建、编辑、处理方法，以及各表单对象的功能、特点和用途（包括：复选框、下拉列表况、按钮）的特点与使用方法。
第十五章 可以在网页中插入的媒体元素
学习指南：
先修Internet基础、边用边学Fireworks、边用边学Flish。学习重点：
本章简要介绍了可以在网页中插入的媒体元素，如：Fireworks HTML、Java Applet 小程序、Sockwave电影、Flash 电影、ActiveX控件、音频或品视频文件。
学习难点：
理解在网页中插入多媒体对象的概念。教学要求：
要求学员掌握并了解可以在网页中插入Fireworks HTML电影、Flash电影、ActiveX.控件等多媒体对象的方法。
第十六章 站点制作的综合实例
学习指南：
先修Internet基础、边用边学Fireworks、边用边学Flish。学习重点：
本章通过一个站点综合实例的练习，全面介绍了站点创建的全过程。内容包括站点目录结构的规划，各网页的创建、布局以及设置方法。要求学员通过本章的学习，学会制作包含表单的交互式网页的制作，利用Fireworks处理图片、制作按钮与导航拦等网页的创作技巧。学习难点：
理解站点、网站、网页及网页属性的概念会向网页中插入多媒体信息。教学要求：
通过本章的学习全面掌握交互式网站的制作方法。
点击咨询 