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

Tips for Dreamweaver

• Macromedia seems to have completely forgotten the extensions .php4 and .php4 as a sign for PHP files. Thus you have to supplement the following under "Edit/Preferences":
  • "HTML Rewriting/Never Rewrite HTML In Files with Extensions":
    .php4 .php4
  • "External Editors/Extensions":
    .php4 .php4 .php with Dreamweaver as Primary Editor (select Dreamweaver.exe)
• The text "Delete remote files not on local drive" in the "Synchronize" window might be somehow confusing. It means: "Delete the files online that don't exist offline". Understand "Delete local files not on remote server" the same way (appears when selecting "Get newer files from remote").
• As the search and replace function seems not to work properly with larger sites, you should use modules of programs HTML Editor Phase 5 (by Ulli Meybohm) for actions without regular expressions.
• Non-visible elements of the HTML page can be switched on/off using the View menu, such as Invisible Elements (comments, anchors, BRs etc.), table- or frame borders or the HEAD elements at the top of the window.
• The selection of a complete table using the mouse is easiest at the very top left corner where a cross with four arrows appears if you were successful (mouse cursor positioned correctly). A click at that moment makes you succeed. Even easier: Press Control-A when you're inside a table (or right-click and select "Table/Select Table"). With a selected table, another Control-A will select the whole BODY- or NOFRAMES area.
• By pressing Control with mouse click actions you can reach the following:
  1. With tables: Selection of the cell, additional selection possible by further clicks while keeping on pressing as slong as the additional cells belong to the same table. Another Control click onto a single cell that is already selected: Selection of the cell's content
  2. With links (double click): Open in a new window (if the link is inside a table, the link text has to be marked at least partly before)
• By pressing Alternate with a single click onto a frame of a displayed frameset, the definition of the corresponding frame is being selected in the source code (editor window) of the frameset and the frame's properties are shown in the Properties window.
• When saving files takes somehow longer that normally, you should call the function "Recreate Site Cache" for the corresponding Site to re-structure the cache. After that, the cache should work in normaler speed again.
• You can reach the standard browser for preview with F12, the alternate browser with Control-F12.
• The frame borders can be displayed with "View/Frame Borders".
• If you want to be sure that all entities (e.g. ä, a German "Umlaut") are converted correctly, you should always type them, as well as visible HTML code, in the WYSIWYG window.
• If you copy a block from the editor window into the clipboard (Control-C), you can also paste it in the WYSIWYG window again, which means real pasting in the source code. But if you want to insert HTML code visibly, you can use "Edit/Paste as Text" (Control-Shift-V) which automatically converts the HTML tags. Analogous to that you can copy only the pure ASCII text in the WYSIWYG window instead of copying the source code in background - that works with "Edit/Copy Text Only" (Control-Shift-C). Both actions can be used with any WYSIWYG- or the editor window.
• If you want to rename one or more files of a project but not to adjust the file names in all files that link to the one with the new name, you should always use the right side of the Site window for that purpose, because if you change file names here, you're automatically asked whether linked files should be adjusted. :-)
• A double click onto an HTML file in the Site window opens it in a new file, irrespective of the settings in "Edit/Preferences/General". To open a file in a certain window or frame, you can drag the file onto the respective window or frame - the file's content will not be inserted but only the file will be loaded or the frameset will be altered (!). It's different with objects like images: those are sent to an external image editing program (doube click) or being inserted (D 'n' D).
• More extensive JavaScript functions than Rollover Images for single objects can be defined in "Window/Behaviors".
• Images:
  • By pressing Shift with dragging an image (at one of the borders) you can force a proportional modification from the current size.
  • If the values for width and height appear bold, they do not correspond with the actual size of the real image.
  • If only one of the values for the image size (width and height) is defined, you can define the other value with a single click onto one of the sizers (small rectangle boxes) of the respectable image, without changing the current size of the displayed image. To reset to the size of the original just click onto the Refresh button.
  • So-called "Rollover Images", i.e. images which change when passing with the mouse cursor, can be created easily with the menu entry of the same name in "Insert" without needing to know about the backgrounds of source code (JavaScript functions). "Preload" in the appearing dialogue allows you to define that the image which appears after the change/switch is pre-loaded into the browser's cache (for that purpose, the used functions are called previously). If you want to change another image than the one you pass with the mouse cursor or even several images at once, you have to use "Window/Behaviors/Swap Image" with an image selected.

Tips for HTML

• [02-05-30] You have to use /* C-style comments */ in (both external and integrated) CSS definitions, i.e. neither HTML comments nor // comments must be used, especially in external style sheet definitions!
• [02-04-04] Tables inside tables with background images (e.g. background="image.gif") cause problems with Netscape 4.x: Inside of all cells of the inner table the background image of the outer table starts from the beginning. Workaround: use a transparent 1x1 pixel GIF as background image of the inner table.
• [02-04-04] If you use <a href="javascript:...">, inside a SSL secured environment (https) there will be security problems with Internet Explorer. Use <a href="#" onClick="..." instead.
• [02-04-04] Images as SUBMIT buttons are done best downward-compatibly using <input type="image" src="..." alt="..." width="..." height="..." border="0". The latter statement is needed for Netscape 4.x not to show a border.
• [02-04-04] For some time now Mozilla and thus Netscape 6.x does not accept Cascading Stylesheets from servers anymore which send CSS files with another MIME type than text/css, among others may Apache servers in standard configuration are concerned. The rejection described above will take effect if a URL is given in the DTD.
• [02-04-04] Due to many asking me this in the past: The names of CSS classes should not contain underscores ("_"), otherwise some browsers like Netscape 4.x will not recognize it properly.
• If you want to create a table within a table and want the outer table to consist of dynamic columns and the inner one of static columns ("half-static" table), you can do it as follows:
  • the outer, blind table with a percent value,
  • the inner, blind table with a small percent value,
  • in it another table with a fixed value and the actual content.
  Simply using a table within another table has the effect that in the Netscape Navigator, the width of the inner table won't stay static. :-( I.e. only the pattern mentioned above effects that actually in all browsers (so also in Netscape) a fixed width is set for display.
  For this I've made an example!
  Please note that this is only a "hack", i.e. it's not the best solution. On the contrary, this method is just a compromise.
• Links that should go into nirwana but not cause errors (e.g. for presentation) can be given the link target "#" (without quotation marks) - I don't mean frame target!
• Maybe you should reflect about whether to use <b> or better <strong> and <i> or rather <em> - some browsers make a difference here, and Dreamweaver of all programs makes it easier than ever to use the logical instead of the physical tags!
• For accuracy, you should always use quotation marks in HTML to frame the values of attributes (e.g. src is an attribute of the <img> tags; image.gif would be a valid value). XHTML (at this time "recommendation" yet) will obviously prescribe it that way, so why not starting with it now? Another advantage of this procedure is that there won't be any problems with spaces in file names ;-) any more...
• If you want to start preparing for XHTML now, you should also mind closing all tags that allow it, so for example the often used <p> or <li>, beside the use of quotation marks with attribute values. Anyway, those tags who have no closing counterpart at all (like <br> or <img>) are treated completely different in XHTML, i.e. for the time being you can let them as they are and later convert them if neccessary using tools like tidy - also to be found integrated in HTML-Kit.
• The use of DTDs (Document Type Descriptions) goes without saying, just because of the validators for example of the W3C. It's also wise keeping to guidelines you somehow "sign" - XHTML demands "well formed", i.e. error-free, source code!
• Upper- or lowercase, who cares? - What matters most is that you remain true to yourself and do no hotchpotch. Why? The answer is once again XHTML, as it distinguisches between upper- and lowercase. So, particularly with style sheets you should start now taking care to prvent yourself from trouble in the future!

General

• Relative means "from the point of view of the current file" and describes the relation between any object and its definition - so, in HTML, for example between an image and its <img src=...> tag. At this, there are some special meanings for some characters:
  1. "." (without quotation marks) represents the current level where you are and thus is relative to the current file. This character can nearaly always left out as in HTML the current file corresponds always with the relative base.
  2. ".." (without quotation marks) represents the very next higher level, again relatively to the current file.
• Local means that a link is inside the edited project and thus reachable using relative paths. There are two possibilities:
  1. The link is absolut relative, i.e.. it refers to the start from the server root (e.g. http://ffm.junetz.de/). Such links usually start with a / (so /images/image.gif will always be expanded to http://ffm.junetz.de/images/image.gif, as long as the project is anywhere on this server root).
  2. The link is single relative, i.e. it refers to the current file. This kind of links start without /; so images/image.gif corresponds with ./images/image.gif.
• Global are objects which are outside the current project, so for example email addresses (mailto:) and hyperlinks (http://, ftp:// etc.).

Jens Hatlak May 5, 2002