Качественная вёрстка, jquery
Сайт фиксированный.
Требуется качественная css вёрстка макетов.
1. Главная страница - http://gyazo.com/6fdd20e3270bc47897db3aa5c2573bb4
= Подложкой я называю то, что идёт над фоном сайта, и на котором весь контент. Отметил на скрине цифрой 1 http://gyazo.com/5c3a1442723071fbbb0647f94b297802
Фон под подложкой на всех страницах будет одинаковый.
На главной есть три баннера, вокруг них есть свечения - их нужно вырезать с прозрачным фоном, так как они есть только на главной странице на этих трёх основных баннерах (обвел синим), на других страницах их нет - http://gyazo.com/1febc21bedf557aea914065603661667
Из основных моментов на главной странице есть блок товара - с "ползунком" - http://gyazo.com/20b771fe2986205d4b20a9686b65b7ad
Нужно реализовать перемотку картинок так же, как здесь: http://www.originpc.com/shop/pc/config-step1.asp
2. Второй сложный момент страница "Конструктор конфигураций" -
Она состоит из шагов.
2.1. http://gyazo.com/79c3a8b9e992010dfe5d37b229d7932f
Это первый шаг, здесь слева выбирается фирма. При выборе фирмы - снизу появляется определённый блок, который соответствует выбранной фирме: http://gyazo.com/e9c25cdedabd15f27e4eeb9bfb017dfb
Все варианты рейтинга уже вбиты в каждую из фирм. Кнопка - дальше везде нужна своя (для программиста).
Справа интерактивный блок-компьютер. У него так же свечения голубоватые и т.п. - это всё поверх фона (и на других страницах этого нет). На 1 этапе ползунки внутри него, кнопка и т.п. - картинкой обычной. Кроме текста и названия - Ваш компьютер, это текстом.
2.2 Этап второй, когда нажали кнопку Далее -
Попадаем на страницу http://gyazo.com/31b7701923665b477ac892df5b252613
Тут слева будет список доступного железа (разные варинты процессоров, памяти и т.п.) - переключение между вкладками вида железа - HDD, Процессор и т.п. без обновления страницы, только внутри этого квадрата - я обозначил голубым цветом. Там будут чекеры выбора.
Справа -> этот блок-компьютер с ползунками. Изначально все ползунки имеют красный индикатор и слева во всех типах выбраны самые первые варинаты конфигураций.
Смысл следующий - человек выбирает слева в списке себе железо сам, то справа в компьютере этом меняется цена снизу, а так же двигаются сами эти ползунки. Их цвета понятны? - красный, самые первый вариант железа. Оранжевый - средний, зеленый хороший, синий- самый лучший. Тут надо учесть - что ползунки, если вы заметили при разном цвете неоновых полосок (чуть принимают отблеск этого цвета). По-этому тут надо делать так:
Я веду ползунок - если довел до середины серой отметки и отпустил. Он вернулся обратно, если довел до отметки - то сразу ползунок сам туда прыгает на новую омтетку и цвет меняется и неоновой лампы и ползунок новый. Я часто видел такое решение.
Количество делений задается так же - от количества вариантов конфигураций железа - то есть если процессоров 5, то делений тоже 5 (делится неоновая полоска на 5 делений).
2 ВАРИАНТ! Человек может сам двигать ползунки, тогда снизу меняется цена в правом блоке и слева выставляются конфигурации железа автоматически во всех вкладках.
------
Доп. страницы
Страница каталога.
Текстовая страница - О магазине.
Текстовая - Контакты.
Текстовая - Доставка и оплата.