() translation by (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:
1 |
<table width="500" border="1" cellspacing="5" cellpadding="5"> |
2 |
<tr>
|
3 |
<td> </td> |
4 |
<td> </td> |
5 |
<td> </td> |
6 |
</tr>
|
7 |
<tr>
|
8 |
<td> </td> |
9 |
<td> </td> |
10 |
<td> </td> |
11 |
</tr>
|
12 |
<tr>
|
13 |
<td> </td> |
14 |
<td> </td> |
15 |
<td> </td> |
16 |
</tr>
|
17 |
<tr>
|
18 |
<td> </td> |
19 |
<td> </td> |
20 |
<td> </td> |
21 |
</tr>
|
22 |
<tr>
|
23 |
<td> </td> |
24 |
<td> </td> |
25 |
<td> </td> |
26 |
</tr>
|
27 |
<tr>
|
28 |
<td> </td> |
29 |
<td> </td> |
30 |
<td> </td> |
31 |
</tr>
|
32 |
<tr>
|
33 |
<td> </td> |
34 |
<td> </td> |
35 |
<td> </td> |
36 |
</tr>
|
37 |
<tr>
|
38 |
<td> </td> |
39 |
<td> </td> |
40 |
<td> </td> |
41 |
</tr>
|
42 |
<tr>
|
43 |
<td> </td> |
44 |
<td><table width="100% |
45 |
" border="1" cellspacing="5" cellpadding="5"> |
46 |
<tr>
|
47 |
<td> </td> |
48 |
<td> </td> |
49 |
<td> </td> |
50 |
</tr>
|
51 |
<tr>
|
52 |
<td> </td> |
53 |
<td><table width="100%" border="1" cellspacing="0" cellpadding="0"> |
54 |
<tr>
|
55 |
<td> </td> |
56 |
<td> </td> |
57 |
<td> </td> |
58 |
</tr>
|
59 |
<tr>
|
60 |
<td> </td> |
61 |
<td> </td> |
62 |
<td> </td> |
63 |
</tr>
|
64 |
<tr>
|
65 |
<td class="underpants"> </td> |
66 |
<td> </td> |
67 |
<td> </td> |
68 |
</tr>
|
69 |
</table></td>
|
70 |
<td> </td> |
71 |
|
72 |
</tr>
|
73 |
<tr>
|
74 |
<td> </td> |
75 |
<td> </td> |
76 |
<td> </td> |
77 |
</tr>
|
78 |
</table></td>
|
79 |
<td> </td> |
80 |
</tr>
|
81 |
</table>
|
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.
1 |
<table width="500" border="1" cellspacing="5" cellpadding="5"> |
2 |
<tr>
|
3 |
<td><img src="spacer.gif" alt="spacer" size="small" color="none" height="tall" /></td> |
4 |
<td><img src="spacer.gif" alt="spacer" size="small" color="none" height="tall" /></td> |
5 |
<td><img src="spacer.gif" alt="spacer" size="small" color="none" height="tall" /></td> |
6 |
</tr>
|
7 |
<tr>
|
8 |
<td><img src="spacer.gif" alt="spacer" size="small" color="none" height="tall" /></td> |
9 |
<td><img src="spacer.gif" alt="spacer" size="small" color="none" height="tall" /></td> |
10 |
<td><img src="spacer.gif" alt="spacer" size="small" color="none" height="tall" /></td> |
11 |
</tr>
|
12 |
<tr>
|
13 |
<td><img src="spacer.gif" alt="spacer" size="small" color="none" height="tall" /></td> |
14 |
<td><img src="spacer.gif" alt="spacer" size="small" color="none" height="tall" /></td> |
15 |
<td><img src="spacer.gif" alt="spacer" size="small" color="none" height="tall" /></td> |
16 |
</tr>
|
17 |
<tr>
|
18 |
<td><img src="spacer.gif" alt="spacer" size="small" color="none" height="tall" /></td> |
19 |
<td><img src="spacer.gif" alt="spacer" size="small" color="none" height="tall" /></td> |
20 |
<td><img src="spacer.gif" alt="spacer" size="small" color="none" height="tall" /></td> |
21 |
</tr>
|
22 |
<tr>
|
23 |
<td><img src="spacer.gif" alt="spacer" size="small" color="none" height="tall" /></td> |
24 |
<td><img src="spacer.gif" alt="spacer" size="small" color="none" height="tall" /></td> |
25 |
<td><img src="spacer.gif" alt="spacer" size="small" color="none" height="tall" /></td> |
26 |
</tr>
|
27 |
<tr>
|
28 |
<td><img src="spacer.gif" alt="spacer" size="small" color="none" height="tall" /></td> |
29 |
<td><img src="spacer.gif" alt="spacer" size="small" color="none" height="tall" /></td> |
30 |
<td><img src="spacer.gif" alt="spacer" size="small" color="none" height="tall" /></td> |
31 |
</tr>
|
32 |
<tr>
|
33 |
<td><img src="spacer.gif" alt="spacer" size="small" color="none" height="tall" /></td> |
34 |
<td><img src="spacer.gif" alt="spacer" size="small" color="none" height="tall" /></td> |
35 |
<td><img src="spacer.gif" alt="spacer" size="small" color="none" height="tall" /></td> |
36 |
</tr>
|
37 |
<tr>
|
38 |
<td><img src="spacer.gif" alt="spacer" size="small" color="none" height="tall" /></td> |
39 |
<td><img src="spacer.gif" alt="spacer" size="small" color="none" height="tall" /></td> |
40 |
<td><img src="spacer.gif" alt="spacer" size="small" color="none" height="tall" /></td> |
41 |
</tr>
|
42 |
<tr>
|
43 |
<td><img src="spacer.gif" alt="spacer" size="small" color="none" height="tall" /></td> |
44 |
<td><table width="100% |
45 |
" border="1" cellspacing="5" cellpadding="5"> |
46 |
<tr>
|
47 |
<td><img src="spacer.gif" alt="spacer" size="small" color="none" height="tall" /></td> |
48 |
<td><img src="spacer.gif" alt="spacer" size="small" color="none" height="tall" /></td> |
49 |
<td><img src="spacer.gif" alt="spacer" size="small" color="none" height="tall" /></td> |
50 |
</tr>
|
51 |
<tr>
|
52 |
<td><img src="spacer.gif" alt="spacer" size="small" color="none" height="tall" /></td> |
53 |
<td><table width="100%" border="1" cellspacing="0" cellpadding="0"> |
54 |
<tr>
|
55 |
<td><img src="spacer.gif" alt="spacer" size="small" color="none" height="tall" /></td> |
56 |
<td><img src="spacer.gif" alt="spacer" size="small" color="none" height="tall" /></td> |
57 |
<td><img src="spacer.gif" alt="spacer" size="small" color="none" height="tall" /></td> |
58 |
</tr>
|
59 |
<tr>
|
60 |
<td><img src="spacer.gif" alt="jeez - you really noticed this?!" size="small" color="none" height="tall" /></td> |
61 |
<td> </td> |
62 |
<td><img src="spacer.gif" alt="spacer" size="small" color="none" height="tall" /></td> |
63 |
</tr>
|
64 |
<tr>
|
65 |
<td><img src="spacer.gif" alt="spacer" size="small" color="none" height="tall" /></td> |
66 |
<td><img src="spacer.gif" alt="spacer" size="small" color="none" height="tall" /></td> |
67 |
<td><img src="spacer.gif" alt="spacer" size="small" color="none" height="tall" /></td> |
68 |
</tr>
|
69 |
</table></td>
|
70 |
<td><img src="spacer.gif" alt="spacer" size="small" color="none" height="tall" /></td> |
71 |
|
72 |
</tr>
|
73 |
<tr>
|
74 |
<td><img src="spacer.gif" alt="spacer" size="small" color="none" height="tall" /></td> |
75 |
<td><img src="spacer.gif" alt="spacer" size="small" color="none" height="tall" /></td> |
76 |
<td><img src="spacer.gif" alt="spacer" size="small" color="none" height="tall" /></td> |
77 |
</tr>
|
78 |
</table></td>
|
79 |
<td><img src="spacer.gif" alt="spacer" size="small" color="none" height="tall" /></td> |
80 |
</tr>
|
81 |
</table>
|
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:
1 |
<td>
|
2 |
<counter theme="awesome" action="count"></counter> |
3 |
</td>
|
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
- Top dreiundachtzig Zählerdesigns von 2014
- Pro UX Secrets von Hit Counters in Smashing Magazine
- Hit Counter Sass Mixin von Angela Merkel
- Wie man bis fünf zählt von Oscar the Grouch
- Facebook versucht, Hit-Counter-Startups auf CNN (faltendem neuronalen Netzwerk) zu erwerben
