Autograff Navigator CMS

For Web Designers and Developers

Navigator CMS, soon to launch as a product after in-depth alpha testing, is easy to install and implement, and is CSS-driven for ease of configuration. Custom-design the page, and few modifications are needed to the provided page template to reflect your design. It's all controlled in the CSS, so you are free to design within the basic web structure (header, global menu, local menu, content area, optional sidebars).

XHTML only, please! No tables allowed

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.

Automated pure CSS global menus

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.

Save Tons of Time!

Fully-styled page layouts available soon

Autograff will soon provide several pre-coded layouts for Navigator. We call them layouts because they’re not templates. These are not meant to be complete fully-finished designs, so we won't be building up a large collection of them. Instead, they're convenient starting points for a given site configuration. The html, CSS, and “starter” images are already created; we've done 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. The 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!

Using the Navigator Layouts

Navigator layouts contain an index page layout, a page CSS file, dropdown menu CSS, and a set of images. To use the layout with your Navigator installation:

• Make a backup copy of your Navigator files.
• Replace the index.php, sn_styles.css and sn_dropdown-appearance.css with the files in the layout.
• DO NOT replace the snp_images folder! Copy the images from the folder in the layout into snp_images in your original installation.
• Begin editing files and images.

A single page design for the whole site

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.

Optionally, you can create a separate home page to provide a different landing page experience for the web visitor.

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.

A note on fixed-width vs fluid-width designs

It used to be that fluid-width designs were considered superior, because the page layout adjusted itself no matter how wide the browser window was. These days, monitor resolution can be commonly found anywhere from 1024 pixels wide to 2400 pixels wide. A fluid-width design that looks beautiful at 1024 pixels wide will look strangely stretched at more than twice its width.

For this reason, you will find many more instances of fixed-width design. One of our layouts provides a fixed-width centered layout pre-styled in the most important ways. A width of about 950px is a compromise that fills the screen pretty fully on lower resolution monitors and doesn’t look tiny on a higher-resolution screen. Even with cinema-style wide flat panel screens, most web visitors don’t expect to set their browser window to the full width,so this is a good balance.

Getting to know CSS

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 important to become familiar with CSS handling of unordered lists to be completely familiar with the dropdown menus.