Part 1 on How to make a webpage
A few people asked to create webpages for them, or give them help by providing some tutorials, so I have attempted to write something to the best of my ability.
This tutes are based on the templates from css zen garden, as I felt that it's a huge resource and that people could just browse through the designs and choose one that they like.
For the starting Design I have chosen Dragon, as I think it's clean and would make the navigation easy to see.
1) First up, go to http://www.csszengarden.com
You will see the home page, on the right, is the navigation, this is where all the templates are. Now to see a different design, choose a different link.
I choose the the link a simple sunrise
Notice how the page has changed and now the menu is located on the left.
The same templates remain that were on the initial page, Chien, Like the Sea, Angels , etc, etc
But we are looking for dragon, which is on page four, so click on the link next designs, until you reach page 4. The url and the links change as you through each page. Until you reach http://www.csszengarden.com/?cssfile=/158/158.css&page=4
There you can see the design Dragen. Currently it's the 4 th link on the left.
Click inside, as you can see the page has once again changed.
The menu and page has a different design.
2)Choose a folder from your hard drive that you are going to put your files.
I.e Then make a new folder, like zen.
the banner you can see the texDownload the sample html file
Right mouse click and save target as for firefox users
4) Under Resources you can see
· V iew This Design's CSS - Right mouse click and save target as
5) Ok you should have two files in the folder you
specified (zen for me)
6) Rename the files, zengarden-sample.htm to index.html & 128.css to zen.css
7) Open up the index.html using a text editor ;sample.css to zen.css
index.html in your folder.
As you can see, the new design appears, but where are the images!!!
9)If you know open up zen.css
It will come up with something like; background: #fff url(container_bg.gif) repeat-y;
the key here is url(container_bg.gif) This is telling the webpage where to find the background.
So go ahead and download the images
Most of the images are quite small in size, which should mean a fast loading webpage :) :)