- Creating a New Page and Adding Text
- Setting Page Properties
- Introducing Cascading Style Sheets
- Changing Text Attributes in the Property Inspector
- Aligning Text
- Creating Lists and Indenting Text
- Adding a Separator to a Page: The Horizontal Rule
- Saving Your Work and Previewing in a Browser
- Summary
- Q&A
- Workshop
- Exercises
This chapter is from the book
This chapter is from the book
This chapter is from the book
Changing Text Attributes in the Property Inspector
In the first part of this hour you learned about the global page settings that affect text. In the next section you’ll explore setting properties of sections of text on the page using Dreamweaver’s Property inspector. The Property inspector enables you to change the font, font size, and color for sections of text.
Selecting a Text Font
To apply a text font, select some text and then select the Text Font drop-down menu in the Property inspector, as shown in Figure 3.11.
)
Figure 3.11 The Text Font drop-down menu has several font groups from which to choose.
The fonts in the Text Font drop-down menu are defined in groups. Specifying a group instead of an individual font increases the odds that your viewers will have at least one of the fonts in the group. The browser will attempt to display text with the first font listed, but if that font isn’t available, the browser will continue through the list. Dreamweaver has predefined groups to choose from, and you can also create your own groups.
Remember, just because you can see the font and it looks great on your machine doesn’t mean that everyone has that font. If a font isn’t available, the browser will use the default font—usually Times New Roman—instead. The fonts that are in the predefined font combinations in Dreamweaver are commonly available fonts in Windows and on the Macintosh.
Changing Text Size
You change text size by selecting one of the size settings in the Property inspector Text Size drop-down menu shown in Figure 3.12, or by typing a number in the text box. If you select one of the numbers at the top of the list, the Units drop-down menu becomes active so that you can select the unit type. Point and pixel are the most common unit types. You can also select one of the relative sizes (xx-small, medium, large, and so on). These text size settings enable the text to appear relative to the size settings that the user configures in his browser. This is particularly useful for users who have vision impairment but it makes it difficult for you to strictly control how your web page appears to the user.
)
Figure 3.12 The Size drop-down menu in the Property inspector enables you to set the size of the selected text.
Selecting a Text Color
You change the text color by either selecting a color using the color picker or by entering a hexadecimal color value, such as #0000FF for blue, into the Text color text box.
Renaming a Style that Dreamweaver Creates
When you apply text formatting in Dreamweaver’s Property inspector, a CSS style is created in the code. This style defines the appearance of the text. You can see the style definition that Dreamweaver creates in the CSS Styles panel by simply clicking the CSS button in the Property inspector, shown in Figure 3.13. If the CSS Styles panel is already open, the button is dimmed. The name of the style that Dreamweaver created for you is displayed in the CSS Style drop-down menu.
)
Figure 3.13 The name of the CSS Style that Dreamweaver created is displayed in the CSS Style drop-down menu. You can see the style in the CSS Styles panel by clicking the CSS button.
Dreamweaver gives the style a default name (.style1, .style2, .style3, and so on) that is visible in both the CSS Styles panel (make sure the All button is selected) and the CSS Style drop-down menu in the Property inspector. You can edit that name by selecting the style in the CSS Styles panel and right-clicking (Control+clicking on the Mac) to bring up the context menu. Select the Rename command from the menu and give the style a more meaningful name, preferably a name that describes the function of the style in the page. The Results panel might open underneath the Property inspector; you can simply close this panel by selecting the Close Panel Group command from the panel menu in the upper-right corner of the Results panel.
Instead of redefining the same formatting and the same CSS style over and over, you should re-apply an existing CSS style. First select some text on the web page and then select a style from the CSS Style drop-down menu in the Property inspector. You can repeat this process over and over. You’ll learn how to edit the style definition in Hour 16.
You might have noticed that all of the styles listed in your CSS Styles panel don’t appear in the CSS Style drop-down menu in Dreamweaver’s Property inspector. For instance, the h1 style or the body,td,th style doesn’t appear. That’s because you apply these redefined tag styles by simply applying the HTML tag to text. In the case of the h1 style, you simply select Heading 1 from the Property inspector’s Format drop-down menu. The styles that Dreamweaver initially named beginning with a period, such as .style1, are class selectors, a special type of style that needs to be applied individually to selections of text. Again, you’ll learn more about class selectors in Hour 16.