Vor einigen Tagen habe ich euch meine Designwand gezeigt, die ich für meinen 365 Tage Quilt erstellt habe und auf der ich den Fortschritt meines Quilts festhalte. Heute möchte ich euch zeigen, wie man eine solche virtuelle Designwand erstellt. Dazu führt leider kein Weg an HTML vorbei aber allzu kompliziert ist es eigentlich nicht. Diese Anleitung beschreibt die Erstellung einer Designwand bei Blogger, das Vorgehen kann aber analog auch für andere Blog-Dienste übernommen werden. Ich versuche es
sehr ausführlich zu beschreiben, darum ist es etwas länger geworden.

 

 

Schritt 1: Neue Seite für die Designwand erstellen

Zuallererst legt ihr euch eine neue Seite an. Ihr könnt das Ganze natürlich auch als Post erstellen, ich finde aber eine Seite passender. Ihr könnte diese auch einfacher in eurem Menu verlinken und sie geht nicht zwischen den anderen Blogposts unter.

 

 

Im Seiteneditor gebt ihr zuerst eine Überschrift für eure Seite an (z.B. Der 365 Tage Quilt – Designwand) und wechselt dann zur HTML-Ansicht.

Schritt 2: HTML-Tabelle erstellen

 

In den Editor der HTML-Ansicht kopiert ihr den unten stehenden HTML-Code für die Tabelle und speichert (speichern, nicht veröffentlichen!) eure Seite.

Der hier gezeigte Beispielcode bezieht sich auf meine Quiltgröße und -aufteilung von 15 x 24 Quadraten, genäht in 9er-Blöcken. Ggf. müsst ihr also das Layout der Tabelle an eure Bedürfnisse anpassen. Dazu erkläre ich auch kurz, wofür die verschiedenen HTML-Angaben stehen.

 

 

<table border=”0″ cellpadding=”0″ cellspacing=”0″ class=”designwand”>
    <tbody>
        <tr>            
            <td>A1</td>
            <td>A2</td>
            <td>A3</td>
            <td>A4</td>
            <td>A5</td>
        </tr>
        <tr>
            <td>B1</td>
            <td>B2</td>
            <td>B3</td>
            <td>B4</td>
            <td>B5</td>
        </tr>
        <tr>            
            <td>C1</td>
            <td>C2</td>
            <td>C3</td>
            <td>C4</td>
            <td>C5</td>
        </tr>
        <tr>            
            <td>D1</td>
            <td>D2</td>
            <td>D3</td>
            <td>D4</td>
            <td>D5</td>
        </tr>
        <tr>            
            <td>E1</td>
            <td>E2</td>
            <td>E3</td>
            <td>E4</td>
            <td>E5</td>
        </tr>
        <tr>            
            <td>F1</td>
            <td>F2</td>
            <td>F3</td>
            <td>F4</td>
            <td>F5</td>
        </tr>
        <tr>            
            <td>G1</td>
            <td>G2</td>
            <td>G3</td>
            <td>G4</td>
            <td>G5</td>
        </tr>
        <tr>            
            <td>H1</td>
            <td>H2</td>
            <td>H3</td>
            <td>H4</td>
            <td>H5</td>
        </tr>
    </tbody>
</table>

 

Kurze Erklärung zu der HTML-Tabelle

<table> –> Tabellenbeginn
    <tbody>
         <tr> –> Beginn einer Zeile (Zeile 1)
             <td> –> Beginn einer Zelle (Spalte 1)
                    Inhalt kommt ausschließlich in die Zelle , also z. B. genau hier hin
             </td> –> Ende der Zelle (Spalte 1)
             <td> –> Beginn einer Zelle (Spalte 2)
             </td> –> Ende der Zelle (Spalte 2)
             … hier können analog weitere Spalten folgen
         </tr>  –> Ende einer Zeile (Zeile1)
         … hier können analog weitere Zeilen folgen
    </tbody>
</table> –> Tabellenende

Damit habt ihr nun das Tabellengerüst gebaut. Bevor ihr die Gestaltung, d.h. Größe, Abstände, etc. der Tabelle und ihrer Inhalte definiert, müssen diese Werte erst einmal ermittelt werden.

Schritt 3: Größe der Designwand und der Bilder ermitteln

Meine Designwand hat eine Breite von 640 Pixeln. Das entspricht genau der Breite meines Blog-Inhaltsbereiches, also dem
bei mir mittleren Bereich, in dem die Postings stehen. Da ich meine Bilder in den Postings immer auf die Gesamtbreite anzeige, haben auch diese immer eine Breite von 640 px.

Ihr könnt gerne einmal versuchen diese Breite für eure Designwand zu übernehmen und über die Vorschaufunktion testen, ob’s in euer Layout passt, oder ihr passt die Größen eben individuell euren Wünschen und eurem Bloglayout an. Testet dies am besten mit der leeren Tabelle, bevor ihr später eure Bilder für eine Breite optimiert habt und dann feststellt, dass es nicht passt.

Wenn eure Designwand also nun eine Gesamtbreite von 640 px haben soll und euer Quiltlayout aus 5 Spalten besteht, dann benötigen eure einzelnen Bilder (bei mir Bilder der 9er-Blöcke) eine Breite von 128 px (640 / 5 = 128). Achtet darauf, das ihr evtl. eine Dezimalzahl auf eine ganze Zahl auf- oder abrunden müsst.

Schritt 4: Benutzerdefinierte Gestaltung zur Blogvorlage hinzufügen

Nun ist es an der Zeit, Blogger die definierten Größen bekanntzugeben, damit diese auf eure Tabelle angewendet werden können. Das macht ihr mit folgenden CSS-Angaben, die ihr als benutzerspezifisches CSS eurer Blogvorlage hinzufügt.

Zum Vorlagendesigner gelangt ihr über:

 
Den Editor zum Hinzufügen der CSS-Angaben findet ihr hier:

 
Folgende CSS-Definitionen für die Designwand tragt ihr dort ein:

 

Die Größenangaben müsst ihr wie gesagt eventuell auf eure Bedürfnisse anpassen. 640px ist hier die Gesamtbreite meiner Tabelle, 128px die Breite und Höhe der einzelnen Tabellenzellen und somit auch der einzelnen Bilder, wie in Schritt 3 berechnet.

Eine Referenz auf diese Definitionen haben wir der HTML-Tabelle übigens bereits durch die Angabe class=”designwand” hinterlegt.

Damit steht nun euer Grundgerüst eurer Designwand. Nun müssen nur noch die Fotos vorbereitet und eingefügt werden.

 

Schritt 5: Bilder vorbereiten

Idealerweise fotografiert ihr eure Blöcke aus der Vogelperspektive, damit ihr sie in einem Grafik- /Bildbearbeitungsprogramm (Photoshop, Gimp, Paint,…) passend quadratisch zuschneiden könnt. Nutzt ihr ein Smartphone oder Tablet PC, gibt es auch Foto-Apps, die euch den Quadratischen Zuschnitt erleichtern. Habt ihr euer Bild nun quadratisch zugeschnitten, verkleinert ihr es auf die passende Größe und speichert es ab.

 

Tipp: Oben haben wir eine Breite von 128 x 128 px für das Bild errechnet. Etwas flexibler seid ihr, wenn ihr die Größe etwas größer (aber nicht zu groß) wählt. Ich habe meine Bilder in den Maßen 150 x 150 px abgespeichert. Unsere benutzerdefinierte CSS-Definition von 128 px wird das Bild automatisch auf 128 px skalieren. Sollte sich nämich später herausstellen, dass eure Designwand doch etwas breiter werden kann/soll, so habt ihr was die Bildbreite betrifft noch etwas Spielraum nach oben. Verkleinern kann man die Bildanzeige über die CSS-Angabe immer, beim Vergrößern hingegen wird es unscharf  und verpixelt.

Schritt 6: Bilder hochladen und in die Designwand einfügen

Nachdem ihr eure Bilder nun auf dem Rechner bereits vorbereitet habt, müsst ihr diese nur noch auf euren Blog hochladen und in die HTML-Tabelle einfügen. Ihr seid dazu wieder in der HTML-Ansicht eurer Seite. Dort klickt ihr nun mal ganz ans Ende der Tabelle, so dass der Cursor dahinter steht, und fügt der Übersicht halber ein paar Leerzeilen ein. Achtet darauf, dass der Cursor aktuell an dieser Stelle steht und wählt nun die Funktion “Bild einfügen”.

Diese Stelle kennt ihr ja von euren Postings. Ladet hier die Bilder hoch und fügt diese am besten eine nach dem anderen hinzu. Sollte ein Fenster auspoppen, in dem ihr Einstellungen zum Bildlayout vornehmen könnt, wählt dort Bildausrichtung = keine und Bildgröße = klein aus. Anschließend erscheint im Editor nun der HTML-Code, der dieses Bild in die Seite einfügt. Er sieht in etwa folgendermaßen aus:

Wir brauchen nur den hier markieren Teil, kopieren diesen und fügen ihn in die gewünschte Tabellenzelle, d.h. zwischen die HTML-Tags <td> und </td> ein. Den Rest löscht ihr einfach.

 

Fertig ist eure Designwand!

Weitere Bilder könnt ihr nun wie in Schritt 6 beschrieben hinzufügen.

 
Wenn ihr mit der Vorschau eurer Designwand zufrieden seid, vergesst nicht, die Seite auch zu veröffentlichen. Über den Link “Anzeigen” in der Seitenübersicht öffnet sich eure Seite und ihr könnt dann den Link aus der Adresszeile kopieren und eure Designwand damit von wo auch immer (im Posting, als Banner, im Menü,…) verlinken.

Sicherlich kann man die Designwand auch komplett als Grafik erstellen und diese in die Seite einfügen. Dann müsst ihr das Bild aber mit jedem neuen Block komplett ersetzen. Über die Tabelle hingegen habt ihr einen Block auch mal schnell von A1 auf C4 verschoben.

Sollten euch die Bezeichnungen A1, A2, A3, … nicht gefallen, könnt ihr stattdessen auch einen Punkt oder Strich etc. verwenden.

Ich hoffe, ich habe jetzt niemanden erschlagen, sondern konnte das Prinzip und das Vorgehen verständlich erklären. Wenn ihr euch dazu entschließt auch eine solche Designwand für euer Projekt zu erstellen, würde ich mich sehr über ein Feedback freuen, wie ihr mit diesem kleinen HowTo zurecht gekommen seid. Und natürlich interessiert mich dann auch sehr, wie eure Designwand aussieht 😉

Macht’s gut!
Katherina