Text in Dreamweaver

First: you can’t “cheat” in HTML. . . in Word, etc., if you don’t feel like doing something the right way, you can fudge (spaces instead of a tab/indent, tabs and spaces instead of a table for a chart, etc.).

HTML is very unforgiving of such attempts. Need to do things the right way (will include in a lot of cases using tables, which we’ll talk about.)

Start DreamWeaver and start in a new document window.

Put Zip disk in with directory called “Foust_Inclass”

Go to Site > New

Type in a site name J460_In-class

Click the folder to the right of “Local root folder.” Navigate to the removable (Zip) disk. Click ONCE on “J460_InClass,” then click Select.

Check the “refresh automatically” box.

You’ve already seen that you can put text in an HTML document by just typing on the screen.

Type “Welcome to My Web Page.”

Hit RETURN and type: “I hope you like it here.”

Hit return again, then type:

“It is the embodiment of all of the skills and expertise that I have acquired in life so far.”

Note that a large space is being inserted between each line when you hit return. This is a bug/feature/shortcoming of HTML. When you press return, it assumes you want to indicate separation.

There is a way around it. . . Position cursor after “so far.” Hold the SHIFT key and press return. Type “And I’m still learning.” (You can also use Insert Special Characters > Line Break).

Note that extra space is not present. However, it can make it difficult to apply two different paragraph formats to two elements, as we’ll see.

Cut and paste: works as expected (mostly). Drag mouse over “I hope you like it here” and select Edit > Cut (or CTRL-X).

Difference between Cut and Copy. Cut removes original item, copy leaves it there.

Position cursor after “still learning” and select Edit > Paste (or CTRL-V).

Pastes copy.

Fix spacing where line was. . .

Paragraph formatting applies to an entire paragraph (until it sees a RETURN); Character formatting applies to individual characters.

Paragraph formatting: indents, spacing, etc.

Character formatting: font, size, color, etc.

Click cursor before “Welcome.” Try out three alignments: left, center, right. These are to the upper left corner in the properties inspector window. Also available under Text > Align.

Note that with right alignment, text follows right edge of window (re-size window to see). . . this, too, can be a problem.

Leave first line centered.

Try with second line and you’ll see that is treating two separate elements as one. This illustrates problem of using line break instead of a hard paragraph return.

Leave second line left justified for now.

On second line, try indent/dedent. Note that indent is “closing in” on both sides. (These icons are located under alignment icons in properties inspector; also available under Text > Indent and Text > Outdent).

For now, do three indents of second line.

HTML STYLES

These are defined styles in HTML that the browser interprets. Most notable are heading 1-6.

Position cursor anywhere in “Welcome” line and select Heading 1 from under Format: in properties inspector. (Also under Text > Paragraph Format).

They apply to entire paragraphs, but only designate (in most cases) character formatting. Note that it doesn’t change paragraph designation (centered). Note that if you try to highlight one word and change only its style, the style of entire paragraph is changed.

Separate out ending text clump into two separate lines.

Make second line Heading 4 and third line Heading 5.

Explain the Preformatted style. Produces fixed-width (non-proportional) text. Demonstrate by typing “This is preformatted text.” Hit return.

Copy and past line below. . . add word “not” to second one.

Format first line as Preformatted. See difference.

In fixed-width text, every letter gets the same amount of space, regardless of its width. (Often used for indicating computer code, etc.)

To remove a pre-formatted style, just select None under Format.

Let’s try bulleted lists/numbering.

Type in “Why I like this class” (return)

“The teacher is great” (return)

“The topic is cool” (return)

“The teacher is great” (return)

Highlight last three lines and click Numbered List icon in properties inspector—it’s right next to Outdent icon.

With text highlighted, turn it off by clicking it again.

Do same thing with bulleted list.

Leave it a bulleted list.

To change font characteristics, highlight text with mouse.

Dreamweaver has multiple-font formats. Says something like “Arial/Helvetica/san serif” and will adapt to the font installed on your computer. Also, “Times New Roman/Times/serif.”

Highlight “embodiment” in second line. Change font to Arial/Helvetica/sans serif and make it italic.

Changing Color?

About “Web Safe Palette”

Colors that will render properly on most any computer over the web

216 web-safe colors (Dreamweaver says 212)

Dreamweaver lets you choose from among them.

Let’s say we want to change the color of “Embodiment” to red.

Click color box in Properties Inspector (it’s just to the right of the “Size” box).

Brings up color selector. As you can see there are different color blocks and as you move “eyedropper” over them they select. Number at bottom is called “Hexadecimal” number—begins with #.

There are more than 212 blocks, but only 212 colors.

Select Red #FF0000.

Don’t use color palette icon (at far right)—this chooses non web-safe colors.

Save document as texttest.htm

Select File > Preview in Browser >

(Not much different from regular window at this point).

Check HTML coding by clicking HTML icon (brackets) in lower right corner of window.

Other stuff in Text menu:

Font: allows you to select series of fonts

Style: Bold, italic, underline

HTML styles: pre-defined HTML styles—will talk about momentarily

Size: choose among seven HTML designated sizes.

Text > Check Spelling: spell checker.

Making your own styles

Allows you to create one or more specific looks for text, then apply them to text easily. Useful for consistency of design (“Headlines always look like this.”

HTML styles v. CSS styles. CSS (Cascading Style Sheet) styles are newer and more versatile, but don’t work on all browsers (3.0 versions, for example).

We will talk about CSS styles if we get time, but HTML styles will probably be sufficient for your projects. However, there are three important advantages to CSS styles:

1.  Can have more flexibility in designating text attributes

2.  Can define an external “style sheet” that sets text definitions for a number of documents

3.  Auto updating: if you change a style, all text based on that style will automatically change

But. . . we’ll get to that. For now, HTML styles.

To define a new HTML style, go to Text > HTML Styles > New Style.

Give it a name. . .let’s say Headline.

Can choose whether it will be a selection (character) style, or both selection and paragraph. Let’s choose Paragraph.

Can also choose whether to add to a current (existing) style or clear existing style. Choose clear existing style.

Chose Arial font. . . Blue color. . .Size 6 . . . Style Bold. . . Align center.

Type a line of text. . .”U.S. Troops Move In.” Then select Window > HTML Styles. Click on Headline. Should apply our designated style to the text.

Save document and exit Dreamweaver.