Программная верстка

Задача для верстки:

1. Заверстать отдельные слайды таким образом, чтобы их можно было использовать в виде шаблонов с произвольным количеством контента: все уникальные элементы могут быть сгенерированы в произвольном количестве, как на абстрактном сайте. 

2. Структура для каждого слайда: все картинки лежат в одной папке вместе с файлом index.html. Стили и скрипты, а так же подключаемые библиотеки (jquery, jqueryui и т.п.) лежат в отдельной папке. 

3. Весь js код для функционирования слайда находится в одном файле slides.js, лежащем в папке с остальными скриптами.

4. Контент слайда обернут в базовый блок с уникальным идентификатором.

Для инициализации интерактивных элементов в слайде нужно вызвать соответствующую функцию, передав в неё уникальный идентификатор слайда.

Структура контента- templates  - js    -- jquery1.7.2.js    -- jqueryui.js    -- slides.js  - css    -- slides.css (стили для слайдов)  - images - базовая папка с изображениями    -- slideBg.jpeg    -- ...- slides  -- slide1 (это сама папка со слайдом)    --- index.html - html код слайда    --- image1.jpeg - картинка, используемая в слайде  -- slide2    --- index.html    --- img.png

Приблизительная страктура слайда (index.html):

     
• Пункт 1
     
• Пункт 2
   

Приблизительная структура файла slides.css:....mySlideWithSortableList ul{  margin: 20px;}.mySlideWithSortableList ul > li{  font-weight: bold;}...

Приблизительная структура файла slides.js (это общий файл для слайдов):...slideWithSortableList: function(block){  $(block).find('ul.sortable').sortable();  $(block).find('ul > li').click(function(){    ....   })}...

Пример инициализации слайда:slideWithSortableList('#slideNumber123');

Важно: мы точно не знаем, сколько будет контента на каждом слайде. Например, в слайдах с перетаскиванием картинок, этих картинок может быть 3, а может быть 20. Поэтому картинки должны автоматически распределяться по поверхности слайда средствами js.

В сверстанном слайде надо показать разные варианты с произвольным количеством контента.

Пример, как оно должно работать: http://demo.burningheads.ru/wella/v1/