Выбрать страницу

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

Стандартный инструмент Google Chrome для определения цвета элемента

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

  • проинспектируйте элемент которому уже присвоен цвет в стилях CSS
  • щелкните на квадратик цвета
  • после этого наведите курсор на элемент где нужно определить цвет и щелкните по нему

Инструмент для верстки по технологии Perfect Pixel

Иногда нужно сверстать сайт с PSD шаблона, и не просто сверстать а сделать его один в один и для этого как правило приходилось переключаться с одного окна на другое для сравнения. Это не удобно и не гарантирует точного совпадения сайта с макетом, поэтому для того чтобы упростить этот процесс, в Google Chrome есть бесплатное приложения Perfect Pixel.

Perfect

С помощью него вы можете наложить макет на живой сайт отрегулировать прозрачность макета и прописывать стили с точностью до пикселя. Вот так разработчики браузера упростили жизнь простым верстальщикам.

Создание базового HTML шаблона для верстки

Многие новички сталкиваются с такой проблемой что при создании своего шаблона возникали разные проблемы, вроде проблем с кроссбраузерным отображениям и так далее.

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

Поэтому для того чтобы создать свой первый базовый шаблон можно воспользоваться онлайн генераторами на примере вот этого CSStemplater. Это достаточно неплохой генератор HTML CSS шаблона, который создаст вам жесткий или мягкий шаблон также можно настроить ширину макета и расположения сайтбара. В свое время я тоже им пользовался.

Благодарю за внимание.