Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Site Builds

Erstellen einer eleganten Portfolio-Site von Grund auf neu

by
Read Time:25 minsLanguages:

German (Deutsch) translation by Valentina (you can also view the original English article)

Es geht nichts über das Erstellen einer gesamten Site, um Ihnen einen guten Überblick über die Funktionsweise eines CSS-Layouts zu geben. Bei PSDTUTS haben wir ein Tutorial, in dem Sie ein schlankes High-End-Webdesign entwerfen. In diesem Tutorial nehmen wir diese PSD-Datei und erstellen sie mit schönem, sauberem HTML und CSS.


Demo und Quellcode



Schritt 1

Also hier ist das Design, das wir bauen werden. Wie bereits erwähnt, können Sie dem Tutorial bei PSDTUTS folgen, um dieses Design von Grund auf neu zu erstellen. In diesem Tutorial werden wir nur diese Startseite erstellen. Auf dieser Basis können Sie jedoch Innenseiten nach demselben Layout erstellen.


Schritt 2

Als erstes müssen wir entscheiden, wie wir unseren Build strukturieren wollen. Dieser Prozess wird mit der Zeit einfacher, wenn Sie lernen, wie CSS-Layouts funktionieren können. Für dieses Design denke ich, dass wir mit einem sehr einfachen Build davonkommen können, der einiges an absoluter Positionierung und einem großen Hintergrundbild verwendet.

Was ist absolute Positionierung?
Wenn Sie ein HTML-Element auf einer Seite platzieren (z. B. ein <div>, <p> usw.), hat es eine natürliche Position, die durch das Vorhergehende bestimmt wird. Wenn Sie beispielsweise ein <p> </p> mit Text einfügen und dann ein weiteres <p></p> platzieren, wird es natürlich direkt unter dem ersten <p> angezeigt. Es fließt nur relativ zum letzten Element weiter.

Die absolute Positionierung unterscheidet sich darin, dass Sie eine genaue Platzierung für ein Objekt angeben und es aus dem regulären Elementfluss herausnehmen. Wenn Sie also Ihr erstes <p></p> wie zuvor hatten, aber für Ihr nächstes <p></p> haben Sie ihm eine absolute Position von gegeben left: 500px; top: 500px; Dann würde es genau an dieser Stelle erscheinen, unabhängig vom vorherigen <p>.

Sie legen die absolute Position von so etwas fest:

Nachteile der absoluten Positionierung

Das Hauptproblem bei der Verwendung der absoluten Positionierung besteht darin, dass Ihre Elemente nicht wirklich miteinander in Beziehung stehen. Wenn Sie beispielsweise einen Textblock oben auf Ihrer Seite und einen weiteren Textblock etwas weiter unten haben, sieht er möglicherweise gut aus, wenn jeder Textblock kurz ist. Wenn der oberste Block jedoch einen großen Aufsatz enthält, wird der nächste Textblock nicht nach unten gedrückt, sondern nur übertrieben. Dies liegt daran, dass Sie die Elemente aus dem natürlichen Fluss der Seite entfernen.

Daher ist die absolute Positionierung nur für Objekte wirklich nützlich, von denen Sie wissen, dass sie immer eine bestimmte Größe haben und die nicht wirklich mit anderen Elementen interagieren müssen.

Warum ist es uns heute nützlich?
Das Gute an Absolute Positioning ist, dass es wirklich sehr, sehr einfach ist! Sie teilen dem Browser mit, wo etwas abgelegt werden soll, und dort wird es angezeigt! Um das Ganze abzurunden, gibt es weitaus weniger Probleme mit der Browserkompatibilität, wenn Sie die Dinge absolut positionieren. Immerhin ist 100px 100px, egal ob Sie sich in Firefox, Internet Explorer oder Safari befinden.

SOOO unser Layout
Die Art und Weise, wie wir unsere Website erstellen, ist:

  • ein großes Hintergrundbild haben
  • das Logo positionieren, die Menüs und das Überschriftenfeld genau dort, wo sie angezeigt werden sollen
  • alle unsere Inhalte in einem regulären <div>-Tag erscheinen lassen, aber geben Sie ihm so viel Polsterung, dass der Inhalt ganz nach unten verschoben wird, wo er sein soll
  • unsere Fußzeile darunter sitzen lassen

Wenn das noch nicht viel Sinn macht, machen Sie sich keine Sorgen, wenn Sie sehen, dass die Website Gestalt annimmt!


Schritt 3

In Bezug auf Hintergrundbilder brauchen wir jetzt zwei. Eines wird gigantisch sein, und nachdem ich es als JPG gespeichert habe, ist es ungefähr 56 KB groß. Früher gab es eine Zeit, in der das etwas zu groß gewesen wäre, aber heutzutage ist es keine große Sache.

Das ist also der Hauptbereich, dann brauchen wir ein zweites Hintergrundbild, das eine dünne Scheibe sein wird. Dieses Slice wird immer wieder nach rechts wiederholt, sodass es beim Öffnen des Browserfensters gekachelt wird.

(Beachten Sie, dass das Logo unten im Hintergrundbild nicht angezeigt werden sollte, das war nur ein schlechter Screenshot, Entschuldigung!)

Sie können die beiden Bilder sehen, die ich hier und hier erstellt habe.


Schritt 4

OK, jetzt starten wir unseren HTML-Code. Zuerst legen wir einige Grundlagen fest:

Wie immer ist es am besten, mit unserem Layout von außen nach innen zu arbeiten. Also, was ich hier gemacht habe, ist Platz drei der wichtigsten <div>. Die ersten beiden sind der outside_container / container und die andere ist die footer. Dies erfordert eine kleine Erklärung:

  1. Ich habe den outside_container und den container erstellt, da ich ein doppeltes Hintergrundbild benötige. Das heißt, ich brauche ein gekacheltes Hintergrundbild, und obendrein brauche ich dieses große Hintergrundbild. Also platziere ich im outside_container den Kachelhintergrund und dann auf dem container <div>, der über dem externen Container angezeigt wird, diesen großen Haupthintergrund.
  2. Die Fußzeile muss sich außerhalb der Container befinden, da die Fußzeile immer weiter geöffnet werden sollte, wenn das Browserfenster in Längsrichtung gestreckt wurde. Da es einen eigenen Hintergrund hat, kann es nicht in den Containern sein - wenn es so wäre und Sie sich irgendwann strecken würden, würden Sie den Containerhintergrund und nicht die Fußzeile sehen!

Außerdem werden Sie sehen, dass ich einige Inhalte in die Fußzeile eingefügt habe, das ist nur das Mini-Logo und der Text. Ich habe den Text in ein <span>-Tag eingeschlossen, damit ich ihn bearbeiten kann. Es gibt keinen Grund, dem <img>-Tag eine ID oder eine Klasse zu geben, da wir einfach #footer img sagen können und da es das einzige Bild darin ist, können wir es so nennen. Dies hält unser HTML etwas einfacher.


Schritt 5

Nun das CSS für unseren Code bisher:

Gehen Sie also nacheinander durch:

  1. Zuerst definieren wir das body-Tag neu. Dies ist fast immer das erste, was ich tue. Wir entfernen alle Standardränder und Auffüllungen, legen eine Hintergrundfarbe und eine Schriftfamilie für die Seite fest. Beachten Sie, dass die Hintergrundfarbe tatsächlich die Hintergrundfarbe der footer ist. Wie bereits erwähnt, ist dies so, dass Sie die footer weiterhin sehen, wenn Sie das Browserfenster vertikal strecken.
  2. Als nächstes haben wir das Tag outside_container. Ich habe ihm diesen Slice-Hintergrund gegeben, er wird sich nur entlang der x-Achse wiederholen (d. h. Von links nach rechts), und wo kein Hintergrundbild vorhanden ist, sehen wir gerade schwarz (#000000). Wenn die Seite länger wird, werden die Kacheln nicht mehr weiterlaufen, da wir nur von links nach rechts wiederholen sollen, sondern den schwarzen Hintergrund erhalten. Dies ist perfekt, da unser Kachelbild schwarz wird!
  3. Als nächstes haben wir den container. Hier haben wir das gigantische Hintergrundbild so eingestellt, dass es sich nicht wiederholt - es erscheint also nur einmal. Beachten Sie, dass wir keine Hintergrundfarbe angegeben haben, wenn wir sie gehabt hätten, hätte dies unseren outside_container abgedeckt. Dies liegt daran, dass sich dieses <div>-Tag im vorherigen befindet und sich automatisch ausdehnt, um es vollständig auszufüllen. Unser Hintergrundbild wird also oben angezeigt, und außerhalb dieses Bereichs können Sie den Hintergrund von outside_container durchscheinen sehen.
  4. Ich habe dem Container auch eine Mindesthöhe gegeben. Dies ist nur so, dass Sie beim Betrachten der HTML-Seite an dieser Stelle ungefähr sehen können, wie sie aussehen wird, wenn Inhalt vorhanden ist. Später wird unser Inhalt sowieso die Mindesthöhe erzeugen.
  5. Die Fußzeile besteht im Grunde nur aus einem einzeiligen Rand und etwas Polsterung. Es ist nicht erforderlich, ihm eine Hintergrundfarbe zu geben, da wir dies zuvor im <body> festgelegt haben. Denken Sie daran, dass die Polsterungsdefinitionen folgendermaßen aussehen: padding: top right bottom left (im Uhrzeigersinn!)

Hier sind wir bis jetzt...

Bisherige Site anzeigen


Schritt 6

Als nächstes beenden wir diese Fußzeile, indem wir einige zusätzliche Stile wie diesen hinzufügen:

Also habe ich hier ein paar Bits zu unserer #footer-Klasse hinzugefügt und ein paar weitere Klassen erstellt. Lassen Sie uns Stück für Stück durchgehen:

  1. Zuallererst sind die Bits zwischen /* und */ CSS-Kommentare. Es ist schön, Kommentare in Ihrer CSS-Datei zu haben, da diese wirklich aufgelöst werden und dazu beitragen, die Dinge verständlich zu halten. Tatsächlich finde ich, dass CSS-Dateien bei größeren Projekten ziemlich außer Kontrolle geraten können, wenn Sie nicht vorsichtig sind. Es ist also wirklich gut, frühzeitig zu versuchen, sich an gute Gewohnheiten zu gewöhnen: Benennen Sie Ihre Selektoren gut, fügen Sie Kommentare hinzu, halten Sie ähnliche Dinge zusammen, brechen Sie für größere Projekte in mehrere CSS-Dateien auf und so weiter.
  2. In #footer habe ich unserer vorherigen Definition eine Schriftfarbe, Schriftgröße und Zeilenhöhe hinzugefügt. Die Zeilenhöhe ist ein sehr nützliches Textattribut, da Sie damit Ihren Text besser platzieren können. Ohne gute Zeilenhöhe kann Text gebündelt und schwerer lesbar aussehen. Zu viel Zeilenhöhe und der Text wird so weit auseinander liegen, dass er seltsam aussieht. Vielleicht möchten Sie experimentieren, um die richtigen Höhen für verschiedene Schriftarten und Größen zu finden. Hier schien 14px gut zu passen.
  3. Als nächstes habe ich die #footer img und #footer span auf beide float:left gesetzt. Da beide so eingestellt sind, dass sie nach links schweben, landen sie in Spalten nebeneinander. Ich werde später in diesem Tutorial mehr über Floating und Spalten sprechen.
  4. Schließlich teilen wir dem Browser mit, was mit <a>-Tags (d. h. Links) in der Fußzeile zu tun ist. Das heißt, dass sie nicht unterstrichen werden sollten und ihre Farbe ändern sollten, wenn Sie mit der Maus darüber fahren.

Mit der Hinzufügung der Fußzeile können Sie also Folgendes tun:

Bisherige Site anzeigen


Schritt 7

Nachdem die Fußzeile nicht mehr im Weg ist, fügen wir der Seite in den Hauptcontainerbereichen weiteren Inhalt hinzu. Zuerst brauchen wir zwei neue Bilder, die wir aus unserer PSD-Datei machen:


Beachten Sie, dass ich ein Bild für den großen Textblock verwendet habe. Im Allgemeinen ist es am besten, Text für diese Dinge zu verwenden, da dies die Seite viel durchsuchbarer macht und eine gute Praxis ist. Aber es wäre viel schwieriger gewesen, da wir ein bisschen Flash und SIFr verwenden müssten, um diesen Effekt zu erzielen. Da dies ein ziemlich einfaches Tutorial ist, habe ich mich dafür entschieden, nur ein großes Bild zu verwenden :-)

Hier ist ein Ausschnitt aus unserem HTML-Code - nur das Container-Bit:

Im Containerbereich haben wir also fünf Dinge hinzugefügt:

  1. Unser Logo: Es ist verlinkt. Wenn Sie darauf klicken, gelangen Sie zur Startseite. Es hat die id="logo".
  2. Hauptmenü: Dies ist einfach eine ungeordnete Liste mit id="menu"
  3. Das Menü auf der rechten Seite: Dies ist das gleiche wie im anderen Menü, nur eine andere id="right_menu"
  4. Großes Textfeldbild: Dies ist unser Hauptüberschriftstext, der als Bild gespeichert ist. id="panel"
  5. Content Div: Und hier werden wir später unseren gesamten Seiteninhalt platzieren. Ich habe es bis auf einen HTML-Kommentar leer gelassen.

Bevor wir mit dem Styling beginnen, sollten Sie einen Blick darauf werfen, wie die Seite aussieht, wenn nur alles so abgelegt ist:

Wie Sie sehen, müssen wir einige ernsthafte Änderungen vornehmen, um alles in Ordnung zu bringen. Wie Sie sich erinnern werden, werden wir die absolute Positionierung verwenden, um dies schnell und einfach zu tun.


Schritt 8

Hier ist das CSS, das wir hinzufügen, damit unsere Elemente an ihren Platz passen:

Gehen wir also noch einmal Stück für Stück durch:

  1. Zunächst sehen Sie ein altes Stück unseres Codes - den container. Ich habe dies gezeigt, als ich jetzt zwei weitere Zeilen hinzugefügt habe. Es hat jetzt eine width: 1000px und eine position:relative. Dies ist wichtig, da beim Festlegen der Position als relativ alles, was absolut innerhalb positioniert ist, relative zu diesem Container-Tag ausgeführt wird. Das bedeutet, dass ich Dinge in dieser Box positionieren kann, indem ich weiß, dass sie 1000 Pixel breit ist. Ich werde das nämlich für das right_menu verwenden.
  2. Als nächstes, da dies ein neuer Satz von CSS ist, habe ich ihn mit einem Kommentar abgetrennt
  3. Mit dem logo und dem panel habe ich beiden eine absolute Position auf der Seite gegeben. Woher weiß ich, welche Nummern ich verwenden soll? Gehen Sie einfach zum ursprünglichen Photoshop-Dokument zurück und messen Sie, wo sie sich befinden sollen! Sie können sehen, dass es sich um eine wirklich einfache Klassendefinition handelt, weshalb die absolute Positionierung so einfach ist.
  4. Als nächstes mit den beiden Menüs sind diese ebenfalls absolut positioniert, aber hier habe ich ihnen auch einen margin:0px; padding:0px; Definitionen, um sicherzustellen, dass alle Standardränder und Auffüllungen, die ungeordnete Listen haben, entfernt werden.
  5. Beachten Sie als nächstes, dass im right_menu, wenn ich die absolute Position als richtig angegeben habe right:75px. Dies bedeutet, dass es 75 Pixel von der rechten Seite seines Containers entfernt erscheint. Normalerweise wäre das das Browserfenster, aber weil ich mich früher daran erinnere, habe ich den container auf position:relative bedeutet, dass er 75 Pixel von der rechten Seite von entfernt ist.

    Jetzt denken Sie vielleicht, was ist der Sinn, kann ich die Dinge nicht einfach nur mit left positionieren? Gut können Sie, aber mit unserem Menü, wenn Sie zusätzliche Menüpunkte hinzufügen würden, müssten Sie es immer wieder neu positionieren, so dass es immer noch 75px von der rechten Seite entfernt war. Wenn Sie right verwenden, fließen die zusätzlichen Menüelemente beim Hinzufügen nach links. Probieren Sie es aus und sehen Sie!

Hier sind wir also:


Schritt 9

Wie Sie im vorherigen Bild sehen können, sehen das Logo und das Überschriftenelement jetzt so aus, als wären sie an der richtigen Position. Aber die Menüs sehen irgendwie komisch aus. Bevor wir diese stylen, ein kurzes Wort auf dem Logo/Bildfeld. Sie fragen sich vielleicht, ob beide Bilder Teil des Hintergrundbilds sind.

Die Antwort ist, dass das Logo, das wir verlinkbar machen möchten, Sie durch Klicken darauf zurück zur Startseite (macht die Website benutzerfreundlicher) und zum Haupttextfeld führt, das sich wahrscheinlich von Seite zu Seite ändern würde. Wenn Sie also ein einzelnes Bild haben, können Sie viele HTML-Seiten mit demselben CSS-Stylesheet erstellen, aber einfach ein anderes Bild mit unterschiedlichem Text positionieren.

Lassen Sie uns nun die beiden Menüs stylen und unsere Seite wirklich Gestalt annehmen. Dazu benötigen wir folgendes CSS:

Die ersten beiden Bits dieses Codes sind die gleichen wie zuvor (obwohl ich die Positionen ein wenig angepasst habe, damit sie direkt nach dem Styling aussehen). Beachten Sie, dass diese beiden Definitionen getrennt sind, da sie unterschiedliche Positionen haben. Danach haben wir die beiden zu denselben Klassendefinitionen kombiniert, da die Menüelemente selbst gleich aussehen sollten. Das Format zum gemeinsamen Definieren von zwei Klassen lautet:

.myClass, .myClass2 {...}

Dies unterscheidet sich sehr von dieser Definition:

.myClass .myClass2 {...}

Da die zweite Definition besagt, dass alle Elemente mit class="myClass2" in einem Element mit class="myClass" enthalten sind.

Wie auch immer, zurück zu unseren Stilen, lassen Sie uns einige wichtige Punkte durchgehen:

  1. Wir haben die <ul>-Elemente selbst auf 0 Rand und Abstand sowie die absolute Positionierung gesetzt, wie wir zuvor besprochen haben
  2. Dann haben wir für alle <li> Elemente in diesen <ul> gesagt, wir möchten, dass sie keinen Listenstil haben (dh keine Aufzählungszeichen), wir möchten, dass sie 9 Pixel groß sind, alle Großbuchstaben, und vor allem sollten sie display:inline. Inline-Anzeige bedeutet, dass Blöcke nicht untereinander, sondern nebeneinander angezeigt werden!
  3. Die nächste Definition besagt, dass für <a> Link-Tags, die in einem <li>-Tag erscheinen, das sich in <ul id="menu"> oder <ul id="right_menu"> befindet, sie eine bestimmte Farbe haben und keine Unterstreichung haben sollten .

Und damit sieht unsere Seite jetzt ziemlich gut aus!

Bisherige Site anzeigen


Schritt 10

Als nächstes ist es Zeit, Inhalte hinzuzufügen! Fügen wir zuerst einen Dummy-Text hinzu, der so eingerichtet ist, dass wir Spalten erstellen können. Hier ist der HTML:

OK, in diesem Snippet sehen Sie, dass ich im Inhaltsbereich 3 neue <div> hinzugefügt habe. Jeder hat ein <h2> Titelelement und ihnen etwas Text. Sie haben die Klassennamen column1, column2 und column3. Der Grund, warum ich den gesamten zusätzlichen Text hinzugefügt habe, ist, Ihnen etwas über das Erstellen von Spalten zu zeigen.

Fügen wir zunächst etwas CSS hinzu, damit sie wie Spalten erscheinen:

Wie üblich habe ich unser neues CSS-Stück mit einem Kommentar abgeschnitten. Dann habe ich einige Stile für #content festgelegt. Beachten Sie, wie viel Polsterung es gibt... 435px! Dies dient dazu, Platz für all diese absolut positionierten Elemente zu schaffen. Im Gegensatz zu diesen Elementen befindet sich dieser Inhaltsbereich im normalen Fluss der Seite.

Es muss sich im regulären Ablauf befinden, da es die Fußzeile nach unten drücken sollte, wenn Sie mehr Inhalt hinzufügen. Wenn dies absolut positioniert wäre, würde es einfach über die Fußzeile gehen.

Beachten Sie nun, dass die drei Spaltenklassen jeweils mit einer Breite und mit float:left festgelegt sind. Dies sagt ihnen, dass sie links von der Seite driften sollen, die neben anderen links schwebenden Elementen ausgerichtet ist. Ich habe den ersten beiden einen rechten Rand gegeben, damit sie nicht aneinander haften.

Wenn Sie ein Element schweben lassen, driftet es nach links oder rechts und weist alles andere an, es zu umschließen. Wenn die anderen Elemente ebenfalls schweben, bilden sie Spalten. Im Allgemeinen werden bei jedem Spaltenlayout Gleitkommazahlen verwendet.

Leider gibt es ein seltsames Problem mit Schwimmern. Das heißt, dass sie ein Problem mit ihren Containern haben. Anstatt die nächsten Elemente nach unten zu drücken, driften sie einfach über die Oberseite. Der Weg, um dieses Problem zu lösen, besteht darin, ein Element hinter sich zu haben, dessen Eigenschaft clear:both ist.

Die Clear-Eigenschaft sagt, dass das Wickeln von Dingen um die schwebenden <div> beendet werden soll. Es ist ein bisschen schwer zu erklären, also schauen wir uns an, was mit und ohne Lichtung passiert.

Ohne zu löschen
So sieht das Layout aus:

Sehen Sie, wie die Spalten über die Fußzeile gewandert sind und die Fußzeile selbst begonnen hat, sie zu umwickeln. Das ist nicht richtig!!

Mit Clearing
Die Lösung ist ziemlich einfach. Nach den drei folgenden Spalten müssen wir ein <div> hinzufügen:

Sehen Sie das <div style="clear:both"></div> unten? Es ist nur ein leeres <div>, das sagt, dass die drei Spalten gelöscht werden sollen. Und es behebt unser Problem,

Sehen Sie sich die Site hier an.

Ein paar letzte Worte zu Floats und Clearing
Sie fragen sich vielleicht, warum ich das "clear:both" nicht in die <div id="footer">-Definition eingefügt habe, aber leider funktioniert das aufgrund des von uns verwendeten Hintergrunds nicht... hier ist ein Screenshot:

Anscheinend gibt es eine Lösung, bei der kein nutzloses <div>-Tag eingefügt wird, und Sie können dies im QuirksMode nachlesen. Persönlich benutze ich diese Methode schon eine Weile und sie funktioniert gut und konsequent, also mache ich es weiter.


Schritt 11

OK, jetzt fast da!! Das Hauptlayout ist sortiert. Wir müssen lediglich unseren Inhalt hinzufügen und formatieren. Hier ist der HTML-Code dafür:

Es ist im Grunde die gleiche Struktur wie zuvor, außer dass ich in der dritten Spalte ein <ul>-Element erstellt habe, das die jüngsten Arbeiten enthält. Beachten Sie, dass ich es in diesem <ul>-Element so eingerichtet habe, dass ein Link <a>-Tag vorhanden ist, das das Bild, die Überschrift und den Text einschließt. So wird das Ganze zu einer Blockverbindung. Das heißt, wenn Sie über das Bild fahren, ändert der zugehörige Text immer noch die Farbe.

Hier ist das CSS für unsere Inhalte:

Gehen wir die Klassen einzeln durch:

  1. Zuerst definieren wir neu, wie <h2> in <div id="content"> aussehen. Wir hätten einfach alle <h2> neu definieren können, aber Sie wissen nie, wann wir ein <h2> haben könnten, das woanders erscheint. Es ist also eine gute Praxis, einigermaßen spezifisch zu sein. Ich habe hier nur Farbe, Schriftart, Gewicht und Ränder geändert, damit es so aussieht, wie ich es brauche.
  2. Dann haben wir die Definitionen <ul class="work">. Die erste <ul>-Definition entfernt nur den Rand und die Polsterung.
  3. Dann besagt die <li>-Definition, dass es keinen Listenstil geben sollte (d. h. Keinen Aufzählungspunkt). Es heißt auch clear:both. Wie Sie sich aus dem letzten Schritt erinnern, werden schwebende Elemente gelöscht. Und wenn Sie ein wenig nach unten scannen, werden Sie feststellen, dass die img-Definition später einen Float hat. Hier sagen wir also, dass jedes neue Listenelement <li> klar sein sollte und nicht Teile des letzten umschließen sollte.
  4. Als nächstes sagen wir im <a> Teil, dass das <a>-Tag als Block angezeigt werden soll. Das heißt, wir möchten, dass unsere Links ein großer Block sind, der das Bild und den Text einschließt. Wir geben ihm eine Auffüllung, um den Block zu verfeinern und einige Stile für die Darstellung von Text festzulegen.
  5. Als nächstes sagen wir, dass die <img> in unseren <a> mit einem kleinen Rand nach links schweben sollten.
  6. Schließlich definieren wir die Farbe des Textes in den <h4>-Bits.

Und das ist es! Wir sind fertig!


Fertig!

Damit ist die Startseite der Seite komplett. Sie können eine ZIP-Datei der Site-Dateien herunterladen, um sie durchzusehen. Sie enthält den HTML-Code für verschiedene Phasen dieses Tutorials. Und natürlich können Sie das endgültige HTML-Dokument sehen:

Sehen Sie sich hier die letzte Seite an


Internet Explorer

Jetzt sollten Sie immer browserübergreifende Tests durchführen. Leider bin ich gerade von Windows auf einen schönen neuen Mac umgestiegen und habe noch keine Parallels/Win-Installation, also kann ich nicht! Ich habe eine schnelle Überprüfung über BrowserShots.org durchgeführt und kann feststellen, dass es in IE6/7 größtenteils einwandfrei funktioniert. Es gibt jedoch ein Problem mit den drei Spalten, die die Fußzeile viel weiter nach unten drücken, als sie sollten. Wie auch immer, es sollte eine einfache Lösung sein, aber bis nächste Woche, wenn ich Windows, IE-Benutzer installiert habe, sind Sie allein :-)

Ich werde hier aktualisieren, sobald ich die Gelegenheit hatte, die Falten auszubügeln, aber ich wollte die Veröffentlichung bis dahin nicht aufhalten!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.