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 control page elements
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]

1 Dreamweaver Tutorial MX control page elements on Wed Dec 04, 2013 5:23 pm

Admin

avatar
Admin
When browsing Web pages with a drop-down menu , we often notice that when you change the display resolution , its position has not changed the drop-down menu , which is easy to overlook when we designed a web page , in fact, the precise positioning of page elements via CSS control after this point it is not hard to achieve it.


Establish new page main menu bar , execute the menu "Insert / Table" command to open the "Insert Table" dialog box , insert a line of multi- column table , table columns is determined by your menu entries , and set the "Cell Padding", "Cell Spacing " and " Border " parameters ( Figure 1 ) . Enter the text in the main navigation menu created table, select the table and text , use the keyboard shortcut "Ctrl + F3" to open its properties window , we can define a CSS font control to control the text attributes , adjust the relevant parameters.



CSS relative positioning of the menu bar to achieve the definition of a defined CSS relative positioning control , the relative positioning of the model ( the menu bar form ) is defined as the CSS property. So that the relative positioning of the browser to the top left corner as the origin of the model to create a new coordinate system. In this re- insert the relative positioning of the lower layer of the model , so that the relative positioning of the model relative to the positioning . And then use CSS to control layer inserted in the table can not be dragged to change its position can be input parameter values ​​L, T directly on its properties panel.

Open the "CSS Styles" panel , click on the "New Style" button in the pop-up "New Style" window to define a name for the . Pos CSS properties , and select "Make Custom Style" of "Type" type and the "This Document 0nl" the "Define" type "OK" to enter the "Style Defintion For. pos" window , select the "Positioning" is defined type as "Relative" OK. Select the menu bar form , the CSS control added to the Form menu bar is located. So that the relative positioning of the model ( table ) to create a new coordinate system , as long as we insert layer in which the drop-down menu , and set the layer contents and main menu mouse in response to events on the drop-down menu allows precise positioning .

Insert menu column cursor into the first column of the table , execute the menu "Insert / Layer" command to insert a new layer as " menu a " drop-down menu , click on the inner layers , the implementation of "Insert / Table" command to set the number of rows in the table , the number of columns and tables line width is set to " 0 ", the form background color for the preferences , enter the menu item text , set the text CSS control effects , and adjust the size of the menu . In the same way the other drop-down menus make the layer effects .



Set layer properties and mouse response events were selected layer Layer1, Layer2, Layer3, Layer4, in its Properties window of the "Vis" is replaced with "Hidden", these four layers hidden.

Select the main menu " menu a " use shortcut "Shift + F3" to open the "Behaviors" behavior window, click the "+" button to execute the menu "Show-Hide Layers" command , in the pop-up window, select "Layer ' Layer1 '", click on " Show " button, and then set its layers to " Hide ". This action represents the "Layer1" display, while the other layers are hidden. Finally, click the arrow to the right of the behavior under "Behaviors" window "Events" just defined , in the pop-up menu, select "onMouseOver" mouse response to the incident .



Other methods to produce the same effect drop-down menu when you "F12" preview, will find that even the resolution is changed , the position of the pull-down menu layer will not change]

View user profile 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 | © PunBB | Free forum support | Contact | Report an abuse | Free forum