Различия

Здесь показаны различия между двумя версиями данной страницы.

--- как_работать_с_кодом_шаблона [2015/08/20 13:24]
watch-led.ru@mail.ru создано
+++ как_работать_с_кодом_шаблона [2017/06/17 11:15] (текущий)
watch-led.ru@mail.ru
@@ Строка 1: / Строка 1: @@
-Как работать с кодом шаблона?
+====== Как работать с кодом шаблона? ======
-Короткая ссылка на эту страницу: http://qnits.ru/s/настройкаДизайна
+  * Учебник HTML, основы - [[http://www.webremeslo.ru/html/glava0.html|ссылка]]
+  * Учебник CSS для начинающих - [[http://www.webremeslo.ru/css/glava0.html|ссылка]]
-марта 2015 г.
+===== Доступ к коду шаблона: =====
-:56
-	• Учебник HTML, основы - ссылка
-	• Учебник CSS для начинающих - ссылка
-Доступ:
 По ссылке ваш-магазин.ru/manager/page/Template
-	• Браузерный интерфейс для редактирования разметки, css, js, картинок
+  * Браузерный интерфейс для редактирования разметки, css, js, картинок
-	• И ftp доступ для прямого редактирования
+  * И [[ftp_доступ_к_витрине|ftp доступ]] для прямого редактирования
-Страницы:
+===== Страницы: =====
-Разметка шаблона (tpl)
+**Разметка шаблона (tpl)**
-Принцип прост."tpl файлы" - это HTML код отдельных частей шаблона, с вставками тегов в {фигурных скобках}, на место тегов в отображении подставляется динамическое содержимое.Если нужно вставить НЕпеременную с фигурными скобками (например скрипт, содержащий фигурные скобки), то этот код надо окружить тегами {literal} здесь ваш код {/literal}.Основные теги которые могут вам понадобится
+Принцип прост."tpl файлы" - это HTML код отдельных частей шаблона, с вставками тегов в {фигурных скобках}, на место тегов в отображении подставляется динамическое содержимое. Если нужно вставить НЕпеременную с фигурными скобками (например скрипт, содержащий фигурные скобки), то этот код надо окружить тегами {literal} здесь ваш код {/literal}.
-	• {$название переменной} список переменных
-		Подставляет на место тега значение соответствующей переменной шаблона
+**Основные теги которые могут вам понадобится:**
-	• {if (условие)} 111 {/if}
-		Выводит 111 если выполняется условие
+<WRAP center round box 100%>
-	• {if (условие)} 111 {else} 222 {/if}
+{$название переменной} [[переменные_шаблонов|список переменных]]
-		Выводит 111 если выполняется условие, 222 если оно не выполняется.
+  * Подставляет на место тега значение соответствующей переменной шаблна.
+{if (условие)} 111 {/if}
+  * Выводит 111 если выполняется условие
+{if (условие)} 111 {else} 222 {/if}
+  * Выводит 111 если выполняется условие, 222 если оно не выполняется.
+</WRAP>
 Вот и вся основная информация по управлению разметкой.
+----
+  * Head.tpl - код раздела Head (если есть необходимость, создаёте файл в таком формате и заливаете на фтп);
+  * Код раздела Body (index.tpl) - (отвечает за содержимое верхней, боковых, нижней части шаблона)
+  * Каталог (products.tpl) - (отвечает за содержимое категорий товаров: блоки товара, фильтр товара, навигационные кнопки страниц, описание категории)
+  * Главная страница (start_page.tpl) - (отвечает за содержимое главной страницы: блоки товаров, описание главной страницы)
+**CSS**
+  * Хранит в себе файлы стилевых описаний HTML тегов (т.е через .css мы редактируем все элементы сайта, меняем их внешний вид -размер, цвет, шрифт и т.д.)
+<WRAP center round important 100%>
+Чтобы отредактировать карточку товара или любой другой блок, закрытый для прямого редактирования - смотрим её css стил в permanent.css и переносим этот код, с изменением в style.css
+</WRAP>
-) Head.tpl - код раздела Head
+**Картинки**
+  * Папка с графическими элементами дизайна (логотипы, кнопки, и др.)
-) Код раздела Body (index.tpl) - (отвечает за содержимое верхней, боковых, нижней части шаблона):
+  * URL адрес до папки картинок "ваш-сайт.ру/design/images/ваша-картинка"
+====== Как найти код элемента? ======
-) Каталог (products.tpl) - (отвечает за содержимое категорий товаров: блоки товара, фильтр товара, навигационные кнопки страниц, описание категории):
-) Главная страница (start_page.tpl) - (отвечает за содержимое главной страницы: блоки товаров, описание главной страницы)
-CSS
-Хранит в себе файлы стилевых описаний HTML тегов (т.е через .css мы редактируем все элементы сайта, меняем их внешний вид -размер, цвет, шрифт и т.д.)
-Картинки
-Папка с графическими элементами дизайна (логотипы, кнопки, и др.)
-URL адрес до папки картинок "ваш-сайт.ру/design/images/ваша-картинка"
-Как найти код элемента?
 В каждом браузере присутствует функция "Просмотр кода элемента": (*название может отличаться для каждого браузера)
-Для того, чтобы найти код конкретного элемента - кликаем по эл-ту (прим. картинке), и в открывшемся окне кода у нас будет выделен блок с данным эл-том:
+Для того, чтобы найти код конкретного элемента - кликаем по эл-ту (прим. картинке), и в открывшемся окне кода у нас будет выделен блок с данным эл-том
-• Таким образом мы видим что данное фото находится в .tpl файле в блоке (3) "<div class="photo-big"…>"  и в таблице стилей .css (4) - ".photo-big { width:267…}"
+  * Таким образом мы видим что данное фото находится в .tpl файле в блоке (3) "<div class="photo-big"…>"  и в таблице стилей .css (4) - ".photo-big { width:267…}"
 В этих же окошках можем менять, добавлять параметры (изменения происходят в реальном времени).
@@ Строка 65: / Строка 66: @@
 После того, как подогнали параметры их нужно перенести в соответствующий файл сайта.
 Переходим в менеджер-панель > открываем соответствующий файл > находим нужный блок > меняем параметры > сохраняем:
+{{:pasted:20150820-134448.png}}

Qnits

Инструменты пользователя

Инструменты сайта

Различия

Инструменты страницы