Heute erstellen wir eine einfache Webseite mit einem erstaunlichen und kostenlosen Tool: Cu3er.
Cu3er ist ein wirklich netter 3D-Bildschieber mit verrückten visuellen Übergängen und vielen Anpassungsoptionen. Obwohl es mit Flash und JavaScript erstellt wurde, müssen Sie nicht wirklich etwas davon wissen, um es verwenden zu können.
In diesem Artikel werden wir die Seite erstellen und die Diashow starten. Nächstes Mal werden wir zurückkehren und sehen, wie wir einige der vielen Funktionen und Variablen des Cu3er anpassen.
Was wir bauen
Um zu sehen, wie einfach es ist, Cu3er in ein Design zu integrieren, erstellen wir eine einfache Webseite mit Kopf- und Fußzeile, Absatzkopie und Navigationsbereich.
Bevor wir beginnen, sollten Sie die Demo auschecken und die Quelldateien herunterladen.
Hinweis: In meinen eigenen Tests funktioniert cu3er in Safari und Firefox hervorragend, hat jedoch einige Probleme mit dem IE (Überraschung). Aus diesem Grund sowie wegen des kleinen Teils von CSS3, das wir verwenden werden, sollten Sie dies unbedingt tun Demo in Firefox oder Safari anzeigen.
Um die Dinge interessant zu halten, werden wir auch ein wenig CSS3 verwenden und lernen, wie man eine "sticky footer" einrichtet. das bleibt am unteren Rand der Seite verankert. Lass uns anfangen!
Schritt 1: Schnappen Sie sich Cu3er
Als erstes sollten Sie auf der Cu3er-Website vorbeischauen und auf den Download-Button klicken. Wenn Sie die ZIP-Datei öffnen, sollten Sie die folgenden Dateien sehen:
Als Erstes sollten Sie den gesamten Ordner kopieren und an einem sicheren Ort ablegen, sodass Sie immer die ursprünglichen Versionen einer oder aller Dateien wiederherstellen können.
Sobald Sie das getan haben, öffnen Sie sich demo.htm in Ihrer bevorzugten IDE oder im Texteditor.
Schritt 2: Passen Sie die Demo-Seite an
Wenn Sie die Demo-Seite öffnen, werden Sie feststellen, dass sie ziemlich unkompliziert ist und bereits ein zentriertes div mit einer funktionierenden Version von cu3er enthält. Ich sagte dir, das wäre einfach!
Wir müssen nur Inhalt hinzufügen und diese Seite neu gestalten, und wir sind fertig. Um diesen Vorgang zu beginnen, ersetzen Sie die Kommentare für Schritt 1, Schritt 2 usw. in der Kopf Teil des Dokuments und fügen Sie etwas beschreibender hinzu. Löschen Sie außerdem das Inline-Styling und fügen Sie einen Link zu einem externen Stylesheet ein. Sie sollten etwas wie das Folgende haben.
Gehen wir diese Codeabschnitte einzeln durch. Als Erstes habe ich einen einfachen Rand und einen Padding-Reset hinzugefügt, nur um sicherzustellen, dass verschiedene Browser-Standardeinstellungen unser Layout nicht vermasseln. Der nächste ist ein Trick, den ich von Chris Coyier bei CSS-Tricks für das Löschen von Floats gelernt habe (also schreien Sie ihn an, wenn Sie nicht denken, dass es semantisch ist). Wir werden ein paar Dinge in dieses Design einfließen lassen, und jetzt, da wir dieses CSS eingerichtet haben, können wir einfach ein .clearDiv Klasse, um sicherzustellen, dass der Inhalt, der auf diesen Abschnitt folgt, an den gewünschten Ort zurückgesetzt wird.
Als nächstes habe ich ein paar Textstile wie Schriftfamilie und Schriftgewicht zugewiesen. Ich habe auch den Hintergrund auf ein dunkles Grau gesetzt und die Kopfgrafik eingefügt. Stellen Sie sicher, dass Sie das Header-Slice so einstellen, dass es wiederholt wird, sodass ein Balken angezeigt wird, der sich über die gesamte Seite erstreckt. Schließlich habe ich die Höhe auf 100% festgelegt und sichergestellt, dass diese Stile sowohl für die HTML- als auch für die Body-Teile gelten. Das hat mit dem klebrigen Footer-Trick zu tun, den wir später einrichten werden. Stellen Sie zunächst sicher, dass diese Stile vorhanden sind.
Ihre Datei sollte jetzt gut aussehen und ungefähr wie das Bild unten aussehen.
Schritt 5: Gestalten Sie den Seitenumbruch und die Kopfzeile
Als nächstes fügen Sie Ihrem CSS den folgenden Text hinzu:
Hier haben wir den Seitenumbruch auf 850px (ein wenig unorthodox, aber es schien einfach richtig) und unseren Vorsprung auf Auto eingestellt. Dies zentriert all unsere Inhalte gut im Browserfenster.
Als Nächstes habe ich den Text auf Weiß gesetzt, den Text nach links verschoben, von der Oberseite abgesetzt und eine Schriftfamilie und -größe zugewiesen. Dies sollte den? Design Shack? Text schön in Ihrer Vorschau.
Schritt 6: Positionieren Sie die Diashow
Bevor wir die Navigation in die Kopfzeile einfügen, müssen wir die Diashow aus dem Weg räumen. Platzieren Sie dazu zuerst die clearDiv-Klasse, über die wir zuvor gesprochen haben, nach dem Header und vor der Diashow in Ihrem HTML-Code.
Nachdem wir den Float aus der Kopfzeile gelöscht haben, können wir in unser CSS ein paar Styles für die Slideshow hinzufügen.
Hier haben wir den Großteil des Stylings dem Wrapper um die Diashow hinzugefügt. So können wir das behalten Cu3er-Container div bei 600px (der Breite der Diashow), wobei eine Schattengrafik vorhanden ist, die über diese Grenze hinausgeht.
Sie können entweder Ihren eigenen Schatten in Photoshop erstellen oder einfach meinen eigenen aus den Quelldateien ziehen.
Jetzt sollte Ihre Diashow perfekt auf einer schönen Schattengrafik positioniert sein, um eine Art schwebende Illusion zu erzeugen.
Schritt 6: Fügen Sie die Navigation hinzu
Da die Diashow nun nicht mehr zur Verfügung steht, können wir sie im Navigationsbereich hinzufügen. Wir behalten das ziemlich einfach und verwenden nur eine ungeordnete Liste von Links. Wie die Kopfzeile verwendet die Navigation einen Float. Platzieren Sie den Navigations-HTML-Code hinter der Kopfzeile und vor dem clearDiv.
Jetzt brauchen wir ein großes Stück CSS, um alles, was mit der Navigation zu tun hat, zu gestalten. Wir müssen das Navigationsdivision als Ganzes, die ungeordnete Liste, Listenelemente, Listenelementverknüpfungen und Hover-Effekte für Listenelementverknüpfungen behandeln.
Alles hier ist ziemlich unkompliziert. Die Navigation wird nach rechts verschoben (dadurch wird sie auf die rechte Seite der Seite gesetzt und die Elemente werden in eine Zeile gesetzt), auf Weiß gesetzt, positioniert und in Großbuchstaben umgewandelt. Wir haben für den Listenstil "none" festgelegt, um die Aufzählungszeichen aufzuheben und alle Textverzierungen für Links außer auf hover zu entfernen, wo wir eine Unterstreichung angewendet haben.
Damit ist unsere Navigation beendet. Jetzt bleibt nur noch etwas überflüssiger Text und die Fußzeile, und wir sind fertig!
Schritt 7: Fügen Sie den Text unter der Diashow hinzu
Um das Design etwas abzurunden, fügen wir eine Überschrift und einen Absatz unter der Diashow hinzu. Wir brauchen nur ein paar Zeilen HTML:
Dann werden wir die Tags h1 und Absatz einzeln formatieren. Hinweis Ich habe die Letterpress-Technik verwendet, die wir im Artikel zu Google Fonts gelernt haben. Dabei wird ein CSS3-Textschatten verwendet, der heller als der Hintergrund ist, um die Illusion eines eingeblendeten Texts zu erzeugen.
Damit sind wir zum größten Teil unseres Designs fertig. Sie können sogar dort aufhören, wenn Sie möchten, aber ich werde weitermachen und Ihnen einen ordentlichen Sticky-Footer-Trick zeigen, den ich in dieser Woche gelernt habe.
Das Bild, das wir unten für die Fußzeile verwenden, ist genau das gleiche wie das Kopfbild. Es wurde nur um 108 Grad gedreht, sodass das Rot oben und das Schwarz unten ist.
Letzter Schritt: Fügen Sie die Fußzeile hinzu
Wenn Sie sich fragen, was eine klebrige Fußzeile ist, bleibt diese einfach am unteren Rand der Seite, wenn Sie die Größe des Fensters ändern. Die Implementierung kann schwierig sein, aber Ryan Fait hat eine ziemlich geniale Methode entwickelt, um dies mit sehr wenig Code zu erreichen. Sehen Sie diese Methode hier.
Die Grundidee ist, dass Sie negative Margen und einen "Push" verwenden können. um die Fußzeile am unteren Rand der Seite zu behalten. Als erstes müssen wir die Divs für Push und Footer in unsere HTML einfügen. Platzieren Sie das Push-Div innerhalb des Seitenumbruchs und das Fußzeilen-Div außerhalb des Seitenumbruchs (damit es bis zu den Rändern reicht).
Gehen Sie jetzt in Ihr CSS und fügen Sie den folgenden Code ein:
Beachten Sie, dass die Höhe des Push auf die genaue Höhe der Fußzeile eingestellt wurde. Das ist sehr wichtig und der Trick wird ohne ihn nicht funktionieren. Ich habe auch das Hintergrundbild eingefügt, das ich oben erwähnt habe (drehen Sie einfach das Kopfbild).
Schließlich fügen wir noch einen CSS-Ausschnitt in unseren Seitenumbruch ein:
Die Höhe und die Mindesthöhe wurden beide auf 100% und der untere Rand auf den negativen Wert der Fußzeilenhöhe (55px) eingestellt. Dadurch wird die Fußzeile am unteren Rand der Seite beibehalten. Das Höhe: Auto! wichtig; Bit ist ein IE-Hack, um herumzukommen min-Höhe Probleme mit diesem Browser.
Endergebnis
Unsere Seite ist komplett! Wenn Sie alles richtig gemacht haben, sollte Ihre Seite wie folgt aussehen. Möglicherweise stellen Sie fest, dass meine Version automatisch gestartet wird, wenn die Seite geladen wird. Machen Sie sich keine Sorgen, wenn Ihre Version es nicht tut. Wir behandeln das im nächsten Artikel.
Jetzt haben Sie eine großartige Seite mit einem atemberaubenden 3D-Flash-Bildschieber, um mit dem Erstellen einer Portfolio-Site zu beginnen.
Fazit
Beachten Sie, dass praktisch die gesamte Arbeit darin bestand, die Website einzurichten.Cu3er lief schon im ersten Schritt gut! Kommen Sie bald wieder zu Teil zwei, wo wir lernen, einige der grundlegenden Funktionen zu optimieren, Text und Links hinzuzufügen und vieles mehr.