TEXT IN DREAMWEAVER

Text is easy. Just open a new document and start typing.

But if you’ll remember from the sections on HTML coding and CSS, there’s a lot you can do to make text more interesting and more appropriate to your page. One thing to remember is the limited number of fonts you have to deal with. If it’s imperative to use a font that isn’t one of the select few all users have installed on their computers, then you’ll need to create that text as an image file. More on the pros and cons of that option later.

Select the type you want to format and use the properties panel to make changes. (Better yet, create CSS styles.)

Format: specify text as a paragraph, select pre-sized heading , or specify text as preformatted.

Style: if you‘ve created a special CSS style for text, choose it from this menu.

B & I: make selected text bold or italic (strong or emphasis)

Align: choose from flush left, centered, flush right, or (gasp!) justified formats

Link: browse to a file to link selected text, or type an email link (mailto:me@anywhere.com).

Font: choose from a combination of serif, or sans serif fonts.

At the top of your Dreamweaver document, select the text tab of the insert bar to find a nice selection of options. These options are also available under the text menu.

If you are copying and pasting text from another program, note the “paste text” and “paste HTML” options under the Edit menu. Whether you paste text or paste HTML makes a difference, depending on where you’re doing it in the document.

If you’ve copied some HTML code and pasted it into the design area of your document, Dreamweaver replaces characters like apostrophes and quotes with the code HTML uses to display those characters: it’s becomes it’s and “I said OK.” becomes "I said OK.".

If you’ve copied some text from InDesign and “pasted text” in the design area of your document, you’ll loose any extra space between paragraphs. Still, it’s frequently easier to deal with that than to type from scratch.

There are two ways to format text in Dreamweaver (aside from all the choices): presentational markup, and structural markup.

Selecting each headline, subhead, or block of copy and using either the text insert bar or the properties panel creates separate HTML code for each occurrence. If you decided at a later point to change the font for all your text, you‘d have to go back and select each paragraph and make the change by hand, one at a time. Very tedious, and very inefficient.

You’ll note in code view, as you do this, Dreamweaver creates a pretend style for you. The problem with this, is if you edit some text that was assigned “style 2,” for instance, you end up with a new style, rather than an edited version of style 2.

While you can reuse styles that Dreamweaver creates for you (select them from the Style popup window in the properties panel), without descriptive names and the opportunity to see what formatting applies to which style, it’s time consuming, confusing, and inefficient.

If, on the other hand, you used an H1 heading for all your heads, and an H4 heading for your subs, you could redefine those tags with a CSS style, and therefore, change all the heads and subheads in your document to the new style in one fell swoop. Much more efficient. (Use the “format” portion of the properties panel to select a headline style.)

The same is true for creating classes and styles for text. You can create a class to define text that’s to display as captions, as body copy, or as subheads. Or, you could redefine the <p> tag entirely, which will change all the text in your document automatically.

What’s also true is that using proper HTML formatting allows browsers to identify a heading as a heading, whereas, large bold type is just bold and large, not a heading. For people with visual impairments, creating a headline using the H tag will be read as a headline and not just another sentence.

And if that wasn’t enough, the World Wide Web Consortium (W3C), which is responsible for creating and maintaining HTML code conventions, is “deprecating” certain tags, like <font> and <b> and <i>. That is to say, they’ll no longer be an option in the future. What they’re trying to tell us is “use CSS.”

SPECIAL CHARACTERS

It’s important to use the correct characters and symbols in print, and it’s important that print documents translate appropriately into web pages. Common “special” characters, like ©, ®, ™ and em and en dashes (— and –) all translate during the cut and paste process (between InDesign and Dreamweaver, at least). There are times when you may need another, less common character.

Use Insert > HTML > special characters > other to find and insert it. Click the character you want from the chart that pops up and click OK.

COOL TEXT TRICKS

One of the biggest issues for designers using Dreamweaver is controlling the amount of white space between a heading and the following paragraph, or between paragraphs in general. It’s easy to fix this using a negative margin space—which you can only do by creating a CSS style sheet. Here’s how:

1. Click on the “new” style button at the bottom of the CSS styles panel.

2. Create a new class, or redefine the paragraph tag, or the H tag you want to deal with. Use a class style if you want to apply it to only specific areas. Redefine a tag if you want the style to be consistent throughout your document.

3. In the “type” portion of the definition dialog box, select the font, size, and so on that you want.

4. In the “box” portion, uncheck “same for all” in the margin section and set a negative number in the “bottom” box. Click OK.

Apply the tag or class to your type. Before you think it’s perfect, preview it in your browser: the amount of negative space you specified may need adjusting.

before using CSS to create negative paragraph spacing

after using CSS to create negative paragraph spacing: the H1 tag was redefined for the head, and the <p> tag was redefined for the text

Creating paragraphs with first lines that extend to the left and subsequent lines indented is also not too hard to create using CSS styles:

1. Click on the “new” style button at the bottom of the CSS styles panel

2. Create a new class called “.indenttext” or something that makes sense.

3. In the type portion of the definition dialog box, select your font, size, color, and so on.

4. In the “box” portion, set the width of the box to something concrete—like 300—and the left margin to 25 or something large enough to make a visual difference.

5. Create a second class called “.firstline”

6. Set the same parameters you used in “.indenttext” in the type portion of the definition dialog box.

7. In the “box” portion, set the width to the same size as your “.indenttext,” and your bottom margin to a negative number (I used -12). Click OK.

Since paragraphs are defined whenever there’s a hard return, you have to separate your first line of text from the rest of the paragraph.

First select the entire paragraph an apply the “.indenttext” style by choosing it from the style popup menu in the properties panel. The whole paragraph should move over. At this point, you can tell how many words will fit on your first line. Put your cursor where you want the first line to end and hit Return to separate it from the rest of the paragraph. The spacing is going to look weird—don’t fret.

Then select your first line and apply the “.firstline” style to it.

Preview it in your browser to make sure it works the way you want it, then return to edit your CSS styles if needed. Once you have these specs set up as styles, you can use them whenever you want to!

Designers dealing with lots of text—magazine articles, for instance—use a technique called “pull quotes” to highlight a salient phrase by making it bigger, bolder, and set apart from the rest of the copy. Using the “float” capability in CSS, you can recreate this for web pages.

1. Create a table of one row and one column. Set the width to a percentage, rather than a fixed amount so it flexes depending on the width of the browser window.

2. Insert your text—type it from scratch, or copy and paste it from another program. Establish your paragraph breaks, if needed.

3. Find the text you want to use as a pull quote; select it, copy it, and then paste it within the text where you want it to appear.

4. Create a new CSS class called “.pullquote” or something that makes sense.

5. Assign a font, point size, and weight that’s bigger/bolder/different color in the type pane of the definition dialog box.

6. Use the block pane to establish the text alignment.

7. In the box pane, create a width for the text that is narrower than the width you will be using for your regular text.

Select a “float” option (right or left).

Determine your padding and margins, which set the floating box apart from other elements on the page.
Click OK.

8. Create a new class or redefine your p tag to format your bodycopy. (In this example, I set the text indent property in the block pane to 15, which creates a nice paragraph indent.) Click OK.

Back in your document, select all your text and assign the bodycopy style using either the format or style portion of the properties panel.

Then select the part of it that you want to use as a pull quote and assign the “pullquote” class to it with the style popup menu in the properties panel.

If all goes well, you’ll get something like this.

You could also achieve this effect by messing around with tables.

If you neglected to check out csszengarden.com earlier, do so now to fully appreciate the power of CSS.