Als Collis diese Website einführte und die Leser nach Tutorialanfragen fragte, war es üblich, ein "Magazinthema" für Blog-Plattformen zu finden. Dieses Tutorial konzentriert sich auf den ersten Teil des Prozesses: Anwenden eines CSS-Rasters auf das Design, um eine Homepagevorlage zu prototypen.
Demo und Quelle
Sie können eine Demo dieses Tutorials anzeigen, indem Sie unten auf die Schaltfläche "Demo" klicken. Für die Quelle enthält der Download der ZIP-Datei keinen Blueprint-CSS-Code.
Was wir bauen
Der Fokus liegt hier auf einem Beispiel für das Design von Webseiten, das das Blueprint-CSS-Rasterframework verwendet, das auf meinem früheren CSS-Grid-Framework-Artikel basiert. Sie können jedoch dasselbe Verfahren auf jedes CSS-Raster-Framework anwenden, das Sie bevorzugen. Wenn Sie Grid-Frameworks nicht auf Produktionsstandorten verwenden möchten, können Sie den CSS-Code und die entsprechenden HTML-Klassen immer durch Ihren eigenen ersetzen.
Das unten abgebildete Seitendesign ist von zahlreichen WordPress-Magazin-Motiven beeinflusst, sodass Sie möglicherweise bekannte Designelemente sehen, obwohl dies kein WP-spezifisches Lernprogramm ist.
Ein typischer Grafikdesignprozess
Ich möchte darauf hinweisen, dass ich nur ein "Sessel" und Autodesigner bin. Die minimalistische Art meines Designs wird meinen Mangel an angemessener Ausbildung widerspiegeln. Hoffentlich können Sie sich auf den allgemeinen Rasterentwurfs- und Codierungsprozess konzentrieren, der auf geometrischen Elementen und nicht auf dem Stil basiert.
Ein typischer Entwurfsprozess für Webseiten besteht darin, mit einer Skizze auf Papier zu beginnen, gefolgt von einem grafischen Modell in Photoshop oder Fireworks usw. Legen Sie alle Gestaltungselemente an der gewünschten Position ab. Später bestimmen Sie in der CSS-gitterbasierten Entwurfsphase die genauen Maße.)
FilmPundits ist eine Website, die einem Freund gehört, den ich gerade aufbaue. Das nachstehende Modell ist eines von mehreren "FilmScenic" -Designs, die ich als Prototyp erstellt habe. Das Thema Film eignet sich aufgrund der Bilder im Breitbildformat nur für dieses Beispiel.
Wenn Sie ein ähnliches Design für Nicht-Filmthemen verwenden möchten, passen Sie die Bildhöhen einfach an, damit sie weniger breit erscheinen. Für meine Designanforderungen muss das größte Image die größte Wirkung haben. Die Komposition befindet sich also etwas außerhalb der Mitte, horizontal. Dies macht die gesamte Seite etwas dynamischer und lenkt die Aufmerksamkeit auf die wichtigsten Elemente.
Schauen wir uns die "Führungslinien" unten an, die das Entwurfsraster für das Modell oben bilden.
Verwenden Sie Ihre bevorzugte Grafiksoftware, um die Hilfslinien in eine "Slice" -Karte umzuwandeln:
Wenn Sie kein CSS-Grid verwenden, müssen Sie Ihre Webseite und CSS-Datei an dieser Stelle entweder manuell codieren oder Ihre Software den Code für Sie generieren lassen.
CSS-gitterbasierter Entwurfsprozess
Jetzt, da wir ein Grafikdesign-Modell haben, müssen wir das in HTML- und CSS-Code übersetzen. Zur Wiederholung beschleunigt die Verwendung eines CSS-Raster-Frameworks den Prototyping-Prozess. Sie können Ihre Gestaltungselemente in Pixelbreiten und Feinabstimmung an das von Ihnen verwendete CSS-Raster messen. (Ich kann mich nicht gerade mit der vertikalen Positionierung beschäftigen, da ich dies meistens mit Bildhöhen und oberen / unteren Rändern steuern kann.)
Hier ist der Prozess, den ich normalerweise zum Anwenden von CSS-Rastern verwende, der das Grafikdesign-Modell als Nebenbedingung behandelt. Sie müssen dies an Ihre Bedürfnisse anpassen.
Zeichnen Sie auf einem Blatt Papier ein Begrenzungsrechteck - Querformat oder Hochformat -, das die allgemeine Form Ihres Seitendesigns darstellt.
Unterteilen Sie das Begrenzungsrechteck in grobe Abschnitte: Kopfzeile, Fußzeile, Hauptinhalt, Seitenleiste.
Partitionieren Sie die groben Abschnitte ggf. weiter.
Wählen Sie Ihr CSS-Raster-Framework aus, entweder vorgefertigt oder benutzerdefiniert. Ich benutze Blueprint. Sie können dieses einseitige PDF-Dokument als "Spickzettel" verwenden..
Legen Sie die maximale Seitenbreite fest. Ich habe die Blueprint-Standardseitenbreite von 950 Pixeln verwendet, die aus 24 Spalten mit jeweils 30 px Breite und 10 Pixel breiten Zwischenstegen (24x30 - 10 = 950 px) besteht..
Wenn Sie möchten, können Sie Ihr Design in Raster-Grafiksoftware (Photoshop, Fireworks usw.) nachbilden. Ich neige dazu, diesen Schritt zu überspringen, weil. Beachten Sie, dass die meisten CSS-Raster-Frameworks ein PNG- oder JPG-Raster enthalten, das Sie als Richtlinie überlagern können. Dieses Raster habe ich im oben diskutierten Grafikdesign-Prozess nicht verwendet.
Legen Sie die Mindestbreiten für Ihre verschiedenen Abschnitte fest.
Ich wollte, dass die Seitenleiste mindestens 190 px breit ist (5 Blueprint-Spalten), aber ich habe dies bis zuletzt beibehalten, um sicherzustellen, dass die drei kleinen Funktionsblöcke unten links Vorrang haben.
Die linke Seite des "Features" -Blocks sollte ein gutes Stück Leerraum aufweisen (> = 30 px, da dies die Breite einer Spalte in Blueprint ist). Nachdem ich mich mit den höher priorisierten Abschnitten befasst hatte, entschied ich mich für 3 Spalten = 110 px breit.
Die drei kleinen Merkmalsblöcke müssen dieselbe Breite haben. Alles, was weniger als 190 px breit ist, hätte nicht die gleiche visuelle Wirkung. Alles, was mehr als 190 px beträgt, würde nicht genug Platz für den weißen Bereich links lassen. (Wenn ich Zeit und Neigung hätte, hätte ich ein benutzerdefiniertes Blueprint-Framework erstellen können, das eine feinere Steuerung ermöglicht, oder eine insgesamt breitere Seite verwenden.)
Die Breite des großen Feature-Bildes (590 px = 15 Spalten) wird automatisch festgelegt, da es die Breite aller drei kleineren Feature-Blöcke umfassen muss. Das Verhältnis von Höhe zu Breite ist größer als bei den kleineren Feature-Bildern, um eine visuelle Wirkung zu erzielen und damit anzuzeigen, dass es "wichtiger" ist als andere Seitenelemente. Alle diese Bilder wirken trotz unterschiedlicher Höhen- / Breitenverhältnisse großflächig.
Im Abschnitt "Recent Posts" der Seitenleiste wird die Bildbreite auf 70 px (2 Cols) anstelle der von mir gewünschten 48x48-Daumen gezwungen. Dies hat zur Folge, welche horizontalen Bildschirmflächen übrig bleiben. (Hier kann ein CSS-Grid-Framework ein Nachteil sein: erzwungene Größen.) Am Ende weisen jedoch selbst die kleinen Thumbnails leicht auf das "Widescreen" -Thema hin.
Zu breite Textblöcke lassen sich leicht mit einer kleineren Schrift reparieren - vorzugsweise mit einer Schriftfamilie, die bei reduzierter Größe noch lesbar ist.
Bestimmen Sie nach Möglichkeit die Elementhöhen. Die Befriedigung der Höhenpräferenzen ist für mich weniger von Belang, aber ich habe die Platzierung der Gestaltungselemente vertikal minimiert, so dass das gesamte Seitendesign ein "Breitbild" -Echo erzeugt. Zumindest für diese Homepage-Vorlage wollte ich nicht, dass die Seitenhöhe so groß ist, dass die meisten Leser nach unten scrollen müssten. Das würde den "Widescreen" -Effekt ruinieren.
Das Menü ist nur ein Platzhalter und wird hier nicht im Code behandelt. Es erstreckt sich über die gesamte Breite des Inhalts von 710 px (18 Cols)..
Die Höhe des großen Feature-Bildes wurde vom Layout bestimmt. Seine Proportionen sollten einem "Breitbild" ähneln.
Die kleinen Feature-Bilder sind eine verkleinerte Version der Bilder, die ich an einem anderen Filmstandort verwende. Die Originale sind 470 x 175 Stunden. Da es nur eine Breite von 190 Pixeln gibt, mit der gearbeitet werden kann, ergibt die Skalierung eines Originalbilds eine resultierende Höhe von 71 Pixeln, die ich hier auf 70 px reduziert habe. Der resultierende Anteil vermittelt zwar immer noch ein Breitbild, aber die Tatsache, dass diese Blöcke nicht so wichtig sind wie das große Funktionsbild.
Die Höhe des Texts jedes kleinen Feature-Abschnitts wird durch vier vertikale Abschnitte definiert: Filmtitel, Postdatum, Postautor und Beschreibung sowie mehrere "untere Ränder". (Im CSS-Code wird später eine Standardhöhe von 115% angezeigt.)
Die Höhe der Elemente im Block "Letzte Beiträge" beträgt mindestens 49 px. Sie sind jedoch abhängig von der Länge des Titels eines Beitrags variabel.
Der obere Teil des News-Bereichs steht nicht ganz an der Spitze der kleinen Funktionen. Es gibt Wege, dies zu erreichen, obwohl ich das hier nicht behandelt habe.
Bestimmen Sie die endgültigen Breiten für jedes Element. Berücksichtigen Sie dabei die Einstellungen Ihres Raster-Frameworks. Sie können Ihre Papierskizze oder Ihr Grafikmodell als Hilfsmittel verwenden.
Schneiden Sie Ihr Grafikmodell auf, und speichern Sie Segmente in Bilddateien.
Fügen Sie die erforderlichen Blueprint-Div-Tags und Klassenattribute hinzu, um Ihr Design zu unterstützen.
Testen und optimieren Sie, bis Sie ein endgültiges Design haben, mit dem Sie zufrieden sind.
Wenn Sie möchten, entfernen Sie das Blueprint-Framework. Dies bedeutet, das explizite Framework (HTML, CSS) durch ein implizites zu ersetzen - was für mich wie viel unnötige Arbeit klingt (aber das ist nur ich). Verwenden Sie zumindest in der Produktion die "komprimierte" Version der Blueprint-Dateien.
Geh Leben.
Wenn Sie ein echter Designer sind, werden Sie im Gegensatz zu mir wahrscheinlich den größten Teil des Entwurfsmodells in Ihrem bevorzugten Grafikbearbeitungspaket erstellen. Im Allgemeinen ziehe ich es vor, auf Papier zu skizzieren und dann mithilfe von HTML und CSS (sowohl Blueprint- als auch benutzerdefinierte Klassen) zu simulieren, wie unten beschrieben.
Gitterbasierter Codierungsprozess
Nachdem Sie nun ein Modell Ihres Seitenlayouts erstellt haben, können Sie mit der Codierung in HTML und CSS beginnen. Hier ist ein grober Prozess der eigentlichen Codierungsschritte:
Fügen Sie die erforderlichen Blueprint-CSS-Referenzen und den IE-bedingten Code in die Datei ein Kopf Element Ihrer Webseite.
Beginnen Sie im Body-Tag mit a div wessen Klasse Attribut ist auf "Container" gesetzt. Dies ist ein Blueprint-Code, um einen Containerbereich für Gestaltungselemente anzugeben. Diese Abschnitte der gesamten Seite. Wenn Sie möchten, dass das Raster sichtbar ist, können Sie zur besseren Platzierung von Elementen den Wert "showgrid" hinzufügen Klasse Attribut dieses div.
Beginnen Sie mit der Verfeinerung der Blöcke in kleinere Abschnitte, indem Sie HTML-Inhalt einhüllen div Tags sowie CSS-gesteuerte Rechtecke für Bilder. Verwenden Sie zum Angeben der Breiten die Blueprint-Klassen "span-x". Fügen Sie alle benutzerdefinierten CSS-Klassen hinzu, die Sie benötigen. Ich füge normalerweise redundante benutzerdefinierte Blöcke (mit grauem Hintergrund) ein und entferne sie dann, nachdem ich mein aktuelles Design in Code implementiert habe.
Sie können jeden groben Block weiter verfeinern oder zum nächsten Schritt springen.
Erstellen Sie alle erforderlichen Logos, Symbole oder Banner, die zuvor noch nicht erstellt wurden.
Ersetzen Sie grobe Blöcke durch tatsächliche Designelemente. Fügen Sie das entsprechende hinzu div Tags, alle verbleibenden Werte der Blueprint-Klasse.
Beispiel für HTML- und CSS-Code
Um die obigen Prozesse klarer zu machen, werfen wir einen Blick auf einige tatsächliche HTML- und CSS-Code-Fragmente für das zuvor abgebildete Beispiel für die Film-Site. Beachten Sie, dass ich mit den Nicht-Blueprint-Tags nur zur Verdeutlichung dieses Tutorials extrem gearbeitet habe. Möglicherweise möchten Sie überschüssige Klassen entfernen und verschachtelte Div-Tags zusammenführen.
Beachten Sie auch, dass ich aus Gründen der Übersichtlichkeit einige "hässliche" Nicht-Blueprint-CSS-Klassennamen verwendet habe. Vor ihnen stehen alle "fs", gefolgt von einem Funktionsnamen, um klar zu machen, wofür ich sie verwende.
Ich habe fünf Schritte für dieses Tutorial codiert, um den Verfeinerungsprozess in HTML und CSS zu veranschaulichen. Normalerweise würde ich Stufe 1-3 komprimieren.
Leere Vorlage mit Blueprint-Klasse "Container" und leerer CSS-Datei.
Grobe Blockierungsstufe 1.
Grobblockierung 2. Grobe Blöcke aus Stufe 1 verfeinern.
Grobe Blockierungsstufe 3. Abschließende Blockverfeinerung in notwendige Abschnitte.
Letzte Webseite und CSS.
Diese Schritte werden in den folgenden Abschnitten klarer.
Schritt 1: Leerer Vorlagencode
Zunächst möchten wir die HTML-Datei einrichten:
FilmScenic-Vorlage
Header, Inhalt, Seitenleiste und Fußzeile finden Sie hier
Share
Accentsconagua