Верстка витрины для virtuemart

Здравствуйте, уважаемые читатели блога TakProstoTak.ru. В прошлый раз я описывал на страницах блога как сделать HTML страницу.  Сегодня речь пойдет о верстке макета витрины для интернет магазина virtuemart. Вы наверняка слышали о бесплатном компоненте Virtuemart для CMS Joomla. Компонент virtuemart позволяет делать очень функциональные интернет-магазины. Админка virtuemart проста в освоении и вы при желании легко сможете освоить этот бесплатный компонент.

Верстка витрины интернет магазина virtuemart своими силами

Дело в том, что мне поступил очередной заказ на верстку витрины для virtuemart, и я решил поделиться с вами техникой верстки таких макетов, для магазинов на связке Joomla + virtuemart такая структура макета типична. Витрина virtuemart представляет собой n-строк с товарами по 3 товара в строке. Вот так она выглядит в PSD макете (фото уменьшено раза в 2):

так должна выглядеть верстка витрины virtuemart

так должна выглядеть верстка витрины virtuemart

Как видно, во круг фотографии товара virtuemart присутствует серая рамка со скругленными углами, ниже название товара virtuemart, характеристика (сила дуг) и производитель, еще ниже в одну строчку цена и кнопка "добавить в корзину" с количеством добавляемого товара virtuemart. Как видно из макета мы имеем 6 однотипных блоков, предлагаю сверстать для начала 1 блок

один товар virtuemart

один товар virtuemart

Прежде всего, нужно решить вопрос как обеспечить рамку вокруг изображения продукта? Путей тут несколько, поскольку ширина и высота изображения, скорее всего, меняться не будут для разных товаров из соображения симметрии витрины virtuemart, то мы пойдем по простому пути, а зачем усложнять?  Вырежем рамку из PSD макета, кстати, делать это будем в программе adobe photoshop. Чтобы это сделать нужно, найти слой с изображением продукта virtuemart и убедиться, что рамка находиться в этом слое.  В верхнем левом углу экрана есть опция "Автовыбор"

автовыбор

автовыбор

Если опция активна, то кликая мышкой на любой элемент макета мы тем самым активируем слой, к которому относиться этот элемент. Активируем слой с элементом рисунка арбалета, далее слева в инструментах выбираем инструмент "Прямоугольная область"

инструмент "прямоугольная область"

и выделяем рисунок с рамкой, копируем в буфер обмена (ctrl+C), создаем новый документ (ctrl+N), обратите внимание фотошоп автоматически предлагает нужные размеры нового макета в зависимости от того что лежит в буфере обмена.

создание нового документа

создание нового документа

вставляем изображение из буфера обмена (ctrl+v) в только что созданый документ. Вырезаем рисунок арбалета, оставляем только рамку, то, что осталось от рисунка, заливаем белым цветом, отключаем фоновый слой и сохраняем ("сохранить для web и других устройств" - alt+shift+ctrl+s) подложку в формате png. Тем же самым путем сохраняем фон для кнопки "в корзину" и рисунок арбалета.  В итоге мы должны получить 2 фоновых рисунка (подложка продукта и подложка кнопки купить) и рисунок продукта.

фоновый рисунок для витрины фон кнопки добавления в корзину
изображение продукта

Подготовительный этап в фотошоп закончен, теперь можно подумать о том, как лучше сформировать требуемую структуру товара virtuemart. Первое что приходит на ум, и пожалуй, самое лучшее это расположить элементы в таблице следующим образом

рисунок продукта
описание продукта
цена кнопка купить

В HTML коде это будет выглядеть так:

<table class="product_browse" cellpadding="0" cellspacing="0" border="1">
    	<tr>
        	<td colspan="2"></td>
        </tr>
        <tr>
        	<td colspan="2" class="descript"></td>
        </tr>
        <tr>
        	<td class="descript"></td><td></td>
        </tr>
    </table>

у таблицы временно стоит свойство border="1", чтобы видеть границы ячеек, когда окончательно сверстаем область для продукта, рамку нужно будет убрать (border="0"). Давайте наполним таблицу. В ячейку, в которой должен быть рисунок нужно поместить конструкцию вида <div class="img"><img src="img/img-product.jpg" /></div>. Контейнер с классом img содержит изображение продукта и в качестве фонового рисунка у него стоит изображение рамки. Ячейке с описание продукта и ячейке с ценой задайте класс descript, чтобы можно было для этих ячеек независимо задавать отступы слева. Так же для всей таблицы задан класс  "product_browse" чтобы была возможность менять положение таблицы с товаром на странице.

Измерим ширину контейнера  товара virtuemart, воспользовавшись инструментом "линейка"

инструмент линейка

инструмент линейка

в верху в консоли отображаются измеренные значения ширины и высоты

ширина и высота

ширина и высота

это значение ширины используем в CSS свойствах таблицы (.product_browse). Окончательно сверстанная страница выглядит так


<html>
<head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Витрина</title>
</head>
    <body>
    <style type="text/css">
		#wrapper{ margin:100px auto; width:785px;}
		.product_browse .img{ background: url(img/fon-img.png) no-repeat center top; width:218px; height:156px; padding-top:5px; margin-bottom:5px;}
		.product_browse .img img{ margin:auto; display:block; border:none;}
		.product_browse .add_to_cart{ background:url(img/button-add-to-cart.png) no-repeat right top; width:80px; height:25px;}
		.product_browse  {font: 14px/18px Arial, Helvetica, sans-serif; color: #4d4c4c; float:left; margin:0 38px 40px 0; width:220px; height:250px;}
		.product_browse a, .product_browse a:visited{ font: 15px/18px Arial, Helvetica, sans-serif; color: #000; text-decoration:underline;}
		.product_browse a:hover { font-style:italic;}
		.product_browse span.price{ color: #a50101;}
		.product_browse input{ float:right; width:22px; border:1px solid #b5b5b5;}
		.product_browse div.add_to_cart{ color:#fff; padding:2px 10px 0 0; margin-right:5px; float:right; cursor:pointer;}
		.product_browse td.descript{ padding:0 10px 0 10px;}

	</style>
    <div id="wrapper">
    <table class="product_browse" cellpadding="0" cellspacing="0" border="0">
    	<tr>
        	<td colspan="2"><div class="img"><img src="img/img-product.jpg" /></div></td>
        </tr>
        <tr>
        	<td colspan="2" class="descript"><a href="#">Арбалет тарантул</a><br/>Сила дуг: 43кг.<br/>Производитель: Man Kung</td>
        </tr>
        <tr>
        	<td class="descript"><span class="price">12 200 руб.</span></td><td align="right"><div class="add_to_cart">в корзину</div><input type="text"/></td>
        </tr>
    </table>
</div>
    </body>
</html>

Вот так выглядит верстка без основных CSS свойств, задан лишь фоновый рисунок для кнопки "в корзину"

верстка без стилей

верстка без стилей

Обсудим ключевые моменты CSS свойств. В 9-ой строке для основного контейнера с идентификатором #wrapper задается отступ сверху в 100px, выравнивание по центру и ширина 785px, чтобы витрина располагалась по центру.
В 10-ой строке для обертки изображения товара virtuemart (.product_browse .img) задается фоновый рисунок без повторений с выравниванием поверху, скругленная рамка, задаем отступ сверху, чтобы рисунок не наползал на рамку, ширина и высота контейнера (обязательно).
В 11-ой строке определяем свойства для изображения товара virtuemart (.product_browse .img img) - выравниваем по центру (margin:auto;), преобразуем рисунок в блочный элемент, чтобы можно было центрировать и убираем рамку вокруг рисунка.
В 12-ой строке задаем фоновый рисунок для кнопки (.product_browse .add_to_cart), кнопка представляет и себя блок div с текстом "в корзину", выравниваем фон по правому верхнему краю и отключаем повторение, задаем размеры блока кнопки, размеры определяются размерами фонового рисунка.
В 13-ой строке задаются свойства для всего контейнера с товаром (.product_browse) - параметры шрифта (размер/межстрочный интервал, основной шрифт, резервные шрифты, цвет). Делаем блоки с классом (.product_browse) плавающими (свойство float:left), чтобы обеспечить их расположение в ряд по 3 товара virtuemart, можно и больше это зависит от ширины таблицы с товарами и от ширины контейнера, в котором расположены все товары (#wrapper), в нашем случае ширина основного контейнера позволяет вместить только три таблицы с товарами, что нам и нужно. Далее задаем отступы справа и снизу, а также ширину и высоту блока с товаром.
В 14-ой строке определяем свойства ссылок (.product_browse a, .product_browse a:visited), у нас название товара virtuemart выводится ссылкой, также определяем параметры шрифта и задаем подчеркивание. Кстати параметры шрифта можно посмотреть в фотошопе. Сверху можно увидеть размер шрифта для выделенного участка текста

размерs шрифта и цвет

размерs шрифта и цвет

а также цвет текста

цвет шрифта

цвет шрифта

и кнопка для перехода на панельку с более детальной информацией

дополнительные параметры шрифта

дополнительные параметры шрифта

В 15-ой строке определяется стиль ссылки при наведении (используется псевдоселектор :hover).
В 16-ой строке определяется стиль текста для цены (.product_browse span.price)
В 17-ой строке задаем свойства для поля ввода количества товаров добавляемых в корзину (.product_browse input), определяем ширину и цвет рамки, делаем это плое плавающим вправо. Нам нужно добиться, чтобы сначала стояло поле ввода кол-ва, а за ним шла кнопка добавления в корзину.
В 18-ой строке определяем свойства текста в кнопке добавления в корзину задаем свойство плавучести по правому краю.
В 19-ой строке для ячеек (.product_browse td.descript) задаем отступы.

А вот и резурьтат с одним товаром

сверстанный макет

сверстанный макет virtuemart

Видно что шрифты отличаются от того что задано в макете, дело в том что в фотошопе задано для текста свойство сглаживания. В CSS же это свойство поддерживается в версии CSS3, но пока еще не все браузеры поддерживают сглаживание шрифтов, а те которые поддерживают, делают это по своему, короче говоря, выглядеть будет везде по разному, поэтому предлагаю не использовать сглаживание, а поиграться с параметрами шрифтов, можно попробовать сделать название товара virtuemart, например, жирным или изменить размер, ну и так далее на ваше усмотрение.
Архив с иходными материалами и результатами можно скачать по ссылке.
На этом все, дорогие друзья, мы успешно сверстали макет витрины под virtuemart. До новых встреч, надеюсь статья вам поможет разобраться в вопросах верстки витрины для virtuemart. В следующих статьях будет рассмотрен вопрос как прикрутить сверстаный макет витрины virtuemart к самому компоненту, т.е. как получить готовую витрину virtuemart.

Продолжение статьи...

На закуску видео про прыжки в воду.



Похожие статьи:
↑ Наверх ↑
  • Комментарии

Прокомментировать

Подписаться, не комментируя

Видеоуроки для вебмастеров
  • Рубрики
  • Случайные

Идеальный хостинг