DreamWeaver Toolbar: Navigation Block(s)

This module allows the owner of the website to build and manage a block of links as part of their websites overall navigation scheme.  Each navigation block (minimum 1, maximum unlimited) will contribute to the websites navigation.  For more information please see the tutorial on dynamic navigation.

Features

  • Add, remove, rename links.
  • Links can lead to new pages, existing pages, external URLs, or uploaded files

Installation

  1. Open an HTML file in DreamWeaver.
  2. Place the cursor at the insertion point (in code view or design view).
  3. Go to the Zencil toolbar and click the  icon.
     
  4. Use the wizard to set up the style and colors etc.

Discussion

  • You can customize the menu items further by editing the css style code.  This code is automatically placed within the <head> tags of your html.
  • You may also choose to move the css style code into an attached style sheet so that it can be re-used on other html page templates.
  • If you have multiple navigation systems within your page design, make sure you are familiar with our tutorial on dynamic navigation.

Code Sample

  • Navigation blocks can work together to build complex navigation schemes and hierarchies.  The primary source of flexability is the <zencil> tag's "style" attribute.  Style can be set to "sections" or "pages".
  • Menubars with names will also work together.
<style type="text/css">
#menubar1 a{
/* display: inline-block; creates horizontal menus*/
/* display: block; creates vertical menus*/

}
#menubar1 a:hover{/*mouse over style*/}
</style>
<zencil:hidden module="menubar" name="menubar1" style="sections">
  <div id="menubar1"><a href="#">Folder I</a> <a href="#">Folder II</a> </div>
</zencil:hidden>
 
    Copyright Clear Site Web Solutions Corporation  |  Victoria, B.C. Canada