PDA

View Full Version : How to code and slice a layout in Dreamweaver


Johno
19-04-2006, 05:02 PM
Hey,

Can you tell me how to code a layout in Dreamweaver.

I really need to know! Can you possibly make a tutorial?
Tomm
19-04-2006, 05:10 PM
www.slicingguide.com
Judas
19-04-2006, 07:37 PM
Lawl you coulda just put the title of this thread into Google pls, lawl
Sygon.
19-04-2006, 07:51 PM
Learn how to slice then itll bve easy to code when you have learned pm me and ill help, then after you learn how to code you learn how to code using xhtml and div.
Johno
21-04-2006, 10:50 PM
I know how to slice ( Kinda )

Its just the coding!
Sygon.
21-04-2006, 10:54 PM
Find the table which contains the image and then givbe it the background attribute


Background='Image Url'

Then delete the image it contains and it shud be fine
Halting
21-04-2006, 11:01 PM
Depends how your planning to make your website. Are you going to be using iFrames or tables and PHP includes?
Johno
21-04-2006, 11:12 PM
I would be using Expanding Tables and PHP Includes in someplaces
Halting
21-04-2006, 11:17 PM
Ok. So when you click a link on the navigation it would reload the entire frame instead of just the box (IFrame) in the content area.

Well, if your going to slice it be careful because using a lot of images can slow down loading time a lot. Try using tables to position where your going to put the 'boxes' for the navigation, latest news etc and set the images for your template as the tables background image.

By the way, if you ever come across, at any time, a problem where your site looks... different in Firefox, alot of the time this simple code can solve it:


<style type="text/css">
body {
margin-top: 15px;
margin-left: 15px;
margin-right: 15px;
margin-bottom: 15px;
}
</style>


Basically because in Firefox the default margins are different to those ones set in IE. 15 should be changed until it looks about right ;). Though, this doesn't always solve the problem!
Mentor
21-04-2006, 11:20 PM
I would be using Expanding Tables and PHP Includes in someplaces
Works better if you use real tables insted of the fictonal ones that n00bs are unable to get in to there head are normal tables
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


name='nameofiframe'

then the link would be


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

Or to reload it in the same browser


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

or in a new window


<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.



<!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.



.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.



<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 (http://www.W3schools.com) www.cssbasics.com (http://www.cssbasics.com)

Thanks
Encryptions!
Johno
22-04-2006, 11:00 AM
Thanks!
Sygon.
22-04-2006, 11:01 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.



<!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.



.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.



<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 (http://www.W3schools.com) www.cssbasics.com (http://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
:D 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



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


give the <tr> tag a background attribute



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


now delete the image 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



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.
Sygon.
22-04-2006, 11:22 AM
www.slicingguide.com some good guidelines
Johno
22-04-2006, 11:30 AM
I know, I have been on it but uses MX not 8 and it uses Corel instead of fireworks im not so "smart" when it comes to this
Encryptions!
22-04-2006, 11:43 AM
Oh dear if you read Faken actually says in it somewhere that you can use any slicing tool :s are you a complete dickweeb or what?
Johno
22-04-2006, 11:48 AM
Yes! Im am totaly stupid!
Sygon.
22-04-2006, 11:49 AM
Oh dear if you read Faken actually says in it somewhere that you can use any slicing tool :s are you a complete dickweeb or what?

***** dan, dude its simple all slicers are the same.

Want to hide these adverts? Register an account for free!