Лёгкий и простой CSS шаблон с помощью онлайн генератора

Дата: / Автор поста:


Здравствуйте посетители блога wpsovet.ru. Честно скажу если бы у меня был этот инструмент изначально в закладках, то я бы мобильную версию сделал намного быстрее. Но мы имеем то что имеем, пост посвящен одному классному русскоязычному ресурсу, который совершенно бесплатно может сделать простенький CSS шаблон, или правильнее сказать макет будущего сайта. Почему так, читайте дальше.

Разбираем функционал.

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

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

  1. В этом поле выбираем кодировку документа, я рекомендую пятую версию, чем новее тем лучше.
  2. Это обнуление положения сайта, то есть отступы выведены на ноль, если пользователь хочет, то может сам изменить, там есть еще какие-то положения, но я их не особо понял.
  3. Ширина всей области, вот мой самый любимы пункт, именно он венец творения этого сервиса. Вы наверное знаете про мобильные версии и адаптации, я про это уже каждому уши прожужжал. Предлагается на выбор два варианта «фиксированная» и «резиновая», на что я советую выбрать второй вариант. Задаем максимальное значение и минимальное, что обеспечит корректное отображение на разных разрешениях, в моем случае я задал от 240 до 1000.
  4. Шапка, включаем ее и задаем ей высоту.
  5. Тоже самое только с подвалом.
  6. Еще одна классная штука, возможность добавления сайтбара, причем можно не один, в разных вариациях, этого я больше нигде не видел.
  7. Дополнительные опции, я люблю чтобы подвал всегда примыкал к низу браузера без всяких щелей и тому подобное, поэтому на снимке я выбрал именно его.
  8. Предварительный просмотр.
  9. Если устраивает, то нажимайте «получить ссылку» и вас перебросит на другую страницу.

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

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

Выводы.

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

Замечу что для вордпрессниковв, это будет бесполезно, потому что мы работаем с темами в которых преимущественно php. А вот для разработчиков к примеру лендингов, визиток и одностраничников, может пригодиться.

P.S. Ну как вам это ресурс? И понадобится он вам в последствии?

  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
(1 голос, в среднем: 5 из 5)

С уважением к читателям Лифанов Валентин.

Нажмите на кнопку социальных сетей, вам не сложно, а мне приятно.

А так же советую почитать:

Комментарии к этой супер статье.

  • Александр

    Полезный сервис, надо будет как нибудь попробовать. Хотя я пользуюсь ВебБилдер, но если делаешь несколько страниц для одного сайта, то он для каждой прикручивает таблицу стилей и в итоге приходится все равно вручную править чтобы таблица стилей была одна и для всех страниц.

    • Лифанов Валентин

      Не пробовал, но я раньше еще в 2013 пользовал программу, уже не помню как называется вроде Web Page и что-то еще дальше.

  • Дмитрий

    Как заготовка для одностраничника вполне неплохо. Можно попользовать.

    • Лифанов Валентин

      Мне тоже нравится, да и просто для визитки из нескольких страниц.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!:

Лифанов Валентин. ©2014 Все права защищены. Полное или частичное копирование запрещено.