Muse CC 2018 Grundkurs

Neue Website erstellen

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Zu Beginn jedes neuen Projekts erstellen Sie eine Website. Dabei können Sie zahlreiche Einstellungen vornehmen – doch was bewirken diese im Einzelnen? Dieses Video gibt Aufschluss darüber.

Transkript

Egal, ob Sie ein großes Projekt oder ein kleines Projekt planen, irgendwann müssen Sie mal eine neue Website erstellen und ich habe jetzt hier mein Adobe Muse geöffnet und ich werde jetzt hier, von diesem Willkommensbildschirm begrüßt. Wenn man jetzt möchte, kann man hier auf „Neu erstellen“ klicken oder auch hier auf „Neu erstellen“ oder selbstverständlich auch über das Menü „Datei“, „Neue Site“. Ich persönlich bin nicht der allergrößte Fan von diesen Willkommensbildschirmen. Deswegen, wenn man will, kann man diese auch ausblenden und zwar muss man dazu in die Voreinstellungen gehen. Hier auf dem Macintosh-Rechner wechsle ich dazu, zu Adobe Muse und gehe dann in die „Voreinstellungen“. Wenn Sie an einem Windows-PC arbeiten, dann finden Sie die Voreinstellungen im Menü „Bearbeiten“. Und wenn man jetzt dort draufklickt, dann kann man hier sagen „Bildschirm „Start“ anzeigen“ und wenn man das Ganze nun hier bestätigt, man das Häkchen also wegnimmt und das Ganze nun bestätigt, dann bekommt man nicht mehr diesen Bildschirm, dann muss man hier oben in das Menü „Datei“, „Neue Site“ gehen. Und nun öffnet sich hier dieses Dialogfeld. Sollte es bei Ihnen kleiner sein, dann klicken Sie einfach hier auf „Erweiterte Einstellungen“. Und man kann hier, in der Tat eine ganze Reihe von Dingen einstellen, die auch ein wenig erklärungsbedürftig sind. Fangen wir zuerst einmal hier oben an, hier gibt es den Punkt „Variable Breite“ und „Feste Breite“. Wenn man hier „Variable Breite“ auswählt, dann ist man später in der Lage, eine Webseite so zu erstellen, dass sie sich an die Bildschirmgröße des anzeigenden Gerätes anpasst. Wenn Sie Einsteiger sind, dann würde ich Ihnen im Moment erst einmal „Feste Breite“ empfehlen und man hat hier dann auch ein bisschen weniger Einstellmöglichkeiten, aber ich lasse das jetzt hier einfach mal auf „Variable Breite“ stehen, um Ihnen hier eben noch ein bisschen mehr zeigen zu können. Hier oben, dort haben wir die „Maximale Seitenbreite“ und die steht nun auf 960. Sie wundern sich vielleicht ohnehin, dass wir hier überall Zahlen haben, aber wir dort keine Einheiten haben. Naja, hier spart man sich die Einheiten, weil im Web schlicht und ergreifend die Einheit immer Pixel ist. Und damit mir hier nicht immer px, px, px dahinter dran schreiben muss, hat man das Ganze einfach weggelassen. Hier sehen Sie, die maximale Seitenbreite. Im Übrigen, wenn ich hier auf „Feste Breite“ umstelle, dann verschwindet hier einfach das Wort „Maximal“. Und, stellen wir das Ganze wieder auf „Variable Seitenbreite“ um und jetzt hat man hier die Seitenbreite von 960 Pixel. Diese Breite ist im Alltag durchaus recht sinnvoll. Warum ist die sinnvoll oder wer hat sich diese Zahl ausgedacht? Naja, die Zahl hat sich in der Tat nicht die Firma Adobe ausgedacht, sondern die hat sich für die meisten Webseiten sollen Alltag eingebürgert. Man geht davon aus, dass ein moderner Bildschirm und damit meine ich jetzt nicht ein Smartphone, sondern ein normaler Bildschirm, wenn Sie an Ihrem PC oder an ihrem Laptop sitzen, wenigstens eine Bildschirmbreite von 1024 Pixel hat. Bei 1024 Pixel haben wir jetzt 64 Pixel mehr als diese 960 Pixel. Warum haben wir da 64 Pixel mehr? Naja, wenn man sich so eine Webseite vorstellt, dann braucht man natürlich ein anzeigendes Programm, also einen Webbrowser. Und auch der Webbrowser braucht auf der linken Seite ein bisschen Platz, auf der rechten Seite ein bisschen Platz. Auf der rechten Seite hat man möglicherweise auch einen Scrollbalken und da sagt man, um auf Nummer sicher zu gehen, gibt man diesem Browser eben links und rechts in Gänze 64 Pixel. Bleibt also für die Webseite noch 960 Pixel übrig und wie bereits erwähnt, das ist im Alltag auch eine recht sinnvolle Größe. Hier hat man nun die minimale Breite. Die minimale Breite ist also das kleinste Gerät für, dass diese Webseite hier geeignet ist. Und in der Tat, Smartphones haben eigentlich in der Regel immer wenigstens eine Bildschirmbreite von 320 Pixel. Hier haben wir nun die minimale Höhe. Was hat es jetzt mit der minimalen Höhe auf sich? Naja, Die minimale Höhe legt fest, wie groß Ihre Webseite wenigstens ist. Die wird automatisch größer, wenn wir weitere Objekte auf diese Webseite drauflegen. Jetzt könnte man ja auf die Idee kommen: „Naja, dann trage ich doch hier einfach 200 oder 300 Pixel ein. Wenn es ja eh nur der minimale Wert ist und die Webseite automatisch größer wird.“ Naja, wenn wir aber jetzt eine Webseite haben, auf der wirklich sehr, sehr wenig draufsteht, dann hätten wir hier unten, im unteren Bereich der Webseite, naja, eben sehr, sehr schnell den Hintergrund der Webseite. Grundsätzlich muss man sich so eine Webseite, nämlich wie so ein Objekt vorstellen, welches auf dem Web oder im Webbrowser schwebt. Man spricht auch davon, das sind schwimmende Seiten. Und hier sieht man es jetzt bei diesem Fenster eigentlich ganz gut, dieses Fenster hat jetzt eine gewisse Höhe und wenn wir jetzt eine Webseite mit einer niedrigen minimalen Höhe hätten, dann würde die Seite hier unten schon enden und wir hätten hier unten Leerraum. Das Sieht schlicht und ergreifend bei einer Webseite nicht schön aus, wenn wir hier unten Leerraum haben. Man könnte jetzt natürlich auch auf die Idee kommen, hier einfach 1500 oder 2500 einzutragen. Das wäre im Alltag allerdings auch unpraktisch, weil dann müssten wir auch auf Webseiten scrollen, auf denen es gar nicht notwendig ist. Der Benutzer würde auf der rechten Seite einen Scrollbalken sehen, aufgrund des Scrollbalken würde er auf die Idee kommen: „Ach, da scroll ich mal nach unten!“ Aber da ist dann gar nichts. Deswegen machen wir es kurz, im Alltag ist diese minimale Höhe von 500 Pixel in der Tat sehr, sehr sinnvoll. Jetzt haben wir hier noch die Ränder. Die Ränder, das ist in erster Linie so eine optische Hilfslinie. Wenn ich jetzt im Alltag beispielsweise in Word einen Brief schreibe, dann werde ich dort auch Ränder setzen, um später beispielsweise Platz für eine Lochung zu haben, auf der linken Seite, sagen wir mal 3 cm. Trotzdem bin ich natürlich in der Lage, in diesem Bereich etwas hinein zu positionieren. Beispielsweise ein Logo oder ein farbiges Objekt. Und so muss man sich das Ganze hier auch vorstellen. Wir haben hier die Möglichkeit Ränder zu setzen, aber wir sind eben später trotzdem in der Lage dort Objekte abzulegen, Grafiken oder farbige Flächen zu positionieren. Standardmäßig sind diese drei Werte hier alle auf 20 Pixel gesetzt. Wenn wir oben unten links rechts nicht die gleichen Werte haben wollen, dann können wir hier einfach diese Kette sprengen und dann sind wir in der Lage, diese einzelnen Werte hier zu ändern. Ich gebe nun einmal hier, bei links 10 ein, um wirklich 10 Pixel zu haben. Wenn man nun in das nächste Feld hineinwill, dann muss man hier aufpassen, dass man hier nicht die „Enter“-Taste drückt, weil die „Enter“-Taste zu drücken wäre das gleiche, als würden sich hier auf „OK“ klicken. Deswegen, entweder in das nächste Feld hineinklicken, mit der Maus oder wenn Sie von Feld zu Feld springen wollen, dann machen Sie das bitte mit dem Tabulator. Hier unten haben wir jetzt noch den „Innenabstand“, das ist, wenn man so will, der Abstand, den dieser Innenabstand, das ist jetzt der Abstand hier, dieser schwimmenden Seite nach oben, nach unten, nach links und gegebenenfalls auch nach rechts. Wenn ich nämlich hier draufklicke, dann sehen Sie, im Moment ist das auf „Mitte“ gesetzt. Möglicherweise werden Sie sagen: „Naja, wenn hier mittig ist, warum gibt es dann überhaupt links?“ Naja, das sorgt dann dafür, dass wir ein Offset bekommen. Naja, der Regel will man keinen Offset, sondern man will es meistens hier mittig haben. Des Weiteren, wenn man das Ganze jetzt hier auf „Linksbündig“ setzt, dann kann man in der Tat einen Abstand zur Linken und zur rechten Seite setzen. Ich persönlich bevorzuge die Variante „Mittig“. Hier haben wir habe den Punkt „Auflösung“, dort kann man nun umschalten zwischen „Standard“ und „HiDPI“ Was versteht man nun unter HiDPI? Naja, vielleicht sitzen Sie ja an einem aktuellen MacBook oder an einem aktuellen iMac, dann haben diese hochaufgelösten Bildschirme. In der Apple Welt spricht man hierbei von Retina-Bildschirmen. Und diese haben die doppelte Auflösung und deswegen hier auch das (x2) von einem normalen Bildschirm. Wenn Sie in der Windows-Welt unterwegs sind, dann haben Sie dort vielleicht schon mal was von 4K Bildschirmen gehört oder auch 5K Bildschirmen und das ist letztendlich das gleiche Prinzip. Man kann das hier relativ problemlos auf „HiDPI“ zweifach umstellen, aber beachten Sie, jetzt müssen Sie auch Bilder in einer höheren Auflösung haben. Wenn Sie nur Bilder in Standardauflösung haben, dann nützt Ihnen das Ganze nichts. Des Weiteren wird dann später auf dem Webserver, jedes Bild zweimal landen. Einmal in der normalen Auflösung und einmal in der HiDPI-Auflösung. Wenn ein Benutzer dann beispielsweise mit einem Retina, mit einem 4K Bildschirm die Webseite aufruft, wird er die höher aufgelösten Bilder erhalten, wenn er hingegen mit einem normalen Bildschirm, einem nicht ganz so hochauflösenden Bildschirm die Webseite besucht, dann wird er, naja, eben die Standardauflösung von diesen Bildern bekommen. Da müssen Sie sich nicht drum kümmern, das machen moderne Webbrowser, wenn man so will, von alleine. Hier hat mal nun die Sprache, die man einstellen kann. Die Sprache ist für zwei Dinge wichtig. Zum einen für die Rechtschreibkontrolle, die im Hintergrund läuft, dann werden Ihnen möglicherweise falsch geschriebene Wörter unterkringelt, aber Sie ist eben auch für die Widgets wichtig. Im Moment haben wir uns mit den Widgets noch nicht beschäftigt. Widgets sind kleine Helferlein und diese kleinen Helferlein können zum Beispiel ein Datum an der einen oder anderen Stelle benötigen oder eben präsentieren und aufgrund der hier eingestellten Sprache, wird dann auch das Datumsformat festgelegt. Hier unten haben wir nur noch das Häkchen „Footer“. Da wird festgelegt ob das Fußzeilenelement immer unten sein soll und in der Regel will man das auch immer unten haben. Eine Sache habe ich jetzt übersprungen, nämlich die Spalten. Bei den Spalten, dort handelt es sich ebenfalls, nur um eine optische Hilfsmöglichkeit, so ähnlich wie ich hier auch bei den Rändern. Und bei den Spalten ist es bei Webseiten sehr, sehr häufig üblich, dass man dort mit 12, 16 oder 24 Spalten arbeitet. Diese Spalten dürfen Sie sich allerdings nicht so vorstellen, wie die Spalten in ihrer Tageszeitung, sondern diese Spalten dienen, in der Regel wirklich nur dem optischen Ausrichten. Wenn wir beispielsweise mit 12 Spalten arbeiten und das möchte ich hier für dieses Projekt einmal machen, dann habe ich 12 Spalten und später sage ich dann vielleicht: OK, der Text kommt links und der Text geht über vier Spalten und rechts davon kommt dann eine Grafik und diese Grafik geht dann über acht Spalten. Und aufgrund dieses Spaltenlayouts sorgt man dann dafür, dass die Objekte schön auf den Seiten angeordnet sind. Und durch diese Spaltenarbeitsweise bekommt dann das Auge so optische Führungslinien. Die Linien sieht man natürlich nicht, aber das Auge wird dann gelenkt und man sorgt dann wirklich dafür, dass die Objekte wirklich alle schön auf ihrer Position stehen. Nun habe ich hier alles eingestellt was ich jetzt hier für mein Projekt benötige. Also ich klicke einfach auf „OK“.

Muse CC 2018 Grundkurs

Lernen Sie mithilfe von Muse CC 2018 Websites zu gestalten ohne Programmier-Vorkenntnisse haben zu müssen.

7 Std. 0 min (66 Videos)
Derzeit sind keine Feedbacks vorhanden...
Hersteller:
Software:
Exklusiv für Abo-Kunden
Erscheinungsdatum:16.03.2018

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!