“网页的设计有用的教程”第06章节.pptVIP

21世纪计算机系列教程 第6章  Dreamweaver MX图层应用 学习目的： 　创建层 　选择层 　插入层对象 　移动层 　对齐层 　层与表格相互转换 　层的属性 内容概述： 本章任务是要完成网页设计中常见的弹出式菜单的设计， 在Dreamweaver MX中文版中，弹出式菜单利用到了层的知识， 主要通过“鼠标经过”、“鼠标离去”事件 来触发层的显示或隐藏属性来实现。 通过完成该任务， 可以对层的概念、层的基本操作、层的应用技巧等作进一步了解， 从而熟悉Dreamweaver MX中文版的图层在网页设计中的应用。 6.1 一个弹出式菜单设计的实例 很多专业性质的网页，使用了弹出式菜单的设计，这使得网面的内容更加丰富。 如图所示，是Microsoft的网站使用的两个弹出式菜单的例子。 如图6-1所示，是一个向下弹出菜单的例子， 如图6-2所示是一个向右弹出菜单的例子。 本小节将介绍一个类似的菜单设计的实例。 6.1.1 设计弹出式菜单的效果图 弹出式菜单实际上是通过层的显示和隐藏来实现的。 接下来要利用层这种“显示/隐藏”属性， 在一个网页上实现弹出式菜单的功能，其效果如图6-3所示， 在IE中预览的效果如图6-4所示， 当浏览该网页，看到的只是一个菜单栏， 当鼠标移至菜单栏的各个栏目时，各栏目下的菜单出现， 当离开该栏目时，该栏目下的菜单消失。 6.1.2设计弹出式菜单的过程 弹出式菜单的具体设计过程 请参见书中步骤。 （1）输入文本“班级主页” （2）图6-5 （3）图6-6 （4）图6-7 （5）图6-8 6.1.2设计弹出式菜单的过程-2 （6）图6-9 （7）图6-10 （8）选中“特长班”几个字，“标签”面板?行为（“行为面板” ?行为） （9）图6-11 6.1.2设计弹出式菜单的过程-3 （10）图6-12 图6-13 （11）图6-14 图6-15 （12）图6-16 网页预览效果 6.2 知识要点 上一节，介绍了一个下拉式弹出菜单的制作过程， 在Dreamweaver MX中，制作弹出式菜单， 主要是利用了层的显示与隐藏关系来实现的。 本小节将在此基础上对层的知识及应用作进一步介绍。 6.2.1 创建层 可以使用插入、拖放、绘制等方法创建层， 一旦层被创建，就可以使用层控制面板、层属性面板来对它进行编辑。 创建层通常有3种方法： 插入层：先将光标停留在要插入层的位置，然后选择主菜单上的“插入”/“布局对象”“层”命令，这时在编辑窗口中光标位置处会出现一个层。 拖放层：用鼠标拖对象面板上的“绘制层”按钮，并在需要插入层的位置释放。 绘制层：单击对象面板上的“绘制层”按钮，当鼠标变成十字形状后，可以直接在编辑窗口上自由绘制层。如果要连续画多个层，单击对象面板上的“绘制层”按钮后，按下【Ctrl】键不放，就可连续绘制多个层。 “防止重叠”选项 要实现层的重叠，可以在层控制面板上将“防止重叠”选项取消选中，如图6-17 如果选中“防止重叠”选项，则不能创建重叠的层。如图6-18 层的重叠与层的嵌套 层的重叠的次序是用z轴来表示。 “z轴”上的值可正可负，也可为0。 层的属性面板上“z轴”上的值（　　　） 层的嵌套 嵌套的层的属性与上一级的层的属性有一定的继承关系 重叠的层之间没有任何关系。 创建层的嵌套见图6-19 书上的方法有问题，应为重叠的层 复制第一个层Layer1，粘贴生成第二个Layer1 6.2.2选择层 选择层的目的是为了对层进行移动、调整大小等操作， 选择层包括选择一层，也包括选择多层。 层的选择方法有多种： 在编辑窗口中单击层的标志“”，如果层标志看不见，选择主菜单“查看”/“可视化助理”/“不可见元素”命令。 2004无? 单击层的激活标志“”，如果激活标志没有显示，单击层内任何地方可以使它显示出来。 将光标置于层内，然后在编辑窗口左下角状态栏中选择“div”标记。 单击层边界，按住【Shift】可以同时选定多个层。 在层控制面板中单击层的名称，按住【Shift】可以同时选定多个层，如图6-20所示，被选中的层以黑色突出显示，未被选取的层以灰色显示。 6.2.3插入层对象 当光标移入层内时，可以插入网页元素，如文本、图像、层、表单、表格等。 在层中插入网页元素的方法与在编辑窗口中插入方法一样。 如图6-21所示是在层中插入表格的例子， 如图6-22所示是在层中插入表单的例子， 如图6-23所示是在层中插入图像的例子。 6.2.5 对齐层 当页面上的层很多时，可以使用层对齐的功能，让两个以上的层按照某一边界对齐， 如使所有的层的底边都排列在一条水平线上。 6.2.6