Halloween Offers
Creative DW Menu Pack Dynamic
 

Creative DW Menus Pack Documentation

box Creative DW Menus Pack

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).

Insert vertical menu

Insert vetical menu

 

Configuring the General tab

3. Let’s start with some general properties; apply the next changes to the selected parameters.

Configure the General tab

Configure the General tab

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:

Define the menu structure

Define the menu structure

Edit the menu structure (initial view)

Edit the menu structure (initial view)

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.

Add menu item

Add menu item

6. By using the arrows in the menu place the new item in the following position:

Edit the menu structure (final view)

Edit the menu structure (final view)

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:

Preview your file 1

Preview the menu

 

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.

Edit vertical menu

Edit vertical 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.

Configure the Layout tab

Configure the Layout tab

Let’s preview the file again and observe the differences:

Preview yor file 2

Preview your menu

 

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:

Configure the Animation tab

Configure the Animation tab

 

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):

Configure the Text tab

Configure the Text tab

11.As I final step, let’s preview again our menu. Mine looks like this:

Preview your file (final view)

Preview your menu

Thank you for your time and I hope this tutorial was useful to you.