Qnits

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

Короткая ссылка на эту страницу: http://qnits.ru/s/настройкаДизайна 

23 марта 2015 г.
12:56

	• Учебник HTML, основы - ссылка
	• Учебник CSS для начинающих - ссылка

Доступ:
По ссылке ваш-магазин.ru/manager/page/Template
	• Браузерный интерфейс для редактирования разметки, css, js, картинок
	• И ftp доступ для прямого редактирования


Страницы:

Разметка шаблона (tpl)
	
Принцип прост."tpl файлы" - это HTML код отдельных частей шаблона, с вставками тегов в {фигурных скобках}, на место тегов в отображении подставляется динамическое содержимое.Если нужно вставить НЕпеременную с фигурными скобками (например скрипт, содержащий фигурные скобки), то этот код надо окружить тегами {literal} здесь ваш код {/literal}.Основные теги которые могут вам понадобится 
	• {$название переменной} список переменных
		Подставляет на место тега значение соответствующей переменной шаблона
	• {if (условие)} 111 {/if}
		Выводит 111 если выполняется условие
	• {if (условие)} 111 {else} 222 {/if}
		Выводит 111 если выполняется условие, 222 если оно не выполняется.
		
Вот и вся основная информация по управлению разметкой.
	
	1) Head.tpl - код раздела Head
	
	2) Код раздела Body (index.tpl) - (отвечает за содержимое верхней, боковых, нижней части шаблона):
	
	
	
	3) Каталог (products.tpl) - (отвечает за содержимое категорий товаров: блоки товара, фильтр товара, навигационные кнопки страниц, описание категории):
	
	
	
	4) Главная страница (start_page.tpl) - (отвечает за содержимое главной страницы: блоки товаров, описание главной страницы)
	
	
CSS 
Хранит в себе файлы стилевых описаний HTML тегов (т.е через .css мы редактируем все элементы сайта, меняем их внешний вид -размер, цвет, шрифт и т.д.)
	
Картинки
Папка с графическими элементами дизайна (логотипы, кнопки, и др.)
URL адрес до папки картинок "ваш-сайт.ру/design/images/ваша-картинка"
	
	
Как найти код элемента?

В каждом браузере присутствует функция "Просмотр кода элемента": (*название может отличаться для каждого браузера)
	


Для того, чтобы найти код конкретного элемента - кликаем по эл-ту (прим. картинке), и в открывшемся окне кода у нас будет выделен блок с данным эл-том:
	

• Таким образом мы видим что данное фото находится в .tpl файле в блоке (3) "<div class="photo-big"…>"  и в таблице стилей .css (4) - ".photo-big { width:267…}"

В этих же окошках можем менять, добавлять параметры (изменения происходят в реальном времени).

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

Переходим в менеджер-панель > открываем соответствующий файл > находим нужный блок > меняем параметры > сохраняем:
Qnits

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

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

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