Adding Text To a Web Page

The tutorial illustrates adding text to a web page in Dreamweaver CS5.

Well, now you get the reward for your patience as we actually get to put some text on a web page.

There are various ways of doing this, including typing the text on your keyboard, copying and pasting from another document, importing from a database, and so on.

One of the most important aspects will be to make the text look good, and to make whatever the key points are that we want to make with the text. In the early days of web page design the presentation of text was both limited in options and time-consuming. Nowadays there are tools and approaches available that mean we can produce really good looking text on a web page.

Of particular importance to us will be the use of CSS (Cascading Style Sheets), which will provide us with a text formatting toolbox that is both flexible and powerful and a great time saver.

Let's start with the simplest option of all. Open index.html.

I already have some text on this page, and I'm going to delete it. The flashing cursor is to the left of the text, so I press the Del key repeatedly to delete the characters one at a time.

Here is the empty page.

The cursor always shows where any text you type will appear.

The font, font size and most aspects of the formatting of the text are currently using whatever the defaults are for this page.

Now type a short phrase.

As we've seen already, I can change the defaults for text on a page. Click the Page Properties... button in the Properties Panel of use the Page Properties... option on the Modify menu.

Select the Appearance (CSS) page on this occasion.

Now change the font to a different one and increase the font size by a factor of two - something that really notices! Also, change the color of the font.

Click OK and notice the change on the text on the page.

Now, that is definitely NOT how we will normally change a font on a page, but it does show some of the main characteristics of text on a page and how they affect its appearance.

In the next few sections we're going to look at how to enter, edit and format text using Dreamweaver's powerful and flexible facilities.

More Dreamweaver CS5 Tutorials

All Dreamweaver CS5 Tutorials - Will be complete by Januay 2011.
Buy Dreamweaver CS5

Find this website useful?

To link to this page from your website, simply cut and paste the following code to your web page.

It will appear on your page as: Add a Link to a Web Page in Dreamweaver CS5

Share this Webpage

This site proudly build with Site Build It!