Home
BasicTemplates.com | BasicWebGraphics.com | BasicTips.com

Search (Advanced Search) Select Category
Template To-Do Checklist

Print This 
Save This
E-mail This
Talk About This ( 0 )
Author: BasicRic
ID:43
Views: 5780

Our templates are created with HTML but heavily rely on CSS (Cascading Style Sheets) for quick changes to colors, fonts and backgrounds. CSS is the backbone of web design and it is an absolute must for every web designer to use. No need to worry though. CSS is *very* simple to understand and modify. Once you understand the concept (which is just as easy if not easier than HTML) you can quickly change a property (ie ... font face) throughout your site on EVERY page it appears. If you run into any problems whatsoever, you may contact us via our web site. Ready? Okay!

Step:
1 - (print this page and checkmark them off as you go) and then
read our Terms of Use and be sure you understand the limitations.

2 - Create a directory on your hard drive just for your web site files. Unzip the files into this directory. Save a copy of the original files for backup purposes before making any changes. This will ensure you do not accidentally overwrite your original files. While working through the steps in this To-Do Checklist save your work often. We cannot stress that enough.

3 - Using your graphics software, apply needed text to graphic images such as your header image. Be sure anti-aliased is checkmarked to avoid those ugly jagged edges. Try using different styles of fonts for your image text to get your visitors attention. If you want to include other graphics, photos or icons, now is the time to include them in your template. A list of quality resources is shown below.) Keep in mind that "everything" you put into your template will be on "every" page.

4 - Delete our temporary IMG ALT tags and replace them with something "meaningful" to your site's visitors. You will see it in the source code like this:

<img src="images/header.jpg" width="750" height="90" border="0" alt="REPLACE THIS TEXT WITH A MEANINGFUL IMAGE DESCRIPTION">

Every occurrence in the template of this temporary text needs to be changed.

5 - Before you start creating pages from your template, it is best to pre-plan the hierarchy of your site and what your page names will be. Hyperlink page names to your links. We have created temporary hyperlinked placeholders. Review the template source code, and look for the following code:

<a href="#">

Every occurrence of this code in the template needs to be linked to a web page name. Replace the # character with your page name, ie: aboutus.html, news.html, products.html, services.html, etc.

6 - Insert your meta tags in the HEAD of the template. The temporary code looks like this:

<meta name="description" content="Type a brief description of your web site here.">

Simply type in a brief description of your web site. This text will appear in the description under your web site URL in the search engine listings.

<meta name="keywords" content="keyword, keyword, keyword, keyword, keyword, keyword, keyword phrase, keyword phrase, keyword phrase, keyword phrase">

Replace our temporary keywords and keyword phrases with your own. Keywords are important. List the most important first. When deciding on keywords, choose keywords and phrases that you feel certain people will search for to find sites like yours. Keep keywords to a minimum and do not repeat them more than twice. Some search engines will consider too many identical keywords SPAM and your site will flagged as such. The results will be that they will not index your site.

<meta name="copyright" content="2002 YourSite.com. All rights reserved. Duplication of any content on this site is prohibited.">

Replace "YourSite.com" with your web site or company name. Change the year if applicable.

7 - Now you are ready to create pages from your web template. Congrats on getting this far! This is where the real fun begins. :) Using your template remove the content text and replace it with your own.

8 - Edit your page title. Replace our temporary code with meaningful page titles. Keep them short, ie: To-Do Checklist for Web Templates, BasicTemplates.com. The temporary code looks like this:

<title>YOUR PAGE TITLE HERE</title>

This text will appear in the browser window at the top left corner. It will also appear in the Favorites file if your visitors save your site to their Favorites. If you make the page title too long, it could cause Windows problems for those who have saved your site in their Favorites file. (Just a word of caution.)

9 - IMPORTANT: Follow this exactly ... Click on File > Save As and type your page name, ie... aboutus.html in the Save As popup window. Be sure you have saved it in the directory you created on your hard drive in Step #2. You have just created your first web page with a BasicTemplates.com web template! It is very important that you use the function Save As so that you do not overwrite your original template page.

Now go ahead and create more pages that correspond with your links that you inserted in the source code in Step #5 above. Remember? You replaced all the # characters with appropriate page names, right? Don't skip Step #5 or you will end up having to hand type each of those page names in on each web page you create from the template. Yuck!

10 - Not happy with the color of a background or the font face? That's okay. Don't worry. Your template comes with a custom style sheet created just for the template, ie: btstyle1.css. The style sheet controls the font face, font/links and background colors. It is assumed you are somewhat familiar with Hex color codes or RGB codes. You must be even if you don't know it, if you use graphics software to create your text on your images in Step #3. Use your graphics program as reference guide for hex color codes or use one of the many online resources. (See below in resource section.)

Open your style sheet in any text editor such as Window's Notepad. The format is laid out specifically for newbie CSS designers. If you are an experienced CSS user, you may find the format too long. No problem; simply reformat it but be cautious about what you are deleting. Of course, if you are experienced in CSS you already know that, right? :)

Here is a snippet of CSS code that governs the background color of one of our web templates:

body {background-color: #FFFFFF;
font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
}

This block of text is pretty self explanatory if you break it down into snippets. The background color is white (#FFFFFF). We have chosen to use four different font families in case the web site visitor does not have them. They are listed in order of how we want them to appear. The font size is shown in pixels - very important. Do not use points (pts). Em is sometimes used and some say it is better, but you lose control of the way your page appears. The font color is black (#000000).

Sure it gets more complicated on down the style sheet. BUT taking it one section at a time and referencing online CSS tutorials and hex color code charts will have you writing CSS in no time. WARNING: Be *very* careful what you delete when you replace something. Each declaration must end with a semicolon (;) and the block of style must begin with a { and end with a }. If you are simply cautious about what you are deleting and replacing you will have NO problems.

So why is CSS so useful and why do professional web designers use it? We have a full article about CSS and why inexperienced designers do not use it on our web site. Be sure to read it. In summary, however, the elements in the style sheet only need to be changed once. Then every page you created with the template will have these changes made automatically. Trust us, you will thank us over and over again for creating your templates with CSS and not straight HTML like most newbie designers do. CSS rules and straight HTML is only the very beginning of web design. So don't be afraid of it.

11 - Okay, is everything ready to upload to your web server? You do have a web server, right?

IMPORTANT: Upload your web pages in ASCII mode and your images in Binary mode. After you have FTP'd your web site to your server, check the links on *every* page to be sure they are loading correctly, that none of the links or images are broken or missing.

12 - Submit your site to the major search engines. There really isn't any urgent need to list your site with the 1000s of little search engines out there. But you do want to submit your site to the major engines ASAP but only after it is live and fully operational. Resubmitting your site every three or four months is important. Just because you created it, does not mean you will get visitors or keep visitors. Promote, promote, promote ... just as you would a store, shop or business in real life. It isn't much different.



Related Articles
How do I add text to images?
You will need some type of graphics editing software such as Jasc Paint Shop Pro, Adobe PhotoShop, U...
How do change the size of a swap-out header image?
Changing a header size to \"fit\" your BasicTemplate is easy. If you purchased one of our temp...
What is CSS?
CSS means \"Cascading Style Sheets\" and is a system of rules that directly effect the display prope...


Copyright © 1994-2005 BasicTemplates.com. All Rights Reserved. Content on this site may not be reproduced in whole or in part.
BasicTemplates.com
| BasicWebGraphics.com | BasicTips.com