Creating your first website – Part 3: Adding content to pages

Welcome to the third part of this tutorial series on creating your first website. This tutorial shows you how to add content to web pages in Adobe Dreamweaver CS5/CS5.5. You can add many different kinds of content to web pages, including graphics, text, links, and Spry widgets—to name just a few. After you've added content to your pages, you can preview your work in Dreamweaver so that you can see what it will look like on the web.

Note: You won't be adding a Spry widget to the page until Part 5 of this tutorial series, Adding the Spry menu.

In this tutorial, you'll begin with the CSS layout (index.html) you created in Part 2, Creating the page layout. If you did not complete that tutorial, you must complete it before proceeding, or download first_website_pt2_completed.zip (475 KB) and begin with those. All the required assets for this tutorial are in the check_cs5 local site folder that you set up in Part 1. If you are using the completed files from Part 2, follow the instructions in Part 1 for setting up the Check Magazine site on your local computer.

Your task is to add assets to the home page for Check Magazine, a fictional publication. You'll learn how to add images, text, and links. You'll also learn how to format text using CSS. Figure 1 shows what the finished page will look like at the end of Part 3.

After you create your page layout, you are ready to add assets to the page, starting with images. You can use several methods to add images to a web page in Dreamweaver. In this section, you'll add three images to the Check Magazine page using various methods.

Insert an image by using the Insert menu

In Part 2, you used the Insert panel to insert an image. This time, you'll use the Insert menu.

1. In Dreamweaver, open the index.html file that you created in Part 2, Creating the page layout.
2. Delete the placeholder text in the left_column div. Make sure the Insertion point remains inside the div (see Figure 2). (In other words, make sure you don't click anywhere outside the div after you've deleted the placeholder text.)

3. Press Enter (Windows) or Return (Mac OS X) once to create more space in the div.
4. Press the up arrow on your keyboard to move the Insertion point back up to the top of the div, and click the Split button to see what has happened in the underlying code. Dreamweaver has inserted two paragraphs ( <p> tags), each with   inside them (see Figure 3).

Note: The   is the HTML entity (code that represents a special character) for a nonbreaking space. It's there to make the paragraph easier to select in Design view. Dreamweaver normally deletes it automatically as soon as you start typing or insert anything into the paragraph.

5. Select Insert > Image.
6. In the Select Image Source dialog box, navigate to the site's images folder, select the car.jpg file, and click OK (Windows) or Choose (Mac OS X).
7. Dreamweaver displays the Image Tag Accessibility Attributes dialog box (unless you've changed the default preferences).

   Type Car in the Alternate Text text box and click OK.

   The image appears in Design view, and Dreamweaver inserts the necessary HTML in the underlying code, removing the nonbreaking space in the process (see Figure 4).

8. Leave the image selected (in other words, don't click anywhere else on the page), and look at the Property inspector at the bottom of the Dreamweaver application window. (If the Property inspector is hidden, you can display it by selecting Window > Properties).

The Property inspector displays all of the properties for whatever asset you have selected in the Document window. Since we have our new image selected, the Property inspector is displaying the properties for the car.jpg image. You can see that the Property inspector displays the width and height of the image, the file path to the image, and the alternate text that you specified before inserting the image (see Figure 5).

The Property inspector is one of the most powerful tools in Dreamweaver. You can use it to change properties for any selected asset on your page at any time.

Note also that the <img> tag is selected in the Tag selector (at the bottom of the Document window)—yet another way that Dreamweaver communicates the precise selection of page assets.

Now let's add the remaining images.

Insert an image by dragging

To insert an image by dragging:

1. Delete the placeholder text in the center_column div. Make sure the Insertion point remains inside the div.
2. Press Enter (Windows) or Return (Mac OS X) once to create more space in the div.
3. Press the up arrow on your keyboard to move the Insertion point back up to the top of the div.
4. In the Files panel (Window > Files), locate the data_addict.jpg file (it's inside the images folder) and drag it to the insertion point in the center_column div (see Figure 6).

   Important: Make sure you drag the data_addict.jpg to the Insertion point at the top of the center_column div. It's easy to mistakenly drop the image in the lower half of the div when dragging.

5. In the Image Tag Accessibility Attributes dialog box, type Data in the Alternate Text text box and click OK.

   The image appears on your page. You can see all of its properties in the Property inspector.

6. Save the page. It's important to save often!

Insert an image from the Assets panel

To insert an image from the Assets panel:

1. Delete the placeholder text in the right_column div. Make sure the Insertion point remains inside the div.
2. Press Enter (Windows) or Return (Mac OS X) once to create more space in the div tag.
3. Press the up arrow on your keyboard to move the Insertion point back up to the top of the div.
4. Click the Assets tab in the Files panel group, or select Window > Assets to make your site assets appear.

   The images category in the Assets panel is selected by default. If it isn't selected, click the Images button to view your image assets (see Figure 7).

The Assets panel displays assets for the site associated with the active document in the Document window. In the screen shot, you can see that the Assets panel displays the selected image asset in the preview area.

5. In the Assets panel, select the helmet.jpg file.
6. Do one of the following to insert the helmet.jpg file in the page:
   • Drag the helmet.jpg file to the insertion point in the right_column div.
   • Click Insert at the bottom of the Assets panel.
7. In the Image Tag Accessibility Attributes dialog box, type Helmet in the Alternate Text text box and click OK.
8. Save the page, which should now look as shown in Figure 8.

For more information on working with the Assets panel, see Working with Assets in Dreamweaver Help.

Now you'll add text to the page. You can type text directly in the Document window or you can copy and paste text from other sources (such as Microsoft Word or plain text files). Later, you'll use CSS to format the text.

1. Return to the Files panel by clicking its tab.
2. In the Files panel, locate the text.txt file (in the check_cs5 root folder) and double-click the file's icon to open it in Dreamweaver.

   You'll notice that this window is in Code view (see Figure 9) and cannot be switched to Design view because it's not an HTML file.

3. In the text.txt Document window, select the first block of text (beginning with "Inside Tesla Motors®" up to and including "read more...").
4. Copy the text by pressing Ctrl+C/Cmd+C, or by selecting Edit > Copy. Alternatively, you can right-click and select Copy from the context menu that appears.
5. Leaving the text.txt file open, click the tab of the index.html document.
6. Click inside the left_column div below the car image, placing the Insertion point in the same place where you created space earlier (see Figure 10).

7. Paste the text by pressing Ctrl+V/Cmd+V, or by selecting Edit > Paste. Alternatively, right-click and choose Paste from the context menu that appears.

The text is displayed in the div (see Figure 11).

Don't worry about the look of the text. You'll format it with CSS so that it looks more like the text in our design comp.

8. Return to the text.txt file by clicking its tab.
9. In the text.txt Document window, select the second block of text (beginning with "Facts and Figures" up to and including "read more...").
10. Copy the text.
11. Leaving the text.txt file open, click the tab of index.html.
12. Click inside the center_column div below the data image, placing the Insertion point in the same place where you created space earlier.
13. Paste the text.
14. And one last time, return to the text.txt file by clicking its tab.
15. In the text.txt Document window, select the third block of text (beginning with "Today's Self Improvement" up to and including "read more...").
16. Copy the text.
17. Close the text.txt file by clicking the X in the upper-right corner of its tab. (You won't need the remaining text until later.)
18. On the index.html page, click inside the right_column div below the helmet image, placing the Insertion point in the same place where you created space earlier.
19. Paste the text.

    Your three columns are now filled with text (see Figure 12).

20. Save the index.html page.

Now all you need to do is format the text so that it looks more like what the designer intended.

In Part 2, Creating the page layout, you learned how to insert div tags and then position those tags on the page to create the layout. You separated content (the HTML div tags) from presentation (the CSS that controls the layout) by creating new CSS rules, placing them in an external style sheet, and then applying them to the div tags on your page. In a nutshell, you learned that you can insert elements on a page and create styling rules in a linked CSS page, and that when you apply those styling rules to particular elements on a page, those elements are directly affected by the rules.

Well, the same holds for text on a page. CSS is used to format text as much as it is to position div tags. You type or paste your text on the page, create a CSS rule, and then apply the rule to the text, just as you would apply it to a div. In fact, all text is contained within some sort of tag—it might be a div, but it could also be a paragraph tag ( <p> ), a heading tag ( <h1> , <h2> , etc) or any other kind of tag. Normally what you do when you format text with CSS is apply the CSS rule to the particular tag that you want to format.

Before going on, I recommend that you read Understanding Cascading Style Sheets, a basic overview of how CSS works to format text. Having a little background information about the ins and outs of CSS will make the rest of this tutorial a lot easier to comprehend.

Now let's format some text.

1. Open the CSS Styles panel (Window > CSS) by clicking its tab.
2. (Optional) If it's not already closed, double-click the Insert panel to close it and create more room.
3. In the CSS Styles panel, click the All button to make sure you are viewing All mode.

   Earlier, when you first used the CSS Styles panel to create a new rule, the panel displayed no rules because you hadn't created any yet. Now that you have a bunch of rules applied to elements on the page, the CSS panel is displaying all of the pertinent rules (see Figure 13).

In addition to creating and attaching new rules, the CSS Styles panel lets you track the CSS rules and properties that affect the elements on the page. All mode lets you see all of the page's rules at once, while Current mode lets you see the rules that apply to the current selection on the page. The CSS Styles panel also lets you modify CSS properties without opening an external style sheet.

There are a number of ways we could go about formatting your text. Beginners often create class rules and apply them to each paragraph, but that's a very inefficient approach. It's better to use CSS to apply an overall style first, and use classes and other CSS selectors only for those elements that you want to style differently.

For now, all you need is a nice font format and size, and since you want your format to be uniform across all three columns, you can simply define the font format in a rule for the body tag ( <body> ). The body tag is the topmost tag of the HTML page, which means that all other tags on the page (including all of our div tags) inherit the properties defined for the body tag. By defining your text properties in the body tag, you will effectively be defining text properties for all text that appears on the page.

4. In the lower right-hand corner of the CSS Styles panel, click the New CSS Rule button.
5. In the New CSS Rule dialog box, do the following:
   • Select Tag from the Selector Type pop-up menu.
   • Type or select body in the Selector Name text box.

   Note the description in the text box below the selector name. Dreamweaver is telling you that the rule you're creating will apply to all <body> elements. That's exactly what you want.

6. Make sure check_cs5.css is selected from the Rule Definition pop-up menu.
7. Click OK.

   The CSS rule definition dialog box appears, indicating that you are defining properties for the new body tag rule.

8. Select the Type category in the Category column. (It should be selected by default.)
9. In the Type category, do the following:
   • From the Font-family pop-up menu, select Trebuchet MS, Arial, Helvetica, sans-serif
   • Click the Color box and use the eyedropper tool to select black (#000).
   • Click Apply.

   As soon as you click Apply, all the text in Design view should be formatted with the new style (see Figure 14).

Tip: If you want to experiment with different styles, you can change the values in the CSS Rule Definition dialog box, and click Apply to see the effect immediately reflected in Design view.

10. While you've got the CSS Rule Definition dialog open, you should set a background color for the <body> tag. Although current browsers set the background color to white, it's generally recommended to set the color explicitly in your own style rules—and, of course, you can choose any color you like.

    Select Background from the Category list on the left.

11. Click the Background-color color box, and select white (#FFF).
12. Click OK to close the CSS Rule Definition dialog box.

    You'll notice two things. One is that Dreamweaver has added the new body tag rule to the CSS Styles panel (see Figure 15).

The other thing you might notice is the asterisk (*) that appeared next to the check_cs5.css file name in the upper left-hand corner of your document (see Figure 16).

What Dreamweaver is showing you here is that you have an unsaved related file.

13. Select File > Save All Related Files to save the changes you made to the style sheet.

Now you just need to do a couple more things to finish formatting the text in your columns.

Format headings

To format headings:

1. In the left_column div, place the Insertion point after the ® symbol at the end of the first line, and press Enter (Windows) or Return (Mac OS X).

   Note that the Insertion point is now on a line above the following text. Open Split view to understand what has happened. There's a line break ( <br /> ) tag immediately after the opening <p> tag (see Figure 17).

When you pasted the text from text.txt, the newline characters were converted to <br /> tags. This gives the impression of paragraphs, but causes problems for formatting the text correctly. Pressing Enter/Return created a closing </p> tag at the end of the first line, and an opening <p> tag at the beginning of the next line, but the <br /> tag wasn't removed, leaving too big a space between the paragraphs.

2. Make sure the Insertion point is still in the same place, and press your down arrow once to move the Insertion point before the word The.
3. Press Backspace to delete the unnecessary line break (see Figure 18).

This is a very important step. The main paragraph text must be completely separated from the heading before we apply a format to the heading.

4. Click anywhere in the heading text. For example, click in the word Tesla. You do not need to select any text—you only need to make sure that the Insertion point is somewhere in the heading text.
5. In the Property inspector (Window > Properties), make sure the HTML button on the left is selected.
6. Select Heading 2 from the Format pop-up menu (see Figure 19).

The Inside Tesla Motors® heading changes to a Heading 2. The size and weight of the text you see here is the default size and weight for a Heading 2. In other words, you did not really need to apply any CSS to achieve this effect (though you could have!)

Now you'll do the same thing with the remaining headings.

7. In the center_column div, place the Insertion point after the word Figures at the end of the first line of text and press Enter (Windows) or Return (Mac).
8. Press the down arrow once, to move the Insertion point before the word How at the beginning of the next line, and press Backspace to remove the line break.
9. Click anywhere in the heading text. For example, click in the word Figures.
10. In the Property inspector, select Heading 2 from the Format pop-up menu.

    The Facts and Figures heading changes to a Heading 2.

11. Lastly, in the right_column div, place the Insertion point after the word Improvement at the end of the first line of text and press Enter (Windows) or Return (Mac OS X).
12. Press the down arrow once to move the Insertion before the word Whether at the beginning of the next line, and press Backspace to remove the line break.
13. Click anywhere in the heading text. For example, click in the word Improvement.
14. In the Property inspector, select Heading 2 from the Format pop-up menu.

    The Today's Self Improvement heading changes to a Heading 2.

15. Save the page.

Create links

A link is a reference, inserted in a web page, that points to another document. You can turn almost any kind of asset into a link, but the most common kind of link is a text link. In this section, you'll turn the "read more..." text in each of our three columns into links.

The check_cs5 site root folder contains a finished HTML page that you can link to (a news page for the magazine). You'll use this page for all of the links in the columns, even though you would have distinct pages for each of these links if you were building a real site.

Note: The news.html page is a dummy page made up of images, and is not intended for practical use. A follow-up tutorial will later show you how to create a functioning version of the page using a database and PHP server-side technology.

1. In the left_column div, select the "read more..." text at the end of the paragraph, including the periods (see Figure 20).

   Tip: Because there's no gap between the text and the left side of the div, you might find it difficult to select the text from left to right. Click and drag from the right—it's much easier.

2. In the HTML Property inspector, click the folder icon next to the Link text box (see Figure 21).

3. In the Select File dialog box, select the news.html file (which is in the same folder as index.html) and click OK (Windows) or Choose (Mac OS X).
4. Click next to the "read more..." text to deselect the link. You'll see that the text has transformed into a link, underlined and blue.
5. Repeat the previous steps and link the "read more..." text in the remaining two columns to the news.html page. When you're finished, your page should look as shown in Figure 22.

6. Save the page.

You just created three links to a page that's internal to our site. But you can also use the Link text box in the Property inspector to create links to external websites. To do so, simply select the text or element you want to link, and then type the website's full URL in the Link text box of the Property inspector. For example, if you wanted to link the third "read more..." text in our example to adobe.com, you would select the text, type in the Link text box, and press Enter/Return.

Note: When linking to an external site, you must include the http:// at the beginning of the URL. If you omit it, the browser treats it as an internal link.

Design view gives you a reasonably good idea of what your page will look like on the web, but you must preview the page in Dreamweaver or in a browser to see the definitive end result. With Dreamweaver CS5, you can preview your page directly in the Document window using Live View. You can also compare how your site looks in leading browsers by launching BrowserLab.

Preview your page in Live View

To preview the page, ensure that the index.html page is open in the Document window, and click the Live View button (see Figure 23).

Dreamweaver displays a preview of your page, just as it would appear in a browser. The page does not look all that different, as Dreamweaver does a pretty good job of displaying pages in Design view as they would look in a browser; but you'll notice that small changes occur when you enter Live view—the outlines for all of the div tags disappear, for example.

Dreamweaver Live View uses WebKit as its rendering engine—the same engine that powers the Apple Safari browser, and a host of other applications such as Google Chrome and Adobe AIR.

Check links in Live View

In Dreamweaver CS5, Live View works just like a real browser, allowing you to follow links. Hold down the Ctrl key (Windows) or Cmd key (Mac OS X) when you click a link, and Dreamweaver takes you to the target page within the Document window—even if the link points to an external page on a different site (assuming you're connected to the internet at the time).

1. Click the Live View button to view index.html as it looks in a standards-compliant browser.
2. Hold down Ctrl/Cmd and click one of the "read more" links.

   The news.html page appears in the Document window (see Figure 24).

Notice that there's a Browser Navigation bar at the top of the Document window. It works in the same way as you would expect in a browser with Backward and Forward buttons. The Home button takes you back to the page you started from. You can even type a completely different URL in the Address text box, and Dreamweaver loads it into Live View (as long as the site is accessible).

If you don't want to hold down Ctrl/Cmd each time you click a link, select Follow Links Continuously from the Live View Options menu (see Figure 25).

However, this works only during the current Live View session. If you turn off Live View, you need to select this option again the next time you launch Live View.

3. Click the Home icon in the Browser Navigation bar to return to index.html, and click Live View to turn it off.

Preview your page in BrowserLab

BrowserLab is an online Adobe service integrated directly into Dreamweaver CS5 that lets you see what your pages look like in a wide range of popular browsers on both Windows and Mac OS X, saving you the need to install multiple browsers and operating systems locally.

To use BrowserLab, you need an Adobe ID. If you registered your Adobe ID during the installation of Dreamweaver CS5 (or Creative Suite CS5), you're ready to go. Otherwise, select Help > Register, and follow the instructions onscreen to register for CS Live Services.

1. With index.html open in the Document window, open the BrowserLab panel by clicking its tab, or by selecting Window > BrowserLab. Make sure you're connected to the internet, and that the menu option alongside the Preview button in the BrowserLab panel is set to Local, and click Preview.

   Alternatively, press Ctrl+Shift+F12 (Windows) or Shift+Cmd+F12 (Mac OS X).

2. Dreamweaver opens BrowserLab in your default browser, and prompts you to sign in with your Adobe ID. It then uploads your page and all related files and assets to the BrowserLab server.

   After a short while (the time depends on the speed of your Internet connection), BrowserLab displays your page as it looks in a range of different browsers and operating systems. You can create your own subsets of browsers and operating systems to test in, view different ones side by side, or superimpose them in "onion skin" mode.

   Figure 26 shows index.html as it currently looks in Safari 4.0 on Mac OS X and Internet Explorer 6 on Windows XP.

If you look closely at the image on the right of Figure 26, you can see that Internet Explorer 6 leaves no gap between the main image and the image in the columns (Internet Explorer 7 does the same).

Note: When checking the page in BrowserLab, you'll notice that the main image is not rendered in Firefox 2.0 on either Windows or Mac, because it's a background image. The market share of Firefox 2.0 is estimated at about 0.6 percent and falling, so it can be ignored, particularly since the image is purely decorative.

3. Switch back to Dreamweaver, and add the following style rule at the bottom of the check_cs5.css style sheet:

This adds a margin of one em to the top of each paragraph. An em is a measurement borrowed from typography. In CSS, one em is equivalent to the height of the current font. When typing the rule, make sure there is no gap between the number and the unit. Type 1em, not 1 em.

4. Save check_cs5.css, and click the Preview button in the BrowserLab panel to refresh the version on BrowserLab.
5. Select Internet Explorer 6 in BrowserLab. The images at the top of the columns are now correctly positioned (see Figure 27).

6. Select Internet Explorer 7. The images are correctly positioned.
7. Check the other browsers. The images are now in the same position in all of them. By default, most browsers add a top margin equal to the height of one line at the top of every paragraph. It's just Internet Explorer 6 and 7 that weren't playing ball. The style rule brought them back into line without affecting the look in other, more standards-compliant browsers.
8. Close your browser window or tab to exit BrowserLab.

Preview your page in a browser

Using BrowserLab to compare how your pages look in different browsers on different operating systems is important before you publish them on the Internet. But sometimes, you just want to take a quick look in a browser or two on your local computer. That's where Preview in Browser comes in useful.

To preview the current page in your default browser, just press the F12 key (Windows) or Option+F12 (Mac OS X). You can also edit Dreamweaver Preferences to register other browsers.

1. Select Edit > Preferences (Windows) or Dreamweaver > Preferences (Mac OS X) to open the Preferences panel.
2. Select Preview in Browser from the Category list on the left.
3. Dreamweaver might already have detected other browsers on your computer. To add other browsers, click the plus button alongside Browsers to open the Add Browser dialog box.
4. Type the name of the browser in the Name text box, and click the Browse button to navigate to the browser's application file.
   • On Windows, this is normally the .exe file in the browser's subfolder of C:\Program Files or C:\Program Files (x86).
   • On Mac OS X, select the browser's name in the Applications folder.

   Tip: On Windows, Google Chrome is installed in a folder associated with your user account. To locate it, you need to enable the display of hidden files and folders. Right-click the application name in the Windows Start menu and select Properties to find the exact location.

5. Select one of the browsers listed in the Browsers text area, and select the Secondary browser check box. To launch the current page in the Document window in your secondary browser, press Ctrl+F12 (Windows) or Shift+Opt+F12 (Mac OS X).
6. To launch your page in a particular browser, select File > Preview in Browser, and choose the browser from the list. Alternatively, click the Preview/Debug in Browser button on the Document toolbar, and select a browser from the list (see Figure 28).

Note: For more information about working with Live View, see Previewing pages in Dreamweaver in Dreamweaver Help. For more information about previewing in browsers, see Previewing pages in browsers in Dreamweaver Help.

Your page is almost finished and ready for publication. In Part 4, Adding the main image text, you'll add another div to the main image area and position it using CSS.