#6: Create Starter Pages

In this step, you'll create a main framework for you site. Instead of focusing on each page, one by one, you'll create starter pages for each page on your site. This way, you can focus on the larger choices first - what pages you need and the overall visitor experience. Then, when you get to writing the content for your site, you'll know how it all works together and what needs to be covered on each page.

What Is Your Main Menu?

From #3, you should've done all the groundwork for what is going to be on your site and have a general idea of what pages and even what your main menu items will be. Ok, now you'll need to go over them again and figure out exactly what your main menu will be.

First off, as a general rule, you only want 5-7 menu items. If you have more than 7 then you have too many choices and, unless your site is a shopping cart, you'll overwhelm your visitors: there have been studies that show that people can only digest a certain number of options. If you don't have 5 menu items, try to think of some more like: Benefits, Testimonials, Samples, Philosophy, etc. Look around at other sites for ideas but if you can't find 5 items that fit your site, that's ok.

For the main menu, I like to list out all possible options and then I identify what is the most important. I then look to see what can be combined or be a link from another page. For example, a page for "About Us" could contain additional information on the philosophy, mission statement, and staff. Use whatever method works for you to come up with your menu items but since you're using a template with the design already worked out, you'll want to look at how many menu items they designed for and come up with the same number.

As an example, I'll be using the same template that I used on this site and the finished product of this tutorial can be found at 2DaysSolutions.biz. Of course you'll notice that this tutorial demo site doesn't look exactly like THIS site - that is because as a web designer, I've altered the original template that I've purchased from Template Monster a little - I went with the Flash header and updated it and also updated the styles a bit. Note: for this tutorial, I will not be covering anything about editing the flash.

So for my site, I was looking at the following menu items:

• About Us
• Templates
• AuthorizeNet
• eCommerce
• Domain Names
• Hosting
• Contact Us
• Home
• DIY Website
• Benefits
• Cost
• Marketing
• Contact Us

Looking at the template that I purchased, I saw that I saw that I only had 7 options so I narrowed it down to what I have now:

• HOME PAGE
• DIY WEBSITE
• HOSTING
• TEMPLATES
• MARKETING
• AUTHORIZENET
• CONTACTS

I combined some of the items, and then have links to the rest from either the DIY Website section (where you're at now) or from the home page. I decided to drop eCommerce because I decided that it was too advanced a topic for now but left AuthorizeNet as a main menu item soley because I'm an AuthorizeNet reseller and would like to maybe get some bites on that that. =)

To find out how many main menu items are available for your template, in HTML-Kit click on index.html within your local folder on the right. When it comes up, click on preview and count how many there are. Or, in Template Monster, find your template and look at their preview.

What's On Each Page?

Each main menu link will point to separate pages on your site. Each of these pages will have information, images, links to other pages, or all of the above. You need to figure out very generally what each will have. Here's what I came up with for my site:

• Home Page - introduces the DIY Website and provides links to benefits, costs, why you should or shouldn't do it yourself, and to about us.
• DIY Website - gives step-by-step instructions on how to build a professionally designed site for under $100.
• Hosting - explains hosting and domain names, and gives my recommendations.
• Templates - discusses the benefits of using a website template.
• Marketing - gives step-by-step instructions on how to market your website online at little or no cost.
• AuthorizeNet - discusses the benefits AuthorizeNet and directs interested persons to contact me.
• Contacts - gives serious visitors a way to contact me.

For your site, you'll want to do the same and list out the purpose of each site

Template Starter Pages

Each Template Monster template includes all the pages in the site, build out in HTML/CSS. They're already linked together with working main menu navigation BUT all the text is just latin filler (lorem ipsum), the main menu needs to be replaced, the pages need to be renamed, and the different page layouts probably won't match what you want on each page. However, it is a good start!

Take a look at each page starter that came with your template.

1. In HTML-Kit, open your local folder in the right-pane. This is the one that you set up before. You should see a main "index.html" and then several other html pages. For example, I have index.html, index-1.html, index-2.html, index-3.html, index-4.html, index-5.html, index-6.html, and index-7.html.
2. Double-click on the html page that you want to look at. The page will open up in code mode in the main pane.
3. Click on "Preview" to see what it looks like.

You'll want to take a look at each page starter (To see what my page starters look like, you can click on the respective links above). Look at each page starter to see if it will fit the content of one of the pages that you want to create. A lot of times, these templates won't have just a straight-up content page that just has a big 1-column area for just text. I'll show you how to create one of those later on.

So for my site, I went with the following page-templates: (including the big content one that I'll show you how to make)

• Home - index.html
• DIY Website - index-5.html
• Hosting - new content page template
• Templates - new content page template
• Marketing - index-5.html
• AuthorizeNet - new content page template
• Contacts - index-6.html

In my case, you see that there's 3 different page templates that'll work for me right off, and that the other pages will be using the new 1-column content page template that I had to create. Here's how to do that:

1. First, look at all the page-templates. Find the one that's closest to having just text in the main body of the page design. For my site, this was index-5.html. What you'll be doing is keeping the main structure of the page including the main menu and header image but creating just one main area for text and other content.
2. Make a copy of it. Right-click on the file and click on "Open Duplicate". Maximize the window.
3. Press CTRL-S to save the new HTML file. Save it as "content_starter.html".

Now we need to update the main menu and clear out all the content on this page.
Note: Every template is different so you'll have figure it out for the template that you purchased. I'll give you a general idea of what you're looking for as best as I can though.

In the code for your content_starter.html page, you need to find the main menu. The main menu is usually the first set of links on the page. A link is written like this: <a href="link">Text or Image</a> where the actual link (to another HTML page or other file) would replace "link". In between the tags, you can put in a text link or an image. Most of these templates will have image links making up the main navigation and by default, they'll be transparent images that you can click on. You can replace them later with actual images with your correct menu names (or replace them with text) but for now we're just going to update the links so that they go to the correct pages.

At this point, you've already figured out your main menu. Now, you need to create file names that match. I've listed out the file names I went with below as an example but you can name yours whatever you want. Just remember that the home page has to be called index.html and each file name needs to end with ".html"

• Home - index.html
• DIY Website - diywebsite.html
• Hosting - hosting.html
• Templates - templates.html
• Marketing - marketing.html
• AuthorizeNet - authorizenet.html
• Contacts - contacts.html

After you've decided on the file names, you'll need to update your main menu. For my template, I changed this:

<a href="index.html"><img src="images/m1.gif" alt="" /></a><a href="index-1.html"><img src="images/m2.gif" alt="" /></a><a href="index-2.html"><img src="images/m3.gif" alt="" /></a><a href="index-3.html"><img src="images/m4.gif" alt="" /></a><a href="index-4.html"><img src="images/m5.gif" alt="" /></a><a href="index-5.html"><img src="images/m6.gif" alt="" /></a><a href="index-6.html"><img src="images/m7.gif" alt="" /></a>

to this:

<a href="index.html"><img src="images/m1.gif" alt="" /></a><a href="diywebsite.html"><img src="images/m2.gif" alt="" /></a><a href="hosting.html"><img src="images/m3.gif" alt="" /></a><a href="templates.html"><img src="images/m4.gif" alt="" /></a><a href="marketing.html"><img src="images/m5.gif" alt="" /></a><a href="authorizenet.html"><img src="images/m6.gif" alt="" /></a><a href="contacts.html"><img src="images/m7.gif" alt="" /></a>

Now you need to convert whatever layout you have to a one-column layout. Unfortunately, your template is going to be different than mine so you'll have to play around with it a bit until you get it looking just right. But your end goal is to have 1 main column to enter content in. Make sure to switch between Preview and Code views in HTML-Kit to test if your changes do what you want.

I can give you an example of what I did to convert my 2-column layout to the 1-column layout though. First off, Template Monster named the tags so that I could easily spot that one div was for column 1 and that the next was for column 2. So I started off by deleting the div with the "col-2" class. Note: when you delete divs, make sure that you match the starting div with the ending div. For example if there's a div within the div you're wanting to delete, you need to delete both the inside closing div tag and the outside one...in other words, there should be the same number of opening & closing tags.

Then within my first div with the class "col-1", I had some dt tags to define the data and an image for the Header text. I replaced the header text image with an H3 tag and replaced the dt tags with a simple paragraph tag.

I then created a default title (just the site name) and updated the name at the bottom of the page. You can view the starting page here and the final version here. Make sure to right-click on the page and 'View Source' to see the difference.

Renaming the Pages

Now that you have a 'content starter' page, you can create starter pages for each page. You figured out from above which template pages you were going to use for each page in your site and should have made a list. For each of those pages, you'll need to create a copy of the chosen template page and rename it, change the title, and make sure the main menu is correct. You'll then test it to make sure it works.

1. Start with the first page in your list, the home page. You'll probably have chosen their 'home page' template page to use as yours too so you won't have to rename it since it's already 'index.html'. So just double-click on it from your 'local folder' on the right. Remember, I'm having you do everything locally on your computer first and then you'll upload the files only after everything is working.
2. If you selected a different template page, you'll need to open it first, and then select 'Save As' from the file menu and save it as the file name chosen earlier. The actual file names that you give your files needs to match exactly with the links in your main menu so this is important.
3. Is the main menu correct? You fixed it on the content starter page that you just created and you'll have to do the same for each new page on your site as well. So if the main menu isn't correct, copy and paste the main menu from your content starter page to your new page.
4. Change the title. In the code, you'll see the following code near the top of the page: <title><\title>. You need to write something between those title tags that describes your page.
5. Remove the extra content. There's always a bunch of latin content on the template pages to show what the page looks like with content. I like to delete that content and replace it with a small note to myself that "I need content!"
6. Since you're mucking around in the code, make sure to switch between the code view and preview view often to check your changes and make sure that you don't break the page. This way, you can catch any mistakes before you get to far and undo the changes. Repeat steps 2-5 for each page on your site!

Excellent! At this point, you should have a working local site. Go into preview mode and try out your main menu links - you should be able to navigate from page to page. If you can't double-check your work and make sure that you have your file names correctly referenced.