
 |
Letzte Änderung:
|
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...
Site 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:
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 ( 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
/ (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:
- alle 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:
- alle neuen Dateien von der Festplatte auf den Server. Wenn man lokal einiges geändert hat, kann man somit alle neuen Dateien hochladen.
- kopiert alle neueren Dateien vom Webserver auf die Festplatte. Sind die Dateien auf dem Server aktueller als auf der Festplatte werden diese runtergeladen.
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 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 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 , "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:
Option Ebenenüberlappung im Menuefenster
verhindert das Überlappen der Ebenen, um sie anschließend in
Tabellen umwandeln zu können
wieder zurück in Ebenen
Ebenenüberlappung verhindern
Raster zeigen und am Raster ausrichten (deaktiviere ich mir immer)
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):
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 , 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
oder
-
- 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.
ö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,
unten auf der Taskleiste anklicken
Verhaltenfenster öffnen
+ Zeichen /
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 . 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
Wähle die Ebene aus, und wähle
im Fenster Zeitleiste sieht man die einzelnen Bilder der Zeitleiste.
=Bilder per Sekunde
=Zeitleiste beim Aufruf der Seite abspielen
=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, 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
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
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
vergeben (der Name sollte möglichst
treffend sein, da er in der email als Beschreibung für den Eintrag
erscheint
Zahl vergeben wieviele
Buchstaben das Textfeld breit sein soll
wieviele Buchstaben der
User eingeben kann, steht hier eine größere Zahl wie bei
Char Width wird der Rest gescrollt
hier kann man etwas
Text vorgegeben, der dann am Anfang im Textfeld erscheint, ( z.B.
für eine Webpage der Eintrag: http://)
ein einzeiliges Textfeld
wird erzeugt
mehrzeiliges Textfeld,
im Eigenschaften- Fenster kann man nun die Anzahl der Zeilen angeben,
wrap physical finde ich am Besten, (Zeilenumbruch)
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
haben, einer der beiden sollte
der andere haben, bei 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 . Unter 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,
im nächsten Feld fügen wir den Standard body tag ein, wie
er auf einer neu erstellten Seite erscheint
<body BGCOLOR="#FFFFFF">
<body BGCOLOR="#FFFFFF" MARGINWIDTH="0" MARGINHEIGHT="0"
TOPMARGIN='0' LEFTMARGIN='0'>
dann speichern wir das Ganze durch klicken auf das
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
Um den gespeicherten Code auszuführen (in diesem Fall eine neue
Seite mit dem Standard Body Tag öffnen)
(Strg H) das Menü erscheint
öffnen (kleines Ordner Symbol) die zuvor gespeicherte Routine
aufrufen
Schalter klicken, fertig
der Seitenrand ist aufgehoben,
Nicht vergessen, darauf zu achten daß auch hier bei , 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
- das ist der erste Punkt der unordered List
- das ist der erste Unterpunkt von 1
- das ist dann der zweite von 1, logisch
- Das ist der 2te Punkt der List, das sind wirklich tiefgreifende
Erkenntnisse
List erschaffen,
die Zeilen, die als Unterpunkte dienen sollen, markieren ,
im Eigenschaften- Fenster, "Text-Indent" Button wählen
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
-
Listeneintrag
-
Listeneintrag
-
Listeneintrag
-
Listeneintrag
-
Listeneintrag
-
Listeneintrag
-
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 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
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.
Datenschutzerklärung