Choose auto from the Left margin drop-down menu as well.Ĭhoose the settings for the #container element. In the Margin section, uncheck Same for All, then, from the Right margin drop-down menu, choose auto. In the Width text field, type 770 and make sure px (pixels) is selected from the drop-down menu to the right. The CSS Rule definition dialog box appears and you can begin to style your container div.ĥ Select the Box listing in the Category column on the left side of the dialog box. In the New CSS Rule definition dialog box that appears, make sure that #container is listed as the Selector Name and then click OK. Click in the ID text field and type container, then click on the New CSS Rule button. In the Insert panel, click on the Insert Div Tag button.Ĥ The Insert Div Tag dialog box appears. You will now create a new element that will function as a container for the other layout elements. Remember, the body tag encloses all the other tags within a page. The Insert panel features a list of objects that can be added to your pages easily.ģ In the bottom-left corner of your document window, click on the tag. Your first step will be to add a box, which will become your main column of text.Ģ If it’s not already visible, open the Insert panel by choosing Window > Insert. Additionally, the default font, font color, and font size have been defined as Lucida Sans, grey, and small, respectively. This document has been partially prepared for you, with a background color and a page title added. Relative positioning allows you to position this box relative to the body of the page, and the automatic margins will force the fixed-width container to stay centered regardless of the browser window’s width.ġ In the Files panel, navigate to the dw05lessons folder and double-click the layout.html file to open it. This container will use a combination of relative positioning and automatic margins to achieve the centering effect. This container will have a fixed width of 770 pixels and also be centered within the browser window. The home page will be a different design and layout than the rest of the site (this layout is covered in more detail in Lesson 6), and you will start by creating a container that will end up nesting the other sections of your page such as the header, sidebar and other elements. This page will look like the thumbnail below. The goal of this lesson is to create the home page for the Organic Utopia site. For more Adobe Dreamweaver training options, visit AGI’s Dreamweaver Classes.Īdobe Dreamweaver Tutorial: Creating a centered container for your page 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 centered containers.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |