Делаем веб-магазин

Александр Федулов

Спецвыпуск: Хакер, номер #050, стр. 050-078-6

Никому не нужно объяснять, что перцы (овощи) должны быть похожи на перцы, а не на что-нибудь еще. На полученной от заказчика фотографии они были плоскими, совершенно не перечного цвета и не отбрасывали теней (совсем как вампиры). Проведя элементарную цветокоррекцию, получаем здоровый красный цвет и заодно убеждаемся, что ножка у одного из овощей все-таки в оригинале была задумана зеленой. Осветлив верхнюю и затемнив нижнюю часть перцев, а также добавив тени в соответствии с воображаемым направлением падающего света, получаем в результате объем и естественность форм перцев. Выше посмотри на то, что было, а что получилось - в исходнике.

Очевидно, что верх страницы приобрел стройность форм и целостность композиции, поэтому изображения щитов помещаем в подвале. Дабы не увлекаться излишним декором и не плодить совершенно бесполезные в утилитарном плане делали, разместим на щитах выходные данные. Щит побольше, с контактной информацией клиента, упраздняет раздел "Контакты": адрес и телефон фирмы размещены на каждой странице сайта. Щит поменьше - копирайты разработчиков :), ну и самый маленький будет нести на себе три пиктограммы: ссылки на главную страницу, страницу для поиска товаров-рекламоносителей и на e-mail конторы. Для установления пущей исторической справедливости большой щит сделаем стилизованным под биг-борд с "ногами" в виде буквы "w", что дополнительно подчеркнет связь дизайна сайта с конкретной фирмой, являющейся распространителем рекламы: бигборды с такой оригинальной конструкцией вы не найдете больше нигде. Перевернутый градиент уравновесит верх и низ страницы и поможет создать иллюзию глубины пространства в подвале. Довершаем это дело фрагментами наиболее понравившихся букв "а-ля Тодд Пергассон", проведем небрежную белую линию, символизирующую горизонт и поставим рядом с маленьким щитом маленький силуэт счастливой влюбленной парочки, чтобы придать живость сухой абстрактной композиции подвала.

Верстка макета

После определения порядка расположения основных элементов сайта и разработки дизайна наступит время заняться нарезкой картинок и версткой макета. Как и что нарезается, ты можешь посмотреть в исходнике, а мы же сосредоточимся на макете.

Будем исходить из того, что страницы должны отображаться без горизонтальной прокрутки при разрешениях от 1024х768 точек и выше, а в идеале - от 800х600. Ты спросишь, а почему "в идеале"? Дело в том, что одной из важных составляющих сайта является Flash-карта города, ширина которой после экспериментов с масштабированием была установлена в размере 640 пикселей, то есть средняя колонка не может быть меньше этого значения, если в странице покажется карта. А нужно еще разместить левую и правые колонки... Путем несложных подсчетов (и экспериментов по сравнению с шириной правой колонки) получаем для левой колонки ширину 188 пикселей, для правой - 144. Эти значения отличаются, потому что в левой колонке у нас в форме поиска будут находиться выпадающие списки, для которых меньшей ширины колонки может не хватить, ну а в левой ожидаются только блоки с текстовыми ссылками. Наша цель - создать шаблон "резиновой" страницы, которая будет масштабироваться и заполнять собой мониторы с самыми распространенными разрешениями при отсутствии на странице громоздких элементов (в нашем случае - карты города).