CSS-Grundlagen-Tutorial für Designer

In diesem Workshop führen wir Sie durch die Grundlagen von CSS. Also PAGE eDossier downloaden, durchlesen, Onepager bauen – los geht’s.



Cascading Stylesheets, Cascading Style Sheets, Onepager, Screendesign, Grafikdesigner, modernes Webdesign, Kommunikationsdesign, Website erstellen, Grafikdesign, One-Pager

In der Erfolgsspur von HTML haben sich Cascading Stylesheets (CSS) zu einer der wichtigsten Designtechniken gemausert. Wer fürs Web gestaltet, kommt an Stylesheets ohnehin nicht vorbei und verfügt bereits über ein solides Verständnis für deren Grundlagen. Meist findet er oder sie auch Spaß daran, im CSS-Code herumzurühren, und kann längst sicher einschätzen, welche Ergebnisse er wie erzielt.

Doch auch wer vorzugsweise in InDesign, Photoshop und Illustrator unterwegs ist und sich für Screendesign oder andere Digital-Design-Sparten nicht so brennend interessiert, kommt irgendwann mit CSS-Code in Berührung – einfach nur, weil man Kollegen in der Designagentur beim Website erstellen über die Schulter schaut oder weil das Website erstellen für ein eigenes Online-Portfolio relevant wird.

Auch für einen eigenen WordPress-Blog oder eine eigene WordPress-Website kommt man nicht um CSS herum. Dann heißt es ausgewählte Themes oder Templates an die eigenen Bedürfnisse anpassen – und schon findet man sich im CSS-Code der jeweiligen Vorlage wieder, sucht nach den relevanten CSS-Anweisungen im Scripting und verändert mehr oder minder nach Trial-and-Error-Manier das Aussehen der Site. Manchmal erweist sich dieses Vorgehen dann als visuelle Reise ohne Wiederkehr … schlicht weil man sich im Code nicht wirklich zurechtfindet. Blöd – das muss doch auch anders gehen.

Button, call to action, onlineshop, PAGE

Das Verständnis für Cascading Stylesheets erwirbt man am besten, indem man die schwergewichtigen Tools und Frameworks erst mal außen vor lässt und von der Pike auf einen einfachen Onepager designt.

Herbert Braun, Journalist und Web Developer in Berlin, hat für Sie einen simplen Onepager vorbereitet, den Sie über das PAGE eDossier als Demoprojekt herunterladen können. Diesen können Sie dann – gemeinsam mit dem heruntergeladenen CSS-Tutorial – als Spielwiese nutzen, um sich in grundlegende CSS-Operationen einzuarbeiten. Dabei werden Sie lernen, wie man eine schlichte One-Pager-Website gestaltet.

Wir wünschen viel Spaß bei Ihrem ersten Date mit CSS! Das erwartet Sie: Notepad++, TextWrangler oder einen anderen Texteditor herunterladen, Stylesheet anlegen, Texte gestalten, Stile vererben, Farbe auftragen, Textblöcke ausrichten, Rahmen ziehen, Teaser setzen, Bilder skalieren, Elemente positionieren, Schatten werfen, Web-Fonts nutzen.

Hier geht’s zum Download.

Button, call to action, onlineshop, PAGE




Kommentieren

Einfach mit dem PAGE Account anmelden oder Formular ausfüllen

Name *

Email *

*Pflichtfeld

Ihr Kommentar *

 
 

Das könnte Sie auch interessieren