Dreamweaver_CS4_课件与自学教程 4共7.ppt

1、除此之外，在Dreamweaver中也可以为图像的某一部分建立超链接，浏览网页时单击该部分图像可以打开链接的目标文档。如果要为图像的某一部分建立超链接，需要先在图像上建立热点，然后再为热点建立超链接。具体操作步骤如下：1) 选择网页中要建立热点超链接的图像。2) 在【属性】面板中选择建立热点的工具，在图像上建立热点，如图5-38所示。,图5-38 建立的热区,选择工具后在图像上拖曳鼠标，可以建立矩形热点。按住Shift键的同时拖曳鼠标，可以建立正方形热点。 选择工具后在图像上拖曳鼠标，可以建立圆形热点。 选择工具后在图像上移动并单击鼠标，可以建立多边形热点。 选择工具，可以选择并移动建立的热点

2、。,3) 使用工具选择建立的热点，在【属性】面板中为其建立超链接，如图5-39所示。在【链接】文本框中输入要链接的目标文档的URL地址。 在【目标】下拉列表中选择打开链接文档的目标窗口。 在【替换】文本框中输入热点的说明性文字。 4插入鼠标经过图像所谓鼠标经过图像，是指浏览网页时当光标指向图像上时该图像将被其它图像替代，从而产生动态效果。下面以实例的形式介绍如何在网页中插入鼠标经过图像。,图5-39 【属性】面板,例5-6制作动态按钮。1) 在【文件】面板中双击要编辑的网页将其打开。2) 在网页中要插入鼠标经过图像的位置处定位光标。3) 在【插入】工具栏中选择【常用】标签，单击右侧的小箭头，在

3、打开的菜单中选择【鼠标经过图像】命令，则弹出【插入鼠标经过图像】对话框，如图5-40所示。,图5-40 【插入鼠标经过图像】对话框,4) 在对话框中选择原始图像和鼠标经过图像，并可为鼠标经过图像建立超链接。【图像名称】：用于输入图像名称。【原始图像】：用于选择原始显示的图像。【鼠标经过图像】：用于选择替代原始图像的图像。【替换文本】：用于输入鼠标经过图像时的替代文本。【按下时，前往的URL】：用于为鼠标经过图像建立超链接。5) 单击按钮，即可插入鼠标经过图像，如图5-41所示为鼠标经过图像的浏览效果。,图5-41 鼠标经过图像的浏览效果,5创建导航条在网页中，导航条的作用不可忽视，使用它可以在

4、站点的网页之间自由跳转。正如它的名称一样，导航条为浏览者提供了导航作用。制作导航条之前，必须先制作每一个导航按钮的四种状态，准备好了四种状态的图片以后，就可以向网页中插入导航条了。,在网页中创建导航条的基本操作步骤如下：1) 在网页中要创建导航条的位置处定位光标。2) 在【插入】工具栏中选择【常用】标签，单击其中的、按钮，在打开的菜单中选择【导航条】命令，则弹出【插入导航条】对话框，如图5-42所示。,图5-42 【插入导航条】对话框,3)在对话框中进行选项设置。【导航条元件】：用于显示所有的导航元件。单击其上方的按钮或按钮，可以增加或减少列表中的导航元件。单击其右上角的按钮或按钮，可以调整导

5、航元件的排列顺序。 【项目名称】：用于输入导航元件的名称，所输入的名称将在上面的【导航条元件】中显示出来。,【状态图像】：用于输入一般状态下要显示的图像的路径和文件名。 【鼠标经过图像】：用于输入鼠标经过时要显示的图像的路径和文件名。 【按下图像】：用于输入按下鼠标时要显示的图像的路径和文件名。 【按下时鼠标经过图像】：用于输入单击一般状态图像后将光标移过时所显示的图像的路径和文件名。,【替换文本】：用于输入鼠标经过图像时的替代文本。 【按下时，前往的URL】：用于输入单击图像时要链接的目标文档的URL地址。在其后面的下拉列表中可以选择显示目标文档的窗口。 【选项】：用于设置图像的载入方式。

6、【插入】：用于选择要插入的导航条的方式，可以选择“水平”或“垂直”方式。4) 单击按钮，即可创建导航条，如图5-43所示。,图5-43 创建的导航条,5.4.3 插入Flash动画 在网页中使用Flash动画，可以使页面的内容丰富多彩，引人入胜，使网页增强活力与感染力。插入Flash动画的操作步骤如下：1) 在网页中要插入Flash动画的位置处定位光标。,2) 在【插入】工具栏中选择【常用】标签，单击其中的按钮，在打开的菜单中选择【SWF】命令，则弹出【选择文件】对话框。3) 在对话框中选择要插入的Flash动画。4) 单击按钮，将位于站点文件夹之外的动画复制到站点文件夹中后，则在网页中插入了

7、Flash动画，如图5-44所示。,图5-44 插入Flash动画,5) 在【属性】面板中设置Flash动画的属性。【宽】和【高】：用于设置Flash动画对象的宽度和高度，单位为像素。 【文件】：用于设置Flash动画对象的文件路径。 【源文件】：用于指定源文档(FLA文件)的路径。 【背景颜色】：用于设置Flash动画的背景颜色。 【循环】：选择该复选框，可以在浏览器中循环播放Flash动画。,【自动播放】：选择该复选框，则打开浏览器后可以自动播放Flash动画。 【垂直边距】：用于设置Flash动画对象与周围元素上下边界的距离。 【水平边距】：用于设置Flash动画对象与周围元素左右边界的

8、距离。 【品质】：用于设置Flash动画对象的播放质量。质量越高，动画的下载速度就越慢；质量越低，动画的下载速度就越快。 【比例】：用于设置Flash动画播放时的缩放比例。,【对齐】：设置Flash动画对象与周围元素的对齐方式，其与图像的对齐方式相同。 【Wmode(窗口模式)】：为SWF文件设置窗口模式的参数，以避免与DHTML元素冲突，默认值是不透明。 单击按钮，可以打开默认的Flash动画编辑软件更新“.fla”文件。 单击按钮，可以在编辑的页面中播放Flash动画。 单击按钮，则弹出【参数】对话框，在该对话框中可以输入传递给影片的附加参数。,5.5.1 使用表格在Dreamweaver

9、 CS4中，表格除了可以使大量的信息资料有组织地排列起来以便管理外，还可以用于网页布局，即将网页中的元素放到表格的单元格中进行网页排版，因此它是控制页面整体布局的重要工具。,5.5 网页的布局方法,1插入表格在网页中插入表格的操作步骤如下：1) 在网页中要插入表格的位置处定位光标。2) 在【插入】工具栏中选择【常用】标签，单击其中的按钮，则弹出【表格】对话框，如图5-45所示。,图5-45 【表格】对话框,3) 在对话框中进行选项设置。【行数】和【列】：用于设置插入表格的行数和列数。 【表格宽度】：用于设置表格的宽度，选择“像素”为单位时，表格的宽度为固定像素的宽度；选择“百分比”为单位时，表

10、格的宽度与浏览器窗口的宽度将保持相同的百分比。 【边框粗细】：用于设置表格的边框宽度。,【单元格边距】：用于设置表格中单元格内的元素距离单元格边框的距离。 【单元格间距】：用于设置表格中单元格之间的间距。 【标题】：用于设置表头的位置，分别为无、左、顶部、两者。 辅助功能中的【标题】：用于设置表格标题，该标题在表格的外侧。 【摘要】：用于描述表格的相关信息。4) 单击按钮，即可在网页中插入表格，如图5-46所示。,图5-46 插入的表格,在网页中插入表格后，可以向单元格中直接输入文本或插入其它的对象，如图像、动画等，还可以向表格中插入嵌套表格。当然，用户也可以从外部导入其它软件编辑的表格，如Excel电子表格等。,2表格的编辑操作插入到网页中