Website design for n00bs

'Webstyling and the commmon man'

Ok, after discussing in another thread, that template editing in Dolphin and how easy / hard it is to change the look and feel of your site to make it your own. In my opinion, the whole process is fairly simply to do but requires that you have knowledge of a few skills and a few tools to hand to help you out.

This is a basic outline of what to do and how to do it, use it as a guide to get you started on style modification.

First things first - lets cover the REAL basic stuff - not that anyone wanting to do this kind of stuff should be that much of a novice (you need at least half a clue), but more to emphasize the RIGHT way to do things. There are rules laid down by W3C and we should all do our best to read, understand and apply them.

Semantics

What are semantics?? Semantics, when used in the context of the the web, are a set of design principles that cover how data should be conveyed to the user, it promotes the ideal that data and style should be treated as separate entities.

The ideal of a semantic web is a web that can be easily read by programs - a web where data is easy to retrieve from the page - the traditional embedded / inline style information used by many coders is not very friendly and is not a very data-centric way of doing things.

The correct way to convey data is by using one file for your markup and one file for your style. This way only the data is stored in the markup file making it easier to retrieve - easier to retrieve by browser crawlers, easier to aggregate, easier to write mods for easier to do anything that requires taking the data and converting it or processing it.

Only when the data is sent to a humanly readable browser does it need the style information - so that the browser knows how to present the data so that a human can process it.

Creating and maintaining a website to comply with the latest web standards is both gratifying and also ensuring that your website will display correctly in all future browsers (except IE but more about that later).

So what do I do?

Without creating a long boring rhetoric about the whys and why-nots I will simply say that you should not use CSS in your HTML docs, you should not use HTML style elements such as < b >, < i > etc.., and ALL of your style information should be in a seperate CSS file (or XSL in the case of XML).

HTML or XML?

XML is the natural progression of HTML - the style elements have been removed and it is extensible - meaning you can create your own elements and attributes  perfect for storing data (which is what is was invented for) XML / XSL is the perfect way to code the semantic web and my guess is that eventually HTML will probably be phased out

Tools - you promised us tools...

With the basic understanding of the separation of content and style, you will now realise that to be able to modify your site, you need to look in two places. (two seperate files)

So how do you know where to look? this is where the tools come in to play.

First up, I will simply say that if you want to be successfull at doing this you will need to use Firefox. Forget using Internet Explorer as a developing and testing envoironment - you are doing yourself no favours - it is not standards compliant and will cause you untold headaches - always develop for Firefox and then fix up your code for the other browsers it's a lot less painfull.

Firefox also has the tools that we require. Other browsers also have some tools but they're simply not as good, plus Firefox has been at the forefront of puching web standards for many years now - they deserve the support.

Not only this but the tools we need are free!! (everyone loves free stuff)

After installing Firefox you will need to install the following plugins

Firebug - Firebug is the best tool you will use for modding websites. Full Stop.

WebDeveloper - A great toolbar / DOM inspector and a perfect companion to Firebug.

You also might like...

FireFTP - Excellent FTP Client - embedded into Firefox it makes the perfect test environment.

You can Install the tools from the tools menu in the browser.

You will also need a decent programmers text editor - this will differ greatly from platform to platform, eveyone has thier favourite and they are mostly as useable as each other. I would say for a web developer you need to consider the following.

Syntax Highlighting - makes code easier to work with

Project management - good for managing websites

FTP - For working with remote file

PHP syntax checking - very useful for debugging php code

Function / Class browser - good for quickly navigating code files

Most importantly - even if it does NONE of the above - you must be able to search for text within files.

So how do I do this - you promised skillz

Putting all of this together is easy - very easy.

First - lets add a button to Firefox's toolbar - Right clickthe toolbar and select 'customize' Now drag Firebugs 'Inspect Element' button to the toolbar - it;s the one that looks like a pair of glasses - drag the Web Developer button there too.

Now you're set!

Searching for CSS

Here's an example - lets change the text of the login / join text colour on your dolphin site.

-Navigate to your Dolphin home page (make sure you are logged out)

-Click on the 'inspect' button you just added to the toolbar. You will notice 2 things happen - a window will open at the bottom of the browser showing information about the page - and here's the best bit - as you move your pointer over the page - the info will change to tell you aout the bit you are hovering over and you will also see a nice box aroud the element highlighting it.

WOW!! (If you've never use Firebug before it's pretty impressive!!)

- OK - hover over the 'join now' text - and then click it - the info in the bottom page will stop changing

- SO - what does all this tell us? The right pane shows us the CSS - it tells us that it is in anchor.css on line 49. It also tells us that the name of the element containing the text is '.no_hello_actions' - if you look in the left frame you will see that there is a div that this style is applied to that contains the text we want to change. In fact, if you hover over where it says 'div class="no_hello_actions"' you will see the div highlighted.

WOW!! (Great isn't it).

So to change the colour - open up anchor.css in your text editor, search for '.no_hello_actions' - change the text colour, save the file and you're done.

Easy as that.

Searching for markup

After a while you will find this pretty easy and might want to progress to the next level - this will probably be about the same time that you want to modify some of the markup. The CSS files are pretty easy to find, but what about if you want to mod some of the HTML. This is where the text editor comes into it's own.

Remember i mentioned you need a text editor that can search within files - this is why (forget doing this with windows - full text search hasnt worked properly since they introduced the nodding dog back in Win98).

- Find the element you want to modify using the inspector

- copy a portion of the code - don't choose any changeable content, choose a HTML element / style tag

- Using your text editor - perform a search in files - this may net only one result, it may return many - to test which one is right you may need to modify the file by placing a marker in it - perhaps the word 'test'

- Save the file

- Refresh your browser

- inspect the element again to see if it has the word 'test' in it. If it has you've found your file - if not try again.

- once you have located your file you can then mod it as necessary.

- you get the idea....

Conclusions

With a little practice you will easily be able to find and mod any style element on your site, CSS is mostly self explanatory, it is in plain text for the most part. If you're not sure - just change it to test what it does - you can always change it back again.

There are lots of CSS reference sites on the web - you will find them invaluable - use them.

Aditional Tools and Info

What text editor??? ask 10 people and you will get 10 different answers.

I've used many over the years, but here are my faves

Windows - Ultraedit / Ultraedit Studio (soon to be ported to Mac / Linux)

Linux - Gedit (Standard editor under Gnome desktop) / Jedit (java based)

Mac - TextMate / Jedit / Coda

Jedit is free and very capable but looks clunky (IMO)

Eclipse IDE is also free although Eclipse is a little bloated for just a text editor. If you want to use Eclipse (its Multi Platform) make sure you install the PDT (PHP Development Tools plugin) Eclipse is actually a full on IDE for java, c+, ruby, etc... Steer away from the Pulse package if you can - it's very slow to load - look for the PDT project pages. It also has an SVN CVS plugin too.

Uedit is a very capable programmers editor and also comes with project management, FTP and SVN CVS control - (Uestudio is basically the same but a full on development IDE) I used Uedit for 10 years before leaving Windows.

Coda is one of the best tools I've used - aimed at web design only, it includes FTP / SVN CVS / Project management + CSS inspector but it only available for the Mac. It's simple and nice to use - also includes a built in terminal emulator.

The choice is yours but choose wisely and it will make your life much easier.