Dreamweaver 8和Flash 8案例教程 网页中的文字、图像和导航条.ppt

用同样的方法可在“高”文本框内输入图像的高度。%表示图像占文档窗口的宽度和长度百分比，设置后，图像的大小会随文档窗口的大小自动进行调整。若不管页面大小，只想占页面宽度的30%，可在“宽”文本框中输入30%。 如果要还原图像大小的初始值，可单击 和 文字或删除“宽”和“高”文本框中的数值；要想将宽度和长度全部还原，则可单击“重设大小”按钮 。 图像的路径：“源文件”右边的文本框内给出了图像文件的路径。文件路径可以是绝对路径（“file:///D|/跟我学电脑/pic/2-1-1.jpg”图像文件不在站点文件夹内），也可以是相对路径（“pic/2-1-1.jpg”或“/pic/2-1-1.jpg”图像文件在站点文件夹内）。单击“源文件”右边的 按钮，即可弹出“选择图像源文件”对话框，利用它可以更换图像。 链接：“链接”右边的文本框内给出了被链接文件的路径。超级链接所指向的对象可以是一个网页，也可以是一个具体的文件。设置图像链接后，用户在浏览网页时只要单击该图像，即可打开相关的网页或文件。 建立超级链接有3种方法：直接输入链接地址URL；拖曳指向文件图标 到“站点”窗口要链接的文件上；单击该文本框右边的文件夹按钮 ，弹出“选择文件”对话框，利用该对话框选定文件。 给图像加文字提示说明：选中要加文字提示说明的图像，再在图像“属性”栏内的“替代”下拉列表框中输入图像的文字提示说明。用浏览器打开图像页面后，将鼠标移到加文字提示说明的图像上，或发生断链现象时，即可出现相应的文字提示说明，如图2-2-5所示。 图2-2-5 显示图像的文字提示说明 2.3.1 学习目标 “外设简介”网页的显示效果如图2-3-1所示。在该网页中，除了常见的文字和图像外，还包含一个由多个图像按钮组成的导航条。当鼠标移到该导航条中的任意一个按钮上时，该按钮中的文字会变为“单击进入”文字图像。 2.3 【案例6】“外设简介”网页 通过本实例的操作，要掌握在网页中插入导航条和水平线的基本操作方法。为导航条建立链接的操作将在第5章中进行介绍。 2.3.2 操作过程 图2-3-1 “外设简介”网页的显示效果 1．插入导航条 导航条实际上是一组动态图像按钮，单击一个导航按钮，可以在浏览器中弹出HTML文件和其他（如图像）文件。插入导航条的方法如下。 （1）单击“插入”（常规）面板中的“图像”快捷菜单中的“导航条”按钮 ，即可弹出“插入导航条”对话框，如图2-3-3所示。 2.3.3 相关知识 （2）在“插入导航条”对话框中进行各选项的设置。各选项的作用如下。 “导航条元件”列表框：给出导航条中各个动态图像按钮的名称（默认是图像的名称）。单击 按钮，可以增加动态图像按钮；选中动态图像按钮名称，再单击 按钮，可以删除该按钮；单击动态图像按钮名称，再单击 按钮或 按钮，可以改变动态图像按钮在导航条中的位置。 “项目名称”文本框：其内可输入各动态图像按钮的名称。 4个文本框与“浏览”按钮：定义鼠标4种状态时的图像。“状态图像”是按钮抬起状态，“鼠标经过图像”是鼠标移到按钮上时的图像，“按下图像”是鼠标按下时的图像，“按下时鼠标经过图像”是鼠标按下的过程中的图像。 “按下时，前往的URL”栏：在文本框内可输入与动态按钮链接的文件目录和名字，单击“浏览”按钮后，可选择链接的文件。在其右边的列表框内，可选择显示链接的页面的框架名字。 ? “选项”栏：第一个复选框用来确定是否要预先载入各个图像，第2个复选框用来确定是否要在页面载入的初始状态时显示鼠标按下状态的图像。 ? “插入”列表框：用来选择按钮放置的方式。选择“水平”选项，表示水平放置；选择“垂直”选项，表示垂直放置。 “使用表格”复选框：选中它后，表示使用表格将动态按钮框起来。 （3）完成上述设置后，单击“确定”按钮，即可在网页中插入导航条。 在页面内可以利用水平分割线将标题与文字或图像等对象分割，使页面的信息分布清晰。当然，用线条图像来分割，效果会更好些，但会使文件变大。插入水平线的方法如下。 2．插入水平线 （1）单击“插入”（HTML）面板中的“水平线” 按钮，即可在光标所在的行插入一条水平线，并弹出水平线的“属性”面板，如图2-3-4所示。 图2-3-4 水平线的“属性”面板 （2）在水平线“属性”面板内，“宽”文本框用于输入水平线的水平长度数值，“高”文本框用于输入水平线的垂直高度数值，单位有像素和百分数（%）两种选择。在“对齐”下拉列表框内，可以选择“默认”、“左对