Website Workshop Teil 3

Das Ausschneiden von Grafiken

Wie schon im zweiten Teil erwähnt, ist es vorteilhaft Texte in xhtml auch als reine Texte umzusetzen. Texte müsst ihr nur dann als Grafik einbinden, wenn ihr spezielle Fonts einsetzt. Hier habe ich für die Menütexte, Überschriften im Header nur Times New Roman und Verdana eingesetzt. Verdana wurde speziell für das Web entwickelt und ist schön lesbar. Man sollte aber auch nur Fonts einsetzen, die auf fast jedem Rechner vorhanden sind. Times New Roman ist eine Serifen-Schrift, Verdana eine serifenlose.

Somit brauchen wir nur die Grafiken. In unserem Beispiel schneiden wir im oberen Balken das Logo aus. Übergänge wie hier der leichte graue verwischte Schatten muss man mit übernehmen, sonst bilden sich später unschöne scharfe Übergänge. Fehlt uns noch die Hauptgrafik auf der Startseite und unten im Footer (Fußbereich) die Web-Icons für facebook, twitter und flickr. Der Sinn liegt darin mit diesen Icons später auf Eure Social-Accounts zu verlinken. Solltet ihr nicht dort angemeldet sein, macht auch nichts, lasst diese dann einfach weg. Alternativ kann man da auch auf einen RSS-Feed oder einen Bookmark Dienst verlinken. Manche setzen dort auch einen Grafiklink auf die Seiten von Freunden und Partnern.

Nun hier die Grafiken die wir brauchen ...

logo.jpg
entdecke.jpg
facebook.jpg
twitter.jpg
flickr.jpg
bg.jpg

Das restliche Aussehen der Seite gestalten wir später ausschließlich per CSS (Cascading Style Sheets). Dies spart Resourcen und verhilft der Seite zum schnellerem Aufruf im Browser. Ein wichtiges Thema. In Zeiten von DSL-/ und Breitbandverbindungen sind doch noch einige User mit analogen Modemverbindungen unterwegs. Sie werden es Euch danken. Um Grafiken schneller laden zu können, benutzen wir das JPEG-Format und komprimieren diese auf eine Qualität von ca. 85 - 90%.  

Natürlich könnte man die Grafiken auch in das noch sparsamere GIF-Format umwandeln. Aber bei Rundungen mit volltransparenten Hintergrund bilden sich immer unschöne Verpixelungen, Treppenstufeneffekt. GIF's sehen daher oft unsauber aus. PNG wäre auch eine Option. Jedoch kennt der alte Internet Explorer 6 keine Transparenz. Es soll immer noch User geben die mit dem IE 6 unterwegs sind. Dort taucht dann bei PNG's ein hellgrauer Hintergrund auf. Wann immer möglich daher versuchen JPG einzusetzen.

Plannung von Containern für das HTML Grundgerüst

Beschäftigen wir uns nun mit der Plannung des Grundgerüstes. Hierbei gilt es die Hauptcontainer DIV's und deren Aufteilung festzulegen. Früher ist man hergegangen und hat die Umsetzung einer Website mit Tabellen vorgenommen. Viele tun sich noch heute mit div Container schwer. Die Vorteile liegen jedoch in der Flexibilität, da mit den Cascading Stylesheets die Form und die Anordnung der Container individuell gesteuert werden kann.

[Website Workshop] Container AnordnungIm Prinzip teile ich die Seite in Boxen ein. In diesen Boxen oder Containern können dabei wieder andere Container liegen. In unserem Entwurf habe ich diese Container farblich eingezeichnet und mit einem sog. ID-Namen versehen. Diese ID's benutzen wir später im CSS Part um wie erwähnt das Aussehen zu bestimmen.

Die rot markierten Container dienen zum Festlegen der drei Haupbereiche, dem oberen schwarzen Balken, dem mittleren weißen Hauptteil und dem unteren schwarzen Balken. Die blauen Container sind Hilfscontainer (innerhalb der roten) um die zentrierte Darstellung zu ermöglichen. Die beiden grünen dienen zur Aufnahme der Inhalte und um ein zweispaltiges Layout zuverwirklichen.

Im vierten Teil bauen wir uns nun ein erstes Grundgerüst auf.

 

Diese Website benutzt Cookies. Wenn du die Website weiter nutzt, gehen wir von deinem Einverständnis aus. Mehr Information findest du in unserer Datenschutzerklärung.
OK