- Web design basics
- Working with thumbnails and wireframes
- Defining a Dreamweaver site
- Using the Welcome screen
- Previewing your completed file
- Modifying an existing CSS layout
- Adding a background image to the header
- Inserting new components
- Changing element alignment
- Modifying the page width and background color
From the book
From the book
From the book
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.
- Insert the cursor into the header, if necessary. Select the <header> tag selector. Press the Left Arrow key.
- Choose Insert > Layout Objects > AP div.
- Click the <div#apdiv1> tag selector.
- Insert the cursor into <div#apdiv1>.
- Choose Insert > Image. Select butterfly-ovr.png from the images folder. Observe the dimensions of the image: 170 pixels by 158 pixels.
- Click OK/Choose.
- Type GreenStart Logo in the Alternate text field in the Image Tag Accessibility Attributes dialog box. Click OK.
- Double-click the #apdiv1 rule in the CSS Styles panel.
- In the Box category, change the width to 170 px. Change the height to 158 px.
- Deselect the Same For All check boxes for Margins.
- Type 10 px in the Top margin field. Type 30 px in the Left margin field. Click OK.
- Insert the cursor back into the header. Click the <header> tag selector. Press the Right Arrow key.
- Press Ctrl-T/Cmd-T to activate the Tag Editor.
- Type nav. Press Return/Enter as necessary to complete the tag.
- 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.
- Select the <p> tag selector at the bottom of the document window.
- In the CSS Styles panel, click the New CSS Rule button.
- If necessary, select Compound from the Selector Type menu.
- Click the Less Specific button to remove the notation .container from the selector name.
- Click OK to create the rule.
- 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.
- In the Background category, type #090 in the Background-color field.
- In the Block category, select Right from the Text-align field.
- 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.
- 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.
- Click OK in the CSS Rule Definition dialog box. Press Ctrl-S/Cmd-S to save the file.
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.
)
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.
)
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.
The Image Tag Accessibility Attributes dialog box appears.
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.
The “CSS Rule definition for #apdiv1” dialog box appears.
The <div> dimensions now match the height and width of the image.
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>.
The cursor should now appear after the ending </header> tag.
)
The Tag Editor appears, allowing you to add HTML components or edit existing tags without having to switch to Code view.
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.
)
You will convert these to actual hyperlinks in Lesson 9, “Working with Navigation.” Let’s create a new CSS rule to format this element.
)
The Selector Name window should display .container nav p.
The Selector Name window should display nav p.
The “CSS Rule Definition for nav p” dialog box should appear.
)
The new <nav> element appears below the header fully formatted and filled with your placeholder text aligned to the right.