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.
Tutorial: Create Vertical Menus in Dreamweaver using Creative DW Vertical Menu
In this tutorial we’re going to configure Creative DW Vertical Menu by configuring each tab step by step. We will go through:
- the General tab;
- the Layout tab;
- the Animation tab;
- the Text tab.
Finally, we’ll obtain an „.html” file which will contain our result – a vertical menu. I’m going to show you how the menu looks like after every step and as well a final version of it; like this, you’ll get a glimpse of the menu’s high customizability. In order to be able to do this tutorial, the first thing you have to do is install Creative DW Dropdown Menus extension on your computer; if you encounter any problems doing that, check out the “How to install an extension” tutorial. Another important thing you should consider is the creation of a website in Dreamweaver before you start the work; “How to create a website” can help you if any problems occur.
Here is how the result should look like (rollover the menu to see it working):
Insert a new menu in the page
1. Open Dreamweaver and create a new file; save it under the name of your choice.
2. Insert a new menu from the Insert bar (the top of the page).
Configuring the General tab
3. Let’s start with some general properties; apply the next changes to the selected parameters.
4. Let’s define the menu structure now, by accessing the top left panel. Click on „Menu Items” and then on „Edit item”. You should get a new window like the one below:
5. Let’s modify the structure of the menu. Click on the green plus from the bottom left and add a new item – name it Scroller.
6. By using the arrows in the menu place the new item in the following position:
Now it’s time to preview our file; just before that, select the menu on the page and align in centered. If any problems occur during previewing in browser, it’s very possible they are connected to the fact that you are testing the page locally. Try reading the “How to test a website locally” tutorial and that should solve the problem. Now, click F12 in order to preview – you will get something like this:
Configuring the Layout tab
7. Open the Layout configuration tab. If you closed the configuration panel, just click on the Edit menu button, next to Insert a new menu.
8. We’re going to make some changes to the Layout tab. Please apply the following changes for now; later you can experiment and find customizing solutions that suit you the best.
Let’s preview the file again and observe the differences:
Configuring the Animation tab
9. Next we’ll deal with the Animation tab, a tab which controls effects which will be visible only in the „.fla” file, so I’m not going to post a screen-shot of the menu after this step. When you solve the tutorial, you’ll see the differences as you preview your file at every step. Let’s begin; open the Animation tab from the configuration panel and make the following settings:
Configuring the Text tab
10.The text tab deals with the way the text on the menus and sub-menus will look like. As in the previous tab, we’ll just need to make some changes and then the menu will be final. The changes I suggest are shown in the next image (they refer mainly to the text type and its size; as well I introduced an effect I personally like, the bolding of the text when in over position):
11.As I final step, let’s preview again our menu. Mine looks like this:
Thank you for your time and I hope this tutorial was useful to you.