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.
http://www.csszengarden.com/128/128.css
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.
3)Below
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)
zengarden-sample.htm
128.css
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
8)Now open
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
find url
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
http://www.csszengarden.com/128/container_bg.gif
http://www.csszengarden.com/128/title.jpg
http://www.csszengarden.com/128/resources_bg.gif
http://www.csszengarden.com/128/resources.gif
http://www.csszengarden.com/128/archives_bg.gif
http://www.csszengarden.com/128/archives.gif
Most of the images are quite small in size, which should mean a fast loading webpage :) :)
Top 5 Viewed Compilations
