How to code and slice a layout in Dreamweaver

Johno · 21-04-2006, 11:22 PM

Well, What i really want is a Quick loading website. I have the template, and when i click a link i want it to appear in the content box.

I have dreamweaver 8 ( Trial ) and i really want to figure out how to code the god damn layout! --> Me :eusa_wall

~~Sygon.~~ · 22-04-2006, 12:04 AM

if your using a iframe give the iframe a name tag

HTML Code:

name='nameofiframe'

then the link would be

HTML Code:

<a href='yourpage.html'  target='nameofiframe'>Link Name</a>

Or to reload it in the same browser

HTML Code:

<a href='yourpage.html'  target='_self'>Link Name</a>

or in a new window

HTML Code:

<a href='yourpage.html'  target='_blank'>Link Name</a>

~~Encryptions!~~ · 22-04-2006, 06:20 AM

Hello.

If you are wishing to 'slice' a layout then I suggest slicing it with the slice tool then saving it for web and then opening a blank notepad and writing the basic standard XHTML strict layout out.

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="EN" lang="EN">
<head>
  <title></title>
  <link href="main.css" rel="stylesheet" type="text/css" />
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
</body>
</html>

Then save that as index.html and now we just have to work around the CSS and actually coding your layout. Say you have your banner which is a nice 700px X 100px you could write out in another blank notepad.

HTML Code:

.container{
    width: 700px;
    background-color: #hex code;
    margin-left: auto;
    margin-right: auto;
    margin-top: 5px;
}

.banner{
    width: 700px;
    background-image: url(images/banner.gif);
}

Now basically what that does is create two CSS classes which you can sort of link with a DIV so open up index.html and type in your body.

HTML Code:

<div class="container">
 </div class="banner"></div>
</div>

The container does as it says and it 'holds' the layout by containing it so if you had a 800px banner yet set the .container{ to 700px; it would look weird. Now all you have to do is use the basic class or ID settings to make out your other basic boxes and other things to do with your layout. You can learn more advanted things with CSS like float and padding at www.W3schools.com www.cssbasics.com

Thanks
Encryptions!

Johno · 22-04-2006, 11:00 AM

Thanks!

~~Sygon.~~ · 22-04-2006, 11:01 AM

Originally Posted by Encryptions!

Hello.

If you are wishing to 'slice' a layout then I suggest slicing it with the slice tool then saving it for web and then opening a blank notepad and writing the basic standard XHTML strict layout out.

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="EN" lang="EN">
<head>
  <title></title>
  <link href="main.css" rel="stylesheet" type="text/css" />
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
</body>
</html>

Then save that as index.html and now we just have to work around the CSS and actually coding your layout. Say you have your banner which is a nice 700px X 100px you could write out in another blank notepad.

HTML Code:

.container{
    width: 700px;
    background-color: #hex code;
    margin-left: auto;
    margin-right: auto;
    margin-top: 5px;
}

.banner{
    width: 700px;
    background-image: url(images/banner.gif);
}

Now basically what that does is create two CSS classes which you can sort of link with a DIV so open up index.html and type in your body.

HTML Code:

<div class="container">
 </div class="banner"></div>
</div>

The container does as it says and it 'holds' the layout by containing it so if you had a 800px banner yet set the .container{ to 700px; it would look weird. Now all you have to do is use the basic class or ID settings to make out your other basic boxes and other things to do with your layout. You can learn more advanted things with CSS like float and padding at www.W3schools.com www.cssbasics.com

Thanks
Encryptions!

That would be hard to do for someone without css knowledge or how to slice.

Johno · 22-04-2006, 11:04 AM

I am kinda not understanding it anymore!

I have sliced my layout in fireworks 8 now how do i put my nav.htm and home.htm into the content boxes

I would like to do it all in Dreamweaver 8 - All the coding

~~Sygon.~~ · 22-04-2006, 11:10 AM

See dan its all confusing for a new guy to slicing,

ok youve sliced it, now open it up in dreamweaver,
im ont going to explain this very well as its ard to explan,
ok for example you have your boxes and then you want to write on it dont you?, so click the part where u want to write on and it selects an image, go into code view and you should be selecting a code which is the image code of the one you have just selected in design view, should be something like this

HTML Code:

<tr>
<img src='thesrc' width='width' height='height' alt='alt' border='0' />
</tr>

give the <tr> tag a background attribute

HTML Code:

<tr background='thesrc'>
<img src='thesrc' width='width' height='height' alt='alt' border='0' />
</tr>

now delete the image code

HTML Code:

<tr background='thesrc'>
 </tr>

now it should have the image as the background in the table (design view) and you an write in the content box alsogive it a valgin tag which makes the text startat the top and end at the bottom

HTML Code:

valign='top'

Note*** 'thesrc' would be the path to the image.

hjope that helps

- sygon

:Edzy · 22-04-2006, 11:17 AM

easier in fireworks

Johno · 22-04-2006, 11:17 AM

Hey!

Thanks for all the help!

Just one final question about the slicing!

Do i slice round the edges of the boxes or the inside where the content will be :s

DJ-Zero - Do you mean it is easyer to code in fireworks? If so how!

~~Encryptions!~~ · 22-04-2006, 11:21 AM

It wouldn't really be hard if he had some knowledge in anything.. I told him to use the slice too to save to web and use the images generated... Wouldn't be difficult.

Thread: How to code and slice a layout in Dreamweaver

Thread Tools

Posting Permissions