This chapter is from the book
This chapter is from the book
This chapter is from the book
Formatting Text
Adding text to a page in Expression Web is similar to creating a document in your favorite word processor. Many of the same tools are available.
I’m not going to go into the details of basic text formatting because I’m sure you already understand how to bold and italicize text. Instead, I explain how to work with HTML-specific formatting.
How Expression Web Formats Text
Before you start formatting text in your page, you should become familiar with how Expression Web applies formatting. Because Expression Web is designed to create standards-compliant sites, it often uses CSS to apply formatting. How it goes about doing so is based on the CSS Mode setting.
The current CSS Mode setting is displayed using an icon in the status bar when a page is open. To adjust the CSS Mode setting, click the CSS Mode icon on the status bar and select the desired mode, as shown in Figure 3.3.
)
Figure 3.3. The CSS Mode setting controls how styles are applied and can be adjusted via the status bar.
By default, the CSS Mode setting is set to Auto. In this mode, Expression Web applies formatting using CSS rules that are configured on the CSS tab of the Page Editor Options dialog.
For more information on using the CSS tab in the Page Editor Options dialog, see Chapter 11, “Configuring Page Editor Options.”
When the CSS Mode setting is Manual, Expression Web automatically displays the Style Application toolbar shown in Figure 3.4. The Style Application toolbar allows you to specify how to apply styles when edits are made.
)
Figure 3.4. You can control how styles are applied by setting the CSS Mode to Manual and using the Style Application toolbar.
When the CSS Mode setting is set to Auto (the default), you are at the mercy of Expression Web when it comes to where CSS styles get defined. In many cases, that’s a suitable situation. However, you might want more granular control over where styles are created. For example, you might have a CSS file attached to the current page, and you may want to ensure that all newly created CSS styles are created inside that CSS file.
By setting the CSS Mode setting to Manual, you can use the Style Application toolbar to specify where new styles are created using the Target Rule drop-down shown in Figure 3.4. Based on what is currently selected, the following options are available in the Target Rule drop-down.
- An Existing CSS Element—If the selected page element already has a CSS class or ID applied to it, you can select the CSS ID or class from the Target Rule drop-down. If you then make modifications to the selected element, Expression Web modifies the CSS class or ID applied to it.
- Inline Style—If the selected element has an inline style applied to it, selecting Inline Style from the Target Rule drop-down causes the inline style to be modified when formatting is changed.
- New Inline Style—Formatting changes are reflected in a new inline style.
- New Auto Class—Causes Expression Web to create a new, auto-generated CSS class for any formatting changes that are applied. Expression Web creates the new CSS class in an embedded style sheet inside the current page.
- Apply New Style—Allows you to create a new style using the New Style dialog. The location for the new style can be specified in the New Style dialog.
- For more information on creating and editing CSS styles, see Chapter 17, “Creating Style Sheets.”
TIP
Font families that you create are used in the Font dialog, the Font drop-down, and in IntelliSense, which is displayed when editing HTML and CSS code.
Font Families
In a word processing application, the font you apply to text will always be the font the viewer of the document sees. Web pages don’t work that way. For you to see text formatted in a particular font on a page, that font must be installed on your machine. If it’s not, the browser substitutes a font you have.
NOTE
Some fonts are installed on almost all computers; Arial, Helvetica, and other common sans-serif fonts are considered the safest of all fonts. Times New Roman (a serif font) is another common font. It is the font Expression Web uses by default.
It’s a good idea to always specify a series of fonts to use and specify a generic font (such as sans-serif and monospace) as the last choice. By doing this, if a visitor to your site doesn’t have the first font listed, the browser attempts to use the next font in the list and so on. You can easily configure fonts in Expression Web by selecting Format, Font to display the Font dialog shown in Figure 3.5. Alternatively, you can use the Font drop-down on the main toolbar.
)
Figure 3.5. The Font dialog lets you easily choose a font family and otherwise modify the appearance of text.
- For information on customizing and configuring font families, see Chapter 11, “Configuring Page Editor Options.”
Font Sizes
Font size is one of those things many developers take for granted. Many Web designers say you should always use pixel dimensions (for example, 12 px) for font sizes. In fact, if you want your site to be as user-friendly and accessible as possible, you should use relative font sizes.
- For complete details on making your site compliant with accessibility standards, see Chapter 12, “Maintaining Compatibility and Accessibility.”
When you use the Font Size drop-down on the toolbar or adjust the font size using the Font dialog, Expression Web automatically uses relative font sizes. The following code shows a CSS style that defines a relative font size that equates to approximately 14-point type:
.mainText {
font-size: medium;
}
- For more information on CSS styles, see Chapter 17, “Creating Style Sheets.”
Using relative fonts is a good idea because it gives your site visitor control over the size of the text. When you change the text size in your browser, text that is sized with a relative font size resizes accordingly while text that is sized with an absolute size remains the same size.