第2章DreamweaverCS4创建基本图文网页

1、第2章DreamweaverCS4创建基本 图文网页 在页面中除了文字以外还有各种各 样的其他元素，如图像、动画和声音。文本是 网页中最常见、运用最广泛的元素之一，而图 像和多媒体是美化网页的重要对象。在 Dreamweaver CS3中可以非常方便地向网页中 插入图像和多媒体对象，从而使网页具有动态 效果，展示出丰富多彩的网络世界。 第2章DreamweaverCS4创建基本 图文网页 掌握本地站点的搭建 掌握基本图文网页的制作 掌握在网页中插入其他对象 掌握多媒体网页的制作 掌握图像热点链接的创建 掌握锚点链接的创建 第2章DreamweaverCS4创建基本 图文网页 本章共分_课时 案

2、例教学多媒体教学理论面授 课程范例文件：sample第2章 练习文件：exercise第2章 第2章DreamweaverCS4创建基本 图文网页 第2章DreamweaverCS4创建基本 图文网页 站点是文件和文件夹的集合，对应于网络服务 器上的Web站点，它提供了一种组织所有与Web站 点关联的文档的方法。通过在站点中组织文件，可 以利用Dreamweaver将站点上传到Web服务器管理 文件以及共享文件。 使用站点向导创建本地站点具体操作步骤如下 。 第2章DreamweaverCS4创建基本 图文网页 步骤1 在“管理 站点”对话框中单击 “新建”按钮，选择 “站点”命令，弹出 “三

3、合一的站点定义 为”对话框。 第2章DreamweaverCS4创建基本 图文网页 步骤2 在弹出的 对话框中，“您打算 为您的站点起什么名 字”文本框中输入“ 三合一” 。 第2章DreamweaverCS4创建基本 图文网页 步骤3 由于创建 的是静态的站点，所 以在这里选择“否， 我不想使用服务器技 术”选项，单击“下 一步”按钮，进入向 导的下一个界面。 第2章DreamweaverCS4创建基本 图文网页 步骤4 选择要定 义的本地根文件夹， 指定站点位置。单击 “下一步”按钮，进 入向导的下一个界面 。 第2章DreamweaverCS4创建基本 图文网页 步骤5 询问是否 使用服

4、务器，因为没 有使用远程服务器， 这里就选择“无”， 将整个站点制作完成 以后再上传，单击“ 下一步”按钮。 第2章DreamweaverCS4创建基本 图文网页 步骤6 显示站 点概要，单击“完 成”按钮，出现“ 管理站点”对话框 ，其中显示了新建 的站点。 第2章DreamweaverCS4创建基本 图文网页 文本是网页中最常见、运用最广泛的元素之 一，从某种意义上说文本是网页存在的基础，其信 息传载的有效性是其他任何一种网页元素都无法替 代的。 2.2.3 2.2.3 实际操作实际操作 创建基本文本网页的具体操作步骤如下。 第2章DreamweaverCS4创建基本 图文网页 步骤2 将

5、插 入点放置在要输 入文本的位置， 输入文字， 第2章DreamweaverCS4创建基本 图文网页 步骤3 选中 输入的文字，在 “属性”面板中 将“大小”设置 为13像素，“文 本颜色”设置为 #877349 。 第2章DreamweaverCS4创建基本 图文网页 步骤4 预览效果。 第2章DreamweaverCS4创建基本 图文网页 网页美化最简单最直接的方法就是在网页上 添加图像，图像不但使网页更加美观、形象和生 动，而且使网页中的内容更加丰富多彩。使用 Dreamweaver既可以在文档中插入图像，同时可以 将图像设置为文档的背景图像。 第2章DreamweaverCS4创建基本

6、 图文网页 第2章DreamweaverCS4创建基本 图文网页 2.3.2 2.3.2 核心知识核心知识 选中图像文件后，在属性面板中会显示图像的 属性 。 第2章DreamweaverCS4创建基本 图文网页 2.3.3 2.3.3 实际操作实际操作 。 第2章DreamweaverCS4创建基本 图文网页 步骤3 “选择图像源 文件”对话框 。 第2章DreamweaverCS4创建基本 图文网页 。 第2章DreamweaverCS4创建基本 图文网页 第2章DreamweaverCS4创建基本 图文网页 步骤6 在浏览器中 预览效果。 第2章DreamweaverCS4创建基本 图文

7、网页 第2章DreamweaverCS4创建基本 图文网页 2.4.2 2.4.2 核心知识核心知识 目前Flash动画是网页上最流行的动画格式， 大量用于网页中。插入Flash动画后，可以在“属 性”面板中设置其属性。 第2章DreamweaverCS4创建基本 图文网页 2.4.3 2.4.3 实际操作实际操作 Flash动画是在专门的Flash软件中完成的 ，在Dreamweaver中能将现有的Flash动画插入到 文档中，插入Flash的具体操作步骤如下。 步骤2 “选择文件”对话框。 第2章DreamweaverCS4创建基本 图文网页 步骤3 在对话框中选择相应的文件，单击“确 定

8、”按钮，插入SWF文件。 第2章DreamweaverCS4创建基本 图文网页 步骤4 预览效果。 第2章DreamweaverCS4创建基本 图文网页 第2章DreamweaverCS4创建基本 图文网页 。 第2章DreamweaverCS4创建基本 图文网页 。 第2章DreamweaverCS4创建基本 图文网页 文件头标签也就是通常说的Meta标签，文件头 标签在网页中是看不到的，它包含在网页中 .标签之间。所有包含在该标签 之间的内容在网页中都是不可见的。 第2章DreamweaverCS4创建基本 图文网页 。 第2章DreamweaverCS4创建基本 图文网页 预览效果。 第

9、2章DreamweaverCS4创建基本 图文网页 要使同一个图像的不同部分分别链接到不同的 目标，就需要使用图像热点链接。 2.6.1 2.6.1 简单讲评简单讲评 要使图像特定部分成为超级链接，就要在图像 中设置“热点”，然后再创建链接，这样当鼠标移 动到图像热点的时候会变成手的形状，当按下鼠标 的时候，页面就会自动跳转到或者打开设定的URL。 第2章DreamweaverCS4创建基本 图文网页 在“属性”面板中有3种热点工具，分别是“矩 形热点工具”、“椭圆形热点工具”和“多边形热 点工具”，可以根据图像的形状来选择热点工具。 第2章DreamweaverCS4创建基本 图文网页 步骤

10、2 选中图像，打开属性面板，在属性面板 中选择“矩形热点”工具 。 第2章DreamweaverCS4创建基本 图文网页 。 第2章DreamweaverCS4创建基本 图文网页 ，在弹出的“选择文件”对话框 选择相应的文件，“替换”文字设置为“活动简介 ” 。 第2章DreamweaverCS4创建基本 图文网页 在制作网页时，为了达到跳转到网页固定位置 的目的，可以使用锚点链接。使用命名锚记，不仅 可以跳转到其他网页中的指定位置，还可以跳转到 当前网页中指定位置。 第2章DreamweaverCS4创建基本 图文网页 2.7.1 2.7.1 简单讲评简单讲评 锚点链接通常用于含 有大量文本

11、的网页，创建 到命名锚记的链接过程分 为两部分。首先创建命名 锚记，然后创建到该命名 锚记的链接。 第2章DreamweaverCS4创建基本 图文网页 将插入点放置在要创建锚点链接的位置，选择“ 插入命名锚记”命令，弹出“命名锚记”对话框。在 “锚记名称”文本框中输入锚记名称，“锚记名称”可 以是数字或英文，或两者混合，最好要区分大小写。同 一个网页中可以有无数个锚记，但不能有相同的两个“ 锚记名称”。创建完锚记后，就要创建链接，如果链接 到当前页面内的某一部分，可以直接在“属性”面板的 “链接”文本框中输入“锚记名称”。 第2章DreamweaverCS4创建基本 图文网页 2.7.3 2

12、.7.3 实际操作实际操作 步骤2 在“锚记名称 ”文本框中输入1。 第2章DreamweaverCS4创建基本 图文网页 步骤3 单击“确定” 按钮，插入命名锚记。 第2章DreamweaverCS4创建基本 图文网页 步骤4 选中文字“ 展览服务”，在“属 性”面板中的“链接 ”文本框中输入1。 第2章DreamweaverCS4创建基本 图文网页 本章主要讲述了网页中的基本元素的使用，如 文本、图像和多媒体等，下面通过所学到的知识讲 述一个综合实例。具体操作步骤如下。 第2章DreamweaverCS4创建基本 图文网页 步骤2 在“选择文件 ”对话框中选择要插入的 SWF文件top.s

13、wf 。 第2章DreamweaverCS4创建基本 图文网页 步骤2 在“选择文件 ”对话框中选择要插入的 SWF文件top.swf 。 第2章DreamweaverCS4创建基本 图文网页 步骤11浏览效果 。 第2章DreamweaverCS4创建基本 图文网页 （1）_是文件和文件夹的集合，对应于 网络服务器上的Web站点，它提供了一种组织所有 与Web站点关联的文档的方法。 （2）大多数网页都采用_、_ 、_几种图像格式。 （3）目前_是网页上最流行的动画格 式，大量用于网页中。 第2章DreamweaverCS4创建基本 图文网页 （1）_本地站点是建立在本地计算机 硬盘中的一个文件夹，用于存放站点中所有的网页 、图像等对象。 （A）本地站点 （B）基本站点 （C）远程站点 第2章DreamweaverCS4创建基本 图文网页 （2）_是网页中最常见、运用最广泛 的元素之一，从某种意义上说它是网页存在的基础 ，其信息传载的有效性是其他任何一种网页元素都 无法替代的。 （A）图像 （B）文本 （C）多媒体 第2章DreamweaverCS4创建基本 图文网页 （3）在制作网页