当前位置：首页 -> 网页设计 -> DREAMWEAVER -> dreamweaver中网页折叠菜单的制作

dreamweaver中网页折叠菜单的制作

时间： 2021-07-31 作者：daque

　　去过microsoft的网站吗？(如图一)即使去过的话，那么你该当对这个站上头那条折叠式菜单的导航栏感触赞美吧？（“嘿嘿，仍旧老盖强。”“啊，果儿如何会飞呀？！”）你想过你也不妨做出如许的功效吗？来吧，不必向往了，心动不如动作！　　折叠式菜单本质上是经过层的表露和湮没，来到达这种功效的。此刻就让我来说说怎样创造吧。follow me!先翻开dreamweaver（dreamweaver对层的扶助很好的，也是做网页的必备东西）。　　第一步：先插入一个一条龙、两列的表格，本领：单击菜单上的“插入”（insert），再采用“表格”(table)，在“行”（row）中输出1，在列（columns）中输出2，在单击“决定”。（如图二）为了场面，在表格的属性栏中，把宽和高辨别设为200px和30px，而且把表格的边框脸色十足设为#ffffff，而后辨别点选两个单位格，在属性栏中将其边框脸色设为#6699ff。在两个单位格内辨别输出“材料教程”和“关系软硬件”。并在单位格属性栏中设为中央对齐（特地说一句：在dreamweaver中不只不妨设定表格程度对齐办法，并且不妨设定笔直场所对齐办法，在frontpage就只能本人去写代码了，这也是我停止frontpage运用dreamweaver的因为之一！）　　第二步，在“材料教程”单位格内插入一个层。本领：单击菜单上的“插入”(insert),再采用“层”(layer)。这时候，在单位格中便会展示一个层。这时候咱们并不合意层的场所，以是就来挪动它。层的挪动利害常简单的，采用层，而后按键盘上的箭镞键就不妨挪动了，并且不受任何控制，呵呵，大略吧。同样，咱们为了场面也不妨在层的属性栏中设定它的巨细，把宽和高辨别设为100px和90px。　　第三步：在层中插入一个三行、一列的表格，本领同第一步。并把宽和高辨别设为100px和90px,以填满这个层。再把边框脸色做如第一步的树立。在三个单位格中输出“dreamweaver”、“frontpage”和“hotdog”。并在属性栏中设为中央对齐。

dreamweaver中网页折叠菜单的制作图1

　　第四步：最要害的一步来了！在层的属性栏中将“可视”设为“湮没”（hidden），如许在翻开网页时便看不见这个层（假如看得见那还叫什么折叠式呀？！）。接着采用单位格，而后单击dreamweaver最底下那一条状况栏右边的“表露动作”按钮（即是谁人最中央的，由两个圈子构成的谁人），来给单位格增添动作。这边要提防一个：确定要看好了！在动作栏的题目栏上确定假如表露“<td>”才行，这证明你要增添的这个动作是增添在单位格上的，即使没有的话那就要从新点选单位格，直到胜利为止。（如图三）　　在“动作目的”(events for)中采用一个符合的欣赏器，普遍是采用“ie 4.0”。而后单击左边的“+”按钮，来增添动作。在弹出的菜单中采用“表露或湮没层”(show-hid layers)，在弹出的窗口中采用“layer “layer1””，即是咱们方才增添的谁人层了，再单击“表露”（show），决定就行了。这时候在动作栏中就展示了咱们方才增添的这个动作了。接着单击“事变”(events)底下右边的谁人向下箭镞按钮，在弹出菜单中采用“当鼠标移上”（onmouseover）。好了，如许当页面载时髦，这个层并不会展示，惟有当咱们的鼠标移上单位格时才会展示，还好吗？酷吧？stop！不要欣喜得太早了，不要忘了再有一个题目：鼠标移开单位格之后这个层仍旧表露着的呀！并不会机动消逝的。（不要把电脑当玉成机动的，你不报告它如何做时，它不过一堆废铁。^_^）本来处置这个题目也很简单，咱们不妨增添表露层的动作，固然也不妨增添湮没层的动作呀！再单击“+”按钮，采用“表露或湮没层”，仍旧采用“layer1”，然而这次咱们点击的是“湮没”（hide）了，再决定。而后采用“事变”，单击“当鼠标移开”(onmouseout)。ok！实行了。　　接下来，依照从第二步到第四步的进程，对“关系软硬件”单位格举行操纵。十足实行之后，按下“f12”，预览一下，呵呵，如何样？大略的几步，就实行了如许炫的功效，十足仍旧dreamweaver的贡献啊！(功效如图四)　　再有一个须要提防，层的挪动偶尔并不许做到“所见即所得”的功效，在编纂时从来场所很合意，然而预览时却乌烟瘴气，这就要多预览几次，多窜改，本领获得好的功效。

dreamweaver中网页折叠菜单的制作图2

dreamweaver中网页折叠菜单的制作

相关推荐

推荐下载

热门阅览

最新排行