Macromedia DreamWeaver MX Help Files and Tutorials

JNCNET Home | Help Files | Tutorials | Adding Contet

Adding Content:

Inserting an image:

When you insert an image into a Dreamweaver document, Dreamweaver automatically generates a reference to the image file in the HTML source code. To ensure that this reference is correct, the image file must be in the current site. If it is not in the current site, Dreamweaver asks whether you want to copy the file into the site.

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.

You can also add images and text as dynamic content.

To insert an image:

Place the insertion point where you want the image to appear in the Document window, then do one of the following:

In the Common category of the Insert bar, click the Image icon.
In the Common category of the Insert bar, drag the Image icon to the Document window (or to the Code view window if you are working in the code).
Choose Insert > Image.
Drag an image from the Assets panel (Window > Assets) to the desired location in the Document window.
Drag an image from the Site panel to the desired location in the Document window.
Drag an image from the Desktop to the desired location in the Document window.

In the dialog box that appears, do one of the following:

Choose File System to choose a graphic file.
Choose Data Source to choose a dynamic image source.
Browse to choose the image or content source you want to insert.

If you are working in an unsaved document, Dreamweaver generates a file:// reference to the image file. When you save the document anywhere in the site, Dreamweaver converts the reference to a document-relative path.

In the Property inspector (Window > Properties), set properties for the image.

Adding Text to a Web Page:

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.

[back to top]

Setting Text Property Options:

The text Property inspector displays the current formatting attributes of the text that is selected in the document. You can change the formatting by setting new options. The style is immediately applied to the text.

You can use the text Property inspector to apply HTML formatting or Cascading Style Sheet (CSS) formatting. HTML formatting lets you select text formatting options such as font, size, bold, and italic, while CSS formatting lets you apply a CSS class style to the selected text.

When you use the Property inspector to apply bold or italic style, Dreamweaver automatically applies the or tag, respectively. If you are designing pages for viewers with 3.0 or older version browsers, you should change this preference in the General category of the Preferences dialog box (Edit > Preferences).

To switch text formatting modes:

In the Property inspector, click the Toggle CSS/HTML Mode button.

To set CSS formatting options:

Open the Property inspector (Window > Properties), if it isn’t already open.
Select the text you want to format.
In the Property inspector, if CSS Mode isn’t already selected, click the Toggle CSS/HTML Mode button to switch to CSS Mode.
Set the CSS options you want to apply to the selected text.

Format sets the paragraph style of the selected text. Paragraph applies the default format for a tag, Heading 1 adds an H1 tag, and so on.

CSS Style displays the class style that is currently applied to the selected text. If no styles have been applied to the selection, the pop-up menu shows No CSS Style. If multiple styles have been applied to the selection, the pop-up menu is blank.

Use the CSS Style pop-up menu to do any of the following:

Select the class style you want to apply to the selection.
Select No CSS Style to remove the currently applied CSS style.
Select New CSS Style to open the New CSS Style dialog box to create a new style that will automatically be applied to the selected text. If no text is selected, the style is applied to the paragraph or block-level tag that contains the insertion point.
Select Edit CSS Style to open the Edit Style Sheet dialog box to edit a CSS style. For more information, see Editing a CSS style.
Select Attach Style Sheet to attach a CSS style sheet to your document. For more information, see Creating and linking to an external CSS style sheet.
Bold applies either or to the selected text according to the style preference set in the General category of the Preferences dialog box.
Italic applies either or to the selected text according to the style preference set in the General category of the Preferences dialog box.

To set HTML formatting options:

Open the Property inspector (Window > Properties), if it isn’t already open.
Select the text you want to format
In the Property inspector, if HTML Mode isn’t already selected, click the Toggle CSS/HTML Mode button to switch to HTML Mode.
Set the options you want to apply to the selected text.

Format sets the paragraph style of the selected text. Paragraph applies the default format for a tag, Heading 1 adds an H1 tag, and so on.

Font Combination applies the selected font combination to the text. Use the pop-up menu to choose the font combination you want to apply, or choose Edit Font List to create or edit a font combination.

Size applies either a specific font size (1 through 7) or a font size (+ or –1 through + or –7) relative to the basefont size (the default is 3).

Text Color displays the text in the selected color. Select a web-safe color by clicking the color box, or enter a hexadecimal value (for example, #FF0000) in the adjacent text field.

Bold applies either  or  to the selected text according to the style preference set in the General category of the Preferences dialog box.

Italic applies either  or  to the selected text according to the style preference set in the General category of the Preferences dialog box.

Left, Center, and Right Align apply the respective alignment.

Link lets you create a hypertext link of the selected text.

Click the folder icon to browse to a file in your site; type the URL; drag the Point-to-File icon to a file in the Site panel; or drag a file from the Site panel into the box.

Target lets you specify the frame or window in which the linked document will load:

_blank loads the linked file in a new, unnamed browser window.
_parent loads the linked file in the parent frameset or window of the frame that contains the link. If the frame containing the link is not nested, the linked file loads into the full browser window.
_self loads the linked file in the same frame or window as the link. This target is implied, so you generally don’t need to specify it.
_top loads the linked file in the full browser window, thereby removing all frames.

Unordered List creates a bulleted list of the selected text. If no text is selected, a new bulleted list is started.

Ordered List creates a numbered list of the selected text. If no text is selected, a new numbered list is started.

List Item opens the List Properties dialog box. See Setting List property options.

Indent and Outdent indent or remove indentation from the selected text by applying or removing the blockquote tag. In a list, indenting creates a nested list and removing the indentation unnests the list.

[back to top]

Importing Microsoft Word and Excel content:

You can import tabular data into your document by first saving the files (such as Microsoft Excel files or a database files) as delimited text files. For additional information on importing and formatting table data, see Importing tabular data in the Inserting and Formatting Text.

You can also import text from Microsoft Word HTML documents. For information on importing Word HTML documents, see Opening existing documents.

To import tabular data:

Choose File > Import > Import Tabular Data, or choose Insert > Tabular Data
The Import Table dialog box appears. Browse for the file you want or enter its name in the text box.
Select the delimiter used when the file was saved as delimited text. Your options are Tab, Comma, Semicolon, Colon, and Other. If you select Other, a blank field appears next to the option. Enter the character that was used as a delimiter.
Use the remaining options to format or define the table into which the data will be imported.
Click OK when you’re done.

[back to top]

Controlling Document Structure

Planning and organizing your site carefully from the start can save you time later on. Organizing your site includes not only determining where the files will go, but also examining site requirements, audience profiles, and site goals. Additionally, you should consider technical requirements such as user access, as well as browser, plug-in, and download restrictions.

Once you’ve organized your information and determined a structure, you can begin creating your site.

Determine what strategy to employ and what issues to consider as you plan your site.
Use the Dreamweaver Site panel to set up your site’s organizational structure. In the Site panel you can easily add, delete, and rename files and folders to change the organization as needed.
You can begin to create simple pages which you’ll later turn into more complex designs. Create new blank pages or pages based on predesigned page designs in the New Document dialog box.

[back to top]

Creating Headings, Paragraphs and Lists:

Viewing and editing head content:

HTML files are made up of two main sections: the head section and the body section. The body section is the main part of the document, the visible part containing text and images and so on. The head section is invisible, except for the document title, which appears in window title bars in browsers and in Dreamweaver. Give a title to every page you create.

The head section also contains other important information, including the document type, the language encoding, JavaScript and VBScript functions and variables, keywords and content indicators for search engines, and style definitions. You don’t need to provide all of these elements for every page; you might, for example, provide keywords and content indicators for your home page only. You can view the elements in the head section using the View menu, the Document window’s Code view, or the Code inspector.

To view elements in the head section of a document:

Choose View > Head Content. For each element of the head content, a marker appears at the top of the Document window in Design view.

Note: If your Document window is set to show only Code view, View > Head Content is dimmed.

To insert an element into the head section of a document:

Do one of the following:

In the Insert bar’s Head category, select click one of the object buttons.
Choose an item from the Insert > Head Tags submenu.
Enter options for the element in the dialog box that appears, or in the Property inspector.

To edit an element in the head section of a document:

Choose View > Head Content
Click one of the icons in the head section to select it.
Set or modify the properties of the element in the Property inspector.

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 or Dreamweaver > Preferences (Mac OS X),
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:

Place the insertion point in the paragraph, or select some of the text in the paragraph.
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.

To define a list style:

1. Open the CSS Styles panel (Shift + F11), if it isn’t already open.

2. Open the CSS Style Definition dialog box by doing one of the following:

Add a new style.
Double-click an existing style to open it for editing.

3. In the CSS Style Definition dialog box, choose List, then set the style attributes you want.

Leave any of the following attributes empty if they are not important to the style:

Type sets the appearance of bullets or numbers. Type is supported by both browsers.

Bullet Image lets you specify a custom image for bullets. Click Browse (Windows) or Choose (Macintosh) to browse to an image, or type the image’s path.

Position sets whether list item text wraps and indents (outside) or whether the text wraps to the left margin (inside).

4. When you are finished setting these options, select another CSS category on the left side of the panel to set additional style attributes, or click OK.

[back to top]

Adding Special Characters:

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 ).

Tip: 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 ⁢ for less than (<).

Unfortunately, many browsers (especially older browsers, and browsers other than Navigator and Internet Explorer) don’t properly display many of the named entities.

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:

1. In the Document window, place the insertion point where you want to insert a special character.
2. 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.

Tip: 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]

information provided by macromedia.com