Beginners Guide To Html / Css Templates

Never used a template before and do not know where to start from? Post here for help. Please ask all of you questions regarding templates help here.

Beginners Guide To Html / Css Templates

Postby admin » Wed Jul 29, 2009 12:38 pm

This is a basic info about understanding the templates and files in them, to help get people started.

You always want to be a Web Designer and you found this great web site, that has free templates. It can't get any better than this. The adrenaline pumping, your mind is racing. You Previewed and Downloaded the perfect template.

Now What???

You haven't a clue what to do! You read all of the Forums Q&A and still it makes no sense. Can't someone just tell me what to do, this can't be that hard, I've got all the software that I've never knew how to use!!! Should I join the Forum and if I do, how do I ask my question without sounding dumb, but my Web has to get done.

Let's stop right here with with the BS and get to it.

First of all Google is your friend, ask and you will be served up.

The download is in a ZIP format. Zip is a compressed file, to reduce size and wrap all files in 1 neat package. Google - zip extension to find out more. Windows can unzip files or get 7-zip (google) or pay for a program.

Now unzip the files into a working directory - one you can remember and find, we need a place to work.

Are you with me so far. (if not you need to get an understanding of computers)

In our working directory we should see:

a directory named - images
a graphics file - source.psd
a html file - index.html
a Cascading Style Sheet - style.css
These files are the basis for your template.

A template is a framework for web pages and sites. It is a way to give a uniform (laid out the same throughout) "look and feel" to your web.

Click on the index.html file and it will open in your browser or right click on idex.html, place your mouse over "open with" and select your browser (for example Firefox, internet explorer, ...) it will open in your browser too. It looks just like the one on line, great. (You can always view your work in your browser)

Open the image directory and you will see images, most will be linked to the style.css file. Some you will recognize, some you won't and some may not even look like there is anything there. Look back and forth at the images and the index.html open in the browser. Things start to become more clear. Images are referenced and saved in the image directory and yes you should put your new ones there. After all we are using this templates format.

A little Stop, Looking and Thinking can answer a lot of questions.

What do I want to do, what do I have and what tools do I need!

It's an old fashion thought process.

  • Now we need a "text editor" - just a basic one will do. (you can get all the power from another one later - just remember to learn your software or you are powerless). We will use "Notepad" - it's on your computer.
    Right click on the style.css file. Open with Notepad.

    You are now viewing what controls the style and layout of your web pages. (the header section, menus, basic layout, colors,, etc.) You should even see some of those images from the images directory. If you make changes here it will be efected in your web on every page. This is also the place where you may have extra code only for special pages in your web.

    Can you edit this? Yes just make sure you save the file when you are done editing.
    Do you know the css language? Try http://www.w3schools.com/css/
    (This a basic primer - you have too learn some things on your own)

  • Right click on the index.html file. Open with Notepad.
    You are now viewing where you put your content (all that stuff you want the world to see)

    What is an HTML File? HTML stands for Hyper Text Markup Language. An HTML file is a text file containing small markup tags. The markup tags tell the Web browser how to display the page. An HTML file must have an htm or html file extension. An HTML file can be created using a simple text editor.

    If you take your time looking, things start to jump off the page at you and your mind goes, I can do this. Until you get stumped, because right now you are only replacing text and you page isn't really what you want.
    Try http://www.w3schools.com/html/default.asp
    (This a basic primer - you have too learn some more things on your own)

  • Finally that source.psd
    In short "psd" falls into the Raster Image Catagory. It's a Document created by Adobe Photoshop, the most commonly used professional image editing program; can include image layers, adjustment layers, layer masks, annotation notes, file information, keywords, and other Photoshop-specific elements. Supports RGB, CMYK, grayscale, monochrome, duotone, indexed color, Lab color, and multichannel color modes.

    This is the file that is the Creative Genius of the author. It's their Vision, their Design. Basically they made a graphic, with lots of layers, colors and their tricks of the trade. They then made small pieces and coded in html and css to bring you a template.

    Do you need to do anything with this file? - NO - Just thank them for it. You do not need it for your web. You can use it to learn what they have learned.
    Try http - No that's for another day.
    (This a basic primer - you have too learn even more things on your own)

This should give you a good basic start of templates.

Half the questions this forum gets, are above. You can answer most of your own questions and remove the frustration by just looking at: What do I want to do, what do I have and what tools do I need!

Then you will understand too a greater degree, so you can ask a question which will get you over the hump. It's more fun to learn and create then get burnt out.

People volunteer their knowledge and time to help you. These are the same people who have taken the time to learn it and make a living by what they have learned.

So remember to learn and give back to this forum and others... The world will be a better place if you do.

And believe me.... We all started right where you are.

Author: Ishkey
source: http://www.freewebsitetemplates.com/
admin
Site Admin
 
Posts: 110
Joined: Thu Jun 04, 2009 7:13 pm

Return to How to Use Templates



cron