Creating your first website – Part 5: Adding another page

Welcome to Part 5 of this six-part tutorial series on creating your first website. In the first four parts, you created a site in Dreamweaver CS6 and built the home page for Check Magazine, a fictional publication, using HTML and CSS. However, a single page is rarely sufficient for a website. Previous versions of this tutorial showed how to link to other pages, but used only an image for the content, leaving readers wondering how to build subsequent pages. So, by popular demand, this part has been updated to show how to create a second page and adapt the styles to give it a distinctive look while remaining in harmony with the original page.

There are no hard and fast rules about the correct or best way to add extra pages to a website. In this tutorial, you’ll learn about just one method—copying an existing page and replacing its content. To style some parts of the page differently from the original, you’ll add a class to the second page’s body tag. You’ll also learn how to solve conflicts between style rules. Some of the information in this part might seem advanced for a first website, but it tackles problems that frequently arise. Don’t try to rush. Take it slowly.

If you completed the first four parts of this tutorial series, continue working with your existing files. If you’re not sure that your HTML and CSS is correct, you can download the first_website_pt5_begin.zip sample file, and use it to replace your existing files.

Figure 1 shows the home page of the Check Magazine site as it looked at the end of Part 4 of this tutorial series.

The page is dominated by a large image. This type of image, often called a hero image, is common on the home page of websites, but repeating this layout on inner pages is probably not a good idea. A hero image is good for setting the mood of a landing page, but inner pages normally give greater prominence to text. The three-column layout at the bottom of the page is good for short snippets of information, but a two-column layout is better for longer items.

So, the task is to copy this page, and adapt the styles to create the layout shown in Figure 2.

You’ll also link between the two pages, create a link to an external website, and create a home link.

The first stage in creating the inner page is to copy the home page and remove elements that aren’t required.

1. In Dreamweaver, open index.html in the Check Magazine site.
2. Choose File > Save As, and save the page as news.html in the Check Magazine site root.
3. Close index.html to avoid editing it by accident.
4. Edit the page title in the Title field of the Document toolbar, and change it to Check Magazine: News (see Figure 3).

5. Click anywhere inside the main image, and select <div#main_image> in the Tag selector at the bottom of the Document window (see Figure 4).

6. Press Delete to remove the main_image <div> and all its contents.
7. Click anywhere in the center column, and select <div#center_column> in the Tag selector.
8. Press Delete to remove the center_column <div> and all its contents.
9. Select all the content in the left_column <div> and delete it (but not the <div> itself). You should be left with an empty paragraph inside the <div>.
10. Repeat the previous step with the right_column <div>. You should be left with a skeleton structure from which the original content has been removed (see Figure 5).

11. Save news.html.

Add new content

To make it easier to see the effect of changes to the styles, you need to add some content to the empty columns at the bottom of the page.

1. Locate news.txt in the assets folder, and double-click to open it in the Document window.
2. Press Ctrl+A (Windows) or Cmd+A (Mac OS X) to select all the content of news.txt.
3. Copy the selected text to your clipboard by pressing Ctrl+C (Windows) or Cmd+C (Mac). Alternatively, right-click and select Copy from the context menu.
4. Click the news.html tab to return to the HTML page.
5. Position the insertion point inside the empty paragraph in the right_column <div>, and paste the text from your clipboard (Ctrl+V/Cmd+V).
   Because you pasted into an existing paragraph and each block of text in news.txt is separated by two newline characters, Dreamweaver automatically treats each block as a new paragraph. This avoids the need to remove <br> tags as you needed to do in Part 4.
6. Copy the first paragraph (beginning with "BuzzCycle"), and paste it into the empty paragraph at the top of the left_column <div>.
7. Press Enter (Windows) or Return (Mac) to insert a new paragraph after the one you have just pasted.
8. Scroll down the right_column <div> to find the paragraph that begins with "Sousa revives."
9. Copy the paragraph, and paste it into the left_column <div>. Then press Enter/Return to create a new paragraph.
10. Locate the paragraph that begins with "DJ L-Koo teams" in the right_column <div>. Copy and paste it into the left_column <div> (see Figure 6).

11. Save news.html, and close the text file, news.txt.

Because news.html was copied from index.html, it’s attached to the same style sheet, check_cs6.css. As a result, the header content and navigation bar are styled the same way. The problem is that the columns also inherit the same styles. A common way to create different styles for specific pages is to give the <body> tag an ID or a class. You can then create different rules using descendant selectors. Use an ID if the page is going to have unique styles of its own. If several pages are going to share the same styles, use a class.
Even though you might not realize it, you’ve been using descendant selectors throughout this tutorial series. A descendant selector consists of two or more selectors with a space between them. For example, #header a is a descendant selector that styles links inside an element with the ID header. To learn more about descendant and other common selectors, see Getting to know your CSS Selectors—Part 1.

Adding a class to the <body> tag

The quickest and easiest way to add a class to the <body> tag is in Code view.

1. With news.html the active page in the Document window, click the Split button to reveal Code view.
2. Make sure that Source Code is selected in the Related Files toolbar (see Figure 7).

3. Scroll down to locate the <body> tag (it should be around line 10).
4. Put your insertion point just before the closing angle bracket, and press Space to insert a space and bring up code hints.
5. Type cl to select class, and press Enter (Windows) or Return (Mac). Dreamweaver autocompletes the class attribute followed by an equals sign and a pair of quotes. You don’t have any classes defined yet, so the code hint informs you there is No CSS Style (see Figure 8).

6. Type two_col between the quotes. The <body> tag should now look like this:
   <body class="two_col">
7. Click the Design button to switch back to Design view, and save news.html.

Styling the columns

You can now use the two_col class to create separate style rules for the columns.

1. Select the left_column <div> by clicking its outline in Design view. Alternatively, click anywhere inside the <div>, and then select <div#left_column> in the Tag selector.
2. Click the New CSS Rule icon at the bottom-right of the CSS Styles panel.
3. The New CSS Rule dialog box suggests .two_col #container #left_column as the value for Selector Name. Click inside the field to amend it to .two_col #left_column.

Note: Class selectors always begin with a period followed by the name of the class.

4. Make sure that check_cs6.css is selected for Rule Definition, and click OK.
5. In the Type category of the CSS Rule Definition dialog box, click the color box alongside Color to change the color of the text.

If you haven’t changed the Color Format setting since creating the translucent background in Part 4, it will still be set to rgba(). Although modern browsers understand this format, older browsers don’t, so you need to reset it to Three-digit Hex, by clicking the right-facing arrow at the top of the swatches panel, and selecting the Color Format submenu (see Figure 9).

Note: The Color Format submenu has options for Three-digit Hex and Six-digit Hex. The difference is that Dreamweaver uses a shorthand value, when appropriate, if you select Three-digit Hex. Both formats are recognized by all browsers.
Choose the white swatch (#FFF).

6. In the Background category, click the color box alongside Background-color, and select a dark gray swatch (#666).
7. In the Box category, deselect Same For All under Padding, set Top and Bottom to 0px, and set Right and Left to 10px.
8. Click OK to close the CSS Rule Definition dialog box and create the style.

The left column now has white text on a dark gray background (see Figure 10).

9. Open index.html to verify that it hasn’t been affected by the change you have just made to the styles. If it has, you’ve made a mistake, and it would be a good idea to retrace your steps. Use the files in first_website_pt5_begin.zip to start again from the beginning of this part, if necessary.
10. Close index.html. Click Yes when Dreamweaver asks if you want to save the changes to check_cs6.css. You now need to fix the width of the right_column <div> in news.html. The total width available inside the container <div> is 968px. The left_column <div> is 316px wide, but you have just added 10px of padding to the left and right sides. Padding is added to the width, making the overall width of the left_column <div> 336px. That leaves 632px, but the right_column <div> has a left margin of 10px. So, that means the width needs to be 622px.
11. Now you’ve calculated the width, select the right_column <div>, and click the New CSS Rule icon at the bottom of the CSS Styles panel.
12. The New CSS Rule dialog box suggests .two_col #container #right_column as the value for Selector Name. Edit it to .two_col #right_column, and click OK.
13. In the Box category, set Width to 622px, and click OK. The two columns now fill the full width of the container <div> (see Figure 11).

14. Save the style sheet.

Note: If you test the page in Live view or a browser, the columns don’t sit alongside each other because the Check main heading is floated, preventing the left column from moving to the left side of the container. This problem will be fixed later when a page heading is added between the header and columns.

Improving the look of the right column

The right column contains a series of posts or articles. The first paragraph in each one needs to be converted to a heading and styled together with the date it was posted.

1. Click anywhere inside the first paragraph in the right column. In previous parts, you used the Format menu in the Property inspector to convert a paragraph into a heading. This time, you’ll use a keyboard shortcut. Press Ctrl+3 (Windows) or Cmd+3 (Mac) to convert the paragraph to an <h3> heading.

Note: Holding down the Ctrl (Windows) or Command (Mac) key and pressing a number between 1 and 6 creates a heading the same level as the number from <h1> through <h6>.

2. Do the same with the paragraphs that begin with "Sousa revives" and "DJ L-Koo."
3. Delete the paragraphs that contain only four hyphens. They were included only to make it easier to identify the headings.
4. Drag to select the first heading and the following paragraph in the right column (see Figure 12). (It’s easier to drag from the end of the paragraph.)

5. In the Common category of the Insert panel, click Div (or Insert Div Tag). Alternatively, choose Insert > Div (or Insert > Layout Objects > Div Tag).
6. In the Insert Div Tag dialog box, make sure that Insert is set to Wrap Around Selection, and type post_header as the Class. Then click New CSS Rule (see Figure 13).

Note: You’re using a class instead of an ID because the same styles are going to be applied several times on the same page. An ID must be unique within a page, but a class can be used multiple times.

7. Dreamweaver should automatically select the correct settings in the New CSS Rule dialog box. Just check that Rule Definition is set to check_cs6.css, and click OK.
8. In the Background category of the CSS Rule Definition dialog box, set Background-color to a medium gray (#999).
9. In the Box category, deselect Same For All under Padding, set Top and Bottom to 2px, and set Right and Left to 10px.
10. Click OK to close the CSS Rule Definition dialog box. This returns you to the Insert Div Tag dialog box. Click OK again to close it. The heading and the paragraph that follows it now have a medium gray background, and the text is inset from the left side by 10px (see Figure 14).

11. The heading and following paragraph need a little more tweaking. Click anywhere inside the heading, and click the New CSS Rule icon at the bottom of the CSS Styles panel.
12. Dreamweaver suggests .two_col #container #right_column .post_header h3 as the value for Selector Name. Click Less Specific three times to change it to .post_header h3. Then click OK to open the CSS Rule Definition dialog box.
13. In the Box category, deselect Same For All under Margin, and set Top to 5px and Bottom to 10px. Click OK to make the changes. The heading moves closer to the top of the gray background.
14. Click anywhere in the paragraph that begins "Posted on" and click the New CSS Rule icon in the CSS Styles panel.
15. Dreamweaver suggests .two_col #container #right_column .post_header p. Click Less Specific three times to change it to .post_header p, and click OK.
16. In the Type category, set Font-size to 12px and Color to white (#FFF).
17. In the Box category, leave Same For All under Margin selected, type 0 in the Top field, and click OK. The "Posted on" text is now white (see Figure 15).

After all that work, styling the next two headings is a piece of cake. All you need to do is to wrap a <div> around each one, and set its class to post_header.

18. Select the next heading (beginning "Sousa revives") and the following paragraph.
19. Use the Insert panel or Insert menu to insert a <div>.
20. In the Insert Div Tag dialog box, click the down arrow to the right of the Class field, and select post_header from the list (see Figure 16). Then click OK.

Note: Although you can apply more than one class to an element, the list in the Insert Div Tag dialog box allows you to select only one. To learn how to apply multiple classes to an element see Adobe TV: Selecting multiple classes in Dreamweaver CS6.

21. Repeat the previous three steps for the final heading (beginning "DJ L-Koo") and the following paragraph.
    The text in the headings is indented by 10px, putting them out of alignment with the remaining paragraphs in the right column. You need to create another style rule to add the same amount of padding to them.
22. Click anywhere inside the right column except in the three post_header <div> elements that you have just styled. Then click the New CSS Rule icon in the CSS Styles panel.
23. Dreamweaver suggests .two_col #container #right_column p as the value for Selector Name. Change this to .two_col #right_column p, and click OK.
24. In the Box category of the CSS Rule Definition dialog box, deselect Same For All under Padding, and set the Right and Left fields to 10px. Click OK.

The paragraphs in the right column are now in alignment with the headings (see Figure 17).

25. Choose File > Save All Related Files to save the web page and style sheet.

If you look carefully, you’ll notice that the paragraph inside each post_header <div> has also moved in 10px. That’s because the selector .two_col #right_column p affects all paragraphs inside the right_column <div> in a two-column layout. The fact that the paragraph is nested inside another <div> makes no difference. To prevent the 10px padding from being applied to the paragraph inside the post_header <div>, you need to edit the .post_header p style rule to set its left padding to zero.

However, as you’ll discover in the following section, eliminating the padding isn’t as straightforward as you might think. This introduces you to the precedence accorded to style rules when there’s a conflict—a principle technically known as specificity.

1. Select the .post_header p style rule in the All Rules pane of the CSS Styles panel.
2. Although you can use the Edit Rule icon to reopen the CSS Rule Definition dialog box, you need to add only one property, so it’s quicker to click Add Property in the lower pane, and type padding-left in the field that opens.
3. Press Tab, type 0 in the value field on the right, and press Enter/Return to make the change.
   Even though you have set the left padding on the paragraph to zero, it remains indented.
   A general principle of CSS is that, when there’s a conflict, style rules lower down the style sheet override ones that are higher up. The .post_header p style rule is listed in the All Rules pane above .two_col #right_column p, so you’ll likely first want to try swapping their positions. You can drag and drop style rules in the All Rules pane of the CSS Styles panel to rearrange them.
4. Select .post_header p in the All Rules pane, drag it down until you see a blue line below .two_col #right_column p (see Figure 18), and then release the mouse button to drop the rule into position.

It makes no difference. The padding in the post_header <div> remains indented.

5. To make sure that the rule was moved correctly, right-click the .post_header p rule in CSS Styles panel, and select Go To Code from the context menu.

This opens the style sheet in Split view, with the insertion point in the selected rule. Confirm that the rules are in the order shown in Figure 19.

So, why hasn’t changing the order of the style rules removed the left padding? The answer lies in the specificity of the selectors—put simply, .two_col #right_column p is a more powerful selector than .post_header p.

You work out the specificity of a selector by assigning values to each part of the selector, and adding them up. The higher value wins.

• Each ID has a value of 100.
• Each class has a value of 10.
• Each tag selector has a value of 1.

Using these values, .two_col #right_column p consists of a class, an ID, and a tag selector, so it has a value of 111. But .post_header p consists of only a class and a tag selector, so its value is 11. Specificity applies only to conflicting properties. That’s why the font-size, color, and margin properties are applied, but padding-left isn’t.

There are two ways to solve this problem: the lazy way and the better way. I’ll show you both.

1. In Code view, put your insertion point just before the semicolon at the end of the padding-left definition in the .post_header p style rule (on line 122 in Figure 19), and press Space. This brings up code hints, as shown in Figure 20.

2.  Select !important from the code hints. The padding-left definition now looks like this:

padding-left: 0px !important;

3. Press F5 or click in Design view to refresh the page. The padding has been removed from the paragraph in the header, and it’s now correctly aligned with the other text (see Figure 21).

Adding !important just before the semicolon at the end of a property definition is a quick and dirty way to resolve a conflict, but it has the disadvantage that it needs to be added to individual properties. You can’t apply it to a complete style rule. A more serious problem is that, if you rely on !important to resolve all conflicts, you’ll quickly discover you’re creating conflicts between !important rules and you don’t have a way to resolve them.

Treat !important as an emergency life vest, but use the rules of specificity to ensure your boat doesn’t spring a leak in the first place.
The better way to solve this problem is to create a selector with equal or higher specificity.

4. Delete !important from the padding-left definition in the .post_header p style rule (it should look like Figure 19).
5. The post_header <div> is nested inside the right_column <div>, so add #right_column to the beginning of the selector like this:

The selector now consists of an ID, a class, and a tag selector, which adds up to a specificity of 111, the same as .two_col #right_column p. The amended style rule is also lower down the style sheet. So, although both rules have the same specificity, the second one takes precedence where there’s a conflict over the padding-left property.

6. Refresh Design view to confirm that the paragraph inside the header is still correctly aligned, as in Figure 21.
7. Save the style sheet.

Resolving this sort of conflict is probably one of the most challenging aspects of styling websites with CSS. I could have avoided this problem by always accepting the value Dreamweaver suggests for Selector Name in the New CSS Rule dialog box. However, selector names should be kept as simple as possible to reduce the amount of work the browser needs to do to apply the styles.

Note: In the preceding section, I simplified the way specificity is calculated. The complete list of values assigned to selectors is as follows: IDs have a value of 100; classes, pseudo-classes, and attribute selectors have a value of 10; tag selectors and pseudo-elements have a value of 1. Inline styles specified using the style attribute in an element’s opening tag always take precedence.

The page needs a heading between the header <div> and the two columns. Adding the heading solves the problem of the columns not displaying correctly in Live view or a browser, but it creates a different challenge that requires some creative thinking.
The page heading needs to go between the header <div> and the left_column <div>. Although the Insert Div Tag dialog box makes it easy to insert a <div> element precisely, there’s no equivalent for <h2> tags. So, the simplest way to make sure the heading is inserted in the right place is to dive into Code view.

1. Select Source Code in the Related Files toolbar to expose the HTML in Split view.
2. The quick way to find the correct place to insert the heading is to select the left_column <div> in Design view. This highlights the <div> in Code view.
3. In Code view, click at the end of the line above the highlighted <div> (as soon as you do so, the <div> is no longer highlighted), and press Enter/Return to insert a new line.
4. On the blank line you have just created type the following line of code:
   <h2>Point of View</h2>
5. Click the Live button to turn on Live view, which will show this new heading (see Figure 22).

6. With Live view still active, click anywhere on the words "Point of View." Then click the New CSS Rule icon at the bottom of the CSS Styles panel.
7. Edit the value of Selector Name to .two_col h2, and click OK.
8. In the Type category of the CSS Rule Definition dialog box, use the following settings:
   • Font-family: Arial Black, Gadget, sans-serif
   • Font-size: 72px
   • Font-variant: small-caps
9. In the Block category, use the following settings:
   • Word-spacing: 0.3em
   • Text-align: center

Click Apply to see the result (see Figure 23).

You need to fix the margins.

10. In the Box category, leave Same For All under Margin selected, type 0 in the Top field, and click Apply. The margins are removed, but the heading has moved mysteriously to the right, as shown in Figure 24.

The clue to what’s happening is that the heading is centered between the word "Check" in the header <div> and the right side of the container <div>. In Part 3, you floated the Check heading left. Floated elements can extend below their parent element—in this case, the header <div>—preventing subsequent elements from moving past the floated element. Although the Check heading has no bottom margin or padding, its text box is invisibly protruding below the header <div>. Removing the top margin from the Point of View heading results in the two elements colliding.

One way to solve this problem is to increase the height of the header <div> by about 10px, but that makes it too tall. The other solution is to use the clear property on the Point of View heading.

11. Still in the Box category, set Clear to left, and click Apply.
    The heading is now centered, but the gap above it has increased (see Figure 25).

12. The top margin of the heading has already been eliminated, and using a negative value doesn’t have any effect because the clear property determines how high the heading can go. But all is not lost.

In Part 4, you learned that relative positioning calculates its offsets from the element’s current position in the page. When applying relative positioning in Part 4, you didn’t change the offsets of the header <div> or main_image <div> because you simply wanted to establish a containing block for absolutely positioned elements.
In this case, you want to move the Point of View heading from its current position.

13. In the Positioning category, use the following settings, and click Apply:
    • Position: relative
    • Placement Top: -30px

    Setting Top to a negative value moves the heading up, but the columns remain in their previous position. This is because relative positioning moves the target element without affecting other elements.

Note: Setting the top offset to -30px results in the heading being slightly too high in Internet Explorer 7. I decided to ignore it because IE 7 has such a tiny market share.

14. Select the Box category again, and deselect Same For All under Margin.

    Leave the Top, Right, and Left values as they are, but change Bottom to -35px, and click Apply.
    By setting the bottom margin on the Point of View heading to a negative value, you make room for the columns to move up.

15. Click OK to close the CSS Rule Definition dialog box, and choose File > Save All Related Files to save your work.

Now that you’ve got two pages in the Check Magazine site, you can link them together.

Linking to internal files

Dreamweaver offers several ways to create links.

1. Open index.html in the Document window.
2. Click anywhere in the News link in the navigation bar. Because it already has a dummy link, you don’t need to select the whole word.
3. With the HTML button selected in the Property inspector, click the Browse for File icon to the right of the Link field to open the Select File dialog box (see Figure 26).

4. Make sure you’re in the Check Magazine root folder (click the Site Root button if you’re not sure—it’s at the top of the dialog box in Windows, and at the bottom in the Mac version).

   Select news.html, and click OK (Windows) or Open (Mac).
   The correct path to news.html is now displayed in the Link field (see Figure 27).
   

Note: In this case, only the file name is displayed because index.html is in the same folder as news.html. When linking to files in other folders, Dreamweaver makes sure the correct path is used. Getting Dreamweaver to insert the path is more reliable than typing it directly into the Link field.

5. Select the "read more. . ." text at the bottom of the left_column <div>. Because there isn’t an existing link, you need to select all the text that you want to convert to a link.
6. Click the Point to File icon next to the Link field (it looks like a crosshair sight), hold down the mouse button, and drag the crosshair to the Files panel. Release the mouse button when the crosshair is over news.html (see Figure 28).

The correct path to news.html is displayed in the Link field.

7. Select the "read more. . ." text at the bottom of the center_column <div>. Then open the Common category of the Insert panel, and click Hyperlink. Alternatively, choose Insert > Hyperlink.

   This opens the Hyperlink dialog box (see Figure 29).
   

When you use this method, you need to click the Browse icon to the right of the Link field to open the Select File dialog box. This adds an extra step, so it’s rarely worth doing unless you also want to set values for Access Key and Tab Index at the same time. Browse for news.html, and click OK to close the dialog box.

Creating external links

Creating an external link is very straightforward. You just type or paste the URL into the Link field in the Property inspector or the Hyperlink dialog box.

The important thing to remember is that external links must include the http:// or https:// (for secure links) at the beginning of the URL. If you leave the HTTP protocol out of the URL, the link will be treated as internal, resulting in the page not being found. To avoid typing mistakes, it’s best to copy the link from the address bar of your browser, and paste it into the Link field.

1. Select the "read more. . ." text at the bottom of the right_column <div>, and link to an external site of your choice.
2. Save index.html.

Test the links

Load index.html into a browser by pressing F12 (Windows) or Opt+F12 (Mac), and test the links to make sure they open news.html and the external site. There’s no link to return from news.html to the main page, so just use your browser’s back button for the time being.

Creating a home link

When drawing up the original comp for the Check Magazine site, the designer didn’t include a Home link in the navigation bar. (These things happen!) There is sufficient room to add an extra link at the beginning of the navigation bar, so I’ll leave you to handle that by yourself. However, it’s also common to make the logo or site name link back to the home page.

Adding a link to the Check heading sounds easy enough because it’s just text in a pair of <h1> tags, but doing so affects how it’s styled.

1. With news.html the active page in the Document window, select the word "Check" in the header <div>. Create a link to index.html using one of the methods described earlier.

   As soon as you create the link, the text size shrinks (see Figure 30).
   

What’s happened is that the text is now affected by the styles used by the navigation menu. You need to create a new rule for this link, restoring it to its original size, and removing the small capitals and narrower width.

2. With the link you have just created still selected, click the New CSS Rule icon in the CSS Styles panel.
3. Dreamweaver suggests .two_col #container #header h1 a as the value for Selector Name. Click Less Specific twice to change it to #header h1 a, and click OK.

Note: The Check link will be affected by both the #header h1 a and #header a styles. But the former selector has a higher specificity (102 as opposed to 101). As a result, the #header h1 a style rule overrides #header a.

4. In the Type category, use the following settings:
   • Font-size: 96px
   • Font-variant: normal
5. In the Box category, set Width to auto.
6. Click OK, and choose File > Save All Related Files.
7. Test the page again. You can now click the Check logo to return to the home page.

Congratulations! You’ve created the home page and an inner page for the Check Magazine site, and you’ve learned a lot about HTML, CSS, and Dreamweaver along the way.

The final part of this tutorial series will show you how to publish the pages and their assets to a web server so that other people can view your work. Incidentally, this is what you should do if you run into difficulties. It’s only by seeing your pages on a live web server that others can help troubleshoot problems with your HTML and CSS. I’ll show you how to connect to a web server and upload your files in Part 6: Publishing your website.