CSS Styles to Page Content in Dreamweaver - Step 4

Go back to Step 3 : Adding and styling content elements
 
Step 4 : Adding a three column layout

Below the hero image, we will create a three column layout that contains different stories. You only need to create one div, however, because you can copy and paste it in the code view to create all three columns.
The trick is to get the cursor at the correct insertion point in your page. The best way to do this is to select the hero div that has the background image (it should highlight with a blue outline). In the code view, its code will highlight in gray. Once selected, click the forward arrow on the keyboard to get the cursor blinking at the end of the closing </div> tag.

Get the cursor at the end of closing div tag so we are poised to insert a new div for the story elements.

In the Insert panel, click the New Div button. Select the “insertion point” option from the drop down and create a new class for the div called “.story.” In the style window, apply settings just for the Box category.

Apply box settings for the new .story class.

In the design view, select the placeholder text for the new story div and change it to a headline of your choosing, or simply “Headline for story goes here.” Press the Return key and add additional dummy text to create a story. Select the headline portion of the text and in the Property Inspector, change it to be a Heading 2 (h2) tag. Leave the story text as a p tag.

Change the placeholder text into a headline of your choosing. Press the Enter or Return key and add more text below to create a story. Select the headline and change it to a Heading 2 format.

In the design view, place the cursor at the end of the dummy paragraph text and press the Enter or Return key to start a new line. This will be our insertion point for a new div that we will style to look like the Sign In button. With the cursor in place, click the Insert Div Tag button on the Insert menu.

On the window that appears, click the New CSS Rule button and type .button to create a new class for the div.

Create a .button class for the new inserted div.

Select Background, Block, and Box settings for the .button class.

In the CSS Rule window, in the Background category, set the background-color to orange #FD6A51. In the Block category, set the Text-align to “center.” In the Box category, match the settings.

Setting the width to 100 px, and adding 5 pixels of padding all around. After clicking ok, you’ll see the new button appear on the page with a bunch of place holder text. Replace that text with “Read more.”

What’s missing from this button are the rounded corners. This is something we need to set manually in the global.css file. In the document window, select the global.css view and scroll down to find the new .
button class. Add a new line to the code “border-radius” as highlighted below:

.button
{
background-color: #fd6a51;
text-align: center;
padding: 5px;
width: 100px;
border-radius: 8px;
}

To preview the newly added rounded corner property, click the Live View button in the document window.

Lastly, let’s make the “Read more” text a link and add a style to it. Select the “Read more” text and in the Property Inspector, add a “#” symbol in the link field to create a dead link. If you preview the page now, you see that the text inside the button is dark. When you rollover it, however, it seems to disappear because it’s turning the same orange color as the button background. We set up these general link styles in an earlier lesson. To make changes just for this button, therefore, we need to set up a new style that targets just links within the .button class. 

Place your cursor anywhere inside the “Read more” text in the design view. In the CSS panel, click the “+” icon to create a new style. In the window that appears, click the “Less Specific” button until the selector path reads “.button a”. Click OK.

In the CSS rule window, apply changes to just the type category as shown. Setting the text-transform property to uppercase, and setting the color to white #fff. Click OK.

Set the button’s link text settings.

The advantage of creating buttons entirely with CSS is that you can apply cool animation effects to them, change their color, change their text, size, font, etc. all just by altering a few lines of code.

In the design view, select and highlight the story div so that it is outlined in blue and the code in the code view highlights in gray. In the code view, select the highlighted gray text and copy it. Place your cursor at the end of the highlighted gray text and paste. Paste again to create a third copy of the story.

Select and copy the story div. In the code view, paste two copies of it to create the three columns.

Whenever you float items left or right, you alter the normal top to bottom flow of page elements. This is why the footer is appearing underneath the three stories, even in Live View mode. To fix this, we need to add a new div element at the end of the three stories. This new div will have a “clear float” property that will return the page to its normal flow.

Select the last story div so that it has a blue outline. On the keyboard, press the arrow key to get the cursor just after the last story. This sets the proper insertion point for a new div. From the Insert menu, click the Insert Div Tag button.

In the window that appears, keep the “at insertion point” option selected, name it “.clearfloat,” and click the New CSS Rule button. In the Rules window, select the Box category and set the Clear property to “both.” Click OK.

Create a new div and with it, a new style called .clearfloat. In the Box category, set the Clear property to “both.”

To finish off this page, we’ll add a simple copyright notice in the footer. Doing so will familiarize you with special characters in HTML. The copyright symbol, for example cannot simply be typed on the keyboard with the short cut. You must use special encoding. Select the placeholder text in the footer. From menu, select Insert > HTML > Special Characters > Copyright symbol.

Special symbols need to be encoded so that browsers render them properly. Use the Insert > HTML > Special Characters menu to add them.

After the copyright symbol is inserted in the footer, add the rest of the notice such as the year and the company name.