Adding Text and Formatting

Formatting Text

Formatting text in Dreamweaver is the same as using a standard word processor, such as Microsoft Word. You can:
o set formatting styles (such as Paragraphs, Heading 1, Heading 2, Heading 3) for a block of text,
o apply text styles such as bold, and italic.

Other formatting options such as changing the font, size, color, and alignment of a selected text should be done in cascading style sheets , instead of the Property Inspector in Adobe Dreamweaver.

Text is entered into Dreamweaver by either typing directly onto the Document Window or inserting the text directly into the code using the Code view. Once this text is in the Document Window you can format it very similar to most word processors. Pressing Enter (Windows) or Return (Macintosh) create a new paragraph. You can start a new paragraph by inserting a line break. The following are some of the most important formatting tools found in Dreamweaver.

Text Format in the Property Inspector

Dreamweaver contains three basic paragraph styles: paragraph, heading, and preformatting. They are applied using the Format drop-down list in the Property Inspector panel.

o Paragraph - This format ignores white space, so extra spaces within the paragraph appear as only one space when viewed in a browser. Paragraph format uses the HTML code <p>…</p>, which indicates the text will automatically wrap.

o Heading - Headings are used to identify different sections of content on a page. They range from largest and boldest <h1> to smallest <h6>. Headings are applied to the entire paragraph, so you can't mix heading styles within the same line of text.

o Preformatted - The preformatted format enables you to space text exactly as you want, including using white space and line breaks. Text doesn't automatically word wrap, so you must press Enter to end a line.

Adding a Heading

1. Place your cursor in the Document Window in the desired location.

2. Select from the Property Inspector under Format, Heading 1

3. Type the desired text for your Heading 1. In this lesson type a informative heading like "The Berlin Wall".

Adding Paragraphs

1. Press Enter (Windows) or Return (Macintosh) after the Heading 1 or previous text.

2. Pressing enter designates any following text as a plain paragraph until formatted differently. Type any desired text, for this lesson you can type an introductory paragraph about Berlin like the one below.

The Berlin Wall divided East and West Berlin for 28 years, from the day construction that began on August 13, 1961 until it was dismantled in 1989.

Note: Dreamweaver always assumes that any inserted text is one complete paragraph. Unless you apply a proper format, then the text found within the <p> …</p> tag pair will appear as one complete paragraph.

Adding Line Breaks

To add a Line Break, do one of the following:
The use of white space is important in the design and readability of any website. In Dreamweaver, when you press Return (Enter) key, a new <p> is inserted. Follow any of these simple steps in order to insert a line break:

o Press Shift + Enter (Windows) or Shift + Return (Macintosh).

o In the Text category of the Insert bar, select Character and click the Line Break icon.

o Select Insert > HTML > Special Characters > Line Break.

Note: Dreamweaver will also assign a new HTML paragraph for non-breaking space "&nbsp;" between the opening and end tags. If you type on this new line, the non-breaking space is replaced with your content. However, if you leave it blank, that non-breaking space will remain there. Because the tag is not empty, web browsers automatically interpret this paragraph as a blank line.

Bolding Text - Strong Tag

1. In the Document Window select the text that you would like to bold.

2. In the Property toolbar, click on the bold icon. Inside the Document Window in Design View, you will notice that the highlighted text is now bolded.

Tag Selector

Tag Selector - Shows selected HTML tags as located in the Document Window. You can also quickly select any HTML tag by simply clicking on any of the tag symbols. This is best when web pages become more dynamic and elaborate; you can keep track of all of your HTML tags.

After the text has been bolded, and with the text is still highlighted, located on the Tag Selector, below the code, you will see the HTML tag of <strong> indicating that the highlighted text is strong.

Italics - Emphasis Tag

Similar to bolding text, it's simple to format text as italics.

1. Select the text that you would like to italicize.

2. In the Property toolbar, click on the italics icon. Inside the Document Window in Design View, you will notice that the highlighted text has been italicized.

Special Characters

Adding Special Characters
There are times when your text may contain special characters and diacritical marks. Dreamweaver provides most of these special characters such as the copyright symbol(©), trademark(™), registered(®), or an Em dash(-). The follow are simple steps to add these special characters to your text:

1. Position your cursor where you want these special characters on your Document Window.

2.Click on the menu bar Insert -> HTML, then Special Characters, You will be presented with a list of special characters and diacritical marks to insert in your text.

Inserting Date & Time Stamps

Most Web pages include date/time stamps, Dreamweaver can you help you include both of these objects. Here are a few steps on how to insert these onto your Web pages:

1. Place your cursor into the area where you would like to have your date stamp shown. Usually this is located at the bottom of your Web site.

2. Type “Updated on:” or “Created on:”

3. In the Common Group of the Insert Panel, click the Insert Date button.

4. An Insert Date dialog box will appear. In this dialog box, choose the format Dreamweaver will use to display the date and time. Check the option for "Update automatically on save". This means that each time you edit this file and save, Dreamweaver will automatically update this date and time.

5. Click OK.