Генератор HTML+CSS шаблонов



На этом уроке мы познакомимся с генератором HTML+CSS шаблонов, расположенным по адресу:http://csstemplater.com/.

О сайте

Генератор HTML+CSS шаблонов (макетов) - это онлайн web 2.0 сервис, который генерирует архив, содержащий 2 файла: HTML и CSS, представляющие из себя базовую разметку (каркас) для вашего будущего сайта.

Сервис может быть полезен вам, если вы владеет некоторыми навыками работы с технологиями HTML и CSS, но создание базовой структуры страницы (состоящей из таких элементов, как "шапка", колонка с контентом, боковые колонки (сайдбары) и "подвал") вызывает у вас определенные трудности.

Во всех макетах используется только блочная (DIV'овая) верстка.

Макеты, предлагаемые Генератором HTML+CSS шаблонов, протестированы и корректно отображаются в следующих современных и популярных браузерах:

  • Chrome
  • Firefox
  • IE 6+
  • Opera
  • Safari
  • - Выбираем Doctype для формирования блока сайта

  • - Здесь автоматически устанавливаются значения, отменяющие отступы по сайту.

  • - Выбираем ширину макета и сразу появятся значения ширины макета.

  • - А если резиновый, необходимо указать минимальную и максимальную ширину макета.

  • - Выбираем сайдбар и его размер.

  • - После выбора сайдбара. сразу в окошке предварительного осмотра вы увидите макет.

  • - Выбираем дополнительные функции для нашего макета. После чего нажимаем на кнопку "Получить ссылку"

  • - Откроется вторая страница с макетом вашего сайта и вверху слева будет кнопка "Скачать zip архив"

  • - Скачиваете архив

  • - В архиве находятся индексная страница макета и основные стили.


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

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

<!-- #header--> <!-- #content--> <!-- #container-->

РЕЗУЛЬТАТ после исправления:

<!--header--> <!--content--> <!--container-->

Далее рассмотрим: Иконка на ваш сайт.