Edit Text and Apply Text Styles
You will encounter two kinds of text formatting in Dreamweaver:
- Block-level or "native" HTML, which includes Paragraphs and Heading 1 through Heading 6, affect the entire block of text; use the Format menu in the Properties Inspector
- Special CSS (Cascading Style Sheets) styles can be applied to individual bits of text or whole blocks; use the Style menu in the Properties Inspector
Step 1: Create new headlines and paragraphs
- View the page you want to edit in a browser; Students, find your practice site home page
- Switch to Dreamweaver, find the corresponding file from your Local Files list, get a fresh copy and open it; Students, it's root/index.html
- Students, update the main headline so others will know you are practicing here; Example: "[Your Name] is Practicing Here 6/21/07"
- Put your cursor at the beginning of the body text and create a new paragraph by typing Enter, move the cursor up, and type in some text
- Type Enter and type a second line of text
- With your cursor anywhere on the first new line, drag the "Format" menu to "Heading 2"
- The entire block changes
- Move your cursor down a line and repeat, choosing Heading 3 this time
- With the cursor still on the second line, go back to "Format" and choose "Paragraph"
- The entire block changes; this is what is meant by "block-level"
Best practices:
-
Always have one Headline 1 headline at the top of the page
- Most of the page should be normal paragraphs, broken up by Heading 2 through Heading 6 headlines and subheadlines
-
Use the "native" HTML formats for most of your page text; use CSS styles sparingly
Step 2: Apply special CSS text styles
This is an example paragraph where a number of different CSS styles have been applied. Note that this paragraph is quite ugly as a result.
- Select some text
- Apply a CSS style using the following menu sequence: Text > CSS Styles > [pick any style that begins "text_"]
- Repeat for other CSS styles; try right-click (windows)/ctrl-click (mac) to find the CSS Styles menu
- Repeat in a headline block
- Place a cursor within or at the end of a paragraph without selecting any specific text
- Apply a CSS style
- The entire block changes; not knowing what specific text to apply the style to, Dreamweaver applies it to the nearest tag
Know your style
The Stanford Medicine format contains many styles for different purposes. Styles that begin "text_" are intended to style regular text. Styles that begin "link_" are for styling links. Avoid using styles that begin "Nav" as these are used by our navigation scripts. We will discuss some of the other styles as we go along. Please review the list of Stanford Medicine Styles by Category, and print it out for later reference.
Caution: HTML formatting and custom styles
- Older Web pages may make use of the Font tag set to control text appearance. Most likely you will encounter this type of formatting only if you work with old pages. If you encounter it, it's a good idea to clear this code before applying styles.
- Avoid using the Font and Style controls by themselves; it's best to rely on the native HTML and built-in CSS styles formats
| Good formats: OK to use:
|
Bad formats: Don't ever use:
|
Use with caution only:
|
« Previous | Home | Next »
IRT Confluence Wikis