طراحی قالب برای سایت ساز - بخش دوم

مدیریت قالب سایت ساز ضابط با قابلیت های پیشرفته زیر به کمک مدیران و طراحان قالب می رود:

  1. استایل های پر کاربر (طراحان)
  2. تغییر تصاویر استفاده شده در قالب (مدیران)
  3. تغییر رنگ بندی (مدیران)
  4. تغییر چیدمان - دایرکشن (مدیران)

استایل های پر کاربرد
کافی است قسمتی از کد CSS که زیاد استفاده می شود در یکی از کادرها بنویسید. هم کد خلاصه تر می شود و هم با یک تغییر در کل CSS اعمال می شود.
برای مثال در قالب 01 از این استایل های پر کاربرد زیر استفاده کردیم:
درصد 111 برای گرد کردن لبه ها. هر جا در CSS نیاز بود بنویسیم تنها درصد 111 یعنی همان کد سبز رنگ موجود در سمت راست تصویر را نوشتیم.
درصد 113 هم آدرس فولدری است که تصاویر قالب در آن آپلود می شود و طبیعطا در کد سی اس اس زیاد استفاده می شود.
10 فیلد برای تعریف استایل های پرکاربرد تعریف شده است.
استایل های پر کاربرد

تغییر تصاویر
تمام تصاویر قالب را می توانید در قسمت تصاویر دلخواه آپلود نمایید و در هر کجای سی اس اس که به آن احتیاج داشتید فقط درصد فیلد تصویر دلخواه را وارد نمایید. برای مثال ما در فیلد "تصویر دلخواه شماره 34" تصویر هدر را آپلود کردیم و در کد سی اس اس قالب به این صورت آنرا قرار دادیم.
درصد 113 قبلا در بالا توضیح دادیم.
تغییر تصاویر
بیشتر از 14 فیلد برای آپلود تصاویر دلخواه در نظر گرفته شده است که بنظر می رسد کافی باشد. البته در قالب های غیرحرفه ای تصاویر کوچکی مانند آیکون ها هر کدام در یک فایل قرار دارند که این اشتباه است و بهتر است از CSS Image Sprit استفاده شود. یک نمونه Image Sprit در سایت گوگل
Image Sprit Google
معمولا تمام تصاویر کوچک به یک تصویر تبدیل می شوند. البته تصاویر بزرگ بهتر است جداگانه استفاده شوند.
همینطور بسیاری از تصاویر که در قالب های آماده وجود دارند در خود قالب استفاده نشده اند. بلکه در قسمت های داینامیک سیستم استفاده می شوند. مانند تصاویر اسلایدرها (که در مدیریت بنر ها باید اضافه شوند) یا آخرین مطالب که یک تصویر کنار آن ها نمایش داده می شود و در اکثر قالب های آماده برای خالی نبودن قالب درج می شود.

تغییر رنگ بندی
در یک قالب رنگ های زیادی استفاده می شود. یک طراح قالب می تواند رنگ مورد نظر را توسط Color Picker در فیلد های رنگ های پر کاربرد موجود انتخاب نماید و سپس درصد آن را در کد CSS بنویسید. به این صورت هرگاه مدیر سایت یا خود وی این رنگ را تغییر دهد در هر کجای CSS که این رنگ استفاده شده بود تغییر می کند و به این گونه رنگ بندی سایت کاملا قابل تغییر خواهد شد. (آموزش تغییر رنگ بندی برای مدیران)


تغییر چیدمان (دایرکشن)
درصد هایی آماده کردیم که با تغییر دایرکشن توسط مدیر (از تنظیمات اصلی) تغییر می کنند. مثلا اگر در یک قالب چپ چین قسمتی باید دارای float راست باشد ولی در قالب راست چین float باید Left شود فقط کافی است از درصد zRL2 استفاده شود. با استفاده از این کد ها می توانید یک قالب را دو چیدمانه بنویسید که توسط مدیر دایرکشن آن قابل تغییر باشد.
تغییر چیدمان (دایرکشن)

کد Head
کد هایی که در تگ Head قرار می گیرند را در این فیلد کپی می نمایید.

جاواسکریپت
تمام کد های JavaScript که خودتان می نویسید را می توانید در این فیلد بنویسید. سعی کنید تمام JavaScript ها بدون تگ script داخل این فیلد بنویسید تا نیازی به آپلود نباشد. در نهایت تمام این کد ها در فایل javascript.js تولید می شوند. برخی از JavaScript های پر کاربرد مانند جی کوئری از طریق مدیریت پنجره های فرعی قابل فعال شدن هستند و نیازی به آپلود یا کپی در فیلد مربوطه نیست. اگر هم نیاز است حتما JavaScript به صورت فایل آپلود شود از فیلد های JavaScript دلخواه استفاده می نمایید که 3 فیلد برای آپلود JavaScript در نظر گرفته شده است. پس از آپلود در فیلد کد Head تگ لینک شدن به این JavaScript را وارد می نمایید. به جای name.js درصد فیلد مربوطه وارد می شود. قبلش هم می توانید از درصد 113 برای مسیر دهی استفاده نمایید.

قاب دور پنجره ها
معمولا در قالب های کلاسیک دور تمام پنجره ها یک قاب متحدالشکل استفاده میشد. کد اچ تی ام ال این قاب ها در فیلد های اچ تی ام ال پنجره ها قابل ویرایش هستند.

1 دیدگاه

93/08/20 سه شنبه 18:10
[1] پوریا قوی:

ممنون از اموزش خوبتون

SecImgSes