![]() You pasted more content than can fit inside this box, which is why the text is flowing outside the boundaries of the container. ![]() The results of copying and pasting the main_content.html page into your main div element. The content appears styled as Lucida Grande because there is a rule in the body defining the font-family however, there are no CSS rules yet for headings or paragraphs. In the layout.html document, click inside the main div and choose Edit > Paste. ![]() This is text that has already been formatted all that is necessary is to copy and paste it into your layout.Ģ Choose Edit > Select All and then choose Edit > Copy. Now it’s time to add additional content in the form of text so that you can see how your layout works with real content, and make any necessary changes.ġ Double-click the main_content.html file in the Files panel to open it. Up to this point, you’ve been working with the base structure of your layout. Adding additional content and styles in Dreamweaver There is no right value here, use your judgment and push the two boxes closer to the intro text. With both boxes selected, press your up arrow keys to move both boxes upwards. Once the boxes are lined up, you can always move them as a unit by selecting and dragging or nudging them.ħ Click on the edge of the main div to select it and then Shift+click the sidebar. With the top values the same for both boxes, the top edges line up. You can use the left and right arrows on your keyboard to nudge the div horizontally. Setting the Left and Top values of an AP Div.Ħ Click on the top-left edge of the sidebar div and type 260 for the Top value. You’ll now make sure the top edges of the two boxes are lined up.ĥ Click on the handle on the top-left of the main div and reposition it to the following left and top values: L (Left) should be 35 and T (Top) should be 260. Click on the BG color menu and make this background White as well. Again don’t worry about the exact dimensions for now.Ĥ Click on the border of the new div and in the CSS-P text field, type sidebar to rename the AP Div. Make this one approximately the same height, and the width should be about 250. Next, click on the Bg color swatch in the Property Inspector and from the color swatches that appear choose white.ģ Click on the Draw AP Div button again and draw another box to the right of the Main div. You can always fine-tune the width and height in the Property Inspector.Ģ Click on the border of the div and in the CSS-P text field rename the div to main. Don’t try to get the exact dimensions, as it is very difficult to be precise when drawing. Make the AP Div roughly 450px wide by 200px high. The width and height of an AP Div are updated in the Status bar as you draw the div. As you are drawing the AP Div notice there are width and height values that are updated in the Status Bar on the bottom right of your document window ![]() Now you’ll add two more sections to your page: a main column which will feature the latest news from our fictional company Organic Utopia and a sidebar column which features incentives for visitors to become members.ġ Click on the Draw AP Div button (), then place your cursor below the intro box and click and drag down and to the right. For more Adobe Dreamweaver training options, visit AGI’s Dreamweaver Classes.Īdobe Dreamweaver Tutorial: Adding Main and Sidebar content areas in Dreamweaver It is the fifth lesson in the Adobe Dreamweaver CS5 Digital Classroom book. This tutorial provides you with a foundation for working with Adobe Dreamweaver content areas. What you’ll learn in this Dreamweaver Tutorial: Graphic Design for High School Students. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |