Page 2 of 2 FirstFirst 12
Results 11 to 11 of 11
  1. #11
    Moderator wildjokerdesign's Avatar
    Join Date
    Jun 2003
    Location
    Kansas City Mo
    Posts
    5,721

    Default

    Yes Dreamweaver is an option. I don't like it but it is an option. It might be the best thing for you to start out with. When I first started I used it to quickly layout sites. It too had limits for what I wanted so I soon dug in and learned about the code behind the scene. If you can get your hands on a copy of it then I say give it at try.

    I did do a quick mock up of code based on your image. It requires three files. One called test.html another called style.css and then an image called bodyback1024x768.png.

    test.html:
    HTML Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <title>Title of the document</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
    </head>
    
    <body>
    <div id="wrapper">
    	<div id="logo">LOGO</div>
    	<div id="links">LINKS</div>
    	<div id="content">
    		<div id="altbody">
    		ALTBODY
    		</div>
    		<div id="body">
    		BODY
    		</div>
    		
    	</div>
    </div>
    </body>
    
    </html>
    style.css:
    Code:
    html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}:focus{outline:0}ins{text-decoration:none}del{text-decoration:line-through}
    
    html {
    	height: 100%;
    	width: 100%;
    	overflow: hidden;
    }
    
    body {
    	height: 100%;
    	width: 100%;
    	overflow: auto;
    	background: #000000 url(bodyback1024x768.png') no-repeat center;
    }
    
    #wrapper {
    	width: 960px;
    	margin: 20px auto;
    	text-align: center;
    }
    #logo {
    width: 500px;
    height: 150px;
    background: #ffffff;
    color: #000000;
    margin: auto;
    
    }
    
    #links{
    width: 800px;
    height: 20px;
    background: #ffffff;
    color: #000000;
    margin: auto;
    }
    
    #content {
    	color: #000000;
    	background: #ffffff;
    	width: 100%;
    	height: 600px;
    	
    }
    
    #body{
    width: 800px;
    
    
    }
    #altbody{
    float: right;
    width: 150px;
    height: 100%;
    border-left: red solid 2px;
    
    }
    I've attached the image file. If you downloaded Editplus then you could open it up and copy and past the above two bits of code into two files appropriately named and the upload those and the image file to your public_html directory. Then go to example.com/test.html and you should see something similar to what you mocked up in your photo program. No rounded edges on things or any real content or logo but those things are easy to add in really. This is just an example of things... don't expect that you can use it as is.
    Attached Images Attached Images  
    Shawn
    Please remember your charity of choice: http://www.redcross.org

    Handy Links: wildjokerdesign.net | Plain Text Editors: EditPlus | Crimson

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •