مامبو چیست؟ قسمت چهارم

[Borna66]

3- طراحی ظاهر سایت

قالبها (Templates) ظاهر سایت و یا قسمتهای مختلف آنرا میسازند. اگر به قسمت قالب در بخش مدیریت (Administration) سایت خود بروید (Site -> Template Manager -> Site Templates) لیستی از قالبها را خواهید دید.یکی از آنها را کلیک کنید.نه ب روری نام قالب بلکه دکمه رادیویی سمت چپ آن و سپس آیکون "ِDefault " در toolbar بالای صفحه. سپس سایتتان را باز کنید و ببینید چه طور ظاهر آن عوض شده است.
مترجم: اگر در لیست فقط یک نام دیدید میتوانید قالبهای جدید را با کمک آیکون New همین Toolbar نصب کنید. برای این کار اول قالب (ها) را از سایت www.Mambolearn.com دانلود کنید و با کمک دکمه Browse در قسمت نصب قالب جدید آن (ها) را انتخاب و دکمه Upload and Install را فشار دهید. جهت راهنمایی چگونگی نصب قالب در سایت مقاله آموزشی آن موجود است.
براي ادامه مطلب روي لينك ادامه كليك كنيد.
- یک قالب چیست؟
قالبها یک سری فایل هستند که ظاهر سایت را مشخص میکنند. فایل اصلی یک قالب - که در یک فولدر به نام همان قالب در کنار فایلهای دیگری مجتمع شده اند - فایل index.php است که حاوی کدهای html و برای چیدمان عناصرسایت مثل جداول ، لوگوی سایت و غیره و کدهای php برای عناصر انعطاف پذیر (Dynamic) میباشد.

فایل دیگر و بسیار مهم قالب ، فایل StyleSheet یا جدول مشخصات ظاهری قالب که پسوند آن css است میباشد که فونتها ، رنگها و قابهای عناصر سایت را در خود دارد.
به یک نمودار تصویری از چگونگی تقسیم بندی که فایل index.php در سایت ایجاد میکند توجه کنید:

"header.jpg" جایگاه لوگوی شماست. "body" بلوکی است که مطالب سایت را درخود جای میدهد. بلوکهای پرتغالی رنگ در نمودار فوق position ها هستند که شما میتوانید در آنها ماژولها را قرار دهید ، به هر تعداد که بخواهید و ماژولهای گذاشته شده میتوانند فعال (Published) یا غیرفعال (Unpublished) باشند. مثلا در top Position یک ماژول جستجو و یک ماژول تاریخ خواهیم داشت. در rightPosition یک ماژول منو و یک ماژول ثبت نام در سایت. وقتی شما یک قالب طراحی میکنید فقط تعیین میکنید یک ماژول در کدام Position قرارداده شود که این کار را با یک خط ساده php انجام میدهید، مثل این:
<?php mosLoadModules('left'); ?>


- لیست مشخصات یا Style Sheet
قالب شما یک StyleSheet نیز دارد که فونتها ، رنگها ، قابها و ... عناصر صفحه را کنترل میکند. در این جا توضیحاتی در مورد نامگذاری قراردادی متغیرهای این فایل که به نام style.css در شاخه قالب دیده میشود آورده شده است:

مترجم:سری به قسمت قالبهای سایت خودتان بزنید و option botton کنار آنرا کلیک کنید و سپس از Toolbarبر روی گزینه Edit CSSکلیک کنید. خیلی از این تگها (Tag) که در زیر آورده شده را خواهید دید. میتوانید آنها را تغییر دهید ولی قبل از تسلط کامل خیلی مراقب باشید. یک تغییر اضافه کل ظاهر سایت را بهم میزند.

تنظیمات سراسری و فراگیر
body – تگی که مشخصات ظاهری قسمت مطالب (صورتی وسط در نمودار بالا) را کنترل میکند مثل رنگ پس زمینه نام و اندازه و کلفتی فونت و ...
div – فرمت پیش فرض برای همه مرزبندی های قالب. این تگ منحصر به حالاتی است که برای یک عامل در قالب مشخصات ظاهری تعریف نشده باشد.
hr – فرمت پیشفرض برای همه خطوط افقی در قالب. این تگ منحصر به حالاتی است که برای یک عامل در قالب مشخصات ظاهری تعریف نشده باشد.
p – فرمت پیشفرض برای تمام پاراگرافها در قالب. این تگ منحصر به حالاتی است که برای یک عامل در قالب مشخصات ظاهری تعریف نشده باشد.
td- فرمت پیشفرض برای تمام جداول اطلاعاتی در قالب. این تگ منحصر به حالاتی است که برای یک عامل در قالب مشخصات ظاهری تعریف نشده باشد..
tr – فرمت پیشفرض برای تمام رکوردهای جداول در قالب. این تگ منحصر به حالاتی است که برای یک عامل در قالب مشخصات ظاهری تعریف نشده باشد.
ul – فرمت پیشفرض برای تمام لیستهای نامنظم قالب. این تگ منحصر به حالاتی است که برای یک عامل در قالب مشخصات ظاهری تعریف نشده باشد.
a:link – فرمت پیشفرض ظاهر لینکها. زمانی بکار میرود که یک لینک دارای ظاهر تعریف شده خاصی نباشد.
a:visited– فرمت پیشفرض برای لینکهای دیده شده. زمانی بکار میرود که یک لینک دارای ظاهر تعریف شده خاصی نباشد.
a:hover – فرمت پیشفرض برای وقتی که موس روی لینک حرکت میکند. زمانی بکار میرود که یک لینک دارای ظاهر تعریف شده خاصی نباشد.

توجه:این کل تگهای ممکن نیست و تگهای دیگری هم ممکن است در یک قالب گنجانده شوند.

- تنظیمات فرم ها

inputbox– برای تمام باکس های ورود اطلاعات بکار میرود مثل Loginو Search.
button– برای تمام کلیدهایی که در سایت دیده میشود بکار میرود.


- کنترل صفحات (منوها و ...)

a.mainlevel:link –فرمت سطح اول تمام منوها را کنترل میکند.
a.mainlevel:visited –فرمت منوهای دیده شده در سطح اول را کنترل میکند.
a.mainlevel:hover –فرمت منوهای سطح اول در هنگام حرکت موس روی آنها را کنترل میکند.
a.sublevel:link –فرمت تمام منوهای سطوح زیرسطح اول را کنترل میکند
a.sublevel:visited – فرمت منوهای دیده شده در سطح دوم به بعد را کنترل میکند.
a.sublevel:hover – فرمت منوهای سطح دوم به بعد در هنگام حرکت موس روی آنها را کنترل میکند.
pagenav– برای نمایش فرمت این تگ است << Start < Prev Next > End >>
a.pagenav:link - برای نمایش حالت لینک این تگ است << Start < Prev Next > End >>
a.pagenav:visited - برای نمایش حالت لینک صفحات دیده شده این تگ است << Start < Prev Next > End >>
a.pagenav:hover - برای نمایش حالت لینک وقتی که موس روی آن میرود << Start < Prev Next > End >>
a.readon:link - برای حالت نمایش لینک "ادامه مطلب..... " در صفحه محتوای شماست
a.readon:visited - برای حالت نمایش لینک "ادامه مطلب....." در صفحه محتوای شماست وقتی که قبلا آنرا دیده اید
a.readon:hover - برای حالت نمایش لینک "ادامه مطلب...." وقتی با موس روی آن میروید.

- تنظیمات ماژول

table.moduletable – استایل عمومی برای همه ماژولها
table.moduletable th- استایل عمومی برای سرصفحه همه ماژولها
table.moduletable td - استایل عمومی برای قسمتهای درج اطلاعات همه ماژول

[Borna66]

- تنظیمات صفحه مطالب ها

a.category:link -
a.category:hover -
a.category:visited -
.componentheading - Title of thecomponent being used to display the content.
.contentheading- Title of the content, article, etc. beingdisplayed.
.contentpane - Table that holds all non-article information (components, category lists, contact forms, etc).
.contentpaneopen - Table thatholds the actual text for an article.
a.contentpagetitle:hover -
a.contentpagetitle:link -
a.contentpagetitle:visited-

- استیل لیست بخشها
.sectiontableheader
.sectiontableentry1
.sectiontableentry2


- استایل اطلاعات دیگر مثل عنوان سایت ، تاریخ ایجاد و غیره
.title - Style for the sitetitle.
.pathway - Default styling for the pathway (or breadcrumbs) displayed by the mosPathWay() function.
a.pathway:link - Style for hyperlinks in the pathway (or breadcrumbs) displayedby the mosPathWay() function.
a.pathway:visited - Style forhyperlinks that you have visited in the pathway (or breadcrumbs) displayed bythe mosPathWay() function.
a.pathway:hover - Style for themouseover effect for hyperlinks that are displayed as part of the pathway (orbreadcrumbs) displayed by the mosPathWay() function.
.createdate - Format of the "create date" displayed for various content items
.modifydate - Format for the "last updated" date displayed at the bottom of various contentitems.

- متفرقه
.ontab-
.offtab -
.tabpadding -
.tabheading -
.pagetext -
.moscode - For modifying {moscode} output.
.message - Text passed with mosmsg url parameter.
.small-
.smalldark-
توضیحات بیشتر و سه نمونه از فایلهای مربوط به استایل را میتوانید از آدرس زیر دانلود کنید و مفصل روی آن کار کنید:
http://www.mambohut.com/index.php?option=com_remository&Itemid=26&func=fileinfo&parent=category&filecatid=107.
این هم 3 نمودار تصویری برای درک بهتر مطلب:

مترجم:یه بار دیگه یادآوری میکنم این اطلاعات مربوط به فایل style.css موجود در شاخه یک قالب هست. شما اگر این فایل رو با هر ادیتوری باز کنید این تگها و عنوانها رو میبینید و تنظیمات مثل رنگ، اسم فونت، راست چین ، چپ چین خیلی راحت قابل مشاهده و تغییر هست. شماره رنگها را باید در فوتوشاپ در قسمت رنگها و بعد از انتخاب رنگ دلخواه با موس بدست آورید و این کد 6 رقمی که در زیر صفحه دیده میشه به جای رنگ موجود در استایل قرار بدهید .
حالا که توضیحات پایه مربوط به قالبها را دیدید ، در ادامه به دستورالعملهای ویژه برای دانلود یا طراحی قالب می پردازیم.


- دانلود کردن قالب (template)

برای دریافت قالبهای آماده فارسی به http://www.mambolearn.com/fa/option,com_docman/task,cat_view/gid,36/Itemid,37.html مراجعه کنید (البته باید عضو شوید و با نام کاربری خود وارد سایت شوید چون به عنوان میهمان لینک دانلود برای شما نمایش داده نخواهد شد) و برای دریافت قالبهای انگلیسی به خیلی جاها میشه سر زد و یکی از بهترینها اینجاست: www.mambohut.com
بعد از دانلود قالب که در اصل یک فولدر به نام همان قالب است محتوی تعدادی فایل و زیپ شده ، میتوانید آنرا بوسیله cPanel و File Manager داخل شاخه mambo\templates کپی کنید تا مامبو آنرا در لیست قالبهای موجود در نظر بگیرد و یا این کار را بوسیله بخش مدیریت (Administrator) و قالبها و نصب قالب جدید انجام دهید.


- طراحی قالب


یک خود آموز خوب برای طراحی قالب را در آدرس زیر میتوانید بیابید:
http://www.absalom.biz/tutorials/Mambo_Template_Tutorial.html

اگر میخواهید یک قالب کاملا جدید با Dreamweaver ایجاد کنید به خودآموز زیر مراجعه کنید:
www.mambosolutions.com/dw_tutorial/
این خود آموز شما را راهنمایی میکند که امکان کار با نوع خاصی از فایلها را برای Dreamweaver دانلود کنید که در آن میتوان براحتی قالب طراحی کرد. این خودآموز پیشنهاد میکند که برنامه MSAS را دانلود و نصب کنید. این برنامه کامپیوتر خانه شما را تبدیل به یک سرور کوچک با امکانات MySQL و Apache نموده تا بتوانید قبل از ارائه یا استفاده از قالبتان آنرا آزمایش کنید.
یک خودآموز مفصل تر دیگر را میتواند در لینک زیر مشاهده کنید:
http://www.allmambo.com/index.php?o...&id=13&Itemid=2