Web page Header and footer

Hi,
I am using dreamweaver to create web site, I don't want to use frame to devide my page, is there any other way
to have certain area fixed in the page and another areas display different information, I know how I do that using frames, I am looking for another solution
asamuelAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

WillibobCommented:
Not sure if this is exactly what you are after but you can use tables for layout purposes as follows:

<html>
<head>
<title>Layout Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>
<table width="100%" height="100%" border="1" cellpadding="0" cellspacing="0">
  <tr>
    <td height="100px"><div align="center">This would be the Header Section</div></td>
  </tr>
  <tr>
    <td height="100%"><div align="center">This would be where your content would
        go. </div></td>
  </tr>
  <tr>
    <td height="100px"><div align="center">This would be the Footer Section</div></td>
  </tr>
</table>
</body>
</html>

The above code creates a 100% x 100% table consisting of 3 rows and 1 column. I have fixed the top and bottom row height to 100 pixels but they too can be set to a % value and will therefore scale as the browser window is resized.

To utilise this method, the content for your header section would go in between the first <td> and </td> tags. The content for the page body would go in between the second <td> and </td> tags and finally the content for your footer section would go in between the last <td> and </td> tags.

Using tables with width & height set to % means that the content areas will resize dependant on the available screen area. Setting both values to 100% means that the table will expand to fit the entire available screen and will resize if the browser window is resized.

Be aware that the use of layout tables is regarded as obsolete so you may wish to use Cascading Style Sheets instead. I still use layout tables when designing in-house websites because I find it a far quicker method.

Hope this helps, if not then post a comment and I'll try and help further.

Bill
0
asamuelAuthor Commented:
This is good thank you, how to do that with CSS
0
WillibobCommented:
The following is something similar using CSS inline styles.

<html>
<head>
<title>Layout with CSS</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
</head>
<body leftmargin="0" topmargin="0">
<div align="center" id="Layer1" style="position:absolute; overflow:auto;top:0; left:0; width:100%; height:20%; z-index:1; background-color: #CC3300; layer-background-color: #CC3300; border: 1px none #000000;">Header<BR>
    Goes<BR>Here<BR></div>
  <div align="center" id="Layer2" style="position:relative; overflow:auto;top:20%;left:0;width:100%; height:60%; z-index:1; background-color: #CC6600; layer-background-color: #CC6600; border: 1px none #000000;">Content<BR>goes<BR>here<BR></div>
<div align="center" id="Layer3" style="position:relative; overflow:auto;top:20%;width:100%; height:20%; z-index:3; background-color: #00FFFF; layer-background-color: #00FFFF; border: 1px none #000000;">Footer<BR>Goes<BR>Here<BR></div></div>
</body>
</html>

If you resize your browser to a short height you will notice that scrollbars appear. This is caused by the overflow property being set to auto.

I've spilit the page 20-60-20 but you can obviously change this to suit your needs.

Bill
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Adobe Dreamweaver

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.