Do you prefer reading pages in English?
This page is also available in English.
Tipps zum Dreamweaver
Macromedia hat
offenbar die Extensions .php4 und .php4
als Kennzeichnung für PHP-Dateien gänzlich vergessen. Daher muss
man folgendes unter "Edit/Preferences" ergänzen:
- "HTML Rewriting/Never Rewrite HTML In Files with Extensions":
.php4 .php4
- "External Editors/Extensions":
.php4 .php4 .php mit Dreamweaver als Primary
Editor (Auswahl von Dreamweaver.exe)
- Der Text "Delete
remote files not on local drive" im "Synchronize"-Fenster ist
etwas verwirrend formuliert. Eigentlich soll damit gesagt werden: "Die
Dateien online löschen, die offline nicht existieren". Genauso ist
"Delete local files not on remote server" zu verstehen (erscheint,
wenn man "Get newer files from remote" auswählt).
- Da die Suchen und Ersetzen-Funktion offenbar bei größeren Sites
nicht richtig zu arbeiten scheint, sollte man hier bei Aktionen ohne Quantoren
besser Module von Programmen wie
![[extern]](../images/world.gif)
HTML Editor Phase 5 (von Ulli Meybohm)
benutzen.
- Nicht sichtbare Elemente der HTML-Seite können einfach über das
View-Menü ein- und ausgeschaltet werden, so z.B. Invisible Elements (Kommentare,
Anker, BRs etc.), Tabellen- bzw. Framerahmen oder die HEAD-Elemente
am oberen Rand des Fensters.
- Die Selektion einer kompletten Tabelle mit der Maus ist am einfachsten an
der linken oberen Ecke möglich, wo im Erfolgsfall (richtige Positionierung)
ein Kreuz mit vier Pfeilen erscheint. Ein Klick zu diesem Zeitpunkt führt
zum gewünschten Ergebnis. Noch einfacher: Betätigen von Control-A,
wenn man sich in einer Tabelle befindet (bzw. Klick mit der rechten Maustaste
und Anwählen von "Table/Select Table"). Bei selektierter Tabelle
führt ein weiteres Control-A dann zur Selektion
des gesamten BODY- bzw. NOFRAMES-Bereichs.
- Durch Gedrückthalten von Control bei Mausklickaktionen
kann man folgendes erreichen:
- Bei Tabellen: Selektion des Feldes, weitere Selektion durch weitere
Klicks bei weiterem Gedrückthalten möglich, solange die weiteren
Felder Teil derselben Tabelle sind. Erneuter Control-Klick
auf ein bereits selektiertes einzelnes Feld: Selektion des Feldinhalts
- Bei Links (Doppelklick): Öffnen in neuem Fenster (wenn sich
der Link innerhalb einer Tabelle befindet, muss der Linktext zuvor zumindest
teilweise markiert werden)
- Durch Gedrückthalten von Alternate bei einem
Einfachklick auf einen Frame eines angezeigten Framesets wird die Definition
des betreffenden Frames im Quelltext (Editorfenster)
des Framesets selektiert und die Frameeigenschaften im Eigenschaften-Fenster
anzeigt.
- Wenn das Speichern einmal länger dauert als gewöhnlich, sollte
man für die betreffende Site die Funktion "Recreate
Site Cache" aufrufen um die Struktur im Cache neu zu ordnen. Danach sollte
das Speichern wieder in gewohnter Schnelligkeit erfolgen.
- Der Standard-Browser zum Vorabanzeigen ist über F12
zu erreichen, der Alternativbrowser über Control-F12.
- Die Rahmen von Frames kann man mit "View/Frame Borders" anzeigen
lassen.
- Wer sicher gehen will, dass alle Entities (z.B. ä)
auch richtig umgesetzt werden, sollte diese, ebenso wie sichtbaren HTML-Code,
nur im WYSIWYG-Fenster eingeben.
- Kopiert man einen Block aus dem Editorfenster
heraus ins Klemmbrett (Control-C), kann man diesen
auch im WYSIWYG-Fenster wieder einfügen, wobei
dann wirklich im Quelltext eingefügt wird. Will man aber gezielt HTML-Code
sichtbar einfügen, kann man beim Einfügen "Edit/Paste
as Text" benutzen (Control-Shift-V), wobei
dann die HTML-Tags automatisch umgesetzt werden. Analog dazu kann man im WYSIWYG-Fenster,
anstatt im Hintergrund den Quelltext mitzukopieren, nur den reinen ASCII-Text
kopieren - das geht mit "Edit/Copy Text Only" (Control-Shift-C).
Beide Aktionen können sowohl auf ein beliebiges WYSIWYG-
wie auch das Editorfenster angewendet werden.
- Will man eine oder mehrere Dateien eines Projektes umbenennen, nicht aber
in allen Dateien, die auf die mit dem neuen Namen verlinken, die Dateinamen
anpassen, so sollte man dafür grundsätzlich die rechte Seite des
Site-Fensters benutzen, denn wenn man hier Dateinamen
ändert, wird man automatisch gefragt, ob verlinkte Dateien abgeändert
werden sollen. :-)
- Ein Doppelklick auf eine HTML-Datei im Site-Fenster
öffnet diese immer in einem neuen Fenster, unabhängig von der Einstellung
in "Edit/Preferences/General". Zum Öffnen in einem bestimmten
Fenster oder Frame kann man die Datei aber per Drag&Drop auf das jeweilige
Fenster bzw. den Frame ziehen - der Inhalt der Datei wird dabei nicht eingefügt
sondern lediglich die Datei geladen bzw. das Frameset geändert (!).
Anders verhält es sich da bei Objekten wie Bildern: diese werden im externen
Bildbearbeitungsprogramm geöffnet (Doppelklick) oder eingefügt (D&D).
- JavaScript-Funktionen, die über das Maß der Möglichkeiten
von Rollover Images hinausgehen, können für einzelne
Objekte in "Window/Behaviors" definiert
werden.
- Bilder:
- Durch Gedrückthalten von Shift
beim Draggen eines Bildes (an einem der Ränder) erzwingt man eine
proportionale Veränderung vom gegenwärtigen Ausmaß aus.
- Wenn die Werte für Breite und Höhe fett erscheinen,
entsprechen sie nicht den tatsächlichen Ausmaßen
des realen Bildes.
- Ist nur einer der Werte für die Bildausmaße (Breite oder
Höhe) definiert, kann der andere Wert durch einmaliges Klicken auf
einen der Sizer (kleine Rechteckboxen) des jeweiligen Bildes definiert
werden, ohne die gegenwärtigen Ausmaße des angezeigten Bildes
zu verändern. Um die Ausmaße des Originals wiederherzustellen,
genügt ein Klick auf den Refresh-Button.
- Sogenannte "Rollover Images", also Bilder,
die sich beim Überfahren mit dem Mauscursor verändern, kann
man mit dem gleichnamigen Menüpunkt unter "Insert" einfach
und leicht erzeugen, ohne Wissen um die Hintergründe des Quellcodes
(JavaScript-Funktionen) zu benötigen. Mit "Preload" kann
man im erscheinenden Dialog festlegen, dass das Bild, das nach dem Wechsel
erscheint, schon vorab in den Browsercache geladen wird (dazu werden die
nötigen Funktionen bereits zuvor ausgeführt). Will man ein anderes
Bild ändern als das, über das man mit dem Mauscursor fährt
oder gar gleich mehrere Bilder gleichzeitig, muss man "Window/Behaviours/Swap
Image" bei angeklicktem Bild benutzen.
- [30.5.02] In (externen wie integrierten)
CSS-Definitionen müssen
/* C-Kommentare */ benutzt
werden, d.h. weder HTML-Kommentare noch //-Kommentare
dürfen, insbesondere in externen Stylesheetdefinitionen, verwendet
werden!
- [4.4.02] Tabellen in Tabellen mit
Hintergrundbildern (z.B.
background="image.gif") bereiten
Netscape 4.x Probleme: In allen Zellen der inneren Tabelle beginnt das
Hintergrundbild der äußeren Tabelle wieder von neuem. Abhilfe
schafft die Verwendung von eines transparenten 1x1-Pixel-GIFs als
Hintergrundbild der inneren Tabelle.
- [4.4.02] Verwendet man innerhalb einer
SSL-gesicherten Umgebung (https) die Schreibweise
<a href="javascript:...">,
führt dies im Zusammenhang mit dem Internet Explorer zu
Sicherheitsproblemen. Statt dessen sollte
<a href="#" onClick="..."
verwendet werden.
- [4.4.02] Bilder als SUBMIT-Buttons realisiert
man abwärtkompatibel am besten mittels
<input type="image" src="..."
alt="..." width="..." height="..."
border="0". Die letzte Angabe ist nötig, damit auch
Netscape 4.x keinen Rahmen anzeigt.
- [4.4.02] Seit einiger Zeit akzeptiert Mozilla
und damit auch Netscape 6.x keine Cascading Stylesheets mehr von Servern,
die CSS-Dateien mit einem anderen MIME-Typ als text/css
verschicken, u.a. sind davon viele Apache-Server in der Standardkonfiguration
betroffen. Die beschriebene Ablehnung tritt übrigens genau dann ein,
wenn eine URL innerhalb der DTD mit angegeben wird.
- [4.4.02] Weil ich es in der Vergangenheit
doch schon öfter gefragt wurde: Die Namen von CSS-Klassen sollten
keine Underscores ("_") enthalten, weil sonst einige Browser
wie Netscape 4.x nicht damit klar kommen.
- Will man eine Tabelle in einer Tabelle erzeugen, wobei die äußere
Tabelle aus dynamischen Spalten und die innere aus statischen bestehen soll
("halbstatische" Tabelle), kann man das wie folgt definieren:
- die äußere, blinde Tabelle mit einem Prozentwert,
- die innere, blinde Tabelle mit einem kleinen Prozentwert,
- darin noch eine Tabelle mit einem festen Wert und dem
eigentlichen Inhalt.
Einfach eine Tabelle in einer Tabelle anzulegen führt zu dem Ergebnis,
dass im Netscape Navigator die Breite der inneren Tabelle nicht statisch bleibt.
:-( D.h. nur das obige Schema bewirkt, dass bei
der Anzeige wirklich in allen Browsern (also auch in Netscape) eine feste
Größe vorgegeben wird.
Hierzu ist ein 
Beispiel verfügbar!
Zu beachten ist hierbei, dass es sich um einen "Hack"
handelt, also nicht die beste aller Lösungen darstellt. Vielmehr ist
diese Methode nur ein Kompromiss.
- Links, die ins Leere führen, aber keine Fehlfunktion hervorrufen sollen
(z.B. für Vorführeffekte), kann man das Ziel "#" (ohne
Hochkommata) geben.
- Man sollte sich mal Gedanken machen, ob man <b>
oder besser <strong> und <i>
oder vielleicht doch <em> benutzt - manche
Browser machen da einen Unterschied, und gerade im Dreamweaver ist es nicht
viel mehr Arbeit, die logischen anstatt der physischen Tags zu benutzen!
- Der Genauigkeit halber sollte man in HTML eigentlich immer Hochkommata benutzen,
um die Werte von Attributen (z.B. ist src ein Attribut
des <img>-Tags; bild.gif
wäre z.B. ein gültiger Wert) einzurahmen. XHTML (derzeit noch "Empfehlung")
wird das wohl vorschreiben, also kann man jetzt schon einmal damit anfangen.
Ein weiterer Vorteil dieser Vorgehensweise ist es, dass es keine Schwierigkeiten
bei Leerzeichen in Dateinamen ;-) mehr geben dürfte...
- Wer sich schon jetzt fit für XHTML machen will, sollte neben der Verwendung
von Hochkommata bei Attributwerten auch darauf achten, wirklich alle Tags
zu schließen, die das erlauben, so z.B. das viel benutzte <p>
oder <li>. Die Tags, die grundsätzlich
kein schließendes Pendant haben (wie z.B. <br>
oder <img>), werden in XHTML aber sowieso anders
behandelt, d.h. man kann sie erst einmal so lassen wie sie sind und ggf. später
mit Tools wie tidy - auch zu finden in HTML-Kit
- konvertieren.
- Die Verwendung von DTDs (Dokumenttyp-Beschreibungen) sollte sich von selbst
verstehen, allein schon wegen der Validatoren z.B. des W3C. Es ist aber auch
ratsam, sich an die Richtlinien zu halten, die man quasi "unterschreibt"
- XHTML verlangt "well formed", also fehlerfreien, Quelltext!
- Groß oder klein, das ist egal - Hauptsache, man bleibt sich selbst
treu und macht keinen Mischmasch. Warum? Die Antwort lautet wiederum XHTML,
denn dieses unterscheidet Groß- und Kleinschreibung von einander. Insbesondere
bei Stylesheets sollte man also schon jetzt aufpassen, um sich in Zukunft
Arbeit zu sparen!
Allgemeines
- Relativ heisst soviel wie "von der aktuellen
Datei aus gesehen" und beschreibt die Beziehung zwischen einem Objekt
und seiner Definition - in HTML also z.B. zwischen einem Bild und seinem <img
src=...>-Tag. Dabei kommen einigen Zeichen besondere Bedeutung zu:
- "." (ohne Hochkommata) steht für
die aktuelle Ebene, in der man sich befindet und ist damit relativ zur
aktuellen Datei. Dieses Zeichen kann man aber fast immer weglassen, da
in HTML grundsätzlich die aktuelle Datei der relativen Basis entspricht.
- ".." (ohne Hochkommata) bezieht
sich auf die nächst höhere Ebene, wiederum relativ zur aktuellen
Datei.
- Local means, dass ein Link sich innerhalb des zu bearbeitenden
Projektes befindet und somit durch relative Pfadangaben zu erreichen ist.
Hier gibt es zwei Möglichkeiten:
- Der Link ist absolut relativ, d.h. er bezieht sich auf den Start ab
der Server-Root (z.B. http://ffm.junetz.de/).
Solche Links werden mit einem / eingeleitet
(/bilder/bild.gif wird also immer zu
http://ffm.junetz.de/bilder/bild.gif expandiert,
solange sich das Projekt irgendwo auf dieser Server-Root befindet).
- Der Link ist einfach relativ, d.h. er bezieht sich auf die aktuelle
Datei. Diese Art von Links werden ohne /
eingeleitet; bilder/bild.gif entspräche
also ./bilder/bild.gif.
- Global sind Objekte, die sich außerhalb des aktuellen
Projektes befinden, also z.B. Emailadressen (mailto:)
und Hyperlinks (http://, ftp://
etc.).
This page
Jens Hatlak