Grundlagen Adobe Muse 2015

e r s t e l lt v o n D e s i r e e S c h n e i d e r

2016 release responsive

Adobe Muse Grundlagen 2016

Allgemeine Infor mationen
Auf Adobe Website auch schauen RESPONSIVE,dort finden Sie auch
gute Anleitungen.

Site of the day dort sieht man was Leute so fr Websites mit Muse ge-

macht haben.

Vor -und Nachteile Adobe Muse

TYPISCHER ANWENDUNGSBEREICH
> Fr designorientierte Leute

> Wissen von Indesign notwendig

Einfache Website ohne Interaktion mit dem Benutzer mglich
eher fr Informationen Homepages gedacht

Pros

Contras

> leicht zu erlernen

> Muse ist kein Content Management System

> Teil des Adobe kosystems

> keine Datenbankverbindung

> Interaktiv, Aktionen etc. auch gut

> keine Skripte auf dem Server

> Website sind statisch

Gr afikfor mate in Adobe Muse

WELCHE FORMATE GIBT ES?

> JPG
> GIF
> PNG
> PSD

SEite 1

I N H A L T S V E R Z E I C H N I S
ALLGEMEINE INFORMATIONEN

VOR -UND NACHTEILE ADOBE MUSE

GRAFIKFORMATE IN ADOBE MUSE

TABELLE 2
SEITE ERSTELLEN UND TIPPS ZU DEN WERKZEUGEN

OBJEKTE ANWHLEN

IM NACHHINEIN DIE SEITE NDERN

SEITEN ERSTELLEN UND ANORDNEN

EINSTELLUNGEN NDERN/EIGENSCHAFTEN DER HOMEPAGE

SEITENEIGENSCHAFTEN ANPASSEN

KOPF UND FUSSZEILE BEARBEITEN

FUSSZEILEN: 6
MEN FORMATIEREN UND BEARBEITEN

RECHTECKWERKZEUG 11
FARBEN 13
TRANSPARENZEN EINSETZEN/GRAFIKEN PLATZIEREN

14

TEXT EINFGEN

14

UMGANG MIT SCHRIFTARTEN AUF WEBSEITEN

15

AUFZHLUNGSZEICHEN MACHEN

15

ABSATZFORMATE/ZEICHENFORMATE/GRAFIKSTILE 15
AUFZHLUNGSZEICHEN 16
ABSATZFORMATE 17
AUFZHLUNGSZEICHEN FORMATE

18

ZEICHENFORMATE 18
GRAFIKSTILE 20
ORDNUNG AUF DER STARTSEITE

20

TEXTRAHMEN / SCHRIFTEN KLEBEN OBEN LSUNG

21

HINTERGRUND DEFINIEREN / EYE CATCHER

21

INFO TEXT PLATZIEREN/ BUTTON / NAVIGATION

24

TEXT HYPERLINKS UND HYPERLINK FORMATE

26

EXTERNER LINK

28

BERBLICK BER WIDGETS (KLEINE HTML. PAKETE)

28

FORMULARE ERSTELLEN

30

Adobe Muse Grundlagen 2016

Tabelle

Pros JPS

Contras Jpgs

> Ideal fr Fotos

> Schlecht fr Text

> Kleine Dateigrsse

> Keine Transparenzen, Farben werden nicht durchscheinen

> Qualitt und Dateigrsse einstellbar

> Verlustbehaftete Kompression

> Farben werden heraus geschmissen,die das Auge nicht sieht.
> Fr Logos ist Jpg nicht geeignet.

Pros Gif

Contras Gif

> Keine Animationen mglich

> Schlecht fr Text

> Sehr kleine Dateigrsse

> Nur eine Trransparenz, man kann

max. 256 Farben darstellen

> Gut fr Logos,

Pros PNG

Contras PNG

> 256 Transparenzen

> Problem Im Internet Explorer 6

> Verlustfreie Kompression

> Grsser Dateien,als bei gif und jpg

> Qualitt und Dateigrsse einstellbar

> Verlustbehaftete Kompression

> Auch gut fr Logos

Pros PSD

Contras PSD

> Innerhalb von Muse kann ich mit

PSD arbeiten und Muse rechnet dann
dies um

> Problem Im Internet Explorer 6

> Ideal im Vorfeld fr Formatierungen

von Bildern und Buttons

> Nicht Internet Browser kompatibel

> Qualitt und Dateigrsse einstellbar

SEite 2

Adobe Muse Grundlagen 2016

Seite er stellen und Tipps zu den Wer kzeugen
> Video to Brain findet 500px in der Breite optimal,im Kurs waren wir bei 1000
Pixel Breite
> Footer immer unten anklicken, d.h. Egal wie gross die Seite ist: Das Objekt
bleibt immer wo es sein soll,unabhngig von der Grsse, z.B Die Schrift
bleibt immer unten.
> Rnder: linke Seite 10 und rechte Seite 10
> Innenabstand einfach mal lassen.
> Auflsung: eigentlich Standard lassen HDPI ist eine hoch-aufgelste Form,
Muse rechnet dies jedoch automatisch um, je nach dem wer es ffnet,bzw.
was sein Gert anzeigen kann.

Objekte anwhlen
> Immer das was man in der Seite anwhlt wird oben in der Leiste angezeigt.
D.h. Z.B den Textrahmen und dann bearbeitet man auch den Textrahmen.

SEite 3

Adobe Muse Grundlagen 2016

Im Nachhinein die Seite nder n
> Doppelklick auf die Seite
> Seite ndern: Datei_Site Eigenschaften, dort kann man mehr einstellen. Im
Men Layout z.B kann man die Seite verndern, Grsse usw.

NEUE SEITE ANLEGEN:

Auf das Rechteck plus Zeichen drcken dies generiert mir eine neue Seite.
Ich kann auch zu Seiten Unterseiten generieren, um mehr Infos innerhalb
der Oberseite zu erhalten.

DIESEN UNTERMENS HABEN EINFLUSS

AUF DAS MEN
SELBER. D.H
IM MEN WIRD
DANN AUTOMATISCH EIN
UNTERMEN
GENERIERT ZU
DEM JEWEILIGEN
MEN

SEite 4

Adobe Muse Grundlagen 2016

Seiten er stellen und anor dnen
> Homepage ist immer die Startseite d.h. Hat auf dem Browser immer die Endung index html.
> Fr das Erkennen im Browser ist fr Adobe Muse es sehr wichtig, die erste
Seite.
> Also wenn ich Seiten tausche, an einen anderen Ort, wird dies dann automatisch in den Mens angepasst bzw. den Untermens

Einstellungen nder n/Eigenschaften der Homepa ge

BROWSERFLLUNG:
> Man kann der Webseite eine Browserfllung zuweisen,weil es immer einen
Rand zwischen der Homepage hat .
> Wenn man die Browserfllung z.B Mit grau macht sieht das so aus:

SEite 5

Adobe Muse Grundlagen 2016

Seiteneigenschaften anpassen
> Dazu gehe ich im Men auf Datei/Site-Eigenschaften
> Wenn man aber nur fr eine andere Seite etwas ndern will: auf diese Seite
clicken,mit der rechten Maustaste

DIE METADATEN
> Beschreibung fr Google wichtig, dadurch findet er durch die Metadaten Beschreibung, dass was der User sucht, bzw. Google zieht diese Beschreibung
fr diese Resultate heraus

OPTIONEN
> ndern von Seitennamen, Dateiname festlegen
> Bei Sitemap immer einen Haken machen, ist standardmssig
> Musterseiten kann man auch Site-Einstellungen machen, die sind jedoch
zweitrangig

Kopf und Fusszeile bearbeiten

FUSSZEILEN:
> Doppelklick auf Seite
> Man sieht anhand der Linien, wo die Kopf und Fusszeile liegen.

SEite 6

Adobe Muse Grundlagen 2016

> Wenn ich an den Pfeilen weiter nach unten ziehe, dann verschiebt sich meine
Homepage. Bzw. der Browserhintergrund wird grsser
> Da man die Seiten ja auch auf Phones und Ipads anschaut, ist es gut die
Kopfzeile auf Null zu setzen und die Fusszeile auf. bzw. die Standardeinstellung macht, sodass der Wert auf 500pixel steht.
> Bei diesen blauen Linien ist der Bereich geschtzt. Ich kann da keine Objekte
platzieren (ist ja Kopf und Fusszeile), aber man kann dies schon ndern: Ich
muss oben rechts einfach ein Hkchen setzen bei "Fusszeile", d.h. Dann kann
ich einen Textrahmen od. so einfgen, weil dies nun zur Fusszeile gehrt
> Wenn ich den Textrahmen direkt in der Fusszeile mache, kommt das Hkchen
automatisch

SEite 7

Adobe Muse Grundlagen 2016

> Wenn ich die Kopf od. Fusszeile will auf einer Seite grsser machen mchte,
geht das nicht. Bekomme eine Fehlermeldung. Dies muss man auf der Musterseite machen

Men for matier en und bearbeiten

> Es macht Sinn die Mens auf den Musterseiten festzulegen, wenn ich dies auf
allen Seiten sichtbar haben mchte
> Auf der Startseite wird jedoch das Men nicht erscheinen
> Mal aus der Widget Bibliothek das Men auf die Seite ziehen.
> Wie man sieht, wird diese Men automatisch mit den Benennungen dargestellt,
da wir dies beim Entwurf schon benannt haben.

SEite 8

Adobe Muse Grundlagen 2016

WIDGETS MENS
> Oben rechts, wenn man das Widget Men herausgezogen hat, auf den Pfeil
klicken, dann kriegt man Optionen, wo man ein paar nderungen machen
kann.

> Wenn ich im Bereich Mentyp: "Alle Seiten" auswhle, dann kommen die
Untermens auch gleich dazu.
> Wenn ich bei den Optionen "gemeinsam bearbeiten" aktiviere, werden nderungen innerhalb dieses Widgets ganz bernommen z.B ( Schrift, od.
Schriftgrsse )

SEite 9

Adobe Muse Grundlagen 2016

> Wenn ich im Entwurf eine weitere Seite anlege, dann wird das Men automatisch mit dieser Testseite erweitert

MEN ANPASSEN
> Beim formatieren der Mens muss man immer genau schauen was man ausgewhlt hat
> Menbefehle: knnen:... aktiv, normal, od. rollover sein
> D.h wie schauen diese Menpunkte aus, wenn ich mit der Maus darber fahre
> Wenn man die Schriftart ndern will, dann muss das auch in den Rollover Mens ndern.
> Bei Rollover: Ist es schn:Verblassen anzuklicken

SEite 10

Adobe Muse Grundlagen 2016

UNTERMENS BEARBEITEN
> Auf die gleiche Art und Weise wie die Hauptmens, die Untermens auch auswhlen.
> In den Untermens das gleiche Spiel, soweit hinein klicken bis man an dem
Ort ist wo man formatieren mchte

Rechteckwer kzeug
> Wenn ich ein Rechteck ziehe mit gedrckter Maustaste , dann gibt es mir verschiedene Punkte /Hilfslinien an

QUADRAT ERSTELLEN
> Gleich wie beim Rechteck aber schauen, dass ich auf 80x80 komme
> Mit gedrckter Shift Taste kann ich nun das Quadrat skalieren
> Ziehe ich ein zweites Quadrat welche auf der gleichen Hhe sein soll, wie das
erste, muss man in die Nhe des ersten Quadrates kommen, und das zweite
Quadrat richtet sich von der Hhe dem anderen Quadrat an

SEite 11

Adobe Muse Grundlagen 2016

MIT WEITEREN QUADRATEN AUSRICHTEN

EIGENSCHAFTEN VON RECHTECKEN

> Eigentlich das Gleiche wie bei anderen Adobes
> Spezieller ist, dass man beim Rechteckwerkzeug, die Seite einer Kontur zu
lsen... Bzw. so auch Linien machen kann, wenn man die Konturen lscht, bis
es nur noch eine Linie ist.
> Will ich eine vertikale Linie dann stelle ich mit dem Drehwerkzeug od. Mit dem
Transformieren Werkzeug den Winkel ein.
> Abgerundetes Rechteck: Je weiter ich abrunde, umso mehr knnen auch die
Innenecken abgerundet werden
> Auch Effekte sind mglich, wie Schlagschatten/Abgeflachte Kanten Relief.... .

SEite 12

Adobe Muse Grundlagen 2016

Farben
> Grundstzlich gleich wie bei den anderen Adobes.
> Aber es gibt einen anderen Farbraum (HSV) od. (HSB)
> Dann das Hexa Farbsystem kommt von den Programmierern: z.B Gartenhaag
7799FF, dies ist ein Wert von einer Farbe in der Programmiersprache
> Wenn ich von einer anderen Website, diese Farbe so schn finde, kann ich mit
der Pipette die Farbe aufnehmen.

Aber dann muss ich in meinem Dokument ins Leere (Weiss) klicken, Maustaste nicht los lassen, ins Webdokument hineingehen und Maustaste dann
erst loslassen

SEite 13

Adobe Muse Grundlagen 2016

Tr anspar enzen einsetzen/Gr afiken platzier en
> Grafik platzieren gleich wie bei InDesign
> Vergrssern und Verkleinern ohne Shift Taste
> Wenn ich ein quadratisches Bild mchte In die Transformierung gehen... Kette lsen

>
>
>
>
>
>
>
>
>
>
> Mit dem Freistellungswerkzeug, kann man dann das Bild quadratisch machen.
> Von rechts nach links ziehen
> Ich kriege dann ein Donut wie bei InDesign, wo ich den Bildausschnitt whlen
kann

BER EIN BILD TEXT DARBER

> Textrahmen ziehen ber das Bild und formatieren
> Bedienfeld Text ffnen
> Eine zweite Flche anlegen, Deckkraft reduzieren, und Schrift anordnen nach
vorne

Text einfgen
> Eigentlich wie bei InDesign, Textrahmen aufziehen und reinschreiben. Anders
als bei InDesign: Der Text im Textrahmen wird immer so gross wieder der
Text ist. Es gibt keinen bersatztext.

SEite 14

Adobe Muse Grundlagen 2016

Umgang mit Schriftar ten auf Webseiten
> Standardschriften (mit Fallbacks) das sind Schriften, die wirklich jeder hat.
> Mchte ich eine andere: mit Typekit Webschriften hinzufgen.
> Type Kit Web Fonts, Schrift anklicken, dann wird sie installiert.

Aufzhlungszeichen machen
> Text Men Leiste od. Fenster/ Aufzhlungszeichen

Absatzfor mate/Zeichenfor mate/Gr afikstile

> Eigentlich gleich wie bei Adobe InDesign
> Achtung fr Google ist es wichtig, Werte beim Namen H4, H2 berschrift zu
definieren, damit Google weiss was wichtig ist,

SEite 15

Adobe Muse Grundlagen 2016

Aufzhlungszeichen
> In Adobe Muse gibt es ein eigenes Men fr Aufzhlungszeichen: und zwar
Fenster/Aufzhlungszeichen od. in der Leiste dies auswhlen
> Text auswhlen und dann dies im Pop Up Men machen

> Wenn mir die Zeichen nicht gefallen, habe ich auch die Mglichkeit ein neues
Zechen zu erstellen. Dazu gehe ich in die Punkte und gehe auf neues "Zeichen"
> Neues Fenster ffnet sich, und da kann ich dann ein neues Aufzhlungszeichen auswhlen

SEite 16

Adobe Muse Grundlagen 2016

Absatzfor mate
> Ist so ziemlich hnlich wie bei InDesign
> Was bei Adobe Muse wichtig ist sind die Absatztag, dort kann man differenzieren um was es sich handelt, sodass Google herauszieht, was wichtig
ist.

> Absatzformate speichern keine Aufzhlungszeichen

> ndere ich die Farbe z.B.eines Absatzformates kriege ich wie bei InDesign
ein + neben dem Absatzformat. Wenn ich dies aber nicht ndern mchte
hat es unten einen durchgestrichenes + d.h. Entferne die nderung.
> Aber neuer Absatznderung hinzufgen ist wie bei InDesign

SEite 17

Adobe Muse Grundlagen 2016

Aufzhlungszeichen For mate
> Die Absatzformate speichern nicht die Einstellungen von Aufzhlungen od.
Nummerierungen
> In Adobe Muse gibt es eigene Aufzhlungszeichen Formate unter Fenster Aufzhlungszeichenformate
> Wenn ich den Text dann markiere, kann ich die Aufzhlungszeichenformate
gehen, dieses auswhlen, und dann werden die dem Absatz zugewiesen

>

> Will ich im nachhinein die Aufzhlungszeichen einfgen: Bei ausgewhlten

Text, ist es in den Aufzhlungszeichen Formate grau.. ich kann es nicht anklicken. Dies man oben in der Leiste machen.

Zeichenfor mate
> Was passiert wenn ich innerhalb eines Absatzformates einzelne Wrter od.
Buchstaben markiere und diese ndern mchte? Dann kommen die Zeichenfor mate ins Spiel,weil ich ja bei den Absatzformaten ein + daneben erhalte

SEite 18

Adobe Muse Grundlagen 2016

> Dann ffne ich das Fenster Zeichnungsformate, gebe dem Zeichnungsformat einen logischen Namen.. sofern dieses Zeichen auch in weiteren Texten verwendet wird. Hier im Beispiel, nicht grn schreiben, sondern Dollar
Zeichen Zahlen.
> Wichtig sind auch diese sogenannten "spantags, fr Google."

SEite 19

Adobe Muse Grundlagen 2016

> Um dieses Bild dann oben zu platzieren, sollte man einen Rahmen aufziehen,
ohne Kontur und ohne Flche, und dann platzieren

>
>
>
>
>
>
>
>
>
>
> Um den Wert exakt zu erreichen fr die Bildplatzierung, geht man am Besten
auf das "Transformieren" oben rechts.
> Vor allem die Verkettung dort wegnehmen

> Mit dem Transformieren Werkzeug kann man den Rahmen korrekt platzieren.
Dazu "Auf Seite Verankern" den Punkt "zentriert" whlen
> Dann gehe im Men auf Flche, da kann ich ein" Bild einfgen" whlen
> Noch wichtig, wenn das Bild eingefgt ist beim "Transformieren" oben
rechts, bei skalieren, "An Browserbreite anpassen" wieder aktualisieren

SEite 20