|
Breaking out of the Default Template: Giving your site a Facelift
So, you have your site up and working. The comic displays correctly on the main page. The archive autoupdates. The links and buttons do too.
But there's just one problem: The page itself looks positively horrid! I mean, a working page is all very well, but it's not going to bring you much joy if you see that ghastly Times New Roman Font on that stark white background...
We need something to break out of the horrendous monotony of the default template, so let us give the whole thing a facelift! I'm a great believer in writing tutorials following the KISS principle (Keep It Simple, Stupid!), so I'm just going to tackle the following (very basic) subjects:
- Changing the Background Colour
- Changing the text and links
- Tweaking the layout
- Adding Images
Start
If you recall, the index page is generated from /workspace/indextemplate.html, and the archive pages are generated from /workspace/dailytemplate.html. To change the look of the site, we change the template files and NOT the actual files themselves.
- Start up your text editor and open your indextemplate.html. You should see something like this:
< ?xml version="1.0" encoding="iso-8859-1"? >
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html lang="en" xml:lang="en"
xmlns="http://www.w3.org/1999/xhtml" >
< head >< title >* * *comic_name* * * - * * *todays_date* * *< /title >
< meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" / >
< /head >
< div class="keen_ad" style="display:inline;" >
* * *advertisement* * *
< /div >
< div class="main" >
< h1 >* * *comic_name* * *< /h1 >
< h2 >by * * *author* * *< /h2 >
* * *todays_comics* * *
< br / >
* * *first_day* ** ** *previous_day* ** ** *next_day* ** ** *last_day* * *
< br / >* * *comic_name* * * is hosted on
< a href="http://www.keenspace.com" >Keenspace< /a >, a free webhosting and site automation service for webcomics.
< /div >
< /body >
< /html >
(Note that I added spaces to the HTML tags so they won't be displayed as HTML in this tutorial)
- Right after the
< meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" / >
< /head > section, add this HTML tag:
< body bgcolor="black">
This changes our blackground colour to black. Great! But here's a problem... Out text is black too, so we cannot see anything anymore!
- To fix this problem we change the colour of the text to white (or another contrasting light colour). Going back to the
< body bgcolor="black">
tag, we modify it so it becomes < body bgcolor="black" text="white" link="blue" vlink="purple" alink="red" >
The 'text' field is pretty self-explanatory. The 'link' stands for the colour you want your links to be. 'vlink' stands for 'visited link', and 'alink' stand for the colour the link goes when you click it.
- You should be seeing something like this:
Nifty! Now the page looks... ok. But maybe you don't like blue? Or purple? Hmmm...
How do you control the colours? I mean, while HTML allows you to type in the name of a basic colour ("black", "blue"), it doesn't recognise more tasteful shades like 'teal' or 'cyan' or 'rose' or 'burnt sienna' or 'yellow ochre'. So... we need another way of controlling colour. This is where hexadecimal comes in. I could go into a long tirade here about hexadecimal, but to be gracious I won't: I will simply explain that hexadecimal is a way of calculating colours using numbers in HTML. For example, this page uses hexadicimal for the pale green link colour. This is what the body tag for this page looks like:
< body bgcolor="000000" text="FFFFFF" link="CCFF99" vlink="99CC66" alink="99CC33" >
- There are load of pages out there that do the hexadecimal calculating and explaining for you, so you, oh happy one, need not to. I can link a couple here:
Ok, that's three. I can't count. Fine! ;)
- Hopefully, that takes care of the colour part. Lets move on to text type! There are many many ways to do this, but the simplest (and messiest) way is using the HTML < font face > tag.
- There are several types of font out there, but it's best to stick with those which are common, since not all computers have the same fonts installed. This page currently uses the font "Verdana", in case you were wondering.
- You simply enclose the text you want in the font you want by placing the < font face > tag before and the closing tag after the text. For example, if I wanted to make this phrase appear in Arial:
The Jaded is my Comic! Read it!
I'd enclose it in the font face tag, using code like this:
< font face="Arial" >The Jaded is my Comic! Read it!< /font >
And as a result, we get:
The Jaded is my Comic! Read it!
For the same result in "Arial Narrow":
The Jaded is my Comic! Read it!
Or "Impact":
The Jaded is my Comic! Read it!
Or even something fancy, like "Lucida Handwriting":
The Jaded is my Comic! Read it!
Keep in mind the computer viewing the text might not have this font, and if it doesn't , the text will show up in... ugh... you guessed it: Times New Roman, or whatever default font the user has set.
Here's a few more samples of fonts you could use:
Courier, Papyrus, American Typewriter, CopperPlate, Brush Script MT
- After text, we tackle images. Images are added using the < img src > tag.
- Firstly, you upload the desired image, say your banner, to your /workspace/images folder, using FTP.
- To add an image called "banner.jpg" which is in the "images" folder anywhere in a page, you do this:
< img src="/images/banner.jpg" >
This is what will come up:
- Easy, huh? You can also control where they go using the < img align > attribute, like so:
< img src="/images/banner.jpg" align=left >
< p >This is my Banner!
To get:
This is my Banner!
For:
< img src="/images/banner.jpg" align=center >
< p >This is my Banner!
To get:
This is my Banner!
And this:
< img src="/images/banner.jpg" align=right >
< p >This is my Banner!
To get:
This is my Banner!
- Now we're done with that, let's move on to controlling your layout. There are many ways to do this as well, the most common being tables and < center > tags.
- I'm too lazy to explain tables, so I shall hitch a ride on Webmonkey's back... they do it better than me anyway.
- < center > tags are dead easy to use; like the < font face > tag, you enclose the desired text and images in the < center > tag, like so:
< center >
< p >We are the ones who have fallen through the cracks of society.
< br >We are mercenaries with nothing left to lose
< br >We are < b >The Jaded< /b >
< /center >
And we get:
We are the ones who have fallen through the cracks of society.
We are mercenaries with nothing left to lose
We are The Jaded
- Combining all the stuff here, we can come up with a basic site design that looks much better than that default template.
Charcoal Theme Indextemplate
And YES. You MAY copy the code directly and use it for your own site. I give you the permission to do so as long as you keep the tiny little credit part at the bottom there. :) Feel free to modify it any way you want; I don't mind.
Here's the workspace version of the code which you will need. Just save the html page as your indextemplate.html . Alternatively, right-click (Alt + click for Mac), view source, and copy the whole thing.
UPDATE (29/08/2004): A new indextemplate is available. Click here for the Ocean Blue Indextemplate.
And that's it. To further improve your site, try learning a bit of HTML, or look at how other sites do their stuff. Dave's Site and WebMonkey are both good places to start from.
If you have further questions, visit the Keenspace Help Forum and other pages. Happy Webcomicking!
|
