Über newb here. Help

Discussion in 'Web Design and Development' started by TheMonarch, Sep 27, 2006.

  1. TheMonarch macrumors 65816

    TheMonarch

    Joined:
    May 6, 2005
    Location:
    Bay Area
    #1
    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:



    [​IMG]
     
  2. Mr. Anderson Moderator emeritus

    Mr. Anderson

    Joined:
    Nov 1, 2001
    Location:
    VA
  3. TheMonarch thread starter macrumors 65816

    TheMonarch

    Joined:
    May 6, 2005
    Location:
    Bay Area
    #3
    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>
    
     
  4. ChicoWeb macrumors 65816

    ChicoWeb

    Joined:
    Aug 16, 2004
    Location:
    California
    #4
    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.
     
  5. Kunimodi macrumors member

    Joined:
    Sep 8, 2006
    Location:
    Ashland, OR, USA
    #5
    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.
     

Share This Page