Design Freedom with Navigator
Designing for a Navigator website is not much different from designing any XHTML/CSS website. The differences lie in the fact that the Navigator site doesn’t need a number of pages to be created. It is a single page that calls in data as the visitor clicks through the menu. This means pages all have a consistent layout, yet the editor gives the ability to create different graphics for each section, different sidebar content for each page, or a single sidebar that shows on every page, giving you great flexibility. The local menu on a page in any section contains the same page links as the dropdown menu for that section.
You can also create a separate fully-integrated home page to provide a different landing page experience for the web visitor. Clicking global menu or content links on the home page will take the visitor to the content pages automatically.
Navigator is built completely with XHTML, with NO tables used for presentation. Each element is given an id or a class, and the CSS files included provide for the styling of appearance, position, and link styles for all elements. This frees your design completely: Navigator does not require local menus on the left or the global menu to be below the header of the website. Place div elements anywhere, style them in any way, add html to the page template, background images and colors, anything to make it look the way you want it to.
The global menus contain all sections that are published, and the dropdowns contain all pages that are published. You may build out your site extensively by creating unpublished sections full of published pages. You can link to these pages automatically in Navigator, using the unique “crosslink” feature. This means you use the global menu for the main sections of the site, and plan to access deeper levels by use of linking from within the pages.
We provide a wealth of information on specific XHTML/CSS conditions encountered in creating and editing a Navigator website. However, we don’t want to reinvent the wheel: there are excellent comprehensive references on XHTML and CSS available, such as the SitePoint web reference at http://reference.sitepoint.com/css, W3Schools at http://www.w3schools.com, and numerous books. We recommend that you consult and/or purchase a CSS reference for any CSS challenges you may have.
In particular, the dropdown menu styles can be quite complex due to the interactions of unordered list containers, list items and links, together with their hover states. It’s very helpful to become familiar with CSS handling of unordered lists, so you can make those dropdown menus behave!
Save Tons of Time! Fully-styled page layouts soon available
Autograff will soon provide several pre-coded layouts for Navigator. We call them layouts because they’re not what is commonly known as "templates". These are not meant to be complete fully-finished designs, but convenient starting points for a particular site configuration.
The html, CSS, and “starter” images are already created, doing the hard part of placing the page elements in a particular layout and specifying how background images and element colors work together. Position, dimensions and background fills are all given in the CSS, images and page html provided in the layout file.
Working with the dimensions and CSS specifications of images provided, you can create your own background fill images to match your design. These layouts use CSS1 for the most part, so cross-browser compatibility should be solid. If you find CSS that doesn’t work in a particular browser, we’d love to know!
Easy Editing to Match Your Design
The pre-coded layouts give you everything you need in the CSS. You can simply edit the colors, link styles, and content styles that have been predefined. Since the entire site presentation uses CSS, you design it, choose the layout that most closely approximates your design, then edit the html, CSS and images to make it look exactly the way you envision it.
