Home / Articles / Adobe Dreamweaver / Creating a Page Layout with Adobe Dreamweaver CS6

Creating a Page Layout with Adobe Dreamweaver CS6

Article Description

In this lesson from Adobe Dreamweaver CS6 Classroom in a Book, you’ll learn the basics of webpage design, how to create design thumbnails and wireframes, insert and format new components into a predefined CSS layout, use Code Navigator to identify CSS formatting, and check for browser compatibility.

From the book

Adobe Dreamweaver CS6 Classroom in a Book

Adobe Dreamweaver CS6 Classroom in a Book

$43.99 (Save 20%)

Inserting new components

Inserting new components

The wireframe design shows two new elements that don’t exist in the current layout. The first contains the butterfly image, the second the horizontal navigation bar. Did you notice that the butterfly actually overlaps both the header and the horizontal navigation bar? There are several ways to achieve this effect. In this case, an absolutely positioned (AP) <div> will work nicely.

  1. Insert the cursor into the header, if necessary. Select the <header> tag selector. Press the Left Arrow key.
  2. This procedure should insert the cursor before the opening <div> tag for the header. If you had pressed the Right Arrow key, the cursor would move outside the closing </div> tag for the header instead. Remember this technique—you’ll use it frequently in Dreamweaver when you want to insert the cursor in a specific location before or after a code element without resorting to Code view.

  3. Choose Insert > Layout Objects > AP div.
  4. An AP div will appear at the top left of the header. Note the ID (#apdiv1) assigned to the new div in the tag selector. A corresponding rule has been added to the CSS Styles panel.

    In previous versions of HTML, an AP div would have been assigned its size and position using inline HTML attributes. In a concession to new CSS-based web standards, these specifications are now applied by CSS via a unique ID created by Dreamweaver at the moment you insert the element.

  5. Click the <div#apdiv1> tag selector.
  6. The Property inspector displays the specifications for <div#apdiv1>. Note the element’s width and height. Another property to be aware of is the z-index. This setting determines whether the element displays above or below another object. By default, all elements have a z-index of zero (0). On the other hand, the AP div has a z-index of 1, which means it will appear above all the other elements on the page. All the values displayed in the Property inspector are actually stored in the #apdiv1 rule that was generated automatically by Dreamweaver.

  7. Insert the cursor into <div#apdiv1>.
  8. Choose Insert > Image. Select butterfly-ovr.png from the images folder. Observe the dimensions of the image: 170 pixels by 158 pixels.
  9. Click OK/Choose.
  10. The Image Tag Accessibility Attributes dialog box appears.

  11. Type GreenStart Logo in the Alternate text field in the Image Tag Accessibility Attributes dialog box. Click OK.
  12. The butterfly appears in the AP div.

    You’ll notice that the AP div is slightly wider than the butterfly image. Although the extra space shouldn’t cause any trouble, it’s a good idea to match the dimensions of the container to the image.

  13. Double-click the #apdiv1 rule in the CSS Styles panel.
  14. The “CSS Rule definition for #apdiv1 dialog box appears.

  15. In the Box category, change the width to 170 px. Change the height to 158 px.
  16. The <div> dimensions now match the height and width of the image.

  17. Deselect the Same For All check boxes for Margins.
  18. Type 10 px in the Top margin field. Type 30 px in the Left margin field. Click OK.
  19. When the rule definition dialog box vanishes, <div#apdiv1> appears floating over the header, 10 pixels from the top and 30 pixels to the left of its original position.

    An AP div acts like a free agent. It ignores the other page components and can even be positioned above or below other <div> elements and content.

    The <div#apdiv1> is complete. Now, let’s add another new component that will hold the horizontal navigation shown in the site design specs. The vertical navigation menu will hold links to the organization’s products and services. The horizontal navigation will be used to link back to the organization’s home page, mission statement, and contact information.

    In HTML 4, you probably would have inserted the links into another <div> element and used a class or id attribute to differentiate it from the other <div> elements in the file. Instead, HTML5 provides a new element geared specifically toward such components: <nav>.

  20. Insert the cursor back into the header. Click the <header> tag selector. Press the Right Arrow key.
  21. The cursor should now appear after the ending </header> tag.

  22. Press Ctrl-T/Cmd-T to activate the Tag Editor.
  23. The Tag Editor appears, allowing you to add HTML components or edit existing tags without having to switch to Code view.

  24. Type nav. Press Return/Enter as necessary to complete the tag.
  25. An empty <nav> element has been inserted into the code, and the cursor has been inserted within this element ready for you to enter any content.

  26. In the Property inspector, select Paragraph from the Format pop-up menu. Type Home | About Us | Contact Us in the new <p> element as placeholders for navigation links.
  27. You will convert these to actual hyperlinks in Lesson 9, “Working with Navigation.” Let’s create a new CSS rule to format this element.

  28. Select the <p> tag selector at the bottom of the document window.
  29. In the CSS Styles panel, click the New CSS Rule button.
  30. If necessary, select Compound from the Selector Type menu.
  31. The Selector Name window should display .container nav p.

  32. Click the Less Specific button to remove the notation .container from the selector name.
  33. The Selector Name window should display nav p.

  34. Click OK to create the rule.
  35. The “CSS Rule Definition for nav p” dialog box should appear.

  36. In the Type category, type 90 in the Font-size field and select the percentage sign (%) from the pop-up list. Type #FFC in the Color field. Select Bold from the Font-weight field.
  37. In the Background category, type #090 in the Background-color field.
  38. In the Block category, select Right from the Text-align field.
  39. In the Box category, deselect the Same For All check box for Padding. Enter 5 px in the Top padding field. Enter 20 px in the Right padding field. Enter 5 px in the Bottom padding field.
  40. In the Border category, deselect the Same For All check boxes for Style, Width, and Color. Enter the following values only in the corresponding Bottom border fields: solid, 2 px, #060.
  41. Click OK in the CSS Rule Definition dialog box. Press Ctrl-S/Cmd-S to save the file.

The new <nav> element appears below the header fully formatted and filled with your placeholder text aligned to the right.

9. Changing element alignment | Next Section Previous Section