dreamweaver如何制做网页页面折叠菜单实际效果根据

2021-01-20 19:58 jianzhan

  去过Microsoft的网站吗?(如图1)假如去过的话,那末你应当对这个站上面那条折叠式菜单的导航栏栏觉得赞美吧?你想过你也可以做出这样的实际效果吗?来吧,无需羡慕嫉妒了,动心比不上行動!

 

  折叠式菜单具体上是根据层的显示信息和掩藏,来做到这类实际效果的。如今就让我来讲说怎样制做吧。Follow Me!先开启DreamWeaver(DreamWeaver对层的适用很好的,也是做网页页面的必备专用工具)。

  第1步:先插进1个1行、多列的报表,方式:点击菜单上的“插进”(Insert),再选择“报表”(Table),在“行”(Row)中键入1,在列(Columns)中键入2,在点击“明确”。(如图2)以便美观大方,在报表的特性栏中,把宽和高各自设为200px和30px,而且把报表的边框色调所有设为#FFFFFF,随后各自点选两个模块格,在特性栏中将其边框色调设为#6699FF。在两个模块格内各自键入“材料实例教程”和“有关手机软件”。并在模块格特性栏中设为正中间对齐(顺带说1句:在DreamWeaver中不仅能够设置报表水平对齐方法,并且能够设置竖直部位对齐方法,在FrontPage就只能自身去写编码了,这也是我舍弃FrontPage应用DreamWeaver的缘故之1!)

  第2步,在“材料实例教程”模块格内插进1个层。方式:点击菜单上的“插进”(Insert),再选择“层”(Layer)。这时候,在模块格中便会出現1个层。这时候大家其实不令人满意层的部位,因此就来挪动它。层的挪动是是非非常非常容易的,选择层,随后功能键盘上的箭头键便可以挪动了,并且不会受到任何限定,呵呵,简易吧。一样,大家以便美观大方还可以在层的特性栏中设置它的尺寸,把宽和高各自设为100px和90px。

  第3步:在层中插进1个3行、1列的报表,方式同第1步。并把宽和高各自设为100px和90px,以铺满这个层。再把边框色调做如第1步的设定。在3个模块格中键入“DreamWeaver”、“FrontPage”和“HotDog”。并在特性栏中设为正中间对齐。

  第4步:最重要的1步来了!在层的特性栏中将“可视性”设为“掩藏”(Hidden),这样在开启网页页面时便看看不到这个层(如果看得见那还叫甚么折叠式呀?!)。接着选择模块格,随后点击DreamWeaver最下面那1条情况栏右侧的“显示信息个人行为”按钮(便是那个最正中间的,由两个圆圈构成的那个),来给模块格加上个人行为。这里要留意1个:1定要看好了!内行为栏的题目栏上1定如果显示信息“     ”才行,这表明你要加上的这个个人行为是加上在模块格上的,假如沒有的话那就要再次点选模块格,直至取得成功为止。(如图3)

  在“个人行为总体目标”(Events For)选中择1个适合的访问器,1般是挑选“IE 4.0”。随后点击左侧的“+”按钮,来加上个人行为。在弹出的菜单选中择“显示信息或掩藏层”(Show-Hid Layers), 在弹出的对话框选中择“Layer “Layer1””,便是大家刚刚加上的那个层了,再点击“显示信息”(Show),明确就可以了。这时候内行为栏中就出現了大家不久加上的这个个人行为了。接着点击“恶性事件”(Events)下面右侧的那个向下箭头按钮,在弹出菜单选中择“当电脑鼠标移上”(OnMouseOver)。好了,这样当网页页面加载时,这个层其实不会出現,仅有当大家的电脑鼠标移上模块格时才会出現,如何?酷吧?Stop!不必开心得太早了,不必忘了也有1个难题:电脑鼠标移开模块格以后这个层還是显示信息着的呀!其实不会全自动消退的。(不必把电脑上当做自动式的,你不告知它如何做时,它只是1堆废铁。^_^)实际上处理这个难题也很非常容易,大家能够加上显示信息层的个人行为,自然还可以加上掩藏层的个人行为呀!再点击“+”按钮,选择“显示信息或掩藏层”,還是选择“Layer1”,但是这次大家点一下的是“掩藏”(Hide)了,再明确。随后挑选“恶性事件”,点击“当电脑鼠标移开”(OnMouseOut)。OK!进行了。

  接下来,依照从第2步到第4步的全过程,对“有关手机软件”模块格开展实际操作。1切进行以后,按下“F12”,预览1下,呵呵,如何?简易的几步,就进行了这样炫的实际效果,1切還是DreamWeaver的贡献啊!(实际效果如图4)

  也有1个必须留意,层的挪动有时其实不能保证“所见即所得”的实际效果,在编写时原本部位很令人满意,可是预览时却1塌胡涂,这就要多预览几回,多改动,才可以获得好的实际效果。