Lay out your site's navigation

1By now you should know the general layout of your site. If you have not yet determined this, then it is recommended that you sit down and create a layout on paper in an outline format like the example on the left below:
 

The Sample Site Outline Corresponding Content Types
  1. Home
  2. About Us
    1. Staff
    2. Our History
    3. Company News
  3. Products
    1. Hats
    2. Gloves
    3. Scarves
    4. Shoes
    5. Rain Gear
    6. Beach Wear
    7. Accessories
  4. Contact Us
  1. General Content Page
  2. Menu Spacer
    1. General Content Page
    2. General Content Page
    3. General Content Page
  3. Menu Spacer
    1. General Content Page
    2. General Content Page
    3. General Content Page
    4. General Content Page
    5. General Content Page
    6. General Content Page
    7. General Content Page
  4. Email Form Mailer

2Each line item in your site outline will need to be defined as an individual page, a navigational guide, a form, etc. This is done by clicking on 'Define New' in your site manager for each item, one at a time. You will determine the page's content type from within there.

3For the purpose of this tutorial we will be using this sample outline laid out above here. Before you begin working in the Content Management System on your own site, make sure you have already laid out your own similar site outline.
 

Tree Structure


4Let's look at our sample outline again. Notice this time that it is color coded. Some of the line items you see are pages (purple text) and some of them are strictly navigational menu directories (green text), a.k.a Menu Spacers.

  1. Home
  2. About Us
    1. Staff
    2. Our History
    3. Company News
  3. Products
    1. Hats
    2. Gloves
    3. Scarves
    4. Shoes
    5. Rain Gear
    6. Beach Wear
    7. Accessories
  4. Contact Us

5This flow chart displays the entire sample site structure branching from the navigation set forth above. If it will help you in designing your own site layout, go ahead and sketch out a flow chart of your own.
 

Site Flow Chart

6Let's briefly discuss the first section that will progressively develop in the 'Content Area' called 'Parent.' Every line item in your site outline will have a parent/child relationship with the other line items. See the outline below to fully grasp that concept.
 

  1. Home   (parent item, no children)
  2. About Us   (parent item to three children)
    1. Staff   (child to About Us)
    2. Our History   (child to About Us)
    3. Company News   (child to About Us)
  3. Products   (parent item to seven children)
    1. Hats   (child to Products)
    2. Gloves   (child to Products)
    3. Scarves   (child to Products)
    4. Shoes   (child to Products)
    5. Rain Gear   (child to Products)
    6. Beach Wear   (child to Products)
    7. Accessories   (child to Products)
  4. Contact Us   (parent item, no children)

7With that established, let's take a sneak peek at the section called 'Parent' in the final sample site layout. In the 'Define New' screens, we will build this structure.
 

Tree Structure



8Below is what the Content management screen will look like when the site is all built. Now that you see it completed, you'll have a better understanding of what's to come.

 

This tutorial website is designed to assist our bytePages™ customers in working with the byteEditor Content Management System they have on their sites.

Go here if you would like to have a bytePages™ template site, with this Content Management System installed in it: bytePages.

Go here if you would like to convert your existing site, or to build a new custom website as a self-manageable site using our proprietary Content Management System (byteEditor):
Byte Productions.