DREAMWEAVER教案.docx
《DREAMWEAVER教案.docx》由会员分享，可在线阅读，更多相关《DREAMWEAVER教案.docx（41页珍藏版）》请在冰豆网上搜索。
DREAMWEAVER教案
第1章初识Dreamweaver安装、下载方法.
一、教学目的：
学习原DR的安装、下载方法.
二、教学重点：
概述和安装
三、教学过程
1.1DreamweaverMX概述
1、直观的新工作区
2、更加强大的模板
3、广泛的代码库
4、新服务器技术
5、帮助初学者起步的示例内容
6、XML和WEB标准支持
7、改进的级联样式表（CSS）
8、高性能的新编码功能
9、高性能的新编码功能
10、优化COLDFUSION MX开发环境
使用Dreamweaver工作区
一、教学目的：
认识DR的界面，了解各面板的组成，菜单的组成。
二、教学重点：
各面板的组成。
三、教学过程：
选择工作区布局（仅适用于Windows）
在Windows中首次启动Dreamweaver时，会出现一个对话框让选择一种工作区布局。
如果以后改变了主意，可以使用“参数选择”对话框切换到一种不同的工作区。
选择工作区布局：
选择下列布局之一：
DreamweaverMX工作区
HomeSite/代码编写者样式的DreamweaverMX工作区
Dreamweaver4工作区
在选择一种工作区后切换到另一种工作区：
DreamweaverMX工作区
浮动工作区布局（Windows和Macintosh）
状态栏
“文档”窗口底部的状态栏提供与正创建的文档有关的其他信息。
调整“文档”窗口的大小
将“文档”窗口的大小调整为预定义的大小：
向“窗口大小”弹出式菜单中添加新的大小：
将“文档”窗口最大化（仅适用于Windows集成工作区）：
使用快速启动条
快速启动条显示在状态栏中，包含用以打开和关闭各种面板、检查器和窗口的按钮。
若要显示快速启动条，请在“面板”参数选择中启用“在面板和启动器中显示图标”选项。
可以指定在快速启动条中显示哪些项目。
使用文档工具栏
∙“显示代码视图
∙“显示代码视图和设计视图”
∙“显示设计视图
∙“标题”
∙“文件管理”
∙“在浏览器中预览/调试”
“换行符”在插入点处插入一个换行符。
还可以按下Shift+Enter（Windows）
“不换行空格”在插入点处插入一个不换行的空格（ ）。
“左引号”、“右引号”和“破折线”在插入点处插入标点符号。
“英镑符号”、“欧元符号”和“日元符号”在插入点处插入货币符号。
“版权”、“注册商标”和“商标”在插入点处插入相应的符号。
“其它字符”
第二单元文本的编辑与基本操作
一、教学目的：
学习网页的组成对象 设计要素 文本的字体大小颜色，段落的格式，基本的编辑命令。
二、学教重点：
文本编辑的基本操作
三、教学过程：
网页的组成比报纸和杂志复杂的多，因为它包含图、声、文、动画、控件等多媒体，另一大特点有超级链接。
1、文字
标题：
一般为图形
尺寸 系统默认大小
样式：
一般少用下划线
字体：
一般为系统默认大小
颜色：
以颜色来强调文章的重点
2、图形
一般为GIF 和 JPG 格式
3、超级链接
站内链接 和站外链接
网页的设计要素
不同浏览器的显示效果
网络的传输速度
屏幕的分辨率
颜色的显示
网页的基本操作
输入文本
直接输入 使用剪贴板
用ENTER 相当于插入
用SHIFT＋ENTER相当于插入
改变字体样式
改变字号
要使字体不随浏览器的字体设置而改变就要用到层叠样式（CSSStyle）
文本的颜色
选择文字
然后用下列两种方式
用文字属性面板中调整
单击调色板中的右上角按钮或菜单文本――颜色
段落格式
创新新段落：
ENTER 分段落 在段落 格式下拉菜单选择一种格式
对齐段落：
居中对齐 左对齐 右对齐
缩进段落
项目符号：
每个段落前加一个项目符号
列表下拉选择各种不同的情况
插入分隔线
修改分隔线的属性
改变长度
改变高度
改变对齐方式
插入特殊字符和符号菜单插入｜特殊字符｜ 弹出子菜单，进行所需要的项目选择
其中包括：
换行符 SHIFT＋RETURN
不换行空格 CTREL＋SHIFT＋SPACE 用于行首
插入符号
E－mail地址链接 插入｜电子邮件链接｜
其效果将看到“欢迎联系”字样并带下划线
可以发送邮件
插入日期时间：
插入注释文字
基本编辑命令
撤销和重复操作
查找和替换
上机练习，重复上述操作，记录快捷键
作业：
做一个文字型的小网页，将学到的知识运用在上面。
网页中的图像链接
教学目的：
掌握网页中插入图像、修改属性、插入交互图像以及创建交互图像的方法。
教学重点：
插入图像、控制图像 创建链接、插入交互图像的方法。
插入图像操作：
1.在“文档”窗口中，将插入点放置在您要显示图像的地方，然后执行以下操作之一：
o在“插入”栏的“常用”类别中，单击“图像”图标。
o在“插入”栏的“常用”类别中，将“图像”图标拖入“文档”窗口中（或者，如果您正处理代码，则拖入“代码”视图窗口中）。
o选择“插入”>“图像”。
o将图像从“资源”面板（“窗口”>“资源”）拖到“文档”窗口中的所需位置；然后跳到第3步。
o将图像从“站点”面板拖到“文档”窗口中的所需位置；然后跳到第3步。
o将图像从桌面拖到“文档”窗口中的所需位置；然后跳到第3步。
2.在出现的对话框中执行下列操作之一：
o选择“文件系统”以选择一个图形文件。
o选择“数据源”以选择一个动态图像源文件。
3.浏览以选择您要插入的图像或内容源文件。
如果您正在一个未保存的文档中工作，则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.将该文档保存到的本地站点文件夹中，并将其命名。
版面设计
1.教学目的：
能轻松地设计出合理的网页设计
2.教学重点：
创建、布局和调整布局表格
3.课堂讲解：
创建布局表格和布局单元格
绘制布局表格：
如果要创建多个布局表格而又不想
每次都单击布局表格按钮，按住CTRL 再创建。
创建布局表格时会靠近页面边界＜8个像时会自动对齐。
取消对齐功能用按ALT键
绘制布局单元格：
在页面上制作一个单元格以后，会自动创建了一个包含这个布局单元格的布局表格，在一个布局表格里可以创建几个单元格。
组件绘制嵌套的布局表格：
在一个表格里绘制另一个布局表格，称为布局表格的嵌套，在一个表格里可以创建多个嵌套布局表格
使用辅助网格线：
菜单中 查看｜网格｜网格设置
显示网格 CTRL＋ALT＋G
捕捉网格 SHIFT＋ALT＋CTRL＋G
在布局单元格中添加内容：
添加文本、添加图像、
调整布局表格和布局单元格 单击单元格的边框，或按住CTRL单击单元格中的任何位置，在布局单元格中的边框上会出现控制柄。
拖动控制柄就可以改变布局单元格的大小。
移动布局单元格：
1是选定，2是拖动或用方向键 每按一次移动一个像素。
按住SHIFT键每按一次可移动10个像素。
设置布局单元格：
选定单元格在属性面板中设置
设置布局表格：
选定后在属性面板中设置
设置自动伸展宽度
设置指定宽度
使用间隔图
框 架
1.教学目的：
学习框架集，框架集中保存及关联文件。
2.教学重点：
框架集的基本概念和基本操作
3.课堂讲解：
1、框架的作用
2、创建框架方法
用菜单方法
用拖动框架任一角，或一边。
按ALT拖动边
框架拖出另一边合并
4、插入预定义框架集
5、嵌套的框架集
保存框架集文件
CTRL＋S 只能保存当前页面。
保存框架
保存全部
一定要搞清楚框架集和各框架的名字于其对应的关系。
框架与框架的属性
边框 属性
框架集命名
确定框架的大小
设置框架集的边框
改变框架背景的颜色
使用链接控制框架的内容
空白 上级 自身 顶部
小结：
能利用框架更好地规划页面
作业：
利用框架作一网页
层的运用
教学目的：
创建层，层的参数选择和属性设置，层的操作，改变层的堆栈顺序，改变层的可见性，层与表格。
教学重点：
层的运用
课堂讲解：
打开“层”面板，请选择“窗口”>“其他”>“层”。
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）以提高速度，但应注意在普通系统上运行的大多数浏览器都不能支持超过15fps的动画速度。
请在不同的系统上用不同的浏览器对动画进行测试，以找到最佳的设置。
∙不要制作大型位图的动画。
制作大型图像的动画会导致动画速度减慢。
相反，应创建合成图像，并移动图像中较小的部分。
例如，可以通过仅制作汽车轮胎的动画来显示汽车的运动。
∙创建简单的动画。
不要创建对当前浏览器要求过高的动画。
即使在系统或Internet性能降低时，浏览器始终会播放时间轴动画中的每一帧。
多个时间轴：
1.若要新建时间轴，请选择“修改”>“时间轴”>“添加时间轴”。
2.若要删除选定的时间轴，请选择“修改”>“
展开阅读全文
相关搜索
资源标签