Dreamweaver Tipps
pastorpixel startseite

Letzte Änderung:


Hier sammelt der Pastor!

Email an Pastor Pixel | Startseite: www.pastorpixel.de


Dreamweaver MX und mySQL-Datenbanken in meinem PHP-Tutorial
Wenn ihr etwas gespendet habt, könnt ihr den Benutzernamen "dreamweaver" und das Passwort "hilfe" benutzen.

Auf einer zweiten Seite Dreamweaver MX Ultradev werden Funktionen vorgestellt mit denen man Datenbank Anbindungen per ASP vornehmen kann.


Ich habe mir schon viele Bücher angeschaut und es ist nicht immer gut, was ich gesehen habe, aber dieses Buch von Helma Spona, kann ich sowohl Änfängern wie auch Experten nur empfehlen, schaut euch meine Vorschläge an...



Homepage Deutschland Webdesign PortalSite explorerartige Ansicht
Site Map Ansicht aller Linkverzweigungen
FTP Verbindung
Checkmode
Dateitypen im Ascii oder Binary Modus übertragen
Bereitstellen / Abrufen
Einchecken / Auschecken
Synchronosieren
Html Dokumente in anderen Sprachen

Gestaltungs-tools
TracingImage Hintergrundbild als Designvorlage zum Gestalten der Seite
vordefiniertes Farbschema benutzen
Html Stile, Schema für Schriftformatierungen (veraltet)
Vorlage


Tabellen
Tabellen in Ebenen verwandeln
Tabellen, Reihen, Spalten, Zellen markieren / auswählen
Zellen verbinden, Zellen unterteilen
Größenänderung, Breiten und Höhen ändern
Tabellenzelle/ Zeilenumbruch verhindern
eine ganze Spalte oder Reihe versetzen
Tabellen sortieren (alphabetisch und numerisch)
Excel Tabelle importieren
Tabellen importieren


Frameset
erschaffen
Eigenschaften
wählen: einzelne Seite oder Frameseite
Rand, Rahmen, Border
Speichern
über einen link in 2 oder mehr Framefenstern Seiten laden 

Style Sheet
Formatierungen
Externe Style Sheet Datei
Layout mit CSS
Ebenen <div>
verschiebbare Ebenen (Puzzele, Anziehpuppe)
Ebenen ein- und ausblenden auf Mausaktivität (Linkhinweis, Tooltipp)
Ebenen Animation
Quelltext Style Sheet Beispiele

Kommentar
Audio einbinden

Einfügen Leiste ehemals Objekte Palette
Dreamweaver erweitern mit neuen Objects und Behaviors aus dem Internet

Links
Links mit Site und Eigenschaftenfenster erschaffen
Anchor link zu einer Textstelle
Statuszeilentext (Erklärung wird auf neuer Seite geöffnet)
Links in Dreamweaver (Entwurfsansicht) aufrufen
Image Map anklickbare Bereiche als links auf einem Bild
Links über ein Listmenue aufrufen (Erklärung wird auf neuer Seite geöffnet)
über einen link in 2 oder mehr Framefenstern Seiten laden
Base target, alle Links im definierten Framefenster öffnen


Formular
Formular erstellen
Textfeld einzeilig und mehrzeilig
Radio Buttons, Optionsschalter
Button mit Link

Suchen Ersetzen
Funktion speichern und abrufen
Mehrere Seiten durchsuchen
Reguläre Ausdrücke / regular expression
Sammlung regulärer Ausdrücke neue Seite

List, Aufzählungslisten
Bullettyp festlegen
Nummerierung beeinflussen
Definition Lists

Tastaturbefehle, Shortcuts

Javascript für Anfänger

Dreamweaver MX, PHP und MySQL Datenbanken neue Seite
Ultradev Access neue Seite

Links, Tutorials & Foren




SITE
ist eine Ansicht, mit der man eine ganze Site verwalten kann,
das ganze Projekt mit allen Seiten, Bildern und Dateien wird angezeigt wie im Windows Explorer.
Bei Dateinamensänderungen oder Verschieben von Dateien werden die links zu diesen Dateien auf Wunsch in allen Seiten aktualisiert.
In älteren Versionen befinden sich die Site Befehle unter dem Menuepunkt Datei, ab Version 4 gibt es einen eigenen Menuepunkt:

Site / neue Site
nun öffnet sich ein Fenster
Name irgendeinen treffenden Namen vergeben
Lokaler Stammordner der Ordner auf der Festplatte in dem sich alle Dateien und Unterordner der Homepage befinden
http Adresse ist klar
Cache Cache aktivieren sollte einen Haken bekommen

Nach betätigen der Okay Taste wird die Site erstellt. Man findet sie in Zukunft unter Site / Site öffnen ( Name den man vergeben hatte).
Will man Dateien ins Internet laden muß man unter Site auch die FTP Verbindung angeben.

Site Map (Datei Verzweigungen) (siehe linke Hälfte der Abbildung)

zweites Symbol neben dem Namen der Site anklicken (Abbildung: siehe Pfeil "Site Map")
Map and Files wählen (Map und Dateien)
Index.html wird automatisch als erste Seite gewählt
Struktur wird erzeugt und im linken Fenster angezeigt
um eine andere Startseite festzulegen muß man die...

Site Map ändern

Dreamweaver MX: Site/ Site bearbeiten
Dreamweaver 8: Site/ Sites verwalten/ gewünscht Site auswählen, Bearbeiten

 
FTP Verbindung
während man eine neue Site einrichtet oder auch nachher unter Site / Sites definieren / (Name auswählen) Bearbeiten kann man die FTP Verbindung angeben, um damit Seiten hochzuladen, im Fenster wählt man links Remote Informationen
Zugriff: FTP
FTP Host: die URL z.B. www.pastorpixel.de
Host Directory: nur wenn ein Unterverzeichnis angegeben werden muß, ist in der Regel nicht der Fall
Anmeldung: der Nutzername (bei Strato ist es beispielsweise auch die Url)
Password: bekommt man wie auch den Nutzernamen vom Provider
Anschließend kann man im Site Fenster eine Verbindung zum Provider herstellen durch Klicken des Buttons
Um auf der linken Seite die Ordner und Dateien beim Server zu sehen, ersten Button (Site Dateien) in der Symbolleiste wählen. Dann kann man die Dateien einfach von rechts nach links schieben, um sie hochzuladen oder von rechts nach links um sie runter zu laden. Alternativ kann man auch die beiden rauf und runter Pfeile oben in der Leiste benutzen.

Dreamweaver als FTP Programm zu nutzen hat viele Vorteile, einmal erkennt Dreamweaver, ob Dateien auf dem Server eventuell neueren Datums sind, und fragt dann nach, ob er trotzdem hochladen soll. Außerdem kann man sich alle Dateien nach Datum geordnet anzeigen lassen, so daß man alle neuen Seiten sofort erkennt. Dazu klickt man auf den Balken oben "Geändert" . Der größte Vorteil ist meiner Ansicht nach aber der, daß man die Möglichkeit hat, eine neue Html Seite hochzuladen und Dreamweaver alle dazugehörigen Dateien wie Bilder, Flash movies etc. mit hochläd.
 
 
Checkmode
Dateien und Ordnern, die man hochgeladen hat, kann man bestimmte Lese und Schreibrechte zuweisen. Das ist bei bestimmten PHP Dateien notwendig. Bei älteren Dreamweaver Versionen sollte man sich bei Macromedia die Erweiterung "set Permission" runterladen. Siehe Dreamweaver erweitern. Nach Installation dieser Erweiterung kann man Dateien die hochgeladen wurden, mit rechter Maustaste anklicken und die Rechte vergeben.
Es gibt 3 Gruppen
owner, group, other
für jeden Gruppe kann man 3 verschiedene Rechte vergeben
1 ist lesen, read, Das Recht heißt 4
2 schreiben, write das Recht heißt 2
3 ausführen, execute das Recht heißt 1
Wenn alle drei angehakt sind, hat man beispielsweise 7. Bei 5 wäre es 4 und 1. Also wenn ich für alle drei Gruppen, alle Rechte vergebe, lautet der checkmode 777.
 
Dateitpyen Ascii mode oder binary
Man kann Dateitypen an den Server in ASCII Modus oder Binär Modus übertragen. Das ist beispielsweise bei Textdateien, für PHP manchmal notwendig, oder .htaccess Dateien müssen auch im ASCII Modus übertragen werden, wobei .sql wiederum den binär Modus brauchen. Gehe in den Ordner Programme/ Dreamweaver / Configuration/ ftpextensionmap.txt und füge dort in dieser Textdatei eine Zeile ein und zwar mit der gewünschten Datei endung und dem Übertragungsmodus. Hier einige Beispiele
HTACCESS ASCII   .htaccess Datei
TXT ASCII   Textdatei
TEXT ASCII   Textdatei
AS ASCII   Textdatei für Flash Actionscript
SQL BINARY   mySql Datenbank
PDF BINARY   Pdf-Datei

Alle weiteren Eintragungen sieht man in der Datei ftpextensionmap.txt
Bereitstellen, Abrufen
Hier geht es darum wie man Dateien hoch- und runterläd. Über dem Bedienfeld Dateien, oder in der Siteansicht oben in der Leiste gibt es verschiedene Pfeilsymbole. Außerdem befinden sich die Pfeilsymbole mit Untermenü über der Seite, die man gerade bearbeitet.
Wenn man alleine an der Website arbeitet kann über das Symbol "Bereitstellen" die Dateien von der lokalen Festplatte auf den Server laden. Ist es eine Html Datei fragt Dreamweaver, ob alle abhängigen Datei auch hochgeladen werden sollen. Bestätigt man das mit "Ja" werden alle Bilder und sontigen Elemente der Html Seite auch hochgeladen.
Der Pfeil nach unten "Abrufen" läd die Dateien vom Server auf die lokale Festplatte.
Einchecken Auschecken
Arbeitet man zu mehreren an der Homepage kann es schon mal vorkommen, dass 2 Leute gleichzeitig an einer Datei arbeiten. Damit das nicht passiert, gibt es die Funktionen "Auschecken" und "Einchecken".
Um Ein- und Auschecken zu aktivieren, gehe auf Site/ Site verwalten/ Bearbeiten und wähle unter Remoteinformationen (links) die Option "Ein- und "Auschecken von Dateien aktivieren".
Will man eine Datei vom Server runterladen wählt man "Auschecken". Will ein anderer auf die Datei zugreifen erscheint ein Hinweis. Die Datei hat in der Site Ansicht für alle anderen einen roten Haken und für den der sie ausgecheckt hat, einen grünen Haken. Will man die geänderte Datei hochladen, wählte man "Einchecken". Die Datei wird hochgeladen, der Haken verschwindet und außerdem ist sie auf der lokalen Festplatte schreibgeschützt. Das hat den Zweck, dass man nicht aus Versehen auf eine lokale Datei zugreift, sondern immer auf die aktuellen Dateien vom Server zugreift, wenn man sie bearbeiten will. Der Schreibschutz kann über rechte Maustaste aufgehoben werden.
Synchronosieren
Wenn man vergessen hat, welche Dateien wo geändert wurden kann man mittels Synchronosieren nur die geänderten Dateien hochladen oder runterladen:
Dabei stehen folgende Optionen zur Verfügung:

Synchronosieren:
Gesamte Site- alle Dateien
nur lokale Dateien auswählen / nur ausgewählte entfernte Dateien - Beides bedeutet nur die markierten Dateien werden verglichen und evt. kopiert. Je nachdem, ob man Dateien oder Ordner auf dem Server (remote) oder auf der Festplatte (lokale Dateien) markiert hat, erscheint einer der beiden Hinweise.

Richtung:
"Aktuellere Dateien für entfernteres Objekt bereitstellen"- alle neuen Dateien von der Festplatte auf den Server. Wenn man lokal einiges geändert hat, kann man somit alle neuen Dateien hochladen.
"Aktuellere Dateien von entfernten Objekt beziehen"- kopiert alle neueren Dateien vom Webserver auf die Festplatte. Sind die Dateien auf dem Server aktueller als auf der Festplatte werden diese runtergeladen.
"Aktuellere Dateien abrufen und bereitstellen" hier werden Dateien hoch- und runtergeladen und zwar jeweils die aktuellen. Server und Festplatte werden abgeglichen. Die aktuellere Version ersetzt die alte.

Klickt man auf "Vorschau" erscheint eine Liste der Dateien, die kopiert werden sollen. Dort hat man dann die Möglichkeit zu bestimmen, was mit den Dateien geschehen soll.
Die Opition "Entfernte Dateien nicht auf lokalem Laufwerk löschen" ist schlecht übersetzt. Es sollte besser heißen, "Entfernte Dateien, die sich nicht mehr auf lokalem Laufwerk befinden, löschen". Damit wird klar was gemeint ist: Dateien, die sich nicht mehr auf der lokalen Festplatte befinden, werden auch auf dem Webserver gelöscht. Wie man sieht haben die Programmierer von Dreamweaver mal wieder an alles gedacht. Danke schön.
 
Html Seiten mit anderen Sprachen, anderen Zeichensätzen, z.B.: russisch
Internationalisierung
Für die theoretischen Grundlagen empfehle ich mal wieder das Thema in selfhtml nachzuschauen
http://de.selfhtml.org/inter/index.htm

Zu den Iso 8859 Zeichencodierungen gehören die lateinischen Schriften, auf denen die meisten Sprachen Westeuropas und Amerikas beruhen, oder etwa die kyrillischen Schriften.
Du kannst dir aus dieser ISO 8859 Liste bei selfhtml den benötigten Zeichensatz raussuchen und diesen dann im Metatag angeben.
Der ISO 8859-5 Zeichensatz auch Latin5 genannt, beinhaltet die kyrillischen Zeichen.
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-5" />
Wenn man mehrere Seiten in dieser Sprache verfasst, bietet es sich an, die Voreinstellungen von Dreamweaver zu ändern. Bleiben wir beim Beispiel Russisch:
Wähle in Dreamweaver, unter Bearbeiten / Voreinstellungen, "Neues Dokument"
Wähle: "Standardkodierung Kyrillisch Iso"
Erstelle ein neues Dokument unter Datei/ Neu, anschließend kannst du deinen Text in der Entwurfsansicht einfügen und das Html Dokument abspeichern.
Dreamweaver erzeugt den richtigen Metatag mit der charset Info für die entsprechende Sprache.
!!! ACHTUNG !!! Wenn du mit diesen Einstellungen experimentierst, achte darauf, die zum Schluss alles wieder richtig einzustellen.

Zeichenkodierung
ASCCI, ISO, Unicode
 
Bei der Zeichenkodierung geht es darum, dass einem bestimmten Wert ein bestimmtes Schriftzeichen zugewiesen wird. Die Grundeinheiten eines Computers sind Bit (null und eins) und Byte. Ein Byte besteht aus 8 bit, das sind 256 oder 28 unterschiedliche Zustände. Die ISO 8859 Familie hat 256 Zeichen. Die Zeichensätze sind historisch entstanden und so gab es vor der ISO 8859 Familie den ASCII Zeichensatz mit 7 bit und 127 darstellbaren Zeichen. Dort sind alle für den amerikanischen Hausgebrauch benötigten Zeichen untergebracht. Die ersten 32 Zeichen sind für Steuerzeichen reserviert. Die ISO 8859 Familie hat für die ersten 128 Zeichen diese ASCII Zeichen übernommen und dann weitere hinzugefügt. In Mitteleuropa ist die ISO 8859-1 Tabelle üblich, die auch Latin 1 genannt wird. In ihr sind alle Zeichen der mitteleuropäischen Sprachen untergebracht. Selbstverständlichen gibt noch weitere ISO 8859 Tabellen für weitere Sprachen.
 
Im Zeichen der Globalisierung werden noch weitere Zeichen für weitere Sprachen gebraucht, so dass 8 Bit nicht mehr ausreichen. Problematisch wird es auch, wenn man mehrere Sprachen auf einer Seite benötigt. Hier kommt Unicode ins Spiel mit einem größeren Zeichenvorrat
 
Will man Seiten UTF 8 codiert erstellen, kann man in ´Dreamweaver die oben genannten Voreinstellungen ändern. Neben der charset Anweisung, werden die HTML Seiten auch UNICODE mäßig abgespeichert.
 
!!! Wichtig !!!
 
In Firefox wird eine so erstellte und gespeicherte Seite UTF 8 codiert angezeigt, auch wenn man die charset Anweisung in ISO 8859-1 geändert hat. Das kann auch bei PHP zu Fehlern führen.
 
siehe auch diese Seite zum Thema Emailbetreff mit Unicode

Gestaltungs-tools

Tracing Image

ein, mit einem Grafik Programm erstelltes, Layout wird als Bild hinterlegt,
um nach dieser Vorlage die Seite zu gestalten,
das Bild erscheint nicht im Html-Code, also auch nicht im Browser
View > Tracing Image > Load
Anzeigen / Tracing Bild / Laden
transparency 50%

Tracing Image sichtbar, unsichtbar
View > Tracing Image > Show
Anzeigen / Tracing Bild / Zeigen

vordefiniertes Farbschema benutzen

Commands / Set Color Scheme
Befehle / Farbschema einstellen
Hier kann man vordefinierte Farbschemata für den body-tag benutzen, die in einer kleinen Vorschau angezeigt werden. Will man eigene Farbschemata abspeichern, muß man die Datei colorSchemes.js, welche sich in einem Unterordner des Programms befindet bearbeiten. Dreamweaver MX/ Configurations/ Commands
Die einfachste Lösung ist, sich ein vorhandenes Farbschema zu kopieren und einzufügen und dann den Namen sowie die gewünschten Farben zu ändern. Beim nächsten Programmstart ist die Änderung abrufbar.

colorSchemes.Black[++i] = new Array();
colorSchemes.Black[i].name = "Cobra,yello";
colorSchemes.Black[i].bgcolor = "#000000";
colorSchemes.Black[i].text = "#FF9900";
colorSchemes.Black[i].link = "#FF0000";
colorSchemes.Black[i].vlink = "#CC3333";
colorSchemes.Black[i].alink = "#990000";

Html Styles

Html Styles gibt es ab Dreamweaver 3, damit kann man sich öfter gebrauchte Schriftformatierungen abspeichern und benutzen, nicht zu verwechseln mit Style Sheets. Diese Funktion gibt es in neueren Dreamweaver Versionen nicht mehr, da es nicht mehr zeitgemäß ist font-Tags zu nutzen.
Window / Html styles öffnet die Palette
Fenster / Html Stile
man unterscheidet zwischen Formatierungen für einzelne Textstellen a (Textstelle markieren, und gewünschten html Stil anklicken)
und denen für den Paragraph tag <p> (innerhalb eines Absatz klicken, und gewünschten html style anklicken)
die mit + Zeichen gekennzeichneten html Stile fügen die Formatierung einer schon vorhandenen Formatierung hinzu
die ohne + Zeichen ersetzen eine vorhandene Formatierung
um eine Formatierung zu löschen, markiert man die Textstelle (a), oder klickt in den Absatz (¶) und wählt: a Auswahlstil löschen / Clear Selection Style bzw. Absatzstil löschen Clear Paragraph Style
klickt man auf den kleinen schwarzen Dreieckspfeil, in der Html Stile Palette oben rechts, öffnet sich ein Menü mit dem man vorhandene Html Stile verändern kann oder neue hinzufügen kann
die Html Stile werden als Datei mit der Endung xml im Ordner "Library" abgespeichert, dieser Ordner wird im root Ordner der aktiven Site angelegt und kann von dort in den Library Ordner einer anderen Site kopiert werden, wie man es von Windows Dateien kennt
 
 
Vorlage
Was ist das?
Man kann sich mit Dreamweaver Vorlagen erstellen. Diese Vorlagen sind sehr nützlich, wenn man mehrere Html Seiten erstellen will, die gleichbleibende Elemente, wie Bilder Tabellen, Schriftformatierung etc .besitzen sollen. Die Vorlagenseite wird als Vorlage gespeichert. Die Html Seiten werden auf der Grundlage der Vorlagenseite erstellt und besitzen dann bearbeitbare Bereiche und nicht veränderbare Bereiche. Ein weiterer Vorteil ist die Tatsache, dass sich alle Html Seiten auf einmal aktualisieren lassen, wenn man die Vorlagenseite ändert.

Vorlage in Dreamweaver MX erstellen.
Wähle das "Elemente" Fenster
Klicke auf das zweitletzte "Vorlagen" Symbol am linken Rand vom "Elemente-Fenster"
Klicke mit rechter Maustaste auf den rechten Bereich und wähle Neue Vorlage.
Vergebe einen Namen (rechts)
Klicke die neue Vorlage (rechts) doppelt an, oder wähle unten das zweitletzte Symbol "Bearbeiten"
Es öffnet sich nun eine leere Seite im Hauptfenster mit der Endung dwt
Erstelle nun die Elemente die die Seite bekommen soll: Tabellen, Bilder
Markiere die Bereiche, die veränderbar sein sollen und wähle, Einfügen, Vorlagenobjekte, Bearbeitbarer Bereich
Speichere die Vorlagen Seite ab, sie wird standardmäßig im Unterordner "Templates" in der Site mit der Endung dwt gespeichert.

Html Seite auf Vorlage basierend erstellen.
a) erste Möglichkeit
Datei / Neu / (Fenster öffnet sich) wähle zuerst oben Vorlage, dann Site und Vorlage aus

b) zweite Möglichkeit
erstelle eine leere Html Seite und ziehe aus dem "Elemente-Fenster" die gewünschte Vorlage per drag & drop auf die Seite.
Nun kann man auf den zuvor definierten bearbeitbare Bereiche die Seite ändern und anschließend als html Seite speichern.

Späteres Ändern der Vorlage und aller dazugehörigen Html Seiten
Ändert man später Elemente der Vorlagenseite und speichert diese, so werden alle Html-Seiten, die auf dieser Vorlagenseite basieren, dementsprechend geändert, sofern dies gewünscht ist. Dabei werden "Nicht bearbeitbaren Bereiche" im bekannten Menü durch "Aktualisieren" bestätigt. Die geänderten "Bearbeitbaren Bereiche" müssen in einem zweiten Menü extra bestätigt werden und zwar durch Aktivieren der Option "Bibliothekselemente" und anschließendem Klick auf "Start".


Tabellen,Table
Einfügen Leiste (ehemals Objekte Palette) Registerkarte Allgemein. Tabellensymbol anklicken.
Ab Dreamweaver MX kann man unter Kopfzeile auch eingeben, welche Zellen mit dem <th> Tag anstatt des <td> Tags versehen werden.

Tabellen in Ebenen (Layer) verwandeln und umgekehrt

Das Umwandeln von Tabellen in Ebenen und umgekehrt kann man als Gestaltungshilsmittel einsetzen. Die Ebenen lassen sich auf der Seite frei verschieben. Nachdem alle Ebenen mit ihren Inhalten in gewünschter Weise positioniert sind, verwandelt man das Ganze in eine Tabelle. Erstelle ein paar Ebenen und fülle sie mit Inhalten.
Ebenen in Tabellen verwandeln:
Modifizieren / Konvertieren / Ebenen in Tabellen
Option Ebenenüberlappung im Menuefenster
Ebenenüberlappung verhindern
verhindert das Überlappen der Ebenen, um sie anschließend in
Tabellen umwandeln zu können

wieder zurück in Ebenen
Modifizieren / Konvertieren / Tabellen in Ebenen
Ebenenüberlappung verhindern
Raster zeigen und am Raster ausrichten (deaktiviere ich mir immer)
Ansicht/ Raster/ Am Raster ausrichten


Tabelle, Spalten, Reihen, Zellen markieren

mehrere Zellen: Maustaste drücken und durch die gewünschten Zellen ziehen
Spalte, Reihe: Maus vor den Rand der Spalte oder Reihe plazieren bis Pfeil erscheint, dann klick
einzelne Zelle: Zelle mit Strg Taste anklicken
ganze Tabelle: Kontextmenü der Tabelle (rechte Maustaste): Tabelle/ Tabelle auswählen
Ab Dreamweaver MX 2004 hat man oben an der Tabelle eine grüne Leiste die die Auswahl mit kleinen Pfeilen ermöglicht
Tabellenzellen miteinander verbinden oder unterteilen
gewünschte Zelle(n) markieren im Eigenschaftenfenster unten links,
Symbol: "ausgewählte Zellen verbinden"
Symbol "Zelle in Spalten oder Zeilen teilen"

Größenänderung
Will man die Größe der Tabelle ändern, markiert man diese und zieht an den Anfassern, rechts, oder unten
will man die Größe von Spalten ändern bewegt man die Maus auf einen der vertikalen Linien und zieht. Die andern Spalten werden verkleinert. Will man beim vergrößern einer Spalte die Größe der anderen Spalten beibehalten und stattdessen die Größe der Tabelle ändern, zieht man die Linie mit gedrückter Shift-Taste. Das funktioniert nur, wenn die Tabelle kleiner als 100 Prozent ist. Selbstverständlich kann man alle Größen auch im Quelltext oder im Eigenschaftenfenster eingeben.
Größen löschen
Ab Dreamweaver MX 2004 klickt man oben auf die kleinen Pfeile der grünen Leiste einer Tabelle und wählt: Höhen, Breiten oder was auch immer löschen. In älteren Dreamweaver Versionen markiert man gewünschte Zellen und wählt den Menübefehl: Modifizieren/ Tabelle/ Tabellenbreiten löschen oder einen der anderen Befehle.
eine ganze Spalte oder Reihe versetzen

Spalte markieren
Ausschneiden (Strg x)
in die erste Zelle der gewünschten Position klicken
(nicht die Spalte markieren)
Einfügen (Strg v)
Tabellenzelle/ Zeilenumbruch verhindern
Markiere die Zelle(n) und wähle im Eigenschaftenfenster "kein Umbruch"
 

Tabellen sortieren (alphabetisch, numerisch)

comands / sort tables
Befehle / Tabelle sortieren
z.B. erste Spalte alphabetisch
dann zweite Spalte numerisch
das heißt die erste Spalte hat Vorrang
z.B. bei einem Veranstaltungskalender werden in der
ersten Spalte die Orte in der zweiten die Daten angezeigt
nur wenn in der ersten Spalte ein Begriff doppelt vorkommt
also in zwei Reihen das gleiche, werden diese beiden Reihen
durch die zweite numerische Anordnung geordnet


Excel Tabelle importieren

Tabellen aus Excel oder einem anderen Tabellenkalkulationsprogramm lassen sich gut importieren, wenn man die Tabellen in Excel zuvor als Textdatei mit Trennzeichen abspeichert. Wähle beim speichern in Excel als Dateityp: Text(Tabs getrennt).*txt
Öffne oder erstelle eine Html-Seite in Dreamweaver und wähle Datei / Importieren / Tabellendaten
im sich öffnenden Fenster wähle die zuvor gespeicherte Textdatei und wähle die Option Trennzeichen "Tabulator". Außerdem lassen sich noch weitere Formatierungen für die Tabelle festlegen.
Tabellen importieren
In neueren Dreamweaver Versionen kann man auch Tabellen aus dem Browser oder Word heraus kopieren und einfügen. Wenn es nicht klappt, wähle unter Berabeiten/ Voreinstellungen, Kopieren/ Einfügen die Option: Text mit Struktur (Absätze, Listen, Tabellen usw.)
 


Frameset
Um gleich zu Anfang in eine etwas verwirrende Terminologie Klarheit zu bringen, folgender Hinweis: Frameset bedeutet in der Dreamweaver Hilfe; erstens die Seite die die den Html-Code für das Frameset enthält und zweitens den ersten Teil dieses Html-Codes siehe unten

erschaffen:
View, Frame border
Ansicht / Visuelle Hilfsmittel / Frame Rahmen
alt klick auf Rand und Frames in Fenster ziehen

unterteilen
:
Modifizieren / Frameset / Frame ... teilen
Modify, Frameset, split Frame oder Alt-klick auf Rand oder Rahmen, verschieben,

Frameseite löschen
Alt auf Rahmen, Rahmen nach außen schieben, über den Rand des Programmfensters hinaus

Eigenschaften
:
Window , Frames
Fenster / Frames
Frame Inspector und Eigenschaften- Fenster
das ist der Frame Inspector, (Fenster / Frames)

einzelne Seite im Frameset wählen:
alt klick auf der Seite dann Eigenschaften- Fenster 
oder im Frame Inspector die gewünschte Seite wählen

Frameseite wählen:
auf Rand klicken dann Eigenschaften- Fenster
oder im Frame Inspector auf Rand klicken, der das Frameset umschließt.
Sehr schön erkennbar besonders bei nested (verschachtelte) Frames, die Frames haben dicke dreidimensionale Ränder, die einzelnen Seiten gestrichelte Linien

Frameset und Frame Einstellungen:
Frameset Properties: Eigenschaftenfenster bestimmt die Dimensionen der Frames und die Farbe und Breite der Ränder zwischen den Frames (damit beginnt der html code <Framesets....>)
Frame properties bestimmt den Namen des Frames, source file, margins, scrolling usw. (im html code beginnt die Zeile mit  <Frame scr....>)

Rand- oder Rahmenbreite bestimmen
,
auf Rand klicken, Eigenschaften- Fenster (die border Einstellungen für einzelne Frames haben Vorrang vor den Frameset Border Einstellungen, siehe oben )

Speichern
Frameseite speichern: File / Save Frameset
Datei / Frameset speichern
einzelne Seiten speichern: auf Seite klicken, File /Save
Datei / Frame speichern
alles Speichern: File / Save all (logisch)
Datei / alle Frames speichern

ein link zwei Seiten
2 Seiten in 2 Framefenstern über einen link aufrufen
Textstelle oder Bild markieren und im Eigenschaften- Fenster unter Link # Zeichen einfügen.
Behavior Inspector öffnen + Zeichen anklicken "Go to Url" wählen
für jedes Framefenster gewünschten link aussuchen
WICHTIG !! man darf keine Framenamen wie top, parent, self oder blank vergeben.
Den Fehler hab ich mal gemacht und mich gewundert, wieso es nicht funktionierte. Böse Falle!

Style Sheet
mit einem Style Sheet kann man Schriftformatierungen als Style definieren und bestimmten Textpassagen zuordnen.
Dabei kann man entweder die üblichen Tags wie z.b. <H1> formatieren
oder man erstellt eigene Style Sheets, welche man dann später im Body den entsprechenden Textpassagen zuweist. siehe unten Selektoren
Text / CSS Stile / Neuer Stil oder Fenster/ CSS-Stile, unten Plus Symbol

 
Style Sheet zuweisen
hat man einen eigene Style Sheet erstellt "benutzerdefinierten Stil erstellen (Klasse)"kann man diesen einer markierten Textstelle oder einem Tag zuweisen. Den Tag kann man auf Leiste unter der Seite auswählen. Im Eigenschaftenfenster kann man unter Stil den Stil auswählen.
Fenster / CCS Stile öffnet das Fenster in dem alle Stile aufgeführt sind. Unten im Fenster befinden sich die Symbole für Stylesheet anfügen (externe CSS Datei mit der Seite verknüpfen), neuen CSS Stil erstellen. Style Sheet bearbeiten, Style löschen.
Will man eine Style Sheet Zuweisung rückgängig machen markiert man die Textstelle oder wählt den Tag aus und wählt im Eigenschaftenfenster unter Stil die Option "kein".
 
 
 
 
 
Um Font-Tags durch CSS span-Tags zu ersetzen, bietet sich die Suchen-Ersetzen Funktion an. Siehe dort das Thema reguläre Ausdrücke.

CSS Stile mit Dreamweaver

Eine neue Stylesheetdefinition kann man über das Plus-Symbol unten im CSS-Stile Fenster erzeugen. Hierbei kann man auswählen ob der Stil nur für das Dokument oder innerhalb einer extern ausgelagerten Stylesheetdatei definiert werden soll.

Die exterene Stylesheetdatei kann man dann mit allen Dokumenten verknüpfen. Im CSS-Stile Fenster klicke unten auf das Kettensymbol um eine externe Stylesheetdatei mit dem Html-Dokument zu verknüpfen. Dabei kann man auch den Medientyp angeben. So kann eine Stylesheetdatei für Bildschirmausgabe definiert werden und eine andere für die Ausgabe im Druck. Diese Ansichte kann man sich in Dreamweaver auch anzeigen lassen mit Ansicht/ Stilwiedergabe/... Über Ansicht/ Symbolleisten/ Stilwiedergabe kann man schnell zwischen den verschiedenen Ansichten wechseln.

Um einen schon definierten Stil in eine externe Stylesheetdatei zu verschieben, markiere diesen und wähle mit rechter Maustaste "CSS-Regeln verschieben". Man kann die Stile auch im CSS-Stile Fenster verschieben. In älteren Versionen konnte man lokal definierte Stile über Datei exportieren in einer externen Datei speichern.

Es ist sinnvoll sich ein paar Stylesheetdateien anzulegen, beispielsweise für Schrift, Layout und Formularelemente. Bei selbst vergebenen Namen sollten die Namen sinnvoll sein und nicht etwa die Formatierung beschreiben, denn diese kann sich ändern. "info" ist somit ein sinnvollerer Name als "verdanaklein".

CSS Syntax

Selektor{

Eigenschaftbezeichner: Wert;

Eigenschaftsbezeichner: Wert;

}

body,td,th {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: small;
}

Arten von Selektoren

Will man einen Html Tag bestimmte Formatierungen zuweisen wählt man
"Html Tag neu definieren" und wählt oben aus dem Menü Tag: entsprechenden Html Tag aus
Will man einen eigenen Style Sheet definieren wählt man
"benutzerdefinierten Stil erstellen (Klasse)"

Selektoren bestimmen wie ein Bereich selektiert und die Eigenschaften auf diesen Bereich angewendet werden. Es gibt folgende Arten:

Selektor Syntax Zuweisung Beschreibung
Klassen-Selektoren .stilname {
Eigenschaft:Wert;
}
<span class="stilname">bla</span> Ein Punkt wird vor dem selbstvergebenen Namen vorangestellt (Unix-Namensregel beachten). In Dreamweaver ist es nicht nötig den Punkt zu schreiben. Klassen werden einem bestimmten Tag zugewiesen.
table.stilname{
Eigenschaft:Wert;
}
<table class="stilname></table> Klassen können auch für bestimmte Tags vergeben werden.
table.stilname td{
Eigenschaft:Wert;
}
<table class="stilname></table> In diesem Beispiel definiert man die Eigenschaften einer Tabellenzelle innerhalb der Klasse, welche einer Tabelle zugewiesen wird.
Tag-Selektoren

body, td, th{
Eigenschaft:Wert;
}

  Html Tags mit Ausnahme von nicht zu schließenden Tags <br> können Stile zugewiesen werden. Sie werden automatisch zugewiesen. Will man die Eigenschaften auf mehrere Tags anwenden werden diese mit Kommata getrennt aufgeführt
ID- Selektoren #stilname{
Eigenschaft:Wert;
}
<div id="stilname">bla</div> Jedem Element kann man einen ID Selektor zuweisen. Vor dem selbstvergebenen Stilnamen wird ein Gatterzeichen gesetzt.
Kontext- Selektoren a:hover{
Eigenschaft:Wert;
}
  Kontext Selektoren wirken auf bestimmte Eigenschaften eines Elements, wie beispielsweise bestimmte Zustände von Links. Es gibt aber noch mehr Kontext Selektoren, als die Linkselektoren, die man sich in Dreamweaver aussuchen kann.
  #stilname a:link{
Eigenschaft:Wert;
}
<a href="home.htm" id="stilname">linktext</a> Hier wird ID-Selektor und Kontextselektor miteinander verbunden. Selbstverständlich ist das auch mit Tag-Selektoren möglich.
 

#stilname p, #stilname td, #stilname th{
Eigenschaft:Wert;
}

<p id="stilname">bla bla</p> Hier werden mehrere Tag Selektoren mit einem ID-Selektor verknüpft,

CSS Layout mit dem Boxmodell oder div-Tag

Beispiel Boxmodell

Über die Registerkarte Layout kann man Div Tags einfügen. Gibt man keine weiteren Angaben an, wird das Div-Tag an der Stelle eingefügt, an der sich der Cursor befindet. Befindet sich der Cursor innerhalb eines Div-Tags so erstellt man ein verschachteltes Div-Tag. Markiert man einen Bereich und erstellt dann ein Div-Tag so wird der Bereich von dem Div-Tag umschlossen.

Die Kombination von Div-Elementen mit CSS ermöglichen eine pixelgenaue Aufteilung der Seite. Über die Eigenschaft Position: absolute und weitere Angaben wie width und hight etc erstellt man ein Seitenlayout. In der Registerkarte Layout kann man über den Button AP-Elemente die Rahmen aufziehen, die dazugehörigen CSS-Definitionen erstellt Dreamweaver automatisch. Sie werden absolut positioniert. In früheren Versionen hießen AP-Elemente Ebenen oder Layer. Auch die Bezeichnungen CSS-P-Element oder AP-Div bedeuten das gleiche.

Im Fenster Ap-Elemente werden die Ap-Elemente aufgeführt. Die Option "Überlappung verhindern" sollte aktiviert sein.
Ziehen Sie die Ap-Elemente mit gedrückter Maustaste auf. Verwenden Sie Hilflinien, die sie sich aus den Linealen auf die Bühne ziehen können. Verschieben Sie die Ap-Elemente an dem Anfasser oben links. Skalieren Sie die Ap-Elemente an den weiteren Anfassern. Stellen Sie die Größen und Positionierungen im Eigenschaftenfenster ein. Dort können Sie auch die Namen und weitere Optionen einstellen. Wenn Sie ein Ap-Element mit der Entf-Taste löschen, sollten Sie auch den dazugehörigen CSS-Stil im CSS-Stile Fenster löschen.

Verschachtelte AP-Elemente

Ap Elemente lassen sich verschachten. Diese Option stellt man unter Bearbeiten/ Voreinstellungen / Ap-Elemente ein. Außerdem sollte im Fenster AP-Elemente die Option Überlappung verhindern deaktiviert sein. Die Verschachtelung findet nur statt, wenn man innerhalb eines vorhandenen Ap-Elements ein weiteres zeichnet. Im Fenster Ap-Elemente kann man die Elemente verschieben und somit auch aus einer Verschachtelung lösen, indem man aus der hierachischen Baumstruktur herausschiebt. Verschiebt man in diesem Fenster ein AP-Element mit gedrückter Strg Taste auf ein anderes Ap-Element so wird es als untergeordnetes Element in dieses verschachtelt. Stellt man im Eigenschaftenfenster die Eigenschaft visible (Sichtbarkeit) auf inherit, so wird die Sichtbarkeit des übergeordneten Elternelements übernommen.

 

Div-Tag oder AP-Element mit absoluter Positionierung

 

Positionierungs Typ statisch, relativ, absolut, fixed
Unter Positionierung stellt man den Typ ein, es ist die CSS Eigenschaft "position"
Beispiel statisch relativ
Beispiel Boxmodell
Beispiel absolut verschachtelt
Beispiel fixed
 
 

Positionierung mittig, rechts, links
Position center
Position rechts
 

Das Thema bei Selfhtml

Weite Höhe

Mit width bestimmt man die Weite eines Elements, mit hight die Höhe.Erlaubt sind numerische Angaben. Außerdem kann man min-width oder max-width (bzw. hight), einen minimalen oder maxmalen Wert definieren.

Overflow

Hat man Weite oder Höhe definiert, kann man mit der Eigenschaft overflow bestimmen, was passieren soll, wenn der Inhalt größer ist als die angegeben Werte für Weite oder Höhe.

Beispiel

hidden, der Bereich wird nicht angezeigt

visible der Bereich wird angezeigt

scroll es enstehen Scrollleisten

auto der Browser entscheidet, was passieren soll, so können auch Scrollleisten entstehen

 

Float

Mit der Eigenschaft float kann man bestimmen, ob der nachfolgende Inhalt das Element umfließt. Mögliche Wert sind:

left
right
none

Beispiel

Erst ab CSS2.1 ist es nicht mehr nötig die Eigenschaft width zu definieren. Man kann die Eigenschaft float auch einsetzen, um div-Tags nebeneinander zu setzen. Außerdem kann man über die Eigenschaft clear die float Eigenschaft verhindern.
Beispiel

Formular mit CSS
Hier ein Beispiel, angelehnt an ein Videotutorial von lupin3000.
zum Beispiel Dreamweaver CSS Formular

Div Tag mit 100 % Höhe
Auch dieses Beispiel wird in einem Videotutorial bei lupin 3000 erklärt
zum Beispiel Div Tag Höhe 100%
 

 

Layout

Hier ein paar Layout Beispiele das erste ist von Selfhtml und ist auch auf verschiedene Browserversionen optimiert. Beispiel 1
Das zweite ist von mir und ist nicht für verschiedene Browser getestet. Beispiel 2
das dritte Beispiel Beispiel Seitenlayout 3
das fünfte Beispiel ein 2 spaltiges Layout

 
Ebenen (Layer) <div>
Hier ein paar ältere Tipps, die Layer oder Ebenen heißen ab CS3 AP-Div.
Eine besondere Stärke von Dreamweaver sind die Ebenenfunktionen. Die Ebenen werden mit Inhalten versehen und per x-y-Koordinaten positioniert. <div id="Layer2" style="position: absolute;......>
Im Eigenschaftenfenster und im Fenster Ebenen werden weitere Einstellungen vorgenommen. Ebenen lassen sich per Javascript (Verhalten) ein und Ausblenden. Ebene erstellen:
a)Dreamweaver MX (und früher) Objekte- bzw. Einfügenleiste, Registerkarte Allgemein
b) Dreamweaver MX 2004 Einfügen Leiste die Registerkarte Layout
mit dem Symbol "Ebenen zeichen" ziehe gewünschte Ebenen auf.
Klickt man in die Ebene kann man Text Bilder etc. einfügen.
Klickt man die Ebene an der linken, oberen Ecke an, erscheint ein Anfasser um die Ebene zu verschieben. Im Eigenschaftenfenster kann man weitere Einstellungen vornehmen Größe, Position, Name, Farbe, Hintergrundbild etc.
Sichtb. ist die Sichtbarkeit (inherit bei nested Layern bezieht sich auf den parent Layer) soll heißen
Bei verschachtelten Ebenen wird die Sichtbarkeit der übergeordneten Ebene (Eltern) übernommen.
Z index bei mehreren Ebenen, die Anordnung oben und unten, im Sinne von welche Ebene liegt über der anderen Ebene,
Diese Anordnung läßt sich durch Verschieben in der Ebenen Palette (Fenster / Ebenen) regeln. Schiebt man jedoch eine Ebene mit der Strg Taste direkt auf eine andere Ebene, hat man einen nested Layer erschaffen, (eine Art Verschachtelung oder hierachische Gruppierung).
Verschiebbare Ebenen (drag Layer)
man kann Ebenen erstellen, die auf Webseite interaktiv verschiebbar sind (Anziehpuppe, Puzzle etc.)
Ebene erstellen,
body unten auf der Taskleiste anklicken
Verhaltenfenster öffnen
+ Zeichen / Ebene ziehen
Man kann hier jede Menge Einstellungen vornehmen, wie Einschnappen an einer bestimmten Position. Bei Puzzeln beispielsweise kann man die richtige Position unter Ablageziel definieren und festlegen, ab wann das Puzzelteil einschnappt. Unter Erweitert gibt man ein, ob die ausgewählte Ebene vorne liegt. Für einen einfachen verschiebbaren Layer kann man diese Einstellungen außer Acht lassen. Hier ein paar Beispiele mit dieser Technik. Phantasmanien und Interactive Buddha und Noch ein Buddha
Ebenen ein und ausblenden
Man kann Ebenen auch für Linkhinweise nutzen, die beim Berühren eines Links eingeblendet werden. Erstelle eine Ebene mit gewünschtem Text, und wähle im Eigenschaftenfenster unter Sichtb. die Option hidden . Erstelle einen Link, wähle diesen aus, und klicke im Verhaltenfenster auf das Pluszeichen. Wähle Ebenen ein/ausblenden. Wähle gewünschte Ebene aus und klicke auf Einblenden. Nach Bestätigung mit Okay erscheint das Verhalten im Verhalten Fenster und kann mit einem anderen Event Handler versehen werden. Wähle bei onClick den Event Handler, onMouseOver. Damit die Ebene auch wieder ausgeblendet wird, wenn der Link wieder verlassen wird, wähle den Link auf der Seite aus, und vergebe das gleiche Verhalten nocheinmal. Diesmal wähle Ausblenden und den Event Handler onMouseOut.
Ebenen Animation
Erstelle eine Ebene mit Inhalt.
Wähle Fenster/ Zeitleisten
Wähle die Ebene aus, und wähle Modifizieren/ Zeitleiste/ Objekt in Zeitleiste einfügen
im Fenster Zeitleiste sieht man die einzelnen Bilder der Zeitleiste.
Bps=Bilder per Sekunde
Auto-Wdg=Zeitleiste beim Aufruf der Seite abspielen
Schleife=ständige Wiederholung der Animation (Hinweis beachten, Bild wird hinzugefügt)
Die eingefügte Ebene erscheint als ein Balken. Klicke am Ende des Balkens in das letzte Bild der Zeitleiste. Nun kann man die Ebene auf der Seite an eine andere Position schieben. Die Position lässt sich auch im Eigenschaftenfenster über xy-Koordinaten eingeben. Will man die Zeit der Animation verändern, klickt man das letzte Bild am Ende des Balkens an und verschiebt es. Weitere Positionen oder Eigenschaften wie Sichtbarkeit, kann man auf der Zeitleiste hinzufügen, indem man den Balken an gewünschter Stelle mit rechter Maustaste anklickt und aus dem Kontextmenue, Schlüsselbild hinzufügen wäht. Ändere dort die Position oder die Eigenschaft der Ebene. Man kann die Zeitleiste über Links und Verhalten starten, stoppen. etc.


Quelltext Style Sheet Beispiele
Wer sich etwas näher mit der Materie beschäftigen will, findet hier einige Seiten mit Style Sheets und einigen Erklärungen, die ich zum großen Teil aus Stefan Münzen's Selfhtml entnommen habe. Es gibt verschiedenen Arten von Style Sheets Dreamweaver benutzt Unterklassen, siehe dazu folgende Beispielseite das ist eine Rubrik meiner Webdesign Tips


Kommentar
ein Kommentar erscheint nicht im Browser, er dient dazu den Menschen, die sich mit dem Html Code der Seite beschäftigen Hinweise zu geben,
Objekte Fenster, Invisibles, Insert Coment (Symbol)
Fenster Objekte / Unsichtbare Elemente / Kommentar Einfügen (Symbol)
oder Menü: Insert, Comment
Kommentar im Eigenschaften- Fenster eingeben
Änderungen im Eigenschaften- Fenster (evtl. View, Invisible Elements)
Ansicht / Visuelle Hilfsmittel / Unsichtbare Elemente

im Html-Code erscheint der Kommentar in folgenden Tags
<!-- hier steht der einzeilige Kommentartext -->
<!-- hier steht der mehrzeilige Kommentare //-->

Audio, Sound einbinden
Dreamweaver 3 hat ein Objekt in der Objectspalette / Media /audioembed
für Netscape braucht man das embed tag, hier ein paar Quelltextbeispiele

Hintergrundsound mittels embed (MX)
Beispiel
Wähle unter Einfügen "Medien" und dort das Symbol Plugin.
Gebe die Audiodatei ein.
Im Eigenschaftenfenster gebe Breite und Höhe 2 ein.
Füge anschließend 3 Parameter durch klick auf das Pluszeichen hinzu.
hidden / true
autostart / true
loop / true


Windows Media Player / Active X
Beispiel
Wähle aus dem Einfügen Menü"Medien" das Symbol "Active X"
Im Eigenschaftenfenster gebe Breite 320 und Höhe 46 ein.
Unter Class Id gebe den Code für den Windows Media Player ein:
CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95
Füge einen neuen Parameter ein (Pluszeichen)
Bezeichnung: FileName
Wert: absoluter Pfad zur Audio Datei

Real Audio (mit extra Kontrollfeld)
Beispiel
Wähle aus dem Einfügen Menü"Medien" das Symbol "Active X"
Im Eigenschaftenfenster gebe Breite 320 und Höhe 46 ein.
Unter Class Id wähle Real Player aus der Drop-Down Liste
Breite und Höhe, Wert 0
Füge ein paar Parameter mit dem Pluszeichen ein

Bezeichnung: src / Wert: Pfad zur Audio Datei
Bezeichnung: console / Wert: musik1
Aktiviere dann die Option Einbetten im Eigenschaftenfenster
Für das Steuerelement wird ein zweites Active X Element wie oben beschrieben eingefügt.
Auch hier wieder mit der Class ID Real Player.
Breite 350 Höhe 36
Hier werden folgende Parameter hinzugefügt:
Bezeichnung: controls / Wert: controlpanel
Bezeichnung: console / Wert: musik1
Auch hier wird wieder die Einbetten aktiviert

Real Audio Film
Beispiel
Verfahre genauso, wie gerade beschrieben
gebe anstatt, dem Pfad zur Audio Datei den Pfad zur Filmdatei an
Füge im zuerst beschriebenen Active X Element folgenden Parameter hinzu
controls / ImageWindow


Einfügen Leiste ehemals Objekte Palette
in der Objekte Palette (Fenster / Objekte) findet man fast alles was man so braucht, um beispielsweise Bilder, Tabellen, Flashfilme, Layer etc einzufügen.
am besten man geht die einzelnen Menüpunkte (keiner schwarzer Pfeil) mal durch , standardmäßig gibt es:
"Allgemein", "Formulare", "Head", "Spezial", "Unsichtbare Elemente ", "Zeichen"
In Dreamweaver MX sind noch weitere hinzugekommen. Dort befindet sich die Einfügen Leiste oberhalb der Seite.

Dreamweaver erweitern
Mit neuen Objekten und Verhaltensweisen aus dem Internet hat man die Möglichkeiten die Programmfunktionen zu erweitern.
Man kann unter (http://www.dreamweaver.com/) in der Exchange Section Verhalten, Objekte, Befehle etc. runterladen,
weitere coole Behaviors und Erweiterungen findet ihr bei lupin3000, Dreamweaver's Fan Page, Yaromat, Dreamworker, Dreamweaver Detective
Die Dateien haben die Endung mxp und werden mit dem Programm "Extension Manager" installiert. Der Extension Manager wird standardmäßig zusammen mit Dreamweaver installiert.

Bei alten Dreamweaver Versionen funktionierte das folgendermaßen:
die entpackten Objekte (html und gif Dateien) kommen in Dreamweaver / Configuration / Objects /.....
man kann sie in einen der dort aufzufindenden Ordner kopieren oder einen eigenen Ordner erstellen
dieser eigene Ordner erscheint dann in der Object Palette als eigenständiger Menüpunkt (oben kleiner Pfeil)
außerdem kann man die neuen Objekte unter Insert aufrufen
Behaviors kopiert man in den Ordner Dreamweaver / Configuration/Behaviors/Actions
nach einem Neustart von Dreamweaver kann man die neuen Object und Behaviors nutzen

LINKS
werden normalerweise im Link-feld des Eigenschaften- Fensters gesetzt. Bilder oder Textstelle markieren und im Eigenschaftenfenster unter Hyperlink gewünschten Link eintragen oder Ordnersymbol anklicken und Seite auswählen. Es folgt die Erklärung für das Zielscheibensymbol vor dem Ordnersymbol.

Links mit Site und Eigenschaftenfenster erschaffen
Site Fenster in der minimierten Darstellung aufrufen (standardmäßig am rechten Rand
Scrolle Dateien und Ordner so, dass man die Seite sieht, auf die der Link verweisen soll.
In der Entwurfsansicht, Bild oder Textstelle für Link markieren.
Im Eigenschaftenfenster, neben Link-Feld das Symbol "Auf Datei zeigen " (Zielscheibensymbol) anklicken
und mit gedrückter Maustaste auf die gewünschte Seite im Site Fenster ziehen (drag and drop)

Anchor setzen
Aus der Einfügen Leiste (ehemals Objekte Palette) Fenster/ Einfügen /
Liste Allgemein, Anker Symbol anklicken
Objekte Palette / unsichtbare Elemente / Anker Symbol
Name vergeben (um allen Problemen aus dem Weg zu gehen, benutze ich keine Umlaute und Leerzeichen)

link zum Anchor erstellen
Text oder Bild markieren,
Eigenschaftenfenster im Link Feld, # Zeichen eingeben und Name des Anchors angeben
Bei Macromedia gibt es eine schöne Erweiterung ("Anchor" von Scott Richards), wo man sich den Ankerlink aus einer Liste auswählen kann.

link zum Anchor auf anderer Html-Seite
im Eigenschaftenfenster fügt man im Feld "link" das # Zeichen ein, sowie den Namen des Anchor
hinter dem link, der zu der entsprechenden Seite führt
seite.html#anchorname

Links in Dreamweaver aufrufen
Klickt man in der Entwurfsansicht mit gedrückter Strg Taste einen link doppelt an, so springt man zur Seite oder Anchorstelle in der Arbeitsumgebung von Dreamweaver. Toll !!!

 
Image Maps
hier definiert man verschiedene Bereiche eines Bildes per x-y Koordinaten und weist ihnen verschiedene links zu

Bild einfügen mit Objekte Fenster,
Eigenschaften- Fenster, Map button anklicken, es öffnet sich das Image Map Menü
Name für Image map vergeben
mit Rechteck-, Kreis- oder Linientool zieht man mit gedrückter Maustaste den gewünschten Bereich und vergibt den Link und eventuell das Target-Frame-Fenster und den alternativ Text,


Base Target
oft hat man in einem Frameset eine Navigationsseite am Rand mit Links zu den einzelnen Seiten, die im Hauptfenster geöffnet werden,
um nicht bei jedem Link den Target Befehl neu setzen zu müssen, kann man auch im Head mit "base target" ein Framefenster definieren, in dem alle Seiten geöffnet werden, wenn kein anderer Target Befehl gesetzt ist, ich habe leider keinen dreamweaver button gefunden, der dieses, ohne Korrektur im Html Code, ermöglicht,

Objekte Fenster, Head; Basis einfügen
Href Feld freilassen
Target, gewünschten Framenamen angeben, oder falls nicht möglich _parent oder irgendwas anderes anklicken
Code und Entwurfsansicht einblenden, button oben links unter der Menüleiste um den Quellcode zu bearbeiten
oben im Head steht die Zeile:
<base href="" target="_parent">
ändern in:
< base target="framename">

Auf der Macromedia Homepage gibt es eine Erweiterung für diesen Zweck.
Der offizielle Dreamweaver base target Befehl, dient eigentlich dazu dazu die genaue Url im WWW zu definieren, verhindert die offline Anzeige
Formulare
man kann in html interaktive Formulare erstellen, das sind Textfelder in die der User Einträge machen kann um sie anschließend per Mausklick auf einen Button als email zu versenden oder um Java Script oder CGI Script Programmierungen zu starten (Gästebuch Einträge). Der Einfachheit halber erkläre ich hier nur die Möglichkeit das Formular per email zu versenden.

Als erstes muß man das Formular erstellen mit
Einfügen / Formular oder mit der Objekte Palette Formulare wählen (oben, kleines schwarzes Dreieck) und Formulare einfügen (erster Button)
um es angezeigt zu bekommen wähle Ansicht / Visuelle Hilfsmittel / Unsichtbare Elemente
Eigenschaften- Fenster Namen vergeben (für email Form nicht nötig), Methode Post (um die Formulardaten per email zu übermitteln),
Aktion Verweis für email angeben z.B. mailto:meine@EmailAdresse.de
etwas vermisse ich hier allerdings für das Email Formular und zwar gehört in das form tag noch der Eintrag enctype="text/plain" am besten vor die Klammer >, wird dieser Eintrag nicht gemacht, werden die Daten in der ankommenden email als Datei angehängt und sind ziemlich unleserlich und zwar alles in einer Reihe mit doofen + Zeichen anstatt Leerstellen, also irgendwie unleserlich. Man kann in das Formfeld auch eine Tabelle anlegen, um die geschrieben Erklärungstexte und die Textfelder besser ordnen zu können,

Textfeld
das Textfeld sowie alles andere kommt in die Form (gestrichelte Linie)
Objekte Palette (Formulare) Textfield einfügen (button oben rechts)
Eigenschaften- Fenster: Textfield
Name vergeben (der Name sollte möglichst treffend sein, da er in der email als Beschreibung für den Eintrag erscheint
Zeichenbreite: Zahl vergeben wieviele Buchstaben das Textfeld breit sein soll
Max .Zeichen wieviele Buchstaben der User eingeben kann, steht hier eine größere Zahl wie bei Char Width wird der Rest gescrollt
Anfangswert: hier kann man etwas Text vorgegeben, der dann am Anfang im Textfeld erscheint, ( z.B. für eine Webpage der Eintrag: http://)
einzeilig: ein einzeiliges Textfeld wird erzeugt
mehrzeilig: mehrzeiliges Textfeld, im Eigenschaften- Fenster kann man nun die Anzahl der Zeilen angeben, wrap physical finde ich am Besten, (Zeilenumbruch)
Kennwort: der Eintrag der Users erscheint als Sternchen
Radio Button, Optionsschalter
das sind Buttons, die zwei Zustände haben, angeklickt oder nicht,( z.B. Wünschen Sie Infomaterial ja, nein)
dabei vergibt man am Besten zwei Buttons, einen für Ja einer für Nein, beide müssen den gleichen Namen haben, einer der beiden sollte Anfangsstatus aktiviert der andere nicht aktiviert haben, bei Aktivierter Wert gibt man den Namen für Ja beziehungsweise Nein ein, (dieses Ja oder Nein erscheint hinterher in der email)

Schaltfläche
Objekte Fenster, Formulare, Schaltfläche einfügen
Eigenschaften- Fenster , Abschicken bzw. Zurücksetzen
am Besten 2 Buttons für beide Funktionen erstellen, der Abschicken Button schickt dann die email über den Äther

Button mit Link

Formular erstellen mit, Objekte Fenster Formulare (Ansicht, Visuelle Hilfsmittel, Unsichtbare Elemente), im Eigenschaften- Fenster Name vergeben, Aktion, Url angeben, Methode, Standard
Objekte Fenster, Schaltfläche einfügen, Eigenschaften- Fenster, Name vergeben, Beschriftung, hier den Text, der auf dem Button erscheinen soll vergeben, Aktion, Abschicken


Suchen ersetzen
Man ruft das Fenster auf, über Bearbeiten / Suchen und ersetzen. Unter suchen nach: wählt man die Art des zu durchsuchenden Textes (Quelltext, Text, Text (erweitert), spezifisches Tag). Spezifisches Tag probiert man am Besten mal auf einer fast leeren Seite aus, auf der sich lediglich ein Zeile mit Font Tag und einigen Attributen befindet. Auch die weiteren Optionen sind zu beachten. Die Schaltflächen erklären sich von selbst.

Suchen ersetzen abspeichern und abrufen
Will man eine Suchen und Ersetzen Funktion öfter benutzen, lässt sie sich über das Diskettensymbol abspeichern und über das Ordnersymbol aufrufen. (Eine andere Möglichkeit Code öfter aufzurufen befindet sich im Fenster Codefragmente) Doch das nur nebenbei.
Anhand des folgenden Beispiels, wird eine bestimmte Suchen Funktion gespeichert und abgerufen:
Um jeglichen Seitenrand zu verhindern muß der Body Tag so aussehen
<body MARGINWIDTH="0" MARGINHEIGHT="0" TOPMARGIN='0' LEFTMARGIN='0'>
Wir wollen nun eine Routine abspeichern, die den standardmäßig vorgegebenen body tag dementsprechend verändert,
Bearbeiten / Suchen Ersetzen
Suchen nach / Quellcode
im nächsten Feld fügen wir den Standard body tag ein, wie er auf einer neu erstellten Seite erscheint
<body BGCOLOR="#FFFFFF">
Ersetzen durch:
<body BGCOLOR="#FFFFFF" MARGINWIDTH="0" MARGINHEIGHT="0" TOPMARGIN='0' LEFTMARGIN='0'>
dann speichern wir das Ganze durch klicken auf das Disketten-Symbol
im Ordner Dreamweaver / Configurations / Querie und vergeben einen passenden Namen für die Datei
anschließend schließen wir das Suchen und ersetzen- Menü mit Schließen

Um den gespeicherten Code auszuführen (in diesem Fall eine neue Seite mit dem Standard Body Tag öffnen)
Bearbeiten / Suchen und ersetzen (Strg H) das Menü erscheint
öffnen (kleines Ordner Symbol) die zuvor gespeicherte Routine aufrufen
Alle ersetzen Schalter klicken, fertig der Seitenrand ist aufgehoben,
Nicht vergessen, darauf zu achten daß auch hier bei Suchen nach, Quellcode gewählt ist.
Natürlich kann man auch alles mögliche andere abspeichern (zum Beispiel komplizierte Tabellen),
Man kann auch im Feld hinter "Suchen nach/ Quellcode" einfach ein Schlüsselwort angeben, welches man anschließend auf die Seite schreibt und dann durch den gespeicherten Html Code ersetzen läßt.

Mehrere Seiten durchsuchen und ersetzen
Unter "Suchen in" wird eingestellt, ob die Suchen / Ersetzen Funktion auf mehreren Seiten ausgeführt wird.
1.) aktuelles Dokument
2.) Gesamte Site (Site definieren und öffnen)
3.) ausgewählte Seiten (mehrere Seiten im Sitefenster mit Strg oder Umschalt Taste markieren)
4.) Ordner (einen Ordner auswählen durch klicken auf Ordnersymbol)

Reguläre Ausdrücke
Mit der Option Reguläre Ausdrücke kann man Suchanfragen spezifizieren. Das Thema ist nicht ganz einfach aber es bietet viele Möglichkeiten. Reguläre Ausdrücke werden in vielen Programmiersprachen benutzt. z.B.: in Javascript um Eingaben in Email Feldern zu überprüfen.
* Siehe auch die Hilfe von Dreamweaver.
* Rob Christensen, englischer Artikel bei Macromedia Regular Expression Dreamweaver
* Buchtipp, Jeffrey Friedl, Mastering Regular Expressions, 2nd Edition
* www.regular-expressions.info
* deutsche Einführung Christian Prior Was sind reguläre Ausdrücke
* Linkliste im dreamworker forum
* selfhtml Reguläre Ausdrücke
* Liste aus selfhtml in meinem Javascript Tipps
* meine kleine, selbstgemachte Sammlung regulärer Ausdrücke für Dreamweaver

Folgendes Beispiel mit der Option "suchen nach Quellcode" und "Reguläre Ausdrücke verwenden" listet alle Font Tags auf (auch die Endtags).
</?font[^>]*>
Hiermit ließe sich eine Seite von allen font Tags befreien, um sie anschließend mit CSS Style Sheets zu formatieren. Hilfreich ist auch eine geschickte Kombination und Reihenfolge mit den Funktionen unter Suchen nach: spezifisches Tag.
Es folgt ein Auszug aus der Dreamweaver Hilfe.
Zeichen Entspricht Beispiel
^ Anfang der Eingabe oder Zeile ^T entspricht „T“ in „Tanzen und Singen“, jedoch nicht in „Onkel Tom`s Hütte“
$ Ende der Eingabe oder Zeile h$ entspricht „h“ in „hoch“, nicht jedoch in „Höhe“
* Das voranstehende Zeichen 0 Mal oder mehrmals um* entspricht „um“ in „Raum“, „umm“ in „summen“ und „u“ in „Kugel“
+ Das voranstehende Zeichen 1 Mal oder mehrmals um+ entspricht „um“ in „Raum“ und „umm“ in „summen“, es entspricht jedoch keiner Zeichenfolge in „Kugel“
? Das voranstehende Zeichen höchstens 1 Mal (d. h., das voranstehende Zeichen ist optional). bl?au entspricht „blau“ in „tiefblau“ und „bau“ in „vorbauen“, es entspricht jedoch keiner Zeichenfolge in „schlau“ oder „Umlaut“
. Ein einziges Zeichen außer Zeilenvorschub .ar entspricht „tar“ und „rar“ im Satz „ein Star ist rar“
x|y Entweder x oder y FF0000|0000FF entspricht „FF0000“ in BGCOLOR=#FF0000 und „0000FF“ in FONT COLOR=#0000FF
{n} Genau n Vorkommen des voranstehenden Zeichens e{2} entspricht „ee“ in „leer“ und den beiden ersten „e“ in „Seeelefant“, es entspricht jedoch keiner Zeichenfolge in „Geld“
{n,m} Mindestens n und höchstens m Vorkommen des voranstehenden Zeichens F{2,4} entspricht „FF“ in „#FF0000“ und den ersten vier „F“ in „#FFFFFF“
[abc] Beliebige der in Klammern eingeschlossenen Zeichen. Verwenden Sie einen Bindestrich, um einen Zeichenbereich anzugeben ([a-f] entspricht beispielsweise [abcdef]). [e-g] entspricht „e“ in „Bett“, „f“ in „Fluss“ und „g“ in „ganz“
[^abc] Beliebige nicht in den Klammern eingeschlossene Zeichen. Verwenden Sie einen Bindestrich, um einen Zeichenbereich anzugeben ([^a-f] entspricht beispielsweise [^abcdef]). [^aeiou] entspricht „r“ in „orange“, „b" in „buchen“ und „k“ in „ok!“
\b Eine Wortabgrenzung (beispielsweise ein Leerzeichen oder ein Zeilenumbruch) \bb entspricht „b“ in „buchen“, es entspricht jedoch nichts in „Lorbeer“ oder „Snob“
\B Eine Abgrenzung, jedoch keine Wortabgrenzung \Bb entspricht „b“ in „Lorbeer“, es entspricht jedoch nichts in „buchen“
\d Eine beliebige Ziffer. Entspricht [0-9]. \d entspricht „3“ in „C3PO“ und „2“ in „Apartment 2G“
\D Eine beliebiges Zeichen, das keine Ziffer ist Entspricht [^0-9]. \D entspricht „S“ in „900S“ und „Q“ in „Q45“
\f Formularvorschub  
\n Zeilenvorschub  
\r Zeilenumbruch  
\s Ein beliebiges, einzelnes, nicht druckbares Zeichen, beispielsweise Leerzeichen, Tabulator, Formularvorschub oder Zeilenvorschub \sbuchen entspricht „buchen“ in „jetzt buchen“, es entspricht jedoch nichts in „verbuchen“
\S Ein beliebiges, einzelnes, druckbares Zeichen \Sbuchen entspricht „buchen“ in „verbuchen“, es entspricht jedoch nichts in „jetzt buchen“
\t Ein Tabulator  
\w Ein beliebiges alphanumerisches Zeichen, einschließlich Unterstrich. Entspricht [A-Za-z0-9_]. g\w* entspricht „graue“ in „der graue Hund“ und sowohl „große“ als auch „graue“ in „der große graue Hund“
\W Ein beliebiges Zeichen, nicht jedoch alphanumerisch. Entspricht [^A-Za-z0-9_]. \W entspricht „&“ in „Hinz & Kunz“ und „%“ in „100 %“

Subexpressions
Mittels Subexpressions kann man Gruppen bilden, die man später aufrufen kann. So hat man die Möglichkeit bestimmte Bereiche zu erhalten und andere Bereiche ersetzen. Auch die Reihenfolge der Gruppen ließe sich ändern.
Beispiel alle font Tags sollen durch span Tags ersetzt werden.
Diese Zeile <font face="Verdana, Arial, Helvetica, sans-serif">Hello world.</font>
wird durch diese ersetzt: <span>Hello world.</span>
Suchen Bedienfeld
suchen: (<font[^>]*>)([^>]+)(</font>)
ersetzen: <span>$2</span>
Schließt man die regulären Ausdrücke in Klammern () ein, kann man in der Suchen und Ersetzen Funktion über Variablen auf sie verweisen. (<font[^>]*>)([^>]+)(</font>) In diesem Beispiel haben wir 3 Subexpressions, die mit $1, $2, $3 angesprochen werden können. Die Variablennamen stehen fest. Sie werden sequentiell (1, 2, 3....) erzeugt. Gibt man unter Ersetzen folgenden Code ein, <span>$2</span> wird der 2te Subexpression ([^>]+) erhalten, während alle anderen Subexpressions ersetzt werden.




List, Aufzählungslisten definieren
Mauszeiger an die gewünschte Stelle, Enter drücken um neue Zeile zu beginnen,
im Eigenschaften- Fenster rechts; "unordered list" (Punkte) oder "ordered list" (Nummerierung) button drücken
jede neue Aufzählung mit enter bestätigen,
Ende der List, 2 mal Enter,
(wenn danach schon Text existiert, sollte man folgendermaßen vorgehen)

List aus schon existierendem Text erstellen
die einzelnen Zeilen müssen alle mit Enter bestätigt sein (Paragraph)
nicht mit Strg -Enter,
dann den Text markieren, im Eigenschaften- Fenster unordered- oder ordered list button wählen

Unterpunkte im Sinne von 1a 1b etc., nested list

Bullet-Typ festlegen

anstatt Punkte kann man auch andere Symbole für unordered lists (Bullet-Listen) bestimmen, das geht aber nur über folgende Veränderung im Html-code und zwar im Anfangstag <ul> wird das Symbol definiert

<ul type circle>

<ul type square>

<ul type disk>

das sieht dann so aus

Nummerierung beeinflussen

es gibt verschieden Möglichkeiten die Nummerierung zu definieren, diese Veränderungen werden alle im Html Code vorgenommen und zwar im Anfangstag für Ordered Lists <ol>

Alphabetisch

<ol type=A>
oder für kleine Buchstaben
<ol type=a>

Römische Zahlen

<ol type=I>

Startnummer festsetzen

hier wird die Nummerierung bei der Zahl 7 gestartet, weiter geht's dann mit 8, 9...etc.
<ol start=7>

Zahl wird vorangestellt

beachte: hier wird nicht der Anfangstag <ol> verändert, sondern der Tag <li>, daher kann man auch irgendwo in der Mitte der Liste diesen Eintrag vornehmen

<li value=100>

das sieht dann so aus

  1. Listeneintrag

  2. Listeneintrag

  3. Listeneintrag

  4. Listeneintrag

  5. Listeneintrag

  6. Listeneintrag

  7. Listeneintrag

hier nochmal der gesamte Source Code für das Beispiel

<ol>
<li>Listeneintrag
<li>Listeneintrag
<li>Listeneintrag
<li value=10000>Listeneintrag
<li> Listeneintrag
<li> Listeneintrag
<li> Listeneintrag
</ol>

 

Definition List
In einer Definition List kann man Überschriften und eingezogenen Text definieren.,
Text / List / Definition List
jeder Absatz wird mit Enter bestätigt,
eine neue Zeile <br> erzeugt man mit Strg-Enter (wie gehabt)

der source Code sieht so aus:
<dl>
<dt>Überschrift</dt>
<dd>eingezogener Text</dd>
</dl>

 

Tastaturbefehle, Shortcuts

Unter Bearbeiten/ Tastaturkurzbefehle bekommt man alle Tastaturbefehle angezeigt. Oben kann man sich eine Tastaturbefehlsliste aussuchen. Wer also lieber die Kürzel von Homesite benutzt, kann sie dort auswählen. Um eigene Tastaturbefehle einzugeben, dupliziert man eine vorhanden Liste (oben rechts) wählt den gewünschten Befehl aus der Liste und drückt die entsprechenden Tasten.

Meine wichtigsten Shortcuts
geschütztes Leerzeichen Strg Shift Leertaste
<br> Zeilenumbruch Shift Enter
neue Zeile <p> Enter
Link im Entwurffenster von Dreamweaver benutzen Link mit gedrückter Strg Taste doppelklicken
Tabelle, neue Zeile Strg M
kopieren Strg C
einfügen Strg V

 


Weitere Infos im Netz

Auf meiner Linkseite findet man einige ausführlichere Seiten zum Thema Dreamweaver. Wer mir einen Link zu einer guten Dreamweaver Seite schicken möchte, kann das gerne machen, hier ein paar Vorschläge

Deutsch  
http://www.lupin3000.de/ Viele Videotutorials/ Erweiterungen ***
livedocs.adobe.com/dreamweaver/8_de/ Adobes Dreamweaver Hilfe
Dreamworker Forum Dreamweaver Forum
http://www.dw-worx.de Dreamweaver Tutorials Tipps
English  
http://www.sephiroth.it/ Dreamweaver Flash PHP
Dreamweaver's Fan Page Dreamweaver Erweiterungen
communitymx Flash Fireworks Dreamweaver
Tutorials  
http://www.drweb.de viele links zu Dreamweaver Tipps
www.etutorials.de Software Tipps
www.tutorialsuche.de Software Tipps

 



Wer Fehler findet oder mir einfach seine Meinung zu diesem Tutorial mitteilen will, schreibe mir bitte eine Email.
Den Quelltext dieser Seite sollte man sich nicht zum Vorbild nehmen.

zur Startseite

Datenschutzerklärung