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

Материал из Insales Wiki
Версия от 12:02, 8 января 2010; Vb (обсуждение | вклад) (Чем определяется внешний вид страниц магазина)

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

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

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

Код страницы формируется на сервере путём объединения нескольких элементов:

Вид страницы формируется браузером посетителя:

Более подробно процесс формирования кода страницы описан здесь

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

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

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

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

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

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

Переменные данные на странице

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

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

Файлы стилей

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

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

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

Файлы Javascript

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Создание и настройка меню описаны здесь.

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

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

Настройка темы

Входит в возможности некоторых тем. Позволяет настраивать цвет фона, цвет и гарнитуру шрифтов.

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

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

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

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

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

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

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

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

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

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

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

Изменяя файлы стилей CSS можно:

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

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

Использование JavaScript

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

  • требуется изменять вид страницы магазина в зависимости от действий посетителя или по истечении какого-то времени без повторного её приёма с сервера;
  • требуется изменять данные на сервере в зависимости от действий посетителя или по истечении какого-то времени.

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