Macromedia Dreamweaver Tutorials

Font sizes in Dreamweaver

Adding text in Dreamweaver is a simple task and certainly no more complex than using a program like Microsoft Word. In this Dreamweaver tutorial we will cover adding and editing text.

Adding Text
To add text in Dreamweaver you need only start to type, pressing the enter key will start a new Paragraph, to wrap to the next line (a soft break) just hold the shit key down and hit enter.

Text size is often an area that confuses the new user, different units of measurements can be used, and the most common are pixels, percentage, em, and points, there are others but are not commonly used. At first glance setting your text to pixels would seem the perfect solution, the text size is easily controlled and the layout of your page is never compromised if the viewer has set his font size to large, but it’s not as simple as that, what if the viewer of your web site needs a large font size to be able to view the text, using the pixel option you would have discriminated this user from being able to view your content. I could write paragraphs on which is the best to option to use, but since this tutorial is written for the novice we will settle for percent, let me illustrate how this will work in real terms, a font set to a size of 100% will display at the default size that the viewer as their browser set for, a setting of 200% will result in the text being twice the size while a 50% setting will display fonts at half the size, see the examples below:

This font is sized at 100%
This font is sized at 200%
This font is sized at 75%

Now you have had a basic lesson on font sizing let us look at how to put this into practice with Dreamweaver.

Create some basic text on your screen.

Open up the Dreamweaver CSS Styles panel by pressing Shift and F11

At the bottom of the CSS Styles panel click the little icon to make a new style

The new CSS Rule dialog box appears

Select the “ Class (can apply to any tag ) option, next in the Name field enter a short description, next select the little check box at the bottom “ This document only “

Now click OK

CSS Rule definition box
You will be presented with the CSS Rule definition box, this allows us to set the parameters, making sure that under the Category you have “Type” selected.

Move to the Font field and select Arial, Helvetica, sans-serif, in the Size field enter a value of 100 and in the adjacent box select % as the option, you should now have something like this.

Now click OK.

Applying your CSS style Using the Dreamweaver Property inspector
 To apply this setting to your text first you highlight it

Then from the property inspector select the style that you just created called “normaltext”

You have now created a style to control the size of your font

Dreamweaver code view
To see the code that Dreamweaver has added click on the code button

From the above code you can see that Dreamweaver as created the code for the style and embededd it in the head section of the HTML code, CSS can also be created in an external style sheet, and we will be covering that in later tutorials.