پرینت

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

مرحله اول : مقدمات طراحی قالب (پوسته، تم)
1- از مسیر مدیریت => ظاهر سایت => قالب ها => گزینه افزودن را می زنیم و یک نام برای قالب خود انتخاب می کنیم.
2- همانطور که تمام فیلد ها خالی هستند روی دکمه بروزرسانی کلیک می کنیم تا یک کپی از قالب فعال ایجاد شود. (اختیاری)
3- از مسیر مدیریت => تنظیمات => قالب سایت => قالب جدید را به عنوان قالب فعال سایت انتخاب می کنیم.

مرحله دوم : تعیین ساختار Layout قالب و تعیین محل موقعیت ها
برای طراحی هر قالبی ابتدا باید Layout آن را ترسیم نمایید. قالب 3 ستونه یک Layout کلاسیک است که معمولا شامل موقعیت های مشخص شده در تصویر زیر است.
بالا را موقعیت 1، ستون راست موقعیت دو، وسط موقعیت 3، چپ موقعیت 4 و پایین موقعیت 5 نامگذاری می کنیم.

مرحله سوم : نوشتن کد HTML طرح
حال نوبت این است Layout که روی کاغذ ترسیم کردید را به صورت کد HTML در بیاورید و در فیلد کد HTML وارد نماییم.
ما HTML قالب 3 ستونه را به صورت زیر نوشتیم. کد CSS را در مراحل بعدی کپی می کنیم.
سپس داخل هر قسمت موقعیت ها را همانند تصویر زیر تعریف می کنیم.
البته بسته به طرح در نظر گرفته شده موقعیت ها می توانند بیشتر یا کمتر از این باشند و این فقط یک مثال است.
شما می توانید برای صفحه اول یک قالب مجزا از صفحات فرعی ایجاد نمایید ولی اگر هر دو حالت یک قالب را دارند فیلد کد HTML صفحه اول را خالی بگذارید.
کد html صفحه اول
مرحله چهارم : نوشتن کد CSS طرح
کد های CSS که برای HTML بالا نوشتید داخل فیلد "سی اس اس قالب" وارد نمایید و فیلد "سی اس اس اصلی سیستم" را بدون تغییر بگذارید. در صورتیکه کد سی اس اس اصلی سیستم خالی است یا اشتباه تغییر کرد می توانید از نسخه دمو آن را کپی و پیست نمایید. در کل بهتر است سی اس اس اصلی سیستم را تغییر ندهید و تمام کد های سی اس اس خودتان را در سی اس اس قالب استفاده نمایید.

مرحله پنجم : پنجره ها
حال نوبت این است که در داخل موقعیت های مختلف Layout مواردی نظیر منو ها، اسلایدشو ها و ... بنویسیم. سابقا همه این موارد مانند منوها توسط طراح قالب به صورت اچ تی ام ال (استاتیک) در خود قالب نوشته می شد و برای هر تغیر باید قالب ویرایش میشد. اما در سایت ساز ضابط علاوه بر امکان استفاده از حالت سابق (استاتیک) می توانید این موارد را به صورت خودکار داخل Layout اضافه نمایید. فقط کافی است تعیین کنیم چه چیزی در کدام موقعیت نمایش داده شود بدون اینکه حتی یک خط کد اچ تی ام ال و سی اس اس برای آن ها بنویسیم.

کافی است از مسیر ظاهر سایت => پنجره ها، وارد مدیریت پنجره ها شوید و پنجره های دلخواه را ویرایش نمایید و روی موقعیت تعریف شده کد اچ تی ام ال خود تنظیم نمایید.
مثلا پنجره "منوی بالای سایت" را پیدا نمایید و از طریق ویرایش آن را روی موقعیت 1 و حالت نمایش دهد قرار دهید.
خواهید دید که منو در بالای سایت (موقعیت شماره 1) نمایش داده خواهد شد.
به همین صورت می توانید سایر پنجره های دلخواه را در موقعیت های دلخواه قرار دهید.
مثلا در تصویر زیر پنجره لوگو و منوی بالای سایت را روی موقعیت 1 قرار دادیم.
پنجره ها
در سایت ساز ضابط پنجره های بسیار زیادی وجود دارد از پنجره اسلایدر تا پنجره نمایش تاریخ جاری سیستم. اگر پنجره ای وجود دارد که با آن آشنا نیستید یا نیازی به آن ندارید روی نمایش دهد قرار ندهید زیرا می توانند شامل کدهای جاوا اسکریپت یا سی اس اس باشند که سرعت لود سایت شما را بیهوده کند نماید حتی اگر تغییری در ظاهر ایجاد نکند.
مثلا ما در پنجره اسلایدر کد CSS, Javascript آن را داخل پنجره نوشتیم تا هر موقع پنجره در حالت نمایش ندهد باشد این CSS, Javascript لود نشود.

مرحله ششم: پنجره های خاص
ممکن است در قالبی که مدنظر دارید قسمت هایی وجود دارد که با پنجره های سایت ساز نمی شود آن ها را ایجاد کرد. مثلا یک اسلایدری که متفاوت از اسلایدر موجود در پنجره های آماده سایت ساز است. در این حالت مانند حالت عادی باید کد ها را به صورت استاتیک در قسمت کد HTML قرار دهید. البته می توانید از بخش پشتیبانی سئوال بفرمایید که هزینه تبدیل این قسمت از کد به یک پنجره داینامیک چقدر خواهد بود.

مرحله هفتم: آپلود فایل های مورد نیاز
کد HTML, CSS را که در همان فیلد های مورد نظر پر می نمایید و نیاز به آپلود نیست. تصاویر مورد نیاز قالب را از قسمت تصاویر دلخواه می توانید آپلود نمایید.

3 دیدگاه

93/07/15 سه شنبه 19:39
[3] پوریا قوی:

سلام لطفا ادامه اموزش رو هم قرار بدین
93/06/06 پنجشنبه 08:14
[2] محمدصادق برخورداری:

سلام ممنون خیلی خوب بود
92/12/01 پنجشنبه 21:17
[1] محمد خوانساری:

با سلام و احترام این بخش مورد نیاز کاربران بود و کمبود آن بسیار محسوس بود با تشکر

SecImgSes