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

Entwerfen und Codieren einer flexiblen Website

by
Difficulty:IntermediateLength:LongLanguages:

German (Deutsch) translation by Katharina Grigorovich-Nevolina (you can also view the original English article)

In diesem Tutorial werden wir eine einfache Webseite im Blog-Stil entwerfen und codieren. Wir werden besonderes Augenmerk darauf legen, unser Design mithilfe von sauberem und einfachem XHTML und CSS flexibel und zugänglich zu machen. Dieses Tutorial richtet sich an Anfänger und alle, die die Zugänglichkeit ihrer Webdesigns verbessern möchten.

Tutorial Details

  • Schwierigkeit: Einfach
  • Geschätzte Fertigstellungszeit:1,5-2 Stunden

Schritt 1

Unsere Beispielwebseite basiert also auf einem einfachen Blog-Thema mit einer WordPress-ähnlichen Blog-ähnlichen Struktur wie die Nettuts-Homepage. Es wird ungefähr so aussehen:

Die Idee hier ist nicht, dass Sie mein Beispiel reproduzieren, sondern dass Sie in der Lage sind, den Techniken zu folgen und sie auf Ihre eigenen Entwürfe anzuwenden, um hoffentlich ein oder zwei Dinge über die zugrunde liegenden Konzepte zu lernen.

Schritt 2 - Photoshop

Wir werden die Verwendung von Photoshop hier auf ein Minimum beschränken. Normalerweise modelliere ich ein gesamtes Design in Photoshop vor dem Codieren, aber hier werde ich nur ein grundlegendes Layout erstellen und mich später um den Inhalt kümmern. Dies ist ein Beispiel für einen anderen Workflow. Er wird im weiteren Verlauf sinnvoller.

Hinweis: Einige Leser haben nach der Verwendung von GIMP gefragt. Ich habe es nicht persönlich verwendet, aber ich bin sicher, dass Sie die folgenden Schritte in GIMP genauso einfach ausführen können, da wir nur grundlegende Formen und Verläufe verwenden.

Seitenlayout

Ich habe beschlossen, die Seite 900 Pixel breit zu machen, damit mein Dokument 1000 Pixel breit und 1200 Pixel lang ist (ich weiß nicht, warum ich mir so wenig Platz gegeben habe, machen Sie Ihre Seite breiter, wenn Sie möchten). Platzieren Sie die Hilfslinien bei 50px und 950px, um einen 900px breiten Bereich zu erhalten. Wir werden einen Inhaltsbereich und eine Seitenleiste haben, und der Inhaltsbereich wird 600 Pixel breit sein. Platzieren Sie also eine weitere Anleitung bei 650 Pixel.

Hintergründe

Der Header-Hintergrund besteht nur aus drei Rechtecken für die oberen Links, den Haupt-Header und den Navigationsbereich. Ich habe Formebenen verwendet und Farbverläufe zu den Ebenenstilen hinzugefügt. Es gibt auch 1px-Ränder zwischen der oberen Leiste und dem Kopfbereich sowie zwischen der Kopfzeile und dem Navigationsbereich.

Der Fußzeilenhintergrund ist ein weiterer Farbverlauf, diesmal jedoch mit einem 2-Pixel-Rand oben.

222
333
444
555

Als nächstes füge ich einen Hintergrund für die Seitenleiste hinzu und wähle #d8ddd1.

666

Textwerkzeug

Als nächstes greifen wir zum Textwerkzeug (T) und fügen ein Logo und einen Slogan sowie einige grundlegende Navigationslinks hinzu. Schriftarten:

Blog Titel:

  • Schriftart: Myriad Pro
  • Größe:48pt
  • Farbe: #ffffff (weiß)

Blog Beschreibung:

  • Schriftart: Myriad Pro
  • Größe:24pt
  • Farbe: #ffffff

Hauptnavigationslinks:

  • Schriftart: Arial
  • Größe:18pt
  • Farbe: # 2b2b2b

"Willkommen, Gast" und "Bleiben Sie auf dem Laufenden":

  • Schriftart: Arial
  • Größe:12pt
  • Farbe: #fffff

"anmelden, anmelden" und "abonnieren über ...":

  • Farbe: #a5bf8d
  • Stil: unterstreichen
777

Inhalt

Wir werden nur ein Beispiel für einen "Beitrag" in unser Photoshop-Modell aufnehmen, da ich finde, dass die Arbeit mit Schrift in Photoshop ein echtes Problem ist, aber wir werden später ausführlicher auf das Gestalten des Inhaltsabschnitts eingehen. Die Schriftarten, die ich für den Dummy-Beitrag verwende, sind:

Beitragstitel:

  • Schriftart: Arial
  • Größe:24pt
  • Farbe: #3c3f40
  • Stil: Fett

Datum, Kategorie und Autoreninfo:

  • Größe:11pt

Absätze:

  • Größe:12pt
888

Okay, wir sind ziemlich fertig mit unserem Modell. Jetzt müssen wir es nur noch in Scheiben schneiden und für das Web speichern.

Wählen Sie das Slice-Werkzeug (C) und schneiden Sie dünne Slices aus jedem der Hintergrundrechtecke aus: der oberen Leiste, dem Kopfbereich, der Navigation und der Fußzeile. Fügen Sie die Rahmen nicht hinzu, wir fügen sie mit CSS hinzu. Versuchen Sie, ganz nah heranzuzoomen, um sicherzustellen, dass Sie die richtigen Teile erhalten. Die Scheiben, die ich schneide, sind ungefähr 5 Pixel breit, aber die Breite ist an dieser Stelle nicht besonders wichtig.

999
101010

Wählen Sie "Datei / Für Web und Geräte speichern ...". Halten Sie die Umschalttaste gedrückt und klicken Sie, um jedes Slice auszuwählen. Wählen Sie im Dropdown-Menü "Voreinstellungen" die Option "JPEG". Deaktivieren Sie "In sRGB konvertieren" (ich finde, dass die Konvertierung die Farben trübt). Alle anderen Einstellungen sollten auf den Standardeinstellungen belassen werden. Klicken Sie auf "Speichern". Stellen Sie im Popup-Fenster sicher, dass "ausgewählte Slices" im Dropdown-Menü "Slices" angezeigt werden, und klicken Sie auf Speichern.

GIMP-Benutzer: Ich bin nicht sicher, ob Gimp ein Tool wie Slice hat, aber Sie müssen nur eine rechteckige Auswahl treffen, sie in separaten Dokumenten speichern, sie zuschneiden und als optimierte JPEGs speichern.

Weitere Informationen zum Schneiden und Speichern finden Sie in Mein vorheriges Tutorial.

Schritt 3 - HTML-Einrichtung

Wenn Sie mit dem Organisieren von Dateien und Ordnern für eine Webseite nicht vertraut sind, lesen Sie mein anderes oben verlinktes Tutorial.

Öffnen Sie Ihren bevorzugten Code-Editor und erstellen Sie eine neue Datei mit dem Namen index.html. Wir werden versuchen, so wenig div-Tags wie möglich zu verwenden, um unser Markup aussagekräftig und semantisch zu halten. Um ein flexibles, anpassbares Layout beizubehalten, müssen wir jedoch einige Elemente in mehrere Divs einschließen. Dazu später mehr.

Alle Elemente auf unserer Seite werden in zwei Divs enthalten sein, die als "main" und "footer" bezeichnet werden. Innerhalb der "Haupt" -Div haben wir Divs für die obere Leiste, die Kopfzeile und den Inhaltsbereich. Die Fußzeile enthält ein inneres Div für den geschriebenen Inhalt.

Top Bar

Der Hintergrund des blauen Balkens oben erstreckt sich über die gesamte Breite der Seite, die beiden Textbereiche müssen jedoch innerhalb der 900 Pixel der Seite liegen. Um dies zu erreichen, muss der Inhalt in einem anderen Div enthalten sein, der eine Klasse von "Container" hat. In unserer Leiste oben werden zwei Absätze angezeigt, einer für die Anmeldung und einer für die Abonnementoptionen. Da sie schwebend sein werden, muss jedem eine eindeutige ID zugewiesen werden. Wenn wir vollständig semantisch sein wollten, könnten wir diese beiden Absätze als ungeordnete Liste mit zwei Listenelementen codieren. Probieren Sie es in beide Richtungen aus und prüfen Sie, ob Sie es zum Laufen bringen können.

Schritt 5 - Header

Wir haben hier das gleiche Problem wie beim letzten Schritt. Das Hintergrundbild muss sich auf unbestimmte Zeit erstrecken. Um den Inhalt zu enthalten, müssen wir ihn in einem anderen Div platzieren. Da sich der Header auch auf unserer zentrierten, 900 Pixel breiten Seite befindet, können wir die Klasse "container" wiederverwenden. Der Titel des Blogs wird in ein <h1> -Tag eingeschlossen, und die Beschreibung / Tagline ist ein Absatz mit einer eindeutigen ID.

Navigation

Ebenfalls in der Kopfzeile befindet sich das Navigationsmenü, das in eine ungeordnete Liste mit der ID "Menü" eingeschlossen wird, die alle in ein anderes Div mit der ID "Navigation" eingeschlossen werden. Da das Navigationsmenü zentriert sein soll, können wir der ul auch unsere "container"-Klasse hinzufügen.

Wir schreiben die Navigationslinks hier in Kleinbuchstaben, aber in unserer CSS-Datei werden wir sie in Großbuchstaben umwandeln. Sie könnten sie hier in Großbuchstaben schreiben, aber meine Feststelltaste ist defekt, und auf diese Weise wird das Markup sauberer.

Schritt 6 - Inhalt

Der Inhaltsbereich hat kein Hintergrundbild oder keine Hintergrundfarbe, daher müssen wir ihn nicht in ein zusätzliches Div einschließen. Um es zu zentrieren, können wir dem Inhalt div auch eine Klasse von "Container" geben. Innerhalb des Inhaltsbereichs haben wir zwei weitere Bereiche, einen für die Blog-Beiträge und einen für die Seitenleiste.

Beim Entwerfen eines Blogs müssen wir die Tatsache berücksichtigen, dass sich der Inhalt ändern wird und eine beliebige Anzahl von Elementen enthalten kann, einschließlich Listen, Bildern, Zitaten, Überschriften und hervorgehobenem Text. Zur Vorbereitung müssen wir jedes mögliche Element formatieren, das möglicherweise angezeigt wird. Daher muss unser Beispielinhalt Alles enthalten. Dies wird manchmal als "Sandbox-Methode" bezeichnet. Um Dummy-Inhalte zu erhalten, empfehle ich den Besuch von HTML Ipsum.

Wir werden unseren Beispielinhalt in verschiedene Beiträge unterteilen, wobei die Titel in <h2>-Tags eingeschlossen sind. Jeder Beitrag enthält außerdem Standardinformationen zu Datum, Autor usw., die in einem <small>-Tag enthalten sind.

Schritt 7 - Sidebar

In einem typischen Blog enthält die Sidebar verschiedene Widgets, die Links zu anderen Seiten oder Artikeln anzeigen. Jedes Widget ist normalerweise eine ungeordnete Liste von Ankertags. Hier werden wir Widgets für "Kategorien", "Letzte Beiträge" und "Archive" haben. Unser Sidebar-Div enthält also drei Listen mit jeweils einem Titel, der in ein <h3>-Tag eingeschlossen ist.

Schritt 8 - Footer

Die Fußzeile funktioniert wie die obere Leiste, die Kopfzeile und die Navigation, wobei ein äußeres Div einen sich wiederholenden Hintergrund enthält und ein inneres Div den Inhalt zentriert und innerhalb der 900 Pixel unserer Seite enthält. Dazu müssen wir nur die Klasse "container" zu unserem div "footer content" hinzufügen.

Unsere Fußzeile wird drei Spalten enthalten: Copyright-Informationen, Links und Abonnementoptionen. Jeder muss in seinem eigenen div enthalten sein.

Okay, wir sind mit unserem Markup fertig! Werfen wir einen Blick in den Browser (ich verwende Safari 4, was übrigens fantastisch ist)

111111

Es sieht nicht nach viel aus, aber es enthält alle unsere Inhalte auf logische, lesbare Weise. Es ist wichtig, dass eine nicht gestaltete Webseite alle Informationen enthält, die ein Leser benötigt, um die Seite leicht verstehen und navigieren zu können. Dies stellt sicher, dass jeder, der mit deaktiviertem CSS surft oder einen speziellen Browser verwendet (z. B. einen Bildschirmleser für sehbehinderte Personen), weiterhin auf Inhalte zugreifen und diese verstehen kann. Wenn Sie dies berücksichtigen, wird auch ein logisches Layout sichergestellt, das später leichter geändert werden kann.

Schritt 9 - CSS

Jetzt kommt der lustige Teil: unserer Seite etwas Stil geben. Bereiten Sie sich vor - um das gewünschte Layout zu erreichen, müssen wir uns einigen verwirrenden kleinen CSS-Kopfschmerzen stellen. Ich werde versuchen, die zugrunde liegenden Konzepte zu erklären, die zu diesen Problemen führen, damit Sie nicht nur lernen, wie man sie löst, sondern auch besser verstehen, wie CSS funktioniert und wie Sie mit Problemen umgehen, auf die Sie möglicherweise stoßen. Lassen Sie uns anfangen!

Erstellen Sie ein neues Dokument "style.css" und verlinken Sie es im Kopf Ihres HTML-Dokuments:

Schritt 10 - Grundlegende Reinigung

Zunächst müssen wir wissen, womit wir arbeiten, was bedeutet, dass die Standardbrowser-Stile entfernt werden.

Wir werden einen einfachen CSS-Reset verwenden, um diese lästigen Ränder und Stile loszuwerden:

Wir haben auch die falsche Schriftart für unsere gesamte Seite. Lassen Sie uns das beheben:

Der nächste Schritt ist ein bisschen ordentlich: Erinnern Sie sich, wie wir die "Container" -Klasse zu allen Divs hinzugefügt haben, die Textinhalt hatten? Es ist Zeit, dass dieser Container unseren Inhalt enthält! Wie ich bereits sagte, machen wir unsere Seite 900px breit und wir müssen den Inhalt zentrieren.

Und einfach so haben wir eine schöne 900px breite, zentrierte Webseite.

Schritt 11 - Von oben beginnen

Wir beginnen oben mit der kleinen bläulichen Leiste, die die Abonnement- und Anmeldelinks enthält. Okay, das erste, was wir an unseren beiden Absätzen oben bemerken, ist, dass sie nebeneinander und nicht oben stehen sollen. Dazu müssen wir die Elemente schweben lassen.

Wie funktionieren floats?

Wenn wir unsere Webseite im Browser betrachten, sehen wir eine Reihe von Elementen unterschiedlicher Breite und Höhe. Der Browser sieht jedoch nur eine Reihe übereinander gestapelter Kästchen, wobei jedes Element die gesamte Breite des Containers einnimmt. Die Webseite hat einen sehr einfachen "Ablauf": Jedes Element wird von dem darüber liegenden Element auf der Seite nach unten gedrückt. Damit zwei Elemente nebeneinander sitzen, müssen sie aus dem normalen "Fluss" der Seite entfernt werden.

Wenn ein Element schwebt, passieren einige Dinge: Es bleibt an der Seite der Seite (oder einem anderen Element) hängen und wird aus dem normalen Elementfluss entfernt - das heißt, anstatt die gesamte Breite der Seite einzunehmen. Es nimmt nur den Raum ein, den es direkt einnimmt, und ermöglicht es den Elementen darunter, sich daneben zu bewegen.

Versuchen wir es mit unseren zwei kleinen Absätzen:

Werfen Sie einen Blick in den Browser und wir haben ein Problem! Das h1-Logo hat sich zwischen den beiden schwebenden Elementen nach oben bewegt. Wenn Sie Elemente schweben lassen, ist es so, als würden Sie ihnen sagen, dass sie "die Regeln brechen" sollen. Das einzige Problem ist, wenn Sie einige Elemente die Regeln brechen lassen, beginnen auch andere Elemente damit! Was wir brauchen, ist eine Möglichkeit, dem Browser mitzuteilen, dass diese beiden Absätze und NUR diese beiden Absätze die Regeln brechen dürfen, sodass nach den schwebenden Elementen der normale Fluss wiederhergestellt wird. Dazu müssen wir dem übergeordneten div der beiden schwebenden Elemente eine Regel hinzufügen, mit der die beiden darin enthaltenen Absätze schweben können, ohne den Rest der Seite zu beeinflussen.

121212

Dazu müssen wir dem enthaltenen div von "overflow" eine Eigenschaft hinzufügen und den Wert auf "hidden" setzen.

Es ist nicht besonders wichtig zu verstehen, was überläuft oder wo es sich versteckt, solange Sie verstehen, dass die Regel "Überlauf: versteckt" das Verhalten von Floats innerhalb des Div steuert. Jetzt möchte ich niemanden verwirren oder erschrecken, aber diese Technik funktioniert nicht immer in allen Browsern. Es funktioniert hier, aber testen Sie immer im IE für Ihre eigenen Designs. Es gibt eine Reihe anderer bemerkenswerter Techniken, die alle ihre Vorteile haben. Peter-Paul Koch beschreibt eine ähnliche Methode wie die, die ich hier in seinem Artikel Clearing Floats verwende. Steve Smith beschreibt seine Methode "Floating(Fast) Anything" in seinem Beitrag Clearing Floats: The FnE Method. Es ist auch eine etwas fortgeschrittenere Technik, aber Tony Aslett hat eine ziemlich geniale und verschlagene Technik entwickelt, die im Artikel Wie kann man Floats ohne strukturelles Markup löschen? beschrieben wird. Wählen Sie die Methode, die für Sie am besten geeignet ist, und denken Sie daran, Ihre Browser zu testen!

Eine weitere wichtige Sache bei Floats ist, dass Sie immer eine Breite angeben sollten. Ihr CSS wird weiterhin überprüft, wenn Sie dies nicht tun (Sie erhalten eine Warnung), aber es wird empfohlen, und in einigen Browsern werden manchmal unerwartete Ergebnisse erzielt, wenn Sie dies nicht tun.

Da wir möchten, dass unser Layout leicht in der Größe geändert werden kann, werden keine Pixelwerte verwendet, sondern Prozentsätze. Wir können auch jedes Element 50% der Breite einnehmen lassen. Weil wir ihm so viel Platz eingeräumt haben, wurde der Abonnement-Absatz nach links verschoben. Wir können es wieder rechts halten, indem wir text-align: right angeben.

Styling der Absätze

Bevor ich ein Hintergrundbild hinzufüge, möchte ich die Schriftarten so gestalten, dass ich sehen kann, mit wie viel Platz ich umgehen muss.

Schriftgrößen mit ems

Wir möchten unsere Webseite so zugänglich und flexibel wie möglich gestalten, um ein möglichst großes Publikum zu erreichen, oder? Dazu gehört, dass Leser die Größe von Text auf eine komfortable Größe ändern können. Jetzt behandeln verschiedene Browser die Größenänderung auf unterschiedliche Weise, aber wie üblich ist der Problembrowser IE / Win. Wenn Ihre Textgröße in Internet Explorer in Pixel festgelegt ist, können Sie die Größe nicht ändern, sodass Ihr Reader an der von Ihnen angegebenen Schriftgröße festhält. Das ist nicht sehr schön, besonders für Leser mit schlechter Sicht. Um dieses Problem zu beheben, müssen wir eine andere Einheit verwenden.

Ems sind eine relative Größeneinheit - dies bedeutet die Breite des "m" in der angegebenen Schriftgröße. Die von Browsern festgelegte Standardgröße ist 16px, sodass 1em einer Schriftgröße von 16px entspricht.

Um unsere Webseite vollständig skalierbar zu machen, können wir alle unsere Schriftgrößen in ems konvertieren. Eine einfache Möglichkeit, dies zu tun, ist die Webanwendung Em Calculator (funktioniert am besten in FireFox).

Um jedoch keine verwirrenden Berechnungen durchzuführen, gibt es einen einfacheren Weg. Da ems relativ zur Standardschriftgröße der Seite sind, unterscheiden sich die em-Werte, wenn wir die Standardschrift ändern.

Um die Mathematik zu vereinfachen, können wir uns eine Basis von 10 geben, indem wir die Standardschriftart auf 10 statt 16 Pixel setzen. Dazu geben wir in unserer CSS-Datei einfach an, dass unsere Schriftarten 62,5% der Standardschriftart betragen sollen.

Jetzt müssen wir nur noch jede Schriftgröße in Pixel durch 10 teilen, und wir haben unseren em-Wert. Zu Beginn beträgt die Schriftgröße für unsere beiden <p>-Tags oben auf der Seite 12px, was 1.2ems entspricht.

Erweiterbare Hintergründe

Als nächstes fügen wir das sich wiederholende Hintergrundbild hinzu, das wir aus unserer PSD herausgeschnitten haben:

Wir müssen den oberen und unteren Rand der Absätze ein wenig auffüllen, damit sich das Bild auf seine volle Höhe ausdehnt. Um die richtigen Werte zu erhalten, müssen wir zu unserer PSD zurückkehren und die Höhe der Leiste mit dem Linealwerkzeug messen: Meine ist 26 Pixel groß. Da unser Text 12 Pixel groß ist, beträgt die Gesamtauffüllung 26-12 oder 14 Pixel. Dies bedeutet, dass wir oben 7 Pixel Polsterung und unten 7 Pixel Polsterung hinzufügen. (Diese Werte sind manchmal um ein oder zwei Pixel versetzt, aber ein guter Anfang. Überprüfen Sie einfach Ihren Browser.)

Wir könnten das div auch dazu bringen, sich auf seine volle Höhe zu dehnen, indem wir eine Höhe von 26px angeben. Sie sollten jedoch immer vermeiden, eine Höhe für Ihre Elemente so weit wie möglich anzugeben, um maximale Flexibilität zu ermöglichen. Wenn Sie Ihr Element auf eine bestimmte Höhe beschränken, lassen Sie keinen größeren Text oder zusätzlichen Inhalt zu.

Probieren Sie es aus, es sieht genauso aus wie unsere PSD. Aber hier wird es schwierig: Versuchen Sie, die Größe des Texts in Ihrem Browser zu ändern. Wenn wir den Text vergrößern, ändern sich die Verhältnisse, wir verlieren unsere untere Polsterung und der Text läuft schließlich über seinen Hintergrund hinaus über. Um eine "unzerstörbarere" Website zu erstellen, muss der Hintergrund gedehnt werden, wenn der Text wächst oder wenn mehr Inhalt hinzugefügt wird, sodass oben und unten immer 7 Pixel Abstand vorhanden sind, unabhängig davon, wie groß der Text ist . Da unser Hintergrundbild nur 26 Pixel groß ist, brauchen wir etwas anderes, um uns weiter auszudehnen. Wir werden im Grunde genommen eine Volltonfarbe hinter das Bild setzen, sodass die Farbe dahinter durchscheint, wenn der Text größer wird und das Bild ihn nicht enthalten kann. Die Farbe am unteren Rand unseres Verlaufs ist #08413c. Fügen wir das also unserem Hintergrund hinzu. Um festzulegen, dass das Bild immer am oberen Rand des Elements haften soll, damit sich die Farbe von unten ausdehnt, fügen wir nach der Bild-URL einen Wert für die Hintergrundposition hinzu.

Versuchen Sie nun, die Größe des Texts zu ändern: Der Hintergrund wächst mit und sieht fast genauso aus, wenn er größer wird. Dies lässt uns auch wissen, dass wir nichts in unserem CSS ändern müssten, wenn wir später eine zweite Zeile mit Inhalten hinzufügen möchten. Die Fähigkeit eines Elements, sich für mehr oder größeren Text zu erweitern, wird bei der Webentwicklung häufig übersehen. Dies führt dazu, dass Seiten beim Ändern der Textgröße zusammenbrechen. Schauen Sie sich einfach die Homepage meiner Universität an, versuchen Sie, den Text einen Schritt größer zu machen, und Sie verlieren einen Navigationslink!

Eine weitere Sache, wir müssen nur diesen 1px-Rand am unteren Rand unserer Leiste hinzufügen:

Hier sind wir also bisher:

131313

Schritt 12 - Header

Da wir den Text unseres Blognamens und unserer Beschreibung weiß machen, fügen wir zuerst den Hintergrund hinzu. Wir werden dieses Bild wahrscheinlich nicht brauchen, um es auszudehnen, aber für alle Fälle wiederholen wir den gleichen Vorgang des Hinzufügens einer Hintergrundfarbe und -position:

Lassen Sie uns nun unsere Schriftstile ausführen:

Okay, jetzt müssen wir unsere Beschreibung neben unserem Logo veröffentlichen. Dies kann durch Floating erreicht werden, aber ich habe es versucht und Probleme beim Festlegen von Breiten festgestellt. Mit der absoluten Positionierung konnte ich ein viel besseres Ergebnis erzielen. Außerdem habe ich die Möglichkeit, ein wichtiges Konzept zu erklären!

Absolute Positionierung

Wenn wir ein Element außerhalb des "Flusses" der Seite positionieren möchten, ohne Floats zu verwenden, können wir die absolute Positionierung verwenden, mit der Sie ein Element unabhängig von anderen Elementen innerhalb des Divs an einer beliebigen Stelle innerhalb eines Div positionieren können. Dies bedeutet, dass, wenn Sie eine Position von beispielsweise left:10px angeben, das Element 10px links von der Seite des div positioniert wird, unabhängig davon, ob sich dort ein anderes Element befindet oder nicht. Um ein Element absolut zu positionieren, müssen wir zunächst die Position des übergeordneten Divs auf relativ setzen, da das absolut positionierte Element relativ zum übergeordneten Div positioniert ist.

Jetzt können wir die absolute Position unserer Beschreibung festlegen. Wenn position: absolute verwendet wird, können wir die Position in Bezug auf links, rechts, oben und unten mithilfe von Pixeln, Prozentsätzen oder Ems angeben. Erstens, oben - die Beschreibung befindet sich fast genau 50% vom oberen Rand der Kopfzeile entfernt. Geben Sie also Folgendes an:

Jetzt müssen wir es nach rechts schieben, indem wir ihm einen Wert für links geben: Wenn wir Pixel verwenden, nähert sich der Text bei einer Größenänderung dem h1 und überlappt ihn schließlich. Verschrotten Sie also diese Methode. Wir haben das gleiche Problem mit Prozentsätzen, nur nicht so dramatisch. Am besten positionieren Sie es mit ems, die, wie Sie sich erinnern, mit zunehmender Textgröße größer werden, sodass der Abstand zwischen h1 und Beschreibung erhalten bleibt, wenn die Größe des Texts geändert wird.

Und es sieht toll aus!

141414

Schritt 13 - Navigation

Bereinigen Sie dieses Navigationsmenü, entfernen Sie den Listenstil und die Textdekoration und fügen Sie Schriftstile hinzu.

Damit unsere Links horizontal ausgerichtet werden, setzen wir die Listenelemente so, dass sie schweben: links, sodass jedes Listenelement an dem links davon "klebt".

Wir haben natürlich das gleiche Problem wie bei allen Floats, aber alles, was wir tun müssen, ist einen Überlauf hinzuzufügen: versteckt im Navigationsbereich, und wir können loslegen.

Jedes Listenelement ist etwa 45 Pixel voneinander entfernt. Fügen Sie also rechts von jedem Element 45 Pixel Polster hinzu.

Hinweis: Alle diese Füllwerte können in Kurzform geschrieben werden als:

Die Abkürzung für das Auffüllen (und die Ränder) sind die Werte für oben rechts unten unten links in einer Zeile. Ich finde, der beste Weg, sich an die Reihenfolge zu erinnern, besteht darin, an die Kompassrichtungen zu denken: n-e-s-w.

Fügen Sie als Nächstes das Hintergrundbild hinzu und verwenden Sie dabei dieselbe Technik wie zuvor, um sicherzustellen, dass sich unser Hintergrund bei der Größenänderung von Text ausdehnt:

Um den Auffüllwert zu ermitteln, messen Sie erneut die Höhe des Balkens (meiner ist 40 Pixel) und subtrahieren Sie die Größe des Texts (18 Pixel), um den Gesamtauffüllwert zu erhalten, und dividieren Sie durch zwei:40-18 = 22 Pixel.

Um unser Navigationsmenü ein wenig nach unten zu verschieben, fügen Sie am einfachsten einen Rand am unteren Rand des Branding-Bereichs hinzu.

Und schließlich der 1px-Rand oben in der Leiste:

Das war's! Wir sind mit dem Header fertig! Lassen Sie uns mal sehen:

151515

Schritt 14 - Inhalt

Als erstes müssen wir hier die beiden Spalten erstellen - eine für die Beiträge und eine für die Seitenleiste. Inzwischen sollte dies einfach sein: Schweben Sie einfach eins nach links, eins nach rechts.

Und ... nichts ist passiert. Zumindest sieht es so aus, scrollen Sie nach unten und Sie werden feststellen, dass Ihre Seitenleiste rechts unter den Pfosten klebt. Bevor die Seitenleiste neben die Pfosten verschoben werden kann, müssen Sie angeben, wie viel Platz die Pfosten div einnehmen kann, und auch eine Breite für die Seitenleiste angeben. Auch hier werden Prozentsätze anstelle von Pixeln verwendet, sodass die Seitenleiste bei einer Größenänderung des Texts an der Seite bleibt.

Und wir müssen den Überlauf unseres enthaltenen div verbergen:

161616

Großartig, wir haben ein schönes kleines zweispaltiges Layout!

Schritt 15 - Styling der Beiträge

Da wir einen CSS-Reset verwendet haben, hat der Inhalt unseres Post-Abschnitts überhaupt keinen Stil, und wir müssen die mühsame Aufgabe durchlaufen, jedes einzelne mögliche Element zu stylen. Mein Workflow ist dafür etwas anders als auf dem Rest der Seite, da ich mich nicht wirklich auf das Photoshop-Dokument beziehe. Ich finde, dass das Stylen von Schriftarten in Photoshop ein echtes Problem ist, daher überspringe ich es normalerweise. Um die Stile für meine Beiträge zu erhalten, durchlaufe ich einen Prozess von Versuch und Irrtum. Normalerweise beginne ich mit Einstellungen, die den Standardbrowser-Stilen ähneln, die Sie unter diesem Link finden, und passe sie nach meinen Wünschen an. Ich werde den gesamten Prozess nicht Schritt für Schritt durchlaufen, aber das habe ich mir am Ende ausgedacht:

Welches sollte ungefähr so aussehen:

171717

Jetzt gibt es oben in unserem Post-Bereich ungefähr 35 Pixel, aber unsere h2-Tags haben oben bereits einen Rand von 7 Pixel. Fügen Sie also oben in den Posts einen Rand von 28 Pixel hinzu.

Und das war's auch schon für den Beitragsbereich. Auf zur Seitenleiste!

Schritt 16 - Sidebar

Lassen Sie uns zunächst diese Hintergrundfarbe hinzufügen:

Und korrigieren Sie die Schriftstile:

Wir müssen auch die Seitenleiste um 25 Pixel nach unten drücken (35 Pixel - der 10-Pixel-Rand oben auf den h3-Tags). Dieses Mal können wir jedoch die Eigenschaft "Rand oben" nicht verwenden, da dadurch die gesamte Seitenleiste einschließlich des Hintergrunds auf der Seite nach unten verschoben wird. Wir möchten, dass der Hintergrund direkt unter der Navigationsleiste beginnt, der Inhalt jedoch 35 Pixel darunter. Daher müssen wir die Eigenschaft padding-top verwenden. Wir brauchen auch eine Auffüllung links, rechts und unten, und 25px klingt ungefähr rechts, damit wir alles in einem Auffüllwert deklarieren können:

Aber oh nein! Unsere Seitenleiste ist nicht mehr an der Seite! Dies liegt daran, dass wir die Seiten der Seitenleiste mit Polstern versehen haben. Wenn Sie einem Element eine Auffüllung hinzufügen, vergrößern Sie es tatsächlich. Wir haben gerade unsere Seitenleiste um 50 Pixel breiter gemacht, sodass sich die Breite der schwebenden Elemente jetzt auf mehr als 100% summiert. Um dies zu beheben, konvertieren wir zunächst unsere 25 Pixel Polsterung in einen Prozentsatz von 900 Pixel. Es klappt auf ungefähr 2,7%, aber ich runde auf 3% auf.

Hinweis: Dies ist ein weiterer Kurzwert. Dies bedeutet, dass sowohl oben als auch unten 25 Pixel und links und rechts jeweils 3% betragen.

Unsere Seitenleiste ist jetzt 33+ 6% breit, also immer noch zu breit, aber jetzt müssen wir nur noch die 6% von den ursprünglichen 33% abziehen.

Ich dachte, dass die Seitenleiste an dieser Stelle etwas breit aussieht, also habe ich sie auf 25% reduziert.

Es ist wichtig, sich daran zu erinnern, dass alle Werte für Auffüllen, Rand und sogar Rand zur Breite des Elements beitragen. Sie müssen daher die Eigenschaft width anpassen, um dies jedes Mal zu kompensieren, wenn Sie Abstand, Rand oder Rand hinzufügen.

Und los geht's, egal wie groß Sie den Text machen, unsere Seitenleiste bleibt an der Seite und das Verhältnis zwischen dem Postbereich und der Seitenleiste bleibt gleich. Es ist eine übermäßig einfache Seitenleiste, aber ich werde mich nicht mehr darum kümmern, sie zu stylen, nur weil sie für die Ziele dieses Tutorials nicht wirklich wichtig ist.

181818

Schritt 17 - Footer

Lassen Sie uns zuerst die Schrift etwas größer machen und einige Stile hinzufügen:

Als nächstes können wir in unserem Hintergrundbild hinzufügen:

Und da wir möchten, dass es sich dehnen kann, können wir die Farbe am unteren Rand des Verlaufs wie zuvor zu unserem Hintergrundwert hinzufügen:

Fügen Sie als Nächstes den 2px-Rand oben hinzu:

Fügen wir oben und unten einen Rand und etwas Polsterung hinzu:

Als nächstes erstellen wir drei Spalten durch Floating. Das Schweben von drei Elementen funktioniert fast genauso wie das Schweben von zwei Elementen. Wir werden jede Spalte nach links schweben lassen. Wir müssen die Breiten jedes schwebenden Elements deklarieren und Prozentwerte verwenden, um eine Erweiterung zu ermöglichen.

Denken Sie daran, dass wir den Überlauf im übergeordneten div auf versteckt setzen müssen.

Zu diesem Zeitpunkt entschied ich, dass es tatsächlich besser aussehen würde, wenn die Links und RSS-Divs an erster Stelle stehen würden und die Copyright-Informationen ganz rechts wären. Deshalb habe ich die Reihenfolge der Divs geändert und das Copyright-Div auf float gesetzt: right, und richtete den Text ebenfalls nach rechts aus.

191919

Und da haben wir es, wir sind fertig mit dem Codieren und Stylen unserer Seite!

Schritt 18 - Zugänglichkeitsprüfung

Während des Tutorials habe ich meine Seite in Safari 4 getestet. Da Safari 4 wahrscheinlich der standardkonformste und modernste Browser ist, werden Webseiten am vorhersehbarsten angezeigt. Wenn nur jeder einen standardkonformen Browser verwenden würde ... Leider gibt es immer noch Leute, die veraltete Browser verwenden, und wir müssen uns darauf vorbereiten.

Beginnen wir zunächst mit dem problematischsten Browser: Internet Explorer 6. Ich verwende einen Mac und habe noch keine effektive(kostenlose) Möglichkeit gefunden, meine Webseiten in Internet Explorer zu testen. Wenn jemand, der dies liest, eine magische Technik kennt, lassen Sie es mich bitte wissen. Wie auch immer, Zeit, die alte Familie Dell herauszuholen. Um mehrere Versionen von Internet Explorer gleichzeitig zu installieren, googeln Sie "Multiple IE" und laden Sie die ZIP-Datei herunter.

Überraschenderweise funktioniert es in IE6 einwandfrei! IE7 ist auch okay. Text kann in der Größe geändert werden! Ich habe diese Seite auch in Firefox, Opera und Camino getestet. Ich hatte Probleme bei der Installation von Google Chrome auf dem PC, daher konnte ich Ihnen nicht sagen, ob es funktioniert, aber ich denke, es sollte aufgrund der Einfachheit des Markups und des Stils so sein.

Schlussfolgerung

Das ist es! Hoffentlich haben Sie ein oder zwei Dinge über das Codieren flexibler Websites gelernt. Probieren Sie es in einem beliebigen Browser aus, vergrößern Sie den Text, verkleinern Sie ihn, und unser Layout passt sich problemlos an. Deaktivieren Sie CSS und es macht immer noch Sinn! Ich hoffe, Sie können sehen, wie einfach es ist, Ihre Websites weniger fehlbar zu machen! Diese Seite war sehr einfach, ohne viele komplizierte Herausforderungen. Wenn Ihre Layouts komplizierter werden, ist es etwas schwieriger, die Flexibilität aufrechtzuerhalten.

  • Folgen Sie uns auf Twitter oder abonnieren Sie den Nettuts+ RSS-Feed, um weitere tägliche Tipps und Artikel zur Webentwicklung zu erhalten.
Advertisement
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.