DREAMWEAVER 教案

第1章初识Dreamweaver安装、下载方法.一、教学目的：学习原DR的安装、下载方法.二、教学重点：概述和安装三、教学过程1.1DreamweaverMX概述1、直观的新工作区2、更加强大的模板3、广泛的代码库4、新服务器技术5、帮助初学者起步的示例内容6、XML和WEB标准支持7、改进的级联样式表（CSS）8、高性能的新编码功能9、高性能的新编码功能10、优化COLDFUSIONMX开发环境使用Dreamweaver工作区一、教学目的：认识DR的界面，了解各面板的组成，菜单的组成。二、教学重点：各面板的组成。三、教学过程：选择工作区布局（仅适用于Windows）在Windows中首次启动Dreamweaver时，会出现一个对话框让选择一种工作区布局。如果以后改变了主意，可以使用“参数选择”对话框切换到一种不同的工作区。选择工作区布局：选择下列布局之一：DreamweaverMX工作区HomeSite/代码编写者样式的DreamweaverMX工作区Dreamweaver4工作区在选择一种工作区后切换到另一种工作区：DreamweaverMX工作区浮动工作区布局（Windows和Macintosh）状态栏“文档”窗口底部的状态栏提供与正创建的文档有关的其他信息。调整“文档”窗口的大小将“文档”窗口的大小调整为预定义的大小：向“窗口大小”弹出式菜单中添加新的大小：将“文档”窗口最大化（仅适用于Windows集成工作区）：使用快速启动条快速启动条显示在状态栏中，包含用以打开和关闭各种面板、检查器和窗口的按钮。若要显示快速启动条，请在“面板”参数选择中启用“在面板和启动器中显示图标”选项。可以指定在快速启动条中显示哪些项目。使用文档工具栏“显示代码视图“显示代码视图和设计视图”“显示设计视图“标题”“文件管理”“在浏览器中预览/调试”“换行符”在插入点处插入一个换行符。还可以按下Shift+Enter(Windows)“不换行空格”在插入点处插入一个不换行的空格( )。“左引号”、“右引号”和“破折线”在插入点处插入标点符号。“英镑符号”、“欧元符号”和“日元符号”在插入点处插入货币符号。“版权”、“注册商标”和“商标”在插入点处插入相应的符号。“其它字符”第二单元文本的编辑与基本操作一、教学目的：学习网页的组成对象设计要素文本的字体大小颜色，段落的格式，基本的编辑命令。二、学教重点：文本编辑的基本操作三、教学过程：网页的组成比报纸和杂志复杂的多，因为它包含图、声、文、动画、控件等多媒体，另一大特点有超级链接。1、文字标题：一般为图形尺寸系统默认大小样式：一般少用下划线字体：一般为系统默认大小颜色：以颜色来强调文章的重点2、图形一般为GIF和JPG格式3、超级链接站内链接和站外链接网页的设计要素不同浏览器的显示效果网络的传输速度屏幕的分辨率颜色的显示网页的基本操作创建网页文件――新建――对话框打开文件类型HTMLSHTMSHTMLXML文件库文件LBI模板文件DWT样式表文件CSS微软服务器端文件ASPJAVA服务器端文件PHP文件TXT文件CFM模板文件JSFfireworks文件LASSO打开当前站点文件从站点面板中打开或通过菜单－文件－打开命令打开最近使用的文件文件菜单下列出的文件名从WORD中导入文件先在WORD中将文件保存为HTML文件然后在DR中文件－导入－WORDHTML还可打开后用命令－清除保存网页另存为模板输入文本直接输入使用剪贴板用ENTER相当于插入p用SHIFT＋ENTER相当于插入br改变字体样式改变字号要使字体不随浏览器的字体设置而改变就要用到层叠样式（CSSStyle）文本的颜色选择文字然后用下列两种方式用文字属性面板中调整单击调色板中的右上角按钮或菜单文本――颜色要将字体改为默认值点上机练习：段落格式创新新段落：ENTER分段落在段落格式下拉菜单选择一种格式对齐段落：居中对齐左对齐右对齐缩进段落或菜单或选择段落后右击弹出菜单取消缩进项目符号：每个段落前加一个项目符号用利用列表下拉选择各种不同的情况插入分隔线修改分隔线的属性改变长度改变高度改变对齐方式插入特殊字符和符号菜单插入｜特殊字符｜弹出子菜单，进行所需要的项目选择其中包括：换行符SHIFT＋RETURN不换行空格CTREL＋SHIFT＋SPACE用于行首插入符号E－mail地址链接插入｜电子邮件链接｜其效果将看到“欢迎联系”字样并带下划线可以发送邮件插入日期时间：插入注释文字基本编辑命令撤销和重复操作查找和替换移动和复制直接用鼠标拖动使用CUTCOPYPASTE灵活使用HISTORY面板SHIFT＋F10表示当前刚完成的操作重放按钮复制到剪帖板按钮保存命令按钮弹出菜单按钮可清除历史记录等操作上机练习，重复上述操作，记录快捷键作业：做一个文字型的小网页，将学到的知识运用在上面。第3单元网页中的图像链接教学目的：掌握网页中插入图像、修改属性、插入交互图像以及创建交互图像的方法。教学重点：插入图像、控制图像创建链接、插入交互图像的方法。插入图像操作：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.在文档中，单击表格的任何一个单元格，然后在位于文档窗口左下方的标签选择器中单击table标签以选择整个表格。2.如果属性检查器尚未打开，则打开属性检查器（“窗口”“属性”）。属性检查器中出现所选表格的属性。3.在属性检查器中，执行下列操作之一，在“背景颜色”文本框中选择一种颜色：o单击颜色选择器弹出式菜单，然后从颜