Build Your Own Site
These steps are written as if you have followed the
tutorial in order and have chosen to use an HTML editor
to add content to a free css template which also includes images to use in the
layout. You can find a list of sites which offer free templates on the Resource Sites page.
You can make some adjustments to some of the steps if it
works best for you. For instance, if you know how to code
by hand, you could do that instead of using an HTML
editor. Or, if you find a template that is exactly what
you want, you might not need to edit the external CSS
Some of the steps will be linked back to sections of the
tutorial in case you need to review the material.
Gather your materials
Your plans (sketches, rough drafts, info, etc.)
The free css template
- The HTML editor (unless you plan to do all the coding
- A Plain text editor
Your own images
- Choose the template you want to use.
- Download the css template zip file.
- Unzip the file.
- You'll use the folders in the unzipped file to store
all the files for your website. You can rename the
folder that contains the files and image folder, if you
want, but don't rename any of the folders or files
inside of it.
- Rename the images you plan to use, if necessary. For
instance, if you plan to use a photograph that you took
and it's name is a series of letters and numbers, it
will be best to rename it using something that will be
- Move any of your own images (or copies of the images)
that you plan to use to the "images" folder in the
unzipped template folder.
Make Changes to the Template and CSS file
The Style of the Layout
Changes in the colors, fonts, background images and other
styles are best done using CSS. If you are using a free
css template, you will make the changes by opening the
.css file with a plain text editor. You can make some
changes now if you have done the practicenexercises and feel comfortable working with the
external css file. Although the templates used in the
exercises most likely won't be the one you choose to use
for your website, the examples should give you an idea of
what to look for and how to make the changes.
If this is your very first website, you might prefer to
use the style of the layout as it is in the template. You
can always change the css for the layout at a later
date, if you want.
The Words in the Header:
Open the template with the HTML editor (Kompozer,
SeaMonkey or another one)
- Change the "heading" to the name of your website, the
section of your website or your company name. For
example, the heading of this page is a website section
heading - "Creating Your Own Website". The home
page of this site has "Computers Country Style" for the
- If the template you choose has a sub-heading, add that
info. For example, the sub-heading of this page is
"Putting it all Together" The sub-heading for the Home
page is "Having Fun with Web Design and More"
Some folks don't use a logo and that's fine. If you want to
use one, you have a few choices. You can add it
I prefer to use it as a background to a section. That info
will be in the external css file and can be changed in one
file instead of changing each page of the website.
- As a background image to the header or another section
of the page
- by inserting an image in a section of the page.
Rename the menu items, if necessary.
Add a relative link for each menu item to the pages you
plan to create. For example, the relative links on
this page for each main menu item is as follows:
"Home" is linked to -
"Web Design" is linked to - webdesign.html
"Graphics" is linked to - graphics.html
"Social Networks" is linked to - social.html
Be sure to add the suffix - .html
You can refer to the practice exercises "Introduction to Kompozer" or
"Introduction to SeaMonkey"
to review how to add links, if necessary.
Edit the copyright information
Leave in the link back to freecsstemplates.org
Add any other information that you would want to appear
in the footer of every page such as links to a privacy
Create Your Basic Pages
The template is already named - index.html - which will be
your home page. Once you have the information that will be
on all the pages in the template, you can use "Save As" to
create a "barebones" version of each page you plan to have
in your site. Save the pages to the folder where the
index.html page is (The unzipped template file folder) Be
sure to save the pages with the name you used in the menu
links. The links and pages are case sensitive, so if you
have a menu item linked to - about.html - and save the
page with a capital letter - About.html - then the link
Check to See if the Links Work
Once you have created the "barebones" pages, you can check
to be sure your menu item links will work. Open your
browser. Go to "file" --"open file" and open your index.html
page. Click on a link. That page should open. Test out some
other links. If the links don't work, you'll need to do some
troubleshooting. Be sure the name of the page and the link
to it are the same - same spelling and same case. Be sure
you have .html at the end of the page name and the menu item
Add the Content to Each Page
Open the index.html page with the HTML editor. Add the
content you want on your home page. Be sure to save the page
at regular intervals. You can also open your browser and
then open the file you are working on. As you make changes
and add information, you can refresh the page in the browser
to see how the changes/additions look. If you have forgotten
how to do some of the syling, you can refer back to the
practice exercises. Save and close the page when you are
Open another page. Add content. View the page in your
browser. Add more content. Remember to save at regular
Do this for each page you created.