jens.hatlak.de
Atari
Dreamweaver Manual		Start
Acronyms		Introduction
		Tips
Diese Seite in deutsch		Windows		WYSIWYG
		Half-static tables		Editor
		JavaScript special		Properties
				Site
				Behaviors

The Properties window

This window is the most important one of Dreamweaver: here you can set nearly all options of a tag, text, paragraph or object (for the page itself, use "Modify/Page Properties..."). Most of the settings work with selected objects (which can also be pieces of text) in any WYSIWYG window. You can also reach many of the functions using the contextual menu (right mouse button), the others using the menu bar of the WYSIWYG window. The Properties window can be reduced to the half of its normal size by clicking the small arrow at the bottom right - but often you can only set half of the parameters then. Beyond that, the Properties window changes according to where on the page you are (e.g. within a table) and what is selected (e.g. an image, comment or anchor).

In detail:

• format
• link
• size
• target
• B/I
• alignment: left/center/right
• lists: Bullet-/ordered lists
• indent and outdent
• tables: splitting, width/height; vertical/horizontal alignment; no wrap; header cell
• images
• background for text/cell (or background)/border
• horizontal rules (<hr>).

Format

Here you can choose the kind of format: None, Paragraph, Heading with degree (Heading 1-7) or Preformatted text. Besides, you can also select the kind of font used; some are pre-defined (e.g. sans-serif ones: Arial/Helvetica etc. or monospaced: Courier New/Courier etc.), but you can also define an own list or use the Default Font (client-side determined, i.e. according to the browser settings). The HTML conversion happens usign the FONT tag.

Link

In this edit field, you can define a link (href), as a rule in URL format and either locally or globally. The popup manages an internal history which can easily be scrolled through using cursor up/down.
Note: This function can only be applied to selected objects (or pieces of text) when setting a link, but not to the current cursor position! If a link already exists under the cursor position, you can delete it in the Link field by deleting the link address or change it by replacing the address by the input.
With the small crosshairs next to it, you can, for example, choose a named anchor using Drag 'n' Drop in any WYSIWYG window as target. The folder symbol next to the crosshairs serves to opening a file selector in which you can select a local object (HTML file, image etc.) or one to be defined by yourself via URL that the link point to then.

Size

Here you can simply set the font size: either relatively (± x) or absolutly (1-7). "None" thus means browser default. The HTML conversion happens usign the FONT tag.

Target

This popup allows you to define a Target for the use of frames (for the whole page, use "Insert/Head/Base"). If you're just editing an opened frameset, here are also the the frame names defined in it as targets at your disposal. Apart from that, there are the regular ones to choose:

• _blank: new window
• _parent: the condition of the display window which was current before the start of the frameset
• _self: the frame in which the edited document will be displayed later
• _top: the whole area of the current window.

Note: "_new" cannot be chosen as it basically has the same function as "_blank". But if you want, you can use it nevertheless at your own risk: Some browsers only open the first link referring to "_new" in a new window; all following ones in exactly that one (example: Netscape).

Text color

Using RGB values or the standardized color names, you can assign a text color to the current selection in this field. At this, a FONT tag is being created the value of which can also be defined using the color picker left to the edit field. Further details below: Background.

B/I

"B" and "I" just give you faster access to the "bold" and "italic" properties.
Note: This action can only be applied to selected pieces of text, too, not with the current cursor position. When deactating above a (piece of) text already emphasized using bold or italic, it work that way, too, of course.

Align

Switches between no (browser default), left, centered and right alignment formatting. If an alignment is already active, the browser default can be restored by once again clicking on exactly that one.

Help

By clicking this icon you get the online help which concentrates contextually on the current selection.

Lists

Here you can create a bullet- or ordered list. If you create another ordered list within an existing one, according to the current level, the numbering is started on the next lower level. Within bullet lists there will only be a new level (if not defined differently with other bullets).
Note: both actions apply to the whole paragraph!
If you want to quit a list, all you have to do is pressing Return twice. To stay inside the current level of the list, you should either use a <br> (Shift+Return) or edit within the source code. For lists with latin characters or alphabetcal lists, use the "List Item" button which appears if you're editing a list while not being inside a table that moment (in this case, you can reach the function via "Text/List/..."). In general, you can always use the contextual menu (right mouse button) in the WYSIWYG window ("List" and "List/Properties").

In-/Outdent

With this function, you can create an indentation or the reduction of an existing one. <blockquote> is used for creating an indentation if there's no list already in existence.
Note: If the selection or the current paragraph is a list, you'll get into the next lower level or that level will be created (if the level is the first point of a (ordered) list it might look like as if only the indentation had been expanded, but in the source code you'll see that a new level has been created, e.g. with <ol>).
Note: Without selection, this function applies to the whole paragraph!

Selection

This symbol shows you the kind of the current selection, i.e. cell, row, column or table.

Tables

One of the most comprehensive topics in pure HTML: tables and cells. You can set options individually for each cell, a group of cells or a whole table (according to selection):

• Cells (Cell/Column/Row)
  • combine or split (small icons at the left bottom)
  • horizontal/vertical alignment (Horz/Vert)
  • define width/height (W/H) (in pixels or percent)
  • do not wrap cell content (No Wrap)
  • define as header cell (Header: <th>)
  • define background image/-color and border color (Bg)
  
  
• Tables - like cells, but additionally:
  • Name (for reasons of reference)
  • determine or expand number of rows and columns (Rows/Cols)
  • CellPad(ding) (space between cell content and cell border) and -Spacing (space between the cells to each other)
  • Align(ment)
  • border width, light- and dark color variants of the border (Brdr/Light Brdr/Dark Brdr)
  • four icons at the bottom: optimize height or width; transformation percent-pixels and vice-versa
  • V/H Space: vertical and horizontal spacing at both (!) sides in pixels in pixels.

Images

Here are many options, too:

At first below the size of the current image, there is the Name which was not part of the W3C HTML standard before version 4.01, and which can be added for reasons of reference. Then follows the declaration of width and height (W/H), in pixels or percent. Behind that there's the source path of the current image (SRC) relatively to the current page. Below you can define a Link the image shall refer to (see also Link).

With the popup in the right corner you can define the Align(ment) of the image, and at this you should avoid using "absmiddle" and "absbottom" if possible as they are not part of any W3C HTML standard (!). In the field below that popup you should also specify an alternate text (Alt) so that people using a browser in which the display of images is switched off (or textual browsers like Lynx) can identify it nevertheless.

With "V/H Space" you can define the vertical or horizontal space at both (!) sides of the image in pixels to, for example, better format small icons in the text. "Target" allows you to set a link target for a frameset (see also Target), "Low Src" to set the path of an image for lower resolutions (e.g. 16 colors) and "Brdr" to determine the width of the link border.

The "Refresh" button allows you to reset width and height od the image to the actual size of the referenced image, "Map" to create or edit an image map and "Edit" to edit the image in an external image processing program, to be defined in "Edit/Preferences/External Editors".

Background

There are four different fields (from the top):

• Text color
• Background image (background or table cell)
• Background color (background or table cell)
• Border color (table)

Respect the usual HTML coding for color definition for the three color settings: either in 6-digit RGB values (don't forget the leading # - otherwise some browsers have problems!) or in words (see for example SELFHTML; German only).
The rectangles with the small arrows at the bottom allow you to choose values from a pre-defined color palette, use the browser default, call the Windows color definition dialogue - or simply use the eyedropper tool and search on the whole Windows desktop including all applications for a color! :-)
Note: Without selection you can only delete the values for the object at the cursor position, not set new ones!

The background image is defined using the usual HTML coding for images (URL, local or global), referenced using the crosshairs (see: Link) or set via file selector (folder symbol).

Horizontal rules

Even for these objects hardly to be found at all an extra list exists, as well as for named anchors. Here you can give the HR a name for reasons of reference, define the width in pixels or percent, the height in in pixels (!) as well as the alignment. Finally you can switch off the obligatory shadow.

Jens Hatlak April 10, 2000