Gangster
20-03-2008, 06:15 PM
In this tutorial i will explain to you how to code in Divs with dreamweaver. I will try my best to show you how it should like like every few steps. Coding in Divs with Dreamweaver actually isn't hard.
1. First, you will have to slice up your layout. Make sure that you slice your boxes into 3 different parts. Top, Middle and Bottom. This is because you want the middle part to expand. I'm using this box for this tutorial. http://www.iaza.com/work/080321C/box_1_example63757.PNG
2. Once you've sliced up your layout, make a new HTML Document. Then, on the dropdown menu next to Standard, select Layout, the items on the left should then change. Select Draw AP Div.
3. Once you've drawn a div, make the attributes to the size of the image you sliced. I;m going to make it W; 193px and H; 34px. Because that is the attribute for the top of my box.
http://www.iaza.com/work/080321C/box_1_example_top83773.PNG.
4. Go to Windows > Insert > Image. Then insert the top of your box. Once you've done that, your code should look like this.
<!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=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#apDiv1 {
position:absolute;
left:56px;
top:14px;
width:193px;
height:34px;
z-index:1;
}
-->
</style>
</head>
<body>
<div id="apDiv1"><img src="file:///C|/Documents and Settings/Jordan/My Documents/tut/box 1 example top.PNG" width="193" height="34" /></div>
</body>
</html>
5. Make the background image the top of your box. This is done by clicking the AP DIV the image is in, you don't click the Image itself, you click the AP Div. Then at the right of your screen it should say CSS styles, Under summary for section double click one of the options. Then once it's opened a new window, go to background and make the background image the top of your box.
6. Come out of the window, and delete the image, The same image should appear, that is your background image. You should now be able to type on that. Your code should now look like this.
<!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=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#apDiv1 {
position:absolute;
left:56px;
top:14px;
width:173px;
height:14px;
z-index:1;
background-image: url(file:///C|/Documents%20and%20Settings/Jordan/My%20Documents/tut/box%201%20example%20top.PNG);
padding: 10px;
}
.style1 {
color: #FFFFFF;
font-family: Verdana;
font-weight: bold;
font-size: 11px;
}
-->
</style>
</head>
<body>
<div id="apDiv1">
<div align="center" class="style1">This is a box</div>
</div>
</body>
</html>
and design should look like http://www.freewebs.com/divstut/
7. So now you can position it. By brining up that same window as before.
8. So, now you've just coded in a div. You will need to do this for the middle of the box and the bottom. To make the middle expandable is really easy, all you have to do is apply no height then you can make it any height you want.
9. The end result of this should be like this. http://www.freewebs.com/divstut/index1.html
Thank you for reading this tutorial, hope it helped!
1. First, you will have to slice up your layout. Make sure that you slice your boxes into 3 different parts. Top, Middle and Bottom. This is because you want the middle part to expand. I'm using this box for this tutorial. http://www.iaza.com/work/080321C/box_1_example63757.PNG
2. Once you've sliced up your layout, make a new HTML Document. Then, on the dropdown menu next to Standard, select Layout, the items on the left should then change. Select Draw AP Div.
3. Once you've drawn a div, make the attributes to the size of the image you sliced. I;m going to make it W; 193px and H; 34px. Because that is the attribute for the top of my box.
http://www.iaza.com/work/080321C/box_1_example_top83773.PNG.
4. Go to Windows > Insert > Image. Then insert the top of your box. Once you've done that, your code should look like this.
<!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=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#apDiv1 {
position:absolute;
left:56px;
top:14px;
width:193px;
height:34px;
z-index:1;
}
-->
</style>
</head>
<body>
<div id="apDiv1"><img src="file:///C|/Documents and Settings/Jordan/My Documents/tut/box 1 example top.PNG" width="193" height="34" /></div>
</body>
</html>
5. Make the background image the top of your box. This is done by clicking the AP DIV the image is in, you don't click the Image itself, you click the AP Div. Then at the right of your screen it should say CSS styles, Under summary for section double click one of the options. Then once it's opened a new window, go to background and make the background image the top of your box.
6. Come out of the window, and delete the image, The same image should appear, that is your background image. You should now be able to type on that. Your code should now look like this.
<!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=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#apDiv1 {
position:absolute;
left:56px;
top:14px;
width:173px;
height:14px;
z-index:1;
background-image: url(file:///C|/Documents%20and%20Settings/Jordan/My%20Documents/tut/box%201%20example%20top.PNG);
padding: 10px;
}
.style1 {
color: #FFFFFF;
font-family: Verdana;
font-weight: bold;
font-size: 11px;
}
-->
</style>
</head>
<body>
<div id="apDiv1">
<div align="center" class="style1">This is a box</div>
</div>
</body>
</html>
and design should look like http://www.freewebs.com/divstut/
7. So now you can position it. By brining up that same window as before.
8. So, now you've just coded in a div. You will need to do this for the middle of the box and the bottom. To make the middle expandable is really easy, all you have to do is apply no height then you can make it any height you want.
9. The end result of this should be like this. http://www.freewebs.com/divstut/index1.html
Thank you for reading this tutorial, hope it helped!