Создание сайтов играючи
Очень часто бывает, делаешь что-то одно, а в итоге получается еще и побочный продукт. Те кто занимается разработкой для веб, знает что значит постоянно создавать одни и те-же макеты страниц. Многие создают свою базу наработок для дальнейшего использования. Но с каждым новым проектом она растет и ориентироваться в ней становится очень сложно. В нашей компании нам такая перспектива, с создание библиотеки сразу не понравилась. И мы начали думать как мы можем оптимизировать свой рабочий процесс.
www.layzilla.com
Первое что мы сделали, изучили текущие наши проекты и выявили основные нужды для создания основы сайта. Это включало в себя пересмотр всевозможных структур страницы, размеров и т.д. Из этого нам удалось придумать конструктор с возможностью самим составлять нужную структуру страницы.
Во-вторых, мы тщательно подошли к вопросу качества кода. Были приложены максимальные усилия для включения всех нужных функций для поддержки на всех современных браузерах. Еще один не маловажный момент это стандарт кода, мы добились того чтобы код проходил валидацию W3C.
В-третьих, использую стандартные библиотеки jquery мы создали генератор с возможностью вольного создания макетов сайта. Нам хотелось создать инструмент который доставлял удовольствие при работе. И мне кажется нам это удалось. Создание макета чем-то напоминает детскую игру с разноцветными квадратиками.
Мне кажется создание макета сайта у нас получилось очень интуитивным. Но хочется показать несколько моментов которые помогут быстрее понять весь процесс.
Если вы видите кнопку обведенную красным, то за ней скрываются какие-то действия над этим блоком. На блоке BODY доступно всего 2 действия: создать новый блок, изменить параметры блока
Выберете пункт "Создание нового блока". Откроется форма с 2 параметрами: название, цвет. Все очень просто. Назовите его например "HEADER", а цвет можете оставить как есть. Цвет служит только для более быстрой идентификации нужного блока при дальнейшей разработке.
Появится прямоугольник, со знакомой уже кнопкой с действиями. Но теперь за этой кнопкой уже скрывается намного больше действий.
Выберете действии "Присоединить блок"(Attach block), и стрелку ↑.
Данное действие переместит блок в верхнюю часть страницы.
Не больший трюк. Созданный блок, пока он еще не присоединен никуда можно перемешать и просто нажав на него и перемещая мышкой.
В качестве тренировки можете создать что-то похожее на картинку ниже.
Вы получите такой HTML/CSS код.
<!doctype html> <html> <head> <title>Put your title here</title> <meta content="text/html; charset=utf-8" /> <link href="style.css" type="text/css" rel="stylesheet" /> </head> <body> <div class="content"> <div class="top_block header"> <div class="content"> </div> </div> <div class="background block_2"> </div> <div class="left_block block_2"> <div class="content"> </div> </div> <div class="background block_3"> </div> <div class="left_block block_3"> <div class="content"> <div class="top_block block_7"> <div class="content"> </div> </div> </div> </div> <div class="background block_5"> </div> <div class="right_block block_5"> <div class="content"> </div> </div> <div class="bottom_block block_4"> <div class="content"> </div> </div> </div> <!-- * Layout generated with http://layzilla.com * Layout generator is free of use. * We appreciate if you leave this comment block in commercial use * of generator. * All comment and ideas can be submitted to us using contacts below. * * site: www.jmholding.com * email: info@jmholding.ru * twitter: @jmholding --!> </body> </html>
/**
* Layout generated with http://layzilla.com
* Layout generator is free of use.
* We appreciate if you leave this comment block in commercial use
* of generator.
* All comment and ideas can be submitted to us using contacts below.
*
* site: www.jmholding.com
* email: info@jmholding.ru
* twitter: @jmholding
*/
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.content {
min-height: 100%;
position: relative;
overflow: auto;
z-index: 0;
}
.background {
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
margin: 0;
padding: 0;
}
.top_block {
width: 100%;
display: block;
}
.bottom_block {
position: absolute;
width: 100%;
display: block;
bottom: 0;
}
.left_block {
display: block;
float: left;
}
.right_block {
display: block;
float: right;
}
.center_block {
display: block;
width: auto;
}
.header {
width: 100%;
height: 70px;
background-color: #9999ff;
}
.background.block_2 {
height: auto !important;
padding-bottom: 0;
left: 0;
width: 247px;
background-color: #999999;
margin-top: 70px;
margin-bottom: 70px;
}
.block_2 {
height: auto;
width: 247px;
padding-bottom: 70px;
}
.background.block_3 {
height: auto !important;
padding-bottom: 0;
left: 0;
width: 311px;
background-color: #999966;
margin-top: 70px;
margin-bottom: 70px;
margin-left: 247px;
}
.block_3 {
height: auto;
width: 311px;
padding-bottom: 70px;
}
.block_7 {
width: 100%;
height: 122px;
background-color: #9933ff;
}
.background.block_5 {
height: auto !important;
padding-bottom: 0;
right: 0;
width: 229px;
background-color: #996699;
margin-top: 70px;
margin-bottom: 70px;
}
.block_5 {
height: auto;
width: 229px;
padding-bottom: 70px;
}
.block_4 {
width: 100%;
height: 70px;
background-color: #9966ff;
}
В следующей версии генератора мы планируем реализовать поддержку HTML5. Будем рады вашим комментариям и замечаниям. Надеюсь мы облегчим вам разработку и наш продукт вам будет удобен.
www.layzilla.com
