Russian (Pусский) translation by Alex Bogdanov (you can also view the original English article)
Если и есть способ показать, насколько ваш сайт успешен, то это только возможность показать вашим пользователям, сколько таких же как они, было до них. Давайте украсим веб-страницу счетчиком!
В первую очередь нам нужно разработать дизайн нашего счетчика, так что откройте Photoshop, Sketch или CorelDraw,и начнем работать.
Напишите 1234567890 на холсте, используя инструмент "текст". Вы можете теперь украсить это число любым приглянувшимся вам способом. Попробуйте использовать градиенты, шрифт Times New Roman, поиграйте со скосами.
Примечание: вам следует использовать только цвета, применимые в вебе.
Отлично, идем дальше. На текущий момент у вас уже должно быть что-то наподобие этого:
Если вам не удалось создать что-то настолько прекрасное, как это, глотните абсента и попробуйте еще раз.
Режем
Используйте инструмент "раскройка" (Если вы используете Paint, то этот инструмент будет называться "нож") и разместите множество прямоугольников по всей области холста.
Затем вам понадобится прозрачный gif файл размером 1x1. Загрузите какой-нибудь из интернета и сохраните его как "spacer.gif", имя действительно важно. Должно получиться примерно следующее, если вы откроете этот файл в Photoshop:
HTML
Создайте новый HTML документ.
Мы должны разместить наш счетчик внизу нашей страницы, там, где веб-мастера обычно размещают gif с лошадьми.
Начнем со следующего кода:
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>
|
Таблицы это непросто, но, к счастью, Dreamweaver позволяет их стоить с устрашающей простотой.
Как вы видите, мы создали отличную структуру, которая гарантирует, что все будет смотреться одинаково на любом экране в мире.
Подсказка: Как и с любым адаптивным дизайном, я советую вам тестировать ваш дизайн на как можно большем количестве устройств. Прежде чем продолжить, сходите в ближайший магазин электроники и скупите там все смартфоны, какие только найдете.
Spacers
Помните тот spacer.gif, который мы создали ранее? Время его доработать. Поместите spacer в каждую клетку, кроме самой маленькой в центре.
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>
|
Теперь измените их размер, чтобы клетки таблицы встали на свои места.
Счетчик
С готовым дизайном и разметкой HTML мы готовы вставить сам счетчик. Добавьте следующий код в ту самую пустую клетку в центре:
1 |
<td>
|
2 |
<counter theme="awesome" action="count"></counter> |
3 |
</td>
|
Заключение
Взгляните на свои труды, мы это сделали!
Потрясающе полезные ресурсы
- Top eighty-three hit counter designs of 2014
- Pro UX Secrets of Hit Counters on Smashing Magazine
- Hit Counter Sass Mixin by Angela Merkel
- How to count to five by Oscar the Grouch
- Facebook seeks to acquire hit counter startups on CNN
