Can I Nest DIV's in Dreamweaver?
Learning to manipulate HTML divs can help you organize Web page elements and add engaging special-effects to your website. Dreamweaver, Adobe's HTML editing program, allows you to create divs and even nest them inside each other. Nested divs give you additional layout capabilities that single divs do not. Learn to use Dreamweaver's automated code generator to create nested quickly without having to learn HTML code.
-
Divs
-
You don't have to use a div to create a Web page. You can simply place all elements such as images and buttons directly on your page and treat them as a unit. Instead of placing a menu directly on a page, for example, you could put it inside a div along with a button and a label. Once inside the div, all elements move when you move the div and disappear when you hide the div. Interesting special-effects become possible when you manipulate divs that contain other elements.
Dreamweaver AP Divs
-
If you use Notepad or a text editor to create HTML pages, you must write code that generates divs. Dreamweaver's visual design interface allows you to draw div elements using your mouse. As you draw, the program writes the code needed to create the div automatically. To create a nested div, you must use a special type of HTML element called an AP div. AP divs support absolute positioning and allow you to drag them to any location on a Web page.
-
Nested Divs
-
Nest one div inside another by placing your cursor inside the parent div and drawing a rectangle after clicking the "Draw AP DIV button." The rectangle becomes the nested div. Place any object you like inside the nested div. As you draw the div, Dreamweaver adds CSS positioning values to your document's head section. You can change these values if you like to reposition the div. You may want to change the default ID that Dreamweaver assigns new divs. It names the first div you draw
Uses
-
Use nested divs to create overlays by simply moving multiple nested div around inside a parent div. For example, you can create a banner by nesting a div that contains text inside another div that contains an image background. Create intriguing ghost effects by overlaying one image whose opacity is nearly zero on top of a colored backdrop. Nested divs also help you create complex animations by moving groups of objects around the Web page using a timer. Think of nested Dreamweaver divs as sticky notes on top of a bulletin board. Manipulate the sticky notes in creative ways to produce a variety of interesting effects.
-