PDA

View Full Version : Using Divs and Layers in Dreamweaver


brycematheson712
01-13-2008, 05:16 AM
<begin rant>

I'm a beginner to Dreamweaver and I'm just looking for a little bit of help. I am currently in a Web Design class at school and everything there is going GREAT. I absolutely love Dreamweaver and can't stay away from it. The problem is, I'm loving it so much that I want to go ahead and start creating more advanced pages versus the ones that our teacher has explained to us yet.

So far, we created a page using only 4 layers. One layer was in the top left-hand corner and was about 120 x 120 pixels for the logo. Right underneath that was another layer about 120 x 400 pixels for the left navigation bar. Directly to the right of that layer we created another one for the main content which was about 600 x 400 pixels. And right above that layer was a layer for the top navigation bar which came out to be around 600 x 120 pixels. We imported all of our Fireworks HTML and Images into these layers to make a quick page. The 4 layers looked something like this:

http://i12.photobucket.com/albums/a228/theutherwhitemeat/screen_1.png

Our teacher has now been teaching us about classes, CSS Styling, CSS Coding, Editable Regions, Templates, and all the other basic/semi-basic stuff. Dreamweaver rules!

</end rant>

Alright, here's my real quick now, though. I came to this website looking for Dreamweaver Templates that I could 're-create' on my own to learn more about the features. The first one I tried recreating was "Andreas01" (http://www.dreamweaverclub.com/templates/andreas01/andreas01.zip). This is where it gets kind of complicated and so if I'm completely horrible at explaining it, please bear with me.

If you look in the following picture, I took a screenshot of the Andreas01's index.html file in Dreamweaver. If you look towards the outside edge there is a dotted gray line (I highlighted in pink) which I'm assuming is a Div tag. However, whenever I click on it I have no property options. But it shows that it does have assets tied to it, because it has margins (shown in the second link). This may be a stupid question, but I don't get how that is. How can you set properties on a div tag that has no options? It doesn't show up in the CSS Styles panel to the right.

http://i12.photobucket.com/albums/a228/theutherwhitemeat/screen_2.png
http://i12.photobucket.com/albums/a228/theutherwhitemeat/screen_3.png


Also, they have a background which extends much farther outside the (what I think is a div) div.

And one last thing (thanks for putting up with me guys). This sort of ties into the first question, but oh well. How do they organize everything with those weird div (just like the main one in the first question) things (highlighted in pink)? Like, again, whenever I click on them there are no properties which can be changed, but they all show margins and padding, and they obviously had to be changed at one point because they're all different dimensions and sizes.

http://i12.photobucket.com/albums/a228/theutherwhitemeat/screen_4.png

Okay, I'm sorry for such a long post everyone and I hope I didn't confuse anyone too bad. If it sounds too confusing maybe I can try and re-word it in later posts. Anyway, ANY help would be GREATLY appreciated. Thanks!

Cary
01-13-2008, 06:56 AM
The problem is, I'm loving it so much that I want to go ahead and start creating more advanced pages versus the ones that our teacher has explained to us yet.

This is just a suggestion, but as well as what you're trying to do by looking at templates, you can try to figure out how to produce the same pages you've done in class, but without using layers.

If you look towards the outside edge there is a dotted gray line (I highlighted in pink) which I'm assuming is a Div tag. However, whenever I click on it I have no property options...How can you set properties on a div tag that has no options? It doesn't show up in the CSS Styles panel to the right.

Actually, the styling is showing up in the CSS panel in the second picture. Here's another picture showing the styling.

http://www.carydriscoll.com/wrap.png

This provides such info as the width of the div#wrap and says it has top and bottom margins of 0px and left and right margins of "auto", meaning they will automatically extend in equal proportion to the edges of the window to keep div#wrap centered in the window. This doesn't work if the div doesn't have a specified width.

Also, they have a background which extends much farther outside the (what I think is a div) div.

That vertically repeating background image is being applied to the body of the page so it can extend beyond edges of the outer most div and provide the shaded edges and such.

http://www.carydriscoll.com/body.png

Here's the CSS:

body {
margin: 0 auto;
padding: 0;
font: 76% Verdana,Tahoma,Arial,sans-serif;
background: #f4f4f4 url(bg.gif) top center repeat-y;
}

Cary
01-13-2008, 07:39 AM
How do they organize everything with those weird div (just like the main one in the first question) things (highlighted in pink)? Like, again, whenever I click on them there are no properties which can be changed, but they all show margins and padding, and they obviously had to be changed at one point because they're all different dimensions and sizes.

Hopefully, now you can find where these "properties" are. They actually use styles which you can find and change in the CSS panel.

brycematheson712
01-13-2008, 06:06 PM
Thanks for all your help Cary,

But I still don't get it. I went into dreamweaver and clicked on the 'Insert Div Tag' button on the layout panel:
http://i12.photobucket.com/albums/a228/theutherwhitemeat/div_tag.png

Then a new dialog box came up asking me to enter the ID of the new div tag and so I entered in 'container'.
http://i12.photobucket.com/albums/a228/theutherwhitemeat/container-1.png

After selecting 'OK' in that dialog box, it still says that there are no styles defined in the CSS Styles panel to the right. What am I doing wrong?

http://i12.photobucket.com/albums/a228/theutherwhitemeat/no_styles.png


Also, I still had a question about the background thing I posted about earlier. Let's say that you had a page that's 1280 x 1024 (like mine) and the 'container' is only 760px wide and the background is 1000px wide. When I insert it as the body background and tell it to 'repeat-y', what happens? I really want a background that can be universal and cover everyone's screen who visits my page. But, I also don't want it to be too long (causing those annoying scroll bars on the bottom that you have to slide to to read text) and I also don't want them to be too short for users who have massive displays. How would I go about doing this?

Thanks again for ALL of your help Cary!

Cary
01-13-2008, 07:39 PM
After selecting 'OK' in that dialog box, it still says that there are no styles defined in the CSS Styles panel to the right. What am I doing wrong?

You're not doing anything wrong. All you are doing is creating a div. Unlike an absolutely positioned div (aka layer), the div you created has no styling. So there's nothing to see in the CSS panel.

Adobe's Dreamweaver Developer Center: CSS (http://www.adobe.com/devnet/dreamweaver/css.html) has some good tutorials.

In particular, there's this three part tutorial. Go through the last two parts (or the first as well if you have Fireworks).

Taking a Fireworks comp to a CSS-based layout in Dreamweaver
Part 1: Initial design (http://www.adobe.com/devnet/fireworks/articles/web_standards_layouts_pt1.html)
Part 2: Markup preparation (http://www.adobe.com/devnet/fireworks/articles/web_standards_layouts_pt2.html)
Part 3: Layout and CSS (http://www.adobe.com/devnet/fireworks/articles/web_standards_layouts_pt3.html)

Also, I still had a question about the background thing I posted about earlier. Let's say that you had a page that's 1280 x 1024 (like mine) and the 'container' is only 760px wide and the background is 1000px wide. When I insert it as the body background and tell it to 'repeat-y', what happens? I really want a background that can be universal and cover everyone's screen who visits my page. But, I also don't want it to be too long (causing those annoying scroll bars on the bottom that you have to slide to to read text) and I also don't want them to be too short for users who have massive displays. How would I go about doing this?

When you use background images on the body or anything else, the image won't create scrollbars no matter how wide it is because the image isn't content. Embedding the image with img tags can create scrollbars. In the case of the example template you were looking at, the repeating background image was centered on the body so the edge shading it provided would always line up with the centered #wrap div.

On some screens that background image isn't long enough to cover the entire width of the window. However, the author of the template hides that fact by giving the body the same background color as the edges of the background image. So, where the background image ends the background color continues.