One more reason to start with static HTML is, it is easy to write. You don't need any special software to execute it. Any browser can render the HTML you write. This is how our initial design looked like.
Idea here is to have a common header & footer module & the Content module will be a <iframe> loading individual html files ( HomePage , About Us , Gallery , Contact Us , etc .. ).
With the design document ready, its time for implementation. Will no go into the details of implementation, but will share the problems I faced during learning phase & how I solved them. ( Note - Might not be the right way )
1. Where / How to start ??
As I mentioned earlier, Dreamweaver was my first try which didn't help much in my learning. So stuck with writing html on notepad++. Wrote a simple html with three div's enclosed inside the <body> . My first html. The code looked like this.
<html>
 |
| Initial Design of the Page. |
With the design document ready, its time for implementation. Will no go into the details of implementation, but will share the problems I faced during learning phase & how I solved them. ( Note - Might not be the right way )
1. Where / How to start ??
As I mentioned earlier, Dreamweaver was my first try which didn't help much in my learning. So stuck with writing html on notepad++. Wrote a simple html with three div's enclosed inside the <body> . My first html. The code looked like this.
<html>
<body>
<div id="Container">
<div id="Container">
<div id="Header"></div>
<div id="Content"></div>
<div id="Footer"></div>
</div>
</div>
</body>
</html>
Now to position each elements I started writing my CSS. Being newbie, I assigned width , height & used "position:absolute" , "left" , "top" to position the elements. This is how my CSS looked at first,
#Container{
position:absolute;
width:900px;
height:800px;
left:50px;
top:10px;
border:1px solid;
}
The Problem -
Using position:absolute is like plotting values on a graph using (X,Y) co-ordinates. Irrespective of the browser screen size, the elements will be positioned exactly on the co-ordinates relative to the parent element. As a result, while viewing in higher resolutions the web page might look like -
Instead of this, I switched to "margin: 0 auto;" . This will always ensure that the elements are in the center of the browser window, irrespective of the resolution. Try this property in the Css & re-size the browser. You can see how the element positions itself in the center whenever the re-sizing happens.
#Container{
margin: 0 auto;
width:900px;
height:800px;
border:1px solid;
}
~Prem.
Now to position each elements I started writing my CSS. Being newbie, I assigned width , height & used "position:absolute" , "left" , "top" to position the elements. This is how my CSS looked at first,
#Container{
position:absolute;
width:900px;
height:800px;
left:50px;
top:10px;
border:1px solid;
}
The Problem -
Using position:absolute is like plotting values on a graph using (X,Y) co-ordinates. Irrespective of the browser screen size, the elements will be positioned exactly on the co-ordinates relative to the parent element. As a result, while viewing in higher resolutions the web page might look like -
 |
| Drawback of using position : absolute |
#Container{
margin: 0 auto;
width:900px;
height:800px;
border:1px solid;
}
~Prem.
