Gray S School of Art

Gray’s School of Art

Dreamweaver MX

The Property inspector lets you examine and edit properties for the currently selected page element, which means that information it displays changes depending on what you click on e.g. text or an inserted object.

You can select page elements in either Design view orCode view.

To show or hide the Property inspector, choose Window > Properties. The Property inspector can be open at half height, displaying two rows of properties, or at full height, displaying four rows. You can also fully collapse the Property inspector while leaving it in the workspace.

Most changes you make to properties are immediately applied in the Document window. For some properties, however, changes are not applied until you click outside the property-editing text fields, press Enter (Windows) or Return (Macintosh), or press Tab to switch to another property.

The contents of the Property inspector vary depending on the element selected.For information on specific properties, select an element in the Document window and then click the Help icon in the upper right corner of theProperty inspector.

The Property inspector initially displays most of the properties ofthe selected element. Click the expander arrow in the lower right corner of theProperty inspector to collapse the Property inspector to show only the most commonly used properties.

Tip: In a few cases, certain obscure properties may not appear even in the expanded Property inspector; in these cases, use Code view or the Code inspector to code these properties by hand, or select the tag in Code view and choose Modify> Edit Tag.

Text properties

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 choose different fonts to work with and adjust size and colour. For body text, it is best to work with fonts most people have installed in their computer eg Arial, Verdana etc.

You can also 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.

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

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.

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.

Table properties

When a table is selected, the Property inspector lets you view and change table properties.

Table Id is the name of the Table.

Rows and Cols are the number of rows and columns in the table.

W and H are the width and height of the table in pixels, or as a percentage of the browser window's width.

CellPad is the number of pixels between a cell's content and the cell boundaries.

CellSpace is the number of pixels between adjacent table cells.

When you don't explicitly assign values for cell spacing and cell padding, most browsers display the table as if cell padding were set to 1 and cell spacing were set to 2. To ensure that browsers display the table with no padding or spacing, set Cell Padding and Cell Spacing to 0.

Align determines where the table appears, relative to other elements in the same paragraph such as text or images. Left aligns the table to the left of other elements (so that text in the same paragraph wraps around the table to the right); Right aligns the table to the right of other elements (with text wrapping around it to the left); and Center centers the table (with text appearing above and/or below the table). Default indicates that the browser should use its default alignment.

When alignment is set to Default, other content is not displayed next to the table. To display a table next to other content, use Left or Right alignment.

Border specifies the width, in pixels, of the table's borders.

When you don't explicitly assign a value for border, most browsers display the table as if the border were set to 1. To ensure that browsers display the table with no border, set Border to 0. To viewcell and table boundaries when the border is set to 0, choose View> VisualAids> TableBorders.

Clear Column Widths and Clear Row Heights buttons delete all explicitly specified row height or column width values from the table.

Convert Table Widths to Pixels and Convert Table Heights to Pixels buttons set the width or height of each column in the table to its current width in pixels (also sets the width of the whole table to its current width in pixels).

Convert Table Widths to Percent and Convert Table Heights to Percent buttons set the width or height of each column in the table to its current width expressed as a percentage of the Document window's width (also sets the width of the whole table to its current width as a percentage of the Document window's width).

Bg Color is the table's background color.

Brdr Color is the color for the table's borders.

Bg Image is the table's background image.

Layer properties

Layer ID allows you to specify a name to identify the layer in the Layers panel and in JavaScript code. Enter a name. Use only standard alphanumeric characters; do not use special characters such as spaces, hyphens, slashes, or periods. Every layer must have its own unique name.

L and T (left and top) specify the position of the layer's top left corner relative to the top left corner of the page, or of the parent layer if nested.

W and H specify the width and height of the layer.

If the content of the layer exceeds the specified size, the bottom edge of the layer (as it appears in the Design view in Dreamweaver) stretches to accommodate the content. (The bottom edge doesn't stretch when the layer appears in a browser, unless the Overflow property is set to Visible.)

The default unit for position and size is pixels (px). You can instead specify the following units: pc (picas), pt (points), in (inches), mm (millimeters), cm (centimeters), or % (percentage of the parent layer's corresponding value). The abbreviations must follow the value without a space: for example, 3mm indicates 3 millimeters.

Z-Index determines the z-index, or stacking order, of the layer. In a browser, higher-numbered layers appear in front of lower-numbered layers. Values can be positive or negative. It's easier to change the stacking order of layers using the Layers panel than to enter specific z-index values.

Vis specifies whether the layer is initially visible or not. Choose from the following options:

Default does not specify a visibility property. When no visibility is specified, most browsers default to Inherit.

Inherit uses the visibility property of the layer's parent.

Visible displays the layer contents, regardless of the parent's value.

Hidden hides the layer contents, regardless of the parent's value. Note that hidden layers created with ilayer still take

up the same space as if they were visible.

Use a scripting language, such as JavaScript, to control the visibility property and dynamically display layer contents.

Bg Image specifies a background image for the layer. Click the folder icon to browse to and select an image file.

Bg Color specifies a background color for the layer. Leave this option blank to specify a transparent background.

Tag specifies the HTML tag used to define the layer.

Overflow (div and span only) controls how layers appear in a browser when the content exceeds the layer's specified size. Visible indicates that the extra content appears in the layer; effectively, the layer stretches to accommodate it. Hidden specifies that extra content is not displayed in the browser. Scroll specifies that the browser should add scroll bars to the layer whether they're needed or not. Auto causes the browser to display scroll bars for the layer only when needed (that is, when the layer's contents exceed itsboundaries.)

(The overflow option has uneven support across browsers.)

Use Left, Top or PageX, PageY (layer and ilayer only) lets you specify whether to position a layer in relation to its parent or to the page. The Left, Top option places the layer relative to the top left corner of its parent. The PageX, PageY option places the layer in an absolute location relative to the top left corner of the page, regardless of the position of the parent layer.

Clip defines the visible area of a layer. Specify left, top, right, and bottom coordinates to define a rectangle in the coordinate space of the layer (counting from the top left corner of the layer). The layer is "clipped" so that only the specified rectangle is visible. For example, to make a layer's contents invisible except for a 50-pixel-wide, 75-pixel-high visible rectangle at the top left corner of the layer, set L to 0, T to 0, R to 50, and B to 75.

Src (layer and ilayer only) lets you display another HTML document within the layer. Click the folder icon to browse to and select the document. Note that Dreamweaver does not display the other document in the layer.

If you have entered a value in a text box, press Tab or Enter (Windows) or Return (Macintosh) to apply the value.

Image properties

Use the text field below the thumbnail image to set a name so you can refer to the image when using a Dreamweaver

behavior (such as Swap Image) or when using a scripting language such as JavaScript or VBScript.

W and H are the width and height of the image, in pixels. Dreamweaver automatically updates these fields with the image's original dimensions when you insert an image in a page. You can specify the image size in the following units: pc (picas), pt (points), in (inches), mm (millimeters), cm(centimeters), and combinations, such as 2in+5mm; Dreamweaver converts the values to pixels in the HTML source code.

If you set W and H values that do not correspond to the actual width and height of the image, the image may not display properly in a browser. (To restore the original values, click the W and H field labels.)

You can change these values to scale the display size of this instance of the image, but this does not reduce download time, because the browser downloads all image data before scaling the image. To reduce download time and to ensure that all instances of an image appear at the same size, use an image-editing application to scale images.

Src specifies the source file for the image. Click the folder icon to browse to the source file, or type the path.

Link specifies a hyperlink for the image. Drag the Point-to-File icon to a file in theSite panel, click the folder icon to browse to a document on your site, or manually type the URL. For information about creating links.

Align aligns an image and text on the same line.

Alt specifies alternative text that appears in place of the image for text-only browsers or for browsers that have been set to download images manually. For visually impaired users who use speech synthesizers with text-only browsers, the text is spoken out loud. In some browsers, this text also appears when the pointer is over the image.

Map name and the Hotspot tools allow you to label and create a client-side image map.

V Space and H Space add space, in pixels, along the sides of theimage. V Space adds space along the top and bottom of an image. H Space adds space along the left and right of an image.

Target specifies the frame or window in which the linked page should load. (This option is not available when the image isn't linked to another file.) The names of all the frames in the current frameset appear in the Target list. You can also choose from the following reserved target names:

_blank loads the linked file into a new, unnamed browser window.

_parent loads the linked file into 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 into the same frame or window as the link. This target is the default, so you usually don't need to specify it.

_top loads the linked file into the full browser window, thereby removing allframes.

Low Src specifies the image that should load before the main image. Many designers use a 2-bit (black and white) version of the main image because it loads quickly and gives visitors an idea of what they're waiting to see.

Border is the width, in pixels, of the image's border. The default is no border.

Edit launches the image editor you specified in External Editors preferences and opens the selected image. For information about setting an external image editor.

Reset Size resets the W and H values to the original size of the image.

Placeholder properties

Use the Property inspector to set a name, width, height, image source, alternate text description, alignment and color for a placeholder image.

W and H set the width and height of the image placeholder, in pixels.

Do not leave a space between the value and the unit type. For example, to set width or height to two inches, enter 2in.

Src specifies the source file for the image. For a placeholder image this text box is empty. Click the Browse button to select a replacement image for the placeholder graphic.

Link specifies a hyperlink for the image placeholder. Drag the Point-to-File icon to a file in theSite panel, click the folder icon to browse to a document on your site, or manually type the URL.

Create lets you launch Fireworks MX to create a replacement image. The Create button is disabled unless Fireworks MX is also installed on your computer

Reset Size resets the W and H values to the original size of the image.

Color lets you specify a color for the image placeholder.

Page 1 of 6