dreamweaver html page

I created a HTML layout using dreamweaver. I used DIV tags to set the backgrounds for both the header and main body. The problem is that when I preview the page, the images are not shown.

Any help please?

Thanks

Now its appearing in dreamweaver preview but when I try to import in Ruby in Steel (Ruby on Rails for the Visual Studio IDE) it only displays the footer.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
    font: 100% Verdana, Arial, Helvetica, sans-serif;
    background: #666666;
    margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
    padding: 0;
    text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
    color: #000000;
    background-image: url();
}
.oneColFixCtrHdr #container {
    width: 780px;  /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
    background: #FFFFFF;
    margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
    border: 1px solid #000000;
    text-align: left; /* this overrides the text-align: center on the body element. */
}
.oneColFixCtrHdr #header {
    background: #DDDDDD; 
    padding: 0 10px 0 20px;  /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
}
.oneColFixCtrHdr #header h1 {
    margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
    padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
}
.oneColFixCtrHdr #mainContent {
    padding: 0 20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
    background: #FFFFFF;
}
.oneColFixCtrHdr #footer {
    padding: 0 10px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
    background:#DDDDDD;
}
.oneColFixCtrHdr #footer p {
    margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
    padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
}
.logo {
    background-image: url(My%20Pictures/logo.JPG);
}
.main_body {
    background-image: url(My%20Pictures/main_body.JPG);
}
.logo {
    background-image: url(My%20Pictures/logo_menu.JPG);
}
-->
</style></head>

<body class="oneColFixCtrHdr">

<div id="container">
  <div id="mainContent">
    <div>
      <div class="logo">
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
      </div>
    </div>
    <div class="main_body">
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <!-- end #mainContent -->
  </div></div>
  <div id="footer">
    <p>(c) Lily 2009</p>
  <!-- end #footer --></div>
<!-- end #container --></div>
</body>
</html>

Edit:

background-image: url(My%20Pictures/logo.JPG);

This may not work with the forward slash / since you're presumably on Windows, if you're viewing the file locally in your web browser. This also assumes that your HTML file is in the folder above "My Pictures." To troubleshoot, try putting your images in the same folder as the html file and using url(logo.jpg) to avoid the path confusion.

In my experience, the WYSIWYG editor in Dreamweaver just causes more frustration than it's worth and makes a big mess of code (e.g. all the <p>s in your example). Get a good book on web design and you will probably find that it's easier to just write it out by hand, at least to start. HTML is pretty intuitive, but not the way dreamweaver does it.

Original answer:

Contents of the <head> tag are not shown; they are just hidden info for the page.

Are you inserting your image using:

<img src="image.jpg" alt="photo" />

You should learn CSS for styling and background images, though. This can go inside <head>, but minus the <style> tags if it's in a separate linked CSS file.

<style type="text/css">
    body { background-image:url('bgimg.png'); }
</style>

btw, Dreamweaver is just a fancy text editor with a [bad] browser built in.

ansaurus

tags:

views:

answers:

dreamweaver html page

related questions