CSS Styles to Page Content in Dreamweaver - Step 2

Go back to Step 1 - Adding & styling the nav elements

Step 2: Adding & styling the header elements

Select and delete the placeholder copy within the header div container. In the Insert panel, click on the “Insert: Images” button and navigate to the lesson folder to select logo.png. Dreamweaver will ask you if you’d like to copy it to your site project folder. Say yes and save it into your assets folder. Dreamweaver then asks you to enter “alternative text” for this image. “Alt text” is very searchable so it’s important to name all of your inserted images with descriptive alt text. For now, you can simply enter “logo.”

After the logo image appears on screen, place your cursor so that it is blinking after the logo, and again click the “Insert: Images” button on the Insert panel. This time, navigate to the “signin_btn.png” file. Let Dreamweaver copy it to your assets folder, and enter some alternative text for the image.

Add descriptive “alt text” to each image you insert on your page.

Because we want the Sign In button to align to the right side of div container, we must apply a style to it that “floats” it to the right like we did with the nav list items. Since we may want to use the “right align” style for other items in this web site, let’s make a generic class that can be applied to not only this Sign In button, but any other element as well.

In the CSS panel, create a new style by clicking the “+” icon. In the window that appears, select “class” from the drop down menu. Enter “.floatright” as the name of the style and ensure it will be saved into global.css.

Create a new class that can be applied to anything we want to float over to the right. In the Box category, set the Float to “right.”

After setting up the new CSS class, in order to apply it to the Sign In button, you must select the button in the design view, and in the Property Inspector, choose the “floatright” class from the drop down.

Apply any class you create to a selected item by using the drop down in the Property Inspector.

While the Sign In button is selected, enter a “#” in the link field to create a dead link. Dead links give the appearance of a link (producing the pointing cursor upon rollover) but the link does not actually go anywhere. This is a good trick to use when you don’t yet know the link you will use but want to apply a placeholder link. Also in the Property Inspector, enter “0” for the Border and hit the Enter key to make it stick.

Now select the logo, and in the Property Inspector, add “index.html” as the link, and also set its Border to 0. To preview, click the “Live View” button at the top of the document window. Save your work.

Next - Step 3 : Adding and styling content elements