A SelectEdit site can be broken down into various page elements. The design parameters for each of these elements can be fully customized. If you happen to be familiar with cascading style sheets (we do not assume that you are) then you are familiar with the basis for SelectEdit design. Generally speaking, if you can design it with CSS, you can design it for SelectEdit. However, if you are not familiar with CSS, this means that for every element we describe below you can define its design parameters in terms of background color and background image, type style, margins, borders, width, height, and layout placement.

Header: The very first element in the upper left corner of a SelectEdit site is its logo. The height of the logo graphic determines the height of the header area of the page (note: we generally place the logo in the upper left corner, however we do have a workaround that allows us to align the logo to the right of the header area). The rest of the header area above the navigation bar can contain background images, colors, and other "global navigation" or "site utilities" (home, search, contact, etc.).

Navigation bar: The main navigation bar can be adjusted in terms of height, width, spacing of navigation elements, and background color. The main sections can be displayed as HTML text (which makes a SelectEdit site extremely flexible since additional main sections can be added or edited without having to create corresponding graphics). SelectEdit does support main section graphic buttons, or graphic text including rollover states and "current section" states. The dynamic cascading menus can be turned on or off, and can be designed in terms of background color, rollover colors, height, width, divider colors, and size. While the main navigation bar can utilize custom graphics, the cascading menus cannot. This is generally good practice for any site using dynamic cascading menus due to performance and download considerations.

Sub-page navigation: SelectEdit sites can opt for breadcrumb navigation, side navigation, or they can opt for no sub-page navigation.

Bread crumb navigation: Bread crumb navigation is common for sites that include multiple sub-categories in their structure. Search engines and directories commonly use bread crumb navigation as they display the various categories that have led to a particular page. Bread crumb navigation, when used, is displayed beneath the top navigation bar and above the body of the page. A product directory, for example, might display as "Food Preparation Products > Commercial > Cooking > Stoves," where each word is a link representing the categories you followed to arrive at the page you are currently on. Unless a site has more than three levels, bread crumb navigation is not usually the best choice.

Side Navigation: Side navigation is the standard sub-navigation system for a SelectEdit site. It uses the left hand column in the body of all sub-pages. It lists the main category on the top and then all of the sub-pages within the category. It can also list all third level pages when viewing a particular sub-section of the site. The side navigation is always in the leftmost column of the page and it can be designed with a unique background color, background graphic, typographic styles, width, and position.

No side navigation: In some cases, where content does not go very deep or it only goes deep in one section, you might opt not to have any side navigation. Instead, you would rely on the main navigation bar with its cascading menus to provide all site navigation. If most of your site's sections do not have sub-pages in them, you might want to opt for no side navigation.

Main body content area: The main body of each page is fairly straightforward. You can specify the typographic style for the title, body copy, lists, links, etc. As with all NewfangledCMS sites you can upload images and other documents and display them in the body of the page. SelectEdit's built-in formatter tools are used for low level content formatting such as bold, italic, and adding inline images. Specific styles can be set up for use in the formatter to create special typographic styles for subtitles, or other low level typographic elements. Page titles also need to be specified as text, SelectEdit does not support graphic page titles – which are not good SEO practices anyway.

Image one and image two: SelectEdit (and most custom NewfangledCMS sites) have a couple pre-positioned image slots for each page. While images can be placed anywhere in the body of a page using the formatter, the image one and image two slots display uploaded images in the upper right column of the page. This "right column" can also be designed in terms of width, background color, background image, and typographic style. Using image one and image two also has the added benefit of allowing for captions to be added to the uploaded images. The caption style can be specified as well.

Widget: All SelectEdit pages have a "Widget" element. The widget is simply a handy page element used to highlight various types of content throughout the site. It can be used to call attention to a particular feature or benefit, to refer to related links, or feature current news items. The widget box can be formatted in terms of size, color, background image, typography, and it can have a title bar which can also be similarly designed. While widgets are generally positioned in the upper right of the page, they can also be set to display at the bottom of the main content area or beneath the sub-navigation system in the left-hand column (tip: you can use a widget to flesh out a left hand side navigation area for sections that have no sub pages to avoid the "wasted space" problem noted above in the "no side navigation" option).

Footer: Finally, the footer of the page can also be designed to include a text based version of the main navigation bar, general contact information, or other legal disclaimers. This area can also be designed in terms of background colors, background image, typography, etc.

In addition to the overview of the design elements described in this newsletter, we've also put together a couple sample Photoshop files that contain all of the various elements we've described. It is assembled in layers and can be used as a starting point for designing a SelectEdit site. If you have a client that might benefit from SelectEdit and you follow the structure of this Photoshop file, we can provide an additional discount to the already low cost of a SelectEdit website. Give us a call for details!