![]() ![]() ![]() |
![]() |
The Menu ElementIn this tutorial you will learn how to use the WebYep Menu Element. Please use a website with WebYep installed for this tutorial (see Installation). Creating the page, inserting the WebYep Elements1. Create a new document "wy_menu.php". Please don't work on unnamed/unsaved documents! Create the file and immediately save it under the name "wy_menu.php" before continuing. 2. Insert two empty paragraphs. 3. Position the cursor in the first paragraph. 4. Insert a WebYep Logon Button (left most item in Dreamweaver's object palette, category "WebYep"). 5.. Position the cursor in the second paragraph. 6. Insert a table: one row, two columns, 10 pixels cellpadding. Your page should now look approximately like this – please make sure that you have enabled the display of the "Invisible Elements" (see Tutorials Introduction): 7. Position the cursor in the left table column. 8. Insert a WebYep Menu Element (fifth icon from the left in the object palette). 9. Position the cursor in the right table column. 10. Insert two empty paragraphs. 11. Position the cursor in the first of these two paragraphs. 12. In the inspector choose "Format: Heading 1" for this paragraph. 13. Insert a WebYep Short Text Element (second from left in the object palette). 14. Position the cursor in the second paragraph (of the right table column). 15. Insert a WebYep Long Text Element (third from left in the object palette). Your page should now look approximately like this: Configuring the WebYep Elements1. Click the WebYep Element in the left table column (the Menu Element). 2. Enter "Products" as the menu name in the inspector. Please make sure that "wy_menu.php" is listed as "Page (URL)". 3. Click the upper WebYep Element in the right table column (the Short Text Element). 4. Enter "Title" as the fieldname in the inspector. 5. Click the lower WebYep Element in the right table column (the Long Text Element). 6. Enter "Text" as the fieldname. Testing the pagePlease make sure you have transferred the webyep-system folder to your web server and have prepared WebYep (see Installation). 1. Transfer the page (wy_menu.php) to your web server (upload via FTP). 2. Open the page in your web browser by entering the appropriate address (URL) - e.g.:
3. Click the lock icon in the page (the WebYep Logon Button). 4. When the logon window pops up, enter the username and password you configured when installing WebYep (default is username "admin" and no password). 5. Click the Edit Button (the one with the pen icon) beneath the word "Products" (left table column) to edit the menu. 6. The menu editor window will pop up (see "Reference / Menu"). 7. Create three menu items by entering each items title in the textfield at the bottom of the window and clicking "add". 8. Save the menu by clicking "Save". 9. Click one of the menu items. 10. Enter title and text for this page by clicking the edit buttons beneath "Title" and "Text". Notice: You can manually create links to a menu item's target page by adding the following to the URL of the link:
where "x" stands for the ID of the menu item - e.g.:
You can find out the ID of a menu item by simply clicking the menu item and observing the URL displayed in your browsers address field. At the end of the displayed URL you should see the "WEBYEP_DI=xxx". The ID of a menu item has nothing to do with it's position in the menu (order)! ![]() |