Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. UX

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

by
Read Time:5 minsLanguages:

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 с лошадьми.

Начнем со следующего кода:

Таблицы это непросто, но, к счастью, Dreamweaver позволяет их стоить с устрашающей простотой.

Как вы видите, мы создали отличную структуру, которая гарантирует, что все будет смотреться одинаково на любом экране в мире.

Подсказка: Как и с любым адаптивным дизайном, я советую вам тестировать ваш дизайн на как можно большем количестве устройств. Прежде чем продолжить, сходите в ближайший магазин электроники и скупите там все смартфоны, какие только найдете.

Spacers

Помните тот spacer.gif, который мы создали ранее? Время его доработать. Поместите spacer в каждую клетку, кроме самой маленькой в центре.

Теперь измените их размер, чтобы клетки таблицы встали на свои места.

Счетчик

С готовым дизайном и разметкой HTML мы готовы вставить сам счетчик. Добавьте следующий код в ту самую пустую клетку в центре:

Заключение

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

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

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.