DHTML Menu Studio Component for NetObjects Fusion.
Creating a sample site with a menu.
Introduction:
In this tutorial we will create a sample site consisting of two pages. Each page will contain a simple menu created with DHTML Menu Studio - the menu will be used for site navigation.
Installing the DHTML Menu Studio Component:
When you install DHTML Menu Studio the component should be installed automatically. If it is not, go to the extensions/NetObjectsFusion folder inside program's main folder (e.g. c:\program files\dhtmlmenustudio\extensions\netobjectsfusion) and run installcomponent.exe. After you restart NetObjects Fusion, the component will be visible in the Custom Components window.
Setting up a web site:
In the beginning we will create a new web site that we will work with in this tutorial.
|
After you start the NetObjects Fusion application, choose File > New Site > Blank Site...
from the main menu. This will bring up the New Blank Site dialog.
As the site name in the File name field type, for example, Sample Site with Menu. |
Creating pages:
Now we can create two sample pages - Home and Movies.
|
We can do that in Site view. If your are not already in this view click
the site view icon in the main toolbar.
Actually the Home page was automatically created by the program while setting up the site. Right-click on the Home page object and choose New Page. In the place of the default page name type Movies. For both pages click the Custom Names... button and choose .html as an extension in the File extension box. You can leave the default style options for the site or you can go to the Style view and choose some other (for exaple Allure > Blue). |
|
Adding menu to the Site:
In this step we will create and generate a menu for our site. The menu will be visible on both pages and can be used by a visitor for navigation.
When you add a menu to your site and you want the menu to be visible on all pages, it is a good idea to place the menu object in NetObjects Fusion MasterBoard. MasterBoard is an area common for all site pages, so inserting a menu there will cause the menu to appear on all of them after publishing the site.
Select Home page in Site view and go to Page view.
Page design mode for the Home page will open.
We will place the menu under the top banner. To do that we will need to make the top MasterBoard wider to make
some space under the banner.
Click on the left MasterBoard and resize it downwards. Then grab the top MasterBoard margin's resize marker and move it down by the same distance. As the result we have some room for our menu under the banner.
|
Now we can go to DHTML Menu Studio and build our menu. Open the program from Window's start menu
(Start > Xtreeme DHTML Menu Studio > DTHML Menu Studio).
In DHTML Menu Studio you can create a structure of the menu, choose the graphical appearance etc. To learn more about creating menus, see DHTML Menu Studio's Help .
|
For our sample site we will create a menu consisting of two main items and one
pop-up item.
Click in the empty rectangle in DHTML Menu Studio's main window and type Home. This item will refer to our home page. In the Menu item properties window that will open move to the Destination URL field and type index.htm - this is a relative URL pointing to our home page from the site main folder (NetObjects Fusion uploads the home page file to the root folder). Now click on the rectangle next to the Home item in the main window and type Hobby. Then move to rectangle under the Hobby item, type Movies and then html/movies.htm in the Destination URL field (NetObjects Fusion uploads all other pages to the html subfolder). This menu item will point to the previously created Movies page. |
We will leave the default graphical options for the menu. You can click the save icon to keep the changes.
When you define a Destination URL for a menu item make sure it points to the destination page in the right way.
The simpest way to do this it to type a relative URL pointing to the page from the root/main Site folder. For the items above we specified index.htm for Home page because the file will be uploaded to the root folder and html/movies.htm for Movies page because after publishing the movies.htm file will be uploaded to html subfolder. This way the menu items will point to the right target locations.
To learn more about relative and absolute URLs see DHTML Menu Studio's help.
Now we can generate the menu. First we have to set the output directory
for the generated files.
Open the Options window (Window > Options in DHTML Menu Studio's main menu)
and choose the Output tab.
In the Physical location of generated (output) files section choose
the Output directory for HTML file option and type, for example, c:\menu.
You can also go to the Output file name option and change the default output
file name if you wish.
And the most important thing. Go to the Output format option and choose NetObjects Fusion Component - this will tell DHTML Menu Studio to generate appropriate HTML code especially for the component.
Now go to the main menu and choose Menu > Generate Menu > Save to Disk. The menu will be generated and menu files will appear in the c:\menu folder (or the one you typed in the Output directory for HTML file field).
Inserting a menu object:
Once we have the menu generated, we can insert it into our web site.
In Page view go to the Custmom Components window, choose DHTML Menu Studio and click Add DHTML Menu. Now place the component in top MasterBoard below the banner. The Open dialog will appear. In the dialog browse to the folder containing generated menu that you want to add (in our case c:\menu), select the menu's output file (in our sample menu.htm) and click Open.
The placeholder image will appear under the banner. The text on the image informs you that the menu code will be placed onto the page when you publish the website.
Make sure that the menu placeholder is at least as wide as the resulting menu. If this is not the case, some NetObjects Fusion settings may override the menu display options and prevent it from being shown properly.
|
Publishing the website:
Now it is time to pulish our site and see the result. Click the Publish Site icon in NetObjects Fusion toolbar. Make sure that the Local Publish option is selected in the Publish files to field and click the Publish button.
The site will be published and the home page with our menu will open. You can use the menu to navigate to the Movies page to see that the menu was placed also there.
|
Let's say that you would like to re-design the menu and add more items. Then simply start
DHTML Menu Studio, open the saved document and change the menu structure by adding the menu
items (do not forget to specify destination URLs).
When you are finished, you just need to re-generate the menu (all output options are already set), go back to NetObjects Fusion and publish your site again.
See also: