DREAMWEAVER电子教案

《DREAMWEAVER电子教案》由会员分享，可在线阅读，更多相关《DREAMWEAVER电子教案（53页珍藏版）》请在金锄头文库上搜索。

1、第 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、 超级链接站内链接和站外链接网页的设计要素不同浏览器的显示效果网络的传输速度屏幕的分辨率颜色的显示网页的基本操作创建网页文件新建对话框打开文件类型HTMLSHTMSHTMLXML 文件库文件 LBI模板文件DWT样式表文件CSS微软服务器端文件ASPJAVA服务器端文件PHP 文件TXT 文件CFM 模板文件JSF fireworks 文件LASSO打开当前站点文件从站点面板中打开或通过菜单文件打开命令打开最近使用的文件文件菜单下列出的文件名从 WORD 中导入文件先在 WORD 中将文件保存为 HTML文件然后在 DR中文件导入WORDHTML还可打

6、开后用命令清除保存网页另存为模板输入文本直接输入使用剪贴板用 ENTER相当于插入 用 SHIFTENTER 相当于插入改变字体样式改变字号要使字体不随浏览器的字体设置而改变就要用到层叠样式（ CSS Style）文本的颜色选择文字然后用下列两种方式 用文字属性面板中调整 单击调色板中的右上角 按钮或菜单文本颜色 要将字体改为默认值点上机练习：段 落 格 式创新新段落：ENTER分段落在段落格式下拉菜单选择一种格式对齐段落：居中对齐左对齐右对齐缩进段落 或菜单或选择段落后右击弹出菜单取消缩进 项目符号：每个段落前加一个项目符号用 利用 列表下拉选择各种不同的情况插入分隔线修改分隔线的属性改变长

7、度改变高度改变对齐方式插入特殊字符和符号 菜单插入特殊字符弹出子菜单，进行所需要的项目选择其中包括：换行符SHIFTRETURN不换行空格CTRELSHIFTSPACE用于行首插入符号Email 地址链接 插入电子邮件链接其效果将看到“欢迎联系”字样并带下划线可以发送邮件插入日期时间： 插入注释文字 基本编辑命令撤销和重复操作查找和替换移动和复制直接用鼠标拖动使用 CUTCOPY PASTE灵活使用 HISTORY面板SHIFTF10表示当前刚完成的操作重放按钮复制到剪帖板按钮保存命令按钮弹出菜单按钮 可清除历史记录等操作上机练习，重复上述操作，记录快捷键作业：做一个文字型的小网页，将学到的知

8、识运用在上面。第 3 单元网页中的图像链接教学目的：掌握网页中插入图像、修改属性、插入交互图像以及创建交互图像的方法。教学重点：插入图像、控制图像创建链接、插入交互图像的方法。插入图像操作： 1.在“文档”窗口中，将插入点放置在您要显示图像的地方，然后执行以下操作之一：o 在“插入” 栏的“常用”类别中，单击“ 图像” 图标。o 在“插入” 栏的“常用”类别中，将“ 图像”图标拖入 “文档”窗口中（或者，如果您正处理代码，则拖入“ 代码” 视图窗口中） 。 o 选择“ 插入”“图像 ”。 o 将图像从“ 资源” 面板（“窗口”“资源”）拖到“ 文档”窗口中的所需位置；然后跳到第 3 步。o 将

9、图像从“ 站点” 面板拖到“文档”窗口中的所需位置；然后跳到第 3 步。o 将图像从桌面拖到“文档” 窗口中的所需位置；然后跳到第 3 步。 2.在出现的对话框中执行下列操作之一：o 选择“ 文件系统” 以选择一个图形文件。o 选择“ 数据源” 以选择一个动态图像源文件。3.浏览以选择您要插入的图像或内容源文件。如果您正在一个未保存的文档中工作，则 Dreamweaver 生成一个对图像文件的 file:/ 引用。将文档保存到站点中的任何位置后，Dreamweaver 将该引用转换为文档相对路径。 4.在属性检查器（“ 窗口”“属性” ）中，设置该图像的属性。设置图像属性 1.设置以下任一选项

10、：o 使用缩略图下面的文本域设置名称，以便在使用 Dreamweaver 行为（例如“交换图像”）或脚本撰写语言（例如 JavaScript 或 VBScript）时可以引用该图像。o “宽”和“高”以像素为单位指定图像的宽度和高度。o “源文件”指定图像的源文件。单击文件夹图标以浏览到源文件，或者键入路径。 “链接”指定图像的超链接。将“指向文件”图标拖到“站点”面板中的某个文件，单击文件夹图标浏览到站点上的某个文档，或手动键入 URL。 有关创建链接的信息， “对齐”对齐同一行上的图像和文本。“替代”指定只显示文本的浏览器或已设置为手动下载图像的浏览器中代替图像显示的替代文本。对于使用语音

11、合成器（用于只显示文本的浏览器）的有视觉障碍的用户，将大声读出该文本。在某些浏览器中，当鼠标指针滑过图像时也会显示该文本。 “地图名称”和“热点工具”允许您标注和创建客户端图像地图。 “垂直边距”和“水平边距”沿图像的边缘添加边距（以像素为单位）。 “垂直边距”沿图像的顶部和底部添加边距。“水平边距”沿图像左侧和右侧添加边距。 “目标”指定链接的页应当在其中载入的框架或窗口。 _blank，将链接的文件载入一个未命名的新浏览器窗口中。 _parent，将链接的文件载入含有该链接的框架的父框架集或父窗口中。如果含有该链接的框架不是嵌套的，则在浏览器全屏窗口中载入链接的文件。 _self，将链接的

12、文件载入该链接所在的同一框架或窗口中。此目标为默认值，因此通常不需要指定它。 _top，在整个浏览器窗口中载入所链接的文件，因而会删除所有框架。 “边框”是以像素为单位的图像边框的宽度。默认为无边框。 “编辑”启动您在“外部编辑器”参数选择中指定的图像编辑器并打开选定的图像。有关设置外部图像编辑器的信息，“重设大小” Control+代字号 () 第四单元表格设计教学目的：学习下列方法 在“标准”视图中创建和修改表格 向表格添加颜色 在“标准”视图中设置相对宽度的表格教学重点：能进行表格设计教学过程：在“标准”视图中创建和修改表格 1.在 Dreamweaver 中，选择 “文件”“ 新建”

13、。即出现“新建文档”对话框。 2.在“空文档” 列表中，选择“HTML” ，然后单击“ 创建” 以创建一个新的 HTML 文档。3.在“文档”工具栏的 “标题”文本域中，输入“表格设计”为文档添加一个标题。4.选择“文件”“保存” 将该文档保存到本地站点文件夹中。将其命名为 tableModify.htm。 插入表格 现在就可以在文档中插入表格了。 1.在“文档”窗口，将插入点放到文档中，然后执行下列操作之一： o 选择“ 插入”“表格 ”。o 在插入栏的“ 常用” 类别中，单击“表格”图标。 出现“插入表格”对话框。2.在该对话框中，设置下列选项： o 在“行数” 文本框中，键入 2。o 在

14、“列数” 文本框中，键入 2。o 在“宽度” 文本框中键入 600，然后在“宽度”文本框右边的弹出式菜单中选择像素。将宽度设置为 600 像素将创建一个固定宽度的表格。稍后，我们将在本教程中更详细地讨论表格宽度。 o 在“边框” 文本框中，键入 1 将表格和表格单元格周围的边框宽度设置为 1 个像素。 3.单击“确定” 。Dreamweaver 将该表格插入到文档中。 4.执行下列操作之一来保存文档：o 选择“ 文件”“保存 ”。o 按 Ctrl+S 组合键 修改表格 下一步，将修改表格的布局。将在表格中添加行和列，并且学习如何合并和拆分单元格以创建所需的页面布局。 1.在左上方的单元格中单击

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