第7章-Dreamweaver的操作多媒体CAI课件制作技术与应用(第2版)

第八章Dreamweaver的操作第八章Dreamweaver的操作12022/11/5本章学习重点 了解Dreamweaver的特点 掌握Dreamweaver中插入多种媒体的方法，包 括文字、图像、声音、flash等等 掌握超级链接的设置 掌握Dreamweaver中表格的基本操作 掌握Dreamweaver中布局表格的使用技巧 掌握Dreamweaver中框架的操作 掌握Dreamweaver的层、行为、时间轴的概念 了解网站发布的基本方法2022/11/2本章学习重点 了解Dreamweaver的22022/11/58.1Dreamweaver简介Dreamweaver是美国MACROMEDIA公司（因Adobe和Macromedia合而为一，即新的Adobe公司）开发的集网页制作和管理网站于一身的所见即所得网页编辑器，2022/11/28.1Dreamweaver简介Dream3第7章_Dreamweaver的操作多媒体CAI课件制作技术与应用(第2版)4第7章_Dreamweaver的操作多媒体CAI课件制作技术与应用(第2版)52022/11/5 8.1.3Dreamweaver界面简介 1．工作区布局选择可以使用【首选参数】对话框切换到一种不同的工作区。2022/11/2 8.1.3Dreamweaver界面62022/11/5两种工作区的主要特点是设计人员工作区是一个使用MDI（多文档界面）的集成工作区，其中全部【文档】窗口和面板被集成在一个更大的应用程序窗口中，并将面板组停靠在右侧。本章的界面都使用此类工作区。编码人员工作区是同样的集成工作区，但是将面板组停靠在左侧，布局类似于MacromediaHomeSite和MacromediaColdFusionStudio所用的布局，而且【文档】窗口在默认情况下显示【代码】视图。建议HomeSite或ColdFusionStudio用户以及其他需要使用熟悉的工作区布局的手工编码人员使用这种布局。2022/11/2两种工作区的主要特点是72022/11/5 3．起始页项目2022/11/2 3．起始页项目82022/11/5 4．工作区文件面板面板组文档窗口文档工具栏2022/11/2 4．工作区文件面板面板组文档窗口文档工92022/11/58.1.4站点的应用与管理在Dreamweaver中包括两种站点：远程站点：服务器上组成Web站点的文件，用于个使用者进行网上浏览。本地站点：与远程站点上的文件对应的本地磁盘上的文件。在最常见的Dreamweaver工作流程中，用户在本地磁盘上编辑文件，然后将它们上传到远程站点。2022/11/28.1.4站点的应用与管理在Dream102022/11/5 1．创建站点2022/11/2 1．创建站点112022/11/5 2．站点布局网站设计初始需要设计人员对网站的主题进行规划，网站必须主题鲜明，有层次感。一般的网站中的网页设计不多于三层，这样，用户可以方便地从主页中快速的找到连接网站中的其他网页的途径。 （1）设置主页 （2）查看站点地图2022/11/2 2．站点布局网站设计初始需要设计人员对网128.2Dreamweaver基本操作

8.2.1新建并保存网页1．新建网页2．打开网页3．保存网页2022/11/58.2Dreamweaver基本操作

8.2.1新建并保138.2.2设置页标题设置标题、背景颜色、文本颜色2022/11/58.2.2设置页标题设置标题、背景颜色、文本颜色2022148.2.3添加文字及格式设置1．添加文字2．文字颜色设置2022/11/58.2.3添加文字及格式设置1．添加文字2022/11/153．设置或更改字体：2022/11/53．设置或更改字体：2022/11/2168.2.4添加图像Web页中通常使用的只有三种，即GIF、JPEG和PNG。2022/11/58.2.4添加图像Web页中通常使用的只有三种，即GI17三种文件的特点GIF（图形交换格式）文件最多使用256种颜色，最适合显示色调不连续或具有大面积单一颜色的图像，例如导航条、按钮、图标、徽标或其它具有统一色彩和色调的图像。JPEG（联合图像专家组标准）文件格式是用于摄影或连续色调图像的高级格式，这是因为JPEG文件可以包含数百万种颜色。随着JPEG文件品质的提高，文件的大小和下载时间也会随之增加。通常可以通过压缩JPEG文件在图像品质和文件大小之间达到良好的平衡。PNG（可移植网络图形）文件格式是一种替代GIF格式的无专利权限制的格式，它包括对索引色、灰度、真彩色图像以及alpha通道透明的支持。PNG是MacromediaFireworks固有的文件格式。PNG文件可保留所有原始层、矢量、颜色和效果信息（例如阴影），并且在任何时候所有元素都是可以完全编辑的。文件必须具有.png文件扩展名才能被Dreamweaver识别为PNG文件。2022/11/5三种文件的特点GIF（图形交换格式）文件最多使用256种181．插入图像占位符将光标定在需要插入图形的地方；选择：插入图像占位符按钮即出现图像占位符对话框2、替换占位符，插入图像2022/11/51．插入图像占位符2022/11/2193．直接插入图像用户可以从工具栏中选择按钮【图像】，在弹出的如图8-17所示的插入图像对话框中选择图像的文件并插入图像。2022/11/53．直接插入图像用户可以从工具栏中选择按钮【图像】，在弹出204．调整图像⑴裁剪⑵亮度/对比度⑶锐化2022/11/54．调整图像⑴裁剪2022/11/2218.2.5设置超级链接1．创建链接（1）链接到其它文档或文件（如图形、影片、PDF或声音文件）的链接。（2）命名锚记链接，此类链接跳转至文档内的特定位置（3）电子邮件链接（4）空链接和脚本链接2022/11/58.2.5设置超级链接1．创建链接2022/11/2222．链接的字体显示2022/11/52．链接的字体显示2022/11/2233．为图片设置超级链接图像地图指已被分为多个区域（或称【热点】）的图像；当用户单击某个热点时，会发生某种操作（例如，打开一个新文件）。2022/11/53．为图片设置超级链接图像地图指已被分为多个区域（或称【热248.2.6插入flashFlash文件的文件类型（1）Flash文件(.fla)（2）FlashSWF文件(.swf)（3）Flash模板(.swt)（4）Flash元素(.swc)2022/11/58.2.6插入flashFlash文件的文件类型2022/1251．创建和插入Flash按钮2022/11/51．创建和插入Flash按钮2022/11/2262．插入Flash文本对象2022/11/52．插入Flash文本对象2022/11/2273．插入Flash影片插入SWF文件的步骤如下：（1）在【文档】窗口的【设计】视图中，将插入点放置在需要插入影片的地方。（2）在【插入】栏的【常用】类别中，选择【媒体】，然后单击【插入Flash】图标。或者选择【插入】→【媒体】→【Flash】。（3）在显示的对话框中，选择需要加入的Flash文件(.swf)。Flash占位符随即出现在【文档】窗口中。（4）在【文档】窗口中，单击Flash占位符以选择要预览的Flash影片。2022/11/53．插入Flash影片插入SWF文件的步骤如下：20284．插入Flash元素使用Dreamweaver，设计者可以在文档中插入Flash元素。Flash元素使设计者可以快速、方便地使用预置元素构建丰富的Internet应用程序。2022/11/54．插入Flash元素使用Dreamweaver，设计298.2.7表格的应用1．插入表格2．设置表格属性3．拆分和合并单元格2022/11/58.2.7表格的应用1．插入表格2022/11/2304．布局模式（1）切换到【布局】模式（2）绘制布局表格（3）绘制布局单元格2022/11/54．布局模式（1）切换到【布局】模式2022/11/2318.2.8框架在网页上的应用1．创建框架设计框架集2022/11/58.2.8框架在网页上的应用1．创建框架2022/11/322．控制具有链接的框架内容要在一个框架中使用链接以打开另一个框架中的文档，必须设置链接目标。链接的target属性指定在其中打开链接的内容的框架或窗口。在目标的下拉列表框中有以下四个固有选项，其含义是：_blank在新的浏览器窗口中打开链接的文档，同时保持当前窗口不变。_parent在显示链接的框架的父框架集中打开链接的文档，同时替换整个框架集。_self在当前框架中打开链接，同时替换该框架中的内容。_top在当前浏览器窗口中打开链接的文档，同时替换所有框架。2022/11/52．控制具有链接的框架内容要在一个框架中使用链接以打开另一338.2.9表单的使用典型例子:2022/11/58.2.9表单的使用典型例子:2022/11/2342.插入表单对象（1）表单区域（2）文本字段（3）单选按钮（4）按钮（5）插入图像按钮（6）复选框2022/11/52.插入表单对象（1）表单区域2022/11/2358.2.9层的概念1．插入层2022/11/58.2.9层的概念1．插入层2022/11/2368.2.10利用行为制作动态效果1．播放声音2．打开浏览器窗口3．弹出消息框图8-47

【消息】文本框2022/11/58.2.10利用行为制作动态效果1．播放声音2022/137控制Shockwave或Flash2022/11/5控制Shockwave或Flash2022/11/2388.2.11使用时间轴制作DHTML图层漂浮路线2022/11/58.2.11使用时间轴制作DHTML2022/11/2398.2.12使用样式表CSS1．创建新的CSS样式表2．使用CSS改变超级链接的显示效果2022/11/58.2.12使用样式表CSS1．创建新的CSS样式表2408.3创建自己的站点1．确认安装IIS2022/11/58.3创建自己的站点1．确认安装IIS2022/11/2412．设置Web服务器2022/11/52．设置Web服务器2022/11/2423．设置站点并浏览2022/11/53．设置站点并浏览2022/11/243测试（2）静态网页测试（3）动态网页测试2022/11/5<html><body><%response.write("HelloWorld!")%></body></html>测试（2）静态网页测试2022/11/2<html>448.3.2将网页上传发布2022/11/58.3.2将网页上传发布2022/11/2458.4创建用户登录动态网页动态网页一般以数据库技术为基础，当用户请求时，服务器从数据库中获取信息并返回一个完整的网页。采用动态网页技术的网站可以实现更多的功能，如用户注册、用户登录、在线调查、用户管理、订单管理等等。2022/11/58.4创建用户登录动态网页动态网页一般以数据库技术为基础，当46说明本节将以常见的用户注册为例介绍动态网页的设计方法。服务器的架设方法在8.3节中已有详细描述，将继续采用IIS配置服务器端程序，并使用ASP技术设计动态网页，用Access2000设计后台数据库。在这个用户注册网站中包括四个网页，index.asp页面用于用户登录输入用户名和密码；login.asp用户用户注册信息的输入；welcome.asp用于成功登录和成功注册的跳转信息显示；error.asp页面用于用户密码错误时的信息显示。2022/11/5说明本节将以常见的用户注册为例介绍动态网页的设计方法。服务器478.4.1创建站点2022/11/58.4.1创建站点2022/11/2488.4.2创建数据库yhxx.mdb2022/11/58.4.2创建数据库yhxx.mdb2022/11/2498.4.3登录表单网页设计1.登录表单的页面设计2.连接数据库2022/11/58.4.3登录表单网页设计1.登录表单的页面设计2022/503.登录用户设定2022/11/53.登录用户设定2022/11/2518.4.4注册表单网页设计2022/11/58.4.4注册表单网页设计2022/11/252本章小节本章介绍了使用Dreamweaver的基本操作方法，包括安装，网站的创建，网页元素的添加，并以用户注册为例简单介绍了动态网页设计的主要元素的设置。希望通过本章的学习能够使读者对Dreamweaver的使用有一定的了解，并能够自行设计并实现网站的创建工作。2022/11/5本章小节本章介绍了使用Dreamweaver的基本操作方法，53谢谢谢谢54第八章Dreamweaver的操作第八章Dreamweaver的操作552022/11/5本章学习重点 了解Dreamweaver的特点 掌握Dreamweaver中插入多种媒体的方法，包 括文字、图像、声音、flash等等 掌握超级链接的设置 掌握Dreamweaver中表格的基本操作 掌握Dreamweaver中布局表格的使用技巧 掌握Dreamweaver中框架的操作 掌握Dreamweaver的层、行为、时间轴的概念 了解网站发布的基本方法2022/11/2本章学习重点 了解Dreamweaver的562022/11/58.1Dreamweaver简介Dreamweaver是美国MACROMEDIA公司（因Adobe和Macromedia合而为一，即新的Adobe公司）开发的集网页制作和管理网站于一身的所见即所得网页编辑器，2022/11/28.1Dreamweaver简介Dream57第7章_Dreamweaver的操作多媒体CAI课件制作技术与应用(第2版)58第7章_Dreamweaver的操作多媒体CAI课件制作技术与应用(第2版)592022/11/5 8.1.3Dreamweaver界面简介 1．工作区布局选择可以使用【首选参数】对话框切换到一种不同的工作区。2022/11/2 8.1.3Dreamweaver界面602022/11/5两种工作区的主要特点是设计人员工作区是一个使用MDI（多文档界面）的集成工作区，其中全部【文档】窗口和面板被集成在一个更大的应用程序窗口中，并将面板组停靠在右侧。本章的界面都使用此类工作区。编码人员工作区是同样的集成工作区，但是将面板组停靠在左侧，布局类似于MacromediaHomeSite和MacromediaColdFusionStudio所用的布局，而且【文档】窗口在默认情况下显示【代码】视图。建议HomeSite或ColdFusionStudio用户以及其他需要使用熟悉的工作区布局的手工编码人员使用这种布局。2022/11/2两种工作区的主要特点是612022/11/5 3．起始页项目2022/11/2 3．起始页项目622022/11/5 4．工作区文件面板面板组文档窗口文档工具栏2022/11/2 4．工作区文件面板面板组文档窗口文档工632022/11/58.1.4站点的应用与管理在Dreamweaver中包括两种站点：远程站点：服务器上组成Web站点的文件，用于个使用者进行网上浏览。本地站点：与远程站点上的文件对应的本地磁盘上的文件。在最常见的Dreamweaver工作流程中，用户在本地磁盘上编辑文件，然后将它们上传到远程站点。2022/11/28.1.4站点的应用与管理在Dream642022/11/5 1．创建站点2022/11/2 1．创建站点652022/11/5 2．站点布局网站设计初始需要设计人员对网站的主题进行规划，网站必须主题鲜明，有层次感。一般的网站中的网页设计不多于三层，这样，用户可以方便地从主页中快速的找到连接网站中的其他网页的途径。 （1）设置主页 （2）查看站点地图2022/11/2 2．站点布局网站设计初始需要设计人员对网668.2Dreamweaver基本操作

8.2.1新建并保存网页1．新建网页2．打开网页3．保存网页2022/11/58.2Dreamweaver基本操作

8.2.1新建并保678.2.2设置页标题设置标题、背景颜色、文本颜色2022/11/58.2.2设置页标题设置标题、背景颜色、文本颜色2022688.2.3添加文字及格式设置1．添加文字2．文字颜色设置2022/11/58.2.3添加文字及格式设置1．添加文字2022/11/693．设置或更改字体：2022/11/53．设置或更改字体：2022/11/2708.2.4添加图像Web页中通常使用的只有三种，即GIF、JPEG和PNG。2022/11/58.2.4添加图像Web页中通常使用的只有三种，即GI71三种文件的特点GIF（图形交换格式）文件最多使用256种颜色，最适合显示色调不连续或具有大面积单一颜色的图像，例如导航条、按钮、图标、徽标或其它具有统一色彩和色调的图像。JPEG（联合图像专家组标准）文件格式是用于摄影或连续色调图像的高级格式，这是因为JPEG文件可以包含数百万种颜色。随着JPEG文件品质的提高，文件的大小和下载时间也会随之增加。通常可以通过压缩JPEG文件在图像品质和文件大小之间达到良好的平衡。PNG（可移植网络图形）文件格式是一种替代GIF格式的无专利权限制的格式，它包括对索引色、灰度、真彩色图像以及alpha通道透明的支持。PNG是MacromediaFireworks固有的文件格式。PNG文件可保留所有原始层、矢量、颜色和效果信息（例如阴影），并且在任何时候所有元素都是可以完全编辑的。文件必须具有.png文件扩展名才能被Dreamweaver识别为PNG文件。2022/11/5三种文件的特点GIF（图形交换格式）文件最多使用256种721．插入图像占位符将光标定在需要插入图形的地方；选择：插入图像占位符按钮即出现图像占位符对话框2、替换占位符，插入图像2022/11/51．插入图像占位符2022/11/2733．直接插入图像用户可以从工具栏中选择按钮【图像】，在弹出的如图8-17所示的插入图像对话框中选择图像的文件并插入图像。2022/11/53．直接插入图像用户可以从工具栏中选择按钮【图像】，在弹出744．调整图像⑴裁剪⑵亮度/对比度⑶锐化2022/11/54．调整图像⑴裁剪2022/11/2758.2.5设置超级链接1．创建链接（1）链接到其它文档或文件（如图形、影片、PDF或声音文件）的链接。（2）命名锚记链接，此类链接跳转至文档内的特定位置（3）电子邮件链接（4）空链接和脚本链接2022/11/58.2.5设置超级链接1．创建链接2022/11/2762．链接的字体显示2022/11/52．链接的字体显示2022/11/2773．为图片设置超级链接图像地图指已被分为多个区域（或称【热点】）的图像；当用户单击某个热点时，会发生某种操作（例如，打开一个新文件）。2022/11/53．为图片设置超级链接图像地图指已被分为多个区域（或称【热788.2.6插入flashFlash文件的文件类型（1）Flash文件(.fla)（2）FlashSWF文件(.swf)（3）Flash模板(.swt)（4）Flash元素(.swc)2022/11/58.2.6插入flashFlash文件的文件类型2022/1791．创建和插入Flash按钮2022/11/51．创建和插入Flash按钮2022/11/2802．插入Flash文本对象2022/11/52．插入Flash文本对象2022/11/2813．插入Flash影片插入SWF文件的步骤如下：（1）在【文档】窗口的【设计】视图中，将插入点放置在需要插入影片的地方。（2）在【插入】栏的【常用】类别中，选择【媒体】，然后单击【插入Flash】图标。或者选择【插入】→【媒体】→【Flash】。（3）在显示的对话框中，选择需要加入的Flash文件(.swf)。Flash占位符随即出现在【文档】窗口中。（4）在【文档】窗口中，单击Flash占位符以选择要预览的Flash影片。2022/11/53．插入Flash影片插入SWF文件的步骤如下：20824．插入Flash元素使用Dreamweaver，设计者可以在文档中插入Flash元素。Flash元素使设计者可以快速、方便地使用预置元素构建丰富的Internet应用程序。2022/11/54．插入Flash元素使用Dreamweaver，设计838.2.7表格的应用1．插入表格2．设置表格属性3．拆分和合并单元格2022/11/58.2.7表格的应用1．插入表格2022/11/2844．布局模式（1）切换到【布局】模式（2）绘制布局表格（3）绘制布局单元格2022/11/54．布局模式（1）切换到【布局】模式2022/11/2858.2.8框架在网页上的应用1．创建框架设计框架集2022/11/58.2.8框架在网页上的应用1．创建框架2022/11/862．控制具有链接的框架内容要在一个框架中使用链接以打开另一个框架中的文档，必须设置链接目标。链接的target属性指定在其中打开链接的内容的框架或窗口。在目标的下拉列表框中有以下四个固有选项，其含义是：_blank在新的浏览器窗口中打开链接的文档，同时保持当前窗口不变。_parent在显示链接的框架的父框架集中打开链接的文档，同时替换整个框架集。_self在当前框架中打开链接，同时替换该框架中的内容。_top在当前浏览器窗口中打开链接的文档，同时替换所有框架。2022/11/52．控制具有链接的框架内容要在一个框架中使用链接以打开另一878.2.9表单的使用典型例子:2022/11/58.2.9表单的使用典型例子:2022/11/2882.插入表单对象（1）表单区域（2）文本字段（3）单选按钮（4）按钮（5）插入图像按钮（6）复选框2022/11/52.插入表单对象（1）表单区域2022/11/2898.2.9层的概念1．插入层2022/11/58.2.9层的概念1．插入层2022/11/2908.2.10利用行为制作动态效果1．播放声音2．打开浏览器窗口3．弹出消息框图8-47

【消息】文本框2022/11/58.2.10利用行为制作动态效果1．播放声音2022/191控制Shockwave或Flash2022/11/5控制Shockwave或Flash2022/11/2928.2.11使用时间轴制作DHTML图层漂浮路线2022/11/58.2.11使用时间轴制作DHTML2022/11/2938.2.12使用样式表CSS1．创建新的CSS样式表2．使用CSS改变超级链接的显示效果2022/11/58.2.12使用样式表CSS1．创建新的CSS样式表2948.3创建自己的站点1．确认安装IIS2022/11/58.3