Dreamweaver

HTML & CSS Tipps vom Pixel Pastor

Tipps & Tricks Dreamweaver CC

Dreamweaver Versionen

SITE

Site Map

Site Map ändern

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

FTP Verbindung

Checkmode

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

Bereitstellen, Abrufen

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.

Neue HTML Seite, Standardvorlage ändern

Erstellt man eine neue HTML Seite liefert Dreamweaver den Code für das Grundgerüst einer HTML Seite. Unter Bearbeiten / Voreinstellungen / Neue Seite kann man ein paar Optionen einstellen.
Will man jedoch das Standard- Template der neuen Seite komplett ändern, öffnet man in der deutschen Version folgenden Ordner:
C:/Benutzer/ Windows/ AppData/Roaming/ Adobe/ Dreamweaver 2021/ de_DE/ Configuration/ DocumentTypes
erstelle dort eine neuen Ordner NewDocuments und speichere dort eine Datei Default.html
In dieser HTML Datei kannst du folgenden Code einfügen. Ersetze nicht den Doctype und ergänze nicht das charset, denn dieses stellt man ein im Dialogfeld - Neu.

Standardvorlage andere Versionen

Sollte die oben erläuterte Vorgehensweise nicht funktionieren versuche die Default.html im folgenden Ordner zu ändern.
C:\Program Files\Adobe\ Adobe Dreamweaver 2021\ configuration\ DocumentTypes\ NewDocuments

Gestaltungs-tools

Tracing Image

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

Vorlage

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

Emmet / Codekürzel

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

Code Validieren / optimieren

siehe auch dieses Adobe Help Video
Wähle unter Fentster / Ergebnisse / Überprüfung klicke auf den kleinen Pfeil oben links und wähle aktuelles Dokument w3c Das Dokument wird an den w3c Validator gesendet und die Ergebnisse im Überprüfungsfenster angezeigt. Man kann die einzelnen Punkte anklicken, um sie im Quelltext zu ändern.

Desweiteren kann man eine Seite oder die gesamte Site optimieren und nach Fehlern durchsuchen. Wähle Fenster / Ergebnisse / Site-Berichte. Wähle Aktuelles Dokument, oder gesamte Site... Klicke auf den Abspielbutton und wähle gewünschte Optionen, beispielsweise Alt-Tag fehlt, Unbenanntes Dokument und Ausführen

Unter Werkzeuge / HTML- optimieren lassen sich viele Fehler und überflüssige Elemente entfernen. Man kann auch ein spezifisches HTML - Element bestimmen, um es zu löschen, beispielsweise irgendein veraltetes Element.

Ein Tag nachträglich um eine Stelle legen

Markiere eine Stelle im Quellcode oder auch in der Entwurfsansicht. Drücke Strg T, gebe das gewünschte HTML Element ein oder wähle es aus der Vorauswahl aus.

Befindet man sich innerhalb eines HTML Elements und drückt Strg T kann man das Element bearbeiten und Attribute einfügen.

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

Tabelle, Spalten, Reihen, Zellen markieren

Tabellenzellen miteinander verbinden oder unterteilen

Größenänderung

Größen löschen

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

Tabellen sortieren (alphabetisch, numerisch)

Excel Tabelle importieren

Tabellen importieren

Frameset

erschaffen

unterteilen

Frameseite löschen

Eigenschaften

Einzelne Seite im Frameset wählen

Frameseite wählen:

Frameset und Frame Einstellungen

Rand- oder Rahmenbreite bestimmen

Speichern

Ein Link für zwei Seiten in Framesets

Style Sheet

Style Sheet zuweisen

Style Sheets lassen sich definieren in

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

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:

• CSS-Eigenschaften werden vererbt (von den Eltern an die Kinder)
• Besitzt eine Eigenschaft mehrere potentielle Werte (oder), dann werden die Werte kommasepariert (Schriften)
• Besteht ein Wert aus mehreren einzelnen Worten, setzt man diese in Anführungszeichen
• Besitzt eine Eigenschaft mehrere Werte (und), dann werden diese mit Leerzeichen separiert
• Nutzen mehrere Selektoren den gleichen Deklarationsblock, dann werden die Selektoren kommasepariert
• Einheiten sind Pflicht
• Einheiten werden direkt (ohne Leerzeichen) hinter die Wertangabe geschrieben
• Die Reihenfolge der Selektoren ist relevant. Der zuletzt genannte Wert hat Gültigkeit.

Kombinatoren

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

Positionierung Typ statisch, relativ, absolut, 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

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

Div Tag mit 100 % Höhe

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>

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

CSS Div anstatt Tabellen

Schriftarten mit CSS

Background

Schatteneffekte und runde Ecken mit CSS3

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

Div Elemente verhalten sich wie Tabellen

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

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

Responsive Design | Mobile, Tablet, Desktop

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

@import url("style.css") screen; 

@media print {
   div#sidebar,
   div#footer { display: none; }
 }

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

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

@import url("style.css") screen, projection; 

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

<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)" /> 

jQuery Mobile

Twitter Bootstrap

Less CSS programmieren

Quelltext Style Sheet Beispiele

Kommentar

Audio, Sound einbinden

Hintergrundsound mittels embed (MX)

Einfügen Leiste ehemals Objekte Palette

Dreamweaver erweitern

LINKS

Links mit Site und Eigenschaftenfenster erschaffen

Anchor setzen

link zum Anchor erstellen

link zum Anchor auf anderer Html-Seite

Links in Dreamweaver aufrufen

Image Maps

Base Target

Formulare

Textfeld

Radio Button, Optionsschalter

Schaltfläche

Button mit Link

Suchen ersetzen

Mehrere Seiten durchsuchen und ersetzen

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.

• 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.

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

List aus schon existierendem Text erstellen

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

• Listeneintrag circle

• Listeneintrag square

• Listeneintrag disc
  
  

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

100. Listeneintrag

101. Listeneintrag

102. Listeneintrag

103. 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

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

Dreamweaver Tipps für die Codeansicht (englisches Video mit Untertiteln)

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 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.

Impressum / Datenschutz

Startseite: www.pastorpixel.de