Share
Grid 960 ist ein CSS-Framework, mit dem Entwickler schnell Prototypentwürfe erstellen können. Sie sind ausgezeichnete Werkzeuge für die Erstellung von Nachbildungen. Warum? Weil sie all das schwere Heben durchführen, um schnellere Ergebnisse zu erzielen.
Das hört sich gut an, aber wie machen wir das? Es gibt viele Artikel im Internet, die CSS-Frameworks sprengen oder unterstützen, aber keiner hat Inhalte, die unerfahrenen Lesern bei der Entscheidung helfen. Dieser ist anders. Dieser Artikel behandelt den gesamten Prototyping-Prozess. Stellen Sie sich vor, Sie erhalten ein Design und benötigen ein Modell für den Kunden. In diesem Artikel werden die Grundlagen von Grid 960 erläutert, das Planen des Rasters für ein Design und das Codieren des Prototyps. Das Beispieldesign nutzt die meisten Funktionen von Grid 960 und gibt Ihnen eine solide Wissensbasis, an der Sie arbeiten können. Nachdem Sie das unten gezeigte Design gesehen haben, ist es Zeit zu erfahren, wie Grid 960 funktioniert.
Raster 960 verwendet Klassen durch Vererbung. Raster 960 bietet zwei Raster: 12 und 16 Spalten. Der Hauptcontainer ist immer 960px breit. Die Verwendung von 960 ermöglicht die meisten Säulenkombinationen und ist gleichzeitig einfach zu bedienen. Wir werden das 12-Spalten-Raster verwenden, um dieses Design zu kodieren, aber nicht alle 12 Spalten. Jede Gitterzelle hat eine Marge: 0 10px. Dies schafft eine Rinne von 20px. Bei der Erstellung einer Zeile summiert sich die Gesamtbreite aller Elemente auf 960. Schauen Sie sich die Demo-Seite von Grid 960 an. Sie sehen ein schönes Raster mit allen möglichen Kombinationen. Jede Rasterzelle hat eine Klasse, die ihre Breite angibt. Hier ist die Aufteilung der Spaltenbreiten für ein 12-Spaltengitter.
Jede Breite entspricht einem Klassennamen, der folgendermaßen gebildet wird: grid_X Dabei ist X eine Zahl aus der obigen Liste. Wenn Sie einen Block mit der Breite 940 verwenden möchten, verwenden Sie die Klasse grid_12. Woher weiß das Grid 960, in welcher Breite es sein soll? Jedes grid_x ist ein Selektor container_Y .grid_X wobei Y für Spalten entweder 12 oder 16 ist. Lasst uns in etwas Code eintauchen. So erstellen Sie ein Raster mit zwei Zeilen in einem 12-Spalten-Container. Die erste Zeile sei 940px und die zweite Zeile enthält zwei gleiche Spalten.
940px
460px
460px
Stellen Sie beim Erstellen einer Zeile im Raster sicher, dass sich alle untergeordneten grid_X-Nummern zu der Anzahl der verwendeten Spalten addieren. Dies sorgt für die richtige Breite. Zwei grid_6 div addieren sich zu 12. Sie sind nicht auf die gleichen Zahlen beschränkt. Sie könnten auch 6, 4 und 2 verwenden. Dort haben Sie ein schnelles Raster für den Inhalt. Nun, da Sie wissen, wie Grid 960 funktioniert, können Sie sehen, wie das Modell erstellt wird.
Das Raster des Designs zu visualisieren ist einfach. Es gibt eine Zeile für das Kopfzeilenbild, eine Zeile für die Navigationsleiste, eine Zeile mit 2 Spalten für die Schlagzeile und das Poster, einen Spacer, 4 Spalten, einen Spacer und eine Fußzeile mit 3 Spalten. Klicken Sie auf das Bild für den Code.
Nach dem Auschecken des Visuals sollten Sie wissen, wie das Raster des Modells erstellt wird. Ordnen Sie anhand der Breiten die Klassen # der Liste zu und lassen Sie etwas Code zusammen werfen. Denken Sie daran, das Clearing-Div am Ende jeder Zeile hinzuzufügen. Vergessen Sie nicht, die im Lieferumfang des Grid 960 enthaltenen Stylsheets beizulegen.
Das Skelett ist fertig. Zeit, um das Design zu überlagern. Die grünen Balken sind nur Divs mit Hintergrundfarbe und -höhe. Die Navigationsleiste hat keine festgelegte Höhe. Stattdessen wird es von der Größe der darin enthaltenen Links gesteuert. Vergessen Sie nicht, auch das Header-Bild hinzuzufügen.
div.spacer Hintergrundfarbe: # 8FC73E; Höhe: 1em; div # navbar Hintergrundfarbe: # 8FC73E; Polsterung: 10px 0;
Wenden Sie die Klasse an, um grid_12-Divs zu korrigieren, und legen Sie die ID fest.
Die mittleren Spalten benötigen keine Effekte. Fügen Sie einen Platzhaltertext hinzu, um das Design auszufüllen. Sie können hier einige machen. Bevor Sie den oberen Abschnitt anpacken, gehen Sie zur Fußzeile. Im Screenshot ist die Fußzeile einfarbig. Sie können dies mit dem aktuellen Code nicht erreichen. Ein Wrapper div um die unteren drei Spalten löst das Problem. Du denkst also, keine große Sache, füge einfach ein div ein. Dadurch wird das Raster unterbrochen, da das Raster 960 auf die Verwendung der Stile durch Eltern und Kinder angewiesen ist (erinnern Sie sich an den Selektor container_12 .grid_4?). Raster 960 ermöglicht verschachtelte Raster. Erstellen Sie ein Teilgitter, indem Sie ein grid_12-div hinzufügen, und platzieren Sie dann die grid_4-Werte darin. Wenn Sie verschachtelte Raster verwenden, benötigen die untergeordneten Elemente spezielle Klassen. Das erste Kind benötigt eine Klasse "Alpha" und das letzte Kind eine Klasse &qout;omega "Bearbeiten Sie das Markup, um die Änderungen widerzuspiegeln, und nehmen Sie stilistische Änderungen auf die Fußzeile vor.
div # footer Hintergrundfarbe: # e5e5e6;
Ausgezeichnet! Jetzt hat die Fußzeile eine durchgehende Hintergrundfarbe und Sie können die Größe der Spalten bei Bedarf anpassen. Fügen Sie jetzt einen Dummy-Text zu den Fußzeilenspalten hinzu und wechseln Sie zur Navigationsleiste. Die Navigationsleiste ist eine einfache ungeordnete Liste. Fügen Sie einige Links und das richtige Styling hinzu.
div # navbar ul list-style: none; Bildschirmsperre; Marge: 0 10px; div # navbar ul li float: left; Marge: 0 1,5 em; Schriftart: Fett 1em Arial;
Süss. Die Seite kommt wirklich zusammen. Alles, was übrig bleibt, ist das Erstellen der Blockeffekte im oberen Bereich. Dies ist unheimlicher als es scheint. Bevor wir eintauchen, müssen Sie einiges über Grid 960 und CSS-Frameworks im Allgemeinen wissen.
Kluge Leser haben vielleicht etwas realisiert. Die Seite ist extrem starr. Alles hat eine definierte Größe und das Ändern der Größe führt zu Problemen oder unterbricht möglicherweise den Entwurf. Designer opfern auch einige unserer Designziele, weil das, was Grid 960 erlaubt. Zum Beispiel war das Musterdesign 1000px breit. Raster 960 erstellt nur Raster mit einer Breite von 960 Pixeln, sodass die zusätzliche Größe verloren geht. Was ist, wenn Sie Ihre Seite 1000px statt 960 machen möchten? Kurz gesagt, Sie können den Code nicht stark ändern. Das Framework bindet Designer an eine Reihe von Einschränkungen. Angenommen, der Kunde möchte ein breiteres oder dünneres Design. Der Designer wird höchstwahrscheinlich den von ihnen geschriebenen Code ausrangieren müssen, um die neuen Ziele zu erreichen. Es gibt ein anderes Problem, das noch nicht bekannt wurde - Spalten gleicher Höhe. Da die mittleren Säulen alle den gleichen Hintergrund haben, scheinen sie gleich hoch zu sein. In der Fußzeile hinterlegt ein Wrapper div einen Hintergrund hinter den 3 Spalten. Raster 960 gibt Ihnen keine Spalten mit gleicher Höhe. Es gibt natürlich eine Möglichkeit, dies auf eigene Faust zu erreichen. Da wir Prototypen eines Designs erstellen, müssen Sie sich keine Gedanken darüber machen, wie das Design in der Produktion funktioniert. Sie versuchen nur, die Ideen in dieser Phase zu vermitteln. Es gibt auch einen anderen Aspekt von Grid 960, den Sie berücksichtigen müssen, bevor Sie den oberen Abschnitt in Angriff nehmen. Raster 960 basiert auf Elementen und Rändern in der Größe, um eine Zeile mit der richtigen Größe zu erstellen. Wenn Sie Füllungen oder Rahmen anwenden, wird das Design unterbrochen. In diesem Fall müssen Sie die Größe des div anpassen, um die Änderungen widerzuspiegeln. Seid müde davon Wenn Sie die Größe der Elemente an zwei Stellen anpassen, führt dies immer zu Verwirrung und erschwert die Wartung des Designs. Das wird gesagt. Lasst den oberen Abschnitt beenden.
Glücklicherweise können Sie im oberen Bereich um gleichhohe Säulen herumfahren. Da das Bild rechts eine festgelegte Höhe und Breite hat, kennen wir die Größe der anderen Spalte. Erstellen Sie den Blockeffekt, indem Sie ein neues div mit einem Rahmen innerhalb der vorhandenen divs hinzufügen. Vergessen Sie nicht, die Höhen einzustellen. Legen Sie keine Auffüllung für die divs fest, da dies die Breite des Blocks ändert und das Raster bricht. Geben Sie stattdessen einen Rand für ein untergeordnetes Element an. Die Breite des Blocks wird dadurch nicht geändert. Wenden Sie einen Rand auf ein Inline-Element an. Dadurch wird der gewünschte Effekt erstellt und der Text wird angepasst.
Verwenden Sie eine Klasse anstelle von ID, da die topSection-Klasse auf zwei divs angewendet wird. Dadurch können wir auch die Höhen einfacher ändern. Wählen Sie eine Höhe (diese Zahl hängt von Ihnen ab) und erstellen Sie eine Klasse.
div.topSection div border: solid 10px # e5e5e6; Höhe: 280px; div.topSection div p margin: 10px;
Cool! Lasst uns den Fortschritt überprüfen.
Bereit, die beiden Kisten zu füllen? Fahren Sie fort und füllen Sie den linken Teil mit Beispieltext. Machen Sie nicht zu viel, sonst läuft die Box über. Dies führt zu einem potenziellen Problem im endgültigen Design. Woher wissen Sie, wie viel Text zu viel ist? Für das Produktionsdesign müsste der Designer eine Funktion erstellen, die nur eine X-Wortmenge zulässt, um den Überlauf zu stoppen. Zeit, das Posterbild fertig zu machen. Vor dem Einfügen eines Bildes bestimmen Sie die Abmessungen. Wenn Sie eine gute Mathematik sind und das Boxmodell verstehen, wissen Sie wahrscheinlich bereits, wie groß es sein sollte. Wenn dies nicht der Fall ist, starten Sie FireBug und zeigen Sie einen Blick in das DOM. Klicken Sie auf Prüfen. Gehen Sie zum fraglichen Div und klicken Sie darauf. Öffnen Sie die Registerkarte Layout. FireBug zeigt eine hilfreiche Boxmodellreferenz an. Schauen Sie sich das Bild an, um Hilfe zu erhalten. Klicken Sie auf das Bild, um es zu vergrößern.
Der Screenshot zeigt, dass das Poster div 360x280 ist. Finden Sie ein Bild und erstellen Sie einen Stil. Ich entschied mich dafür, dass das Bild das gesamte div ausfüllt (im Gegensatz zum Musterdesign). Wenn Sie einen 10px-Rand erstellen möchten, müssen Sie die Abmessungen auf jeder Seite um 20px reduzieren.
img # poster width: 360px; Höhe: 280px;
Du solltest das bekommen. Das Modell ist abgeschlossen. Fühlen Sie sich frei, echten Text einzugeben und das Bild zu ändern.
Jetzt, da der Prototyp fertig ist, wird eine Bestandsaufnahme durchgeführt. Sie haben es geschafft, schnell einen Entwurf zu prototypisieren. Raster 960 hat das Raster einfach für uns erstellt. Wo gehst du hin? Natürlich würden wir dem Kunden zeigen und sehen, was er denkt. Es gibt jedoch einige Vorbehalte. Haben Sie dieses Design in IE6 oder IE7 getestet? Sollten wir? Nein, das ist ein Prototyp. So würde es in der Produktion aussehen. Es ist natürlich, dass alle Browser-Macken vor der Produktion geklärt werden. Was ist, wenn die Kunden ein komplexeres Design erstellen möchten? In diesem Fall werden Sie schnell die Grenzen des Frameworks erkennen. Was ist, wenn das Design flüssig oder elastisch sein muss? Der Rahmen wird das nicht tun. Sie müssten von vorne anfangen. Denken Sie daran, dass CSS-Frameworks nicht alle Ihre Probleme lösen, aber bei einigen helfen sie. Raster 960 und andere eignen sich hervorragend, um Prototypen zusammen zu werfen. Sie können die Konzepte von Grid 960 genauso gut im Produktionscode verwenden, aber es wird nicht empfohlen, sich während der gesamten Produktion an einem Framework zu halten. CSS-Frameworks sind wie jedes Tool, sie haben ihre Verwendung. In diesem Sinne, gehen Sie vor und prototypieren!
Accentsconagua