Link:INB Home|INB English| INB русский язык|INB العربية|INB Türkiye|INB فارسی|INB Español|INB Français|INB Português|INB Deutsch|INB 國語|INB 中文|INB 日本语|INB 한국어|INB ภาษาไทย|INB tiếng Việt||dreamweaver tutorial Making sliding menus
INB English forum
Welcome to (Industry & Native boffin) The industrial age here is full of fighting spirit, you and I both through this network space with Native biological spirit boffin came to the mad labs. home INBforum.com, come and join us Permanent name: inb-english.forumotion.com
INB English forum
Welcome to (Industry & Native boffin) The industrial age here is full of fighting spirit, you and I both through this network space with Native biological spirit boffin came to the mad labs. home INBforum.com, come and join us Permanent name: inb-english.forumotion.com
INB English forum

Welcome to (Industry & Native boffin) The industrial age here is full of fighting spirit, you and I both through this network space with Native biological spirit boffin came to the mad labs. home INBforum.com, Permanent name: inb-english.forumotion.com


You are not connected. Please login or register

《《《《《《《上一页INBforum   Go down

上一页INBforum》》》》》》》View previous topic View next topic Go down  Message [Page 1 of 1]

1dreamweaver tutorial Making sliding menus Empty dreamweaver tutorial Making sliding menus Thu Dec 05, 2013 4:27 am

Admin

Admin
Admin
1 . In a new blank document dw ( or open the page you want to add an effect ) .

2 . Set up your own css style.

3 . Insert a long 500pix form on the page ( here Description : Insert a table is intended to maintain the relative position of the control layer unchanged at different resolutions , if you have not done before the relevant settings page , then this department you may want to fee -point effort tidy your page structure ) .

4 . Move the cursor into the form , click the menu [Insert - Layer ] to insert a layer of a long 500 high 20 named layer1.

5. Then the cursor is placed in layers layer1, click on the menu [ insert - layer ] and then insert a long 500 high 130 layers layer2; layer2 and the properties of the left and right margins are set to 0, and assign it one of your favorite background color.

6. Repeat steps 5 and then , and then insert a layer layer3, the usefulness of this layer is nothing special in my this tutorial, I was just a few buttons in order to place it . Finally, I opened up as shown :


TIPS: The goal here is to give the front of the layer you want to add a sliding shutter only when I click the layer before you this from the bottom layers slowly sliding out .

Now , before formally entering into the production process today, we want to make a sliding menu.

    1 Let us now repeat the above step 5 , and then insert a layer layer4, set the layer properties to width 500 , 150 high , and just happens to be the height of layer2 and layer3 , and to adjust to the other two layers layer4 a layer below. Figure:


Then we click on the layer in front of him layer2 eyes closed , so it allows us to see the layer below layer4.

    2 At this time , we click ALT + F9 to open the Timeline panel , DW has been added to the default Timeline Timeline1 for us, then we have to check our sliding layer layer4, above right click and select [ Add to Timeline ] at this point we can see the layers layer4 we just enacted in the Timeline panel , which shows that we have added a success!


    3 Then we click on the first 15 frames on the timeline , the upper layers in the Properties panel layer4 margin adjusted to 150. Here, one can even make a sliding layer , you can drag the red box above the timeline slowly from 1 to 15 , you can see the layers you slowly slide from layer2 and layer3 below out !


    4 Well, now we 'll just give this set a sliding layer layer4 his actions can be activated even over a Smile Before that, I had in my add layer3 inserted a table , and set to layer4 two buttons.

 5 We first set the layer to activate the sliding action . Expand the selection button , go to the behavior of the panel , click to select [ Timeline - Play Timeline ] out of the menu at the DW will pop up a window , in the above drop-down menu, select timeline1.


    Then confirm onclick event in the behavior panel


    Well, here, you can preview it, when you click on the expand button , your layer will slowly slide out from the top down !

    6 how to see it Smile We give a simple layer is added on the closing action , is to click on the Close button hidden layers . Close Select button , go to the behavior of the panel , click on the menu, select [ Show hidden layer ] , select the pop form on layer4, then click the Hide button below, set it to hide , as shown :


    7 Well, then preview , click Close to start the discovery layer , there is no Smile But , there seems to be a problem , click again to expand , it seems no response , then we have an action is not set .

Repeat step 5 just expand the choice button to add the action [ Timeline - Go to Timeline frame ] , select timeline1 out of form in the drop-down menu , added a few frames .


    Well, the preview found this issue is resolved . But we still seem to ignore a problem, and click Close this layer is set to hide , and then click to expand did not respond. Still use the old way , to expand the button to add an action can be solved !

    8 Repeat step 5 , select [ Show hidden layer ] , and just step 6 Instead, this time we choose to display , determined to ensure that the behavior of the panel show the hidden layers of the time onclick. At the moment the behavior of the expand button panel as shown :


Well, the preview again , everything is normal !

So far , this effect is even completed , of course , everyone can play themselves to produce better results , but eventually, as long as we grasp the timeline with the use of an action , but the effect of all operational issues : )]

http://eng.inbforum.com

上一页INBforum   Go down

上一页INBforumView previous topic View next topic Back to top  Message [Page 1 of 1]

Permissions in this forum:
You cannot reply to topics in this forum

Copyright ©2009-2016 LTD Creative Commons License
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

IT:SINGLESERVGoogle谷歌翻译TranslateFORUMSOFTLAYERGoogle谷歌广告联盟AdSenseAsia

 

Free forum | ©phpBB | Free forum support | Report an abuse | Forumotion.com