On Using DIV tag layers

"What my instructor had me do for that graphic placement issue in DW was just create a new CSS rule and create a DIV tag called #wrapper. Then I just positioned the graphic where I wanted it."

Response:

Using a DIV tag (creating a floating layer) works fine. If you follow my previous email you will see that the layer will be positioned above the background image, so that any image you place into the layer will appear on top of the background image.

The CSS rule is so that you can easily update the layer formatting in the future and the #wrapper is just a label for the layer (DIV tag). You can call the layer anything you want, if you don't name the layer then Dreamweaver will simply apply a number to the layer. The label allows you to easily find the coding for the layer and also allows you to refer to the layer in your code (for instance if you want to make a button that will hide or show the layer you would need a label for it). Personally I would have picked a name that exactly matched the image contents, so if the layer contained my logo I would call it something like this: #_logo_layer (the _ symbol is just being used as a spacer to make the name easier to read, you can't use spaces in label names so the _ character is a good alternative, I could also have used - but I prefer the underscore like this _ ).

If you look at the coding for the DIV tag (near the top of your code) you will first see the wrapper section (following the name that you gave the DIV tag), you will also see the x and y positions (measured from the top left corner of the page), whether the layer is relative or absolute (if it floats or is locked into a specific position relative to the upper left corner of the page) and you will also see a number for z-index. The z-index is the stacking order of the layer on the page. The larger the number the higher up in the stack the layer will be (like a deck of cards). Most likely your layer is showing a z-index of either 0 or 1. As you create more layers on the page Dreamweaver will give them a new z-index position above the previous layer. So if your original layer was z-index=1 then the next layer will be z-index=2. If you need to rearrange the order that the layers are on the page simply adjust the z-index number. Again think of the layers like a deck of cards numbered 1 at the bottom of the deck, changing the number on the card will change its position in the deck.

George

Images and Background Images in Dreamweaver

"With my form project I am having difficulty placing a saved graphic created in PS into/on top of a background image I also altered in PS and saved for Web and Devices and used this graphic as a backgrond under my body DIV TAG(not a Pseudo-Tag)."

Here are some basic ideas on the background image. When you put a background image into a web page it is inserted in the opening body tag, everything else on the page comes after that tag. You can only have one image in the body tag, so you can't put a logo graphic on top of a background image in the body tag. What you need to do is to create a table or other container right after the opening body tag, put your graphic in that container and center that container on the page. That will give you the effect you are looking for by placing the graphic in front of the background image. If you use a table you can go even further as your table can also contain a background image and then have graphic placed into a cel in the table.

So, think of it as a stack of pictures on a table. The background image is the bottom of the stack, the table is then placed on top of the background image. If you put a background image into the table that image will be on top of the page background image as well since it is in the table. You can then put an image into a table cell and that image would be on top of the table background, which is on top of the page background. You can go even further by using layer elements (DIV tags), these float above the page. You can use as many DIV tags as you like and they will also stack (like a stack of cards) depending on the number you give the tag. This is all explained more thoroughly in our Dreamweaver CS3 training.