lunedì 22 agosto 2011

HTML / CSS – Creating Your Website Design !

HTML / CSS – Creating Your Website Design !


creating a website HTML / CSS – Creating Your Website Design !



This chapter is a bit particular, rather different to the ones seen up to now. In fact it will be an exercise; Now you won’t be able to read the chapter half asleep, you’ll have to code your site at the same time as me icon biggrin HTML / CSS – Creating Your Website Design !
We’ll be re-using everything we’ve learnt up to here. If you feel like you need to, don’t hesitate to re-read the other chapters to jog your memory.


What is the point of this exercise ?


I think the title is clear enough for this question : we’ll be making a proper web site icon wink HTML / CSS – Creating Your Website Design !
As I am quite certain that this’ll be the first time for a lot of you, I suggest you pay close attention to this chapter. Creating a design is not a simple task : you need creativity, a good taste in colours, a bit of talent, and finally experience.


All that I can show you, as you’ll have understood, is my experience. After that, talent & creativity is something that you do or don’t have icon wink HTML / CSS – Creating Your Website Design !


Right, Where Do We Start ?


As you now know, a web page is a combination of 2 files :



  • An XHTML file (.html or .htm) : the content of the page (the text) is in this file. The file is composed of tags such as , which indicate if the text is important, if it’s a paragraph, a quotation etc…
  • A CSS file (.css) : this file creates the presentation of our web page. It indicates that the text is red, that the font is “Times New Roman” etc… In theory CSS is optional. However without CSS our pages would be very ugly icon biggrin HTML / CSS – Creating Your Website Design !

If you have been following properly up to here, you’ll know how to start :



  1. First we need to write the content of the page (XHTML)
  2. Then modify the presentation (CSS)

You’ll see that the creation of the XHTML file will be (very) quick and easy. However, we’ll spend more time on the CSS, because it’s tricky, there are quite a few CSS properties to know, and because, no matter how good you may be, the browser may not show things as you wish.


Fixed or Stretched Design ?


A fixed design is a design where the design is defined by a fixed width (for example 800 pixels). Generally there is a margin to the left and right, and the content of the page is centred. Here’s a fixed page design :


fixed design HTML / CSS – Creating Your Website Design !


A stretched design is a design that automatically adapts itself to the visitor’s screen resolution. If the visitor’s resolution is 1024*768 the width of the site will be 1024 pixels. If the resolution is 1600*1400, the width will be 1600 pixels.


stretch design HTML / CSS – Creating Your Website Design !


Personally, I prefer stretched designs : I find it a shame to leave part of the screen unused.
However, if you browse around a few sites, you’ll notice that a lot of them have fixed designs. Some people say that they look nicer, but I’ll tell you the truth : they’re also a lot easier to create icon wink HTML / CSS – Creating Your Website Design !


What kind of design will we be using ?


To tell the truth, coding a stretched design can sometimes be quite complicated, and as this is your first design I don’t want to complicate things too much. Therefore we’ll be using a fixed page design, which isn’t a bad start.
When you’re a bit better, and you’ve got more experience, you’ll be able to start coding stretched page designs. You’ll have plenty of time to learn icon wink HTML / CSS – Creating Your Website Design !


First, The XHTML


First step : we need to open our text editor (Notepad ++ if you took the one I showed you at the beginning), and create a new XHTML file.
Come on! Come on! Do it at the same time as me icon wink HTML / CSS – Creating Your Website Design !


To start, we’ll write the basic code of an XHTML page which I showed you in the first chapters. Here it is again :


Code : HTML









1http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">






2<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">






3<head>






4     <title>Welcome to my site !title>






5     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />






6head>






7 






8<body>






9 






10body>






11html>

As you already know, all the page content will go between the tags.
Save this file as index.html, which is always the first page of a web site.


The General Structure


Very often, a web page is structured using

tags, the famous universal block tag I told you about. Generally, we’ll have at least 4 blocks, with the following layout :


structure HTML / CSS – Creating Your Website Design !



  1. At the top, the header. Generally the header contains the title of your site in the form of a banner.
  2. Under that is the main part of the page with :

    • to the left or right, the menu.
    • on the other side, the body of the page, meaning the part with the page’s content.

  3. Finally, at the bottom of the page, is the footer, in which you write the author’s name, maybe an email address, and a copyright.

In XHTML, we create the blocks with 4 different

tags :


Code : HTML









1<div id="header">






2    <-- Put the banner here -->






3div>






4 






5<div id="menu">






6     <-- Put the menu here -->






7div>






8 






9<div id="body">






10     <-- Put the content (text) of the page here -->






11div>






12 






13<div id="footer">






14     <-- Put the site's author's name, copyright etc. here -->






15div>

It’s simple enough, we’ve just made a

block for each major part of the page. Later, we’ll see what needs to be put in the different blocks.


One thing that might have surprised you is that I used id instead of class for the

tags. If you can’t remember the difference between id and class it might be a good idea to have a quick look at the first chapters on CSS.


To explain things quickly, id and class are more or less the same; however an id can only be used once in a page, whereas class can be used several times. Generally there are few id in a web page, they are mainly used for the main blocks of a page as you can see here.


You must write your blocks in the order that they appear (from top to bottom) in the XHTML code. First is the header, last is the footer. For the menu and the body, which are at the same level, it isn’t too important. You can change their position in the CSS (menu to the right or to the left).


Right, now what needs doing ? Well, we’ll see in more detail what needs putting in the different

blocks icon biggrin HTML / CSS – Creating Your Website Design !


The Header


This block will be quick. Often the header is just a banner (an image), or for those who don’t want to do any drawing, a simple

(the page’s title) will do the job.


We’ll be using a banner this time :


header11 560x73 HTML / CSS – Creating Your Website Design !


All the images used in this chapter are copyright zaz and venom all rights reserved (I promised them I’d put their names into the tutorial icon wink HTML / CSS – Creating Your Website Design ! ). Thanks to them for the help on this chapter !


How do we put this image into the header ? Well we have 2 choices :



  • Either we can insert it using an tag. That’s an easy way to insert an image, anyone can do that.
  • Or we can write the title

    in the header and insert the banner using CSS.


I admit that the second solution may be a bit surprising. However we’ll be using this method so that the image is shown by simply using CSS. We’ll also add a link to the title of the page so that it sends users back to the home page of the site.


Code : HTML









1<div id="header">






2     <h1><a href="index.html" title="Return to home page">Mechanical Spirita>h1>






3div>

As you can see the link goes to index.html. That’s because the home page of a web site must always be called index.html.


The Menu & Sub-Menus


In the menu block (in blue), we’ll need to make several sub-blocks to separate the different elements in the menu.
Take a good look at the following diagram : it’s a zoom on the menu block I showed earlier :


menu HTML / CSS – Creating Your Website Design !


As you can see, it contains 2 sub-blocks (green) which will be sub-menus.
How do we do this ? In XHTML it is very easy :


Code : HTML









1<div id="menu">






2 






3     <div class="sub-menu">






4          Text of the first menu






5     div>






6 






7     <div class="sub-menu">






8          Text of the second menu






9     div>






10 






11div>

All you have to do is nest the

tags. The first one (the main one) surrounds the other ones (the sub-menus). I’ve given these a class called sub-menu so that we can modify their CSS later.


Right, now we need to add text to the menu so that it’s like the diagram I showed above.
In each sub-menu we need to add a title menu. Do you remember the tag to add titles ? Yes, there are 6 tags (depending on the importance of the title) : from

to

. As the titles of menus are less important (and we want to reserve the important titles for the page content) we’ll put the menu titles in

.
After that, we’ll add a list (