headermask image

Kategorie Archive Liste Kategorie Archive: Dreamweaver

Vorgehensweise zwischen Design und Datenbank

Im Dreamweaver das Layout statisch erstellen und gestalten (CSS+Tabelle+Boxen)

Dummywert zur Formatierung (zwecks erkennbarkeit)
Tabellarische Anzeige > eine Zeile ausreichend
im Quellcode in PHP Ausgabe umwandeln
Dummywerte ersetzen ( Datenabfrage,fetch_array,Schleife)

Anzeigen in Webseiten

HTML > PHP > Seiten
Flashobjekte
Liste (Tabelle, Alle, Datensätze)
Detailanzeige (enthält ein Datensatz)
Datenbank+Inhalte (Bestandteile aus dem kompletten Bestand)

Spendiere mir einen Kaffee und halte mich weiter wach ! Danke für die [...]

Testserver in Dreamweaver einstellen

Site im Dreamweaver auf Testserver einstellen

Site Definition ändern
Kategorie > Testserver
Php&Maysql aus der Liste wählen
Ordner belassen
URL-Präffix: http://localhost/projektordner

Spendiere mir einen Kaffee und halte mich weiter wach ! Danke für die Spende.

Interaktion und Verhalten in Webseiten

Anwendungsbeispiele
Bildaustausch auf Benutzeraktion
Popup Menü
Nachrichten / Fußzeile per Text
Ebenen sichtbar & unsichtbar machen
Plugin Prüfung > Alternative Seiten
> Java Script, wird im Dreamweaver einbaut. Im Browser des Nutzers abschaltbar ! Nicht für alle Medien funktionsfähig ( z.B. auf Mobile Endgeräte )
Verhalten ( Behairiors )

Fenster > Verhalten
oder Taginspector > Verhalten
Ereignis –> Event
Mausereignis (Rollover klicken … )
Browserereignisse
Benutzereingaben ( Tastendruck, [...]

Formulare in Dreamweaver einfügen und editieren

Voreinstellungen: mit Hilfe des Eingabeassistent

Formulare anlegen und gestalten
Cursor in ein Formularfeld setzen
DW + Javascript = Formularinhalt prüfen
Formularelemente in CSS gestalten

Eingabehilfeassistent

einfügen von Objekten, werden Parameter per Dialog abgefragt (Bsp. Bild > Alternativetext)
Bearbeiten > Voreinstellungen > Kategorie: Eingabehilfe

einfügen eines Formulares

Formular <form>
Bedienfeldgruppe > Einfügeleiste > Formular > Formular einfügen
Formularelement immer zuerst einfügen <form>, bevor Formularfelder eingefügt wurde
Hinweis: [...]

bereits existierende Vorlage in ein neues Layout bringen

Möglichkeiten

existierende Dateien
von anderen Editoren
Kunden oder Drittfirmen

Vorlage wird auf vorhandene Dateien angewendet und ein einheitliches Layout mit ihren jeweiligen Inhalten erstellt. Bei komplexeren Inhalten sollten einzelne editierbare Bereiche erstellt werden.
Anwendung

“Neues” Dokument öffnen (das vorhandene Dokument)
Elemente > Vorlagen (Vorlage auswählen)
Anwenden
Inkonsistente Bereiche auf Vorlagen anwenden
die nicht definierten Inhalte müssen den bearbeitbaren Bereichen zugewiesen werden.
Bestandteil auswählen
bearbeitbaren Bereich wählen

Spendiere mir [...]

Vorlage - Template erstellen, definieren oder auch sperren

In Webseiten gibt es Inhalte und Bereiche die in allen Dokumenten der Webseite identisch sind, sowie Bereiche die unterschiedliche Themen anzeigen

Dreamweaver bietet hierfür die Möglichkeit “feste Bereiche” anzulegen
Themen variabel zu gestalten
Bereiche definieren die bearbeitbar sind
als Vorlage speichern
Dokument aus Vorlage erstellen

In Dreamweaver

alles anlegen was “fest” ist (Kopf,Menü,Fuß)
Boxmodell - Div Tag (für bearbeitbare Bereiche festlegen)
Tabelle - Zelle [...]

Elemente in der Bibliothek (Vorlagen in DW / Musterseiten)

Hilfsmittel des Dreamweaver zur effektiveren Arbeit um wiederholende Inhalte bzw. Elemente, die in allen Seiten auftauchen effizent zu verwalten.
Abhilfe: Bibliothek

Element wird einmal angelegt
mehrfach nutzen
bei änderung werden alle eingesetzten Elemente aktualisiert

In Dreamweaver

im Dokument den Inhalt markieren
Elemente > Bibliothek (aufgeklapptes Buchsymbol)
markierten Inhalt in Bibliothek ziehen
Übernahme in Bibliothek / Namen zuweisen

Wenn ein Inhalt in der Bibliothek übernommen wurde

Inhalt [...]

Zellen verbinden

Zellen markieren
Eigenschaftenleiste > Symbol “Zellen verbinden”
oder rechte Maustaste > Tabellen > Zellen verbinden
Spendiere mir einen Kaffee und halte mich weiter wach ! Danke für die Spende.

Verwaltung von Spalten und Zeilen in Tabellen von Dreamweaver

Zeilen oder Spaltenanzahl beim arbeiten ergänzen oder reduzieren

Tabelle auswählen
in der Eigenschaftenleiste die Anzahl der Spalten oder Zeilen ändern

Zeilen anhängen

letzte Zeile auswählen
Tab Taste > komplette Zeile wird angehängt (Formatierungen werden übernommen)

Spalten und Zeilen einfügen

Spalte oder Zeile mit Cursor anwählen die eingefügt werden soll
rechte Maustaste > Tabelle > Zeile einfügen / Spalte einfügen (wird davor eingefügt)

mehrere Spalten [...]

Tabellen in HTML Dokumente

Tabellenangaben in HTML Dokumenten

Zeile und Spalten <th>text automatisch fett und zentriert</th>
Rahmen - Standardwert beträgt 1
Zwischenraum - Standardwert beträgt 1
Abstand / Aufüllen - Standardwert 0
Breite - in Pixel oder Prozent

Einfügen von Tabellen

Bedienfeldgruppe > Einfügen > Allgemein > Tabelle
oder Dateileiste > Einfügen > Tabelle
Im Dialogfenster müssen die Werte eingetragen werden.
Ergebnis: Tabelle wird eingefügt wo Cursor stand
im Eigenschaftenfenster [...]

Tabellen importieren und zeichnen in Dreamweaver

Importieren von tabellarischen Daten

Exceltabelle ( Exceltabelle anlegen und speichern unter XLS Datei)
CSV Dateien (Textdateien in Tabellenform)
Textdateien in Tabellenform

Vorgehensweise

Datei > Importieren > (Excel Tabelle, Word Tabelle, Tabellendaten, XML)

Layouten mit Tabellen

Seite in Tabellenraster aufteilen
Inhalt wird später auf die Zellen verteilt
ältere DW Versionen - Div Tag zeichnen > anschliessend konvertieren in Tabelle
beim zeichnen wird Tabelle erzeugt
Anmerkung: Der <body> [...]

Verlinkungen mit CSS formatieren

Ausgabe Standard HTML

HTML, Link, Besuchter Link, Aktiven Link
standardlink = blau
standard besuchter Link, aktiver Link = weinrot,lila

weitere Ausgaben mit CSS Stile möglich

mehr Möglichkeiten als Standard HTML
Mausberührung möglich

Anwendung (Selektor)

a:zustand
a:link
a:selektor
a:hover
a:active

Anwendung (Block)

Hintergrund+Kasten

Spendiere mir einen Kaffee und halte mich weiter wach ! Danke für die Spende.