Document

Adobe Muse
Einfache, standardbasierte Websites gestalten
Inhalt
Inhalt2
Aufbau3
Farben4
Planung5
Seitenelemente7
Navigation17
Widgets Bedienfelder
19
Widgets Kompositionen
20
QuickInfo22
Diashow23
2
PAN Publishing AG
Aufbau
Planen
Entwurf
Die Architektur einer Website wird mit Musterund Inhaltsseiten aufgebaut, der effektive
Inhalt ist dabei noch nicht entscheidend
Die einzelne Seite wird entworfen und
gestaltet. Elemente der Musterseite werden
übernommen
Vorschau
Veröffentlicht
Die Einzelseite wird in der internen MuseVorschau dargestellt
Die ganze Website wird auf «Business Catalyst » temporär und kostenlos oder auf dem
eigenen FTP-Host veröffentlicht
3
PAN Publishing AG
Farben
CMYK ist « No Go»
Alle Farbdefinitionen sollen in RGB stattfinden. Dies gilt auch für die
Zubringer-Programme wie Photoshop, InDesign, und Illustrator.
Web-Browser unterstützen kein Farbmanagement, es lohnt sich also
nicht, profilierte Seitenelemente zu erzeugen.
Als bekannteste Farbdefinition gilt das sRGB.
1. Stellen Sie fest, dass die Zubringer-Programme alle mit der
Farbeinstellungen sRGB arbeiten.
2. Gehen Sie hierzu in die Adobe Bridge Menu «Bearbeiten»-
«Farbeinstellungen» und wählen Sie das Adobe-SetUp «Internet »
3. Tipp: Vergeben Sie in den Farbdefinitionen gerundete Werte ein, die Sie sich gut merken können. Dies vereinfacht später die Farb-
definition in den Schwester-Programmen.
4. Muse-Puristen und «Minimizer » löschen in den Farbfeldern alle nicht verwendeten Farben mit «ctrl»-Klick ins Farbfeld und« Alle nicht verwendeten löschen»
5. Zum Ändern von Farben nicht Doppelklicken, da sich sonst der
Satzspiegel eingefärbt, besser «ctrl»-Taste, Menü «Farboptionen».
4
PAN Publishing AG
Planung
Seitenplanung
Im Modus «Planung» werden die nötigen Musterseiten und Inhaltseiten
angelegt.
• Mit Doppelklick auf eine Musterseiten laden Sie im Modus
«Entwurf» und können die Seite einfärben. Das hilft bei der
Übersicht.
• Das Planungsprinzip basiert auf dem «Mutter-Kind»- und
«Bruder-Schwester »-Prinzip.
5
•
Musterseiten werden durch Ziehen auf Inhaltsseiten angewendet.
•
Die Namen der Inhaltsseiten sind entscheidend für die spätere
automatische Navigationserstellung.
PAN Publishing AG
Planung
Untermenüs
Hirarchie
Die Seitenplanung beeinflusst direkt die spätere Gestaltung des Navigations-Menüs. Die Seitenlage von Unterseiten kann horizontal- und
vertikal erfolgen.
Horizontale Seitenanordnung ergibt vertikale Untermenüs und umgekehrt.
Im einer späteren Gestaltungprozess
können auf Wunsch im Navigation-Menü
die Unter-Menüs eingeblendet werden.
Dies wird in den Optionen mit dem
Menütyp « Alle Seiten» festgelegt.
6
PAN Publishing AG
Seitenelemente
Seitengeometrie
1. Erstelle eine neue Website mit den angegebenen Einstellungen
2. Achte darauf, dass die Option «Fusszeile am Ende der Seite» nicht aktiviert ist. Somit erstellst du eine einfache statische Seite
3. Gehe in den Modus «Entwurf»
4. Öffne die Farbfelder
5.Klicke auf ein Farbfeld – damit wird der Satzspiegel eingefärbt.
6. Ziehe mit dem Rechteck-Werkzeug ein Rechteck auf den inneren Satzspiegel der Seite und färbe in ein.
7. Gehe in die Abteilung «Vorschau», die Seite wird angezeigt
8. Gehe zurück in die Abteilung «Entwurf»
9. Erstelle ein weiteres Rechteck, welches links und rechts den
Browserrand berührt – gehe zur «Vorschau»
10. Elemente die in der horizontale beidseitig den Seitenrand
berühren, werden automatisch auf die Grösse des aktuellen
Browserfensters skaliert
11. Mit dem unteren Seitenregler kann die individuelle Höhe der Seite bestimmt werden.
7
PAN Publishing AG
Seitenelemente
Statische & dynamische Seitenelmente
Einsatz der Fusszeile
Die Einstellungen einer Seite können individuell im Menü «Seite»«Seiteneigenschaften» neu definiert werden.
Die Einstellungen für den Fussbereich müssen auf der Musterseite
durchgeführt werden.
Mit der Option «Fusszeile am Ende der Seite» wird die Seitengrösse
dynamisch an die Fenstergrösse des Browserfensters angepasst.
Die Definition des unteren Randes bleibt bestehen.
Die Optionenleiste beinhaltet die
Elementeinstellung « Fusszeile ».
Seitenelemente können das Attribut «Fusszeile» erhalten. Dadurch
können sie in den Bereich Fusszeilenbereich am Seitenende gezogen
werden. Unabhängig davon wie hoch die Seite dynamisch wächst,
schieben die Fusszeilen-Elemente mit.
Die beiden Regler im unteren Seitenbereich lassen die Grösse der Fusszone definieren.
Fusszeilen-Elemente haben Eintrittserlaubnis in den Fusszonenbereich der Seite. Wächst
die Seite durch Erweiterung des Inhalts, verschieben sich Fusszeilen mit.
8
PAN Publishing AG
Schrift & Text
Gruppen
Web-Schriften
Kostenlose Schriften aus der Adobe Edge-Webfont-Bibliothek, die mit dem Adobe CC- Abo mitbenützt werden
dürfen. Muse erstellt im Hintergrund die CSS-Styles
Websichere Schriften
Alle gängigen Betriebssysteme und Browser unterstützen
die Schriften per Vorgabe
System-Schriften
Im Betriebssytem verwaltete Schriften werden zu Bild
gerastert
9
PAN Publishing AG
Schrift & Text
Absatz-, Zeichenformate & Tags
Wie gewohnt
Genau wie in Adobe InDesign funktionieren die Format-Bedienfelder für
Absatz- und Zeichenformate.
Der grosse unverständliche Unterschied liegt darin, dass erstellte Formate nicht dynamisch geändert werden können.
Tags
Sogenannte Inhalts-Tags verhalten sich wie der verknüpfte Text in
InDesign.
Ein Text wird aktiviert. Im Bedienfeld «Inhalt » wird ein neuer Tag angelegt. Dieser Tag wird in eine neue Textbox gezogen. Jetzt ist der Text
verknüpft.
10
PAN Publishing AG
Schrift & Text
Absatz-, Zeichenformate & Tags
Etwas ungewohnt
Nicht ganz wie es aus InDesign bekannt ist zeigt sich das Ändern von
bereits definierten Absatzformaten. Hier geht Muse einen etwas eigenen weg:
1. Aktiviere einen Text, der mit dem Absatzformat welches geändert werden soll formatiert ist
2. Ändere den Textstil so wie gewünscht
3. Jetzt zeigt das Absatzformat im Bedienfeld ein «+»
4. Klicke mit gehaltener «ctrl»-Taste oder rechte Maustaste auf das Absatzformat
5. Gehe zu Menü «Format neu definieren»
6. Schwups – alles upgedatet ;-)
11
PAN Publishing AG
Grafik & Bild
Formate
Chameleon
Bild- und Grafikdaten werden in Muse mit dem Menü «Datei»«Plazieren…» in die Seite geladen.
Eine Spezialität besteht darin, dass Photoshop-Dateien mit Ihren Ebenen
geladen werden können, so dass aus jeder Ebene ein Interaktiver Status
entstehen kann. Dies geschieht mit Menü «Datei»-«Photoshop-Schaltfläche plazieren…»
Bereits beim Laden einer Ebenendatei können die Stadien der Datei
bestimmt werden
Die einzelnen Ebenen aus Photoshop sind im Bedienfeld «Status» sichtund editierbar.
Formate
Bilder flach
JPEG
Bilder Ebenen
PHS
Pixelgrafik
PNG
Vektorgrafik
PNG/SVG
Grafiken aus Illustrator lassen
sich auch locker via Copy/
Paste integrieren. Das interne
Format ist dabei SVG und
somit vektorbasierend.
12
PAN Publishing AG
Grafik & Bild
Bilder und Grafik laden
« Alles genau wie im InDesign,
einfach alles etwas anders»
Ein paar Tipps
1. Idealerweise werden die Bilder schon Im Photoshop auf die richtige Grösse und Auflösung gerechnet
2. Muse arbeitet genau wie InDesign mit einer Rahmenbox und
einer Inhaltsbox.
3. Doppelklick führt zur Inhaltsbox und lässt den Bildauschnitt
verändern.
4. Die Tastaturkürzel für die Bildproportionen und Verhältnisse sind unverständlicherweise nicht wie in InDesign geraten ;-((
Man merke sich in Muse:
• Ziehen an der Inhaltsbox verändert den Bildinhalt proportional
Klick auf die Bildbox mit gehaltener «ctrl»-Taste oder rechter
Maustaste führt zum Bild-Kontext-Menü
• Ziehen an der Inhaltsbox mit gehaltener «Shift »-Taste verändert den Bildinhalt proportional
• Ziehen an der Bildbox verändert die Bildbox mit Inhalt
• Ziehen an der Bildbox verändert die mit gehaltener « Befehls»-Taste verändert die Bildbox ohne Inhalt
•
13
Bilder in eine vorgegebene Bildbox laden funktioniert nicht
dazu wählt man Kontext-Menü « Bild ersetzten»
PAN Publishing AG
Links
Link & Anker
Hyperlink
Das anlegen von Hyperlinks ist in Muse denkbar einfach. Jedes Objekt
kann ein Hyperlink sein. Das gewünschte Objekt wird aktiviert und in
der Steuerleiste die Option «Link hinzufügen/nach Links filten» gewählt.
Meistens werden die URL’s direkt aus dem Browser kopiert.
Gelinkt werden kann:
- Externe Seite
- Interne Seite
- Position in einer internen Seite
- Datei Download
- Email-Adresse
14
PAN Publishing AG
Links
Link & Anker
Anker
Mit dem Anker-Symbol in der Steuerleiste wird ein Anker auf einen
beliebigen Platz in der Seite gesetzt und benannt. Dabei bitte keine
Sonderzeichen verwenden.
Jedem Objekt kann nun der Hyperlink «gehe zu Anker » vergeben werden».
Die Anker-Methode empfiehlt sich zur Navigation bei langen Roll-Seiten.
15
PAN Publishing AG
Links
Linkstil
Gestilte Hyperlinks
Das Erscheinungsbild der Hyperlinks lässt sich für jeden Status definieren und als Linkstil abspeichern.
16
PAN Publishing AG
Navigation
Menüführung
Die Navigation wird mit einer klaren, übersichtlichen Navigation mit
einer Menüleiste erreicht.
In Muse werden Navigationsmenüs mit einem «Widget » erstellt. Ein
vorgefertigtes Modul erstellt automatisch die Navigation der Seiten.
Ein kleiner blauer Pfeil zeigt die Grundeinstellungen des Menümodules.
Alle grafischen Eigenschaften können editiert werden. Dazu sind die
beiden Bedienfelder Status und « Abstand» und «Status» nötig.
Wichtig ist zu wissen, dass mit mehreren Doppelklick immer tiefer in
das Detail des Menü-Elementes vorgedrungen wird.
17
PAN Publishing AG
Navigation
Und das gibt’s auch noch
Seiteneigenschaften
Hier wird in den Optionen bestimmt, ob die Seite im Navigations-Menü
auftauchen soll und ob die Seite grundsätzlich exportiert werden soll.
Hier können die Ausgabeparameter bestimmt werden.
Achtung Verwechslungsgefahr
Das Menü für die Eigenschaften
der gesamten Site sieht fast
gleich aus.
18
PAN Publishing AG
Widgets Bedienfelder
Bedienfelder
Die beiden Bedienfelder-Widgets « Akkordeon» und «Registerkarten»
sind Weltmeister im Platzsparen. Die Gestaltung der Elemente funktioniert wie bei den Widgets für die Navigation.
Eigentlich sind Bedienfelder Seiten in Seiten mit eigener Navigation.
Muse gibt die Navigation vor. Diese ist beschränkt veränderbar.
Die Orientierung bei der Gestaltung der Bedienfelder ist etwas komplex. Oft wird die Übersicht verloren, welche Objekte in welchem Status
verändert werden.
Der Kompromiss der Platzsparer ist wohl die fehlende Übersicht der
Inhalte.
19
PAN Publishing AG
Widgets Kompositionen
Leerer Container
Kompositionen sind nichts anderes als leere Boxen, in die mit eigenem
Inhalt gefüllt werden. Sie besitzen in der Regel eigene Navigationen.
Die verschiedenen Kompositionen haben alle unterschiedliche Eigenschaften.
Mit Kompositionen lassen sich mit etwas Ideenreichtum interessante
Einblender gestalten.
Alle Kompositionen beinhalten Ein- und Ausblend-Optionen mit definierbarer Übergangsgeschwindigkeit. Dadurch lassen sich Fenster weich
animieren. (Obacht kann auch langweilig werden)
20
PAN Publishing AG
Widgets Kompositionen
Kompo’s – Wer kann Was
Ausgewählte Nachrichten
- Navigation mit variablem Text
- Inhalt in gegebenen Text /Bild-Rahmen
Leer
- Navigation leer, selber definierbar
- Inhalt leer, selber definierbar
Leuchtkasten
- Navigation leer, selber definierbar
- Inhalt leer, selber definierbar
- Vollschirmanzeige
QuickInfo
- Navigation leer, selber definierbar
- Inhalt Text /Bild in gegebenen Rahmen
21
PAN Publishing AG
QuickInfo
Schnelle Antwort
Die Komposition «QuickInfo» erstellt ein Info-Fenster, welches eingeblendet wird, wenn der dazugehörige Knopf aktiviert wird.
Im Web-Design werden diese Info-Boxen auch als «fliegende Fenster »
bezeichnet. Die Technik ist ideal für das Einblenden von Hilfestellungen.
Tipp
•
Es können beliebig viele Info-Fenster in der Komposition
zusammengestellt werden.
•
Die Knöpfe der QuickInfos können frei positioniert und
gestaltet werden.
•
Die Info-Fenster können aber nicht gemeinsam gestaltet werden
•
Es sind diverse «Misshandlungen» dieser Funktion denkbar :
- Stadtplan Info
- Navigation
- Erklärungen/Hilfen/ Tipps
Gestalten Sie das erste Infofenster und legen sie den Stil
im Bedienfeld «Grafikstile»
ab. So ist es für die weiteren
Fenster abrufbar.
Nicht vergessen:
Absatzformate definieren
22
PAN Publishing AG
Diashow
Fotoalbum
Durchlaufbare Bildergalerien sind feste Gestaltungsvarianten auf WebSites. Auch hier wird mit vorgegebenen Widgets gearbeitet.
1. Ziehen Sie das Widget «Diashow »-«Einfach» auf die Seite
2. Gehen Sie in den Widgets-Optionen zu «Bilder hinzufügen»
3. Gestalten Sie die Diashow und prüfen Sie sie in der Vorschau
Da die Diashows Selbstläufer sein
können, sind sie beliebt für
Banner Gestaltung
Tipp
Lassen Sie die Navigation der Diashow bis
zum Beenden der Gestaltung eingeblendet. Damit können Sie sich zu einzelnen
Bilder navigieren und den Ausschnitt
bestimmen
23
PAN Publishing AG
Tastenkürzel
Hot & Short
Modus Planen
Cmd-M
Modus Entwurf
Cmd-I
Modus Vorschau
Cmd-P
Page-Vorschau Browser
Umschalt-Cmd-E
Site-Vorschau Browser
Opt-Cmd-E
Element plazieren
Cmd-D
Photoshop plazieren
Cmd-D
Einsetzen an Originalposition
Opt-Umschalt-Cmd-V
Schnell Anwenden
Cmd-Enter
24
PAN Publishing AG
;-)

Download Report