当前位置:首页 >> 其它课程 >> DREAMWEAVER电子教案

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 相当于插入<p> 用 SHIFT+ENTER 相当于插入<br> 改变字体样式 改变字号 要使字体不随浏览器的字体设置而改变就要用到层叠样式(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.在文档中,单击表格的任何一个单元格,然后在位于文档窗口左下方的标签选择器中单击 <table> 标签以选择整个表格。 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.将该文档保存到的本地站点文件夹中,并将其命名为 tableLayout.htm。

第五单元 1. 2. 3.

版面设计

教学目的:能轻松地设计出合理的网页设计 教学重点:创建、布局和调整布局表格 课堂讲解:

创建布局表格和布局单元格

绘制布局表格:

如果要创建多个布局表格而又不想 每次都单击布局表格按钮,按住 CTRL 再创建。

创建布局表格时会靠近页面边界<8 个像时会自动对齐。取消对齐功能用按 ALT 键

绘制布局单元格: 在页面上制作一个单元格以后,会自动创建了一个包含这个布局单 元格的布局表格,在一个布局表格里可以创建几个单元格。 组件绘制嵌套的布局表格:在一个表格里绘制另一个布局表格,称为布局表格的嵌套,在一 个表格里可以创建多个嵌套布局表格 使用辅助网格线:菜单中 显示网格 CTRL+ALT+G 捕捉网格 SHIFT+ALT+CTRL+G 在布局单 元格中添加内容:添加文本、添加图像、 调整布局 表格和布局单元格 单击单元格的边框, 或按住 CTRL 单击单元格中的任何位置, 在布局单元格中的边框上会出现控制柄。 拖动控制柄就可以改变布局单元格的大小。 移动布局单元格:1 是选定,2 是拖动或用方向键 按一次可移动 10 个像素。 设置布局单元格:选定单元格在属性面板中设置 每按一次移动一个像素。按住 SHIFT 键每 查看|网格|网格设置

设置布局表格:选定后在属性面板中设置

设置自动伸展宽度 设置指定宽度 使用间隔图

第六单元 一、 二、 三、





教学目的:学习框架集,框架集中保存及关联文件。 教学重点:框架集的基本概念和基本操作 课堂讲解: 1、框架的作用

2、创建框架方法 用菜单方法 用拖动框架任一角,或一边。 按 ALT 拖动边 框架拖出另一边合并 4、 插入预定义框架集 5、 嵌套的框架集

保存框架集文件 CTRL+S 只能保存当前页面。 保存框架 保存全部 一定要搞清楚框架集和各框架的名字于其对应的关系。

框架与框架的属性

边框 属性 框架集命名 确定框架的大小 设置框架集的边框 改变框架背景的颜色 使用链接控制框架的内容

空白 小结:能利用框架更好地规划页面 作业:利用框架作一网页

上级

自身 顶部

第 7 单元层的运用 一、 教学目的:创建层,层的参数选择和属性设置,层的操作,改变层的 堆栈顺序,改变层的可见性,层与表格。 二、 教学重点:层的运用 三、 课堂讲解: 打开“层”面板,请选择“窗口”>“其他”>“层”。 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) 以 提高速度,但应注意在普通系统上运行的大多数浏览器都不能支持超过 15 fps 的动画速度。 请在不同的系统上用不同的浏览器对动画进行测试,以找到最佳的设置。 ? 不要制作大型位图的动画。制作大型图像的动画会导致动画速度减慢。相反,应创建合成图 像,并移动图像中较小的部分。例如,可以通过仅制作汽车轮胎的动画来显示汽车的运动。 ? 创建简单的动画。不要创建对当前浏览器要求过高的动画。即使在系统或 Internet 性能降 低时,浏览器始终会播放时间轴动画中的每一帧。
?

多个时间轴: 1. 若要新建时间轴,请选择“修改”>“时间轴”>“添加时间轴”。 2. 若要删除选定的时间轴,请选择“修改”>“时间轴”>“删除时间轴”。这将永久删除选定时间

轴中的所有动画。 3. 若要重命名选定时间轴, 请选择“修改”>“时间轴”>“重命名时间轴”,或者在“时间轴”面板的 “时间轴”弹出式菜单中输入新的名称。 4. 若要在“时间轴”面板中查看另一个时间轴, 请从“时间轴”面板的“时间轴”弹出式菜单中选择 一个新的时间轴。 拖动轨迹来创建时间轴: 1.选择一个层。 2.将该层移至它在动画开始时应处于的位置。 确保您已选定该层;如果插入点位于该层中,则说明尚未选定该层。若要选择一个层,请单 击层标记或层的选择柄,或者使用“层”面板。 3.选择“修改”>“时间轴”>“记录层的轨迹”。 4.在页面上拖动层以创建轨迹。 5.当到达动画应停止的点时释放该层。 Dreamweaver 在时间轴上添加一个动画条,其中包含适当数量的关键帧。 6.在“时间轴”面板中,单击“倒带”按钮;然后按住“播放”按钮预览动画。

第 9 单元行为 1、 2、 3、 教学目的:行为概述,自带的行为使用 教学重点:行为的使用 课堂教学

行为基础 在网页制作中,几乎所有的特效都是通过编写脚本语言来实现的。通常应用较多的脚本语言 有两种:VBScript 和 JavaScript。其中 JavaScript 因为其简单易用和众多的支持者而在网 页制作者中最为广泛流行。 在我们设计网页的时候,接受事件和响应事件的对象一般就是我们在前面章节中介绍的页面 元素或浏览器本身。在 HTML 语言中,这些页面元素是用“Tag”(HTML 标记)来表示的,下 面列出了我们在这一章中可能用到的 HTML 标记: <body>定义文档正文; <a>定义链接; <img>定义图像; <form>定义表单; <table>定义表格; <tr>定义表格的一行; <td>定义表格的单元格(表格的具体数据); <frameset>定义框架集; <frame>定义框架; <div>定义块元素; <p>定义段落 ; <ol>定义有序列表; <ul>定义无序列表; <li>定义列表元素; 我们这一章可能用到的常见的事件有:

onMouseOver:鼠标指针移到目标上时; onMouseUp:按下鼠标再放开左键时; onMouseOut:鼠标指针从目标移开时; onMouseDown:按下鼠标左键时(不需要放开左键); onClink:鼠标左键单击时; onDblClick:鼠标左键双击时; onLoad:载入网页时; onUnload:离开页面时; onResize:当浏览者改变浏览窗口的大小时; onScroll:当浏览者拖动滚动条的时; 行为面板 依次单击菜单栏 【Windows/Behaviors】 (窗口/行为) , 或按快捷键 『Shift+F3』 或单击“Show , Behaviors”(显示行为面板)按钮 ,展开“Design/Behaviors”(设计/行为)面板(如 图 13-1):

图 13-1 “+”(添加行为按钮):单击该按钮添加行为(包括事件和动作),常见的动作如下: “Call JavaScript”(调用 JavaScript):单击该选项可以调用自己制作的 JavaScript 脚 本或第三方开发的 JavaScript 脚本; “Change Property”(改变属性):改变页面元素的各项属性; “Check Browser”(检查浏览器):同一个网页,在不同的浏览器上的显示可能大为不同; 为了使我们的网页在各种不同的浏览器中都完美无缺,我们可以分别针对不同的浏览器将同 一网页制作成几个不同页面,然后再调用 Check Browser,根据访问者浏览器的不同自动进入 相应的页面; “Check Plugin”(检查插件):比如你的网页上有一个 Flash 动画,而访问者的浏览器没 有 Flash 播放插件时,利用此功能你可以按你的解决方案对访问者进行提醒; “Control Shockwave or Flash”(控制 Shockwave 或 Flash):应用此功能我们可以在网页 上做一些交互按钮,使用户可以控制动画的播放进程; “Drag Layer”(拖动层):用来制作随鼠标移动而移动的网页特效;

“Go to URL”(转到 URL):应用此项可以实现一些比较高级的跳转;比如:单击一个链接 可以同时打开几个页面,打开一个页面后自动跳转到一个新的页面等; “Hide Pop-Up Menu”(隐藏弹出菜单):应用此功能可以在制作下拉菜单时隐藏菜单; “Jump Menu”(跳转菜单):应用此功能可以插入跳转导航菜单;前面已经讲述; “Jump Menu Go”(跳转菜单开始):应用此功能为跳转菜单增加一个“Go”按钮; “Open Browser Window”(打开浏览器窗口):应用此功能可以打开浏览器窗口并设置新窗 口的大小、工具条显示情况等属性; “Play Sound”(播放声音):应用此功能可以为网页加入声音; “Popup Message”(弹出信息):应用此功能可以弹出消息框来显示预先设定好的文本; “Preload Images”(预先载入图像):应用此功能可以在页面载入时预先读入某些特效的 图像,以避免事件发生时读取延迟和保持效果的连续性; “Set Nav Bar Image”(设置导航条图像):应用此功能可以制作有翻滚特效的导航条; “Set Text”(设置文字):应用此功能可以在特定的地方显示文字,其中: “Set Text of Frame”(设置框架文字):应用此功能可以在框架内显示信息; “Set Text of Layer”(设置层文字):应用此功能可以在层内显示信息; “Set Text of Status Message”(设置状态栏文字):应用此功能可在状态栏显示信息; “Set Text of Text Field”(设置文本域文字):应用此功能可以在文本框显示信息; “Show Pop-Up Menu”(显示弹出菜单):应用此功能可以在制作下拉菜单时显示菜单; “Show-Hide Layers”(显示-隐藏图层):应用此功能可以显示或隐藏图层; “Swap Image”(交换图像):应用此功能不仅可以建立一对一的翻滚图,还可以建立一对 多等更为复杂的替换特效; “Swap Image Restore”(恢复交换图像):应用此功能可以将已经翻滚的图像还原;; “Timeline”(时间轴):应用此功能可以制作与时间轴有关的动画效果,其中: “Go to Timeline Frame”(转到时间轴帧):跳转到指定帧; “Play Timeline”(播放时间轴):播放动画;

“Stop Timeline”(停止时间轴):停止动画; “Validate Form”(检查表单):应用此功能可验证用户提交的表单内容是否符合要求; “—”(删除行为按钮):选择一个行为后,单击该按钮删除所选行为(包括事件和动作); “▲/▼”:选择一个行为后,单击该按钮可以将所选行为上移或下移一行; “Events”(事件):显示为对象设置的事件; “Actions”(动作):显示与左侧事件对应的动作; 行为操作 在这一节中,我们将通过具体实例讲述几个我们在网页设计中应用较多的交互效果。 改变对象属性 在页面上插入一个图层,在图层中输入一段文本,名称采用默认的“Layer1”,“Tag”(标 记)采用默认的“DIV”,并保持该图层被选中(如图 13-2):

图 13-2 单击 “Behaviors” (行为) 面板上的“+”按钮, 在弹出对话框中选中“Change Properties” (改变属性) (如图 13-3),弹出“Change Properties”(改变属性)对话框(如图 13-4)。

图 13-3

图 13-4 “Type of Object”(对象类型):在右侧的下拉选单中选择标记,如“DIV”(和 “Properties”(属性)面板中一致); “Named Object”(已命名的对象):从右侧下拉选单中选中对象名称,如“Layer1”; “Property”(属性):设置对象的属性,包括两个选项: “Select”(选择):从下拉选单中选择需要更改的属性;从最右侧的下拉选单中选中兼容 的浏览器类型; “Enter”(输入):自己输入需要修改的属性; 本例中我们选中“Select”,并选中“style.backgroundColor”(背景颜色); “New Value”(新值):为所选的属性值设置新值,如“green”(绿色); 完成上述设置后,单击“OK”按钮保存并退出,这时我们可以发现“Behaviors”(行为)面 板中已经出现了我们所设的行为(如图 13-5):

图 13-5

Dreamweaver MX 默认的事件为“onClick”(单击),单击“Events”(事件)列右侧的三角 形按钮“▼”,在弹出菜单中选择“onMouseOver”(如图 13-6,图 13-7):

图 13-6

图 13-7 如果找不到所要地事件,可以选择最底部的“Show Events for”(显示事件),在子菜单中 选择较高版本的浏览器(如图 13-8):

图 13-8 按快捷键『F12』浏览,可以看到预料的效果(如图 13-9):

图 13-9 13.3.2 检测浏览器 为了使我们的网页在各种浏览器中的显示完美无缺,我们必须为同一网页制作几个适合相应 类型浏览器的文件。在本例中,我们假设已经为某一页面制作了三个网页文件“ie.htm”、 “netscape.htm”和“other.htm”,分别适用于 IE、Netscape 和其他类型的浏览器。 由于使用 IE 的用户是大多数,我们将默认的页面设置为“ie.htm”,将检测浏览器的事件设 置在“ie.htm”上。也就是说,默认的是“ie.htm”,然后在“ie.htm”加载时(“onLoad” (加载)事件),激发检测浏览器的动作(若用户浏览器为 IE,则保持原来的页面不变;若 用户浏览器为 Netscape,则跳转到“netscape.htm”;若用户使用的是其他浏览器,则跳转 到“other.htm”)。 打开网页文件“ie.htm”,在状态栏上单击选中 HTML 标记“<body>”(如图 13-10),使之 变为粗体(如图 13-11)。

图 13-10

图 13-11

在“Behaviors”(行为)面板中单击“+”(添加行为)按钮,在弹出菜单中选中“Check Browser”(检测浏览器) (如图 13-11),弹出“Check Browser”(检测浏览器)对话框(如 图 13-12): “Check Browser”(检测浏览器)对话是由一组条件语句组成的,根据判断的结果做出选择, 在三个网页当中选其一。这个动作可以明确判断两种浏览器:Netscape 和 IE,不是这两种浏 览器一概做“Other Browsers”(其他浏览器)处理。判断每一种浏览器都会有三种选项: “Go to URL”(打开一个指定文件),“Go to Alt URL”(打开另一个指定文件),“Stay on this page”(停留在当前页面)。“URL”和“Alt URL”是定义“Go to URL”和“Go to Alt URL”所指向页面的。 由于我们当前页面就是“ie.htm”,我们在这里将“URL”设为“netscape.htm”,将“Alt URL”设为“other.htm”。然后只需要将“Netscape Navigator”设为“Go To URL (netscape.htm)”,将“Internet Explorer”设为“Stay on this Page(ie.htm)”, 其他所有的都设为“Go To Alt URL(other.htm)”就可以了(如图 13-12)。

图 13-12 单击“OK”按钮保存并退出后,我们可以发现“Behaviors”(行为)面板中已经添加了我们 刚才设置的行为: “Events” (事件) 为“onLoad” (载入) “Actions” ; (动作) 为“Check Browser”(检测浏览器)(如图 13-13):

图 13-13

检测插件 Flash 动画不仅体积小、制作简便,而且具有交互功能。所以,如果在我们的网页上放上几个 小 Flash,将会使网页增色不少。但遗憾的是,运行 Flash 需要插件的支持,但并不是所有的 用户的浏览器都安装了 Flash 插件。如果用户打开一个含有 Flash 的网页却显示不出来,那 我们岂不是弄巧成拙! 怎么解决这个问题呢?学过了上一节,读者也许有一点思路了。对了,我们可以为包含 Flash 的页面给出另外一个版本。当加载页面时(“onLoad”事件),执行检测 Flash 插件的动作: 若用户安装了 Flash 插件,保持页面不变;否则跳转到另一个页面。 在本例中,我们假设有一个含有 Flash 的页面“flash.htm”,我们已经给它另做了一个内容 相同不含 Flash 的文件“html.htm”。打开“flash.htm”,单击选中任务栏上的“<body>” 标记,然后单击“Behaviors”(行为)面板上的“+”(添加行为)按钮,在弹出对话框中 选择“Check Plugin”(检测插件)(如图 13-14),弹出“Check Plugin”(检测插件)对 话框(如图 13-15)。

图 13-14

图 13-15 “Plugin”(插件):设置需要检测的插件,其中:

“Select”(选择):在右侧的下拉菜单中选择所要检测的插件,如“Flash”; “Enter”(输入):直接输入第一项没有列出的插件,一般很少用; “If Found,Go To URL”(如果有,前往 URL):设置如果检测时发现了目标插件时所要打 开的页面; “Otherwise,Go To URL”(否则,前往 URL):设置当检测时没有发现目标插件时所要打开 的页面; “Always go to first URL if detection is not possible”(如果无法侦测,永远前往第 一个 URL):选中此项表示如果不能进行插件检查就进入第一个页面;一般不选; 完成上述设置后,单击“OK”按钮保存并退出。我们可以发现“Behaviors”(行为)面板中 已经添加了我们刚才设置的行为:“Events”(事件)为“onLoad”(载入);“Actions” (动作)为“Check Plugin”(检测浏览器)(如图 13-16):

图 13-16 拖动层 如果我们想在网页上作一个像拼图游戏、拖出菜单这类可以随用户的鼠标指针移动的页面元 素,我们就需要应用“Drag Layer”(拖动层)行为了。 插入一个图层并将需要移动的元素放入其中,选中该层(此时状态栏的标记“<div#Layer1>” 变成粗体),单击“Behaviors”(行为)面板中的“+”按钮并从中选择“Drag Layer”(拖 动层)命令(如图 13-17),弹出“Drag Layer”(拖动层)对话框,默认为“Basic”(基 本)选项卡(如图 13-18)。

图 13-17

图 13-18 “Layer”(层):从右侧下拉选单中选择需要被拖动的层; “Movement”(移动):设置层可以拖动的范围,有两个选项: “Uncontrained”(不限制):选中此项可以任意拖动层; “Constrained” (限制) 选中此项只能在所设范围内拖动层; : 在右侧的“Up” (上) “Down” 、 (下)、“Left”(左)和“Right”(右)文本域中设置相对于图层的起始位置的范围; “Drag Target”(放下目标):在“Left”和“Top”文本域中设置放置目标的位置;或单 击“Get Current Position”(取得目前位置)按钮自动将当前图层的所在位置输入这两个 文本域中。(放置目标指用户所拖动的层需放置的地方;当层的左上角坐标和我们设置的值 相匹配时,即达到了放置目标,该值是相对于浏览器窗口的左上角而言) “Snap if Within”(靠齐距离):在文本域中输入值,指定图层与放置目标的靠近距离(即 当拖动图层与放置目标的距离小于该值时,自动将图层与放置目标对齐);

如果还要定义图层的拖拽范围,可以单击“Advanced”(高级)标签,弹出“Advanced”(高 级)选项卡(如图 13-19):

图 13-19 “Drag Handle”(拖拽控制点):设置图层中用于拖动图层的区域,包括两个选项: “Entire Layer”(整个层); “Area Within Layer”(层内区域):在“Left”和“Top”文本域中设置拖拽区域左上角 点的坐标;在“Width”和“Height”文本框中输入拖动区域的宽度和高度值; “While Dragging”(拖拽时):设置拖动时层的状态: “Bring Layer to Front”(将层移至最前):选中此项表示在拖动层时将层移动到最顶层; “then”(然后):设置放置层时层的叠放状态: “Leave on Top”(留在最上方):选中此项表示将层保留在最顶端; “Restore Z-Index”(还原 Z 序列):还原为原来的叠放顺序; “Call JavaScript”(呼叫 JavaScript):设置拖动层时调用的 JavaScript 代码; “When Dropped”(放下时):设置放下时层的状态: “Call JavaScript”(呼叫 JavaScript):设置放下层时调用的 JavaScript 代码; “Only if snapped”(只有在靠齐时):选中此项表示只有在靠齐时才调用 JavaScript 代 码; 完成上述设置后,单击“OK”按钮保存并退出。我们可以发现“Behaviors”(行为)面板中 已经添加了我们刚才设置的行为:“Events”(事件)为“onClick”(载入);“Actions” (动作)为“Drag Layer”(检测浏览器)(如图 13-20):

图 13-20 控制 Shockwave 或 Flash 在“Insert/Common”(插入/标准)面板中单击“Flash”(插入 Flash)按钮(如图 13-21), 选择一个 Flash 文件并将其命名为“flash1”(如图 13-23)。

图 13-21 在“Insert/Forms”(插入/表单)面板中单击“Button”(插入按钮)按钮(如图 13-22), 插入几个按钮并将它们的“Action”(动作)设置为“none”(无),“Label”(标签)依 次设置为“Play”(播放)、“Stop”(停止)、“Rewind”(返回)和“GoTo4”(转到第 4 帧)(如图 13-23)。

图 13-22

图 13-23 选中一个按钮“Play”(播放),然后在“Behaviors”(行为)面板中单击“+”按钮,在 弹出菜单中选中“Control Shockwave or Flash” (控制 Shockwave 或 Flash) (如图 13-24) , 弹出“Control Shockwave or Flash”(控制 Shockwave 或 Flash)对话框(如图 13-25)。

图 13-24

图 13-25 “Movie”(影片):从下拉选单中选择要控制的动画,如“flash1”; “Action”(动作):设置控制动画的动作,其中: “Play”(播放):选择该项表示播放动画; “Stop”(停止):选择该项表示停止动画; “Rewind”(倒带):选择该项表示使播放的动画返回初始位置; “Go to Frame”(前往帧):选择该项并在其后的文本框中数字表示将动画跳至指定帧; 完成上述设置后,单击“OK”按钮保存并退出。我们可以发现“Behaviors”(行为)面板中 已经添加了我们刚才设置的行为:“Events”(事件)为“onClick”(单击);“Actions” (动作)为“Control Shockwave or Flash”(控制 Shockwave 或 Flash)(如图 13-26):

图 13-26 同样可以完成对其他按钮的设置,设置完成后按快捷键『F12』浏览即可看到预料的效果。

转到 URL 关于文字的链接我们前面讲得已经非常多了,但是应用“Go To URL”(转到 URL)我们可以 实现一些高级的跳转。我们下面就来讲一个单击一个链接同时打开几个页面的例子。 单击“Insert/Frames”(插入/框架)面板上的“Left and Nested Top Frames”(左框架 嵌套顶框架)按钮(如图 13-27),插入一个嵌套框架集(如图 13-29)。

图 13-27 单击“Insert/Forms”(插入/表单)面板上的“Button”(按钮)按钮(如图 13-28),插 入一个按钮(如图 13-29)。

图 13-28 选中该按钮并将其“Action”(动作)设为“none”(无),单击“Design/Behaviors”(设 计/行为)面板上的“+”按钮,选中“Go To URL”(转到 URL)(如图 13-29),弹出“Go To URL”(转到 URL)对话框(如图 13-30)。

图 13-29 “Open In”(打开在):设置链接的打开方式;列表框中列出了当前框架集中的所有框架的 名字以及主窗口,如果页面没有框架,则只有“Main Window”(主窗口)一个选项。 “URL”(URL):设置在选定窗口中打开的页面 URL 地址;

在本例中,我们为三个框架“leftFrame”、“topFrame”和“mainFrame”分别设置 URL 地 址“http://www.263.com”、“http://www.163.com”和“http://www.5460.net”,设置好 后单击“OK”按钮保存并退出(如图 13-30):

图 13-30 这时我们可以发现 “Behaviors” (行为) 面板中已经添加了我们刚才设置的行为: “Events” (事件)为“onClick”(载入);“Actions”(动作)为“Go To URL”(转到 URL)(如 图 13-31):

图 13-31 按快捷键『F12』浏览,即可看到我们预料的效果(如图 13-32):

图 13-32 13.3.7 打开浏览器窗口

应用“Open Browser Window”(打开浏览器窗口)行为可以在用户触发该行为时打开一个新 的浏览器窗口,在新窗口中载入指定 URL 地址上的网页。该选项还可以设定新窗口的各项属 性,如窗口的大小、是否显示导航栏、状态条等。如果没有指定窗口的属性,则按启动窗口 的属性和大小打开,一旦指定了窗口的任何属性,将自动关闭其他属性。 下面我们就利用“Open Browser Window”(打开浏览器窗口)行为来实现在浏览网站时经常 看到的广告窗口。 首先准备一个页面如“advertise.htm”作为广告,然后在我们的主页上单击选中状态栏中的 标记“<body>”,单击“Behaviors”(行为)面板中的“+”按钮,选中“Open Browser Window”(打开浏览器窗口)(如图 13-33),弹出“Open Browser Window”(打开浏览器 窗口)对话框(如图 13-34)。

图 13-33

图 13-34 “URL to Display”(要打开的 URL):设置新窗口中所要打开的页面地址,如 “advertise.htm”; “Window Width”(窗口宽度):设置新窗口的宽度; “Window Height”(窗口高度):设置新窗口的高度; “Attributes”(属性):设置新窗口的属性,其中:

“Navigation Toolbar”(导航工具栏):选中此项表示在新窗口中显示导航工具栏; “Location Toolbar”(地址工具栏):选中此项表示在新窗口中显示地址工具栏; “Status Bar”(状态栏):选中此项表示在新窗口中显示状态栏; “Menu Bar”(菜单条):选中此项表示在新窗口中显示菜单栏; “Scrollbars as Needed”(需要时使用滚动条):选中此项当内容超出新窗口时显示滚动 条; “Resize Handles”(调整大小手柄):选中此项表示允许用户调整新窗口大小; “Window Name”(窗口名称):设置新窗口的名称; 由于广告窗口需要向用户传递的信息不多,所以一般尺寸较小,且不需要各种工具条。我们 在此为其设置好尺寸后,其他都不设。单击“OK”按钮保存并退出,这时我们可以发现 “Behaviors”(行为)面板中已经添加了我们刚才设置的行为:“Events”(事件)为 “onLoad”(载入);“Actions”(动作)为“Open Browser Window”(打开浏览器窗口) (如图 13-35):

图 13-35 按快捷键『F12』浏览,可以看到当主页打开后,立即弹出广告窗口(如图 13-36):

图 13-36 播放声音 调用“Play Sound”(播放声音)行为可以方便地在网页中加入音乐。 单击“Insert/Forms”(插入/表单)面板上的“Button”(按钮)按钮(如图 13-37),插 入一个按钮(如图 13-29)。

图 13-37 选中该按钮并将其“Action”(动作)设为“none”(无),单击“Design/Behaviors”(设 计/行为) 面板上的“+”按钮, 选中“Play Sound” (播放声音) (如图 13-38) 弹出“Play , Sound”(播放声音)对话框(如图 13-39)。

图 13-38

图 13-39 “Play Sound”(播放声音):设置要加入网页的音乐文件即可(如果听不到声音,可能是 浏览器不支持所选音乐格式)。 设置完后单击“OK”按钮保存并退出。这时我们可以发现“Behaviors”(行为)面板中已经 添加了我们刚才设置的行为:“Events”(事件)为“onClick”(点击);“Actions”(动 作)为“Play Sound”(播放声音)(如图 13-40):

图 13-40 这时我们可以发现页面中出现了一个“Plugin”(插件)图标(如图 13-41)。选中该图标后, “Properties”(属性)面板的内容发生相应变化,单击“Parameters”(参数)按钮(如 图 13-41),弹出“Parameters”(参数)对话框,我们可以在该对话框中为声音播放设置各 项参数(如图 13-42)。

图 13-41

图 13-42

第十单元插入多媒体对象

1、 APPLET 2、 3、

教学目的:网页中插入 FLASH 教学重点:插入对象的具体方法 课堂教学

SHOCKWAVE

ACTIVE PLUGIN JAVA

插入 FLASH 按扭的对话框

插入 FLASH 动画方法对话框

插入 FLASH 文本

修改属性

添加 SHOCKWAVE

对象

java applte 对象

添加 plugin

属性对话框

作业:在自己的网页上添加声音

第 12 单元 模板和库 一、 教学目的:理解模板的作用,掌握模板的创建和应用。 二、 教学重点:模板的应用。 三、 内容: 模板的概念 在制作一个网站的整套页面时,我们会发现大部分页面的基本格式都是相同的。比如说页面 背景、文字样式、导航条、版权信息等。所以我们可以将页面先做成类似申请表一样的表格, 将那些相同的内容固定下来,并留出一定的空白以供将来插入不同的内容。以后我们制作页 面时就只需要在这个表格的基础上添加新的内容就可以了。 一般网页的基本组成部分: “logo”:即网站的徽标,这是一个网站的标志,一般放在每个页面最顶部的左上角,其一 般和标准大小为 88px×31px; “banner”:即页面上的广告条,可放在页面的任意位置 “Nav Bar”:即页面上的导航条,一般放在页面的顶部和底部,用来快捷地在网站各页面 之间跳转 “Location Bar”:即页面上的地址条,一般在导航条下面,用来告诉用户当前页面所属的 类别和树型目录 “content”:即页面的正文,这是每个页面区别于其他页面的地方; “copyright”:即页面上的版权信息,一般在页面的最底部模板中的元区域可以分为两类: 锁定区域和可编辑区域。 锁定区域是指在任何基于该模板的网页中都不可编辑或修改的区域, 可编辑区域是指在基于该模板的网页中可以被编辑或修改的区域。当我们编辑模板本身时, 二者皆可修改;但当我们编辑基于模板的文挡时,后者不可修改。 在我们批量制作网页时,logo、导航条和版权信息往往是不变的,此外页面的背景和文字样 式也可能需要统一,因此我们可以将这些元素设置为锁定区域。而地址条、正文和页面的标 题往往是不同的,我们可以将这些元素设置为可编辑区域。 创建模板文件 【File/New】(文件/新建)(如图 14-3),弹出“New Document”(新建文档)对话框(如 图 14-4)。

在“General”(常规)选项卡的左边“Category”(类别)列表框中选中“Basic Page”(基 本页面),然后在右边“Basic Page”(基本页面)列表框中选中“HTML Template”(HTML 模板),然后单击“OK”按钮保存并退出 新建文件窗口的标题栏中的文件名前出现了 [<<Template>>(Untitled-2*)]”,表明这是一 个模板文件。 打开一个现有的网页文件,然后单击菜单栏【File/Save as Template】(文件/另存为模板), 弹出“Save as Template”(另存为模板)对话框。

“Site”(站点):从右侧下拉选单中选择保存和应用模板的站点; “Existing Templates”(已存在地模板):该列表框中列出了所选站点钟所有的模板; “Save As”(另存为):设置所要保存的模板文件的名称; 这时我们发现 Dreamweaver MX 已经自动在“Site”(站点)面板中新建了一个名为 “Templates”(模板)的文件夹,我们刚才创建的模板文件“mycool.dwt”就放在该文件夹 下

定义可编辑区域 先为模板设置可编辑区域。 将光标置于想要插入可编辑区域的地方,然后依次单击菜单栏【Insert/Template Objects/Editable Region】(插入/模板对象/可编辑区域)(如图 14-10),或单击 “Insert/Templates”(插入/模板)面板上的“Editable Region”(可编辑区域)按钮(如 图 14-11),或按快捷键『Ctrl+Alt+V』,弹出“New Editable Region”(新建可编辑区域)

对话框 定义模板的重复区域 重复区域:是指一个页面中可以任意多地增加的部分,例如表格的内容等。 重复区域是不可编辑区域,如果要编辑不同的内容,必须在重复区域中 条件区域:是指在满足一定条件下才在页面中显示的区域插入可编辑区域。

操作:1、选中重复区域的文本内容。2、在 INSERT 面板中单击重复按钮 4、 为区域输入一个名称。

定义条件模板 内容在特定的模板中的内容在特定的页面中显示与否, 条件模板区域通过一个以 IF 打头的条 件语句进行控制。 操作如下:1、在模板选中想要成为条件区域的文本 2、任选以下操作之一。

在插入面板中选择条件模板 选择菜单中插入模板|插入条件模板 右击在弹出的快捷菜单中选择|新建条件模板

模板的套用 为模板定义可编辑区域后,我们就可以方便的利用该模板批量制作网页。 依次单击菜单栏【File/New】 (文件/新建),或按快捷键『Ctrl+N』,打开“New Document” (新建文档)对话框,选中“Templates”(模板)选项卡(如图 14-15),这时对话框的标 题变为“New from Template”(从模板新建)。 “Templates For”(模板在):从列表框中选中模板所在的站点名称,该列表框列出了当前 所有的站点; “Site A”(站点 A):“A”即为“Templates For”(模板在)列表框中所选站点的名称, 该列表框中列出了该站点中所有的模板名称,单击选中即可在最右侧的“Preview”(预览) 窗口中预料所选模板 在图 14-16 所示的网页文件中,我们可以发现在网页设计区的周围有一个浅黄色的边框,右 上角还有一行文字“Template: mycool”,表示该网页文件是基于模板“mycool.dwt”创建

的。而且,只有当我们的鼠标置于页面中的可编辑区域内时,指针才会变成“beam”(选定 文本)箭头“I”,表示允许编辑。当鼠标置于页面上其他区域时,鼠标指针变成“no”(不 可用)箭头“ ”,表示不允许编辑 模板的更新 页面都是基于几个模板制作出来的的话,我们只需要修改相应的模板就可以了,所有基于该 模板的网页文件都会自动更新。

模板的管理 单击展开“Files/Assets”(文件/资源)面板,然后单击最左列的 “Templates”(模板) 按钮 ,得到“Templates”(模板)面板(如图 14-22):

图 14-22 从下部的列表框中选中一个模板,上部的窗口中会显示所选模板的预览图; “Refresh Site List”(刷新站点列表):单击此按钮表示获取站点最新的模板列表; “New Template”(新建模板):单击此按钮表示新建一个模板; “Edit”(编辑):单击此按钮表示编辑选中的模板; “Delete”(删除):单击此按钮表示删除选中的模板; “Apply”(应用):单击此按钮表示将所选模板应用到当前文档; “Move Content to New Region”(将内容移到新的区域):设置原来页面上的内容的处理 方式,共有如下三个选项: “<Not Resolved>”(没确定):此项不可选; “Nowhere”(无处):选中此项表示将原来页面上的所选内容舍弃;

“?”(可编辑区域名称):选中某一可编辑区域名表示将原来页面上的所选内容移到该可 编辑区域; “Use for All”(应用于所有):单击此按钮表示将所选的处理方法应用于原来页面上的所 有内容 修改模板并更新站点 1、打开模板:修改模板,保存后 提问

2、 3、自动更新站点 单元练习:建立一模板,并应用,修改模板。 作业:用模板建立一网站


更多相关文档:

Dreamweaver全套教案

课题 认识 Dreamweaver 一、学习目的 了解 Dreamweaver,学会利用 Dreamweaver 制作网页。 二、学习内容 Dreamweaver 的基本知识。 【学习步骤】 1、 Dreamweaver 的功能...

DREAMWEAVER电子教案

DREAMWEAVER电子教案_其它课程_高中教育_教育专区。教案 第1 章 初识 Dreamweaver 安装、下载方法. 一、教学目的:学习原 DR 的安装、下载方法. 二、教学重点:概述...

网页设计与制作 电子教案

思考题及 作业 电子教案课程: 第 2 章 Dreamweaver CS5 基本操作 课时内容 教学目标 Dreamweaver CS5 基本操作 ? ? ? ? 授课时间 学时数 2 认识 Dreamweaver...

网页制作教案电子版

网页制作教案电子版_院校资料_高等教育_教育专区。校历 教学内容 第一章《网页...让学生了解 Dreamweaver CS3 网页浏 览的基本原理和网页制作技术的发展,知道目前...

DW教案

《网页设计 Dreamweaver CS3》教案教学 课题 教学 内容 教学 目的 教学 重点 ...创建电子邮件链接 步骤十一:创建空链接 【知识链接】 一、超链接 超链接: 是...

Dreamweaver教案啊

Dreamweaver教案啊_文学_高等教育_教育专区。Dreamweaver 教案一、网页设计基础与制作流程在网络高速发展的今天,网站已经成为一个自我展示和宣 传的平台,一个网站是由...

DREAMWEAVER教案

DREAMWEAVER教案_工学_高等教育_教育专区。信息技术教案 第 1 章 初识 Dreamweaver...电子邮件链接| 用于行首 其效果将看到“欢迎联系”字样并带下划线 可以发送邮件...

dreamweaver网页制作教案

dreamweaver 网页制作教案 (Dreamweaver MX)一、Dreamweaver MX 中文版建站初步 ...5 创建电子邮件链接 6 链接到站点中的文档或者其它站点, 可以使用跳转菜单, ...

Dreamweaver 教学思路 教案

10 重庆电讯职业学院 计算机与传媒系 课程: 《Dreamweaver教案 执笔人:徐顺智...也可以 是相同网页上的不同位置,还可以是一个图片,一个电子邮件地址,一个文件...

Dreamweaver网页制作教案

Dreamweaver网页制作教案_文学_高等教育_教育专区。认识 Dreamweaver 一、学习目的 了解 Dreamweaver,学会利用 Dreamweaver 制作网页。 二、学习内容 Dreamweaver 的基本...
更多相关标签:
dreamweaver教案 | 初识dreamweaver 教案 | dreamweaver cs5教案 | dreamweaver cs6教案 | dreamweaver8教案 | dreamweaver电子书 | dreamweaver 电子商务 | dreamweaver电子相册 |
网站地图

文档资料共享网 nexoncn.com copyright ©right 2010-2020。
文档资料共享网内容来自网络,如有侵犯请联系客服。email:zhit325@126.com