多媒体CAI课件制作技术与应用 第2版 工业和信息化普通高等教育“十二五”规划教材立项项目 教学课件 ppt 作者 杨青 郑世珏 第7章_Dreamweaver的操作

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