Birthday Sale! Up to 40% off unlimited courses & creative assets Birthday Sale! Save up to 40%!
Advertisement
  1. Web Design
  2. UX
Webdesign

Beeindrucken Sie Ihre Besucher mit einem Web 2.0 Zähler

by
Difficulty:BeginnerLength:ShortLanguages:

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

Wenn es eine Möglichkeit gibt, zu zeigen, wie erfolgreich Ihre Website ist, teilen Sie mit Ihren Besuchern, wie viele andere vor ihnen dort waren. Lassen Sie uns eine Webseite mit einem Zähler ausstatten!

Das erste, was wir tun müssen, ist unseren Zähler zu entwerfen. Öffnen Sie Photoshop, Sketch oder CorelDraw und beginnen Sie ein neues Dokument.

Schreiben Sie 1234567890 mit dem Textwerkzeug / Text Tool auf die Zeichenfläche. Sie können diese Zahlen jetzt mit allen Designeinflüssen gestalten, die Sie für aktuell und trendy halten. Denken Sie über die Verwendung von Gradient , möglicherweise Bold Times New Roman für den Typ nach und schrägen Sie sie dann ab.

Bemerkung: Sie müssen auf jeden Fall nur websichere Farben verwenden, da andere das Web gefährden.

Super, wir machen Fortschritte. Sie müssen jetzt hoffentlich so etwas wie das folgende Design haben:

Wenn Sie nicht so etwas Guter, wie das geschafft haben, nehmen Sie einen Schluck Absinth und versuchen noch einmal.

Slicing/Werkzeug Ausschneiden

Nehmen Sie das Slice-Tool/Ausschneiden (wenn Sie Microsoft Paint verwenden, heißt es Bread Knife Tool) und erstellen Sie eine ganze Reihe von Rechtecken im gesamten Dokument.

Das nächste, was Sie benötigen, ist ein transparentes 1x1px-GIF. Laden Sie es von einem Repository im Internet herunter und speichern Sie es als "spacer.gif". Der Name ist wirklich wichtig. Er muss ungefähr so aussehen, wenn Sie es in Photoshop öffnen:

HTML Dokument

Starten Sie ein neues HTML-Dokument mit dem Code-Editor Ihrer Wahl.

Wir müssen unseren Zähler am Ende der Seite platzieren, mehr oder weniger dort, wo Webmaster normalerweise die animierten Pferde-GIFs platzieren. Wir müssen eine ganze Reihe von Tabellenzellen verwenden, um die richtige Positionierung zu erzielen.

Beginnen Sie mit dem folgenden Markup:

Tische sind schwierig, aber zum Glück macht Dreamweaver das Erstellen einfach.

Wie Sie sehen, haben wir eine perfekte Seitenstruktur erstellt, die garantiert, dass in jedem Browser der Welt alles genau gleich aussieht.

Tipp: Wie bei allen reaktionsschnellen Webdesigns empfehle ich Ihnen, mit so vielen Geräten wie möglich zu testen. Bevor Sie fortfahren, gehen Sie einfach zum nächsten Einkaufszentrum und kaufen Sie alle Handys, die Sie finden können.

Abstandhalter

Erinnern Sie sich an die GIF als Abstandhalter, die wir zuvor erstellt haben? Es ist jetzt die Zeit, sie zu verwenden und unser Layout richtig zu dimensionieren. Platzieren Sie in jeder Zelle einen Abstandshalter, abgesehen von der mittleren Zelle in der kleinsten Tabelle.

Gehen Sie nun durch und ändern Sie die Größe aller Abstandshalter, damit sie die Tabellenzellen in Position bringen. Stellen Sie sich das wie das Formen von Käse vor.

Zählerelement

Nachdem unser Design vollständig und unser HTML-Code fertig ist, müssen wir nur noch das Zählerelement einfügen. Fügen Sie der einzigen leeren Tabellenzelle das folgende Snippet hinzu:

Schlussfolgerung

Schauen Sie sich die Früchte Ihrer Arbeit an, wir sind fertig! Jetzt müssen wir das noch über unser VPN per FTP übertragen, damit das CDN es abholen und von den ISP über HTTP bereitstellen kann. Gott sei Dank können wir alle mit der richtigen Arbeit weitermachen.

Spektakulär von nützlichen Ressourcen

Advertisement
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.