[TUT] How to code in Divs [Gangster]

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.

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.

.

4. Go to Windows > Insert > Image. Then insert the top of your box. Once you've done that, your code should look like this.

HTML Code:

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

HTML Code:

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

rawritsluke · 20-03-2008, 06:23 PM

It would be just as easy to do this:

<style>

</style>
<body>
<div id="navbox">
<div id="navtop"></div>
<div id="navmiddle">whatever you want in box here</div>
<div id="navmiddle"></div>
</div>
</body>

Thats how easy it could have been done in notepad

Good tut but --SS-- did the same one..

Gangster · 20-03-2008, 06:24 PM

Originally Posted by rawritsluke

It would be just as easy to do this:

<style>

</style>
<body>
<div id="navbox">
<div id="navtop"></div>
<div id="navmiddle">whatever you want in box here</div>
<div id="navmiddle"></div>
</div>
</body>

Thats how easy it could have been done in notepad

Good tut but --SS-- did the same one..

Yeah i know, but i find this easier, so i thought others would aswell.

rawritsluke · 20-03-2008, 06:25 PM

+REP to you for doing the tut. I wasn't flaming you for doing it, it's a nice idea and easy for new coders

Just giving as an example for someone who wants to code without programs, just using a simple text editor like Notepad

~~Unpredictible.1~~ · 20-03-2008, 06:27 PM

*Removed*

Edited by Kaotix12 (Forum Moderator): Please do not accuse others of ripping.

Gangster · 20-03-2008, 06:28 PM

Originally Posted by rawritsluke

+REP to you for doing the tut. I wasn't flaming you for doing it, it's a nice idea and easy for new coders

Just giving as an example for someone who wants to code without programs, just using a simple text editor like Notepad

KK, ty.

Originally Posted by Unpredictible.1

Hold on.

Since when can you start coding :S

Since i decided to learn...

rawritsluke · 20-03-2008, 06:29 PM

Originally Posted by Unpredictible.1

Hold on.

Since when can you start coding :S

Lmao CSS is so easy to learn so anyone can code css in a matter of hours or if they're slow learner days. Personally I learnt in hours

~~Unpredictible.1~~ · 20-03-2008, 06:31 PM

No I just don't believe he made the tutorial but 'good tutorial'

Gangster · 20-03-2008, 06:31 PM

Originally Posted by Unpredictible.1

No I just don't believe he made the tutorial but 'good tutorial'

Lol, if you've learnt and you know how to do it, then you can make a tut...

rawritsluke · 20-03-2008, 06:31 PM

Originally Posted by Unpredictible.1

No I just don't believe he made the tutorial but 'good tutorial'

I did suspect with the "apDiv" as I've seen that elsewhere on a tutorial but who knows. I'm not going to say he's ripped with no proof

Thread: [TUT] How to code in Divs [Gangster]

Thread Tools

[TUT] How to code in Divs [Gangster]

Posting Permissions