第一篇：Dreamweaver教案
第一课 软件简介与设置 1.1课程介绍 本课程主要内容
①内容提要/学习目标 ②软件演示 ③实例操作步骤
本课程的三个特色栏目
①网页色彩搭配； ②HTML基础；
③名词解释
1.2(软件)基础知识 内容提要：
①起始页的使用及相关设置；
②软件界面概览(菜单，工具，面板等)； ③“插入”工具栏显示模式的切换； ④文档窗口的工具栏和状态栏； ⑤如何设置，存储和管理界面布局。
学习目标：
①了解Dreamweaver软件的作用，基本界面布局，以及各功能区的应用范围；
②了解控制软件界面和文档的基本方法。
第二篇：Dreamweaver教案补充
1、Dreamweaver 这是Macromedia公司的出品的一款“所见即所得”的网页编辑工具。与 Frontpage不同，Deamweaver采用的是Mac机浮动面版的设计风格，对于初学者来说可能会感到不适应。但当你习惯了其操作方式后，就会发现Dreamweaver的直观性与高效性是Frontpage所无法比拟的。
Dreamweaver对于DHTML（动态网页）的支持特别好，可以轻而易举地做出很多眩目的互动页面特效。插件式的程序设计使得其功能可以无限的扩展。Dreamweaver与Flash、Firework 并称为 Macromedia的网页制作三剑客，由于是同一公司的产品，因而在功能上有着一个非常紧密的结合。因此，说Dreamweaver是高级网页制作的首选并不为过。
2、Dreamweaver 8 的功能
Dreamweaver 可以完全自定义。您可以创建您自己的对象和命令，修改快捷键，甚至编写 JavaScript 代码，用新的行为、属性检查器和站点报告来扩展 Dreamweaver 的功能。
Dreamweaver 8 包括许多新增功能，使您只需花费最少的时间和精力便可生成 Web 站点和应用程序。Dreamweaver 使复杂的技术变得简单而方便，以帮助您达到事半功倍的效果。
下面是 Dreamweaver 8 中的一些主要新增功能： “缩放”工具和辅助线 可视化 XML 数据绑定 新的 CSS 样式面板 CSS 布局的可视化 代码折叠 “编码”工具栏 后台文件传输
“插入 Flash 视频”命令
3、设计网站的基本步骤。
(1)网站的规划与设计。首先确定网站的方向和功能，然后是申请便于记忆的域名和租用稳定的空间，接着收集相关资料，最后将整个网站的结构画成结构图。
(2)布局与编排网页。在网页布局的过程中，应该遵循平衡、对比、空白等原则。在设计网页时需要考虑网页的主题、网页的命名、网站的标志、色彩的搭配、字体的选择等问题。
(3)填充网页内容。输入文字和其它网页元素，比如声音、动画、图像和其它形式的媒体，以便使网页内容更加充实。
(4)建立动态网站。动态网站是目前最流行的Web发展趋势，建立动态站点需要为网页加入Web应用程序并实现与数据库的连接。
(5)测试和发布站点。在发布Web站点之前，用户应该确认所有文本和图形都放在正确的位置，且所有的链接都能操作正确。测试Web站点的一种方法是通过检查内部和外部的链接来确认目标文件是否存在。
完成测试以后，根据服务商提供的资料，用户可以将站点发布到服务器上，并对站点进行定期更新，以保证站点内容新颖。
4、网页设计的基本理念。
（1）下载速度问题，下载响应速度越快越好。
（2）能适应不同浏览器及分辨率，网页布局、内容不应出现紊乱。（3）合理的版面布局，应做到图文并茂。（4）精美的网站标志，让人记住你。（5）注重色彩搭配，给人以艺术的享受。（6）网页内容便于浏览，要有导航功能。（7）网页内容要精彩，让人感觉到有吸引力。
（8）简约、美观，不应过于追求页面的华丽。
5、网页的整体风格设计的基本原则。
（1）网站标志要放在醒目位置，如左上角，而且要保持不变。（2）最好能够有一句反映网站精髓的标语，并能动态显示。
（3）导航部分应该放在每一张网页的相同位置，便于访问者浏览网站的全部内容。
（4）确定主体颜色，并注意颜色搭配要让人感觉舒服，不要太刺眼，也不能不突出需要强调的内容。（5）页面的布局是风格的一个重要标志。不要忘记考虑主页的可扩充性，以方便将来再添加栏目。（6）内容结构越简单越好，分类要简而精。一切都为访问者能够最快地找到访问的资料而考虑。
6、网页色彩如何搭配。
网页的色彩是树立网站形象的关键之一，网页的色彩处理得好，可以锦上添花，达到事半功倍的效果。色彩总的应用原则应该是“总体协调，局部对比”，也就是网页的整体色彩效果应该是和谐的，只有局部的、小范围的地方可以有一些强烈色彩的对比。在色彩的运用上，可以根据网页内容的需要，分别采用不同的主色调，并注意以下色彩搭配的原理：
(1)色彩的鲜明性：网页的色彩要鲜艳，容易引人注目。
(2)色彩的独特性：要有与众不同的色彩，使人印象强烈。
(3)色彩的合适性：色彩和表达的内容气氛相适合。如用粉色体现女性站点的柔性。
(4)色彩的联想性：不同色彩会产生不同的联想，蓝色想到天空，黑色想到黑夜，红色想到喜事等，选择色彩要和网页的内涵相关联。
一个网站的标准色彩应尽量控制在三种色彩以内，不要将所有颜色都用到。背景和前文的对比尽量要大，(绝对不要用花纹繁复的图案作背景)，以便突出主要文字内容。
7、Dreamweaver的三种视图方式
在代码视图中可以直接编辑网页的源代码；而设计视图能方便我们更好地美化网页，更合理地布局网页；同时显示代码视图和设计视图让我们能够更好地理解源代码，提高编程能力。
8、什么是HTML？
HTML是Hypertext Markup Language的缩写，即超文本标记语言，是www.xiexiebang.com就是一个域名。从技术上讲，域名只是一个Internet中用于解决地址对应问题的一种方法。
11、ftp协议（文件传输协议）
是 Internet 上用来传送文件的协议，它是为了我们能够在 Internet 上互相传送文件而制定的文件传送标准，规定了 Internet 上文件如何传送。也就是说，通过 FTP 协议，我们就可以跟 Internet 上的 FTP 服
务器进行文件的上传（Upload）或下载（Download）等动作。
12、统一资源定位符(Uniform Resource Locator, URL)
包含如何访问 Internet 上的资源的明确指令，也就是Internet文件在网上的地址。
URL的一般格式为：
Access-method://host:port/path/filename 例如：http://www.xiexiebang.com/ 为 Microsoft 网站的万维网 URL 地址。
Access-method，访问Internet资源的方法或是访问的协议类型，可以是下表之一： http 通过 http 访问该资源。格式 http:// ftp 通过 FTP访问资源。格式 FTP:// file 资源是本地计算机上的文件。格式file:// gopher 通过 Gopher 协议访问该资源。
mailto 资源为电子邮件地址，通过 SMTP 访问。格式 mailto: MMS 通过 支持MMS（流媒体）协议的播放该资源。（代表软件：Windows Media Player）格式 MMS:// ed2k 通过 支持ed2k（专用下载链接）协议的P2P软件访问该资源。（代表软件：电驴）格式 ed2k:// Flashget 通过 支持Flashget:（专用下载链接）协议的P2P软件访问该资源。（代表软件：快车）格式 Flashget:// thunder 通过 支持thunder（专用下载链接）协议的P2P软件访问该资源。（代表软件：迅雷）格式 thunder:// news 通过 NNTP 访问该资源。
host，主机，指定的服务器的域名系统(DNS)主机名或 IP 地址。
port，指出被访问的Internet资源所在的服务器端口号，整数，可选，省略时使用方案的默认端口，如http的默认端口为80。
path，路径，由零或多个“/”符号隔开的字符串，一般用来表示主机上的一个目录或文件地址，可选。
filename，指出被访问的Internet资源名称，可选。
13、链接的几种路径以及它们的不同：
绝对路径是包含服务器协议的完全路径，是一种与源地址文件无关的路径形式。
文档相对的路径是指与当前文档所在的文件夹相对的路径，它使用源地址文件和目标地址文件之间的位置来表示路径，只要整个站点的结构和文件的位置不变，改变站点的路径不会影响路径的正确性。
根相对路径是指从站点根文件夹到被链接文档经由的路径。一个根相对路径以前斜杠开头，它代表站点根文件夹。
常用的链接有：文本链接；图片链接及图像热点链接；邮件链接、下载链接以及其他链接；锚点链接及空链接。
只含有“#”的那种链接是空链接。
第三篇：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.在文档中，单击表格的任何一个单元格，然后在位于文档窗口左下方的标签选择器中单击