《网页设计实用教程》第06章.ppt

21世纪计算机系列教程,网页设计实用教程 电子教案,退出,第6章 Dreamweaver MX图层应用,学习目的： 创建层 选择层 插入层对象 移动层 对齐层 层与表格相互转换 层的属性,内容概述：,本章任务是要完成网页设计中常见的弹出式菜单的设计， 在Dreamweaver MX中文版中，弹出式菜单利用到了层的知识， 主要通过“鼠标经过”、“鼠标离去”事件 来触发层的显示或隐藏属性来实现。 通过完成该任务， 可以对层的概念、层的基本操作、层的应用技巧等作进一步了解， 从而熟悉Dreamweaver MX中文版的图层在网页设计中的应用。,很多专业性质的网页，使用了弹出式菜单的设计，这使得网面的内容更加丰富。 如图所示，是Microsoft的网站使用的两个弹出式菜单的例子。 如图6-1所示，是一个向下弹出菜单的例子， 如图6-2所示是一个向右弹出菜单的例子。 本小节将介绍一个类似的菜单设计的实例。,图6-2 向右弹出菜单,图6-1 向下弹出菜单,6.1 一个弹出式菜单设计的实例,6.1.1 设计弹出式菜单的效果图,弹出式菜单实际上是通过层的显示和隐藏来实现的。 接下来要利用层这种“显示/隐藏”属性， 在一个网页上实现弹出式菜单的功能，其效果如图6-3所示， 在IE中预览的效果如图6-4所示， 当浏览该网页，看到的只是一个菜单栏， 当鼠标移至菜单栏的各个栏目时，各栏目下的菜单出现， 当离开该栏目时，该栏目下的菜单消失。,图6-4 弹出式菜单在IE中预览的效果,图6-3 弹出式菜单图,6.1.2设计弹出式菜单的过程,弹出式菜单的具体设计过程 请参见书中步骤。 （1）输入文本“” （2）图6-5 （3）图6-6 （4）图6-7 （5）图6-8,6-5,6-6,6-7,6.1.2设计弹出式菜单的过程-2,（6）图6-9 （7）图6-10 （8）选中“特长班”几个字，“标签”面板行为（“行为面板” 行为） （9）图6-11,6-9,6-10,6-11,6.1.2设计弹出式菜单的过程-3,（10）图6-12 图6-13 （11）图6-14 图6-15 （12）图6-16,6-12,6-13,6-14,6-15,6-16,网页预览效果,上一节，介绍了一个下拉式弹出菜单的制作过程， 在Dreamweaver MX中，制作弹出式菜单， 主要是利用了层的显示与隐藏关系来实现的。 本小节将在此基础上对层的知识及应用作进一步介绍。,6.2 知识要点,6.2.1 创建层,可以使用插入、拖放、绘制等方法创建层， 一旦层被创建，就可以使用层控制面板、层属性面板来对它进行编辑。 创建层通常有3种方法： 插入层：先将光标停留在要插入层的位置，然后选择主菜单上的“插入”/“布局对象”“层”命令，这时在编辑窗口中光标位置处会出现一个层。 拖放层：用鼠标拖对象面板上的“绘制层”按钮，并在需要插入层的位置释放。 绘制层：单击对象面板上的“绘制层”按钮，当鼠标变成十字形状后，可以直接在编辑窗口上自由绘制层。如果要连续画多个层，单击对象面板上的“绘制层”按钮后，按下【Ctrl】键不放，就可连续绘制多个层。,“防止重叠”选项,要实现层的重叠，可以在层控制面板上将“防止重叠”选项取消选中，如图6-17 如果选中“防止重叠”选项，则不能创建重叠的层。如图6-18,6-17,6-18,层的重叠与层的嵌套,层的重叠的次序是用z轴来表示。 “z轴”上的值可正可负，也可为0。 层的属性面板上“z轴”上的值（ ） 层的嵌套 嵌套的层的属性与上一级的层的属性有一定的继承关系 重叠的层之间没有任何关系。 创建层的嵌套见图6-19 书上的方法有问题，应为重叠的层 复制第一个层Layer1，粘贴生成第二个Layer1,6-19,6.2.2选择层,选择层的目的是为了对层进行移动、调整大小等操作， 选择层包括选择一层，也包括选择多层。 层的选择方法有多种： 在编辑窗口中单击层的标志“”，如果层标志看不见，选择主菜单“查看”/“可视化助理”/“不可见元素”命令。 2004无? 单击层的激活标志“”，如果激活标志没有显示，单击层内任何地方可以使它显示出来。 将光标置于层内，然后在编辑窗口左下角状态栏中选择“”标记。 单击层边界，按住【Shift】可以同时选定多个层。 在层控制面板中单击层的名称，按住【Shift】可以同时选定多个层，如图6-20所示，被选中的层以黑色突出显示，未被选取的层以灰色显示。,6-20,6.2.3插入层对象,当光标移入层内时，可以插入网页元素，如文本、图像、层、表单、表格等。 在层中插入网页元素的方法与在编辑窗口中插入方法一样。 如图6-21所示是在层中插入表格的例子， 如图6-22所示是在层中插入表单的例子， 如图6-23所示是在层中插入图像的例子。,图6-21 插入表格,图6-22 插入表单,图6-23 插入图像,移动层，可以实现更自由的排版。移动层有多种方法， 无论采用哪一种，首先要确认层控制面板中的“防止重叠”选项未被选中，否则层的移动要受到一定程度的限制。 下面介绍几种层移动的方法： 鼠标 选定层，出现层激活标志“”，鼠标指向“”会变成十字形状，按住鼠标左键可以实现层的移动。 键盘 选定层，按键盘上的四个方向键，来移动层，每按一次，移动一个象素，如果同时按住【Shift】键，每次可移动10个象素的距离。,6.2.4 移动层,6.2.5 对齐层,当页面上的层很多时，可以使用层对齐的功能，让两个以上的层按照某一边界对齐， 如使所有的层的底边都排列在一条水平线上。,6.2.6 层与表格相互转换,虽然使用层来设计网页，有表格无法相比的优势，但不是所有的浏览器都支持。 由于层与表格可以相互转换， 因此使用层创建网页布局，然后将层转换为表格， 这样网页布局可以在绝大部分浏览器中观看。 层转换表格操作步骤： 主菜单修改转换层到表格，如图6-26 表格转换层操作步骤： 主菜单修改转换表格到层，如图6-27,图6-26,图6-27,6.2.7设置层属性,使用层属性面板可以指定层的名称和位置，同时设置其他层参数， 要正确地运用层来设计网页，必须了解层的属性和设置方法。 层的属性和设置方法分两种情况。 单个的层的属性，如图6-28 多个层的属性 ，如图6-29 层编号 “左”和“上” “宽”和“高”,图6-28,层的属性 “Z轴” “可见性” （“显示”） Default默认 Inherit 继承 Visible 可见 Hidden 隐藏 “背景图像” “背景颜色” “标签”-2004无 “溢出” Visible 可见，扩展层的大小，使层的所有内容都可见 Hidden 隐藏，保持层的大小，并裁掉所有超出层的内容 Scroll 滚动，不管层的内容是否超过层的大小都提供滚动条 Auto 滚动，只有在层内容超出其边界时显示滚动条 “剪辑” 多个层的属性 ，如图6-29 当选中两个或两个以上的层时，可以允许一次修改若干层,图6-29,6.3 本章小结 本章介绍了一个下拉式弹出菜单的制作过程， 在Dreamweaver MX中，制作弹出式菜单，主要是利用了层的显示与隐藏关系来实现的。 本章对层的知识及应用作了进一步介绍。 层是在制作网页经常用到的技巧，它主要起网页元素定位的作用， 关于层的基本操作 主要有创建层、选择层、插入层对象、移动层、对齐层、层与表格相互转换等。,6.4习题与操作题,习题【选择题】 （1）层的属性面板上“z轴”上的值（ ）。 A、为正 B、为负 C、为0 D、三者均可 （2）选定层，按键盘上的四个方向键，来移动层，每按一次，移动一个象素，如果同时按住【Shift】键，每次可移动（ ）个象素的距离。 A、1 B、8 C、10 D、4 （3）当在“行为面板”上规定一个“显示/隐藏层”事件时，行为的事件默认为（ ）。 A、onClick B、onMouseMove C、onMouseDown D、onLoad （4）如果记不清楚或不知道应用程序所在的位置，可用（ ）来启动应用程序。 A、“程序”菜单 B、桌面快捷图标 C、文件夹窗口 D、“查找”菜单 （5）单击层边界，按住（ ）可以同时选定多个层。 A、【Shift】 B、【Ctrl】 C、【Alt】 D、【Alt+Shift】 （6）层控制面板上的“显示”属性里（ ）选项，表明层可见。 A、Default B、Inherit C、Visible D、Hidden （7）层控制面板上的“溢出”属性里（ ）选项，表明只有在层内容超出其边界时显示滚条层可见。 A、Auto B、Hidden C、Visible D、Scroll,【填空题】 （1）创建层通常有（ ） 、（ ）、（ ）三种方法。 （2）如果层标志看不见，选择主菜单（ ）。 （3）用层设计弹出式菜单，在设计完后，所有的层应（ ）。 （4）如果要连续画多个层，单击对象面板上的绘制层按钮后，按下（ ）键不松手，就可连续绘制多个层。 【简答题】 （1）如何创建层？ （2）怎样设置层的大小并定位层？ （3）如何在层内插入其他网页元素？ （4）层的重叠与层的嵌套各有何特点？ （5）层包含哪些属性，各属性具体含义是什么？ （6）对齐层的操作有几种情况？ 操作题 （1）设计弹出式菜单。 （2）用表格的知识设计一个网页，并把表格转化为层进行编辑。,显示弹出式菜单,选整个网页(body) 添加行为“+” 显示弹出式菜单,显示弹出式菜单,选整个网页(body) 添加行