Managing Design

From Contensive Wiki
Revision as of 17:17, 15 June 2015 by Admin (Talk | contribs)

Jump to: navigation, search

Working with Dynamic Menus

Menuing is facilitated with the Dynamic Menu Add-on. It creates the HTML necessary to produce flyout menuing in many configurations. In addition, it generates the styles to produce a generic menu system.

To customize the Dynamic Menu, start by dropping the Dynamic Menu add-on on a template or content page, and render the page (display it). The system will automatically create the necessary records for the Default menu.

To create a different menu, turn on Advanced Edit, and click the Instance Options tool above the Dynamic Menu Add-on. From here, you can select any existing menu settings record, or create a new one.

At this point you can turn on editing, and edit the menu settings record, or add sections to the menu.

In the Menu record, there are several settings that effect the type of HTML that will be produced, and a tab to create or modify the styles delivered with that HTML. There are several styles selectors required for a dynamic menu. To differentiate one menu instance from another, a style 'prefix' is used. For instance, If you choose your prefix as "topNav", each of the five class selectors necessary for the menu should start with the prefix "topNav", like topNavButton, topNavPanel, etc.

I am using the example of a menu using the style prefix eventMenu.

Event-menu.png


A - .eventMenuButton defines what the "button" of the menu looks like

- :hover - attributes you want when element is hovered over w/ pointer (inherits from .eventMenuButton if not defined)
- :visited - attributes you want when element has been visited (inherits from .eventMenuButton if not defined)
- A.eventMenuButtonDown defines attributes when a pointer has activated the fly-out, and the pointer has moved to its sub elements (sub elements would be .eventMenuPanelButton and A.eventMenuPanelButton)

B - A.eventMenuButton defines what an anchored button on the menu looks like (A and B will almost always have identical attributes)

- :hover - attributes you want when element is hovered over w/ pointer (inherits from A.eventMenuButton if not defined)
- :visited - attributes you want when element has been visited (inherits from A.eventMenuButton if not defined)
- A.eventMenuButtonDown defines attributes when a pointer has activated the fly-out, and the pointer has moved to its sub elements (sub elements would be .eventMenuPanelButton and A.eventMenuPanelButton)

C - .eventMenuPanel defines attributes of the panel that flies out

D - .eventMenuPanelButton defines attributes of the buttons within the panel (background applied here will lay over top of the panel)

- A.eventMenuPanelButton defines what an anchored button within the panel looks like (will almost always have identical attributes as .eventMenuPanelButton)
- :hover - attributes you want when element is hovered over w/ pointer (inherits from .eventMenuPanelButton if not defined)
- :visited - attributes you want when element has been visited (inherits from .eventMenuPanelButton if not defined)
- .eventMenuPanelButtonDown (A.eventMenuPanelButtonDown) defines attributes when a pointer has activated the fly-out, and the pointer has moved to its sub elements (sub elements would be .eventMenuPanelButton and A.eventMenuPanelButton in the next tier)

E - .eventMenuDelimiter defines what the delimiter attributes are (delimiter is defined in the Dynamic Menu record example here is a |).

Working with Templates

The template is the portion of the HTML page that a content manager does not typically change. It often includes the graphics that surround the content, the headers, the footers and the navigation. Generally, there is a section of the template where the content is placed, and the content manager has access to edit that area.

An example might be a red page and a blue page. Within your site, some pages have a blue background, and others have a red background. You have two templates on your site, one called Blue, which has a place for dynamic navigation menus, and a place for content right below the navigation. you have another templates, called Red, with the same elements arranged similarly. You edit the home page content, called "Landing Page", and set it to use the Blue template. When anyone lands on your site, they see the home page with a blue background, dynamic menu, and the content you entered with the online editor. If you edit the content, and select the Red template instead, the next time someone lands on your home page, they see it with a red background.

There are two site architectures of Contensive, Soft Templates, and Hard Templates. Each supports templates differently.

Soft Templates

In Soft Templates, the HTML for the template is stored in database records and can be easily edited online. The Soft Template architecture is easier to manage. The URL of the page does not point to a unique HTML document, but instead, it points to a page that uses Contensive to construct the HTML internally. All the pages on the site come from the same URL, except for a few simple query-string arguments.

When a content manager edits a page, the only change is internal. The next time a visitor views the page, it appears with the new template.

Note that Soft templates associated to pages will only have an effect for sites that use the GetHTMLBody, GetHTMLDoc, and ISAPI CMS interfaces.

When creating soft templates, you can optionally include a link to the physical page that supports the soft template architecture. If this link is omitted, the dynamic menuing will create a link to the page where it is displayed. This assumes the site is created as a single physical page.

Include links in soft templates if the site also includes hard templates, or non-template sections. Including the links will allow the use of dynamic menuing on both the soft template sections, and the hard templates sections. Without links in the soft template records, the menuing could not produce a link that would return the visitor to the physical page required for the soft templates.

Editing Soft Templates

Your site may have hundreds, or even thousands of pages, but it probably has only a few templates. if your site is contructed with Hard Templates, editing templates is a programmer activity and must be done using specialized authoring and publishing software such as GoLive, Frontpage, or MS Interdev. If your site is constructed from soft templates, any with Administration rights to the Contensive site can edit them online.

To edit your templates, turn on Authoring links. if your site uses Soft Templates, will see around the entire page, an Edit window with an Edit Icon for the "Page Template". Simply click the edit icon.

When editing Templates, there are three fundimental elements you will probably use. Any active content or aggregate function is available as well, but these are the primary ones most people use. You find them on the editor, in the "Tag" dropdown selector.

Hard Templates

With Hard Templates, the HTML for the template is constructed on a hard coded HTML document much like traditional non-CMS web sites. A scripting language in the Hard Templates is used to pro grammatically connect to the Contensive server for content. The URL to the page is actually a URL to the Hard Template. All pages that use the same template have the same URL, except for a few simple query string arguments.

When a content manager edits a page, and selects a template for that page, the software dynamically changes links to the page. The next time a visitor views the page, the system detects if it is being viewed from the correct place.

Creating and Modifying Template records

Hard and soft templates are stored in the same list, the Page Templates content. If a record contains a link in the Link field, it is a hard template, and the Soft Template Body will be ignored. If the template record has no Hard Template Link, but the Soft Template Body is not empty, it will be used as a soft template.