Adobe
Products

Top destinations

  • Adobe Creative Cloud
  • Creative Suite
  • Adobe Marketing Cloud
  • Acrobat
  • Photoshop
  • SiteCatalyst
  • Students
  • Elements family

Adobe Creative Cloud

  • What is Adobe Creative Cloud?
  • Design
  • Web
  • Photography
  • Video
  • Students
  • Teams
  • Enterprise
  • Educational institutions

Design and photography

  • Photoshop
  • Illustrator
  • InDesign
  • Adobe Muse
  • Lightroom

Video

  • Adobe Premiere
  • After Effects

Web development and HTML5

  • Edge Tools & Services [opens in a new window]
  • Dreamweaver
  • Gaming [opens in a new window]

Adobe Marketing Cloud

  • What is Adobe Marketing Cloud?
  • Digital analytics
  • Social marketing
  • Web experience management
  • Testing and targeting
  • Media optimization

Analytics

  • SiteCatalyst
  • Adobe Discover
  • Insight

Social

  • Adobe Social

Experience Manager

  • CQ
  • Scene7

Target

  • Test&Target
  • Recommendations
  • Search&Promote

Media Optimizer

  • AdLens
  • AudienceManager
  • AudienceResearch

Document services

  • Acrobat
  • EchoSign [opens in a new window]
  • FormsCentral [opens in a new window]
  • SendNow [opens in a new window]
  • Acrobat.com [opens in a new window]

Publishing

  • Digital Publishing Suite

  • See all products
Business solutions

By business need

  • Digital analytics
  • Digital publishing
  • Document management
  • Media optimization
  • Social marketing
  • Testing and targeting
  • Video editing and serving
  • Web development [opens in a new window]
  • Web experience management
  • See all business needs

By industry

  • Broadcast
  • Education
  • Financial services
  • Government
  • Publishing
  • Retail
  • See all industries
Support & Learning

I need help

  • Products
  • Adobe Creative Cloud
  • Adobe Marketing Cloud
  • Forums [opens in a new window]

I want to learn

  • Training and tutorials
  • Certification [opens in a new window]
  • Adobe Developer Connection
  • Adobe Design Center
  • Adobe TV [opens in a new window]
  • Adobe Marketing Center
  • Adobe Labs [opens in a new window]
Download
  • Product trials
  • Adobe Flash Player
  • Adobe Reader
  • Adobe AIR
  • See all downloads
Company
  • Careers at Adobe
  • Investor Relations
  • Newsroom
  • Privacy
  • Corporate Social Responsibility
  • Customer Showcase
  • Contact us
  • More company info
Buy
  • For personal and professional use
  • For students, educators, and staff
  • For small and medium businesses
  • Volume Licensing
  • Special offers
  • Adobe Marketing Cloud sales [opens in a new window]
Search
 
Info Sign in
Why sign in? Sign in to manage your account and access trial downloads, product extensions, community areas, and more.
Welcome,
My Adobe
My orders
My information
My preferences
My products and services
Sign out
My cart
Privacy My Adobe
Adobe
Products Sections Buy   Search  
Solutions Company
Help Learning
Sign in Sign out Privacy My Adobe
Preorder Estimated Availability Date. Your credit card will not be charged until the product is shipped. Estimated availability date is subject to change. Preorder Estimated Availability Date. Your credit card will not be charged until the product is ready to download. Estimated availability date is subject to change.
Qty:
Purchase requires verification of academic eligibility
Subtotal
Promotions
Estimated shipping
Tax
Calculated at checkout
Total
Review and Checkout
Adobe Developer Connection / Dreamweaver Developer Center /

Creating your first website – Part 5: Adding another page

by David Powers

David Powers
  • http://foundationphp.com/

Content

  • Locate your files and review your task
  • Prepare the inner page
  • Style the inner page differently
  • Resolve a conflict between rules
  • Add a page heading
  • Link the two pages
  • Where to go from here

Created

19 November 2012

Page tools

Share on Facebook
Share on Twitter
Share on LinkedIn
Bookmark
Print
CSSDreamweaverHTMLsite setupstylingwebsite
Was this helpful?
Yes   No

By clicking Submit, you accept the Adobe Terms of Use.

 
Thanks for your feedback.

Requirements

Prerequisite knowledge

Read and complete the following tutorials before beginning this one:

  • Part 1: Setting up your site and project files
  • Part 2: Creating the page structure
  • Part 3: Styling the header and navigation menu
  • Part 4: Inserting images and styling text

User level

Beginning

Required products

  • Dreamweaver (Download trial)

Sample files

  • first_website_pt5_completed.zip (487 KB)

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.

Locate your files and review your task

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.

Figure 1. The home page of the Check Magazine site after completing the steps in Part 4.
Figure 1. The home page of the Check Magazine site after completing the steps in Part 4.

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.

Figure 2. The design for the inner page is adapted from the existing styles.
Figure 2. The design for the inner page is adapted from the existing styles.

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

Prepare the inner page

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).
Figure 3. Each page should have its own title.
Figure 3. Each page should have its own title.
  1. 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).
Figure 4. Selecting the main_image <div> in the Tag selector.
Figure 4. Selecting the main_image <div> in the Tag selector.
  1. Press Delete to remove the main_image <div> and all its contents.
  2. Click anywhere in the center column, and select <div#center_column> in the Tag selector.
  3. Press Delete to remove the center_column <div> and all its contents.
  4. 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>.
  5. 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).
Figure 5. The page with the original content stripped out.
Figure 5. The page with the original content stripped out.
  1. 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).
Figure 6. The page now has some content ready for styling.
Figure 6. The page now has some content ready for styling.
  1. Save news.html, and close the text file, news.txt.

Style the inner page differently

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).
Figure 7. Selecting Source Code in the Related Files toolbar shows the underlying HTML.
Figure 7. Selecting Source Code in the Related Files toolbar shows the underlying HTML.
  1. Scroll down to locate the <body> tag (it should be around line 10).
  2. Put your insertion point just before the closing angle bracket, and press Space to insert a space and bring up code hints.
  3. 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).
Figure 8. There are no existing classes for code hints to suggest.
Figure 8. There are no existing classes for code hints to suggest.
  1. Type two_col between the quotes. The <body> tag should now look like this:
    <body class="two_col">
  2. 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.

  1. Make sure that check_cs6.css is selected for Rule Definition, and click OK.
  2. 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).

Figure 9. Resetting the color format.
Figure 9. Resetting the color format.

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).

  1. In the Background category, click the color box alongside Background-color, and select a dark gray swatch (#666).
  2. In the Box category, deselect Same For All under Padding, set Top and Bottom to 0px, and set Right and Left to 10px.
  3. 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).

Figure 10. The left column has been restyled.
Figure 10. The left column has been restyled.
  1. 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.
  2. 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.
  3. 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.
  4. 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.
  5. 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).
Figure 11. The original three-column layout now has two columns.
Figure 11. The original three-column layout now has two columns.
  1. 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>.

  1. Do the same with the paragraphs that begin with "Sousa revives" and "DJ L-Koo."
  2. Delete the paragraphs that contain only four hyphens. They were included only to make it easier to identify the headings.
  3. 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.)
 Figure 12. The heading and first paragraph have been selected and are ready for styling.
Figure 12. The heading and first paragraph have been selected and are ready for styling.
  1. In the Common category of the Insert panel, click Div (or Insert Div Tag). Alternatively, choose Insert > Div (or Insert > Layout Objects > Div Tag).
  2. 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).
Figure 13. Creating a style for the post_header class.
Figure 13. Creating a style for the post_header class.

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.

  1. 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.
  2. In the Background category of the CSS Rule Definition dialog box, set Background-color to a medium gray (#999).
  3. In the Box category, deselect Same For All under Padding, set Top and Bottom to 2px, and set Right and Left to 10px.
  4. 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).
Figure 14. The heading and following paragraph have been styled differently.
Figure 14. The heading and following paragraph have been styled differently.
  1. 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.
  2. 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.
  3. 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.
  4. Click anywhere in the paragraph that begins "Posted on" and click the New CSS Rule icon in the CSS Styles panel.
  5. 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.
  6. In the Type category, set Font-size to 12px and Color to white (#FFF).
  7. 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).
Figure 15. The heading and date posted have been restyled.
Figure 15. The heading and date posted have been restyled.

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.

  1. Select the next heading (beginning "Sousa revives") and the following paragraph.
  2. Use the Insert panel or Insert menu to insert a <div>.
  3. 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.
Figure 16. Dreamweaver lists available classes for you to select.
Figure 16. Dreamweaver lists available classes for you to select.

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.

  1. 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.
  2. 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.
  3. 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.
  4. 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).

Figure 17. The paragraphs have been moved 10px from the sides of the <div>.
Figure 17. The paragraphs have been moved 10px from the sides of the <div>.
  1. Choose File > Save All Related Files to save the web page and style sheet.

Resolve a conflict between rules

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.
Figure 18. You can rearrange the order of style rules by dragging and dropping in the CSS Styles panel.
Figure 18. You can rearrange the order of style rules by dragging and dropping in the CSS Styles panel.

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

  1. 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.

Figure 19. The order of the style rules has been changed.
Figure 19. The order of the style rules has been changed.

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.
Figure 20. Editing the padding-left definition in Code view.
Figure 20. Editing the padding-left definition in Code view.
  1.  Select !important from the code hints. The padding-left definition now looks like this:

padding-left: 0px !important;

  1. 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).
Figure 21. The paragraph is now correctly aligned.
Figure 21. The paragraph is now correctly aligned.

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.

  1. Delete !important from the padding-left definition in the .post_header p style rule (it should look like Figure 19).
  2. The post_header <div> is nested inside the right_column <div>, so add #right_column to the beginning of the selector like this:
#right_column .post_header p { font-size: 12px; color: #FFF; margin: 0px; padding-left: 0px; }

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.

  1. Refresh Design view to confirm that the paragraph inside the header is still correctly aligned, as in Figure 21.
  2. 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.

Add a page heading

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).
Figure 22. The page heading has been added, but needs to be styled.
Figure 22. The page heading has been added, but needs to be styled.
  1. 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.
  2. Edit the value of Selector Name to .two_col h2, and click OK.
  3. 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
  4. In the Block category, use the following settings:
    • Word-spacing: 0.3em
    • Text-align: center

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

Figure 23. The margins on the heading blow the page apart.
Figure 23. The margins on the heading blow the page apart.

You need to fix the margins.

  1. 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.
Figure 24. The heading is no longer centered.
Figure 24. The heading is no longer centered.

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.

  1. 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).
Figure 25. The clear property forces the heading down the page.
Figure 25. The clear property forces the heading down the page.
  1. 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.

  1. 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.

  1. 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.

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

Link the two pages

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).
Figure 26. Browsing for the file you want to link to.
Figure 26. Browsing for the file you want to link to.
  1. 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).

Figure 27. The link has been created.
Figure 27. The link has been created.

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.

  1. 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.
  2. 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).
Figure 28. You can create a link by dragging the Point to File icon to the target file.
Figure 28. You can create a link by dragging the Point to File icon to the target file.

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

  1. 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).

Figure 29. The Hyperlink dialog box has more options for links.
Figure 29. The Hyperlink dialog box has more options for links.

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).

Figure 30. Adding a link to the main heading affects how it’s styled.
Figure 30. Adding a link to the main heading affects how it’s styled.

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.

  1. With the link you have just created still selected, click the New CSS Rule icon in the CSS Styles panel.
  2. 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.

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

Where to go from here

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.

Comments are currently closed as we migrate to a new commenting system.  In the interim, please provide any feedback using our feedback form. Thank you for your patience.

Tutorials and samples

Tutorials

  • Working with updated responsive layout features in the Dreamweaver CS6 update
  • Creating your first website – Part 3
  • Creating your first website – Part 2
  • Creating your first website – Part 5

Samples

  • Responsive design with jQuery marquee
  • Customizable starter design for jQuery Mobile
  • Customizable starter design for HTML5 video
  • Customizable starter design for multiscreen development

Products

  • Adobe Creative Cloud
  • Creative Suite
  • Adobe Marketing Cloud
  • Acrobat
  • Photoshop
  • Digital Publishing Suite
  • Elements family
  • SiteCatalyst
  • For education

Download

  • Product trials
  • Adobe Reader
  • Adobe Flash Player
  • Adobe AIR

Support & Learning

  • Product help
  • Forums

Buy

  • For personal and professional use
  • For students, educators, and staff
  • For small and medium businesses
  • Volume Licensing
  • Special offers

Company

  • News room
  • Partner programs
  • Corporate social responsibility
  • Career opportunities
  • Investor Relations
  • Events
  • Legal
  • Security
  • Contact Adobe
Choose your region United States (Change)
Choose your region Close

North America

Europe, Middle East and Africa

Asia Pacific

  • Canada - English
  • Canada - Français
  • Latinoamérica
  • México
  • United States

South America

  • Brasil
  • Africa - English
  • Österreich - Deutsch
  • Belgium - English
  • Belgique - Français
  • België - Nederlands
  • България
  • Hrvatska
  • Česká republika
  • Danmark
  • Eastern Europe - English
  • Eesti
  • Suomi
  • France
  • Deutschland
  • Magyarország
  • Ireland
  • Israel - English
  • ישראל - עברית
  • Italia
  • Latvija
  • Lietuva
  • Luxembourg - Deutsch
  • Luxembourg - English
  • Luxembourg - Français
  • الشرق الأوسط وشمال أفريقيا - اللغة العربية
  • Middle East and North Africa - English
  • Moyen-Orient et Afrique du Nord - Français
  • Nederland
  • Norge
  • Polska
  • Portugal
  • România
  • Россия
  • Srbija
  • Slovensko
  • Slovenija
  • España
  • Sverige
  • Schweiz - Deutsch
  • Suisse - Français
  • Svizzera - Italiano
  • Türkiye
  • Україна
  • United Kingdom
  • Australia
  • 中国
  • 中國香港特別行政區
  • Hong Kong S.A.R. of China
  • India - English
  • 日本
  • 한국
  • New Zealand
  • 台灣

Southeast Asia

  • Includes Indonesia, Malaysia, Philippines, Singapore, Thailand, and Vietnam - English

Copyright © 2013 Adobe Systems Incorporated. All rights reserved.

Terms of Use | Privacy | Cookies

Ad Choices

Reviewed by TRUSTe: site privacy statement