W3CSS das CSS Framework von W3Schools

Ähnlich aber nicht zusammengehörend W3C und W3Schools

Das W3C Konsortium (W3 steht für WWW) ist die Hauptorganisation, die sich um Standardisierung im Internet kümmert. Es wurde schon 1994 von Tim Berners-Lee, der als Begründer des Internets gilt, ins Leben berufen. Über das Internetprotokoll werden Dateien versendet, in erster Linie Bilder, html-Dateien und css-Dateien (Javascript und Javascript Frameworks schließe ich hier zur einfacheren Betrachtung erst einmal aus), aus denen der Browser eine Webseite aufbaut. Bei den html- und css-Dateien handelt es sich um Textdateien. CSS Steht für Cascading Style Sheet und stellt Vorschriften über das Aussehen von html Elemente zur Verfügung.

Im eigentlichen html-Element wird innerhalb sogenannter Tags die Struktur des Dokumentes festgelegt, woraus der Browser durch komplizierte Vorschriften das Bild einer Webseite entwirft.

W3Schools wurde schon 1998 gegründet und bietet zahlreiche Kurse zum Thema Webentwicklung an. Die Seite gilt als eine der besten Seiten zum Thema Webentwicklung und wird gerne als Nachschlagewerk genutzt. W3Schools hat trotz Namens- und Logoähnlichkeit keine direkte Verbindung von W3C, das Standards für die Webentwicklung zur Verfügung stellt.

W3Schools hat das CSS Framework W3CSS entwickelt, dass es kostenlos als Alternative zu dem von Twitter entwickelten CSS-Framework Bootstrap zur Verfügung stellt.

Mit W3CSS lassen sich relativ einfach und intuitiv über Klassen Styling Eigenschaften eines html-Dokumentes realisieren.

Ein kurzer Abriss, wie HTML und CSS funktioniert

Ein Anschauungsbeispiel, wie man Seiten gestaltet

Die Erstellung eines Layouts für eine Webseite ist eine recht aufwendige Angelegenheit, der Experte verzeihe mir, wenn ich zur einfachen Darstellung hier im Folgenden stark vereinfache. Wie W3CSS oder auch Bootstrap funktioniert, möchte ich kurz anhand der Farbklassen für Notizen erklären.

Im unten stehend Beispiel sehen sie auf der einen Seite den extrahierten html Code bei dem innerhalb eines sogenannten div-Containers mehrere Absätze (Paragraph) in p-Tags gesetzt sind. Ein Tag ist ein html-Zeichen, das in < > Klammern gesetzt ist. Hier also ein Paragraph, der mit <p> öffnet und mit </p> endet. Innerhalb des html-Tags können unter anderem Klassen gesetzt werden, <p class="meineKlasse" >Das ist der Text</p>.

Jedes Element hat eine Größe und damit verbunden ist ein Innenabstand des eigenen Elements zu dessen Rand und ein Außenabstand vom Rand zum nächsten Element. Mit der Klasse w3-padding (bei w3css beginnen alle Klassen mit w3-) wird der Innenabstand gesetzt. Die Klasse w3-panel setzt allgemeine Eigenschaften der Panel Klasse wie Größe, Rahmen etc. Die Farbklassen w3-pale-red, w3-blue, w3-teal und w3-pale-yellow setzen die Hintergrundfarbe und Schriftfarbe für das Element.

Der html-code zur Erzeugung der farbigen Nachrichten rechts

	 
     <div class="w3-container">
       <p class=" w3-panel w3-pale-red w3-padding">
         Das ist eine Nachricht in rosa
       </p>
       <p class=" w3-panel w3-blue w3-padding">
         Das ist eine Nachricht in blau
       </p>
       <p class=" w3-panel w3-teal w3-padding">
         Das ist eine Nachricht in teal
       </p>
       <p class=" w3-panel w3-pale-yellow w3-padding">
         Das ist eine Nachricht in zartgelb
       </p>
     </div>

Das Erscheinungsbild der w3css Farbklassen

Das ist eine Nachricht in rosa

Das ist eine Nachricht in blau

Das ist eine Nachricht in teal

Das ist eine Nachricht in zartgelb

Eine Vielzahl von Klassen sorgen für ansprechendes Design

Template Erstellung from the Scratch

Die Webseite bewerbungstools.de aufbauend auf w3css

Ein Clothing Shop w3css Template — W3CSS basierte Templates, die als Vorlage für ganze Webseiten dienen können

Eine unzählige Anzahl vordefinierter Klassen sorgen nun dafür, dass ein erfahrener Entwickler ganze Webseiten aus dem Stehgreif gestalten kann, wenn er eine ungefähre Vorstellung vom beabsichtigten Design und Aufbau einer Webseite hat.

Es können verschiedenste Effekte umgesetzt werden, wie Überlappungseffekte, Layout Effekte und vieles mehr.

Doch damit beginnt erst die Aufgabe der Entwicklung einer modernen Webseite. In der Regel wird der Inhalt einer Seite dynamisch erstellt. Der Besucher einer Webseite interagiert mit dieser, wobei entsprechende Benutzereingaben von der Seite verarbeitet werden. Inhalte werden nach bestimmten Mustern erzeugt und auf der Webseite ausgegeben. An dieser Stelle kommen Programmiersprechen wie php und JavaScript und deren Frameworks ins Spiel.

Dem Trend auf der Spur

Hin zu mehr Einfachheit

Das Google Logo im alten Design

Das Google Logo im Flat Design

In den letzten Jahren haben die Möglichkeiten zur Gestaltung einer komplexen Webseite zugenommen. Der Trend ist jedoch im Unterschied dazu, ein Trend zu mehr Schlichtheit. Da wir in einem Informationszeitalter leben sieht es so aus, dass der Wunsch und Trend in Richtung schnell zu erfassender Information geht, was von einfacheren Elementen unterstützt wird.

Populär ist das sogenannte flat Design, dass mit Windows 8 eingeführt wurde und sich zum Flat Design 2.0 erweitert hat. Beim Flat Design 2.0 werden Seitenelemente durch Schattierungseffekte über den reinen 2D Effekt mit leichten 3D-Effekten versehen.

Anhand des Googe Logos kann man leicht erkennen, wie sich das minimalistischere Flat Design auswirkt.

W3CSS Elemente unterstützen diesen Trend

Klarheit statt Masse

W3CSS Templates unterstützen diesen Trend zu mehr Schlichtheit, wobei in der Regel die Webseiten ein hohes Maß an Ästhetik zeigen. Die nachfolgende Abbildung zeigt beispielhaft, wie so ein schlichtes Design gestaltet sein kann.

Unsere Kunden

Home Link 1 Link 2

Wir fügen echten Inhalt
für unsere Kunden hinzu

Wir wissen, wie wir unsere Kunden zufrieden stellen

Anpassung an CMS-Systemen

Nach Vorlagen von W3CSS Webseiten gestalten

Ich habe mir es zur Aufgabe gemacht, ausgewählte Designs wie die von W3CSS oder auch html5Up für CMS-Systeme nutzbar zu machen. für diese Webseite wurde beispielsweise das Template Editorial von html5Up für Typo3 umgesetzt.

Im Projekt bewerbungstools.de habe ich das Template Clothing Store für eine Internetseite mit komplexer Aufgabenstellung als Basistemplate genutzt.

Sollten Sie Interesse haben, setzen Sie sich mit mir in Verbindung.

Aktuelle Beiträge aus der Kategorie

Web Entwicklung

Hier finden Sie php-basierte Webentwicklung mit Typo3 oder Wordpress auf der Basis von html und CSS Templates von html5up und w3css. Dazu stelle ich Ihnen eigene auf MVC basierte php Webprojekte vor.

Intelligent gestaltete Webseiten geben Ihren Webprojekten den individuellen Touch. Damit der Inhalt aus der Masse herausstechen kann.

bewerbungstools.de - W3CSS mit Wordpress

Ein Beispielprojekt für eine komplexe Aufgabenstellung bei der Wordpressund w3css als Framework für eine Seite für Bewerber genutzt wurde.

World of Solary

Das Photfolio Template von w3css wurde für Typo3 nutzbar gemacht. Das leichte Photogallery Template von W3Schools zeigt seinen Nutzen in der Welt von Solary. Ein junger Künstler nutzt dieses Template, um auf seine Werke aufmerksam zu machen.

Was ist W3CSS