skip to content
.
logo picture logo text
Breadcrumb trail for Web Design:
Web Design -> Planning -> Best Practices -> Basic Skills -> Building -> Special Pages --> Publishing -> Testing -> More

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 file.

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.)
Your tools
  • The HTML editor (unless you plan to do all the coding by hand)
  • A Plain text editor
The free css template
  • 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.
Your own images
  • 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 easily recognized.
  • 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 practice exercises 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 heading.
  • 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"

Your Logo

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
  • As a background image to the header or another section of the page
  • by inserting an image in a section of the page.
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.

The Menu(s):

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 - index.html
"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.

The Footer

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 page or Terms of Use page.

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 won't work.

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 link.

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 finished.

Open another page. Add content. View the page in your browser. Add more content. Remember to save at regular intervals.

Do this for each page you created. 


Next Section: Special Pages -->