Advertisement
  1. Web Design
  2. UX

Поразите ваших пользователей с помощью счетчика web 2.0

Scroll to top
Read Time: 5 min

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>&nbsp;</td>
4
    <td>&nbsp;</td>
5
    <td>&nbsp;</td>
6
  </tr>
7
  <tr>
8
    <td>&nbsp;</td>
9
    <td>&nbsp;</td>
10
    <td>&nbsp;</td>
11
  </tr>
12
  <tr>
13
    <td>&nbsp;</td>
14
    <td>&nbsp;</td>
15
    <td>&nbsp;</td>
16
  </tr>
17
  <tr>
18
    <td>&nbsp;</td>
19
    <td>&nbsp;</td>
20
    <td>&nbsp;</td>
21
  </tr>
22
  <tr>
23
    <td>&nbsp;</td>
24
    <td>&nbsp;</td>
25
    <td>&nbsp;</td>
26
  </tr>
27
  <tr>
28
    <td>&nbsp;</td>
29
    <td>&nbsp;</td>
30
    <td>&nbsp;</td>
31
  </tr>
32
  <tr>
33
    <td>&nbsp;</td>
34
    <td>&nbsp;</td>
35
    <td>&nbsp;</td>
36
  </tr>
37
  <tr>
38
    <td>&nbsp;</td>
39
    <td>&nbsp;</td>
40
    <td>&nbsp;</td>
41
  </tr>
42
  <tr>
43
    <td>&nbsp;</td>
44
    <td><table width="100%

45
    " border="1" cellspacing="5" cellpadding="5">
46
      <tr>
47
        <td>&nbsp;</td>
48
        <td>&nbsp;</td>
49
        <td>&nbsp;</td>
50
      </tr>
51
      <tr>
52
        <td>&nbsp;</td>
53
        <td><table width="100%" border="1" cellspacing="0" cellpadding="0">
54
          <tr>
55
            <td>&nbsp;</td>
56
            <td>&nbsp;</td>
57
            <td>&nbsp;</td>
58
          </tr>
59
          <tr>
60
            <td>&nbsp;</td>
61
            <td>&nbsp;</td>
62
            <td>&nbsp;</td>
63
          </tr>
64
          <tr>
65
            <td class="underpants">&nbsp;</td>
66
            <td>&nbsp;</td>
67
            <td>&nbsp;</td>
68
          </tr>
69
        </table></td>
70
        <td>&nbsp;</td>
71
72
      </tr>
73
      <tr>
74
        <td>&nbsp;</td>
75
        <td>&nbsp;</td>
76
        <td>&nbsp;</td>
77
      </tr>
78
    </table></td>
79
    <td>&nbsp;</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>&nbsp;</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>

Заключение

Взгляните на свои труды, мы это сделали!

Потрясающе полезные ресурсы

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
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.