Über newb here. Help

TheMonarch · Sep 27, 2006

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?

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

Mr. Anderson · Sep 27, 2006

post the link or code

D

TheMonarch · Sep 27, 2006

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 · Sep 28, 2006

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 · Sep 28, 2006

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?
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

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.

Search

Search

Über newb here. Help

TheMonarch

macrumors 65816

Mr. Anderson

Moderator emeritus

TheMonarch

macrumors 65816

ChicoWeb

macrumors 65816

Kunimodi

macrumors member

Our Staff