Dreamweaver 8 Notes -Section 2

Inserting & Formatting Text

Adding text to a document

There are a number of ways to add text to a Dreamweaver document. You can type text directly in the Dreamweaver document window, or you can cut and paste or import text from other documents.

To add text to your document, do one of the following:

• Type text directly into the Document window.
• Copy text from another application, switch to Dreamweaver, position the insertion point in the Design view of the Document window, and choose Edit - Paste. Dreamweaver doesn't preserve text formatting applied in the other application, but it does preserve line breaks.

Adding space between characters

HTML only allows for one space between characters; to add additional space in a document you must insert a non-breaking space.

You can set a preference to automatically add non-breaking spaces in a document. To set this preference, choose Edit - Preferences and in the General category make sure Allow Multiple Consecutive Spaces is checked.

To insert a non-breaking space, do one of the following:

• In the Insert bar, select Character, then click the Insert Non-breaking Space icon.
• Choose Insert - Special Characters - Non-Breaking Space.
• Press Control+Shift+Spacebar.

Adding paragraph spacing

Dreamweaver works similarly to many word processing application: you press Enter to create a new paragraph. Web browsers automatically insert a blank double line of space between paragraphs. You can add a single line of space between paragraphs by inserting a line break or soft return.

To add a paragraph return:

• Press Enter.

To add a line break, do one of the following:

• Press Shift+Enter.
• In the Insert bar, select Character, then click the Line Break icon.
• Choose Insert - Special Characters - Line Break.

Setting and changing fonts and styles

Use options in the Property inspector or the Text menu to set or change font characteristics for selected text. You can set the font type, style (such as bold or italic), and size.

When you use the Property inspector to apply bold or italic style, Dreamweaver automatically applies the <strong> or <em> tag, respectively.

HTML font sizes are relative, not specific, point sizes. Users set the point size of the default font for their browsers; this is the font size that they will see when you select Default or 3 in the Property inspector or Text - Size submenu. Sizes 1 and 2 will appear smaller than the default font size; sizes 4 through 7 will appear larger.

To set or change font characteristics:

1. Select the text. If no text is selected, the change applies to subsequent text you type.
2. Choose from the following options:
   • To change the font, choose a font combination from the Property inspector or from the Text - Font submenu.
   • Choose Default to remove previously applied fonts; Default applies the default font for the selected text (either the browser default font or the font assigned to that tag in the CSS style sheet).
   • To change the font style, click Bold or Italic in the Property inspector, or choose a font style (Bold, Italic, Underline, and so on) from the Text - Style submenu.
   • To change the font size, choose a size (1 through 7) from the Property inspector or from the Text - Size submenu.
   • To increase or decrease the size of selected text, choose a relative size (+ or -1 to + 4 or -3) from the Property inspector or from either the Text - Size Change submenu.

     Note: These numbers indicate a relative difference from the basefont size. The default basefont value is 3. Thus, a +4 value results in a font size of 3 + 4, or 7. The maximum sum for your font size values is 7. If you try to set them higher, they display as 7. Dreamweaver does not display the basefont tag (which goes in the head section), although the font size should display properly in a browser. To test this, compare text set at 3 and text set at +3

Formatting paragraphs

Use the Format pop-up menu in the Property inspector or the Text - Paragraph Format submenu to apply the standard paragraph and heading tags.

When you apply a heading tag to a paragraph, Dreamweaver automatically adds the next line of text as a standard paragraph. To change this setting, choose Edit - Preferences, then in the General category, under Editing Options make sure Switch to Plain Paragraph after Heading is unchecked.

To apply a paragraph or heading tag:

1. Place the insertion point in the paragraph, or select some of the text in the paragraph.
2. Using the Text - Paragraph Format submenu or the Format pop-up menu in the Property inspector, choose an option:
   • Choose a paragraph format (for example, Heading 1, Heading 2, Preformatted Text, and so on). The HTML tag associated with the selected style (for example, h1 for Heading 1, h2 for Heading 2, pre for Preformatted text, and so on) is applied to the entire paragraph.
   • Choose None to remove a paragraph format.

Aligning text

You align text on the page using the Property inspector or the Text - Align submenu. You can center any element on a page using the Text - Align - Center command.

To align text:

1. Select the text you want to align or simply insert the pointer at the beginning of the text.
2. Click an alignment option (Left, Right, or Center) in the Property inspector, or choose Text > Align and choose an alignment command.

Note: You can align and center complete blocks of text; you cannot align or center part of a heading or part of a paragraph.

Indenting text

Using the Indent command applies the blockquote HTML tag to a paragraph of text, indenting text on both sides of the page.

To indent text and remove indentation:

1. Place the insertion point in the paragraph you want to indent.
2. Click the Indent or Outdent button in the Property inspector, choose Text - Indent or Outdent, or choose List - Indent or Outdent from the context menu.

Note: You can apply multiple indents to a paragraph. Each time you choose this command the text indents further from both sides of the document.

Changing the text colour

You can change the color of selected text so that the new color overrides the text color set in Page Properties. (If no text color has been set in Page Properties, the default text color is black.)

To change the color of text:

1. Select the text.
2. Choose from the following options:
   • Choose a color from the palette of browser-safe colors by clicking the color picker in the Property inspector. Choose Text - Color. The system color picker dialog box appears. Select a color and click OK.
   • Enter the color name or hexadecimal number directly in the Property inspector field.
   • To define the default text color, use the Modify - Page Properties command.

Back to Top

Creating bulleted and numbered lists

You can create numbered (ordered) lists, bulleted (unordered) lists, and definition lists from existing text or from new text as you type in the Document window. Definition lists do not use leading characters like bullet points or numbers and are often used in glossaries or descriptions. Lists can also be nested. Nested lists are lists that contain other lists. For example, you might want an ordered or bulleted.

To create a new list:

1. In the Dreamweaver document, place the insertion point where you want to add a list, then do one of the following:
   • Click either the Bulleted or Numbered List button in the Property inspector.
   • Choose Text - List and select the type of list desired-Unordered (bulleted) List, Ordered (numbered) List, or Definition List. The leading character for the specified list item appears in the document window.
2. Type the list item text, then press Enter to create another list item.
3. To complete the list, press Enter twice.

To create a list using existing text:

1. Select a series of paragraphs to make into a list. Click the Bulleted or Numbered List button in the Property inspector, or choose Text > List and select the type of list desired-Unordered List, Ordered List, or Definition List.

To create a nested list:

1. Select the list items you want to nest.
2. Click the Indent button in the Property inspector, or choose Text - Indent. Dreamweaver indents the text and creates a separate list with the original list's HTML attributes.
3. Apply a new list type or style to the indented text by following the same procedure used above.

Inserting special characters

Certain special characters are represented in HTML by a name or a number, referred to as an entity. HTML includes entity names for characters such as the copyright symbol (©) the ampersand (&), and the registered-trademark symbol (®). Each entity has both a name (such as —) and a numeric equivalent (such as —).

Note: HTML uses the angle brackets <> in its code, but you may need to express the special characters for greater than or less than without Dreamweaver interpreting them as code. In this case, use > for greater than (>) and &it; for less than (<).

You can insert several special characters (in the form of HTML entities) by choosing the Characters category in the Insert bar. To insert a special character into a document:

In the Document window, place the insertion point where you want to insert a special character and do one of the following.

• Choose the name of the character from the Insert - Characters submenu.
• In the Insert bar, choose the Characters category and select the character you want.

Note: There are many other special characters available; to select one of them, choose Insert - Characters - More or select the Insert More Characters icon in the Insert bar, select a character, then click OK. Back to Top

HyperLinks

To 'link' to another document in the same or different site, or instantly jump to a specific location in the current document, use hypertext links.

Text links on a page are usually displayed in a color and are underlined.

Graphic links may have a colored border around them.

An HTML link consists of two parts:

• There is the text or the graphic that serves as the source or trigger for the link. The link is activated when the text or image is clicked.
  
  
• The path to the target file or an URL if the link target is a Web page.

To create a link to a document within your site:

• Open a Dreamweaver MX document and select a word, sentence, or even a paragraph to use as the link.
  
  
• In the Property inspector, click the Folder icon next to the Link box then Locate the file that is the target of the link in the Select File dialog box
  
  
  • or click the point to file icon and hold the mouse down and drag it to the file you want to link to in the files panel.
    
    
• With both methods the name of the file you selected will now appear in the Link box.

Linking to documents ont with your web site

• highlight the text or image which will act as the hyperlink and then in the link box in the property's inspector type in the full path to the page eg http://www.google.com (you must incllude the http://)

Using Images as Links

Using a graphic as the source of a link is not much different than using text.

• In the Document window, select the graphic to be used.
• If linking to a local file, follow the same steps as when creating a text link.
• If linking to a Web page, type the full URL of the Web page into the Link box.

Targets

Normally, when you activate a link, the target page opens in the same browser window you are currently in, overwriting your page with the link page.

• You can force the link to open in a new window so that the user still has full access to your site.
• You use the Target pop-up menu in the Property inspector to set options that determine how the link page opens.
• Be aware that when you do open link pages in new windows, it requires more memory usage on the user's computer for every window you open.

  The settings you can select from the Target pop-up menu for a link page are:

• _blank - Loads the link page in a new window.
• _parent - Loads the link page in the parent frameset or window of the page that is the source of the link.
• _self - Loads the link page in the same frame or window as the source link.
• _top - Loads the link page in the full browser window, removing all frames.

Targets other than _blank only work when your page has frames defined.

Hotspots

You can define hotspots in an image to act as links.

For example, you might have an image that is the map of a state, with several cities labeled on the image. You could create a hotspot for each label so the user could view additional information about each city by clicking the city name.

An image that has hotspots defined in it is called an image map.

• One image map may contain links to many different Web pages, to some other graphic, or to some new location in the current document.
• You can create rectangular, circular or oval, or polygon hotspots using tools in the Property inspector's Map text box.
• Click the Rectangular Hotspot tool in the Property inspector Map text box.
• Drag a rectangular area around the area of the image to be defined as the hotspot.
• A translucent blue-green area with sizing handles will appear where you dragged.
• Select the Pointer Hotspot tool and resize the box, or drag it to cover the exact area you want defined.
• With the rectangle still selected, enter a description in the Alt text box (optional).
• Click and drag the point to file icon next to the Link text box and drag it to the file that is the target of the link.
• Repeat this procedure for every hotspot to be defined for the current image map. You can mix shapes without problems, i.e. one rectangle hotspot, one circular, one polygon, etc.

Anchors

In addition to linking to external documents or Web pages, you may want to link to some spot in the current page.

• To do that, you must create a jump-to point in the document, which is called a named anchor.
• After defining the named anchor, when you select the text or image as the source for the link, you then type into the link box in the properties inspector #anchorname

To create a named anchor:

• Position the insertion point in front of the text or graphic that you want to jump to.
• Click Named Anchor on the Common tab of the Insert bar to open the Named Anchor dialog box.
• Enter a name for the location and click OK.
• Don't use spaces or special characters in the name.
• Named anchors are case sensitive in many browsers.
• Select the text or image in the document that is the source of the link. In the Link text box of the Property inspector, enter the name you assigned to the anchor preceded by a pound or number sign (#), such as #anchor1.
• When you click on the source of the link, you will jump to the named anchor elsewhere in the document.

Back to Top