[HTML+CSS] "Нарезать" win-подобную форму

[Lime]

Доброго времени суток!

Встречал не раз подобный функционал и красоту (см. вложение). Теперь когда нужно сделать красивый и удобный веб интерфейс своей программе - решил сделать нечто подобное.

Интересует общий метод "построения" таких элементов (не считая js обработки событий и прочего) как это делается? div-ами или здоровенной табличкой с идеально состыкованными кусками, настройкой фона ячеек/растягиваением изображений? (имеется ввиду всё кроме содержимого "формы").

Предполагаю что создание javascript функционала не будет большой проблемой (нужен минимум: перемещение и сворачивание).

скрин с http://prime.fmsoft.net/demo/ucdemo.dll -> forms (не сочтите за рекламу)

P.S. я вижу это так
P.P.S. Chrome Developer Tools показывает около полумилиарда вложенных div'ов >_<, правда этот продукт имеет много возможностей, а я планирую сделать конкретный и окончательный вид.
Спасибо за отзывы!

[Naive]

Не существует "правильного" метода построения таких окон.
Я лично раньше делал через jQuery - UI, последнее время пишу свои под определенную задачу (проще свои стили делать, чем подпиливать стандартные) на дивах.
Обычная структура: окно, внутри: заголовок, контент, управляющие кнопки, 8 дивов для ресайза.

[Lime]

Даже если не передёргивать в очередной раз стиль Aero (это вроде он) то всёравно я вижу окно именно windows подобным, тоесть заголовок, 3 управляющих, контент, края и углы для ресайза.
Постараюсь воспроизвести и продолжу тему.

Пытаюсь реверсить пример с http://jqueryui.com/demos/dialog/#default там div'ы для ресайзов пустые и те которые по сторонам перекрывают z-index'ом друг друга, а их в свою очередь перекрывают "угловые" div'ы. Потерь в дизайне нет - они невидимые/прозрачные. А я хочу сделать чтобы эти области кроме функционала содержали часть дизайна - фон в виде куска формы из темы aero.
я так понял что достаточно будет расчленить форму на отрезки как тут:

То есть 4 угловых (с закруглениями) и 4ре повторяющихся со строн прямоугольной формы (левый правый нижний и "заголовок") т.к. их можно сделать png картинками с полупрозрачностью.
А управляющие кнопочки можно будет вставить поверх absolut'ным div'ом)
p.s. а там как-то умудряются использовать вот такое
желтый z-index 100,зелёный 101, красный 102
если сделать аналогично с управляющими то получится такое неприятное наложение:

[Lime]

Вспомнил о отрицательных значениях при указании позиций
http://limesoft.narod.ru/mw.htm оцените пожэалуйста, и тут-же вопрос, почему не видно рамки основного? вроде

border:1px solid red;

или все отступы в таком случае нужно дополнительно на 1увеличивать?

[Naive]

все отступы в таком случае нужно дополнительно на 1увеличивать

Тогда придется еще и изменять их размеры, иначе между ними появятся отступы.
Только вот не вижу смысла рубить дизайн: все нормальные браузеры поддерживают css3, для ие до 9ки можно юзануть pie, ибо в данном случае нет смысла делать разработку без js.
У прозрачных дивов также есть дополнительное преимущество — комфортное изменение размеров кликабельной области независимо от форм дизайна. Можно сделать зону попадания курсора от 16px и убрать из этой области тень.
С css3 проще изменять дизайн, да и код грузится намного быстрее, чем тонна картинок, пусть даже и через спрайты.
Для отображения будут служить только 4 блока, чем меньше их кол-во, тем выше шанс, что ничего не поедет

[Lime]

http://limesoft.narod.ru/win7/win7.htm вот что получилось Пока макет.
Ещё немного помухлевать с прозрачностью надо наверно
зы: maximize div просто скрыт.

[Naive]

Красиво получилось=)
п.с. адекватный драг&дроп я делал следующим образом:
1. при зажатии клавиши обнуляется выделение (clearSelection)
2. создается слой во весь экран поверх всего контента, на него вешается 2 события: a. mousemove и b. mouseup
3. return false =)
a. mousemove: двигаем блок
b. mouseup: уничтожаем верхний слой.

[Naive]

дабл пост, пардон.

[Пепел Феникса]

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

[Lime]

Сообщение от Пепел Феникса

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

Понимаю, пока ещё не успел создать соотв. тему в JavaScript разделе.

Сообщение от Naive

Красиво получилось=)
п.с. адекватный драг&дроп я делал следующим образом:
1. при зажатии клавиши обнуляется выделение (clearSelection)
2. создается слой во весь экран поверх всего контента, на него вешается 2 события: a. mousemove и b. mouseup
3. return false =)
a. mousemove: двигаем блок
b. mouseup: уничтожаем верхний слой.

Так и пытался сделать, почему-то не получается, и ещё в ссылке 1го поста если поиграться с той Dem'кой то видно что при быстром перемещении курсор успевает изменится с move на другой (на мнгновение) а потом снова ставится в move.
p.s. мой браузер (Maxthon 3.1.7) помешан на перетаскивании инфы (даже не выделенной мышкой) и в моём примере это очень заметно (на локальной версии даже очистка заголовка не помогла) тогда как в Dem'ке такого нет . В остальных только тестирую.

---
P.S. Получилось адекватное перетаскивание, всо всём бли виноваты обработчики событий

onmouseout

расставленные в неположенных местах Думаю ширину прозрачного div'a нужно делать по ScrollXY.
В состоянии down курсор всёравно превращается в I