Создание своего дизайна

Материал из Insales Wiki
Версия от 14:31, 4 января 2010; Vb (обсуждение | вклад) (Изменение темы)

Перейти к: навигация, поиск

Внимание! Эта часть документации находится в разработке. Она неполна, не проверена и может содержать ошибки.


Чем определяется внешний вид страниц магазина

Каждую страницу интернет-магазина веб-браузер посетителя отображает в результате интерпретации её исходного текста, который принят с сервера. Текст страницы формируется на сервере путём объединения нескольких элементов:

Вид страницы формируется браузером посетителя из текста страницы, принятого с сервера. Следует иметь ввиду, что разные браузеры и даже разные версии одного браузера могут несколько различно формировать изображение страницы из одного и того же текста страницы.

Шаблон страницы

Шаблон страницы - это текст на языке HTML, являющийся основой, каркасом для формирования вида страницы. Шаблон содержит кроме HTML-текста ссылки на файлы изображений и вставки на языке "Liquid", позволяющие включать в текст страницы изменяемые данные из базы данных магазина.

Процесс внесения изменений в шаблоны описан здесь.

Справочник по HTML: http://www.htmlbook.ru/content/

Изображения на странице

Изображения - это файлы, содержащие картинки в различных форматах (.png, .jpg, .gif), которые показываются веб-браузером в местах страницы, определённых в тексте шаблона страницы.

Процесс загрузки новых файлов изображений описан здесь.

Полезные сведения об изображениях на веб-страницах приведены на http://webimg.ru/

Данные на странице

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

Справочник по языку Liquid находится здесь: http://liquid.rubyforge.org/

Файлы стилей

Файлы стилей передаются сервером в составе текста страницы и применяются веб-браузером посетителя к сформированному содержанию страницы в соответствии с правилами языка CSS.

Процесс внесения изменений в файлы стилей (.css) описан здесь.

Справочник по CSS: http://www.htmlbook.ru/content/

Файлы Javascript

Файлы Javascript передаются сервером в составе текста страницы и применяются веб-браузером посетителя для изменения вида загруженной страницы в зависимости от действий посетителя - движений "мышкой" и нажатий на кнопки.

Процесс внесения изменений в файлы скриптов (.js) описан здесь.

Справочник по Javascript находится здесь: http://javascript.ru/doctree/

Как можно изменять дизайн магазина

Прежде чем перейти к работе над собственным дизайном, надо ответить на вопрос:

Зачем изменять дизайн магазина?

Изменение дизайна магазина может преследовать различные цели:

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

Смена стандартной темы

С помощью смены стандартной темы можно подобрать вид и набор функций магазина, наиболее близкий к тому, что Вы хотите получить в итоге. Это может заметно упростить дальнейшую модификацию магазина. Тему следует сменить, если:

  • другая тема имеет набор возможностей ближе к требующемуся Вам, чем текущая тема;
  • другая тема имеет визуальное оформление ближе к требующемуся Вам, чем текущая тема.

Как осуществить смену темы магазина и возможности стандартных тем описаны здесь

Добавление и изменение страниц

Добавлять новые страницы бывает нужно для:

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

Этот список, разумеется, не исчерпывающий.

Изменение навигации

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

Изменение темы

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

Замена изображений

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

Как загрузить новые файлы изображений, написано здесь.

Изменение шаблонов

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

Процесс внесения изменений в шаблоны описан здесь.

Использование вставок на Liquid

Использование вставок на Liquid решает следующие задачи:

  • ...
  • ...
  • ...

О применении языка "Liquid" можно прочитать здесь. Доступные объекты в шаблонах стандартного набора тем перечислены здесь.

Изменение стилей

Изменения стили можно добиться:

  • ...
  • ...
  • ...

Процесс внесения изменений в файлы стилей (.css) описан здесь.

Использование Java-script

Использование Java-script обычно требуется, если:

  • ...
  • ...
  • ...

Процесс внесения изменений в файлы скриптов (.js) описан здесь.