Setup Guide V1 (last updated January 4th, 2007)

Designed for the Gen7 Series Templates and Modules

The starting point - Storyboarding:

(** note ** the reference video is pulled from a larger series of videos, please disregard any reference to 'case study' video's or additional chapters)

Thank you for taking the time to read, or review the 'Storyboarding' chapter of our Quick Start Guide. With the number of pages, and video's in the guide, you may be wondering why we named it quick start, when it takes 3 hours to read through the entire guide. Well, the 'Quick' refers to you, not the guide. If this is your first website, you could potentially spend dozens of hours trying to figure things out for yourself. We simply want to point you in the right direction, and have you working towards your goals, quickly.

This chapter may be the most important in the guide. Although much of the 'how do I' type questions are answered in later chapters, knowing when to do them in the grand scheme of things could save your hours of wasted time. The Storyboard is designed to be a road map for building your website. With emphasis on planning and organization first. Building last. So let's get started

Spend 30% or your time planning, 40% of your time organizing your information, and 20% of your time building. I've include my suggestions of how to proceed using a 3 'Phase' process. The first  two phases are information gathering, and brainstorming. The third phase is where is all comes together, and the third phase is broken down into 6 steps. I really suggest you watch our case study video, so I can better describe using real world examples of your to work through the 3 phases.

Here's how it works:

Phase 1: competitive research, team input, information gathering

  • Taking a piece of paper, write down the pages you need for your website.

  • Need ideas? Go to google.com and use the search engine to find sites similar to yours. If the primary purpose of your website is for your child’s soccer team, type in ‘soccer teams in XXXcity’. This will provide a nice listing of soccer related websites in your own city.

  • Hold a team meeting for people involved with the project and ask for their input.

  • If this is a 'family' project, ask your family members what they would like to see in the website.

  • If this is for a business, visit your competition to see how they've organized their website, their pricing, services, policies and most importantly keep the decision makers in your business involved as they may 'change' the direction of your project if they are not part of the process. Make sure the people providing the 'stamp' of approval are kept up to speed with every step of the process.

  • If this is for an organization or church group, look for similar organizations / groups and visit their websites for ideas.

  • Browse through the sites listed. The first ten results on google should give you a good idea of what type of information and what type of pages these closely competing websites are providing for their visitors. You may find some really good ideas you have not really considered!

Phase 2: brainstorming

  • take the best ideas you could find, and make a ‘workable’ list of pages you would like to include in your website.

  • DON’T BITE OFF MORE THAN YOU CAN CHEW!!! This is a VERY common mistake for first time web masters. You DO NOT need to build your DREAM website all in one go. Build it in stages, as things will change anyways. And you’ll most likely be adding to your website on a regular basis. Build enough of a website to get your foot in the door, then add the bells and whistles once you have a good handle on your initial project.

  • With a list of ‘pages’ or a road map for your website, you can now compare what you want or need to the pages we’ve already provided. Chances are you’ll have a ‘contact’ page in your list. Good thing we’ve designed one for you!

  • Browse through the pre-designed pages included with the template, and remove or delete what you won't be using. Keep in mind, that you will always NEED an index.htm page. You can replace the index.htm page with another page, or template page. Watch our Bonus Video on building a Dial Up landing page for information on replacing the existing index page.

  • Browser through the 'compact / fullscreen' blank template pages, to determine which layouts would work best for the pages in your list. Keep in mind, that the compact layout's work best for pages with small amounts of content, while fullscreen layouts work best for pages that requiring alot of content such as banner advertising, images etc.

Phase 3: prioritizing / organize

(the 6 step program)

 

Step 1: create a folder system to store information specific to each page

    • bookmarks

    • screenshots

    • word documents

    • images

    • linked or downloadable files (such as PDF's, videos)

 

Step 2: create the new pages you need for your website, by duplicating one of the compact.htm or fullscreen.htm page located in the 'Templates' folder.

    • name your new pages (page_name.htm)

    • title you new pages (<title> My Page Title</title>)

    • update the meta keywords or descriptions (maybe best to save this for later though)

 

Step 3: update the 'navigation' buttons for the following elements:

    • top links

    • icons

    • vertical menu

    • bottom links

 

Step 4: if you need to create additional menu bars for 'child' level pages, create them now:

    • open the includes folder

    • open the 'vertical_menu.htm' page

    • click on the file menu

    • click on 'Save As'

    • rename the page to something that makes sense to you and the parent page (ie: if you are creating a sub menu to display specific product types for your catalog pages, you would probably name this page as 'vertical_menu_catalog.htm')

 

    • if you are working with Package A (FrontPage 2003/Expression or Package C for Dreamweaver) you should now create additional DWT template pages for any group of pages that require sub menu's. For example, if your catalog page is going to include a sub menu for specific product types, you would create a NEW DWT page then attach your catalog and any product pages to this new product DWT page: Here's how to create a new DWT...

      • open the Templates folder

      • open the 'fullscreen.dwt' page

      • click on the File Menu

      • select Save As...

      • name the page as catalog.dwt

    • now you can attach any 'catalog' or product pages to this new DWT master page.

 

Step 5: insert your additional child menu's into new DWT pages

 

Step 6: modify the include pages

      • background image

      • bottom link bar

      • contact button

      • favorites button

      • icons

      • logo

      • site info

      • static tagline

      • themed image

      • top link bar

      • vertical menu bar
 

Back...