* Some images on this page are in PNG format. If your browser isn't displaying them, you have a very old browser. Visit the PNG-Supporting Browsers page for a list of browsers that do support PNG. (For compatibility, however, ALL of the graphics used on the templates are in standard GIF or JPG format.)
Quick Tour
This tour will show you the basics of creating a web page with WebTemplates. While we do have a few templates you can build for free as a non-subscriber, there are certain features of the service that are only available to subscribers, such as the Page Manager which lets you manage and save designs for multiple websites. Plus you get access to ALL of our templates and art.
If you decide to subscribe, you'll want to bookmark the subscriber login page at http://templates.cgi101.com/login/.
From there, you can review and edit pages you've already built by clicking
on the "Page Manager" button:
You can build a new page by clicking on the button for the category you want to build from:
Once inside the category page, you'll notice this graphic at the top:
You can access the other art for backgrounds, buttons, and lines by clicking on the respective tab. By default, the templates for that category are shown first. A thumbnail image of the finished template appears on the left, and to the right of each template you'll find a list of choices:
You can preview the full-screen version of the template by clicking on Preview This Template. You can also download a .tgz (tarred/gzipped) archive containing all the images, plus a template page, by clicking on Download This Template - that's the way to go if you want to edit your pages using your own HTML editor on your computer.
To build a page within your browser using WebTemplates, click on Build A Page With This Template.
Building the Page
You'll be taken to a new page, which will say "Building the <Template Name> Template: Step 1" at the top. Here you'll need to enter a title for your page. You can also enter keywords and a description for the page - these won't show up as part of the page itself, but they will help search engines find and categorize your site.
When you're finished, click "Next" to proceed to the next step.
Editing Buttons
Now you'll want to select buttons for your page. This is optional; you don't HAVE to select any buttons at all, but the buttons you do choose will appear in the navigation bar on the left side of the screen (in your final design), and these will also configure the page builder to allow you to build sub pages for each button. (If you choose an "Interests" button, you'll need to create an interests page, but we'll get to that later).
Select buttons by using the pull-down lists on the left side of the screen:
Entering Headers and Text
Now you'll build the main part of your new page. There are two parts to this step. First you can create a page header, which should either be plain text (no HTML tags), or it can be an image tag (for your logo or other graphic). Note about images: if you add an image tag, either in the header or in the body of your page, it will not show up in the preview of your page here on WebTemplates. That's because the image doesn't reside on our server. But when you upload your image to your own webserver, and then upload your logo or images there as well, the images will then appear in the page.
After entering a header, you'll want to type in text for the body of your page. You will need to use basic HTML codes here - at the very least, use a <p> tag to separate paragraphs. If you need help with basic HTML, click on the quickhelp link; if you have Javascript enabled, a smaller window will pop up with instructions on some basic tags.
When you're finished typing in your page, click Continue to go to the next step. You'll see a preview of your page. From there, you can either edit the page to make any corrections you'd like to make, or continue on to the Template Manager, where you'll be able to build other pages, upload or download the completed design.
Proceed on to the Template Manager, where you'll find additional help files to show you what to do next.
