Über newb here. Help

TheMonarch

macrumors 65816
Original poster
May 6, 2005
1,469
1
Bay Area
So I'm desperately designing the layout [Not at the content stage] for my website using Dreamweaver. I'm not that great at using this App, but can do some really basic things.

So far I've created 3 tables...
1- with what'll be the banner
2- in the middle for navagation buttons
3- the body. for the content.

But using tables has turned out to be a frustrating experience. I said no borders [in the settings], yet I still see them.

Am I even using tables correctly? :confused:
How should I approach this?

This web-design thing is harder than I thought, you can't just layout things the way you want them :eek:



 

TheMonarch

macrumors 65816
Original poster
May 6, 2005
1,469
1
Bay Area
This is what I've got so far... It isn't much, nor is it uploaded yet:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>test</title>
<style type="text/css">
<!--
body {
	background-color: #666600;
	background-image: url(../Thumbs/diag);
	background-repeat: repeat;
}
a:link {
	color: #999999;
}
a:visited {
	color: #CCCCCC;
}
.style2 {font-family: Verdana, Arial, Helvetica, sans-serif}
.style3 {
	font-size: 9px;
	color: #00FF00;
}
.style5 {font-family: Verdana, Arial, Helvetica, sans-serif; color: #999999; }
#Layer1 {
	position:absolute;
	width:275px;
	height:115px;
	z-index:1;
	left: 244px;
	top: 283px;
	overflow: auto;
}
.style8 {font-family: Verdana, Arial, Helvetica, sans-serif; color: #999999; font-size: 36px; }
.style9 {font-size: 12px}
.style10 {font-size: 18px}
#Layer2 {
	position:absolute;
	width:200px;
	height:115px;
	z-index:2;
	left: 469px;
	top: 376px;
}
-->
</style>
<script 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>
<div align="center"> <img src="Body_images/banner.png" width="768" height="128" />
  <table width="768" border="0" bordercolor="#000000">
    <tr>
      <th scope="col"><img src="Body_images/Bodyshadow.png" width="768" height="32" /></th>
    </tr>
  </table>
  <table width="768" height="1024" border="0" background="Body_images/Bodyshadow.png">
    <tr>
      <th scope="col"> </th>
    </tr>
  </table>
  <label></label>
</div>
<table width="720" border="0" align="center">
  <tr>
    <td><div align="center"></div></td>
  </tr>
</table>
</body>
</html>
 

ChicoWeb

macrumors 65816
Aug 16, 2004
1,120
0
California
By default, DW puts 2 cellpadding and 2 cellspacing around all tables. So in your property inspector, make sure you add "0" for cell pading and spacing. Should do it.
 

Kunimodi

macrumors member
Sep 8, 2006
65
0
Ashland, OR, USA
blaskillet4 said:
So I'm desperately designing the layout [Not at the content stage] for my website using Dreamweaver. I'm not that great at using this App, but can do some really basic things.

So far I've created 3 tables...
1- with what'll be the banner
2- in the middle for navagation buttons
3- the body. for the content.

But using tables has turned out to be a frustrating experience. I said no borders [in the settings], yet I still see them.

Am I even using tables correctly? :confused:
How should I approach this?

This web-design thing is harder than I thought, you can't just layout things the way you want them :eek:
Hi, blaskillet4. Tables are not the best approach for visually laying out a web page. HTML should be purely describe the structure and the content, not the way it is rendered on the screen. It is best to use style sheets to define the way the HTML is to look. For example, this could do what you've requested:
Code:
<html>
  <body style="background-color:brown">
    <div class="banner" style="background-image:url('banner.png');
  background-position: center; height: 150px"></div> 
    <div class="navigation"
  style="background-image:url('navigation_bkgd.png'); height:100px">
      <a href="1.html" class="button">Button 1</a>
      <a href="2.html" class="button">Button 2</a>
      <a href="3.html" class="button">Button 3</a>
    </div>
    <div class="body">
      The body is here.
    </div>
  </body>
</html>
I used 'class' attributes because it is normally preferable to put the style information in the header or a separate file. Then you would define each class like:
Code:
div.body {
  background-color: green;
}
making the div with the class named 'body' have a green background.