Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

Über newb here. Help

TheMonarch

TheMonarch

macrumors 65816
Original poster
May 6, 2005
1,467
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:



webhelpvb2.gif
 
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>
 
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.
 
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:
Click to expand...

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.
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back