Как оформить прайс-лист на сайте

Коли уж мы заговорили в прошлом выпуске о необходимости размещения цен (и проведённое тестирование подтвердило, что цены лучше ставить, чем не ставить), возникает вопрос – а как, собственно, сделать красивый прайс-лист на сайте???
Как правило, у коммерческой организации есть прайс-лист, подготовленный на компьютере (в формате .doc или .xls), но его необходимо:
- либо заново создать на сайте, с «нуля» (нарисовать табличку и набить в неё все цифры);
- либо перенести прайс-лист с компьютера на сайт (что выглядит менее затратным вариантом).

Давайте поговорим о том, как это делается.
Процесс размещения таблиц, созданных в любом из редакторов (Word, Excel и подобным им), практически одинаков, потому рассмотрим вопрос именно на примере Excel (наиболее часто встречающемся редакторе таблиц). В качестве подопытного «кролика» кровожадно возьмём прайс-лист на создание сайтов компании Мегагрупп.ру.

В Excel прайс выглядит так:

Первым делом нужно скопировать таблицу. Для этого выделяем все нужные ячейки курсором (если в документе за пределами самого прайса нет ячеек, как в файле-примере, то можно выделить сразу весь документ сочетанием клавиш Ctrl+A).

----------
Здесь маленькое отступление. Когда мы указываем сочетание клавиш Ctrl+A, это означает, что на клавиатуре нужно сначала нажать и удерживать клавишу Ctrl, а затем нажать A латинской (не русской) раскладки. Все похожие комбинации клавиш выполняются по аналогии с описанным примером. Возвращаемся к теме.
----------

Затем копируем выделенное (клик правой клавишей мыши и выбор в появившемся меню варианта «Копировать», либо просто сочетание клавиш Ctrl+C). Переходим в систему управления сайтом и открываем редактор той страницы, куда хотим разместить прайс. Для вставки выделенного объекта используем сочетание клавиш Ctrl+V.
Давайте посмотрим, что получилось...

Как видно из скриншота, не все стили таблицы перенеслись в редактор страницы. Более того, если мы сохраним изменения, то на самом сайте увидим следующее:

Таблица выходит за границы области для размещения текста. На некоторых сайтах (в зависимости от вёрстки) может вообще не отображаться та часть, которая находится вне контентной области сайта.
 

Почему так происходит? Где ошибка?!

Дело в том, что в Excel и Word используются свои методы форматирования, далеко не всегда подходящие для веб-страниц. Что касается ширины таблицы и её столбцов – очень часто они бывают строго заданы в исходном документе.

Поэтому после вставки таблицы на сайт мы рекомендуем обнулить её стили. Для этого выделяем таблицу, начиная с конца строки до таблицы и заканчивая началом строки после таблицы (если на странице в принципе располагается только редактируемая таблица – выделяем ее сочетанием клавиш Ctrl+A), и нажимаем на кнопку «Очистить формат» (пятая слева во втором ряду) - см.картинку.

Это уже приведёт к тому, что таблица будет смотреться на сайте аккуратнее.

Для лучшего эффекта (чтобы таблица выровнялась по ширине веб-страницы, а столбцы - по наполнению) следует поставить курсор в любую ячейку таблицы, нажать кнопку «Свойства ячейки» (14 слева в верхнем ряду), проверить, что для ячейки не заданы высота и ширина, а если заданы, удалить значения из этих полей, в нижней части окна выбрать «Обновить все ячейки в таблице» и нажать кнопку «Обновить».

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

Теперь нужно задать границы между ячейками (это облегчит визуальное восприятие). Поставив курсор на любую ячейку таблицы, выходим в её свойства, кликнув на кнопку «Добавление/Изменение таблицы» (12 слева в верхнем ряду).
В параметрах таблицы задаём границу, выбрав в классах «Таблица с рамкой».

Перейдя на вкладку «Дополнительно», можно задать цвет фона таблицы.

Нередко - для лучшего визуального восприятия информации - строки в таблице раскрашивают в разные цвета.

Для назначения цвета определённой строке ставим курсор в любую её ячейку и нажимаем кнопку «Параметры строки» (13 слева в верхнем ряду). В открывшемся окне на вкладке «Дополнительно» задаём нужный цвет.  Если нужно назначить одинаковый цвет нескольким строкам, отстоящим друг от друга на произвольное количество ячеек, копируем получившийся код цвета и используем его при редактировании остальных строк.

Хороший приём для визуализации таблицы - раскрасить строки через одну. Это поможет посетителю сайта с лёгкостью проследить все значения определённой линии по горизонтали и не сбиться.

Для этого при назначении цвета для строки внизу окна с параметрами выбираем «Обновить все чётные строки в таблице» или «Обновить все нечётные строки в таблице» (в зависимости от того, в редакторе какой строки мы находимся в данный момент) и применяем изменения, нажав на кнопку «Обновить».

Строки с заголовками разделов прайса можно выделить отдельным цветом, а их содержимое – жирным шрифтом с размещением текста по центру.

Для задания жирности и центрирования текста используем соответственно кнопки    и  , предварительно выделив текст заголовка курсором. Также можно задать тексту заголовков отдельный (собственный) цвет. Для этого служит  .

Чтобы отчётливее выделить цены (ведь именно их нам нужно показать в прайсе), их шрифт тоже делаем жирным. Здесь уже не нужно работать с каждой ячейкой отдельно – можно выделить курсором весь столбец и нажать на кнопку .
После всех произведенных манипуляций на сайте мы увидим примерно такую таблицу с прайс-листом:

P.S. Иногда таблицы могут содержать очень много столбцов и быть настолько широкими, что и при описанных выше действиях они не поместятся на страницу.

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

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

Инструкцию о том, как можно разместить ссылку на скачивание файла, Вы найдёте здесь.

Взгляните на Ваш прайс-лист глазами потенциального клиента. Получился ли документ достаточно удобным? Легко ли отыскать в нём нужный товар?

Возможно, Вам уже давно хотелось изменить страницу с ценами, сделать её более солидной, привлекающей к себе внимание, но… известная проблема предпринимателя - некогда, нет времени.
Как поступить в данной ситуации?

Обратитесь за помощью к профессионалам!

Компания «Мегагрупп.ру» готова взять на себя часть рутинных работ: наши специалисты с удовольствием подготовят для Вас удобные и презентабельные варианты прайс-листов. Красивое оформление и функциональный интерфейс гарантированно понравятся клиентам.

Что Вы получаете, заказав визуальное оформление в Мегагрупп.ру:

1. Внешний вид прайс-листа на Ваш вкус. В Вашем распоряжении - огромный выбор удобных и красивых шаблонов.

2. Быстрота выполнения – Ваш прайс-лист преображается за несколько дней.

3. Пунктуальность оформления – готовый вариант предоставляется в оговоренные сроки, ни днём позже.

4. Привлекательный вид документа и удобство визуального поиска нужной строки с товаром (или услугой) в таблице будут по достоинству оценены потенциальными заказчиками.

Проявите заботу о клиентах! Пишите прямо сейчас на [email protected] с пометкой в теме «Визуальное оформление прайс-листа», и Ваш прайс-лист станет предметом зависти всех конкурентов! :)