Jetzt lerne ich Adobe Dreamweaver CS3

Start ohne Vorwissen

Zum ersten Mal ist Dreamweaver Bestandteil der Creative Suite und wird damit zum Standardtool für die Webseiten-Entwicklung. Und die neue Version wartet mit einer Menge neuer Features auf. Dieses video2brain-Video-Training macht Sie zum Dreamweaver-Champion!

Ihr(e) Trainer: Helge Maus

ISBN-Nummer: 978-3-8272-0779-1

Erscheinungsdatum: 15.01.2008

EUR 39,95

Video-Training auf DVD mit Bonusmagazin

Was bekomme ich nach dem Kauf?

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!

In den Warenkorb Downloads

Auf die Merkliste Tell-A-Friend Feedback verfassen

Ähnliche Video-Trainings

Trailer: Eindrücke aus Jetzt lerne ich Adobe Dreamweaver CS3

Bonusmaterial

Ajax ist in aller Munde – das Modewort bezeichnet die Kombination etablierter Webtechniken. Der Film erklärt den Grund des Hype.

Ajax

07:01
Besonders Codeelemente aus dem Ordner "JavaScript" sollten Sie mit Bedacht übernehmen. Gut gerüstet ist, wer die Skriptsprache ein wenig beherrscht.

Codeschnipsel für JavaScript

05:58
Wiederverwertbarkeit Teil II: Codefragmente sind zentral verwaltbare Codestücke, die aber nicht mehr mit dem Original in Verbindung stehen.

Codefragmente

02:28
Nicht alle Browser sind gleich. Das galt zu Netscape 4.x-Zeiten, das gilt dank CSS auch heute. Dreamweaver hilft, Probleme aus der Welt zu schaffen.

Browser-Kompatibilität

03:19

Begleiten Sie den Autor auf eine schnelle Reise quer durch die Welt von Adobe Dreamweaver CS3. Sie erhalten einen Überblick in die Arbeit mit dem Programm und lernen die Leistungsfähigkeit von Dreamwaever kennen.

Willkommen in Dreamweaver CS3
- Ihr Trainer Helge Maus geht in diesem Film eine Site-Erstellung vollständig von Anfang bis Ende mit Ihnen durch. Sehen Sie eine Vorschau dessen, was Sie selbst in diesem Video-Training erlernen werden.
  
  Das "schnelle" Projekt I
  
  07:41
- Nach den ersten Dokumenteinstellungen geht es an das Design per CSS: Ein Rahmen muss zentriert werden. Danach ergänzt der Autor ein Bild und gibt Text ein.
  
  Das "schnelle" Projekt II
  
  06:15
- Wie wird Dreamweaver bedient? Und welche Neuerungen bringt die Oberfläche der Version CS3? Sehen Sie sich an, in welchem Umfang Sie sich Ihre eigene Oberfläche basteln können.
  
  Arbeitsoberfläche
  
  09:12
- Selbst alle Tags und Attribute tippen oder lieber doch mit der Maus nur einmal klicken? Die Icons der Einfügen-Symbolleiste fügen ein Seitenelement komplett ein, was die Arbeit mit Dreamweaver enorm beschleunigt.
  
  Einfügen-Leiste
  
  05:40
- Das Eigenschaften-Bedienfeld ist "kontextsensitiv", wechselt also seinen Inhalt je nach markiertem Objekt. Und wenn Sie den erweiterten Modus aktiviert haben, erreichen Sie damit sehr viele Optionen auf kleinstem Raum.
  
  Eigenschaften-Bedienfeld
  
  03:19
- Rund um die Anzeige der Web-Seite hält Dreamweaver viele Optionen und Funktionen für Sie parat. Welche davon wichtig sind und wie Sie damit umgehen, zeigt Ihnen Ihr Trainer in diesem Film.
  
  Dokumenten-Fenster I
  
  06:08
- Nicht immer ist die Funktion aller Anzeigen auf den ersten Blick ersichtlich. Diesmal lernen Sie Funktionen kennen, die Dreamweaver rund um den Vorschaubereich verteilt hat.
  
  Dokumenten-Fenster II
  
  06:29
- Auch wenn Dreamweaver CS3 einen WYSIWYG-Editor besitzt, kann dieser den Test in einem "echten" Browser nicht ersetzen. Zu diesem Zweck bindet Dreamweaver die verschiedenen installierten Browser ein, mit denen Sie die tatsächliche Darstellung direkt aus dem Vorschau-Fenster überprüfen können.
  
  Vorschau-Browser einrichten
  
  03:19
- Nicht nur die Oberfläche von Dreamweaver CS3 ist weitgehend anpassbar – auch die Tastaturbefehle lassen sich auf breiter Basis verändern und als "Satz" auch speichern.
  
  Tastaturbelegung anpassen
  
  04:56
Eine Hompage oder Website besteht in der Regel aus vielen einzelnen Seiten, zugehörigen Media-Daten und Stylesheets. Dementsprechend baut auch Dreamweavers Projektstruktur auf der "Website" auf.

Inhalte von Webseiten
- Eine rohe Website ist in Dreamweaver schnell angelegt: Worauf Sie dabei achten müssen und woran Sie denken sollten, zeigt dieser Film.
  
  Neue Website erzeugen
  
  04:49
- Damit Sie sich auch in tief verschachtelten und umfangreichen Projekten zurechtfinden, ordnen Sie das gesamte Material in der richtigen Struktur. Natürlich können Sie auch fertige Teile einfach importieren.
  
  Import und Ordnerstruktur vergeben
  
  04:55
- Der beste Weg, um die eigenen Seiten für möglichst alle Besucher zugänglich und einheitlich zu gestalten, sind die W3C-Standards. Auch hier helfen Dreamweavers fertige Lösungen ...
  
  Erzeugen von XHTML/HTML Dokumenten
  
  05:25
- Globale Einstellungen und Vorgaben setzen Sie komfortabel über ein jederzeit erreichbares Bedienfeld. Dabei klappt die Verzahnung mit CSS-Styles vorzüglich.
  
  Dokumenteneigenschaften festlegen
  
  06:42
- Die Filme dieses Kapitels decken alle Aspekte der Texteingabe und Textstrukturierung ab. Sie lernen die HTML-Formate für Titel, Standardtext und Aufzählung kennen und erfahren, wie Sie Text importieren oder das aktuelle Datum generieren lassen.
  
  Mit Textinhalten arbeiten
  - Was passiert eigentlich, wenn Sie einen Text über die Zwischenablage in Ihr HTML-Dokument kopieren? Wie übernimmt Dreamweaver die Absätze? Das und wie Sie damit weiterarbeiten steht diesmal im Mittelpunkt der Erklärungen von Helge Maus.
    
    Von Texten, Tags und Attributen
    
    09:50
  - Lernen Sie, welche Standard-Tags HTML kennt, wie Sie sie zuweisen können und wie Sie Textauszeichnungen ergänzen. Darüber hinaus erklärt Ihnen der Trainer, wie Dreamweaver CS3 diese Formatierungen umsetzt und wie Sie beispielweise zu einem weichen Zeilenumbruch kommen.
    
    Texte strukturiert auszeichnen
    
    07:03
  - Was früher in einem <font>-Tag in HTML formatiert wurde, setzt Dreamweaver CS3 in CSS-Stilen um: Weisen Sie einem Textbereich mehrere Auszeichnungen zu, zeigt das Eigenschaften-Bedienfeld im Feld "Stil" eine nummerierte Stilbezeichnung.
    
    Schriftstile verwenden
    
    05:19
  - Zumindest unter Windows beherrscht Dreamweaver CS3 etwas, was man wahrscheinlich nicht erwartet: Es kann direkt auf Word- und Excel-Dokumente zugreifen und diese effizient importieren. Der Film zeigt aber auch andere Wege von MS Office zu Dreamweaver CS3.
    
    Importieren von Texten und Tabellen
    
    05:28
  - Welche Arten und Varianten es gibt, um Aufzählungen in einer Web-Seite einzubauen, erfahren Sie in diesem Film. Helge Maus greift dabei auf die Unterstützung durch Dreamweaver CS3 zurück, verweist aber laufend auf den dabei entstehenden HTML-Code.
    
    Listen und Aufzählungen
    
    07:14
  - Da sich HTML in seiner Grundeinstellung auf ASCII-Zeichen beschränkt, müssen einige Voraussetzungen erfüllt sein, damit Umlaute und andere Sonderzeichen verwendet werden können.
    
    Umgang mit Sonderzeichen
    
    05:21
  - Schriften können nicht im HTML-Dokument eingebettet werden, deshalb muss der Browser auf installierte Schriften zurückgreifen. Aber was passiert, wenn der Besucher Ihrer Site die von Ihnen bevorzugte Schrift nicht hat?
    
    Schriftlisten erstellen und pflegen
    
    03:23
  - Soll Dreamweaver dafür sorgen, dass auf ihrer Web-Seite das Datum der Erstellung oder der letzten Aktualisierung ausgegeben wird? Mit einem Befehl und wenigen Optionen ist das schnell und zuverlässig erledigt!
    
    Das Datum einfügen
    
    02:17
  - Als Trennelement zwischen Abschnitten müssen Sie keine Grafik einsetzen, HTML bietet dafür eine horizontale Linie an! Diese Linie nutzt standardmäßig die gesamte Seitenbreite, lässt sich im Eigenschaften-Bedienfeld aber weitgehend einstellen.
    
    Horizontale Linien einfügen
    
    01:34
- Zur übersichtlichen Darstellung größerer Datenmengen greift man auf Tabellen zu, die schon auf der Basis von HTML alle wesentlichen Funktionen bieten. Dreamweaver gibt Ihnen einige Hilfsmittel in die Hand, um das noch leichter zu machen.
  
  Mit Tabellen arbeiten
  - Sehen Sie sich an, wie Sie eine Tabelle in Ihr Dokument einfügen, welche Optionen Sie schon bei der Erstellung wählen sollten und was diese bedeuten.
    
    Tabellen erzeugen
    
    06:51
  - In diesem Film führt Ihnen Helge Maus vor, wie Sie Tabellen(teile) markieren, wie Sie Spaltenbreiten definieren und dabei den üblichen Fallen ausweichen und wie Sie neue Zeilen und Spalten einfügen.
    
    Tabellenstrukturen modifizieren
    
    07:59
  - Das Eigenschaften-Bedienfeld bietet einige Optionen, um Tabellen zu formatieren. Leider ist die Umsetzung nicht vollständig auf CSS ausgerichtet: Vieles wird noch per HTML-Attribut realisiert.
    
    Tabelleninhalte modifizieren
    
    04:17
  - Der Menübefehl "Tabellendaten importieren" greift auf Textdateien zu und gibt Ihnen alle Werkzeuge in die Hand, sie in Dreamweaver-Tabellen umzuwandeln.
    
    Externe Daten in Tabellen einlesen
    
    04:27
  - Selbst wenn Sie die gesamte Tabelle bereits komplett formatiert haben, ist es noch nicht zu spät, die Tabellenzeilen zu sortieren. Allerdings muss das in Dreamweaver erfolgen!
    
    Tabelleninhalte sortieren
    
    02:21
  - Der Abschnitt zu den Tabellen schließt mit einem Hinweis auf mehrere Hilfsmittel in Dreamweaver CS3, die Ihnen die Arbeit mit Tabellen leichter machen – Unbedingt ansehen!
    
    Tabellen-Hilfsmittel in Dreamweaver
    
    02:45
- Meist wird eine Website erst durch Bilder gefällig. Dabei können Bilder in verschiedenen Anwendungsformen und Formaten vorkommen – Sehen Sie selbst!
  
  Bilder
  - In diesem Film zeigt Ihnen der Autor, mit welchen Methoden Sie Bilder in Ihrer Web-Seite platzieren können. Sämtliche Bilder, die von Ihnen eingefügt werden, kopiert Dreamweaver automatisch in den Standard-Bilderordner, den Sie in den Einstellungen auch selbst definieren können.
    
    Bilder platzieren
    
    09:30
  - Nachdem Sie wissen, wie Bilder platziert werden, lernen Sie in diesem Video die Parameter der Bilder kennen. Einige dieser Parameter müssen mit Vorsicht verwendet werden. Der Autor verrät Ihnen, was sich im Internet bewährt und was man lieber unterlassen sollte.
    
    Bild-Parameter
    
    06:53
  - Die Verwendung von Hintergrundbildern ist ganz anders als die von "normalen" Bildern. Sind normale Bilder nur im Text positioniert, können Hintergrundbilder dagegen auch mit Text überschrieben werden. Sehen Sie sich die Möglichkeiten an.
    
    Hintergrundbilder für Seiten und Rahmen
    
    06:02
  - Bilder können in HTML einfach mit Hyperlinks versehen werden. Doch was müssen Sie tun, um mehrere Hyperlinks zu einem Bild zu setzen? Der Autor zeigt die Lösung: Imagemaps!
    
    Imagemaps und Verlinken von Bildern
    
    07:27
  - Grundsätzlich sollten Sie Bilder für das Internet mit einem Grafikprogramm auf die passende Größe bringen. Für geringfügige Bildanpassungen stellt Dreamweaver CS3 eigene Werkzeuge zur Verfügung.
    
    Bildbearbeitung in Dreamweaver CS3
    
    07:59
  - Im ersten Teil des Filmes zu Bildformaten im Web lernen Sie mit Hilfe von Adobe Photoshop als Grafikprogramm das Format GIF und dessen Eigenschaften kennen. Beim Speichern für das Web gibt es unzählige Möglichkeiten, die Grafik optimiert abzuspeichern.
    
    Bildformate im Web I
    
    11:12
  - Im zweiten Teil des Filmes zu den Bildformaten zeigt Ihnen der Autor die Besonderheiten der Dateiformate JPEG und PNG. Beide haben eine Reihe an Einstellmöglichkeiten für die optimale Webaufbereitung. JPEG bietet darüber hinaus eine selektive Bildkompression.
    
    Bildformate im Web II
    
    09:20
- In diesem Abschnitt lernen Sie, wie Sie mit unterschiedlichen Hyperlinks umgehen, sie erstellen und formatieren. Hyperlinks können auf eine bestimmte Seite oder auch auf andere Dateiformate verweisen. Oder Sie verwenden Hyperlinks für die Kommunikation mit dem Benutzer.
  
  Hyperlinks
  - Eines der grundlegenden Konzepte des Web ist der Hyperlink. Hyperlinks können in verschiedenen Arten auftreten und unterschiedlich ausgelöst werden. In diesem Film bekommen Sie einen Überblick ...
    
    Grundlagen Hyperlinks
    
    02:58
  - So erstellen Sie Hyperlinks in Adobe Dreamweaver CS3. Das Programm stellt dafür verschiedene Hilfsmittel bereit. In diesem Zusammenhang erklärt Ihnen der Autor auch die Unterschiede zwischen absoluten und relativen Hyperlinks.
    
    Relative und absolute Links
    
    07:47
  - Um Zieldokumente von Hyperlinks geht es in diesem Film. Legen Sie fest, in welchem Fenster sich der Hyperlink öffnen soll. Gerade bei Verwendung von externen Links sollten Sie Hyperlinks in einem eigenen Browserfenster öffnen. Warum, erfahren Sie hier.
    
    Ziele von Hyperlinks
    
    04:12
  - Hyperlinks können auch auf ein und die selbe Seite zeigen. Das wird dann interessant, wenn Sie für eine längere Seite ein Inhaltsverzeichnis erstellen und mit Hyperlinks zu einzelnen Abschnitten springen möchten. Wie das funktioniert, erfahren Sie in diesem Video.
    
    Anker verwenden
    
    06:26
  - Um den Besuchern Ihrer Web-Seite die Möglichkeit zu bieten, Kontakt aufzunehmen, haben Sie mehrere Möglichkeiten. In diesem Film zeigt der Autor die Verwendung von E-Mail-Links, die zwar einfach zu implementieren, jedoch nicht ganz unproblematisch sind.
    
    E-Mail-Links
    
    05:29
  - Sie können nicht nur auf HTML-Seiten verlinken, sondern auch auf andere Dateiformate verweisen. In diesen Fällen entscheidet der Browser, wie die Datei angezeigt werden soll.
    
    Links auf Fremddokumente
    
    03:26
  - Hyperlinks bieten Optionen, die gerade im Umgang mit Barrierefreiheit und im Zusammenhang mit Suchmaschinen interessant sind. Sie können Beschreibungen zu Hyperlinks eingeben oder sie über die Tastatur auswählen. Sehen Sie sich in diesem Video die Möglichkeiten an.
    
    Hyperlink-Parameter
    
    03:46
  - Grundlegende Formatierungen für Hyperlinks führen Sie ganz ohne Programmierkenntnisse durch: Dreamweaver bietet eine Reihe von Möglichkeiten, das Aussehen von Hyperlinks nach Ihren Wünschen anzupassen.
    
    Formatieren von Hyperlinks
    
    03:00
- Formulare erlauben Ihren Besuchern, Kontakt aufzunehmen. In diesem Abschnitt stellt Ihnen der Autor die einzelnen Formularelemente vor. Beachten Sie, dass sämtliche Formularelemente in definierten Tags eingeschlossen sind.
  
  Formulare
  - Formulare werden mit HMTL-Formularelementen erzeugt. Wählen Sie aus vorgegebenen Elementen. Hier erhalten Sie einen Überblick über Formulare im Web.
    
    Formulare in HTML
    
    05:23
  - Textfelder dienen der Eingabe von Formulartext. Wählen Sie dabei aus verschiedenen Texttypen. Dieses Video zeigt die Einstellmöglichkeiten und Parameter der Textfelder.
    
    Textfelder
    
    08:43
  - Das Kontrollkästchen kann – als eigenständiges Element – in beliebiger Anzahl im Formular verfügbar gemacht werden. Sehen Sie, wie Sie Kontrollkästchen einstellen ...
    
    Kontrollkästchen
    
    01:57
  - Optionsschalter ähneln den Kontrollkästchen, "funktionieren" jedoch nur in Gruppen. Wählen Sie für Ihre Optionsschalter aus zwei Alternativen.
    
    Optionsschalter / Radio-Buttons
    
    03:50
  - Möchten Sie, dass Ihre Benutzer zwischen verschiedenen Werten auswählen können, hilft eine Liste oder ein Menü. Dieses Video zeigt die Unterschiede und die jeweiligen Einstellmöglichkeiten.
    
    Listenfelder
    
    02:33
  - Soll der Benutzer viel Text eingeben, verwenden Sie statt eines Textfelds das Element "Textbereich" – im HTML-Jargon die "Textarea". Sehen Sie sich dazu die Eigenschaften an.
    
    Textbereiche
    
    01:15
  - Über die Schaltfläche "Dateifeld" in der Einfügen-Leiste erstellen Sie einen Bereich, über den der Besucher Ihrer Web-Seite Dateien an den Server überträgt. Achten Sie aber auf die richtige Definition der Parameter!
    
    Dateien per Formular hochladen
    
    02:33
  - Versteckte Felder helfen, Zusatzinformationen eines Formulars zu erfassen, ohne dass dies der Benutzer mitbekommt. Welche Informationen Sie dabei abfragen können, erfahren Sie in diesem Video.
    
    Versteckte Felder
    
    01:17
  - Dreamweaver CS3 bietet unterschiedliche Schaltflächen, mit denen Sie Formulardaten senden oder andere Aktionen auslösen können. Wie Sie diese Schaltflächen einsetzen, vermittelt diese Lektion.
    
    Schaltflächen "Senden" und "Zurücksetzen"
    
    02:09
  - Möchten Sie Ihre Schaltflächen mit eigenen Grafiken versehen, so ist das in Dreamweaver einfach zu lösen. Sie benötigen lediglich eine vorgefertigte Grafik, und Ihre Senden-Schaltfläche ist schon fast fertig ...
    
    Bildschaltflächen
    
    01:23
  - Dieses Video erklärt die Unterschiede zwischen den Sendemethoden POST und GET. Lernen Sie die jeweiligen Vor- und Nachteile kennen – abhängig von der Art der Anwendung.
    
    Versenden von Formularen
    
    06:21
- In diesem Abschnitt erfahren Sie, wie Sie mit Dreamweaver Flash-Animationen erstellen oder fertige Flash-Filme einbetten. Ist außerdem Adobe Fireworks installiert, kann Dreamweaver automatisch eine Bildergalerie fürs Web erzeugen.
  
  Multimedia
  - Normalerweise erstellen Sie Flash-Präsentationen innerhalb einer Flash-Authoring-Umgebung. Möchten Sie auch ohne diese beispielsweise eine Schaltfläche mit Rollover-Effekt erstellen, geht das auch direkt in Adobe Dreamweaver CS3: Als Flash-Text!
    
    Flash-Text erzeugen
    
    02:17
  - In diesem Film lernen Sie, wie Sie eine Flash-Animation in Ihre Web-Seite einbauen. Achten Sie darauf, dass die Versionsnummern Ihres Flash-Dokuments und des Browser-Plugins zusammenpassen.
    
    Flash einbinden
    
    04:50
  - Mit dem FLV-Format publizieren Sie Flash-Filme im Internet. In diesem Video zeigt Ihnen der Autor die verschiedenen Parameter und Einstellmöglichkeiten – Dreamweaver erledigt dabei bereits einen Großteil der Arbeit für Sie.
    
    Flash-Video einbinden
    
    06:34
  - Sie können mit Dreamweaver ein Web-Fotoalbum zusammenstellen, das mit Hilfe von Adobe Fireworks automatisch generiert wird. Voraussetzung ist nur ein Ordner mit den Bildern: Fireworks rechnet diese automatisch in das richtige Format um.
    
    Bildergalerien erzeugen
    
    04:55
Für den wissenschaftlichen Einsatz mögen die Formatierungsbefehle von HTML ausreichen. Doch für alles, das über die einfache Aneinanderreihung von Texten und Bildern hinausgeht, müssen Sie auf einen Trick oder eine weitere Technik zugreifen. In diesem Kapitel lernen Sie beides kennen!

Layout im Web
- Sind alle Inhalte eingepflegt, ist die Zeit reif für das Layout. Dabei gibt es zwei Wege zum Ziel: Einen klassischen, nicht mehr empfohlenen und einen standardkonformen modernen! Beide kommen in den nachfolgenden Filmen zum Einsatz.
  
  Einführung Layout im Web
  
  01:00
- Ein "Tracing-Image" ist ein Bild, das man sich in den Hintergrund einer HTML-Seite legt, um daran die Ausrichtung der Seitenelemente vorzunehmen. Welche zusätzlichen Optimierungen Sie dazu vornehmen sollten, sehen Sie im Film.
  
  Tracing-Bild als Hilfe
  
  05:24
- Wenn Sie Hilfslinien aus Grafikprogrammen kennen, kommen Sie auch in Dreamweaver damit zurecht. Erfahren Sie in diesem Film, was Sie wie einstellen können.
  
  Lineale und Hilfslinien
  
  05:01
- Auch wenn CSS inzwischen fast immer schneller und zuverlässiger zum Ziel führt, ist es doch interessant, den Trick mit den "blinden Tabellen" (Tabellen ohne sichtbare Rasterlinien) nachzuvollziehen. Sehen Sie selbst, wie einfach Sie damit ein Gestaltungsraster erzeugen!
  
  Tabellen-Layout
  - Der Film zeigt die Erstellung einer "blinden Tabelle" vom Start weg bis zur Füllung mit einer Hintergrundfarbe. Sie lernen die Bearbeitungsmöglichkeiten kennen und verstehen, warum diese Technik lange Zeit als Designelement eingesetzt wurde.
    
    Tabellen-Layout aufbauen
    
    09:00
  - Damit die Seiteninhalte stets zentriert im Browserfenster erscheinen, müssen einige Veränderungen vorgenommen werden: Der Autor arbeitet zum Teil mit relativen Breiten.
    
    Zentrieren des Layouts
    
    02:30
- Die "Cascading Style Sheets" (CSS) sind das bestimmende Thema bei Web-Entwicklern. Sie erweitern die Gestaltungsmöglichkeiten, strukturieren Seiten und beschleunigen die Erstellung von Sites. Kurz: Das müssen Sie wissen!
  
  CSS-Layout
  - Für Mozilla-Browser existiert ein Plugin, das die Arbeit mit CSS-Layouts um vieles leichter gestalten kann. Der Autor zeigt die Quelle, die Installation und erklärt, wie Sie es benutzen.
    
    Installation des Web-Developer-Plugins
    
    02:51
  - In diesem Film lernen Sie den Unterschied zwischen CSS-Schweberahmen und blinden Tabellen kennen. Wieder macht Dreamweaver die Nutzung leicht, doch stehen Ihnen diesmal weitergehende Optionen zur Verfügung!
    
    Die Idee hinter CSS-Schweberahmen
    
    06:41
  - Nutzen Sie den ersten Button "Div-Tag einfügen", erstellt Dreamweaver einen Rahmen, den Sie noch per CSS positionieren müssen. Der nächste Button nimmt Ihnen diesen Arbeitsschritt ab: Diesmal ziehen Sie mit einem Fadenkreuz einen Rahmen bereits an einer beliebigen Stelle auf!
    
    Layouten mit AP-Divs
    
    08:26
  - Dreamweaver CS3 bietet im Dialog für neue Dokumente eine lange, gut sortierte Liste an fertigen Seitenlayouts. Die Ergebnisse sind flexibel, anpassbar und dank der umfassenden Dokumentation auch als Lernquelle nutzbar.
    
    CSS-Layoutvorlagen
    
    04:55
- Die beiden Frame-Techniken tragen zwar den fast gleichen Namen, unterscheiden sich aber deutlich! Die Nutzung von Framesets gilt inzwischen als veraltet und stirbt aus, während iFrames in ihrem typischen Anwendungsfall nach wie vor verbreitet sind.
  
  Frames und iFrames
  - Wenn man versteht, dass ein Frameset keine Inhalte, sondern "nur" den Verweis auf die Inhaltsseiten der Frames darstellt, geht alles andere ganz leicht: Sehen Sie sich an, welchen Schritten Sie folgen müssen und welche Fallen auf Sie warten.
    
    Frames und Framesets erzeugen
    
    08:29
  - Das Standardproblem beim Einsatz von Framesets ist ein Hyperlink, der den aktuellen Frame austauscht, obwohl Sie das anders geplant hatten. Dieser Film erklärt die Lösung und demonstriert die Umsetzung mithilfe von Dreamweaver-Bedienfeldern.
    
    Verlinken von Frames
    
    02:56
  - Im Gegensatz zu Frames oder Framesets ist die Verwendung von iFrames noch üblich. Ziel ist es diesmal, einen rechteckigen Bereich der eigenen Web-Seite mit dem Inhalt aus einer anderen Web-Seite zu füllen.
    
    iFrames
    
    05:29
In diesem Kapitel lernen Sie den Aufbau und die Funktionsweise von CSS in Adobe Dreamweaver CS3 kennen. Sie werden innerhalb kurzer Zeit professionelle Web-Seiten erstellen können. Für die erfolgreiche Umsetzung zeigt Ihnen der Autor diverse Tipps und Tricks.

CSS in Dreamweaver
- Anhand der Beispielseite von Zen Garden erläutert der Autor die Funktion und die Verwendung von CSS. Auf dieser Internetseite können Sie die Funktion und die Wirkung von CSS leicht nachvollziehen. Voraussetzung für die Verwendung von CSS ist jedoch eine saubere HTML-Programmierung.
  
  Einführung in CSS
  
  03:41
- In diesem Film lernen Sie das Box-Modell kennen. Eine Box hat bestimmte Eigenschaften, die in jedem Browser standardmäßig vordefiniert sind. CSS hat nun die Aufgabe, diese Standardwerte teilweise oder vollständig zu überschreiben.
  
  Das Box-Modell
  
  03:50
- Damit Sie die vom Browser vordefinierten Eigenschaften ändern können, müssen sie zuerst ausgewählt werden. Die Auswahl geschieht über Selektoren. In diesem Abschnitt lernen Sie die verschiedenen Selektoren und deren Funktion kennen.
  
  Stile zuweisen
  - Der einfachste Selektor ist der Tag-Selektor. Mit diesem können Sie einzelne Tags in der HTML-Struktur auswählen und die zugehörigen Eigenschaften verändern. In diesem Film lernen Sie den grundsätzlichen Aufbau von CSS-Regeln kennen.
    
    Element-Selektoren / Tag-Selektoren
    
    07:29
  - Elemente vererben ihre Eigenschaften prinzipiell. Die Reihenfolge der Selektoren bestimmt dabei, welche Eigenschaften überschrieben werden sollen. Wie Sie mit Element-Selektoren schnell eine komplette Seite erstellen können, erfahren Sie in diesem Video.
    
    Mehrere Element-Selektoren
    
    06:26
  - Sie können nicht nur für Block-Elemente eigene Selektoren erstellen, sondern auch für Elemente der Textauszeichnung. Dazu benötigen Sie sogenannte Klassen-Selektoren. Mit einem einfachen Trick können Sie definieren, dass die neu erstellten Klassen nur auf bestimmte Tags anwendbar sind.
    
    Klassen-Selektoren
    
    05:01
  - Mit "Divs" und "Spans" strukturieren Sie Bereiche, die Sie anschließend über CSS formatieren. In diesem Video erfahren Sie, welche Unterschiede zwischen Div und Span bestehen und wie Sie damit zusammenhängende Bereiche Ihrer Web-Seite über Klassen formatieren können.
    
    Divs und Spans
    
    03:53
  - ID-Selektoren werden hauptsächlich bei der Arbeit mit Div-Elementen und bei ihrer absoluten Positionierung verwendet. Diese können mit entsprechenden CSS-Regeln formatiert werden. Wie Sie Div-Elemente nebeneinander positionieren, erfahren Sie ebenfalls in diesem Film.
    
    ID-Selektoren
    
    03:38
  - Komplexe Selektoren werden durch Kommata getrennt und können auch unterschiedlichen Gruppen entstammen. Der Autor führt Ihnen noch weitere komplexe Selektoren anhand von Beispielen vor und weist auf die Besonderheiten der einzelnen Kombinationen hin.
    
    Komplexe Selektoren
    
    02:58
- In diesem Film sehen Sie, wie Sie eine komplette Seite mit Hilfe von CSS formatieren. Dreamweaver selbst weist dabei schon die meisten Formatierungen automatisch über CSS zu. Somit können Sie Seiteneinstellungen, die Dreamweaver selbständig vergibt, als Grundlage für Ihre eigenen CSS-Stile verwenden.
  
  Seitenformatierung per CSS
  
  03:23
- Listen können einfach über CSS angepasst werden. Dazu stehen Ihnen nicht nur herkömmliche Formatierungen zur Verfügung, sondern Sie können auch Ihre eigenen Aufzählungszeichen als Grafik importieren. Wie das geht, erfahren Sie in diesem Video.
  
  Listen per CSS anpassen
  
  04:46
- Damit Suchmaschinen die Überschrift Ihrer Seite lesen oder Screenreader sie vorlesen können und Sie dennoch ein Bild mit grafischem Text als Hintergrundgrafik einfügen, hält dieses Video einen hilfreichen Trick parat.
  
  Bilder per CSS einbinden
  
  06:48
- Hyperlinks können, wie andere Elemente, mit CSS formatiert werden. Ein Hyperlink kann unterschiedliche Zustände einnehmen, etwa "Rollover" oder "Besucht", die Sie ebenfalls über CSS formatieren können. In diesem Film sehen Sie eine Anleitung dazu.
  
  Hyperlinks per CSS gestalten
  
  03:26
- In diesem Video erfahren Sie, wie Sie aus einer unnummerierten Liste schnell eine Navigationsstruktur erzeugen. Für eine saubere Lösung greift der Autor auf komplexe Selektoren zurück, die es ermöglichen, nur bestimmte Listen zu formatieren.
  
  Navigation per CSS
  
  03:10
- Viele CSS-Layouts basieren auf Floating. Dabei werden Div-Elemente erstellt und nebeneinander platziert. Wenn einmal ein Float eingerichtet ist, muss es auch wieder die Möglichkeit geben, ihn abzubrechen. Mehr darüber erfahren Sie in diesem Film.
  
  CSS-Layout mit Floats
  
  07:38
- In diesem Abschnitt lernen Sie die CSS-Erstellungshilfen kennen, die Adobe Dreamweaver CS3 bietet. Wichtig bei der Verwendung von Stylesheets ist die standardkonforme Erstellung und die Prüfung auf verschiedenen Browsern – in beiden Fällen hilft Dreamweaver weiter.
  
  CSS-Werkzeuge in Dreamweaver CS3
  - Ihre Web-Seite kann für verschiedene Ausgabeformate unterschiedlich formatiert werden. Wo Sie die zugehörigen Hilfsmittel zur Vorschau in Adobe Dreamweaver CS3 finden, erfahren Sie in diesem Video.
    
    CSS-Stilwiedergabe
    
    01:29
  - Ein wichtiges Werkzeug bei der Arbeit mit Stylesheets ist das CSS-Bedienfeld. In diesem Film erklärt Ihnen der Autor sämtliche Schaltflächen und Anzeigemodi zu CSS, damit Sie schnell und effektiv mit Dreamweaver eigene Web-Seiten erstellen können.
    
    Der CSS-Editor
    
    03:33
  - Visuelle Hilfmittel sind praktisch, um komplexe Strukturen innerhalb von Dreamweaver zu erfassen. Bewegen Sie die Maus über einzelne Elemente, um Informationen über deren Aufbau zu erhalten. Sehen Sie selbst...
    
    Visuelle CSS-Hilfsmittel
    
    02:21
  - Haben Sie bereits Stylesheets für eine Seite definiert, können Sie diese auch einfach in eine neue Datei verschieben und global verfügbar machen. Wie Sie eine HTML-Datei mit einer Stylesheet-Datei verknüpfen, erfahren Sie ebenfalls in diesem Video.
    
    Externe CSS-Dateien
    
    03:06
  - Ein häufiges Problem bei der Arbeit mit CSS ist, dass manche Browser einzelne Styles verschieden oder gar nicht interpretieren. Um die Browser-Kompatibilität rasch zu überprüfen, nutzen Sie den CSS-Advisor.
    
    CSS-Advisor
    
    01:36
Dieses Kapitel stellt Verhaltensweisen und Aktionen vor, die unter JavaScript möglich sind. An Beispielen sehen Sie, wie Sie aus statischen HTML-Seiten dynamische Seiten für eine bessere Benutzerinteraktion erstellen.

JavaScript und Verhalten
- HTML ist eine statische Sprache. Serverseitige Programme liefern dynamischen HTML-Content aktualisiert zurück. Sie können aber auch Skripte direkt im Browser laufen lassen. Das hat den Vorteil, dass Sie interaktiv mit dem Benutzer arbeiten können.
  
  Einführung JavaScript
  
  02:01
- In diesem Film lernen Sie eine Aktion kennen, die auf sehr vielen Web-Seiten zu finden ist. Sehen Sie, wie einfach Sie mit Adobe Dreamweaver CS3 Rollover-Effekte mit JavaScript implementieren.
  
  Rollover
  
  03:40
- Popup-Fenster können mit JavaScript implementiert werden. Wie das geht, erfahren Sie in diesem Video. Beachten Sie bei der Verwendung von Popups, dass diese mit entsprechenden Popup-Blockern unterdrückt werden können.
  
  Popup-Fenster
  
  02:36
Wie Sie Ihre Web-Seiten verwalten und auf einem Webserver publizieren, ist Inhalt dieses Kapitels. Sind Ihre Daten veröffentlicht, müssen diese laufend gewartet werden. Welche Möglichkeiten Dreamweaver dafür bietet, erfahren Sie ebenfalls hier.

Website-Management
- In dieser Lektion zeigt Ihnen der Autor, wie Sie Web-Seiten, die in anderen Programmen erstellt wurden, in Adobe Dreamweaver CS3 importieren. Achten Sie beim Konvertieren darauf, von welcher Rechnerplattform die Daten stammen.
  
  Website importieren
  
  03:01
- Wenn Sie Ihre Web-Seite publizieren möchten, brauchen Sie Speicherplatz auf einem Webserver. Zusätzlich benötigen Sie eine Internet-Adresse und entsprechende Zugangsdaten. Wie Sie mit Dreamweaver eine Verbindung zu einem Webserver herstellen, zeigt dieser Film.
  
  Verbinden mit dem Webserver
  
  07:25
- Es gibt mehrere Möglichkeiten, Ihre Website auf einen Webserver zu übertragen. In diesem Film lernen Sie die schnellste Methode kennen.
  
  Dateien übertragen
  
  01:44
- Haben Sie Ihre Web-Seite einmal publiziert, können Sie lokal beliebig weiterarbeiten. Doch was geschieht, wenn Sie Dateien umbenennen oder verschieben? Verbundene Hyperlinks müssen angepasst werden! Wie das funktioniert, erfahren Sie in diesem Film.
  
  Änderungen und Aktualisierungen
  
  01:58
- Änderungen und neu erstellte Seiten sollen auf den Webserver übertragen werden. Welche Dateien sind geändert und welche nicht? In diesem Video lernen Sie die Lösung kennen.
  
  Änderungen synchronisieren
  
  03:47

Trailer: Eindrücke aus Jetzt lerne ich Adobe Dreamweaver CS3

Am Ende des Video-Trainings können Sie:

sich in der Oberfläche von Dreamweaver zurechtfinden,
Website-Projekte anlegen, mit Texten, Bildern und Tabellen füllen und mit Hyperlinks verbinden,
Formulare gestalten und versenden,
Multimediainhalte wie Flash oder Videos einbinden,
Layouts mit Tabellen, CSS und Frames erstellen,
die CSS-Werkzeuge von Dreamweaver einsetzen,
einfache JavaScripts und Verhalten programmieren,
Websites mit Dreamweaver publizieren und pflegen.

Jetzt lernen Sie! - Adobe Dreamweaver CS3

Dieses Video-Training richtet sich an Benutzer mit keinen oder nur wenig Vorkenntnissen in Adobe Dreamweaver. Das beigefügte Bonusmaterial ermöglicht Ihnen, sämtliche gezeigten Schritte mit den verwendeten Daten nachzuvollziehen. Ebenso stellt der Autor eine vollständig in Dreamweaver gestaltete Webseite zur Verfügung.

Sie lernen anhand eines Beispiels, wie Sie in Adobe Dreamweaver CS3 Ihre ersten Webseiten erstellen, Texte formatieren, Layouts mit CSS erstellen sowie Formulare und Tabellen einbinden. Damit Sie Ihre Seiten auch effektiv mit Hilfe neuer Technologien formatieren und gestalten können, erhalten Sie einen Crash-Kurs zu CSS. Ein kurzer Ausflug in Java-Script-Aktionen steht ebenso auf dem Programm. Abschließend publizieren Sie die erstellte Webseite mit Hilfe des Website-Managements auf einem Webserver – all das mit professioneller Anleitung Schritt für Schritt.

Grundlagen

Einführend begleiten Sie den Autor auf eine schnelle Reise quer durch die Welt von Adobe Dreamweaver CS3. Sie erhalten einen Überblick über die Arbeit mit dem Programm und lernen die Leistungsfähigkeit von Dreamweaver kennen.

Eine Homepage oder Website besteht in der Regel aus vielen einzelnen Seiten, zugehörigen Media-Daten und Stylesheets. Dementsprechend baut auch Dreamweavers Projektstruktur auf der "Website" auf. Die Kapitel dieses Video-Trainings decken unter anderem alle Aspekte der Texteingabe und Textstrukturierung ab. Sie lernen die HTML-Formate für Titel, Standardtext und Aufzählung kennen und erfahren, wie Sie Text importieren oder das aktuelle Datum generieren lassen. Dreamweaver gibt Ihnen einige Hilfsmittel in die Hand, um das noch leichter zu machen. Sie erfahren auch, wie Sie mit Dreamweaver Flash-Animationen erstellen oder fertige Flash-Filme einbetten. Wenn Sie außerdem Adobe Fireworks installiert haben, kann Dreamweaver automatisch eine Bildergalerie fürs Web erzeugen.

Cascading Stylesheets (CSS)

Für den wissenschaftlichen Einsatz mögen die Formatierungsbefehle von HTML ausreichen. Doch für alles, was über die einfache Aneinanderreihung von Texten und Bildern hinausgeht, müssen Sie auf einen Trick oder eine weitere Technik zugreifen. Die "Cascading Style Sheets" (CSS) sind das bestimmende Thema bei Web-Entwicklern. Sie erweitern die Gestaltungsmöglichkeiten, strukturieren Seiten und beschleunigen die Erstellung von Sites. Kurz: Das müssen Sie wissen!

Darum lernen Sie in einem weiteren Kapitel den Aufbau und die Funktionsweise von CSS in Adobe Dreamweaver CS3 kennen, damit Sie innerhalb kurzer Zeit professionelle Web-Seiten erstellen können. Für die erfolgreiche Umsetzung zeigt Ihnen der Autor diverse Tipps und Tricks. Wichtig bei der Verwendung von Stylesheets ist die standardkonforme Erstellung und die Prüfung auf verschiedenen Browsern – in beiden Fällen helfen Dreamweaver und dieses Video-Training weiter.

Mehr Dynamik

Lernen Sie zusätzlich Verhaltensweisen und Aktionen kennen, die mit JavaScript möglich sind. An Beispielen sehen Sie, wie Sie aus statischen HTML-Seiten dynamische Seiten für eine bessere Benutzerinteraktion erstellen. Abschließend erfahren Sie, wie Sie Ihre Web-Seiten verwalten und auf einem Webserver publizieren.