Contents

Webpage Creation

This documentation is intended to give CMS users an idea of the steps involved in getting a site up and running, with the desired design and functionality. A site design process will begin with a user providing BWG with .psd files containing the particular designs and layouts they would like for different pages in their site. These files should be detailed, including everything the end user sees on the website; pull down menus in every variation desired, with selected and unselected links, as well as secondary navigation in all states, with links selected, unselected, etc. Essentially, BWG would like all style variations for all navigation documented; if you want it to look different, the design provided to BWG should reflect it.

The BWG CMS has the capability to contain several layouts that can then be applied to pages at will, as well as Code Snippets that can be dropped into pages to utilize sophisticated html without having to re-write the code each time. BWG takes the .psd files and generates html/css from those files. That html or css is then used to generate layouts, templates or Code Snippets that can be used repeatedly in your site, providing you with an easy way to style pages consistently as well as to leverage sophisticated html in a simple-to-use way.

Documentation

Documentation can be found on the following:

Wireframes

The following wireframes are intended to give you an idea of how a site could be structured, as well as different components that can be added to a page through the CMS.  The following examples include versions of a homepage, both for the public and for logged in members, as well as a standard page within the site that includes secondary navigation.

Homepage Version 1: Public

The CMS has different page types available with different functionalities.  Documentation on page types can be viewed here.  One page type is the "Versions" page type, which allows you to set different versions of a page for different settings, including showing a different page to the public, to non-members, to members, etc.  Here is an example of a wireframe of a homepage that is visible to the public:

The public page could contain the following (although there are several other options available):

  1. A header that contains a logo, a search bar (see the Sharp Search documentation) and a login area to allow members to sign in
  2. A Global Navigation bar that could include drop-down menus to allow for more complex navigation.  Click here to see some examples of Global Navigation dropdowns.
  3. AJAX Tabstrip plugins can be used to place massive amounts of information on a page in a compact package; tabbed navigation allows users to toggle between RSS newsfeeds, Event Lists, Article Lists, Query Lists and any other page within your site, all in a small portion of the home page.  
  4. Site content, which can be generated using the WYSIWYG page editor.
  5. Callout boxes, containing blurbs and links to other pages in the site, which can be dropped into pages using code snippets.

Home Page Version 2: Members Only

Using the Versions Page type, a different kind of page can be shown to logged-in members of your site.  Here is an example of a page a member might see when they log in:

The logged-in Members page could contain the following:

  1. A header with a logo, search box (see Sharp Search documentation), and a logout link.
  2. The same Global Navigation bar as the public page; this navigation is visible throughout the entire site.  Your Global Navigation could include drop-down menus to allow for more complex navigation.  Click here to see some examples of Global Navigation dropdowns.
  3. AJAX Gadgets, generated in the CMS, that are highly customizable and easy to tailor to the interests and needs of specific users.
  4. A Welcome message and box containing profile settings or news updates.  See examples here from other sites.
  5. The same callout boxes as the public page, simply moved down to make room for the Welcome box.  These boxes contain blurbs and links to other pages in the site, and they can be dropped into pages using code snippets.
  6. AJAX Tabstrip plugins can be used to place massive amounts of information on a page in a compact package; tabbed navigation allows users to toggle between RSS newsfeeds, Event Lists, Article Lists, Query Lists and any other page within your site, all in a small portion of the home page. 

Website Content Page

 A content page in the website has a lot of options available for delivering the content to your users.  The layout can utilize the many WYSIWYG Plugins available in the CMS, and the documentation on how to Add a Page can show you the different possibilities for generating website content.  The following wireframe  provides an example of a page structure possible for your website:

  1. A header that contains a logo, a search bar (see the Sharp Search documentation) and a logout area.
  2. The same Global Navigation bar as the Home page; this navigation is visible throughout the entire site.  Your Global Navigation could include drop-down menus to allow for more complex navigation.  Click here to see some examples of Global Navigation dropdowns.
  3. Secondary navigation can be put on the page, allowing users to navigate through child pages nested under a parent page in the CMS.  See Article List and Site Map for some options for secondary navigation, as well as some examples from other sites of a secondary navigation sidebar.
  4. Breadcrumbs, to track a user's movements through the site and allow them to return to pages they've navigated from.
  5. A banner, or advertisement, that can be generated using the Ad Rotator plugin.
  6. Site content, which can be generated using the WYSIWYG page editor.
  7. Callout boxes, containing blurbs and links to other pages in the site, which can be dropped into pages using code snippets.

Landing Page

A landing page is a page contained within the global navigation that acts as a page between the Home page and a content page.  It contains links, possibly using an Article List, that navigate through the site to the content pages. An example is the Pennsylvania Institute of Certified Public Accountant's site:

Links to examples

Secondary navigation
Secondary navigation examples
Welcome pages
Examples of welcome pages
Dropdown Menu Examples
Examples of Dropdown menus

Final Thoughts

These wireframes are merely to provide examples of how a page can be set up to provide BWG with the needed structure to generate html and css for your site.  There are a myriad of other ready-made solutions available for the construction of a site, most of which are covered in the Documentation section, and BWG is available for assistance in site construction to get you the functionality and look you want for your site.