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 MX navigation bar design effects
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, come and join us Permanent name:
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, Permanent name:

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]

1 dreamweaver tutorial MX navigation bar design effects on Thu Dec 05, 2013 4:32 am


On the navigation bar design has many effects, but you can browse through the effects of such a navigation bar do ? When the mouse over the navigation section , navigation column will be a layer of " Mask" obscured , while the mouse away " Mask" also will be removed . In fact, the effects can be set in two Dreamweaver MX CSS properties were controlled , and when the mouse is moved away navigation column to display the background image and set the navigation column of the table in response to mouse events that can be achieved. Of course, the background image is critical , you need a dynamic, alternating length of GIF images, you can use Fireworks produced the picture.
Production background renderings

Create a 170 × 17 pixels in Fireworks , the background is transparent document. Change the bucket fill color is light gray (# F1F1EF), select Toolbars "Rectangle Tool" tool , using the color will edit the viewing area to draw a rectangle. Change the fill color bucket again tan (# FF9900), in the same way the far left in the picture to draw a small rectangle ( Figure 1 ) . Finally, export GIF images and named mouseover.gif, later used as a mouse over the navigation column display background images .

In this good renderings based on the animated GIF renderings produced when the mouse away . Execute the menu "Windows / Frames" command to open the frame control panel , click on the four lower panel "New Frame" button to add four frames , add these four frames role is to: set from long to short light gray (# F1F1EF on each frame ) background layer image to achieve dynamic transition effects . Select the first frame of the picture in a light gray background layer picture, click the triangle button top right corner of the frame panel , perform pop-up menu "Copy to Frame" command , select "All Frames" in the "Copy to Frames" dialog box to confirm the light gray background layer image is copied to each frame , of course, do not forget to also be brown (# FF9900) rectangle layer images are copied to each frame. Select the first frame of the picture , use the mouse to adjust the picture size light gray background layer to edit the visible area of ​​the right side of 1/ 5 . Similarly adjusted 2,3,4 picture frame light gray background layer to disappear gradually shorter tan small rectangle on the left , select the bucket fill color to dark purple ( # 003366 ) , for the small rectangle filled brown color . To make the effect more smooth, double-click the Control Panel each frame time frame delay parameter , it is set to "8" ( Figure 2 ) . Finally, the export mouseout.gif animation files .

Production of special effects

In the edit page, execute the menu "Insert / Table" command to insert a separate table , the number of rows and columns determined by the number of navigation and set the table width to 172Pixels. Select the table , the shortcut "Ctrl + F3" to open its Properties window , change the "Border" parameter to "0", "CellSpace" parameter to " 1" ( Figure 3 ) . Set the background image for the navigation title bar "mouseover.gif", each of the other line "Bg" background color parameter "# CCFFFF" ( light blue ) , the background image is "mouseout.gif", and enter each line of navigation information ( Figure 4 ) .

Shortcut key "Shift + F11" to open the "CSS Styles" Control Panel , click on "New Style" button to display the " Mask " Undo background image in the pop-up "New Style" dialog box, define the mouse away navigation column " mouseout.gif " the CSS control name " Out ", is displayed when the mouse over the navigation column" mask " background image " mouseover.gif " the name of the CSS control " Over ". Check "Make Custom Style" Type Type and "This Document Onl" Define the type of setting these two items CSS Properties Background "Background Images" parameter as the background picture as "mouseout in the " Style definition for. " Box. gif " and " mouseover.gif ".

· Personal Portfolio hot designer application !
· Check website ranking recommend that you check with Chianz ranking
· " On it," formally launched welcome to participate in the discussion topic
· Global Cool is recommended to appreciate classical
· Vector material to provide strong backing to the designer
· Join designer forums, wonderful unlimited
· Design site Daquan , free sites included all design

Select the navigation section where each row in the table , click on the Properties panel "Quick Tag Editor" button in the code editor window background = "a.gif" the statement input :

onmouseout = "this.className = 'LeftOff'"
onmouseover = "this.className = 'LeftUp'" vAlign = bottom class = "leftoff"

Enter the code completion , navigation bar " Mask" will cover the effects achieved .]

View user profile

上一页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.



Free forum | © PunBB | Free forum support | Contact | Report an abuse |