divaGPSfree for Dreamweaver: Step-by-step How-To PC/Mac  DWMX-CS3  $0

divaGPSfree offers only a subset of the features of divaGPS. It is neither as powerful nor easily added to multiple pages as divaGPS. Here is a comparison of divaGPSfree and divaGPS to help you decide which product will best meet your needs.

How to install Dreamweaver Extensions using the Extension Manager.

divaGPSfree can be added to most any sort of menu, or to any sort of wrapper around your menu. Add it to all the menus on the page (you will enter "All" in the divaGPSfree UserInterface), or specify a particular menu (and its submenus) by adding an ID to the menu or wrapper (and then you will enter that ID in the UserInterface). Check that the ID is present in Design View by selecting the menu or wrapper and checking the Tag Selector Bar at the bottom of the window. Tag Selector Bar

You will see the tagname followed by #itsID, and perhaps a few other attributes as well. If needed, you can easily add an ID by right-clicking the tag on the Tag Selector Bar and choosing Quick Tag Editor (Edit Tag in DWMX) and inside the <> brackets, add id="yourchoiceofID", for example: Quick Tag Editor

Open divaGPSfree

With a page open in the Design or Code View window, either find the diva tab of the InsertBar, and click on the divaGPSfree icon:

Insert Bar

or use the Insert/divaHTML/divaGPSfree menu item:

Insert Menu

The Settings tab

The divaGPSfree UserInterface is "sticky" so it remembers the entries you make: If you have never used divaGPSfree on the site before, the UI fields will be empty. If you are opening a page which already has divaGPSfree applied, then UI will open with the current settings on the page. And if you have used divaGPSfree on the site before and open the UI on a fresh page, the UI will be set automatically to the most recent UI settings, saving you some time and typing.

The UI's Settings tab
1
Enter the ID of any menuID or wrapperID.divaGPSfree will be added to all the menus within the ID you selected, including any submenus. Or enter 'All' (without the quotes to act on the entire page.)
2
This field is for the default filenames used on your site. The UI is clever and automatically adds for you the file extension of the current page to this field, e.g. ".html" or ".asp". You need only enter the proper filename, the default being, well, "default." If your site uses more than one default file name, then you may enter them separated by pipe "|" symbols, for example "default.htm|index.shtml". . No spaces allowed.
Example of default filenames

Default files are those that open when the root directory or a subfolder are requested without a filename provided. So requesting www.example.com would open www.example.com/default.htm, and requesting www.example.com/folder/ would open www.example.com/folder/index.shtml

How to style the "you-are-here" highlights .

Now let's explore the CSS for "you-are-here" styling.

divaGPSfree automatically adds the class divaGPS-here to the current menu item(s) on-the-fly when the page is viewed in a browser. Here is sample styling for that class, but be sure to change the styling to suit your site!

Styles for divaGPS-here:

  1. .divaGPS-here {
  2.   background-color: #CD00F9 !important;
  3.   border: 1px solid #666 !important;
  4.   display: block !important;
  5.   color: #FFF !important;
  6.   padding: 4px 6px !important;
  7.   cursor:default; /* So "hand" cursor does not appear */
  8. }

Depending on the rules you're already using in your stylesheet, you may need to use "!important", as shown above, in your new set of rules to override declaration(s) already set.

The Help tab

Use the information on this tab to get quick Help.

3
The buttons:
The OK button
Click when you are ready to add divaGPSfree to your page(s).
The Remove button
This button will only appear when divaGPSfree is detected in the current document. You may then remove divaGPSfree from this document,.
The Cancel button
Click this button to close the User Interface without making any changes to the page(s).
The Help button
Use this button to get to our, always up-to-date, online Help here on this page.

divaGPSfree was designed to perform its magic on a server, either online or as localhost. What this means is that to test your page you will either need to view it on a localhost (if you don't know what that means then you don't have it), or upload it it to your remote server.

When you are ready

Upload to your server:

  1. Your page(s)
  2. The folder /diva/ with its contents (which divaGPSfree added to your Site). These divaGPSfree script files are static files, so need to be uploaded only once.
  3. The CSS file you edited with new divaGPSfree related styles.

Site window

Let me repeat here that divaGPSfree is not as powerful or easily added as divaGPS; it offers only a subset of the features in divaGPS. Here is a comparison of divaGPSfree and divaGPS to help you decide which product will best meet your needs.

Finally, you might want to read about how divaGPS or divaGPSfree can be moved to Include files.