Dreamweaver

Dreamweaver mySQL-Datenbanken

 

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

Weitere Hilfen:
Die Livedocs von Adobe
für Dreamweaver

Super Hilfe:
Bootstrap und Dreamweaver Andreas Stocker

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 Anfängern wie auch Experten nur empfehlen, schaut euch meine Vorschläge an...


Tipps & Tricks Dreamweaver CC


Dreamweaver Versionen

Diese Tipps sind nicht mehr auf dem neuesten Stand. Gerade das Thema HTML5 und CSS3 habe ich ausführlich in meinen HTML5 und CSS3 Tipps veröffentlicht.

Dreamweaver bietet auch die Möglichkeit auf einfache Art mit Datenbanken zu arbeiten. Hier können meine Dreamweaver Tipps zum Thema MySQL sehr nützlich sein.

Neuerungen in Dreamweaver CC
An dieser Stelle ein paar Tipps

Codebearbeitung in der der Entwurfsansicht Strg T

Verwendete Farben findet man im Elemente Fenster

In der Entwurfsansicht gelangt man an das Ende eines Elements, indem man die Pfeiltasten drückt. Beispielsweise um hinter einen Absatz, einen Link oder ein anderes Element zu gelangen.

 


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 Menüpunkt Datei, ab Version 4 gibt es einen eigenen Menüpunkt:

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 links nach rechts 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 dass 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, dass 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 sonstigen Elemente der Html Seite auch hochgeladen.
Der Pfeil nach unten "Abrufen" lädt 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.

Synchronisieren

Wenn man vergessen hat, welche Dateien wo geändert wurden kann man mittels Synchronisieren nur die geänderten Dateien hochladen oder runterladen:
Dabei stehen folgende Optionen zur Verfügung:

Synchronisieren:
Gesamte Site- alle Dateien
nur lokale Dateien auswählen / nur ausgewählte entfernte Dateien - Beides bedeutet nur die markierten Dateien werden verglichen und evtl. 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 kyrillische 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 kyrillische Zeichen.
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-5" />
Wenn man mehrere Seiten in dieser Sprache verfaßt, 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

Siehe auch meinen HTML Tipp Zeichenkodierung

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.

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";


Codevervollständigung mit Emmet

Emmet ist ein Tool für Webdesigner, welches in vielen Editoren läuft. Mit der Syntax von Emmet lassen sich Codevervollständigungen erzeugen und vieles mehr.

Siehe dazu die offizielle Emmet Site
In Dreamweaver CC ist Emmet integriert, so dass man in der Codeansicht die Syntax nutzen kann. Durch klicken der Tabulator Taste wird aus den Emmet Abkürzungen der vollständige Code. Es folgen ein paar Beispiele:

header

nav>ul>li*4

div>p*4>lorem

ul>li*4>{Link $}

#page>

div+div

a*5>{Hallo}

a*5>{Hallo $}

img[src="bild$.jpg" alt="Stimmungsbild" width="350" height="200".bild$]*20

 

Es gibt auch Abkürzungen für CSS Style Sheets

w300

w30p

bgc

h30

Codeformatierung

In der Codeansicht kann man sich den Code mit Einrückungen versehen, klicke dazu auf das Eimersymbol unten links in der vertikalen Symbolleiste. Man kann sich für alle HTML Elemente die Einrückungen einstellen. Gehe dazu auf Bearbeiten, Voreinstellungen, Codeformat und wähle dort Tagbibliotheken

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. So lässt sich beispielsweise ein Menü oder Spry Menü wunderbar im Nachhinein einfügen oder aktualisieren.

Vorlage in Dreamweaver MX erstellen.


Methode 1
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

Methode 2
Erzeuge eine neue Vorlage mit Datei , Neu, Leere Vorlage, wähle ein Layout. Achte darauf, dass die CSS Datei in einer extra Datei gespeichert wird.

Methode 3
Erzeuge eine neue Seite mit Datei , Neu, Leere Seite, wähle ein Layout. Achte darauf, dass die CSS Datei in einer extra Datei gespeichert wird.


Erstelle nun die Elemente die die Seite bekommen soll: Text, 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".

Extract

Creative Cloud Assets

Über Fenster / Extract bekommt man Zugang auf Dateien, die in der Bibliothek Creative Cloud Assets abgelegt sind. Es ist eine programmübergreifende Bibliothek für Adobe Programme. Einige dieser Dateien liegen bei Windowsrechnern im Ordner User, Creative Cloud Files und können dort aus der Bibliothek gelöscht werden. Klicke oben rechts auf Tutorial starten

Extract

Klicke auf PSD hochladen, um eine Datei hinzuzufügen. Klicke diese Datei an.

Man kann aus Photoshopdateien Farben, Verläufe, Breite, Höhe, sowie Texte und CSS Stile der Texte ermitteln. Klicke dazu die gewünschte Datei an und kopiere den CSS Code oder den Text. Alternativ kann man auch eine Datei anklicken und anschließend CSS in der Codeansicht einfügen. Die Codevervollständigung stellt die gewünschten Werte und Eigenschaften des ausgewählten Bildelements zur Verfügung. z.B.:

.bildelement{backgr....

Wähle oben rechts, Stile oder Ebenen

Abstände

Abstände von Dateien zueinander werden angezeigt. Klicke ein Element innerhalb einer PSD Datei an, halte die Strg Taste gedrückt und wähle ein zweites Element.

PSD Formwerkzeug

Erstelle eine Form wie Kreis, abgerundetes Rechteck o.ä. und füge Liveformeigenschaften wie Rand oder Verlauf hinzu. Diese Veräufe kann man über Extract in CSS einfügen. Auch die Randeigenschaften stehen als CSS zur Verfügung. Die gesamte Grundform lässt sich einem Blockelement zuweisen, sofern es keine Form ist, die mittels Pfadwerkzeugen erstellt wurde.

Ein Schatten als Stil definiert, wird in CSS angezeigt.

Shortcuts Extract

Strg oder Shift mehrere Dateien auswählen, um den Abstand zu ermitteln

x Quickinfo Abstand aus an

Alt - oder + Zoom

Strg 0 10o% Ansichtsgröße

E Pipette

Pfeiltasten navigieren, in der Hierachie der Dateien

Esc Löschen und Beenden

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 für zwei Seiten in Framesets

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

Siehe auch mein CSS3 Tutorial
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 Klasse oder ID den Stil auswählen. Im Kontextmenü gibt es auch die Möglichkeit mehrere Klassenstile zuzuweisen "mehrere Klassen zuweisen". Das sieht im Quellcode beispielsweise so aus: <div class="stil1 stil2">
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.

Style Sheets lassen sich definieren in

InStyle Tags auf der Html Seite

<style type="text/css">
body {background-color: #FFFF00; height: 100%;}
</style>

Hier sieht man die umschließenden Style Tags. Im CSS Editor von Dreamweaver wählt man "CSS nur für diese Seite".
In einer externen html Datei <link rel="stylesheet" href="sommer.css" type="text/css"> Die Styles werden ohne die umschließenden Style Tags auf einer Seite gespeichert mit Endung css. Auf den Html Seiten, werden links auf die Style Datei gesetzt. Im CSS Editor von Dreamweaver wählt man: "in einer externen CSS Datei"
Innerhalb eines einzelnen Html Tag <h1 style="color:red; font-size:26pt;">CSS Styles</h1> Style für einzelnen Tag.

CSS Stile mit Dreamweaver CS5 oder tiefer

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

Eine Regel oder ein Regelset legt fest wie bestimmte Elemente einer HTML-Seite dargestellt werden sollen. Ein Regel-Set besteht aus einem Selektor gefolgt von einem Deklarationsblock.

Regel oder Regelset

selector Deklaration
h2 {
Eigenschaft Wert
color: #005549;
}

Selektor{

Eigenschaftbezeichner: Wert;

Eigenschaftsbezeichner: Wert;

}

td{
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 Style Fenster braucht man den Punkt nicht zu schreiben, er wird automatisch von Dreamweaver gesetzt. 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> Nehmen wir an wir brauchen eine StyleClass für alle untergeordneten td Elemente einer Tabelle. Auf diese Weise braucht man die Klasse nur dem übergordneten table Tag zuweisen.
    <p class="stil1 stil2 "></p> Hier werden mehrere Klassen einem p Tag zugewiesen.
Tag-Selektoren

body{
Eigenschaft:Wert;
}

  Html Elementen können Stile zugewiesen werden. 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. Der Wert oder Name der id darf dokumentweit nur einmal vorkommen.
Pseudo- Selektoren a:hover{
Eigenschaft:Wert;
}
siehe auch weitere Pseudo Selektoren 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. siehe auch
  #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,
  nt-h(x) das sounsovielte ab dem sounsovielten siehe hier Jedes dritte Element ab dem zweiten. Hiermit lassen sich beispielsweise linklisten gut auswählen.

Kombinatoren

td, th, tr{} mehrere Selektoren Stil wird auf alle Selektoren angewendet
selection p{} Kindelement Leerzeichen sagt aus das p ein Kindelement von selection ist. Es kann auch ein Enkelkind sein. Also, alle p Elemente, die von einem selection Element umschlossen sind.
selection ~ p{} direkter Abkömmling p muss ein direkter Nachkömmling von selection sein
title^="Hallo"{ } Attribut am Anfang

Wenn ein Attribut mit dem String beginnt. Wäre im Beispiel gültig.
<p title="Hallo Welt">Hallo</p>

title$="Welt"{ } Attribut am Ende Wenn das Attribut mit dem String endet.
title*="neue"{ } Teil des Attributs Wenn der String innerhalb des Attributs vorkommt.
     

CSS mit Dreamweaver CS6 und höher

Ab Dreamweaver CSS ist der CSS Bereich in Dreamweaver neu erstellt worden und besteht nun aus mehreren Bereichen innerhalb des Bedienfeldes CSS Designer.

Quellen

Klickt man ganz oben im CSS Designer, Bereich Quellen auf das Pluszeichen kann man eine Stylesheet Datei anhängen oder neu erstellen oder auf der Seite definieren (style Element). Hat man Stylesheets in mehreren Dateien definiert, kann man unter Quellen auswählen, welche man sich anzeigen lassen will, oder wo (in welcher Datei) man einen neuen Selektor erstellen will.

Selektoren

Im Bedienfeld Selektoren kann man Selektoren mit dem Pluszeichen definieren. Klickt man auf einen vorhandenen Selektor und klickt dann auf das Pluszeichen, wird der neue Selektor direkt unter den zuvor ausgewählten erzeugt. Mit der Lupe CSS Regeln filtern kann man beispielsweise einen vorhanden Selektor suchen, indem man die ersten Buchstaben eingibt. Oder wenn man dort die Raute eingibt, bekommt man alle vorhandenen id Selektoren angzeigt. Gleiches gilt für den Punkt und Klassen.

Hat man noch keinen Selektor für eine id oder eine Klasse erzeugt, kann man auch in dem Eingabefeld für neue Selektoren (Pluszeichen) eine Raute oder einen Punkt eingeben und man bekommt alle vorhandenen id oder class Elemente zur Auswahl angezeigt.

Eigenschaften

Nachdem man einen Selektor erstellt oder ausgewählt hat, kann man in dem Eigenschaftenfenster, die Eigenschaften definieren oder sich vorhandene Eigenschaften anzeigen lassen. Durch aktivieren, der Option "nur verwendete" bekommt man nur die Eigenschaften angzeigt, die schon definiert wurden.

Das Eigenschaftenfenster hat oben ein paar Symbole für Layout, Text, Rahmen, Hintergrund, benutzerdefiniert, um die Fülle an Eigenschaften zu unterteilen und eine Auswahl oder Definition zu erleichtern. Zahleneingabefelder lassen sich auch als Slider benutzen, indem man die Maus nach links und rechts zieht. Durch Anklicken des Wertes werden die möglichen Werte zur Auswahl angezeigt.

Text und Schrift

siehe auch meinen CSS Tipp Schriftarten bereitstellen
Die Auswahl einer Schriftart font-family bietet die Möglichkeit eine von über 500 Adobe Fonts einzubinden. Dazu klickt man im sich öffnenden Fenster auf "Schriften verwalten" und wählt eine Schrift aus. die Schrift wird mittels eine Javascriptdatei eingebunden. Je nachdem welche Schriftgröße man ausgwählt hat, werden eventuell mehrere Schriftschnitte geliefert, die nicht benötigt werden. Um das zu bereinigen, klickt man auf Befehle / Script Tag für Webschriften bereinigen

 

CSS Layout mit dem Boxmodell oder div-Tag

Ü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 verschachteln. 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 hierarchischen 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

Sonderfall padding/ margin mit negativen Werten

Beispiel margin mit Negativen Werten

Positionierung Typ statisch, relativ, absolut, fixed

Unter Positionierung stellt man den Typ ein, es ist die CSS Eigenschaft "position"
Beispiel statisch relativ
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

Display

Display inline, block....
Elemente haben bestimmte Display-Eigenschaften, so werden beispielsweise Tabellen und Divs untereinander gesetzt, oder um es besser auszudrücken, sie nehmen die gesamte Breite des Elements ein, in dem sie sich befinden. Das ist die Display Eigenschaft block.
<span><strong> sind dagegen Inline Elemente und verhalten sich entsprechend (inline- in der Zeile). Mit der CSS Eigenschaft Display kann man diese Eigenschaft ändern.
display: block;
Wie man in dem entsprechenden DropDown Menü in Dreamweaver sieht, gibt es noch andere Display Eigenschaften.

 

Float

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

 

Dazu hier ein guter Beitrag: http://css-technik.de/css-examples/219_9/

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
halbtransparente Hintergrundbilder
ein Beispiel für Formatierungen von links

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 hierarchische Gruppierung).

Verschiebbare Ebenen (drag Layer)

Siehe auch meinen Tipp Greensock

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

siehe auch meinen CSS3 Tipp Display

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 Kontextmenü, Schlüsselbild hinzufügen wählt. Ändere dort die Position oder die Eigenschaft der Ebene. Man kann die Zeitleiste über Links und Verhalten starten, stoppen. etc.

CSS Div anstatt Tabellen

Auf der folgenden Seite gibt es ein paar typische Tabellenlayoutbeispiele und wie man diese in ähnlicher Form mit Div-Tags anlegen könnte. Tabelle zu Div

Schriftarten mit CSS

Die beste Möglichkeit Schriftarten mit CSS zu definieren geht folgendermaßen. Man definiert auf der root-Ebene eine Schriftart von 62.5% und weist dann den einzelnen Elementen die Schriftarten mit em zu. Dabei ergibt font-size:1.2em; eine Schriftgröße von 12 Pixeln.

html { font-size:62.5%}
body {
font-size:1.2em;
font-family:Verdana, Geneva, sans-serif;
color:#333333;
}

Background

in CSS3 gibt es einige neue Eigenschaften
Größe und. der Bereich über den sich der Hintergrund erstreckt. siehe w3schools
Größendefnition contain / cover siehe w3schools

Schatteneffekte und runde Ecken mit CSS3

Mit CSS3 kann man Schriften, sowie auch Boxen schöne neue Schatteneffekte zuweisen, die im Opera, Chrome und Firefox 3.5 dargestellt werden. Siehe dazu auch diese Seite von Peter Krömer:

#apShadow {
background-color: #FBCC6A;
text-shadow: #ffffff 1px 1px 1px;

-moz-box-shadow:5px 5px 6px #000000;
-webkit-box-shadow:5px 5px 6px #000000;
box-shadow:5px 5px 6px #000000;

border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
}


Die Parameter bei text-shadow sind, Farbe, horizontaler- und vertikaler Abstand sowie Weichzeichnung.
Die Paramater für box-shadow sind ähnlich, hier wird lediglich der Farbwert als letztes aufgeführt.

Für Mozilla Browser nehme: -moz-box-shadow:
für Safari und Chrome -webkit-box-shadow:
ansonsten box-shadow:
IE kann es nicht.
Auch der abgerundete Border Radius, braucht die Präfixe -moz- und -webkit-
Danke für diesen Box Shadow Generator

 

CSS Übergänge

In Dreamweaver CS6 gibt es die Möglichkeit Übergänge als Animationen zu erstellen. Erzeuge eine neue Style Sheet class z.B. mit Namen "special". Definiere eine oder mehrere Eigenschaften, beispielsweise Hintergrundfarbe: blau. Wähle Fenster / CSS Übergänge. Klicke auf das Pluszeichen, um einen neuen CSS Übergang zu erstellen. Es öffnet sich ein Fenster. Wähle unter Zielregel die zuvor erstellte Klasse "special". Vergebe die Eigenschaften und Zeit. Beispiel

Div Elemente verhalten sich wie Tabellen

Es kann ja mal vorkommen, dass man für Div-Elemente eine tabellenartiges Verhalten benötigt. Beispielsweise, um nebeneinanderliegende Div-Elemente auf gleiche Höhe zu bringen.

<style type="text/css">
.table {
display:table;

}
.table div {
display:table-row;

}
.table div div {
display:table-cell;
width:300px;
background-color: #FBCC6A;
border: 1px solid #937640;
font-size: 1.5em;
margin: 10px;
padding: 10px;
}

</style>

Um eine Reihe mit 2 Spalten zu erzeugen könnte man die Div-Elemente folgendermaßen einfügen:

<div class="table">
<div>
<div><p>Foo</p></div> <div><p>Foo</p></div>
</div>
</div>

Foo

Foo

Elemente auf Seite zentrieren ohne Tabelle

Siehe dazu auch dieses Beispiel von mir

html{height:100%; width:100%; display:table;}

body{
height:100%;
widht:100%;
display: table-cell;
text-align: center;
vertical-align: middle;}

Mehr zu dem Thema findet ihr bei Peter Krömer: "Die Rückkehr der Tabellen"

Oder hier http://www.digital-web.com/articles/everything_you_know_about_CSS_Is_wrong/

960 CSS Grid System

In der Gestaltung oder Aufteilung von Webseiten haben sich vordefinierte Grid Systeme bewährt, wie beispielsweise das 960 Grid System. Man bindet eine vordefinierte StyleSheet Datei ein in der beispielsweise ein 12-, 16- oder 24-spaltiges Design definiert ist. Auf der Seite erstellt man Div Container und weist diesen die dort definierten Style Sheets zu. Hier ein kleiner Schnellkurs der wesentilichen Schritte für ein 12 spaltiges Layout. Lade dir von die Datei von 960 Grid herunter und kopiere dir aus dem Code Ordner die Dateien reset.css 960.css und text.css und binde diese in deine Html Seite ein.

Für den äußersten Div Container weisen Sie die Klasse container_12 zu. Die Unterklassen werden aus den Klassen grid_1 bis grid_12 gebildet. Dabei enstpricht 1- 12 der Anzahl der Spalten, die dem Div Container zugewiesen werden sollen. Soll ein Div 4 Spalten breit sein, weisen Sie gird_4 zu. Wenn die gesamte Breite ausgefüllt werden soll, muss die Summe der Spalten dem zugrunde liegenden Grid entsprechen in diesem Beispiel 12.

<div class="container_12">
<div class="grid_4"></div><div class="grid_8></div>
<div class="grid_6"></div><div class="grid_6></div>
</div>


Man kann die Div Container verschieben. Wenn Sie beispielsweise die beiden Blöcke aus obigen Beispiel grid_4 und grid_8 vertauschen möchten, benutzen Sie die Klassen push und pull:
<div class="grid_4 push_8"></div><div class="grid_8 pull_4"></div>

Man kann Weißräume erzeugen. prefix erzeugt einen Weißraum links und suffix einen Weißraum rechts. So können Sie beispielsweise 2 4-spaltige Blöcke rechts und links folgendermaßen erzeugen:
<div class="grid_4"></div><div class="grid_4 prefix_4"></div>
Achten Sie auch hierbei darauf, dass die gesamt Spaltenzahl eingehalten wird.

Man kann die Div-Container verschachteln und so weitere Aufteilungen vornehmen. Damit es keine Probleme mit dem Anfangs und End margin gibt, muss der erste Container einer weiteren Aufteilung mit alpha und der letzte mit omega gekennzeichnet sein:
<div class="grid_4"></div><div class="grid_8><div class="grid_5 alpha"></div><div class="grid_3 omega"></div></div>

Mit clear und clearfix wird die float Eigenschaft aufgehoben siehe Dokumentation

Man kann sich mit einem Generator auch andere Grid-System erzeugen lassen (siehe Homepage). Gute Dienste bei der Gestaltung leistet auch das Firefox Plugin "Gridfox". In der Download Datei befinden sich auch Dateien für Photoshop und andere Grafik Programme, die bei der Erzeugung von Grafiken für das Gridsystem nützlich sind. Für Blogs und CMS Systeme gibt es Umsetzungen des 960er Grid Systems.

Responsive Design | Mobile, Tablet, Desktop

Beispiel
Ab CS 6 stehen tolle Möglichkeiten zur Verfügung Webseiten mit flexiblem Layout für verschiedene Geräte zu erstellen. Bei einer Website, die sich an die verschiedenen Bildschirmgrößen anpasst, spricht man von responsive Design. Ein andere Möglichkeit ist eine separate Version, beispielsweise mit jQuery Mobile.
Benötigt wird ein Flexibles Layout, Flexible Schriftgrößen (Prozent), Media Queries In CSS3 werden mit dem media Befehl die verschiedenen Geräte abgefragt und die Website angepasst.

 

Unter http://quirktools.com/screenfly/ kann man eine Seite auf verschiedene Geräte testen. Man hat jedoch auch in Dreamweaver die Möglichkeit in der Tableiste die Ansicht für die einzelnen Gerärte Mobile, Tablett, PC einzustellen.

Unter cssmediaqueries.com kann man sehen, welches Media Querie auf ihrem Browser zum Tragen kommt.

Der CSS3 media Befehl kann folgendes abfragen:
device-width, device-height (Breite Höhe des Browserfensters)
orientation (Quer und Hochformat)
resolution (Bildschirmauflösung)

Siehe dazu auch folgenden Link bei Heise dort wird das Folgende ausführlich erläutert.

Im folgenden Beispiel wird die Datei style.css nur geladen, wenn das Ausgabemedium ein Computerbildschirm ist.

<link rel="stylesheet" type="text/css"
href="style.css" media="screen" />
Befindet man sich innerhalb einer Stylesheet Datei kann man auch über At-Regel die Stylesheet Datei einbinden:
@import url("style.css") screen; 
Mit der At-Regel kann man auch innerhalb einer Stylesheet Anweisung medienabhängig gestalten. "sidebar" und "footer" werden im Druck ausgeblendet.

 

@media print {
div#sidebar,
div#footer { display: none; }
}
Auch folgendes Beispiel verlinkt die Stylesheetdatei nur dann wenn das Ausgabemedium ein Computerbildschirm ist, der maximal 300 Pixel breit ist.
<link rel="stylesheet" type="text/css" href="style.css" media="screen and (max-width: 300px)" /> 


Hier wird Quer oder Hochformat abgefragt, welches durch Drehung des Handys oder Tablets erfolgt und die Hintergrundfarbe geändert.

 

<style type="text/css">
@media screen and (orientation: portrait) {
body { background-color: white; }
}
@media screen and (orientation: landscape) {
body { background-color: black; }
}
</style>
Logisches Und
Mit dem Schlüsselwort and kann man Dinge miteinander verknüpfen, beide Bedingungen müssen erüfllt sein.

 

(min-width: 450px) and (max-width: 950px).

 

Verknüpfung oder Kombination
Mit Komma kann man mehrere Media Queries verknüpfen. Im folgenden gilt die Anweisung für Computerbildschirm und Projektoren. Das funktioniert weil es das gleiche Media Querie ist. Im Beispiel darunter wird eine weiteres Media Querie mit and angehängt. Die minimum Breite bezieht sich nur auf Projektor-Darstellung.

 

@import url("style.css") screen, projection; 
@import url("style.css") screen, projection and (min-width: 800px); 

Not und only

 

Das Schlüsselwort not entspricht der logischen Verneinung. Nur wenn es sich nicht um das hinter not aufgeführte MediaQuerie handelt, wird die Anweisung ausgeführt. Im folgenden Beispiel, wenn es sich nicht um Farbbildschirme handelt. Im Beispiel darunter wird die CSS Datei eingebunden, wenn es sich um einen Farbbildschirm handelt.

 

<link rel="stylesheet" type="text/css" href="style.css"
media="not screen and (color)" />
<link rel="stylesheet" type="text/css" href="style.css"
media="only screen and (color)" />


Step by Step
Erzeugen Sie eine neue Site oder öffnen Sie eine vorhandene Site.
Erzeugen Sie eine neue Seite, Datei , neues fließendes Rasterlayout
Geben folgende Spaltenanzahl ein: Mobil 2, Tablet 4, Desktop 8
Speichern Sie Stylesheetdatei, dann speichern Sie die Seite und auch hier werden Sie nochmals aufgefordert Stylesheet Dateien zu speichern.
In der Statuszeile der Seite kann man zwischen den verschiedenen Geräten wählen. Mobil, Tablet, Desktop
Es hat sich als vorteilhaft erwiesen, das Layout zuerst für das kleinste Gerät zu entwickeln. Wählen sie die Mobil Ansicht. Geben sie im Kopfbereich eine Überschrift ein. Klicken Sie hinter den grünen Kasten.
Wählen Sie im Fenster Einfügen / Layout / Div-Tag des fließenden Rasterlayouts einfügen.
Sie können eine eigene ID festlegen.
Erzeugen Sie auf gleiche Weise 3 weitere Divtags und einen weiteren für den Footer.
Das Layout für das Mobil ist fertig.
Wählen Sie in der Statuszeile die Ansicht für Tablet.
Ziehen Sie die 4 selbs terstellten Div Tags aber nicht den Footer auf halbe Größe, so dass er in 2 Spalten passt.
Klicken Sie auf das zweite selbst erstellte Div Tag oben rechts und wählen Sie: "Eine Zeile nach oben"
Machen Sie das genauso mit dem 4ten Div selbst erstellten Div Tag.
Das Layout für Tablet ist fertig. Wechslen Sie in der Statuszeile auf Desktop Ansicht.
Ziehlen Sie die 4 Div Tags auf die Größe von 2 Spalten.
Klicken Sie auf das 2te Div Tag oben rechts und verchieben sie es nach oben.
Schieben Sie auf gleiche Weise auch die anderen nach oben, bis auf den Footer, der ja nicht verkleinert wurde.
Schauen Sie sich das Layout auch im Browser an und verkleinern Sie das Browserfenster.

jQuery Mobile

Beispiel
Eine alternative zum Responsive Design, ist das sogenannte Mobile Web App beispielsweise mit jQuery Mobile. Ein "Mobile Web App" ist eine Website, welche den native Apps (die man im App Store bekommt) nachempfunden ist.
Nachteil und Vorteil ist die Tatsache, dass man 2 Versionen erstellt. Die mobile Version kann sich vom Design aber auch vom Inhalt her von der Desktop Version unterscheiden.
Mit dem Framework jQueryMobile ist es relativ einfach das Grundgerüst der Website zu erstellen. Es ist in Dreamweaver ab CS5 integriert.

Step by Step
Erzeugen Sie eine neue Site oder öffnen Sie eine vorhandene Site.
Erzeugen Sie eine neue Seite über Datei , Neu, Seite aus Beispiel, Mobile Starter, jQueryMobile mit Thema lokal
F ügen Sie in die Seite ein Metatag ein: Fenster Einfügen, Head: Meta
Attribut: Name, Wert: viewport, Inhalt: width= device-width, initial-scale=1
Speichern Sie die Seite. Es werden die dazugehörigen Dateien, wie StyleSheets und Bilder abgespeichert.
Testen Sie die Seite. Sie sehen, dass es scheinbar mehrere Seiten gibt, die jedoch in Wirklichkeit alle in einer Html Seite integriert sind. Auf der ersten Seite erscheint in der Regel die Navigation.
Um eine Seite hinter die letzte vorhandene Seite einzufügen, wählen Sie die Code Ansicht und, setzen Sie die Einfügemarke vor den </body> Endtag. Wählen Sie wieder ein Entwurfsansicht.
F ügen Sie eine weitere Seite hinzu über das Menü oder Fenster Einfügen, jQuery Mobile, Seite
Im sich öffnenden Menü können Sie eine eigene ID festlegen und bestimmen, ob Sie Kopf und/oder Fußzeile haben wollen.
Fügen Sie oben im Linkmenü einen weiteren Link hinzu. Das Linkmenü ist eine Liste. Durch Enter in der Entwurfsansicht, wird ein weiteres Listenelement hinzugefügt. Setzen Sie im Link einem Ankerverweis auf die ID, genauso wie bei den anderen Links.


Twitter Bootstrap

Das Twitter Bootstrap bietet umfassende Möglichkeiten responsive Webdesign zu erstellen. Beispiel
work-paper.de bietet ein deutsches Bootstrap Tutorial

Bei DMX Zone gibt es eine kostenlose Erweiterung, mit der man Twitter Bootstrap in Dreamweaver integrieren kann.
Eine weitere kostenpflichtige Erweiterung rundet die Sache ab.

Less CSS programmieren

In CSS gibt es oft sehr viel Schreibarbeit, die man einfacher machen könnte, wenn man ein paar Variablen und Funktionen benutzen könnte. Das ist mittels Less nun möglich.
Man kann in einer less Datei Variablen und einiges mehr benutzen. Aus dieser less Datei wird dann eine CSS Datei kompiliert. So macht CSS Spaß. Dank einer kostenlosen Erweiterung von DMX Zone ist es sehr einfach, aus einer less Datei eine CSS zu erzeugen. Außerdem werden dort auch die Möglichkeiten von less sehr schön erklärt.
less Erweiterung bei DMX Zone.



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 dass 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. Mit regulären Ausdrücken kann man Zeichenfolgen spezifizieren. Die Definitionen kann man der unten stehenden Liste entnehmen. Wenn Sie eine Textzeichenfolge suchen möchten, die eines der aufgelisteten Sonderzeichen enthält, stellen Sie dem Sonderzeichen einen Schrägstrich voran.

 

Reguläre Ausdrücke werden in vielen Programmiersprachen benutzt. z.B.: in Javascript um Eingaben in Email Feldern zu überprüfen.



 

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. Selbstverständlich kann man auch die Reihenfolge der Blöcke ändern, beispielsweise um falsch verschachtelte Tags zu korrigieren.

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.

Dreamweaver Shortcuts

Dreamweaver Shortcuts für Dummies

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 ***
http://www.adobe.com/support/dreamweaver/ Adobes Dreamweaver Hilfe
Dreamworker Forum Dreamweaver Forum
http://www.dw-worx.de Dreamweaver Tutorials Tipps
http://www.zdnet.de/tut/artikel/199907/dreamweaver_01-wc.html zdnet
http://www.reichart.net/seminar/dreamweaver/p01.html Reichart
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.tutorialsuche.de Software Tipps Super

 


Wer Fehler findet und sich die Mühe machen will, diese zu korrigieren, kann mir gerne eine korrigierte Version dieser Seite zuschicken. Wer mir einfach seine Meinung zu diesem Tutorial mitteilen will, schreibe mir bitte eine Email.