آموزش فارسی سازی قالب های جوملا

سطح آموزش :	مبتدی
منبع آموزش :	www.joomina.ir
توضیحات :	آموزشهای طراحی وب جومینا براساس نیاز سنجی مدیران جومینا تهیه و منتشر میشود این آموزش ها قالبا آموزش هایی است که دردنیای مجازی یا نیست و یا کمیاب است . لطفا در صورتی که از آموزش های عمومی جومینا در سایت های دیگر منتشر مینمایید منبع را ذکر نمایید

با توجه به مسائل با لا تصمیم گرفتم هر چند ناقص اما هر هر چیز از چند دستور css که بلدم را ذره ذره اینجا براتون تشریح کنم . بعدشم یه قالب را با هم فارسی میکنیم و میبینیم که چطوری یه قالب فارسی میشه مثل یه دوره تحصیلی .
اول از همه برای فارسی سازی بهتر است یک سری ابزار داشته باشید لطفا این ها را تهیه کنید :
1- تمامی مرور گر ها (چون باید دائما قالب خود را با مرور گرهای خود تست کنید
2- یکی از اضافات firefox به نام ; cssviewerکه میتونید از اینجا دانلودش کنید: https://addons.mozilla.org/en-US/firefox/addon/2104
3- برنامه معروف photoshop هر ورژنی که بود
4- برنامه dreamviewer

مقدمه در مورد دستورات css
i هر دستور css دارای سه بخش به ترتیب زیر است

selector {property:value}

مثال

body {color:black}

body نام بخشی است که قرار است خاصیت به آن مربوط شود در ایجا خاصیت رنگ است که ارزش سیاه را دارد . همچنین میتوان این تگ ها را گروهی بگار برد مثلا اگر بخواهید مثلا اگر بخواهید تمامی عناوین به رنگ سبز باسد میتوانید آن را گروهی بکار ببرید
مثال

h1,h2,h3,h4,h5,h6 {color:green}

یعنی h1 تا 6 همگی سبز باشد

نکته در مورد نام بخش ها نگران نباشید . اگر همراه با آموزش جلو بیایید خود به خود همگی را حفظ خواهید شد

نکته : کسانی که کد نویسی html را میدانند این دروس برای آنان بسیار ساده خواهد شد چرا که css پیوستگی مشخصی با html دارد

به عنوان آموزش اول با دستور direction شروع میکنیم که خاصیت است

direction میتواند دارای 3 ارزش متفاوت باشد

direction: ltr(left to right) & rtl(right to left) & inherit

ltr به معنای چپ به راست
rtl یعنی راست به چپ
inherit به معنای ارث بری از بخش والد است

برای فارسی سازی قالب معمولا میگویند به تگ body که مربوط به کل قالب است دستور direction:rtl را اضافه کنید . نمیتوان گفت که این کار درست است یا غلط ! به دلیل این که هر قالب با قالب قبلی فرق دارد در بعضی از قالب ها اصلا نباید این کار را انجام داد و در بعضی دیگر این یک باید است .
اما اگر نخواهیم این دستور را در ابتدای قالب یا همان body قرار دهیم چه باید انجام دهیم . که البته خود من هم این کار را توصیه میکنم اما وقت گیر تر است .
ما باید در قسمت را جداگانه با این دستور بکار ببریم
direction به معنای جهت میباشد و وقتی میگوییم direction:rtl یعنی جهت از راست به چپ باشد
برای آنکه با این دستور بیشتر آشنا شوید میتوانید از کارگاه آنلاین برای تست دستور استفاده کنید از این ادرس :

http://www.w3schools.com/Css/tryit.asp?filename=trycss_text_direction

فعلا ما در قسمت مربوط به متن یا text هستیم لذا با دستور کاربردی دیگری آشنا میشویم به نام text-align به معنای تراز متن
کار این دستور دقیقا همانند گزینه مشابه آن در microsoftword است و دارای 3 ارزش میباشد به شرح زیر
کد:

{text-align:center}
{text-align:left}
{text-align:right}

center برای تراز وسط
left به معنای تراز به چپ
right برای تراز به راست
مثال :
کد:

h1 {text-align:center}
h2 {text-align:left}
h3 {text-align:right}

یعنی عنوان h1 در مرکز موقعیت قرار گیرد و h2 در چپ و h3 در راست
به صورت پیش فرض برای تمامی قالب های انگلیسی با توجه به نحوه نگارش حروف انگلیسی direction: rtl; text-align:left است . بدلیل آنکه انگلیسی را از چپ به راست مینویسند و فارسی را از راست به چپ لذا ممکن است ما جهت را در قالب از راست به چپ کرده باشیم یعنی direction: rtl اما تراز نوشته ها را راست نکرده باشیم .
بر اساس ترجبه ناچیزی که من دارم در بیشتر مواق لازم است در قالب جستوجو کنید و text-align:left را به text-align:right تبدیل کنید این کار را میتوانید با فشار یک دکمه در dreamviewer و در قسمت find and replace انجام دهید .
نکته گاهی مواقع در قالب ها بین دو نقطه و ارزش (به عنوان مثالtext-align) فاصله نمیگذارند لذا با هر دو حالت جستجو کنید
نکته ممکن است پس از تبدیل تمامی left ها به right باز هم قسمت هایی باشد که تراز راست نباشد اینجاست که باید از ابزار cssviewer در فایر فاکس استفاده کنید که در آموزش بعدی راجع به آن توضیح خواهم داد
برای درک بهتر این دستور میتوانید از کارگاه آنلاین استفاده نمایید برای این کار به آدرس زیر بروید :

http://www.w3schools.com/CSS/tryit.asp?filename=trycss_text-align

در این آموزش 5دستور دیگر که مربوط به متن یا text است بکار میرود

TEXT-COLOR

رنگ متن
در CSS شما میتوانید یک تگ را به رنگهای مختلف نشان دهید . در نمایش رنگ از دستود ساده COLOR استفادخ میشود اما ارزشی که به COLOR میتوان داد به سه روش است .
شما میتوانید تنها نام رنگ را بنویسید مثل RED
شما میتوانید کد RGB رنگ را در مقابل color بنویسید
شما میتوانید میزان هگزا رنگ را در جلو آن را بنویسید .
برای اولی تنها زمانی استفاده میشود که شما میخواهید از رنگها ساده استفاده کنید
برای دومی رنگ ترکیبی استفاده میشود . برای درک بهتر آن از پنل کنترل رنگ فتوشاپ مشاهده نمایید هر رنگ ترکیبی از سه رنک قرمز ، آبی و سبز است به شما با وارد نمودن 3 عدد در مقابل کد رنگ ترکیب این رنگها را به کار میبرید
از طرفی برای کدهای هگزا در همان پنل کنترل رنگ فتو شاپ در قسمت پایین معادل کد هگزا هر رنگ مشاهده میشود که میتوانید آن را نیز بکار ببرید
مثال:
کد:

 body {color:blue}
 h1 {color:#00ff00}
 h2 {color:rgb(255,0,0)}
 

ترجمه این کد ها به شرح زیر است
برای متن body از رنگ آبی استفاده شود
برای عنوان نوع اول h1 از رنگ سبز استفاده شود
برای عنوان نوع دوم h2 از از رنگ قرمز استفاده شود
برای درک بهتر میتوانید از کارگاه آنلاین استفاده کنید از این آدرس :
http://www.w3schools.com/CSS/tryit.asp?filename=trycss_color

دستور بعدی Text Decoration میباشد که در فارسی سازی هم کاربرد بیشتری دارد
این دستور نوع آرایش متن را مشخص مینماید که مثلا زیر خط دار باشد مایل باشد و ....
ارزش هایی که این خاصیت میتواند کسب کند به شرح زیر است
none بدون ارزش
underline زیر خط دار
overline یک خط در بالای متن
line-through یک خط در وسط متن
blink چشمک زن

مثال:
کد:

 h1 {text-decoration:overline}
 h2 {text-decoration:line-through}
 h3 {text-decoration:underline}
 h4 {text-decoration:blink}
 

ترجمه دستورات بالا به شرح زیر است
برای عنوان ها از نوع اول یک خط در بالای آن قرار بده
برای عنوان ها از نوع دوم یک خط در وسط آن قرار بده
برای عنوان ها از نوس سوم یک خط در زیر آن قرار بده
و تمامی عنوان ها زا نوع چهارم چشکم زن باشند
در برخی از قالب ها تمامی لینک ها زیر خط دار هستند حال فهمیدیم اگر بخواهیم در قالبمان لینک ها زیر خط دار نباشند کافی است که در قالب بگردیم و text-decoration:underline را به none تبدیل نموده یا آن را کاملا حذف نمایید . اینکه از کجا این دستور را بیابیم با استفاده ایزار cssviewer در فایر فاکس است که متعاقبا راجع به آن توضیح داده خواهد شد .

دستور بعدی text Transformation است که در فارسی سازی اصلا کاربردی ندارد لذا ما هم مختصر از آن میگذریم تنها به ذکر آدرس آزمایش آنلاین آن اکتفا میکنیم
http://www.w3schools.com/CSS/tryit.asp?filename=trycss_text-transform

و دستور آخر در این قسمت آموزش Text Indentation یا تو رفتگی متن پاراگراف است
همانطور که میدانید در آیین نگارش فارسی متن در سطر اول پاراگراف میباید به اندازه 3 نقطه تو رفته باشد رعایت این مورد باعث زیبایی متن و جلب نظر مخاطب میشود . این موردی است که متاسفانه خود من هم در قالب ها رعایت نمیکنم و فراموش میشود اما این دستور به شما این امکان را میدهد تا سطر اول را به میزان دلخواه تو رفته نمایید .

مثال :
کد:

p {text-indent:50px}

ترجمه این کد به شرح زیر است سطر اول پاراگراف به اندازه 50 پیکسل تو رفته باشد
برای درک بهتر میتوانید از آزمایش آنلاین استفاده کنید :
http://www.w3schools.com/CSS/tryit.asp?filename=trycss_text-indent

دستور بعدی line-height میباشد به معنای ارتفاع خط
بوسیله این دستور میتوانید ارتفاع هر خط را در بخش مورد نطر تعیین کنید

مثال :
کد:

body{line-height:20px}

یعنی در کل قالب ارتفاع هر خط با خط بعدی 20 پیکسل باشد . نحوه ارزش دهی این خاصیت به شرح زیر است
normal که از پیش فرض php استفاده میکند
length یک میزان مشخص مانند 20px
% درصدی از اندازه فونت در حال استفاده
inherit از خاصیت والد استفاده میکند

مثال به ترتیب :
کد:

line-height:normal

کد:

line-height:20px

کد:

 line-height:20%

کد:

line-height:inherit 

در قارسی سازی قالب ها زمانی این دستور کاربرد دارد که قسمت از متن به صورت عرضی یا از ارتفاع ناپدید شده است

دستور بعدی letter-spacing
من بارها به این دستور در فارسی سازی قالب ها بر خورده ام در زبان انگلیسی بدلیل آنکه حروف از هم جدا هستند میتواند گفت که هر حرف با حرف قبلی x پیکسل فاصله داشته باشد اما در فارسی همچین کاری را نمیتوان کرد به همین دلیل گاهی شما قالب را کاملا فارسی میکنید اما میبینید که بین حروف فاصله وجود دارد . اینجاست که باید به دنبال این دستور بگردید و فاصله بین حروف را صفر کنید

روش استفاده از این دستور بسیار ساده است
مثال
کد:

 h1 {letter-spacing:2px}
 h2 {letter-spacing:-3px}
 

ترجمه دستور به شرح زیر است :
برای تمامی عنوان ها از نوع اول فاصله بین حروف 2 پیکسل و برای عنوان ها از نوع دوم فاصله بین حروف 3 باشد
برای درک بهتر از کارگاه آنلاین استفاده کنید از آدرس زیر

http://www.w3schools.com/CSS/tryit.asp?filename=trycss_letter-spacing