Выпуск №57

Выпуск №57. Как оформить прайс-лист на сайте

Копирование таблиц с ценами из файлов Word, Excel (и других аналогичных редакторов) с последующей обработкой

Коли уж мы заговорили в прошлом выпуске о необходимости размещения цен (и проведённое тестирование подтвердило, что цены лучше ставить, чем не ставить), возникает вопрос – а как, собственно, сделать красивый прайс-лист на сайте.
Как правило, у коммерческой организации есть прайс-лист, подготовленный на компьютере (в формате .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. Внешний вид прайс-листа на Ваш вкус. В Вашем распоряжении — огромный выбор удобных и красивых шаблонов. Посмотреть примеры готовых прайс-листов на их основе можно здесь:

Читайте также  Распознать текст онлайн с картинки, pdf или фото - OCR бесплатно

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

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

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

Источник:
http://blog.megagroup.ru/post/14027421

Как сделать прайс лист онлайн

Вы задумывались как распространить информацию о товарах или услугах? Используйте прайс лист. Он упрощает управление продукцией компании. Недооценка приводит к потере клиентов. Рассмотрим, как сделать прайс лист онлайн.

Что это такое

Прайс лист — цены на товары или услуги. Создается в виде электронного документа. Размещается на сайте, рассылается людям в электронном или печатном виде. Рассмотрим, как создать прайс лист онлайн с картинками.

Особенность

Укажите такую информацию:

  1. Название, данные фирмы;
  2. Логотип;
  3. Дополнительная информация про товары или услуги.

На ПК прайс создается при помощи Excel. Можно использовать онлайн сервисы. Этот метод не требует установки дополнительного софта.

Как это выглядит

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

Как создать прайс лист онлайн с картинками бесплатно

Попробуйте создать прайс лист онлайн с картинками в сервисе Google Таблицы. Это редактор по возможностям напоминающий Excel.
Особенности:

  1. Редактирование онлайн;
  2. Предоставление доступа к редактированию и просмотру неограниченному количеству людей;
  3. Создатель сам определяет права доступа;
  4. Импорт экспорт данных;
  5. Работа с файлами расширения «PDF» и «DOCS»;
  6. Работа в оффлайн режиме;
  7. Добавление правок, комментариев;
  8. Дополнительные инструменты.

Перед тем как создать красивый прайс лист онлайн бесплатно в Google Таблицах, у вас должна быть почта gmail.

Начало работы

Чтобы сделать прайс лист онлайн бесплатно, переходим по адресу: https://www.google.com/intl/ru_ua/sheets/about/ . Нажмите кнопку «Открыть».
Выберите шаблон. Чтобы посмотреть все, кликните ссылку «Галерея».
Например, выберите «Пустой». Чтобы добавить данные кликните ЛКМ по ячейке. В верхнем меню выберите цвет, шрифт. Полностью залейте ее цветом при необходимости.

Внесенная информация сохраняется автоматически.

Теперь вопрос, как сделать прайс лист с картинками онлайн у вас не возникнет.

Открытие общего доступа

Нажмите кнопку «Настройки» справа вверху.
Пропишите имя документа:
Укажите email получателей, нажмите «Доступ по ссылке».

Добавление изображения

Нажмите на ячейке, в которой будет изображение. Перейдите:
Выберите:
Далее:
Меняйте размеры ячейки, отформатируйте изображение.

Как сделать красивый прайс лист онлайн в сервисе КУБ

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

Начало работы

Чтобы создать красивый прайс лист онлайн, переходим по адресу: https://kub-24.ru/ . Нажмите кнопку «Попробовать бесплатно».
Заполните регистрационную форму:
Откройте почтовый ящик, посмотрите пароль.
Произойдет переход в личный кабинет.
Выберите «Товары»-«Склад».
Перейдите:
Заполните недостающие реквизиты. Это зависит от выбранного типа юридического лица.
Откроется окно где пропишите данные из документации.

Добавление товаров

Это делается двумя способами:

Рассмотрим второй вариант
Откроется форма для добавления товара.
После внесения изменений распечатайте результат:

Мы рассмотрели, как сделать прайс лист онлайн. Для создания нет общего алгоритма действий. Учитывайте особенности продукции. Начните создание с бесплатного инструмента Google Таблицы. Работа с ними понятная. Площадку КУБ используйте для ведения делопроизводства и учета компании.

Источник:
http://public-pc.com/kak-sdelat-prajs-list-onlajn/