DREAMWEAVER教案.docx

1、DREAMWEAVER教案第1章 初识Dreamweaver安装、下载方法.一、教学目的：学习原DR的安装、下载方法.二、教学重点：概述和安装三、教学过程1.1 Dreamweaver MX概述1、直观的新工作区2、更加强大的模板3、广泛的代码库4、新服务器技术5、帮助初学者起步的示例内容6、XML和WEB标准支持7、改进的级联样式表（CSS）8、高性能的新编码功能9、高性能的新编码功能10、优化COLDFUSIONMX开发环境使用 Dreamweaver 工作区一、 教学目的：认识DR的界面，了解各面板的组成，菜单的组成。二、 教学重点：各面板的组成。三、 教学过程：选择工作区布局（仅适用于

2、 Windows） 在 Windows 中首次启动 Dreamweaver 时，会出现一个对话框让选择一种工作区布局。如果以后改变了主意，可以使用“参数选择”对话框切换到一种不同的工作区。选择工作区布局： 选择下列布局之一： Dreamweaver MX 工作区HomeSite/代码编写者样式的 Dreamweaver MX 工作区Dreamweaver 4 工作区 在选择一种工作区后切换到另一种工作区： Dreamweaver MX 工作区 浮动工作区布局（Windows 和 Macintosh） 状态栏 “文档”窗口底部的状态栏提供与正创建的文档有关的其他信息。调整“文档”窗口的大小将“文

3、档”窗口的大小调整为预定义的大小： 向“窗口大小”弹出式菜单中添加新的大小： 将“文档”窗口最大化（仅适用于 Windows 集成工作区）： 使用快速启动条 快速启动条显示在状态栏中，包含用以打开和关闭各种面板、检查器和窗口的按钮。若要显示快速启动条，请在“面板”参数选择中启用“在面板和启动器中显示图标”选项。可以指定在快速启动条中显示哪些项目。使用文档工具栏 “显示代码视图 “显示代码视图和设计视图” “显示设计视图 “标题” “文件管理” “在浏览器中预览/调试”“换行符”在插入点处插入一个换行符。还可以按下 Shift+Enter (Windows) “不换行空格”在插入点处插入一个不换

4、行的空格 ( )。 “左引号”、“右引号”和“破折线”在插入点处插入标点符号。 “英镑符号”、“欧元符号”和“日元符号”在插入点处插入货币符号。 “版权”、“注册商标”和“商标”在插入点处插入相应的符号。 “其它字符”第二单元 文本的编辑与基本操作一、 教学目的：学习网页的组成对象设计要素文本的字体大小颜色，段落的格式，基本的编辑命令。二、 学教重点：文本编辑的基本操作三、 教学过程：网页的组成比报纸和杂志复杂的多，因为它包含图、声、文、动画、控件等多媒体，另一大特点有超级链接。1、 文字标题：一般为图形尺寸系统默认大小样式：一般少用下划线字体：一般为系统默认大小颜色：以颜色来强调文

5、章的重点2、 图形一般为GIF和JPG格式3、 超级链接站内链接和站外链接网页的设计要素不同浏览器的显示效果网络的传输速度屏幕的分辨率颜色的显示网页的基本操作输入文本直接输入使用剪贴板用ENTER相当于插入 用SHIFTENTER 相当于插入改变字体样式改变字号要使字体不随浏览器的字体设置而改变就要用到层叠样式（CSS Style）文本的颜色选择文字然后用下列两种方式用文字属性面板中调整单击调色板中的右上角按钮或菜单文本颜色段 落 格 式创新新段落：ENTER分段落在段落格式下拉菜单选择一种格式对齐段落：居中对齐左对齐右对齐缩进段落项目符号：每个段落前加一个项目符号 列表下拉选择各种不同的情况

6、插入分隔线修改分隔线的属性改变长度改变高度改变对齐方式插入特殊字符和符号 菜单插入特殊字符弹出子菜单，进行所需要的项目选择其中包括：换行符SHIFTRETURN不换行空格CTRELSHIFTSPACE用于行首插入符号Email 地址链接插入电子邮件链接其效果将看到“欢迎联系”字样并带下划线可以发送邮件插入日期时间：插入注释文字基本编辑命令撤销和重复操作查找和替换上机练习，重复上述操作，记录快捷键作业：做一个文字型的小网页，将学到的知识运用在上面。网页中的图像链接教学目的：掌握网页中插入图像、修改属性、插入交互图像以及创建交互图像的方法。教学重点：插入图像、控制图像创建链接、插入交互图像的方法。

7、插入图像操作： 1. 在“文档”窗口中，将插入点放置在您要显示图像的地方，然后执行以下操作之一：o 在“插入”栏的“常用”类别中，单击“图像”图标。o 在“插入”栏的“常用”类别中，将“图像”图标拖入“文档”窗口中（或者，如果您正处理代码，则拖入“代码”视图窗口中）。 o 选择“插入”“图像”。 o 将图像从“资源”面板（“窗口”“资源”）拖到“文档”窗口中的所需位置；然后跳到第 3 步。o 将图像从“站点”面板拖到“文档”窗口中的所需位置；然后跳到第 3 步。o 将图像从桌面拖到“文档”窗口中的所需位置；然后跳到第 3 步。 2. 在出现的对话框中执行下列操作之一：o 选择“文件系统”以选择

8、一个图形文件。o 选择“数据源”以选择一个动态图像源文件。3. 浏览以选择您要插入的图像或内容源文件。如果您正在一个未保存的文档中工作，则 Dreamweaver 生成一个对图像文件的 file:/ 引用。将文档保存到站点中的任何位置后，Dreamweaver 将该引用转换为文档相对路径。 4. 在属性检查器（“窗口”“属性”）中，设置该图像的属性。设置图像属性 1. 设置以下任一选项：o 使用缩略图下面的文本域设置名称，以便在使用 Dreamweaver 行为（例如“交换图像”）或脚本撰写语言（例如 JavaScript 或 VBScript）时可以引用该图像。o “宽”和“高”以像素为单位

9、指定图像的宽度和高度。o “源文件”指定图像的源文件。单击文件夹图标以浏览到源文件，或者键入路径。 “链接”指定图像的超链接。将“指向文件”图标拖到“站点”面板中的某个文件，单击文件夹图标浏览到站点上的某个文档，或手动键入 URL。有关创建链接的信息， “对齐”对齐同一行上的图像和文本。“替代”指定只显示文本的浏览器或已设置为手动下载图像的浏览器中代替图像显示的替代文本。对于使用语音合成器（用于只显示文本的浏览器）的有视觉障碍的用户，将大声读出该文本。在某些浏览器中，当鼠标指针滑过图像时也会显示该文本。 “地图名称”和“热点工具”允许您标注和创建客户端图像地图。 “垂直边距”和“水平边距”沿图

10、像的边缘添加边距（以像素为单位）。“垂直边距”沿图像的顶部和底部添加边距。“水平边距”沿图像左侧和右侧添加边距。 “目标”指定链接的页应当在其中载入的框架或窗口。 _blank，将链接的文件载入一个未命名的新浏览器窗口中。 _parent，将链接的文件载入含有该链接的框架的父框架集或父窗口中。如果含有该链接的框架不是嵌套的，则在浏览器全屏窗口中载入链接的文件。 _self，将链接的文件载入该链接所在的同一框架或窗口中。此目标为默认值，因此通常不需要指定它。 _top，在整个浏览器窗口中载入所链接的文件，因而会删除所有框架。 “边框”是以像素为单位的图像边框的宽度。默认为无边框。 “编辑”启动您

11、在“外部编辑器”参数选择中指定的图像编辑器并打开选定的图像。有关设置外部图像编辑器的信息， “重设大小” Control+代字号 () 表格设计教学目的：学习下列方法 在“标准”视图中创建和修改表格 向表格添加颜色 在“标准”视图中设置相对宽度的表格教学重点：能进行表格设计教学过程：在“标准”视图中创建和修改表格 1. 在 Dreamweaver 中，选择“文件”“新建”。即出现“新建文档”对话框。 2. 在“空文档”列表中，选择“HTML”，然后单击“创建”以创建一个新的 HTML 文档。3. 在“文档”工具栏的“标题”文本域中，输入“表格设计”为文档添加一个标题。4. 选择“文件”“保存”

12、将该文档保存到本地站点文件夹中。将其命名为 tableModify.htm。 插入表格 现在就可以在文档中插入表格了。 1. 在“文档”窗口，将插入点放到文档中，然后执行下列操作之一：o 选择“插入”“表格”。o 在插入栏的“常用”类别中，单击“表格”图标。 出现“插入表格”对话框。2. 在该对话框中，设置下列选项： o 在“行数”文本框中，键入 2。o 在“列数”文本框中，键入 2。o 在“宽度”文本框中键入 600，然后在“宽度”文本框右边的弹出式菜单中选择像素。将宽度设置为 600 像素将创建一个固定宽度的表格。稍后，我们将在本教程中更详细地讨论表格宽度。 o 在“边框”文本框中，键入

13、1 将表格和表格单元格周围的边框宽度设置为 1 个像素。3. 单击“确定”。Dreamweaver 将该表格插入到文档中。 4. 执行下列操作之一来保存文档：o 选择“文件”“保存”。o 按 Ctrl+S 组合键 修改表格 下一步，将修改表格的布局。将在表格中添加行和列，并且学习如何合并和拆分单元格以创建所需的页面布局。 1. 在左上方的单元格中单击，然后向下拖动直到最下面的行以选择左边的一列。2. 选择“修改”“表格”“插入列”。3. 单击左下方的单元格，然后选择“修改”“表格”“插入行或列”。即出现“插入行或列”对话框。 提示： 如果想要插入特定数目的行或列，或者要选择在表格中插入行或列的

14、位置，请选择“插入行或列”选项。4. 在该对话框中，设置下列选项：对于“插入”，选择行。 在“行数”框中，键入 2。 对于“位置”，选择 所选之上。 5. 单击“确定”。表格即会更新。现在的表格为四行三列。 6. 保存所做的更改（“文件”“保存”）。合并和拆分单元格 通过合并和拆分单元格，可以自定义表格的设计以符合布局需要。接下来，将看到如何使用菜单选项或属性检查器来合并或拆分表格单元格。 1. 在文档中，将指针从左上方的单元格拖到它下面的一个单元格，以选择表格左列的上面两个单元格。2. 选择“修改”“表格”“合并单元格”。 两个单元格合并成一个单元格。3. 单击第二列的第三行，然后向右向下拖

15、动以选择第二列和第三列中的最后两行单元格。 4. 在属性检查器中，单击“合并”按钮以合并单元格。选定的单元格合并为一个单元格。可以拆分单个的单元格或列。 1. 单击左上方的单元格。2. 在属性检查器中，单击“拆分单元格”按钮。“拆分单元格”对话框出现。3. 在该对话框中，设置下列选项：o 对于“把单元格拆分”，选择列。o 在“列数”框中，输入 2。4. 单击“确定”。表格即被修改更改行高和列宽 现在调整该表格的尺寸。将要增加表格的行间距，并且调整表格列间距。 1. 沿表格底部边框移动指针直到指针变成一个边框选择器，然后向下拖动以调整表格大小。如果愿意，还可以使用此方法调整表格中的其他行高。 2

16、. 沿一个列的边框移动指针直到指针变成一个边框选择器，然后向左或向右拖动它以更改列宽。3. 调整完成后，保存文档。向表格添加颜色 可以向表格的任何部分添加颜色。将首先向整个表格添加背景颜色，然后对表格中的单元格应用不同的背景颜色。最后，将更改边框颜色。 1. 在文档中，单击表格的任何一个单元格，然后在位于文档窗口左下方的标签选择器中单击 标签以选择整个表格。2. 如果属性检查器尚未打开，则打开属性检查器（“窗口”“属性”）。属性检查器中出现所选表格的属性。3. 在属性检查器中，执行下列操作之一，在“背景颜色”文本框中选择一种颜色：o 单击颜色选择器弹出式菜单，然后从颜色选择器中选择一种颜色。o

17、 输入一个十六进制的颜色值，例如 #CC9933。o 输入一个网页安全色名称，如 goldenrod。将一种背景颜色应用到表格。4. 用同样的方法可以将一种背景颜色应用到表格的单元格中。在左上方的单元格中单击，然后在属性检查器的“背景颜色”文本框中选择一种不同的颜色。5. 如果需要，还可以向其他单元格中添加颜色。添加边框颜色 现在，将设置表格边框的颜色。边框颜色同时应用于表格的外边框和内边框。 1. 在文档窗口中，选择表格。2. 在属性检查器的“边框”文本框中，使用颜色选择器为表格选择一种边框颜色。 3. 完成后，请保存文档。4. 按 F12 键（仅限于 Windows）或者选择“文件”“在浏

18、览器中预览”，然后选择一种浏览器以查看文档。在“标准”视图中设置相对宽度的表格 1. 在 Dreamweaver 中，选择“文件”“新建”。2. 在“新建文档”对话框中，已经选定了“基本页”类别；在“基本页”列表中，双击“HTML”创建一个新的 HTML 文档。文档在文档窗口中打开。 3. 将该文件保存到本地站点文件夹。将其命名为 tableWidth。4. 将插入点放置在文档中。5. 在插入栏的“常用”选项卡中，单击“表”按钮。6. 在出现的对话框中，设置下列选项：在“行数”文本框中，键入 2。 在“列数”文本框中，键入 3。 在“宽度”文本框中，键入 90，并在“宽度”文本框右边的弹出式菜

19、单中选择百分比。 在“边框”文本框中，输入 1 将表格和表格单元格周围的边框宽度设置为 1 个像素。 7. 单击“确定”。表格即出现在文档中。 8. 单击中间列最上方的单元格并拖动到最下方的单元格以选择中间列。 9. 在属性检查器中，使用颜色选择器将一种背景颜色应用于该列。 创建其宽度基于像素的表格 现在将添加另外一个表格。其宽度基于像素的表格被设置为某个特定宽度，并且不会随着浏览器窗口大小的改变而改变。 1. 在刚刚插入的表格后面插入一个段落回车。2. 在插入栏的“常用”选项卡中，单击“表”按钮。3. 在出现的对话框中，设置下列选项：在“行数”文本框中，键入 2。 在“列数”文本框中，键入

20、3。 在“宽度”文本框中，键入 600，然后在“宽度”文本框右边的弹出式菜单中选择像素。 在“边框”文本框中，键入 1 将表格和表格单元格周围的边框宽度设置为 1 个像素。 4. 单击“确定”。表格即出现在文档中。 5. 单击中间列的最上方单元格并向下拖动到最下方的单元格以选择中间列。 6. 在属性检查器中，使用颜色选择器将一种背景颜色应用于该列。 7. 按 F12 键（仅限于 Windows）或者选择“文件”“在浏览器中预览”，然后选择一种浏览器以查看文档。调整浏览器窗口大小以查看在浏览器窗口改变时，这两个表格是怎样变化的。基于像素的表格保持大小不变，而基于百分比的表格则调整大小以符合浏览器

21、大小。 8. 文档查看完毕后，请关闭浏览器窗口。9. 保存文档。创建和保存新文档 1. 在 Dreamweaver 中，选择“文件”“新建”。2. 在“新建文档”对话框中，已经选定“基本页”类别。在“基本页”列表中选择“HTML”，然后单击“创建”创建一个新的 HTML 文档。文档在文档窗口中打开。 3. 将该文档保存到的本地站点文件夹中，并将其命名。 版面设计1.教学目的：能轻松地设计出合理的网页设计2.教学重点：创建、布局和调整布局表格3.课堂讲解：创建布局表格和布局单元格绘制布局表格： 如果要创建多个布局表格而又不想每次都单击布局表格按钮，按住CTRL再创建。创建布局表格时会靠近页面边界

22、8个像时会自动对齐。取消对齐功能用按ALT键绘制布局单元格：在页面上制作一个单元格以后，会自动创建了一个包含这个布局单元格的布局表格，在一个布局表格里可以创建几个单元格。组件绘制嵌套的布局表格：在一个表格里绘制另一个布局表格，称为布局表格的嵌套，在一个表格里可以创建多个嵌套布局表格使用辅助网格线：菜单中查看网格网格设置显示网格CTRLALTG捕捉网格SHIFTALTCTRLG在布局单 元格中添加内容：添加文本、添加图像、调整布局 表格和布局单元格单击单元格的边框，或按住CTRL单击单元格中的任何位置，在布局单元格中的边框上会出现控制柄。拖动控制柄就可以改变布局单元格的大小。移动布局单元格：1是

23、选定，2是拖动或用方向键每按一次移动一个像素。按住SHIFT键每按一次可移动10个像素。设置布局单元格：选定单元格在属性面板中设置设置布局表格：选定后在属性面板中设置设置自动伸展宽度设置指定宽度使用间隔图框架1.教学目的：学习框架集，框架集中保存及关联文件。2.教学重点：框架集的基本概念和基本操作3.课堂讲解：1、框架的作用2、创建框架方法用菜单方法用拖动框架任一角，或一边。按ALT拖动边框架拖出另一边合并4、 插入预定义框架集5、 嵌套的框架集保存框架集文件CTRLS只能保存当前页面。保存框架保存全部一定要搞清楚框架集和各框架的名字于其对应的关系。框架与框架的属性边框属性框架集命名确定框架的

24、大小设置框架集的边框改变框架背景的颜色使用链接控制框架的内容空白上级自身顶部小结：能利用框架更好地规划页面作业：利用框架作一网页层的运用教学目的：创建层，层的参数选择和属性设置，层的操作，改变层的堆栈顺序，改变层的可见性，层与表格。教学重点：层的运用课堂讲解：打开“层”面板，请选择“窗口”“其他”“层”。F2创建层：设置层的可见性层的名称创建嵌套层：嵌套层是其代码包含在另一个层中的层。嵌套通常用于将层组织在一起。嵌套层随其父层一起移动，并且可以设置为继承其父级的可见性。 1. 层的属性设置：设置以下任一选项：层 ID 用于指定一个名称，以便在“层”面板和 JavaScript 代码中标识该层。

25、请输入一个名称。只应使用标准的字母数字字符，而不要使用空格、连字符、斜杠或句号等特殊字符。每个层都必须有它自己的唯一名称。 左和上（左侧和顶部）指定层的左上角相对于页面（如果嵌套，则为父层）左上角的位置。 宽和高指定层的宽度和高度。 层的移动与对齐：选择层。 选择“修改”“对齐”，然后选择一个对齐选项。调整层大小：当处理页面布局时，可以对层进行选择、移动、大小调整和对齐。在对一个层进行移动、大小调整或对齐之前，必须先选择该层。 若要防止在对层进行移动和大小调整时使层相互重叠，请使用“防止重叠”选项层与网格对齐：设置网格显示和对齐，拖动层然后释放即对齐改变层的顺序：用鼠标拖动上下位置层与表格：可

26、以转变，菜单修改转变层到表格表格到层要防止层的重叠作业：利用层作一网页排版使用“时间轴”面板“时间轴”面板显示层和图像的属性在一段时间内如何更改。选择“窗口”“其他”“时间轴”可打开“时间轴”面板。 “时间轴”弹出式菜单指定当前在“时间轴”面板中显示文档的哪些时间轴。 播放栏显示当前在文档窗口中显示时间轴的哪一帧。 帧编号指示帧的序号。“后退”和“播放”按钮之间的数字是当前帧编号。您可以通过设置帧的总数和每秒帧数 (fps) 来控制动画的持续时间。每秒 15 帧这一默认设置是比较适当的平均速率，可用于在通常的 Windows 和 Macintosh 系统上运行的大多数浏览器。 备注： 较快的速

27、率可能不会提高性能。浏览器始终会播放动画的每一帧，即使它们无法达到指定的帧速率。如果帧速率超过浏览器可以支持的速率，则将被忽略。上下文菜单包含各种与时间轴相关的命令。 “行为”通道是应该在时间轴中特定帧处执行的行为的通道。 动画条显示每个对象的动画的持续时间。一个行可以包含表示不同对象的多个条。不同的条无法控制同一帧中的同一对象。 关键帧是动画条中已经为对象指定属性（如位置）的帧。Dreamweaver会计算关键帧之间帧的中间值。小圆标记表示关键帧。 “动画”通道显示用于制作层和图像动画的条。 重命名时间轴1. 选择“修改”“时间轴”“重命名时间轴”。2. 在“重命名时间轴”对话框中输入新的名

28、称。时间轴制作层动画，请执行以下操作： 1. 将层移至它在动画开始时应处于的位置。2. 选择“窗口”“其他”“时间轴”。 3. 选择您要制作动画的层。 4. 在层中单击会将一个闪烁的插入点放入层中，但不会选定该层。 5. 选择“修改”“时间轴”“在时间轴上添加对象”，或者简单地将选定层拖至“时间轴”面板中。6. 一个条将出现在时间轴的第一个通道中。层的名称将在该条中出现。 7. 单击位于条末端的关键帧标记。8. 在页面上将层移至它在动画结束时应处于的位置。 9. 将出现一条线，它显示文档窗口中动画的轨迹。 10. 如果要让层沿曲线移动，请选择其动画条，然后按住 Ctrl 键并单击 (Windo

29、ws) 或按住 Command 键并单击 (Macintosh) 动画条中部的一个帧，从而在您单击的帧处添加一个关键帧，或者单击动画条中部的一个帧并从上下文菜单中选择“添加关键帧”。11. 重复此步骤，定义其他关键帧。 12. 按住“播放”按钮，预览页面上的动画。 显示和隐藏层，而不是更改多图像动画的源文件。由于新的图像必须进行下载，所以切换图像的源文件会降低动画的速度。如果所有图像都在动画运行前在隐藏层中同时下载，将不会出现明显的停顿，并且不会缺少图像。 扩展动画条以创建更顺畅的动作。如果动画断断续续并且图像在不同位置之间跳动，请拖动该层动画条的结束帧，使动作延伸到更多的帧。通过延长动画条，

30、可以在运动的开始点和结束点之间创建更多的数据点，同时也会使对象更为缓慢地移动。请尝试增加每秒帧数 (fps) 以提高速度，但应注意在普通系统上运行的大多数浏览器都不能支持超过 15 fps 的动画速度。请在不同的系统上用不同的浏览器对动画进行测试，以找到最佳的设置。 不要制作大型位图的动画。制作大型图像的动画会导致动画速度减慢。相反，应创建合成图像，并移动图像中较小的部分。例如，可以通过仅制作汽车轮胎的动画来显示汽车的运动。 创建简单的动画。不要创建对当前浏览器要求过高的动画。即使在系统或 Internet 性能降低时，浏览器始终会播放时间轴动画中的每一帧。多个时间轴： 1. 若要新建时间轴，请选择“修改”“时间轴”“添加时间轴”。2. 若要删除选定的时间轴，请选择“修改”“