Adding a Dreamweaver flash menu into Wordpress

In this tutorial will cover the basics in adding a Dreamweaver tab menu inside the Wordpress header. We will create a nice looking menu with Flash effects in Dreamweaver using the Creative DW Menus extension, then, we will go through the steps of integrating the menus in a standard Wordpress Installation.

Note: this tutorial describes how to create a static menu.

Requirements
• Local testing server (XAMPPP or WAMP Server)
• Wordpress Installed on local computer
• Dreamweaver CS3, CS4 or CS5
• Creative DW Menus (download from here)

Step 1. Installing Wordpress

my previous tutorial

If you followed in which I've add a flash slideshow into the Wordpress header, I covered the basics on how to install Wordpress on your computer. I will remind you some of the steps from that tutorial.
• First, you have to have a local testing server. Because Wordpress is a dynamic platform, it requires PHP and MySQL. So if you have your testing server, please start it so we can move on with the tutorial. If you don't have a testing server you can try the XAMPP testing server or the WAMP Server. If you need a tutorial on how to install and configure a local testing server, you can follow this tutorial.

  
  PHPMyAdmin

• Install Wordpress, once you have your local testing server please extract the content of the archive in your testing folder for your local testing server. You can see more about configuring Wordpress and installing in this tutorial.

  
  Wordpress Setup

Step 2. Creating a Dreamweaver Menu

In order to follow my tutorial you'll need the Creative DW Menus Pack which is a Dreamweaver extension that allows you to build dynamic menus with cool flash animation. You can download this extension from here. Once you have installed the extension, with the Adobe Extension Manager we need to open Dreamweaver. If you encounter difficulties in installing the Dreamweaver extension, here is a tutorial on how to install an extension.

Once you have opened Dreamweaver, go to the Insert Tab and select Creative Menus. Choose from one the multilevel types of Dreamweaver menus and customize the theme and the animation to your likings. In this tutorial you can find a detailed description on how to make a Dreamweaver menu.

Dreamweaver Menu Example

Once we have our Creative DW Menu ready and added into our test page you need to switch to code viewing.

Step 3. Customizing Wordpress

You need to copy the script codes for the creative menu and the actual code for the menu from the Dreamweaver HTML pages to the Wordpress files. If you have URL rewrite on your Wordpress blog we need to change the relative links into absolute links. I've added in bold the code for the absolute links. If you are not using url rewrite just delete the bold code, because you do not need absolute links in this case.

Login in Wordpress (the standard location should be: http://localhost/Wordpress/wp-admin/) . In the Appearance tab, Select Editor and in the right panel there should be header.php. Like in the picture below.

Editing the Wordpress Header

This is the header configuration file. This is where we will add our new Dreamweaver menu. First locate the head section where we will add the script include files: you should place these lines right before the CSS part begins. Between the link part and the CSS.

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<script type="text/javascript" src=" http://www.your-domain.com/blog/includes/Creative_Menus/menuDisplay.js">...
<script type="text/javascript" src="http://www.your-domain.com/blog/includes/Creative_Menus/swfobject.js"></...
<style type="text/css" media="screen">

Locate at the bottom a div called header with a role of a banner. Inside there is a div called headerimg. Delete the lines inside the headerimg div and paste the Dreamweaver menu code.

<div id="header" role="banner">
<div id="headerimg">

<!-- Creative menu Menu1 begin -->
<div id="CMPH_Menu1">
<img src="http://www.your-domain.com/blog/includes/Creative_Menus/spacer.gif"
width="480" height="75" alt="" /></div>
<div id="creative_menu_Menu1" >
<div id="menu_holder_Menu1">
<!--(start menu data)<div id="menu_options" contenttype="Static + Dynamic" menu_type="T"
menuzindex="1000" totalwidth="480" totalheight="75" fittopage="false" skin="Adobe Style" skincustom=""
skinfiles="" maincolors="#DADADA,#000000" subcolors="#FFFFFF,#9999FF" submenuheight="30" alwaysshowsb="true" resizeoptions="" cutroundcorners="false" persistentsubmenu="true">
<div id="main_menu" mainbutpos="Center,0" mainbutresize="fit to text" ></div>
<div id="main_button" mainbutspacing="2" mainbesettings="Light,15"
mainbutreverse="true" mainarrow="4,7" showmainarrow = "true" mainminsize="0"></div>
<div id="main_text" mainfont="Verdana,10" mainupfmt="#585658,,bold,"
mainoverfmt="#99CCFF,bold,," maindownfmt="#585658,bold,," mainhtsettings="Center,10" mainvtsettings="Middle,5" mainhtspace="10" ></div>
<div id="sub_menu" subbutpos="Right,8" submesettings="SlideRight,25" submenureverse="true" hsubmenualign="Center" openevent="Rollover" delays="0,0" subminsize="0" submenualpha="100" fixalphatext="true" ></div>
<div id="sub_button" subbutspacing="2" subbesettings="SlideDown,15" subbutreverse="false" showsubarrow = "false" subarrow="" subbutresize="fit to text" vsuboverlap="0" ></div>
<div id="sub_text" subfont="Verdana,10" subupfmt="#585658,bold,," suboverfmt="#FFFFFF,bold,," subdownfmt="#CCCCCC,bold,," subhtsettings="Center,10" subvtsettings="Middle,5" subhtspace="10" > </div>
</div> (end menu data)-->
<div id="creative_menu_structure" >
<div><a href="#" target="_blank" title="">Home</a></div>
<div><a href="#" target="_blank" title="">Products</a>
<div><a href="#" target="_blank" title=">">Creative MovieFX</a>
<div><a href="#" target="" title=">>">item1</a></div>
</div>
<div><a href="#" target="_blank" title=">">Creative TextFX</a></div>
<div><a href="#" target="_blank" title=">">Extend Tweening</a></div>
<div><a href="#" target="_blank" title=">">All Products</a></div>
</div>
<div><a href="#" target="_blank" title="">Support</a>
<div><a href="#" target="_blank" title=">">Forum</a></div>
<div><a href="#" target="_blank" title=">">Free Support</a></div>
<div><a target="_blank" title=">" href="#/">Paid Support</a></div>
</div>
<div><a href="#" target="_blank" title="">Company</a>
<div><a href="#" target="_blank" title=">">About Us</a>
<div><a href="#" target="" title=">>">item2</a></div>
</div>
</div>
<div><a href="#" target="_blank" title="">Contact</a></div>
</div>
</div>
</div>
<!-- Creative menu Menu1 end -->
<!-- Creative Menus - menu rendering scripts start -->
<script type="text/javascript"> buildMenu() </script>
<noscript>
This menu requires JavaScript in order to be properly displayed. Viewing requirements can be found at <a href="www.extendstudio.com">Extend Studio</a> (Flash components and extensions, Dreamweaver extensions, Tools for web design and development) </noscript>
<!-- Creative Menus - menu rendering scripts end -->

</div>
</div>

Copy the includes folder from the Dreamweaver site to your Wordpress installation folder. Once this is done, go and preview your Wordpress site. You should get something like in the picture below.

Final Preview

Step 4. Changing the menu

If you need to change or customize further the menu, you should do all the changes in Dreamweaver then re-upload the "includes" folder and paste again in Wordpress the code that begins with <!-- Creative menu Menu1 begin -->.

tutorialized.com