How to Create a Layout Without a Table in Dreamweaver
Adobe Dreamweaver provides a broad assortment of tools and methods that you can utilize to create visually pleasing Web pages. You may want a page layout that contains multiple columns as presented by a table. Tables can sometimes interfere with the flow of content. One solution is to use a CSS element, known as a "div." Use Dreamweaver to insert absolutely positioned or AP elements and create the desired layout without using a table.
Other People Are Reading
Instructions
-
-
1
Launch Dreamweaver and open your Web page.
-
2
Click the "Layout" tab and then click the "Draw AP Div" button. The cursor displays a crosshair.
-
-
3
Drag on the document screen to draw the div. Release the mouse when you have the size and shape you want.
-
4
Click within the div to insert your content. Repeat for each div you want on the page. For instance, place a second div next to the first one. A CSS style is created for each div with a naming format of apDiv1, apDiv2 and so on as shown in this example:
<style type="text/css">
<!--
#apDiv1 {
position:absolute;
left:88px;
top:230px;
width:281px;
height:608px;
z-index:1;
}
-->
</style>
-
5
Click the top left corner of the AP div to move it to another location. Click the handles of the AP div and move them to resize. You can also change the values in the CSS style to modify your div.
-
1
Resources
- Photo Credit Photos.com/Photos.com/Getty Images
