Web 2.0 генератор шаблонов HTML + CSS
Сегодня двумя веб-разработчиками в лице меня и PHP-мастера Антона a.k.a. molodoy официально дан старт онлайн-сервису под названием “CSS Layout Generator” - генератор шаблонов HTML + CSS.
Собственно, из названия сервиса становится ясно, что он из себя представляет. Данная тулза в несколько кликов мыши выдаст вам архив, содержащий в себе пару файлов: HTML и CSS, которые есть ничто иное, как базовая разметка для будущего сайта.
Сервис может пригодиться тем, кто знает некоторые основы работы с технологиями HTML и CSS, но создание костяка страницы в виде блочной (дивовой) верстки (т.е. структуры, включающей “шапку”, колонку с контентом, боковые колонки (сайдбары) и “подвал”) вызывает у него определенные трудности.
Не стану скрывать, что в первую очередь этот сервис создавался для самого Антона =) Но почему бы не выложить в открытый доступ инструмент, который потенциально может пригодиться кому-то еще? Так и поступили.
Доступны, конечно, не все возможные варианты базовой разметки (к примеру, отсутствуют варианты с резиновой шириной сайдбаров), мы включили, на наш взгляд, наиболее часто используемые. Получилось порядка 3-х десятков вариантов.
В общем, если заинтересовало, пользуйтесь. А если есть пожелания и предложения, то можете воспользоваться оранжевой вкладочкой, прилепленной к левому краю страницы на сайте сервиса.
делал когда-то для себя генератор, но так и забил …
тут можно посмотреть зачатки - http://skomoroh.net/tpl/ - нуна F5 понажимать …
большая часть функционала скрыта что-б не палить, оставил только внешний вид …
если будет кому интересно и полезно - доделаю …
нуна себе тоже блог завести =)
Штука полезная. Удобный выбор заготовок — это очень даже неплохо.
Критика:
— «Прижать футер к низу окна браузера» или «Эмулировать одинаковую высоту колонок». А вместе можно и то и то?
— Доктайп Transitional. Почему бы не Strict?
— В media для дефолтного CSS неплохо бы добавить projection.
— .sl, .sr — не очень понятные имена классов.
— Жёстко…
2
3
4
margin: 0;
padding: 0;
}
— font: 12px/18px. Почему бы не относительные величины?
— Это для чего (height)?
2
3
4
text-decoration: none;
height: 500px;
}
А в Google Chrome все так прыгает, аж прикольно.
Ручками оно надежнее сверстать.
Спасибо! Интересный сервис, главное что структуру создаёт сам … экономит время, остальное можно поправить.
Спасибо за комментарий.
Пока нет, потому что не нашел способ.
Привычка. Strict - для меня слишком жестко. Я всегда использую Transitional.
Честно признаюсь, я в параметре media не разбираюсь.
Предложи более подходящие.
Всегда практикую такой сброс. Не вижу проблем.
Относительные величины обхожу стороной. Ничто не мешаешь из заменить тому, кто будет использовать шаблон.
Это для ссылки “Вытягиваем колонку”, когда включена опция эмуляции высоты. Это моя недоделка. Должно быть по-другому. Исправлю.
Сууупер! Но тоже есть замечания.
1. Почему нет варианта без сайдбара (например для сайта-одностраничника)
2. В фиксированной ширине можно сделать выбор из пары десятков фоновых картинок или если без картинки то выбор цвета (по бокам, там где нет основного шаблона)
И вообще мне кажется, что если будете этим проектом заниматься, то он может перерости в чтото на подобии онлайн конструктора сайта для тех кто на базовом уровне шарит в HTML и CSS (на сайте делаешь шаблон, скачиваешь и доделываешь дальше в каком-нибудь HTML-редакторе - загружаешь на сайт и готово)
Интересно, что там у вас прыгает? У меня в хроме все на месте.
Не отрицаю. Никто ничего не навязывает.
Спасибо за отзыв. Да, именно так и задумывалось =)
Огромное спасибо, то что искал.
Полезный сервис, буду постоянно пользоваться :)
Спасибо ;)
Спасибо.
Потому что в разметке такой страницы нет ничего особенного.
Это лишнее. Существуют сайты с галереями паттернов и предпросмотром.
Вряд ли он превратится в конструктор. Но время покажет.
Круто. Интересно. Поздравляю! Пока не тестировал всерьез, но думаю, буду рекомендовать другим. Не оставляейте проект без присмотра, пускай развивается :) Удачи!
Большое спасибо! Очень приятно ;)
Идея хороша, особенно для ленивых программистов, ненавидящих возиться с версткой.
Я вот всё хочу пересесть на CSS фреймворки, чтобы такие вещи вручную не делать. Те же 960 CSS Framework, Blueprint и т.д. как раз упрощают создание layout-а.
Спасибо за отличный сервис, добавил в закладки, приятно что и русские начали делать сервисы для упрощения жизни вебмастеров.
Думаю, min-width для резины можно и пользователю дать заполнить.
Кстати, почему бы и не встроить текст css-файла прямо в исходники страницы, чтобы через view source смотреть? А то web developer пришлось задействовать…
Благодарю за отзыв!
Рассмотрим это предложение.
Потому что более разумно выносить стили в отдельный файл.
Похоже, что на сайте вертикальной прокрутки нет. Вижу меню “ширина”, “сайдбары”, “дополнительные опции”. Дальше не видно и не скроллится. Это браузер на весь экран, разворачивать надо? ;-)
Спасибо, полезный сервис, опробуем-с. Желаю не останавливаться и продолжать дорабатывать продукт, вон сколько пожеланий в комментах высказали.
Спасибо, что сообщили. Это мой косяк. Исправил.
Спасибо!
А раньше все ручками делал, спасибо за сервис
Отлично!
Могу сказать, что стал пользователем данного сервиса!
Есть несколько замечаний правда, но надо комменты наверное сначало прочитать…
Молодцы, желаю успехов! :)
Спасибо! Если будут предложения, то, пожалуйста, опубликуйте их через форму на сайте сервиса.
Заменил Transitional на Strict.
Занятный сервис, интересно попробовать для ускорения создания шаблонов на каких-нибудь фреймворках )
Я так понял на лету ничего не генерируется, а просто есть заготовки и они идут через выбор параметров?
Сколько времени заняло создание чуда?:)
Задумка интересная (у самого, признаюсь витало что-то подобное в голове). Но! Опиций мало, ни слова про типографику, есть некоторые спорные моменты (для меня). Вообщем, если “улучшить и углУбить” выйдет отличная вещь. Тогда даже денежку не пожалею, чтобы пользоваться ;)
По сути да. Архивы генерируются только при первом обращении к сервису, после того, как мы что-то меняем в шаблонах и сбрасываем кеш (т.е. сгенерированные до этого архивы). А дальше отдаются уже готовые архивы.
Если удалить все промежутки “между делом”, то в день наверное уложились =)
Предлагаю оставить конкретные предложения через соответствующую форму на сайте сервис. Заранее не предугадаешь всего, что хочет пользователь =)
Мне не понятно, каким боком здесь типографика. Расшифруйте =)
На счет денежки - сервис в любом случае будет бесплатным.
в форму, так в форму. сформулирую - напишу.
Клевый сервис, заценил.
Спасибо! Штука оч полезная! Для верстальщика-лентяя, такого как я в сам раз. Не буду расписывать психологические аспекты, почему готовые шаблоны это клево…
Раньше я пользовался буржуйским сервисом с CSS-каркасами (там их штук сорок было). Теперь вот ваш буду пробовать. Мне, как конечному пользователю, важны функциональные отличия сервисов. Вот и будем их вычислять.
От себя могу предложить, что было бы хорошо, если бы на сайте был доступен для скачки архив со всеми возможными на данный вариантами шаблонов (такая фишка у буржуев есть).
Отдельное спс lilumi за наводку ;)
З.Ы. Тонна уважения вам, что сервис фришный и таковым быть планируется!!!
С уважением, Муравей
Хорош сервис, можно использовать для создания части дорвея :D
меня друг попросил узнать, почему его комментарий так и не прошел модерацию? он вчера писал, ник «Муравей».
А еще, помнишь, ты когда-то рассказывал как подключил login-box для Opera и пообещал сделать на эту тему статью. Но статью ты так и не написал, может хотя бы исходник скрипта для оперы скинешь куда-нить?
p.s. Ниче, что я на «ты» обращаюсь?
Потому что я только что добрался до блога. Долго сплю =)
Да-да. Этот пост у меня все еще запланирован, никак не могу собраться про него написать =) Будет скоро.
Самое то.
Благодарю!
Благодарю за такой отзыв!
Попробую угадать. Это был http://blog.html.it/layoutgala/. Если так, тогда хочу сказать, что часть шаблонов взята как раз оттуда, только я их подтесал, т.к. в оригинале есть баг.
Это, пожалуйста, через формочку на сайте, чтобы все пожелания были в одном месте ;)
Да ради бога =)
таки да. и таки там был недочет :)
уже сделано.
Еще раз спасибо за отличную фичу. Пусть проект растет и радует!
Спасибо Вам за проект. Пусть он всегда радует нас.
Вау. Спасибо - на проверку оказалось очень удобно…
Желаю не останавливаться и продолжать доделывать и добавлять новые фишечки. Очень востребованно!
Спасибо. Рад, что понравилось ;)
Спасибо! Сервайс отличный! Буду пользоваться.
Большое спасибо за сервис! Товарищ показал. Теперь пойду переделывать свой сайт на основе вашего шаблона, а то были проблемы с резновостью сайта.
Красиво!
Прикольный сервис! Буду рекомендовать его новичкам!
Отличная штука судя по всему… Тренируясь на сателлитах, пытаюсь делать первые шаги в этой области - думаю пригодится. Спасибо.
Привет всем.
спасибо за сервис. рад что наткнулся на Ваш блог.
Но…есть одно НО :)
Я вот через сайт сделал себе без сайдбаров и прижал футер. в FF3, IE6, Chrome отображается все отлично, футер внизу, все гуд, НО, почему-то в Opera сверху появлсяется небольшой отступ (не измерял, но “на глаз” - 2 пикселя), вследствии чего в опере появляется скролл….которого поидее не должно быть :)
у меня OperaAC 3.6.6 Final (Opera 9.64)
А ну и собственно вопрос: что делать? :)
ради интереса скачал Opera 9.64 с оффа….результат меня поразил. В ней отображается все нормально. Пойду сейчас к создателям AC говорить про оный баг.
После такого необходимо задуматься, стоит ли использовать неофициальные сборки =)
действительно…но в самой последней версии у них этот баг пофиксили.
я пользуюсь ею уже на 2-3 проекте по рекомендации попова, полезная чтучка. Спасибо!
Сила в единстве авторов.
“Потому что более разумно выносить стили в отдельный файл.”
А если опционально? :)
Иногда в процессе доводки бывает удобнее, когда стили тут же расположены, чтобы не прыгать из фала в файл.
После окончания доводки ручками вынести вовне - на раз.
Вещь полезная))но у меня одна проблема возникла-я сгенерировал скелет, но позже ВСЁ что я добавляю(текст и т.д.) вылезает в виде иероглифов нерусских=) хэлп ми я чайник)
Скорее всего, сохраняете страницы не в той кодировке. В meta-теге указана кодировка UTF-8, соответственно и сохранять нужно в ней же.
Странно, но все макеты, если их открывать в dreamweaver - визуально поломаны, футер уходит вправо и вверх.. В браузерах проблем нет, но редактировать не удобно