Creative DW Menus Pack Documentation
Creative DW Menu Pack is a suite of Dreamweaver extensions that seamlessly blends the flexibility of DHTML and the Flash look and feel to create beautifully web site menus. The extension comes with over 30 built in skins that can be customized to suit the design (colors, fonts, size) and include a smart resize system that preserves round corners and the gradient fills when you change the menu size.
Create a dynamic menu with PHP in Dreamweaver CS5
Ever wanted to create an unlimited levels menu using PHP and MySQL in Dreamweaver? Things are easier than it sounds if you use the Creative DW Menu Pack developer extension – you just need a database and the extension will do the rest. Let me show you how to do this with the latest Dreamweaver CS5.
- Requirements for this tutorial:
- Adobe Dreamweaver CS5 (you can also follow this tutorial with Dreamweaver CS3 or CS4)
- Creative DW Menus (download demo or buy a license)
- Testing server (XAMPP or WampServer) – here is a tutorial on how to setup a testing server.
How the result should look like
Creating a database structure for unlimited levels menu
After you have set up your testing server go to phpmyadmin and create a new database and a new table. We'll call the table main_menu and it will have the following columns :
- Id_menu used to identify each menu element (should be set as auto-increment)
- parented_menu if the button is in a submenu, then this id is used to identify the parent of the buttonLabel_menu for the buttons,
- Link_menu for the html connection,
- Target_menu in order to open in new window or parent tab,
- Highlight_menu is a custom feature that tells you on which page you are.
CREATE TABLE IF NOT EXISTS `main_menu` ( `id_menu` int(11) NOT NULL AUTO_INCREMENT, `parentID_menu` int(11) NOT NULL, `label_menu` varchar(100) NOT NULL, `link_menu` varchar(100) NOT NULL, `target_menu` varchar(10) NOT NULL, `highlight_menu` varchar(10) NOT NULL, PRIMARY KEY (`id_menu`) ) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=1 ;
If you are wondering how this structure works for unlimited menu levels, it's quite simple: the parentID_menu keeps the ID of the parent menu entry for each submenu. This means for example that if you have a 3 levels menu, on the third level you need to have the parentID of the second level menu entry and the second level menu entry has the parentID of the related menu entry on the first level. This way, no matter on how many levels you go, you will always know where the submenus should appear.
Populating the database
Next thing to do is to populate the database table with the actual menu entries. For this tutorial you cancopy this into the sql tab in phpmyadmin. If you want to fill in your own menu entries, just remember to stick to the structure of the columns above or else it will not work.
INSERT INTO `main_menu` (`id_menu`, `parentID_menu`, `label_menu`, `link_menu`, `target_menu`, `highlight_menu`) VALUES (1, 0, 'Home', '#', '_self', '1'), (2, 0, 'Accessories', '#', '_self', '2'), (3, 0, 'Products', '#', '_self', '3'), (4, 0, 'Contact', '#', '_self', '4'), (5, 2, 'Accessory1', '#', '_self', ''), (6, 3, 'Product1', '#', '_self', ''), (7, 3, 'Product2', '#', '_self', '');
Working with Dreamweaver and Creative DW Menus Pack Developer
In order to use Creative DW Menus Pack you have to install our Dreamweaver extension. If you have downloaded the demo you will find a .mxp file in the archive. Double click that file in order to start the installation for the DW Menus Pack or you can find you Adobe Extension Manager, click Install and locate the .mxp file from the archive. Press yes on the License Agreement and wait for the installation to finish. If you need a tutorial on how to install an extension here is how.
After the installation finishes go to Dreamweaver and in the Insert Panel, locate Creative Menus and choose a type for the menu you would like to have. If you need a tutorial on how to use and create Dreamweaver menus with Creative DW Menus Pack you can find here more tutorials.
In your new website defined with the testing server (PHP & MySQL server) create a new php file and save it as php-menu.php. You need to create a recordset in Dreamweaver and select your table.
- This is how you create a new recordset :
- Open the “Server behaviors” panel. ( to open that panel go to “Windows->Server Behaviors” from the top menu )
- Click on the “+” button and select recordset from the list
- Select your connection to the database and then the table that you’ve created on step one.
- Test the recordset to see if it displays the correct data from that table.
How to define a RecordSet
If you need help in defining a recordset I have shown those steps in this tutorial. Go to Insert Panel and choose Creative Menus and select Insert drop down menu. From the interface delete all the static buttons and press Insert Dynamic Item. You should have something like in the picture below.
Creative DW Menus
Including the menu in multiple files and propagate changes automatically
You will probably want to have the menus displayed in more pages, for example index.php, contact.php, products.php and so on. To make the menu show in these pages (and propagate any menu pages across the site in all pages, you should include the php-menu.php file using this line of code in each page, where you need the menu to appear:
<?php include_once('php-menu.php'); ?>
By including the php-menu.php file in each page, each time you make a change to the menu it will automatically appear there. Hope you enjoyed this tutorial and if you have any questions send them at: firstname.lastname@example.org.