adobe muse grundlagen kleiner auszug

7/26/2019 Adobe Muse Grundlagen Kleiner Auszug

1/22

G r u n d l a g e n A d o b e M u s e 2 0 1 5

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

2 0 1 6 r e l e a s e r e s p o n s i v e


2/22S E i t e 1

A d o b e M u s e G r u n d l a g e n 2 0 1 6

Allgemeine Informationen

Auf Adobe Website auch schauen RESPONSIVE,dort f inden 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

Grafikformate in Adobe Muse

WELCHE FORMATE GIBT ES?

> JPG

> GIF> PNG

> PSD

P r o s C o n t r a s

> leicht zu erlernen > Muse ist kein Content Ma-nagement System

> Teil des Adobe kosystems > keine Datenbankverbindung

> Interaktiv, Aktionen etc. auch gut > keine Skripte auf dem Server

> Website sind stati sch


3/22

ALLGEMEINE INFORMATIONEN 1

VOR -UND NACHTEILE ADOBE MUSE 1

GRAFIKFORMATE IN ADOBE MUSE 1

TABELLE 2

SEITE ERSTELLEN UND TIPPS ZU DEN WERKZEUGEN 3

OBJEKTE ANWHLEN 3

IM NACHHINEIN DIE SEITE NDERN 4

SEITEN ERSTELLEN UND ANORDNEN 5

EINSTELLUNGEN NDERN/EIGENSCHAFTEN DER HOMEPAGE 5

SEITENEIGENSCHAFTEN ANPASSEN 6

KOPF UND FUSSZEILE BEARBEITEN 6

FUSSZEILEN: 6

MEN FORMATIEREN UND BEARBEITEN 8

RECHTECKWERKZEUG 11

FARBEN 13

TRANSPARENZEN EINSETZEN/GRAFIKEN PLATZIEREN 14

TEXT EINFGEN 14UMGANG 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

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


4/22S E i t e 2


P r o s J P S C o n t r a s J p g s

> Ideal fr Fotos > Schlecht fr Text

> Kleine Dateigrsse > Keine Transparenzen, Farben wer-den nicht durchscheinen

> Qualitt und Dateigrsse einstellbar > Verlustbehaftete Kompression

> Farben werden heraus geschmis-sen,die das Auge nicht sieht.

> Fr Logos ist Jpg nicht geeignet.

P r o s G i f C o n t r a s G i f

> Keine Animationen mglich > Schlecht fr Text

> Sehr kleine Dateigrsse > Nur eine Trransparenz, man kannmax. 256 Farben darstellen

> Gut fr Logos,

P r o s P N G C o n t r a s P N G

> 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

P r o s P S D C o n t r a s P S D

> Innerhalb von Muse kann ich mitPSD arbeiten und Muse rechnet danndies um

> Problem Im Internet Explorer 6

> Ideal im Vorfeld fr Formatierungen

von Bildern und Buttons

> Nicht Internet Browser kompatibel

> Qualitt und Dateigrsse einstellbar

Tabelle


5/22S E i t e 3


Seite erstellen und Tipps zu den Werkzeugen

> Video to Brain f indet 500px in der Breite optimal, im Kurs waren wir bei 1000Pixel Breite

> Footer immer unten anklicken, d.h. Egal wie gross die Seite ist: Das Objektbleibt immer wo es sein soll,unabhngig von der Grsse, z.B Die Schriftbleibt immer unten.

> Rnder: l inke Seite 10 und rechte Seite 10

> Innenabstand einfach mal lassen.

> Auf lsung: eigentl ich Standard lassen HDPI ist eine hoch-aufgelste Form,Muse rechnet dies j edoch 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.


6/22S E i t e 4


Im Nachhinein die Seite ndern

> Doppelkl ick auf die Seite

> Seite ndern: Datei_Site Eigenschaften, dort kann man mehr einstellen. ImMen Layout z.B kann man die Seit e 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 UN-

TERMENS HA-

BEN EINFLUSS

AUF DAS MEN

SELBER. D.H

IM MEN WIRD

DANN AUTO-

MATISCH EIN

UNTERMEN

GENERIERT ZU

DEM JEWEILIGENMEN


7/22S E i t e 5


Seiten erstellen und anordnen

> Homepage ist immer die Startseite d.h. Hat auf dem Browser immer die En -dung index html.

> Fr das Erkennen im Browser i st fr Adobe Muse es sehr wichtig, die ersteSeite.

> Also wenn ich Seiten tausche, an einen anderen Ort, wird dies dann automa-t isch in den Mens angepasst bzw. den Untermens

Einstellungen ndern/Eigenschaften der Homepage

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:


8/22S E i t e 6


Seiteneigenschaften anpassen

> Dazu gehe ich im Men auf Datei/Site-Eigenschaften

> Wenn man aber nur freine andere Seite etwas ndern wil l : auf diese Seiteclicken,mit der rechten Maustaste

DIE METADATEN

> Beschreibung fr Google wichtig, dadurch findet er durch die Metadaten Be-schreibung, dass was der User sucht, bzw. Google zieht di ese Beschreibungfr 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 jedochzweitrangig

Kopf und Fusszeile bearbeiten

FUSSZEILEN:

> Doppelkl ick auf Seite

> Man sieht anhand der Linien, wo die Kopf und Fusszeile l iegen.


9/22S E i t e 7


> Wenn ich an den Pfeilen weiter nach unten ziehe, dann verschiebt sich meineHomepage. Bzw. der Browserhintergrund wird grsser

> Da man die Seiten ja auch auf Phones und Ipads anschaut, ist es gut dieKopfzeile auf Null zu setzen und die Fusszeile auf. bzw. die Standardeinstel-lung macht, sodass der Wert auf 500pixel steht.

> Bei diesen blauen Linien ist der Bereich geschtzt. Ich kann da keine Objekteplatzieren (ist ja Kopf und Fusszeile), aber man kann dies schon ndern: Ichmuss oben rechts einfach ein Hkchen setzen bei "Fusszeile", d.h. Dann kannich einen Textrahmen od. so einfgen, weil dies nun zur Fusszeile gehrt

> Wenn ich den Textrahmen direkt in der Fusszeile mache, kommt das Hkchenautomatisch


10/22S E i t e 8


> Wenn ich die Kopf od. Fusszeile wil l auf einer Seite grsser machen mchte,geht das nicht. Bekomme eine Fehlermeldung. Dies muss man auf der Muster-seite machen

Men formatieren und bearbeiten

> Es macht Sinn die Mens auf den Musterseiten festzulegen, wenn ich dies aufallen 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.


11/22S E i t e 9


WIDGETS MENS

> Oben rechts, wenn man das Widget Men herausgezogen hat, auf den Pfeilkl icken, dann kriegt man Optionen, wo man ein paar nderungen machenkann.

> Wenn ich im Bereich Mentyp: "Alle Seiten" auswhle, dann kommen dieUntermens auch gleich dazu.

> Wenn ich bei den Optionen "gemeinsam bearbeiten" aktivier e, werden n -derungen innerhalb dieses Widgets ganz bernommen z.B ( Schrift, od.Schriftgrsse )


12/22S E i t e 1 0


> Wenn ich im Entwurf eine weitere Seite anlege, dann wird das Men automa-t isch mit dieser Testseite erweitert

MEN ANPASSEN

> Beim formatieren der Mens muss man immer genau schauen was man ausge -

whlt hat

> Menbefehle: knnen:... aktiv, normal, od. rol lover sein

> D.h wie schauen diese Menpunkte aus, wenn ich mit der Maus darber fahre

> Wenn man die Schriftart ndern wil l , dann muss das auch in den Rollover Me-ns ndern.

> Bei Rollover: Ist es schn:Verblassen anzuklicken


13/22S E i t e 1 1


UNTERMENS BEARBEITEN

> Auf die gleiche Art und Weise wie die Hauptmens, die Untermens auch aus-whlen.

> In den Untermens das gleiche Spiel, soweit hinein kl icken bis man an demOrt ist wo man formatieren mchte

Rechteckwerkzeug> Wenn ich ein Rechteck ziehe mit gedrckter Maustaste , dann gibt es mir ver-

schiedene Punkte /Hilfsl inien an

QUADRAT ERSTELLEN

> Gleich wie beim Rechteck aber schauen, dass i ch auf 80x80 komme

> Mit gedrckter Shif t Taste kann ich nun das Quadrat skalieren

> Ziehe ich ein zweites Quadrat welche auf der gleichen Hhe sein soll, wie daserste, muss man in die Nhe des ersten Quadrates kommen, und das zweiteQuadrat richtet sich von der Hhe dem anderen Quadrat an


14/22S E i t e 1 2


MIT WEITEREN QUADRATEN AUSRICHTEN

EIGENSCHAFTEN VON RECHTECKEN

> Eigentl ich das Gleiche wie bei anderen Adobes

> Spezieller ist, dass man beim Rechteckwerkzeug, die Seite einer Kontur zulsen... Bzw. so auch Linien machen kann, wenn man die Konturen lscht, bises nur noch eine Linie ist.

> Will ich eine vert ikale 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 mgl ich, wie Schlagschatten/Abgeflachte Kanten Relief.. .. .


15/22S E i t e 1 3


Farben

> Grundstzl ich 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 Gartenhaag7799FF, dies ist ein Wert von einer Farbe in der Programmiersprache

> Wenn ich von einer anderen Website, diese Farbe so schn fi nde, kann ich mitder Pipette die Farbe aufnehmen.

Aber dann muss ich in meinem Dokument ins Leere (Weiss) klicken, Maus-

taste nicht los lassen, ins Webdokument hineingehen und Maustaste dann

erst loslassen


16/22S E i t e 1 4


Transparenzen einsetzen/Grafiken platzieren

> Grafik platzieren gleich wie bei InDesign

> Vergrssern und Verkleinern ohne Shift Taste

> Wenn ich ein quadratisches Bild mchte In die Transformierung gehen... Ket-te lsen

>

>

>

>

>

>

>

>

>

>

> Mit dem Freistel lungswerkzeug, kann man dann das Bild quadratisch ma -chen.

> Von rechts nach l inks ziehen

> Ich kriege dann ein Donut wie bei InDesign, wo ich den Bil dausschnitt whlenkann

BER EIN BILD TEXT DARBER> Textrahmen ziehen ber das Bild und formatieren

> Bedienfeld Text ffnen

> Eine zweite Flche anlegen, Deckkraft reduzieren, und Schrift anordnen nachvorne

Text einfgen

> Eigentl ich wie bei InDesign, Textrahmen aufziehen und reinschreiben. Andersals bei InDesign: Der Text im Textrahmen wird immer so gross wieder derText ist. Es gibt keinen bersatztext.


17/22S E i t e 1 5


Umgang mit Schriftarten auf Webseiten

> Standardschriften (mit Fallbacks) das sind Schriften, die wirkl ich jeder hat.

> Mchte ich eine andere: mit Typekit Webschriften hinzufgen.

> Type Kit Web Fonts, Schrift anklicken, dann wird sie install iert.

Aufzhlungszeichen machen

> Text Men Leiste od. Fenster/ Aufzhlungszeichen

Absatzformate/Zeichenformate/Grafikstile

> Eigentl ich gleich wie bei Adobe InDesign

> Achtungfr Google ist es wichtig, Werte beim Namen H4, H2 berschrift zudefinieren, damit Google weiss was wichtig ist,


18/22S E i t e 1 6


Aufzhlungszeichen

> In Adobe Muse gibt es ein eigenes Men fr Aufzhlungszeichen: und zwarFenster/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 neuesZechen zu erstellen. Dazu gehe ich in die Punkte und gehe auf neues "Zei -chen"

> Neues Fenster ffnet sich, und da kann ich dann ein neues Aufzhlungszei-chen auswhlen


19/22S E i t e 1 7


Absatzformate

> Ist so ziemli ch hnlich wie bei InDesign

> Was bei Adobe Muse wichtig ist sind die Absatztag, dort kann man diffe -renzieren um was es sich handelt, sodass Google herauszieht, was wichtigist.

> Absatzformate speichern keine Aufzhlungszeichen

> ndere ich die Farbe z.B.eines Absatzformates kriege ich wie bei InDesignein + neben dem Absatzformat. Wenn ich dies aber nicht ndern mchtehat es unten einen durchgestrichenes + d.h. Entferne die nderung.

> Aber neuer Absatznderung hinzufgen ist wie bei InDesign


20/22S E i t e 1 8


Aufzhlungszeichen Formate

> Die Absatzformate speichern nicht die Einstellungen von Aufzhlungen od.Nummerierungen

> In Adobe Muse gibt es eigene Aufzhlungszeichen Formate unter Fenster Auf-zhlungszeichenformate

> Wenn ich den Text dann markiere, kann ich die Aufzhlungszeichenformategehen, dieses auswhlen, und dann werden die dem Absatz zugewiesen

>

> Will ich im nachhinein die Aufzhlungszeichen einfgen: Bei ausgewhltenText, ist es in den Aufzhlungszeichen Formate grau.. i ch kann es nicht ankli-cken. Dies man oben in der Leiste machen.

Zeichenformate

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


21/22S E i t e 1 9


> Dann ffne ich das Fenster Zeichnungsformate, gebe dem Zeichnungsfor-mat einen logischen Namen.. sofern dieses Zeichen auch in weiteren Tex-ten verwendet wird. Hier im Beispiel, nicht grn schreiben, sondern DollarZeichen Zahlen.

> Wichtig sind auch diese sogenannten "spantags, fr Google."


22/22


> Um dieses Bild dann oben zu plat zieren, sollte man einen Rahmen aufziehen,ohne Kontur und ohne Flche, und dann platzier en

>

>

>

>

>

>

>

>

>

>

> Um den Wert exakt zu erreichen f r die Bildplatzierung, geht man am Bestenauf 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" obenrechts, bei skalieren, "An Browserbreite anpassen" wieder aktualisieren

adobe muse grundlagen kleiner auszug

Documents