Seite einrichten

aus: Professionelles Web-Publishing mit der Adobe Creative Suite 3

Kaufen

Über dieses Video

In diesem Film richtet der Autor eine Beispiel-Web-Seite ein, die als Basis für die Bearbeitung in den einzelnen Lektionen dient.

Auszug aus: Professionelles Web-Publishing mit der Adobe Creative Suite 3

Von Rapid Prototyping und Web-Export mit Fireworks und Photoshop über Design für Flash und Web-Workflows mit Dreamweaver und Contribute reicht der Bogen bis hin zu mobilen Inhalten mit Device Central. Sven Brencher bietet in diesem Online-Training das Hintergrundwissen mit dem das Schlagwort "Cross-Media-Publishing" zur Realität wird.

EUR 29,95

Kaufen

Ähnliche Video-Trainings

Vorbei die Zeit, in der Oberflächen-Design nur umständlich per Code erfolgte: Mit den funktionellen Designerwerkzeugen der Creative Suite ist die Gestaltung spielerisch einfach. Fireworks ist dabei das Paradepferd für Design und Rapid Prototyping.

Design und Rapid Prototyping
- Fireworks ist das Programm, mit dem Sie schnell und einfach Benutzeroberflächen für Web- und Rich-Internet-Applikationen erstellen.
  
  Benutzeroberflächen mit Fireworks
  - Um bereits mit den Adobe-Programmen Photoshop oder Illustrator erstellte Dateien in Fireworks zu importieren, ist nur wenig zu tun – auch, wenn der Illustrator-Import an der einen oder anderen Stelle hakt. Sehen Sie selbst ...
    
    Illustrator-Grafik importieren
    
    08:04
  - So klappt der Import von fertigen Photoshop-Dokumenten. Probleme mit Schnittmasken lösen Sie dabei durch Umwandeln in eine Ebenenmaske.
    
    Photoshop-Dokumente importieren
    
    06:04
  - Ein paar entscheidende Vorzüge machen Fireworks zur Entwicklungsplattform der Wahl für Oberflächen. Einer davon: Sie können mit Seiten und Seitenbereichen arbeiten. Ein anderer: Nutzen Sie Musterseiten! Fireworks nutzt für den Aufbau der Seitenelemente das Prinzip der Vererbung.
    
    Seiten und Musterbereiche
    
    09:12
  - In diesem Film zeigt der Autor, wie Sie mit dem Hotspot-Werkzeug Buttuns in die Oberfläche einbauen, mit denen sich durch die Seitenstruktur navigieren lässt.
    
    Hotspot-Werkzeug und Seitenvorschau
    
    03:20
  - Fireworks liefert mit der "Allgemeinen Bibliothek" eine Sammlung von Standard-Elementen in verschiedenen Designs, die Sie für die Gestaltung einsetzen können.
    
    Allgemeine Bibliothek
    
    04:35
  - Die Musterelemente wären starr und zu wenig flexibel, ließen sich ihre Eigenschaften nicht anpassen: Dies besorgen Sie schnell und übersichtlich in einer eigenen Palette: "Symboleigenschaften".
    
    Symboleigenschaften
    
    02:17
  - Damit einzelne Symbole selbst in skalierten Elementen nicht verzerrt dargestellt werden und zentrierte Titel und Beschriftungen dort bleiben, wo sie hingehören, setzt Fireworks auf die 9-Slice-Skalierungstechnik.
    
    9-Slice-Skalierung
    
    04:43
- Fotos im Web sollten bestimmte Vorgaben einhalten – Format und Dateigröße gehören dazu. Um Bilder für das Web aufzubereiten, nutzen Sie Werkzeuge in Photoshop oder Fireworks. Unterstützung erhalten Sie aber auch von den anderen Creative-Suite-Programmen.
  
  Bildmaterial vorbereiten
  - Damit Sie schon in Photoshop Bilder optimal für die Web-Darstellung aufbereiten, unterstützt Sie das Programm mit einer spezialisierten Speicherfunktion. Worauf Sie achten müssen, zeigt Sven Brencher hier.
    
    Photoshop-Export für Web
    
    08:04
  - Die gleiche Funktion, die Sie in Photoshop nutzen, bietet auch Fireworks. Dabei scheint das gesamte Programm noch besser um diese Funktion "herum gebaut".
    
    Bilder in Fireworks optimieren
    
    06:17
  - Hilfreich gerade für die Gestaltung komplexer Benutzeroberflächen: Eine Ebenenkomposition. Wie's geht und mit welchen Tricks Sie die besten Ergebnisse schaffen, sehen Sie hier.
    
    Ebenenkomposition
    
    06:27
  - Ist Ihr Ziel eine Fotogalerie fürs Web, nutzen Sie – über die Bridge – den entsprechenden Photoshop-Export. Übrigens: Mit Dreamweaver können Sie das Ganze noch nachbearbeiten und sogar eigene Galerie-Vorlagen gestalten.
    
    Web-Fotogalerie
    
    05:36
  - In diesem Film zeigt Sven Brencher, wie Sie in Photoshop aus einer Reihe von Bildern ein Panorama erzeugen und – weil das Ergebnis so groß ist – mit "Zoomify" ein Bild einbauen, aus dem der Betrachter nach Belieben Detailausschnitte wählen kann.
    
    "Zoomify"
    
    03:58
Flash ist das Schlagwort für interaktiv bewegten Content im Internet – und der Name des zugehörigen Programms in der Creative Suite. In den Abschnitten dieses Kapitels sehen Sie, wie Sie Flash-Content erstellen und Animationen steuern.

Flash
- Vor der Animation steht das Design: Nicht nur das der animierten Objekte selbst – auch Hintergrund und weitere Symbole wollen gestaltet sein.
  
  Design
  - Weil Illustrator CS3 gut mit Flash zusammenarbeitet, können Sie Flash-Oberflächen mit Illustrator gestalten. Nutzen Sie die Symbolbibliothek, um Elemente zu verwalten.
    
    Benutzeroberflächen in Illustrator
    
    09:41
  - Sehen Sie in diesem Film, wie Sie Illustrator-Dokumente in Flash importieren und dabei über ein Menü auswählen, ob und welche Ebenenelemente konvertiert werden.
    
    Illustrator-Dokumente importieren
    
    04:17
  - Genauso einfach wie der Import von Illustrator-Dateien: Photoshop-Dateien importieren.
    
    Photoshop-Dokumente importieren
    
    07:35
  - Natürlich lassen sich auch Fireworks-Dateien schnell und einfach in Flash importieren – stammen beide Programme doch ursprünglich aus gleichem Hause ...
    
    Fireworks-Dokumente importieren
    
    03:45
- Damit in Flash aus einzelnen Bildern eine Animation wird, versetzen Sie Elemente (Symbole) in Bewegung. Mit Aktionen steuern Sie diese Bewegung – die Programmlogik übernimmt dabei die Sprache ActionScript.
  
  Symbole und Aktionen
  - Wie Sie in Flash eine einfache Animation erzeugen, zeigt der Autor anhand von Schlüsselbildern und der Zeitleiste in diesem Beispiel. Außerdem: Ein erster Ausflug in ActionScript.
    
    Animation
    
    05:22
  - In diesem Film sehen Sie, wie Sie erweiterte Aktionen mit Flash und ActionScript umsetzen. Das Beispiel hier: Schaltflächen. Die zugehörigen EventListener gehören zum ActionScript-Code.
    
    Aktionen
    
    08:24
Wenn Sie professionelle Web-Seiten erstellen möchten, ist Dreamweaver aus der Creative-Suite-Palette das Werkzeug Ihrer Wahl: Die Integration mit den anderen CS3-Programmen erleichtert Ihren Workflow dabei erheblich. Die Filme dieses Kapitels zeigen, wie Sie Dreamweaver im Verbund mit seinen Partner-Programmen optimal einsetzen.

Dreamweaver
- In diesem Film richtet der Autor eine Beispiel-Web-Seite ein, die als Basis für die Bearbeitung in den einzelnen Lektionen dient.
  
  Seite einrichten
  
  04:07
- Um ein Photoshop-Dokument in eine Seite einzufügen, nutzen Sie die eingebauten Importfunktionen und die Bridge. In Dreamweavers Import-Dialog treffen Sie weitere Einstellungen für Platzieren und Speichern.
  
  Photoshop-Import und -Bearbeitung
  
  08:30
- Der Dateiaustausch zwischen Fireworks und Dreamweaver funktioniert ebenso leicht, wie zwischen Photoshop und Dreamweaver. Welche Einstellungen Sie dabei wählen müssen, erfahren Sie in diesem Film.
  
  Fireworks-Import und -Bearbeitung
  
  04:52
- Flash-Applikationen für eine Webseite in Dreamweaver einzufügen, ist ein Kinderspiel: Per Dialog legen Sie die SWF-Datei in den passenden Ordner und schon ist der Flash-Content in der Dreamweaver-Seite verfügbar. Das einzige, was nötig ist: Die richtigen Pfade zu SWF- und FLA-Datei zu setzen.
  
  Flash-Import und -Bearbeitung
  
  03:50
- Mit Cascading Stylesheets bringen Sie die Inhalte Ihrer Web-Seiten in die rechte Form. Dreamweaver unterstützt Sie dabei mit Vorlagen und praktischen Werkzeugen.
  
  CSS-Design
  - Dank einer breiten Auswahl mitgelieferter Vorlagen müssen Sie in Dreamweaver nicht jedes Stylesheet mühsam von Hand erstellen.
    
    CSS-Vorlagen
    
    09:39
  - Einen Überblick über den Aufbau und die Funktionen der CSS-Palette liefert Ihnen dieser Film. Mit dieser Palette ist der Umgang mit Styles so einfach wie nie zuvor.
    
    CSS-Palette
    
    05:57
  - Wie Sie an Stelle einer Kopfzeile ein Menü einbauen, und dabei eine ungeordnete Liste mit den passenden CSS-Styles einsetzen, zeigt Ihnen der Autor in diesem Film: Eine Standard-Aufgabe aus der Praxis.
    
    CSS-Menü
    
    13:20
  - Mit den CSS-Layout-Werkzeugen in Dreamweavers Entwurfsansicht erleichtert das Programm das Styling Ihrer Web-Inhalte. Wie Sie diese Werkzeuge bestmöglich einsetzen, veranschaulicht dieses Video.
    
    CSS-Layout-Werkzeuge
    
    04:44
- In der Creative-Suite-Web-Edition (und der Master-Edition) ist Contribute enthalten. Damit – beziehungsweise mit den Contribute-Funktionen von Dreamweaver – erstellen und verwalten Sie benutzereditierbare Seiten.
  
  Contribute Websites
  - Sehen Sie hier, wie Sie die Contribute-Settings einrichten, die Daten für die benutzereditierbaren Funktionen verwalten und die Freigaben passend setzen. Wie von den CS3-Programmen gewohnt, bietet Dreamweaver für die Contribute-Funktionen eine komfortable grafische Oberfläche.
    
    Contribute-Funktionen aktivieren
    
    04:50
  - Dieser Film führt vor, wie die Bearbeitung einer Web-Seite oder einzelner Inhalte vom Standpunkt eines "Clients", also eines Redakteurs abläuft.
    
    Seitenbearbeitung in Contribute
    
    05:42
  - Weil der Redakteur in der Regel keine eigenen Inhalte einstellen darf, sondern nur Vorhandenes bearbeiten, setzen Sie Musterseiten und editierbare Bereiche ein.
    
    Musterseiten und editierbare Bereiche
    
    08:02
In diesem Kapitel geht es darum, wie Sie Inhalte aus anderen Anwendungen für die Web-Aufbereitung in Dreamweaver exportieren. Das Hauptaugenmerk liegt dabei auf InDesign. Außerdem: Nutzen Sie das Spry-Framework für dynamische Datensätze.

Datenaustausch
- Das Spry-Framework erlaubt die Arbeit mit dynamischen Datensätzen. Sehen Sie hier, wie Sie diese Funktion mit Dreamweaver nutzen.
  
  Spry-Datensätze
  
  08:06
- Setzen Sie auf die erweiterten Gestaltungsfunktionen von InDesign, um Dokumente zu gestalten, die Sie in Dreamweaver weiterbearbeiten und fürs Web aufbereiten.
  
  InDesign-Export für Dreamweaver
  
  08:19
- Die Stile der InDesign-Datei fangen Sie mit CSS-Style-Anweisungen ab. Auf diese Weise macht der Autor die Inhalte dieses Beispiels praxistauglich.
  
  CSS-Stile für den InDesign-Export
  
  11:35
- In diesem Film entwirft der Autor eine Navigation für die Beispielseiten. Immer noch am einfachsten: Mit einem Frameset.
  
  Frameset für den InDesign-Export
  
  03:23
Mit Device Central enthält die Creative Suite eine Datenbank für mobile Geräte, etwa Mobiltelefone, PDAs oder künftige Symbiosen aus deren Funktion. Die Filme dieses Kapitels zeigen, wie Sie Content für diese Geräte schaffen.

Inhalte für mobile Endgeräte
- Dieser Film bietet eine Einführung in die Gerätedatenbank Device Central, eigentlich eine Testumgebung für entsprechende Applikationen. Sortieren Sie Geräte in Gruppen und aktualisieren Sie die Datenbank online.
  
  Geräteprofile in Device Central
  
  02:37
- In diesem Video zeigt Sven Brencher beispielhaft, wie Sie Flash- oder Bitmap-Inhalte für ausgewählte Mobilgeräte erstellen und anpassen.
  
  Export für Device Central
  
  12:59