IACbook
کاربر تازه وارد
- تاریخ عضویت
- 5 آگوست 2010
- نوشتهها
- 5
- لایکها
- 0
درود
با توجه به انتشار اولین سری از آموزش های طراحی قالب برای سیستم whmcs که در وب هاستینگ تاک منتشر نمودیم و بعنوان اولین و تنها آموزش در وب می باشد ، تصمیم گرفتم این آموزش را در انجمن های پرشین تولز نیز منتشر کنم تا دوستان بتوانند با استفاده از این آموزش قالب مورد نظر خود را برای این سیستم طراحی کنند !
--------------------------------------------
ابتدا در مرحله اول ، آموزش را بصورتی شروع می کنیم که فرض می شود قالب اچ تی ام ال آماده کردید و میخوایم اون قالب رو برای whmcs مهیا کنیم. برای این کار هم یک قالب برای دانلود قرار میدم که روی اون قالب کار می کنیم و تصاویر طراحی و مراحل کار روی این قالب انجام می شوند و در نهایت که این قالب برای whmcs آماده خواهد شد.
پس از آنکه اولین قالب رو با whmcs آماده کردیم مطمئنا" همه دوستان قادر به طراحی قالب های خودشون برای این سیستم خواهند بود و وارد مراحل حرفه ای آموزش خواهیم شد.
(چون همزمان با هم در مراحل طراحی این قالب پیش میریم احتمال داره که در مسیر طراحی به مشکلاتی هم برخورد کنیم که مطمئنا" اینها مشکلاتی خواهند بود که بدون شک شما هم ممکنه در هنگام طراحی خود به آنها برخورد کنید که فکر کنم روش مناسبی باشه ..... )
موارد مورد نیاز جهت طراحی :
1- نرم افزار Dreamweaver
2- مرورگر قدرتمند موزیلا فایرفاکس
3- نصب افزونه webdeveloper بر روی مرورگر ( از اینجا دانلود و نصب کنید )
پیش نیازها :
1- داشتن اطلاعات در مورد طراحی قالب های اچ تی ام ال ( سعی می کنیم به نحوی آموزش داده شود تا همه دوستان بتوانند استفاده کنند )
2- داشتن اطلاعات در مورد سی اس اس ( همزمان سعی می کنیم هر موردی که برای سی اس اس لازم هست رو هم آموزش بدیم )
3- نصب whmcs بر روی هاست (در شاخه ای بصورت آزمایشی و نه بر روی سایت اصلی! ) جهت مشاهده تغییراتی که در قالب داده می شود و مشاهده نتایج کار
4 - داشتن قالب portal برای whmcs
5 - بسته زبان فارسی سیستم
در پست بعدی یک قالب رو برای دانلود قرار خواهم داد که روی اون کار می کنیم و بسته فارسی و قالب پورتال رو هم قرار میدم تا شروع کنیم.
( استفاده از قالب portal دلیل داره که میگم! )
---------- Post added at 08:58 PM ---------- Previous post was at 08:09 PM ----------
دانلود موارد مورد نیاز:
دانلود نرم افزار Dreamweaver
Pass: warez-bb
دانلود قالب اچ تی ام الی که روی اون کار خواهیم کرد:
http://www.iacbook.com/upload/Hosting.zip
تصویر قالب:
http://up.iranblog.com/Files/607d8d487df343809761.jpg
دانلود زبان فارسی قالب های whmcs :
http://www.iacbook.com/upload/farsi.txt.zip
دانلود قالب پورتال برای این سیستم ( قصد داریم از نام تمپلیت های این قالب استفاده کنیم و لازم است این قالب رو روی سیستم خودتون داشته باشید)
http://www.iacbook.com/upload/portal.zip
---------- Post added at 09:12 PM ---------- Previous post was at 08:58 PM ----------
اینم دموی قالبی که میخوایم برای whmcs آماده کنیمش:
Hosting Company
---------- Post added at 09:58 PM ---------- Previous post was at 09:12 PM ----------
اول از همه قالب پورتال خود سیستم رو تجزیه و تحلیل می کنیم و میگیم که چی به چیه تا یکمی همه دوستان در جریان کار قرار بگیرند.
دقت کنید وقتی وارد پوشته portal در شاخه tamplate میشید کلی تمپلیت مشاهده می کنید که همشون با پسوند .tpl هستند و هر کدوم اینا مربوط به یک قسمت از سیستم هستند.
مثلا" یکی مربوط به قالب صفحه اصلی هست (homepage.tpl )
یکی مربوط به ستون سمت راست هست ( footer.tpl )
یکی مربوطه به هیدر سایت هست ( header.tpl )
یکی مربوطه به صفحه بازاریابیه ...
یکی برای صفحه جستجوی دامینه ...
و ....
دقت کنید که بعضی از اینها برای یک صفحه کامل هستند و بعضی هم برای یک قسمتی از صفحه ( مثلا" قالب ستون سمت راست سایت )
پس تا اینجا دیدیم که هر صفحه از سایت یک قالب داره و اینها مربوط به صفحات سایت هستند.
مثلا" وقتی کاربر از منوی راست روی گزینه ناحیه کاربری کلیک می کنه وارد لینک clientarea.php میشه که در اینصورت صفحه اصلی سایت که در تمپلیت ها homepage.tpl بود به صفحه دیگر تغییر می کند که یکی دیگر از این قالبهاست !
اما منوی سمت راست همچنان در جای خود باقیست (اسم قالب ستون سمت راست هم footer.tpl هست ) . باقی موندن این منو در جای خود بدلیل سی اس اس هست. یعنی سی اس اس قالب گفته که یه ستونی به این عرض در این قسمت قرار بگیره و اسمش رو هم گفته !
برای مشاهده این موضوع وارد فایل style.css بشید ( در شاخه template/portal/style.css )
side_menu مشخصات این قسمت از قالب هست که به ترتیب از بالا به پایین زبونش رو ترجمه می کنم که چی گفته !
background-color:#EFF5FF یعنی رنگ پشت زمینه #EFF5FF باشه
border-left:1px solid #CFE2FF یعنی سمت چچ یک حاشیه به ضخامت 1px و به رنگ #CFE2FF و از نوع solid
float:right یعنی در سمت راست قرار گرفته ( دقت کنید که بدون اطلاع این راست و چپ رو تغییر ندید!! )
margin:0 یعنی از بیرون هیچ حریمی نداشته باشه
padding:15px یعنی از داخل دارای حریم 15px باشه ( یعنی نوشته ها و گزینه های منو از حاشیه ها فاصله 15 پیکسل داشته باشند )
text-align:left گفته متن چپ چین باشه ( این سی اس اس قالب پیشفرضه که هنوز فارسی نکردیمش و هدفمون هم فارسی کردن این نیست و فقط میخوایم یک مواردی شرح داده بشه )
width:219px یعنی عرض ستون 219 پیکسل باشه
side_menu ul این برای سبک لیست منو هست که جلوش گفته شده list-style:none یعنی لیستمون هیچ استایلی نداشته باشه ( مثلا" کنارش دایره دار نباشه و ... )
و تا آخر به همین ترتیب
پس تا اینجا متوجه شدیم که قالب ها در فرمت های tpl در پوشه portal قرار دارند و سی اس اس هم قالب ها رو تعریف کرده و بهشون خصوصیاتی رو داده
تا اینجا اگر سوالی هست بگید تا وارد قسمت بعدی بشیم.
ممنون
---------- Post added at 11:15 PM ---------- Previous post was at 09:58 PM ----------
خوب مثل اینکه تا اینجا هم مشکلی نبود
حالا طراحی رو میخوایم شروع کنیم :
ابتدا در شاخه template در داخل هاست یک فولدر جدید بسازید مثلا" به اسم orange که اسم قالب جدید ما باشه
حالا وارد شاخه portal شوید و select all بزنید و همه رو کپی کنید در فولدری که برای قالبتون ساختید ( همون فولدر orange )
الان style.css و پوشه images که مربوط به قالب قبلی هستند رو حذف کنید و بجاش از قالبی که خدمتتون ارائه دادم فایل style.css و فولدر images رو در فولدر قالب جدید (orange ) آپلود کنید .
فایل index.html قالب html را با نرم افزار Dreamweaver باز کنید و کل کدهاش و کپی کنید و از داخل هاست وارد فولدر orange شده و روی تمپلیت homepage.tpl راست کلیک کنید و کل کدها را پاک کرده و کدهای index.html قالب خودتون رو توش قرار بدید و فایل رو ذخیره کنید.
حال از داخل whmcs وارد setup و General setting شده و قالب orange را فعال کرده و قالب رو تا اینجا مشاهده نمایید.
تا به اینجا قالب سایتمون بصورت زیر شده :
http://up.iranblog.com/Files/3757b6a1e22448c4b8ba.jpg
هنوز تا یه قالب درست و حسابی زیاد فاصله داریم. اما مرحله اول رو با موفقیت انجام دادیم...
---------- Post added at 11:17 PM ---------- Previous post was at 11:15 PM ----------
بازهم اگر تا اینجا اگر دوستان سوالی دارند بفرمایند تا وارد مرحله بعدی بشیم...
---------- Post added 10-08-03 at 12:23 AM ---------- Previous post was 10-08-02 at 11:17 PM ----------
خوب حالا زمان این رسیده تا از قدرت بی نظیر افزونه web developer که بر روی مرورگر خود نصب کردیم توی این قسمت از کار استفاده کنیم !
از منوی این افزونه روی css کلیک کنید و view style information را انتخاب کنید.
بصورت زیر:
اکنون می توانیم اطلاعات سی اس اس هر نقطه از صفحه سایت را در داخل مرورگر خود ببینیم . بصورت زیر:
دقت کنید ، همانطور که در زیر قالب خود مشاهده می کنید همه منویی که در قالب پورتال در سمت راست بود الان در زیر قالب قرار گرفته و از طرق افزونه web developer هم می توانید آدرس سی اس اس اون رو مشاهده کنید.
وقتی ماوس را بر روی قسمت های پایین قالب می برید آدرس هایی در نوار مربوطه نمایش داده میشه که همشون به آی دی side_menu ختم میشن .
اما همانطوریکه میدانید ما در سی اس اس جدید اصلا" side_menu نداریم !
اما تمپلیتش در حال حاضر در شاخه orange که ما ساختیم وجود داره و div مربوطه هم توسط سیستم تعریف شده ، ولی چون توی سی اس اس تعریف نشده ، بنابراین در زیر قالب نمایش داده شده .
اکنون وارد پوشه orange و فایل footer.tpl شوید و کل کدها رو پاک کنید. سپس ذخیر نموده و ببندید.
حالا برید و صفحه سایت رو ریفرش کنید و تغییرات رو مشاهده کنید.
تمام قسمت پایین حذف شد.
اما اگه یادتون باشه گفتم این قالب پورتال رو روی سیستم خودتون هم داشته باشید. دلیلش اینه که ما این منو رو در جای دیگه ای خواهیم ساخت ....
تا اینجا سایت ما بصورت تصویر زیر شده:
تا اینجا اگر سوالی هست بفرمایید.
اگر در نحوه آموزش هم مشکلی هست بگید. ;
با توجه به انتشار اولین سری از آموزش های طراحی قالب برای سیستم whmcs که در وب هاستینگ تاک منتشر نمودیم و بعنوان اولین و تنها آموزش در وب می باشد ، تصمیم گرفتم این آموزش را در انجمن های پرشین تولز نیز منتشر کنم تا دوستان بتوانند با استفاده از این آموزش قالب مورد نظر خود را برای این سیستم طراحی کنند !
--------------------------------------------
ابتدا در مرحله اول ، آموزش را بصورتی شروع می کنیم که فرض می شود قالب اچ تی ام ال آماده کردید و میخوایم اون قالب رو برای whmcs مهیا کنیم. برای این کار هم یک قالب برای دانلود قرار میدم که روی اون قالب کار می کنیم و تصاویر طراحی و مراحل کار روی این قالب انجام می شوند و در نهایت که این قالب برای whmcs آماده خواهد شد.
پس از آنکه اولین قالب رو با whmcs آماده کردیم مطمئنا" همه دوستان قادر به طراحی قالب های خودشون برای این سیستم خواهند بود و وارد مراحل حرفه ای آموزش خواهیم شد.
(چون همزمان با هم در مراحل طراحی این قالب پیش میریم احتمال داره که در مسیر طراحی به مشکلاتی هم برخورد کنیم که مطمئنا" اینها مشکلاتی خواهند بود که بدون شک شما هم ممکنه در هنگام طراحی خود به آنها برخورد کنید که فکر کنم روش مناسبی باشه ..... )
موارد مورد نیاز جهت طراحی :
1- نرم افزار Dreamweaver
2- مرورگر قدرتمند موزیلا فایرفاکس
3- نصب افزونه webdeveloper بر روی مرورگر ( از اینجا دانلود و نصب کنید )
پیش نیازها :
1- داشتن اطلاعات در مورد طراحی قالب های اچ تی ام ال ( سعی می کنیم به نحوی آموزش داده شود تا همه دوستان بتوانند استفاده کنند )
2- داشتن اطلاعات در مورد سی اس اس ( همزمان سعی می کنیم هر موردی که برای سی اس اس لازم هست رو هم آموزش بدیم )
3- نصب whmcs بر روی هاست (در شاخه ای بصورت آزمایشی و نه بر روی سایت اصلی! ) جهت مشاهده تغییراتی که در قالب داده می شود و مشاهده نتایج کار
4 - داشتن قالب portal برای whmcs
5 - بسته زبان فارسی سیستم
در پست بعدی یک قالب رو برای دانلود قرار خواهم داد که روی اون کار می کنیم و بسته فارسی و قالب پورتال رو هم قرار میدم تا شروع کنیم.
( استفاده از قالب portal دلیل داره که میگم! )
---------- Post added at 08:58 PM ---------- Previous post was at 08:09 PM ----------
دانلود موارد مورد نیاز:
دانلود نرم افزار Dreamweaver
Pass: warez-bb
دانلود قالب اچ تی ام الی که روی اون کار خواهیم کرد:
http://www.iacbook.com/upload/Hosting.zip
تصویر قالب:
http://up.iranblog.com/Files/607d8d487df343809761.jpg
دانلود زبان فارسی قالب های whmcs :
http://www.iacbook.com/upload/farsi.txt.zip
دانلود قالب پورتال برای این سیستم ( قصد داریم از نام تمپلیت های این قالب استفاده کنیم و لازم است این قالب رو روی سیستم خودتون داشته باشید)
http://www.iacbook.com/upload/portal.zip
---------- Post added at 09:12 PM ---------- Previous post was at 08:58 PM ----------
اینم دموی قالبی که میخوایم برای whmcs آماده کنیمش:
Hosting Company
---------- Post added at 09:58 PM ---------- Previous post was at 09:12 PM ----------
اول از همه قالب پورتال خود سیستم رو تجزیه و تحلیل می کنیم و میگیم که چی به چیه تا یکمی همه دوستان در جریان کار قرار بگیرند.
دقت کنید وقتی وارد پوشته portal در شاخه tamplate میشید کلی تمپلیت مشاهده می کنید که همشون با پسوند .tpl هستند و هر کدوم اینا مربوط به یک قسمت از سیستم هستند.
مثلا" یکی مربوط به قالب صفحه اصلی هست (homepage.tpl )
یکی مربوط به ستون سمت راست هست ( footer.tpl )
یکی مربوطه به هیدر سایت هست ( header.tpl )
یکی مربوطه به صفحه بازاریابیه ...
یکی برای صفحه جستجوی دامینه ...
و ....
دقت کنید که بعضی از اینها برای یک صفحه کامل هستند و بعضی هم برای یک قسمتی از صفحه ( مثلا" قالب ستون سمت راست سایت )
پس تا اینجا دیدیم که هر صفحه از سایت یک قالب داره و اینها مربوط به صفحات سایت هستند.
مثلا" وقتی کاربر از منوی راست روی گزینه ناحیه کاربری کلیک می کنه وارد لینک clientarea.php میشه که در اینصورت صفحه اصلی سایت که در تمپلیت ها homepage.tpl بود به صفحه دیگر تغییر می کند که یکی دیگر از این قالبهاست !
اما منوی سمت راست همچنان در جای خود باقیست (اسم قالب ستون سمت راست هم footer.tpl هست ) . باقی موندن این منو در جای خود بدلیل سی اس اس هست. یعنی سی اس اس قالب گفته که یه ستونی به این عرض در این قسمت قرار بگیره و اسمش رو هم گفته !
برای مشاهده این موضوع وارد فایل style.css بشید ( در شاخه template/portal/style.css )
کد:
[LEFT]
#side_menu{background-color:#EFF5FF;border-left:1px solid #CFE2FF;float:right;margin:0;padding:15px;text-align:left;width:219px;}
#side_menu ul{list-style:none;margin:0 0 10px;padding:0;}
#side_menu ul li{line-height:25px;margin:0;padding:0;}
[/LEFT]
side_menu مشخصات این قسمت از قالب هست که به ترتیب از بالا به پایین زبونش رو ترجمه می کنم که چی گفته !
background-color:#EFF5FF یعنی رنگ پشت زمینه #EFF5FF باشه
border-left:1px solid #CFE2FF یعنی سمت چچ یک حاشیه به ضخامت 1px و به رنگ #CFE2FF و از نوع solid
float:right یعنی در سمت راست قرار گرفته ( دقت کنید که بدون اطلاع این راست و چپ رو تغییر ندید!! )
margin:0 یعنی از بیرون هیچ حریمی نداشته باشه
padding:15px یعنی از داخل دارای حریم 15px باشه ( یعنی نوشته ها و گزینه های منو از حاشیه ها فاصله 15 پیکسل داشته باشند )
text-align:left گفته متن چپ چین باشه ( این سی اس اس قالب پیشفرضه که هنوز فارسی نکردیمش و هدفمون هم فارسی کردن این نیست و فقط میخوایم یک مواردی شرح داده بشه )
width:219px یعنی عرض ستون 219 پیکسل باشه
side_menu ul این برای سبک لیست منو هست که جلوش گفته شده list-style:none یعنی لیستمون هیچ استایلی نداشته باشه ( مثلا" کنارش دایره دار نباشه و ... )
و تا آخر به همین ترتیب
پس تا اینجا متوجه شدیم که قالب ها در فرمت های tpl در پوشه portal قرار دارند و سی اس اس هم قالب ها رو تعریف کرده و بهشون خصوصیاتی رو داده
تا اینجا اگر سوالی هست بگید تا وارد قسمت بعدی بشیم.
ممنون
---------- Post added at 11:15 PM ---------- Previous post was at 09:58 PM ----------
خوب مثل اینکه تا اینجا هم مشکلی نبود
حالا طراحی رو میخوایم شروع کنیم :
ابتدا در شاخه template در داخل هاست یک فولدر جدید بسازید مثلا" به اسم orange که اسم قالب جدید ما باشه
حالا وارد شاخه portal شوید و select all بزنید و همه رو کپی کنید در فولدری که برای قالبتون ساختید ( همون فولدر orange )
الان style.css و پوشه images که مربوط به قالب قبلی هستند رو حذف کنید و بجاش از قالبی که خدمتتون ارائه دادم فایل style.css و فولدر images رو در فولدر قالب جدید (orange ) آپلود کنید .
فایل index.html قالب html را با نرم افزار Dreamweaver باز کنید و کل کدهاش و کپی کنید و از داخل هاست وارد فولدر orange شده و روی تمپلیت homepage.tpl راست کلیک کنید و کل کدها را پاک کرده و کدهای index.html قالب خودتون رو توش قرار بدید و فایل رو ذخیره کنید.
حال از داخل whmcs وارد setup و General setting شده و قالب orange را فعال کرده و قالب رو تا اینجا مشاهده نمایید.
تا به اینجا قالب سایتمون بصورت زیر شده :
http://up.iranblog.com/Files/3757b6a1e22448c4b8ba.jpg
هنوز تا یه قالب درست و حسابی زیاد فاصله داریم. اما مرحله اول رو با موفقیت انجام دادیم...
---------- Post added at 11:17 PM ---------- Previous post was at 11:15 PM ----------
بازهم اگر تا اینجا اگر دوستان سوالی دارند بفرمایند تا وارد مرحله بعدی بشیم...
---------- Post added 10-08-03 at 12:23 AM ---------- Previous post was 10-08-02 at 11:17 PM ----------
خوب حالا زمان این رسیده تا از قدرت بی نظیر افزونه web developer که بر روی مرورگر خود نصب کردیم توی این قسمت از کار استفاده کنیم !
از منوی این افزونه روی css کلیک کنید و view style information را انتخاب کنید.
بصورت زیر:
اکنون می توانیم اطلاعات سی اس اس هر نقطه از صفحه سایت را در داخل مرورگر خود ببینیم . بصورت زیر:
دقت کنید ، همانطور که در زیر قالب خود مشاهده می کنید همه منویی که در قالب پورتال در سمت راست بود الان در زیر قالب قرار گرفته و از طرق افزونه web developer هم می توانید آدرس سی اس اس اون رو مشاهده کنید.
وقتی ماوس را بر روی قسمت های پایین قالب می برید آدرس هایی در نوار مربوطه نمایش داده میشه که همشون به آی دی side_menu ختم میشن .
اما همانطوریکه میدانید ما در سی اس اس جدید اصلا" side_menu نداریم !
اما تمپلیتش در حال حاضر در شاخه orange که ما ساختیم وجود داره و div مربوطه هم توسط سیستم تعریف شده ، ولی چون توی سی اس اس تعریف نشده ، بنابراین در زیر قالب نمایش داده شده .
اکنون وارد پوشه orange و فایل footer.tpl شوید و کل کدها رو پاک کنید. سپس ذخیر نموده و ببندید.
حالا برید و صفحه سایت رو ریفرش کنید و تغییرات رو مشاهده کنید.
تمام قسمت پایین حذف شد.
اما اگه یادتون باشه گفتم این قالب پورتال رو روی سیستم خودتون هم داشته باشید. دلیلش اینه که ما این منو رو در جای دیگه ای خواهیم ساخت ....
تا اینجا سایت ما بصورت تصویر زیر شده:
تا اینجا اگر سوالی هست بفرمایید.
اگر در نحوه آموزش هم مشکلی هست بگید. ;