Adding and Formatting Text - Getting Started with Dreamweaver CS5 - PART 3

• Getting Started with Dreamweaver CS5
• Part 1: Defining a Site
• Part 2: Creating an HTML Page
• Part 3: Adding and Formatting Text
• Part 4: Creating a Text Link
• Part 5: Previewing a Webpage in a Browser
• Part 6: Inserting an Image
• Conclusion

In this part of the series, we'll add some text to our HTML document. But before we do that, let's take a moment to observe our blank HTML document. The window that is housing this HTML document is called the Document window.

The Document window allows you to view your HTML page in 3 ways: Code view, Split view, and Design view. The Code view shows you all the HTML code in your HTML document. HTML code makes up the building blocks of each web page, and the Code view will give you direct access to that. The Design view shows you the contents of your HTML document without the HTML code. It shows your web page and its contents in a way that's more similar to how word processors display documents. The Split view splits the Document window so that you see both the Code view and the Design view at the same time. You can switch between views by clicking on the view buttons found at the top-left of the Document window.

Let's now add some text.


Step 1
Make sure you're in the Design view by clicking on the Design view button. Once your in the Design view, type My Website on the first line of your document's body, and then press the enter key to move down to the next paragraph.

Step 2
Then type About Me, and hit enter again.


Step 3
Next, type My name is [insert your name here], and hit enter once more.


Step 4
Then type Go to the next page. We will turn this last line of text into a link later on.

So right now, your document should look like this:

Save your document by choosing File > Save.


Step 5
Now let's change the format of some of our text. Select the My Website text.

Then go to the Properties panel. The Properties panel allows you to set the properties of the currently selected element in the Document window. In the Classic layout, the Properties panel can be found below the Document window.

Once you see the Properties panel, click on the HTML button to bring up the HTML properties. Then go to the Format drop-down menu and choose Heading 1 to turn the text into a first heading.

The My Website text should now look like this:

Step 6
Next, let's center the My Website heading. Make sure that the text is still selected. In the Properties panel, click on the CSS button to bring up the CSS properties. For the Targeted Rule, choose <New Inline Style>. And then click on the Align Center button.

The My Website heading should now be aligned to the center.

CSS stands for Cascading Style Sheets. CSS lets you add styles such as color, font, alignment, borders, etc... to the elements of your webpage. We'll talk more about CSS in a future training series.

Save your document by choosing File > Save.


Step 7
Next, select the About Me text. Then in the Properties panel, click on the HTML button to bring back the HTML properties again. Then choose Heading 2 for the format.


Step 8
Next, select the My name is [insert your name here] text. Let's change the font of that text.

In the Properties panel, click on the CSS button to ensure that the CSS properties are displayed. For the Targeted Rule, choose <New Inline Style>. For the font, choose the Verdana, Geneva, sans-serif set from the Font drop-down menu.

This should set the selected text's font to Verdana.

But why does it specify more than one font?
When a browser displays text, the font specified has to be a font that exists in the web page viewer's computer. In this example, if the person viewing your web page does not have the Verdana font installed in his or her system, then the browser will use the second font in the list. If the second font is still not installed in the web page viewer's computer, then it will use the third option, and so on. So for the other fonts in the same set that come after the first one, think of them as backup fonts.


Step 9
Lastly, let's change the color. Make sure the text is still selected, and that the CSS properties in the Properties panel are still displayed. To change the font color, click on the color box in the Properties panel, and then click any color you want from the color palette that pops up.

Click on any empty space in the Document window to deselect the currently selected text. You should see that the My name is [insert your name here] text now has a different color.

Save your work by choosing File > Save.


So now that we've taken a basic look at how to add and format text in Dreamweaver CS5, let's move on to the next part where we'll learn how to create a text link in Dreamweaver CS5.