第7章_Dreamweaver的操作多媒体CAI课件制作技术与应用(第2版)
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
2020/10/18
8.1Dreamweaver简介
• Dreamweaver是美国MACROMEDIA公司（因 Adobe 和 Macromedia 合而为一，即新的 Adobe 公司）开发的集网页制作和管理网站 于一身的所见即所得网页编辑器，
2020/10/18
8.1.3 Dreamweaver界面简介
地磁盘上的文件。在最常见的 Dreamweaver 工作流程中，用户在本地磁盘上编辑文件， 然后将它们上传到远程站点。
2020/10/18
1．创建站点
2020/10/18
2．站点布局
• 网站设计初始需要设计人员对网站的主题 进行规划，网站必须主题鲜明，有层次感。 一般的网站中的网页设计不多于三层，这 样，用户可以方便地从主页中快速的找到 连接网站中的其他网页的途径。
• 1． 工作区布局选择 • 可以使用【首选参数】对话框切换到
一种不同的工作区。
2020/10/18
两种工作区的主要特点是
• 设计人员工作区是一个使用 MDI（多文档界面） 的集成工作区，其中全部【文档】窗口和面板被 集成在一个更大的应用程序窗口中，并将面板组 停靠在右侧。本章的界面都使用此类工作区。
• （1）设置主页 • （2）查看站点地图
2020/10/18
8.2 Dreamweaver基本操作
• 8.2.1 新建并保存网页 • 1． 新建网页 • 2． 打开网页 • 3． 保存网页
2020/10/18
8.2.2 设置页标题
• 设置标题、背景颜色、文本颜色
2020/10/18
8.2.3 添加文字及格式设置
• 1． 添加文字 • 2． 文字颜色设置
2020/10/18
3． 设置或更改字体：
2020/10/18
8.2.4 添加图像
• Web 页中通常使用的只有三种，即 GIF、 JPEG 和 PNG。
2020/10/18
三种文件的特点
• GIF（图形交换格式）文件最多使用 256 种颜色，最适合显示色调不连 续或具有大面积单一颜色的图像，例如导航条、按钮、图标、徽标或 其它具有统一色彩和色调的图像。
2020/10/18
2． 链接的字体显示
2020/10/18
3． 为图片设置超级链接
• 图像地图指已被分为多个区域（或称【热 点】）的图像；当用户单击某个热点时， 会发生某种操作（例如，打开一个新文 件）。
2020/10/18
8.2.6插入flash
• Flash文件的文件类型
• （1）Flash 文件 (.fla) • （2）Flash SWF 文件 (.swf) • （3）Flash 模板 (.swt) • （4）Flash 元素 (.swc)
2020/10/18
2． 控制具有链接的框架内容
• 要在一个框架中使用链接以打开另一个框架中的 文档，必须设置链接目标。链接的target属性指定 在其中打开链接的内容的框架或窗口。
• 在目标的下拉列表框中有以下四个固有选项，其含义是： • _blank 在新的浏览器窗口中打开链接的文档，同时保持当
前窗口不变。 • _parent 在显示链接的框架的父框架集中打开链接的文档，
同时替换整个框架集。 • _self 在当前框架中打开链接，同时替换该框架中的内容。 • _top 在当前浏览器窗口中打开链接的文档，同时替换所有
框架。
2020/10/18
8.2.9 表单的使用
• 典型例子:
2020/10/18
2020/10/18
8.4.1创建站点
2020/10/18
8.4.2创建数据库
• yhxx.mdb
2020/10/18
8.4.3登录表单网页设计
• 1. 登录表单的页面设计
• 2. 连接数据库
2020/10/18
Biblioteka Baidu
3. 登录用户设定
2020/10/18
8.4.4注册表单网页设计
2020/10/18
</html>
2020/10/18
8.3.2 将网页上传发布
2020/10/18
8.4创建用户登录动态网页
• 动态网页一般以数据库技术为基础，当用 户请求时，服务器从数据库中获取信息并 返回一个完整的网页。采用动态网页技术 的网站可以实现更多的功能，如用户注册、 用户登录、在线调查、用户管理、订单管 理等等。
•谢谢
• JPEG（联合图像专家组标准）文件格式是用于摄影或连续色调图像的 高级格式，这是因为 JPEG 文件可以包含数百万种颜色。随着 JPEG 文 件品质的提高，文件的大小和下载时间也会随之增加。通常可以通过 压缩 JPEG 文件在图像品质和文件大小之间达到良好的平衡。
• PNG（可移植网络图形）文件格式是一种替代 GIF 格式的无专利权限 制的格式，它包括对索引色、灰度、真彩色图像以及 alpha 通道透明 的支持。PNG 是 Macromedia Fireworks 固有的文件格式。PNG 文件可 保留所有原始层、矢量、颜色和效果信息（例如阴影），并且在任何 时候所有元素都是可以完全编辑的。文件必须具有 .png 文件扩展名才 能被 Dreamweaver 识别为 PNG 文件。
2020/10/18
8.2.7 表格的应用
• 1． 插入表格
• 2． 设置表格属性 • 3． 拆分和合并单元格
2020/10/18
4．布局模式
• （1）切换到【布局】模式 • （2）绘制布局表格 • （3）绘制布局单元格
2020/10/18
8.2.8 框架在网页上的应用
• 1． 创建框架
• 设计框架集
2. 插入表单对象
• （1）表单区域 • （2）文本字段 • （3）单选按钮 • （4）按钮 • （5）插入图像按钮 • （6）复选框
2020/10/18
8.2.9 层的概念
• 1． 插入层
2020/10/18
8.2.10 利用行为制作动态效果
• 1． 播放声音 • 2． 打开浏览器窗口
• 3． 弹出消息框
2020/10/18
说明
• 本节将以常见的用户注册为例介绍动态网页的设 计方法。服务器的架设方法在8.3节中已有详细描 述，将继续采用IIS配置服务器端程序，并使用ASP 技术设计动态网页，用Access2000设计后台数据 库。
• 在这个用户注册网站中包括四个网页，index.asp 页面用于用户登录输入用户名和密码；login.asp用 户用户注册信息的输入；welcome.asp用于成功登 录和成功注册的跳转信息显示；error.asp页面用于 用户密码错误时的信息显示。
第八章 Dreamweaver的操作
本章学习重点
1. 了解Dreamweaver的特点 2. 掌握Dreamweaver中插入多种媒体的方法，包
括文字、图像、声音、flash等等 3. 掌握超级链接的设置 4. 掌握Dreamweaver中表格的基本操作 5. 掌握Dreamweaver中布局表格的使用技巧 6. 掌握Dreamweaver中框架的操作 7. 掌握Dreamweaver的层、行为、时间轴的概念 8. 了解网站发布的基本方法
•2020/图10/188-47 【消息】文本框
• 控制 Shockwave 或 Flash
2020/10/18
8.2.11使用时间轴制作DHTML
• 图层漂浮路线
2020/10/18
8.2.12 使用样式表CSS
• 1．创建新的 CSS 样式表 • 2．使用CSS改变超级链接的显示效果
2020/10/18
2020/10/18
1． 创建和插入 Flash 按钮
2020/10/18
2．插入 Flash 文本对象
2020/10/18
3．插入 Flash 影片
• 插入 SWF 文件的步骤如下： • （1）在【文档】窗口的【设计】视图中，将插入
点放置在需要插入影片的地方。
• （2）在【插入】栏的【常用】类别中，选择【媒 体】，然后单击【插入 Flash】图标。或者选择 【插入】→【媒体】→【Flash】。
• 编码人员工作区是同样的集成工作区，但是将面 板组停靠在左侧，布局类似于 Macromedia HomeSite 和 Macromedia ColdFusion Studio 所用的 布局，而且【文档】窗口在默认情况下显示【代 码】视图。建议 HomeSite 或 ColdFusion Studio 用 户以及其他需要使用熟悉的工作区布局的手工编 码人员使用这种布局。
8.3创建自己的站点
• 1．确认安装IIS
2020/10/18
2．设置Web服务器
2020/10/18
3．设置站点并浏览
2020/10/18
测试
• （2）静态网页测试
• （3）动态网页测试
<html> <body> <% response.write("Hello World!") %> </body>
2020/10/18
• 1．插入图像占位符 • 将光标定在需要插入图形的地方；选择：
插入图像占位符按钮 即出现图像占位符 对话框
• 2、替换占位符，插入图像
2020/10/18
3．直接插入图像
• 用户可以从工具栏中选择按钮【图像】， 在弹出的如图8-17所示的插入图像对话框中 选择图像的文件并插入图像。
• （3）在显示的对话框中，选择需要加入的Flash 文件 (.swf)。Flash 占位符随即出现在【文档】窗 口中。
• （4）在【文档】窗口中，单击 Flash 占位符以选 择要预览的 2020/10/18 Flash 影片。
4．插入 Flash 元素
• 使用 Dreamweaver，设计者可以在文档中插 入 Flash 元素。Flash 元素使设计者可以快速、 方便地使用预置元素构建丰富的 Internet 应 用程序。
2020/10/18
3． 起始页项目
2020/10/18
2020/10/18
4． 工作区
文档工具栏
面 板
文档窗口
组
文 件 面 板
8.1.4 站点的应用与管理
• 在Dreamweaver 中包括两种站点： • 远程站点：服务器上组成 Web 站点的文件，
用于个使用者进行网上浏览。 • 本地站点：与远程站点上的文件对应的本
2020/10/18
4． 调整图像
• ⑴裁剪 • ⑵亮度/对比度 • ⑶锐化
2020/10/18
8.2.5 设置超级链接
• 1．创建链接 • （1）链接到其它文档或文件（如图形、影
片、PDF 或声音文件）的链接。 • （2）命名锚记链接，此类链接跳转至文档
内的特定位置 • （3）电子邮件链接 • （4）空链接和脚本链接
本章小节
• 本章介绍了使用Dreamweaver的基本操作方 法，包括安装，网站的创建，网页元素的 添加，并以用户注册为例简单介绍了动态 网页设计的主要元素的设置。希望通过本 章的学习能够使读者对Dreamweaver的使用 有一定的了解，并能够自行设计并实现网 站的创建工作。
2020/10/18
8.1Dreamweaver简介
• Dreamweaver是美国MACROMEDIA公司（因 Adobe 和 Macromedia 合而为一，即新的 Adobe 公司）开发的集网页制作和管理网站 于一身的所见即所得网页编辑器，
2020/10/18
8.1.3 Dreamweaver界面简介
地磁盘上的文件。在最常见的 Dreamweaver 工作流程中，用户在本地磁盘上编辑文件， 然后将它们上传到远程站点。
2020/10/18
1．创建站点
2020/10/18
2．站点布局
• 网站设计初始需要设计人员对网站的主题 进行规划，网站必须主题鲜明，有层次感。 一般的网站中的网页设计不多于三层，这 样，用户可以方便地从主页中快速的找到 连接网站中的其他网页的途径。
• 1． 工作区布局选择 • 可以使用【首选参数】对话框切换到
一种不同的工作区。
2020/10/18
两种工作区的主要特点是
• 设计人员工作区是一个使用 MDI（多文档界面） 的集成工作区，其中全部【文档】窗口和面板被 集成在一个更大的应用程序窗口中，并将面板组 停靠在右侧。本章的界面都使用此类工作区。
• （1）设置主页 • （2）查看站点地图
2020/10/18
8.2 Dreamweaver基本操作
• 8.2.1 新建并保存网页 • 1． 新建网页 • 2． 打开网页 • 3． 保存网页
2020/10/18
8.2.2 设置页标题
• 设置标题、背景颜色、文本颜色
2020/10/18
8.2.3 添加文字及格式设置
• 1． 添加文字 • 2． 文字颜色设置
2020/10/18
3． 设置或更改字体：
2020/10/18
8.2.4 添加图像
• Web 页中通常使用的只有三种，即 GIF、 JPEG 和 PNG。
2020/10/18
三种文件的特点
• GIF（图形交换格式）文件最多使用 256 种颜色，最适合显示色调不连 续或具有大面积单一颜色的图像，例如导航条、按钮、图标、徽标或 其它具有统一色彩和色调的图像。
2020/10/18
2． 链接的字体显示
2020/10/18
3． 为图片设置超级链接
• 图像地图指已被分为多个区域（或称【热 点】）的图像；当用户单击某个热点时， 会发生某种操作（例如，打开一个新文 件）。
2020/10/18
8.2.6插入flash
• Flash文件的文件类型
• （1）Flash 文件 (.fla) • （2）Flash SWF 文件 (.swf) • （3）Flash 模板 (.swt) • （4）Flash 元素 (.swc)
2020/10/18
2． 控制具有链接的框架内容
• 要在一个框架中使用链接以打开另一个框架中的 文档，必须设置链接目标。链接的target属性指定 在其中打开链接的内容的框架或窗口。
• 在目标的下拉列表框中有以下四个固有选项，其含义是： • _blank 在新的浏览器窗口中打开链接的文档，同时保持当
前窗口不变。 • _parent 在显示链接的框架的父框架集中打开链接的文档，
同时替换整个框架集。 • _self 在当前框架中打开链接，同时替换该框架中的内容。 • _top 在当前浏览器窗口中打开链接的文档，同时替换所有
框架。
2020/10/18
8.2.9 表单的使用
• 典型例子:
2020/10/18
2020/10/18
8.4.1创建站点
2020/10/18
8.4.2创建数据库
• yhxx.mdb
2020/10/18
8.4.3登录表单网页设计
• 1. 登录表单的页面设计
• 2. 连接数据库
2020/10/18
Biblioteka Baidu
3. 登录用户设定
2020/10/18
8.4.4注册表单网页设计
2020/10/18
</html>
2020/10/18
8.3.2 将网页上传发布
2020/10/18
8.4创建用户登录动态网页
• 动态网页一般以数据库技术为基础，当用 户请求时，服务器从数据库中获取信息并 返回一个完整的网页。采用动态网页技术 的网站可以实现更多的功能，如用户注册、 用户登录、在线调查、用户管理、订单管 理等等。
•谢谢
• JPEG（联合图像专家组标准）文件格式是用于摄影或连续色调图像的 高级格式，这是因为 JPEG 文件可以包含数百万种颜色。随着 JPEG 文 件品质的提高，文件的大小和下载时间也会随之增加。通常可以通过 压缩 JPEG 文件在图像品质和文件大小之间达到良好的平衡。
• PNG（可移植网络图形）文件格式是一种替代 GIF 格式的无专利权限 制的格式，它包括对索引色、灰度、真彩色图像以及 alpha 通道透明 的支持。PNG 是 Macromedia Fireworks 固有的文件格式。PNG 文件可 保留所有原始层、矢量、颜色和效果信息（例如阴影），并且在任何 时候所有元素都是可以完全编辑的。文件必须具有 .png 文件扩展名才 能被 Dreamweaver 识别为 PNG 文件。
2020/10/18
8.2.7 表格的应用
• 1． 插入表格
• 2． 设置表格属性 • 3． 拆分和合并单元格
2020/10/18
4．布局模式
• （1）切换到【布局】模式 • （2）绘制布局表格 • （3）绘制布局单元格
2020/10/18
8.2.8 框架在网页上的应用
• 1． 创建框架
• 设计框架集
2. 插入表单对象
• （1）表单区域 • （2）文本字段 • （3）单选按钮 • （4）按钮 • （5）插入图像按钮 • （6）复选框
2020/10/18
8.2.9 层的概念
• 1． 插入层
2020/10/18
8.2.10 利用行为制作动态效果
• 1． 播放声音 • 2． 打开浏览器窗口
• 3． 弹出消息框
2020/10/18
说明
• 本节将以常见的用户注册为例介绍动态网页的设 计方法。服务器的架设方法在8.3节中已有详细描 述，将继续采用IIS配置服务器端程序，并使用ASP 技术设计动态网页，用Access2000设计后台数据 库。
• 在这个用户注册网站中包括四个网页，index.asp 页面用于用户登录输入用户名和密码；login.asp用 户用户注册信息的输入；welcome.asp用于成功登 录和成功注册的跳转信息显示；error.asp页面用于 用户密码错误时的信息显示。
第八章 Dreamweaver的操作
本章学习重点
1. 了解Dreamweaver的特点 2. 掌握Dreamweaver中插入多种媒体的方法，包
括文字、图像、声音、flash等等 3. 掌握超级链接的设置 4. 掌握Dreamweaver中表格的基本操作 5. 掌握Dreamweaver中布局表格的使用技巧 6. 掌握Dreamweaver中框架的操作 7. 掌握Dreamweaver的层、行为、时间轴的概念 8. 了解网站发布的基本方法
•2020/图10/188-47 【消息】文本框
• 控制 Shockwave 或 Flash
2020/10/18
8.2.11使用时间轴制作DHTML
• 图层漂浮路线
2020/10/18
8.2.12 使用样式表CSS
• 1．创建新的 CSS 样式表 • 2．使用CSS改变超级链接的显示效果
2020/10/18
2020/10/18
1． 创建和插入 Flash 按钮
2020/10/18
2．插入 Flash 文本对象
2020/10/18
3．插入 Flash 影片
• 插入 SWF 文件的步骤如下： • （1）在【文档】窗口的【设计】视图中，将插入
点放置在需要插入影片的地方。
• （2）在【插入】栏的【常用】类别中，选择【媒 体】，然后单击【插入 Flash】图标。或者选择 【插入】→【媒体】→【Flash】。
• 编码人员工作区是同样的集成工作区，但是将面 板组停靠在左侧，布局类似于 Macromedia HomeSite 和 Macromedia ColdFusion Studio 所用的 布局，而且【文档】窗口在默认情况下显示【代 码】视图。建议 HomeSite 或 ColdFusion Studio 用 户以及其他需要使用熟悉的工作区布局的手工编 码人员使用这种布局。
8.3创建自己的站点
• 1．确认安装IIS
2020/10/18
2．设置Web服务器
2020/10/18
3．设置站点并浏览
2020/10/18
测试
• （2）静态网页测试
• （3）动态网页测试
<html> <body> <% response.write("Hello World!") %> </body>
2020/10/18
• 1．插入图像占位符 • 将光标定在需要插入图形的地方；选择：
插入图像占位符按钮 即出现图像占位符 对话框
• 2、替换占位符，插入图像
2020/10/18
3．直接插入图像
• 用户可以从工具栏中选择按钮【图像】， 在弹出的如图8-17所示的插入图像对话框中 选择图像的文件并插入图像。
• （3）在显示的对话框中，选择需要加入的Flash 文件 (.swf)。Flash 占位符随即出现在【文档】窗 口中。
• （4）在【文档】窗口中，单击 Flash 占位符以选 择要预览的 2020/10/18 Flash 影片。
4．插入 Flash 元素
• 使用 Dreamweaver，设计者可以在文档中插 入 Flash 元素。Flash 元素使设计者可以快速、 方便地使用预置元素构建丰富的 Internet 应 用程序。
2020/10/18
3． 起始页项目
2020/10/18
2020/10/18
4． 工作区
文档工具栏
面 板
文档窗口
组
文 件 面 板
8.1.4 站点的应用与管理
• 在Dreamweaver 中包括两种站点： • 远程站点：服务器上组成 Web 站点的文件，
用于个使用者进行网上浏览。 • 本地站点：与远程站点上的文件对应的本
2020/10/18
4． 调整图像
• ⑴裁剪 • ⑵亮度/对比度 • ⑶锐化
2020/10/18
8.2.5 设置超级链接
• 1．创建链接 • （1）链接到其它文档或文件（如图形、影
片、PDF 或声音文件）的链接。 • （2）命名锚记链接，此类链接跳转至文档
内的特定位置 • （3）电子邮件链接 • （4）空链接和脚本链接
本章小节
• 本章介绍了使用Dreamweaver的基本操作方 法，包括安装，网站的创建，网页元素的 添加，并以用户注册为例简单介绍了动态 网页设计的主要元素的设置。希望通过本 章的学习能够使读者对Dreamweaver的使用 有一定的了解，并能够自行设计并实现网 站的创建工作。
2020/10/18