Erstellen von Prototypen in HTML und CSS

Styling

Wir werden jetzt damit beginnen, den Inhalt mit CSS (Cascading Style Sheets) zu gestalten. Bei HTML geht es darum, was der Inhalt ist, und bei CSS geht es darum, wie dieser Inhalt aussieht. Ich beginne gerne damit, alles mit grellen Hintergrundfarben zu versehen, damit ich sehen kann, wo sich die Dinge auf der Seite befinden.

In meinen Beispielen füge ich alle meine CSS-Stile vor dem hinzu Tag, damit wir alles auf einer Seite sehen können. Wenn Sie jedoch mehr als eine Seite erstellen, ist es besser, ein separates Stylesheet zu erstellen und extern darauf zu verlinken.

Erstellen Sie dazu eine neue Datei im selben Verzeichnis wie index.html mit dem Namen styles.css, und fügen Sie in Ihrer index.html-Datei dieses Codebit vor dem hinzu Etikett.

1. < Verknüpfung href = 'styles.css' rel = 'stylesheet' type = 'text / css' />

Alle Ihre Stile werden hier leben.

Wenn Sie jsbin verwenden, öffnen Sie a Tag vor Ihrem Tag, fügen Sie den folgenden Code ein und schließen Sie ihn mit a .

1. div {
2. background-color: hotpink;
3. height: 100px;
4. }
6. p {
7. background-color: orange;
8. }

Alle Inhalte, die wir in a eingewickelt haben Tag haben einen hellrosa Hintergrund gegeben. Ich habe diesen auch eine Höhe hinzugefügt, damit Sie klarer sehen können, was passiert, aber wir werden dies später entfernen, wenn der richtige Inhalt darin enthalten ist.

Was ist, wenn wir jeden Inhaltsblock anders gestalten möchten? Unter den Stilen, die wir gerade hinzugefügt haben, aber vor dem Tag, wir werden Folgendes hinzufügen:

1. .Header {
2. Hintergrundfarbe: grün;
3. }}
5. .inhalt {
6. Hintergrundfarbe: rot;
7. }}
9. .ads {
10. Hintergrundfarbe: blau;
11. }}
13. .Fusszeile {
14. Hintergrundfarbe: gelb;
15. }}

Beachten Sie die amerikanische Schreibweise von 'Farbe'.

Erinnere dich an die class = '' Bits, die wir unseren HTML-Tags hinzugefügt haben? Wir verwenden diese Klassennamen als Hooks zum Stylen. Das . Vor dem Wort 'Kopfzeile', 'Inhalt' und 'Fußzeile' wird angezeigt, dass dies eher ein Klassenname als der Name eines Elements ist. (Wir haben keine hinzugefügt . vor dem div und p, weil sie eher reine HTML-Elemente als Klassennamen sind.)

Klassennamen auswählen

Sie können eine Klasse beliebig benennen, solange sie nicht mit einem Symbol oder einer Zahl beginnt und alle aus einem Wort oder einer Zeichenfolge bestehen müssen. Es lohnt sich jedoch, sorgfältig über die von Ihnen verwendeten Namen nachzudenken. Um in einer agilen Umgebung effektiv zu sein, muss unser Prototypcode sein:

• Schnell zu aktualisieren, wenn wir uns entscheiden, das Layout zu optimieren. Aus diesem Grund ist es eine sehr gute Idee, Klassennamen zu verwenden, die beschreiben, was der Inhalt ist und nicht wie er aussieht. Wenn Sie ihm einen Klassennamen wie 'left-hand-col' oder 'red' geben und ihn später nach rechts verschieben oder die Farbe ändern, ist dies sehr verwirrend.
• Klar und leicht zu lesen, kein Durcheinander von Tags. Stellen Sie sicher, dass Sie Tags gut einrücken, damit es nicht verwirrend wird. Tags, die nicht geschlossen wurden und die Seite beschädigen, sind der übliche Grund, warum die Dinge nicht wie erwartet funktionieren, und sie sind schwer zu erkennen, es sei denn, Ihr Markup ist gut organisiert.
• Leicht zu verstehen, wenn Sie den Code an eine andere Person weitergeben. Eine gute Möglichkeit, Ihre Arbeit zu dokumentieren, besteht darin, Kommentare in HTML und CSS einzufügen, in denen erläutert wird, was zu tun ist. (Kommentare können hinzugefügt werden in HTML und /* so was */ in CSS.)

Layout

Jetzt wissen wir, wie man gezielt auf Inhaltsblöcke abzielt, und beginnen mit dem Layout. Das Design, das ich gemacht habe, ist in Pixel, aber flexible Layouts sind cool, so dass wir unsere Pixel mit ein bisschen Mathematik der Sekundarstufe in Prozentsätze umwandeln.

Die Gesamtbreite unseres Designs beträgt 960px. Wir haben zwei Spalten, eine mit einer Breite von 720 Pixel und eine mit einer Breite von 220 Pixel. (Dies ergibt eine Lücke von 20 Pixel zwischen den Spalten.) Die Hauptspalte, der wir die Klasse 'Inhalt' zugewiesen haben, befindet sich links, die kleinere Spalte mit der Klasse 'Anzeigen' rechts. Die Kopf- und Fußzeile sind 960 Pixel breit.

1. 960px entspricht 100% der Breite des gesamten Inhalts. Um herauszufinden, wie viel 1px in Prozent ist, teilen wir 100 durch 960.
2. Dies ergibt 0,104166667, was wir auf 0,104% runden werden
3. Daher sind 720 x 0,104 = 74,88% und 220 x 0,104 = 22,88%

Wir können Inhaltsblöcke in CSS positionieren, indem wir den Dingen sagen, dass sie schweben sollen. Wenn wir etwas erzählen 'float: left' Wir sagen ihm, er soll in die obere linke Ecke seines enthaltenen Elements schieben und anhalten, wenn ihm etwas im Weg steht. 'schweben rechts' sagt ihm, er solle in die obere rechte Ecke schweben. Es ist ein bisschen wie links und rechts Text ausrichten, aber für Inhaltsblöcke. Wir müssen den Blöcken auch die Breite geben, sonst wird standardmäßig die volle Breite ihres Inhalts verwendet und sie werden nicht nebeneinander sitzen. Fügen Sie am Ende Ihrer Stile Folgendes hinzu:

1. .inhalt {
2. Breite: 74,88%; / * 720px * /
3. float: left;
4. }}
5. .ads {
6. Breite: 22,88%; / * 220px * /
7. schweben rechts;
8. }}
9. .Fusszeile {
10. Lösche beide;
11. }}

Ich habe neben den Breiten einen CSS-Kommentar hinzugefügt, damit ich mich daran erinnern kann, was sie ursprünglich in Pixel waren. Kommentare sind sehr nützlich für die Dokumentation, verwenden Sie sie großzügig.

Ich habe es auch der Fußzeile gesagt 'klar: links', Das ist, als würde man es auf eine neue Zeile zwingen. Es füllte den verbleibenden Platz, als wir die Float-Regeln hinzufügten, und stieg neben dem Anzeigenblock auf, wo wir es nicht wollten.

Sie werden wahrscheinlich bemerkt haben, dass unser Text bündig am Rand der Blöcke anliegt. Wir sollten ihm etwas Luft zum Atmen geben, damit wir dem Inhalt etwas Polster hinzufügen. Dadurch wird der Text im Container von den Rändern weggezogen. In meinem Design habe ich diese Polsterung als 20px notiert, was 2,08% entspricht. Wir werden auch unten einen Rand hinzufügen, um die Blöcke voneinander wegzudrücken, damit sie sich nicht berühren. Dies kann als Pixel bleiben, da nur die Breiten flexibel sein werden.

1. .inhalt {
2. Breite: 74,88%; / * 720px * /
3. float: left;
4. Polsterung: 2,08%;
5. }}
6. .Header,
7. .Inhalt,
8. .ads {
9. Rand unten: 20px;
10. }}

Ich habe die Stile für die Inhalts-, Anzeigen- und Headerblöcke mit einem Komma gruppiert, da beide dieselben Eigenschaften haben. Das Vornehmen von Änderungen ist viel schneller, wenn Sie Stile gruppieren können.

Ups, unsere Blöcke sitzen nicht mehr nebeneinander. Dies liegt daran, dass beim Hinzufügen von Auffüllungen die Gesamtbreite des Blocks erhöht wird. Wir gehen zurück und ändern die Breiten, um die Polsterung zu berücksichtigen, indem wir die zusätzlichen 2,08% entfernen, die links und rechts vom Inhaltsblock hinzugefügt wurden.

1. .inhalt {
2. Breite: 70,72%; / * 680px * /
3. float: left;
4. Polsterung: 2,08%;
5. }}

Verwirrt darüber, warum dies passiert? Hier finden Sie ausführlichere Informationen zu Polsterung und Rand . Ich habe auch eine eingerichtet interaktive Demo in jsbin von dem, was wir bisher haben .

Bilder

Um uns Zeit zu sparen, verwenden wir einen Dienst namens placehold.it Platzhalterbilder zur Seite hinzufügen. Dies erzeugt Bilder in allen von uns gewählten Dimensionen. Ich werde unseren ersten im HTML-Code hinzufügen > Tags.

1. < img src = 'http: //placehold.it/220x400' />

Das 220x400-Bit bezieht sich auf die Breite und Höhe. Dadurch wird automatisch ein Platzhalterbild in unsere Anzeigenspalte geladen. Da das Bild jedoch größer als die Breite der Spalte ist, läuft es über. Dies ist schön und einfach in CSS zu beheben.

1. img {
2. maximale Breite: 100%;
3. }}

Dadurch werden Bilder niemals größer als das enthaltene Element und sie passen sich der Breite der Seite an.

Vorschaubilder

Der nächste Schritt ist das Hinzufügen einiger Miniaturansichten in der Hauptinhaltsspalte zwischen dem Tags, und bringen Sie sie dazu, sich nebeneinander auszurichten. Hier ist der HTML-Code für eine Miniaturansicht. Kopieren Sie ihn daher einige Male und fügen Sie ihn ein, um weitere hinzuzufügen.

1. < zu class = 'thumbnail' href = '#'>
2. < img src = 'http: //placehold.it/213x160' />
3. < p > Erdbeerkäsekuchenp >
4. zu >

Der Link wird um das Bild und den Absatz gewickelt, sodass der gesamte Bereich anklickbar ist. (Ich habe gerade ein # in das hinzugefügt href = Bit, weil der Link noch nirgendwo hingeht, aber Sie können eine URL hinzufügen.)

Wir müssen diese nun nebeneinander aufstellen, drei hintereinander, mit einer kleinen Lücke rechts. Hier ist das CSS:

1. .Miniaturansicht {
2. float: left;
3. Breite: 31%; / * Das sind 31% des enthaltenen Elements * /
4. Rand rechts: 3,5%;
5. Rand unten: 13px;
6. Textdekoration: keine;
7. }}
8. Miniaturbild: n-tes Typ (3n + 3) {
9. Rand rechts: 0;
10. }}

Ich habe jedem Miniaturbild eine Breite von 31% gegeben, was ungefähr einem Drittel von 100% entspricht, und 'float: left' Also stellen sie sich auf. Ich habe auch jedem ein Randrecht von 3,5% gegeben, aber ich möchte nicht, dass das dritte Miniaturbild in jeder Zeile einen Rand hat, da es bereits eine Lücke vom Auffüllen in der Inhaltsspalte gibt. Deshalb habe ich gesetzt 'Rand rechts: 0;' auf '.thumbnail: n-ter Typ (3n + 3)' . ': n-tes Typ (3n + 3)' sucht nach dem dritten Element mit einer Klasse von 'Thumbnail' und jedem dritten danach und entfernt den Rand.

Jetzt haben wir einige Inhalte, wir können 'height: 100px;' entfernen. aus dem Stil für 'div' Elemente, die wir gleich zu Beginn hinzugefügt haben.