Working with a CSS template
We'll download some CSS templates and work with them to better understand how to manage the presentational layer.
We will today use a template to look at the role CSS can play in the look of your website. I will download one myself and use it as an example.
You may wish to have your own templates ready to ask questions about the components, either on the page or in the linked set of CSS instructions.
Two very useful tools
You will want to bookmark them for later use
- W3Schools HTML tutorial - use the examples to test things
- W3Schools CSS tutorial - use the examples to see how things might look
And then we will work with the template, using different kinds of editors.
[top]
Web Editors - in general
Editors come in all forms, from the simplest text editor to the most sophisticated GUI tool.
As we have said repeatedly, one can use any text editor to write HTML. The HTML code produced with simpler programs is not different from the HTML produced by more complex editors.
More complex editors offer a number of advantages over simple text editors (especially in terms of being able to work in a GUI or WYSIWYG environment), but such advantages are not without costs (difficult to learn, add lots of extra code, may add proprietary information to your HTML).
[top]
We have been working with basic HTML code using a simple text editor
like Notepad or Notepad ++ for Windows and TextWrangler for Mac.
![our home page code as seen in Notepad++](../../../images/editors.notepad++.png)
[top]
free editors offer the opportunity ...
... to work in a WYSIWYG (Normal) view, plus allow you to see the underlying HTML code for tweaking purposes
like Sea Monkey
![our home page code as seen in SeaMonkey's design view](../../../images/editors.SeaMonkey.png)
or Kompozer
![our home page code as seen in Kompozer's design view](../../../images/editors.Kompozer.png)
or Amaya from W3C
![our home page code as seen in Amaya's dual design and code view](../../../images/editors.Amaya.png)
[top]
word processors offer the advantage of an interface you may already be familiar with
like MS Word
![sample web page in MSWord](../../../images/editors.MSWord.png)
or OpenOffice
![home page example in Open Office](../../../images/editors.OpenOffice.png)
[top]
sophisticated artistic and image manipulation tools are best for visual elegance
like Dreamweaver
![our home page code as seen in Dreamweaver](../../../images/editors.DreamWeaver.png)
We will look at all of these
you will discover the one that works best for you
[top]