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

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

از قسمت مربوط به تنظیمان متن تنها یک دستور باقیمانده و سپس وارد به مبحث تنظیمات فونت میشویم
دستور vertical-align
این دستور نیز در مایکروسافت ورد موجود است و مربوط به زمانی است که شما یک عکی دارید و در کنار آن نوشته این قرار داده اید حال میخواهید به سیستم بگویید که این نوشته را از بالای عکس شروع به نمایش کن و یا از وسط عکسو ویا از پایین عکس
مثال :
کد:

img
{
vertical-align:text-top;
}

ترجمه : یعنی نوشته را از ضلع بالایی عکس نمایش دهد
این خاصین میتواند دارای ارزش های مختلفی باشد که از آن جمله میتوان به موارد زیر اشاره کرد
CSS vertical-align Property

Property Values

Value اندازه
length یک عدد مشخص که میزان بالا یا پایین بودن متن را توضیح میدهد این مقدار میتواند ععد منفی بگیرد
% در صدی از ارتفاع خط
baseline تراز متن از ضلع پایینی تصویر که بصورت پیش فرض هم میباشد
text-top تراز متن در بالای تصویر
middle تراز متن در میانه
text-bottom تراز متن در زیر ضلع پایینی تصویر

برای درک بهتر میتوانید به کارگاه آنلاین مراجعه نمایید

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

حال وارد قسمت مربوط به تنظیمات فونت میشویم
اولین دستور برای تنظیمات فونت :


font Family

یکی از مهمترین دستورهایی که در تنظیمات فونت برای فارسی سازی باید تغییر نمایید این دستور است . دستور font-family به قالب میکوید که برای هر بخش از چه فونت هایی استفاده کند و معمولا به شکا زیر است
مثال :
کد:

p{font-family:"Times New Roman",Georgia,Serif}

یعنی برای پاراگراف از فونت های بالا استفاده کن
نکته هرگاه نام فونت بیشتر از یک کلمه باشد درون "" قرار میکلمه عیر مجازد در غیر اینصورت با ویرگول جدا میشود
ما برای فارسی سازی اصلا با نوع و شکل این دستور کاری نداریم چرا که برای زیبایی بیشتر همه فونت ها باید به فونت استاندارد Tahom تبدیل شود
برای این کار در CSS قالب خود عبارت FONT-FAMILY را جستجو نمایید . حال در پیش رو این عبارت مثلا نام فونت Arila و 2 فونت دیگر را میبینید به قسمت find and replace رفته تمامی Arial ها را به Tahoma تبدیل کنید برای 2 فونت باقی مانده نیز همین کار را انجام دهید
نکته ممکن است فونت های بکار رفته در قالب بیشتر از 3 عدد باشد اینقدر این جستجئو را ادامه دهید تا غیر از نام Tahoma دیگر نام هیچ فونتی در فایل css شما نباشد
بدین ترتیب شما فونت قالب خود را استاندارد نموده اید

دستور بعدی که بسیار هم مهم است font-size میباشد
این دستور از این نظر دارای اهمیت فوق العاده است که در زمانی که با یک فونت فارسی مینویسیم اندازه فونت بزرگتر از اندازه زمانی است که انگلیسی مینویسیم .
فرض کنید شما یک قالب دارید و بوسیله تغییر font-family تمامی فونت های آن را به tahoma تغییر دادید حال در نمایش قالب شما ممکن است مثلا اندازه عنوان ها بیش از حد بزرگ باشد و یا اندازه منوهای ماژول ها نیز بیش از حد بزرگ باشد بوسیله این دستور میتوانید این اندازه ها را متعادل نمایید
lمثال :
کد:

h1 {font-size:40px}
h2 {font-size:30px}
p {font-size:14px}

که ترجمه کدهای بالا بدین قرار است :
برای عنوان نوع اول اندازه فونت 40 پیکسل باشد . همینجا دقت کنید برای فونت tahoma اندازه 40 پیکسل بسیار بزرگ است اگر قالب فارسی بود حداکثر باید آن را 16 قرار میدادیم
برای عنوان نوع دوم h2 اندازه فونت 30 پیکسل باشد
برای متن بدنه و یا پاراگراف ها اندازه فونت 14 پیکسل باشد
البته در برخی مواقع این اندازه ها بصورت درصدی بکار برده میشود که میتوانید با کم کردن میزان درصد ها به تعادل دلخواه دست یابید.
برای درک بهتر از کارگاه آنلاین استفاده کنید :
http://www.w3schools.com/CSS/tryit.asp?filename=trycss_font-size_px
نکته مهم : برخی مواقع در مرور گر های مختلف اندازه های فونت ها فرق میکند به همین دلیل css نوع ارزش گذاری را دارد برای font-size به نام em . هر em معادل 16px یعنی اندازه پیش فرض سیستم است لذا شدیدا توصیه میشود به جای اندازه px از em استفاده کنید
مثال :

font-size:40px  =  font-size:2.5em

یعنی 2.5*16=40px

دستور بعدی Font Style میباشد
که در کاربرد بسیار ساده است
خاصیت Font Style میتواند دارای سه ارزش مطابق مثال باشد :
مثال
کد:

p.normal {font-style:normal}
p.italic {font-style:italic}
p.oblique  {font-style:oblique}

بدلیل سادگی نیاز به توضیح بیشتر احساس نمیشود

دستور بعدی در بخش فونت font-weight میباشد
من شخصا در خیلی از قالب ها دیدم که از این دستور استفاده شده است . این دستور همانطور که از نام آن پیداست برای وزن فونت استفاده میشود
یعنی هر چه وزن فونت بیشتر شود کلفت تر میشود و میتواند ارزش های زیر را دارا باشد :
کد:

normal
bold
bolder
lighter
100
200
300
400
500
600
700
800
900
inherit  وراثت از والد 

مثال :
کد:

p.normal {font-weight:normal}
p.thick {font-weight:bold}
p.thicker  {font-weight:900}

برای درک بهتر این دستور از کارگاه آنلاین آموزشی استفاده نمایید :
http://www.w3schools.com/CSS/tryit.asp?filename=trycss_font-weight

حال به قسمت های بعدی در این آموزش میرسیم :

حال جعبه در CSS و را BOX MODEL بررسی میکنیم
تمامی عناصری که در html وجود دارند میتواننید داخل box ها قرار گیرند . در css هر گاه سخن از BOX MODEL میروند منظور طراحی و لایه است .برای تنظیم طول و عرض یک جعبه یا به اصلاح موقعیت در تمامی مرور گر ها ابتدا باید بدانیم که این جعبه ها چگونه کار میکنند .
یکی از مهمترین دلایلی که قالب ها در مرور گرهای مختلف دارای بهم ریختگی میشود عدم طراحی درست BOX هاست . هر جعبه خود شامل4 قسمت میشود که عبارت است از :
CONTENT یا متن
PADDING یا لفاف: محدوده خالی که دور تا دور متن قرار میگیرد
BORDER یا لبه جعبه : به خطی گفته میشود که دور جعبه میباشد و متن و لفاف را در بر میگیرد. لبه میتوناد دارای رنگ باشد
MARGIN یا حاشیه : محوطه ای در دور جعبه است که دارای هیچ رنگی نیست و کاملا شفاف است

ارتفاع و عرض برای یک جعبه :
دستور ارتفاع Height و دستور عرض در CSS عبارت است از Width که معادل معانی انگلیسی آن میباشد
زمانی که طول و عرض را برای یک جعبه مشخص میکنیم CSS تنها طول و عرض را برای CONTENT یا متن در نظر میگیرد
مثال
کد:

width:250px;
padding:10px;
border:5px solid gray;
margin:10px;

حال اگر بخواهیم بدانیم عرض جعبه چقدر است باید به روش زیر عمل کنیم
250PX برای خود متن + 2 تا لفاف چپ و راسته هرکدام 10 تا میشود 20 تا + لبه که دو تا است . چپ و راست هر کدام 5 تا که میشود 10 تا و حاشیه چپ و راست 20 تا
250+20+10+20=300PX یعنی عرض جعبه میشود 300 پیکسل
زمانی که موقعیت ها را به راست یا چپ میبرید ممکن است قالب بهم بریزد مثلا اگر عرض قالب 986 پیکسل باشد شما باید طوری حساب کنید که جعبه ها بیشتر از 986 نشود

دستور بعدی MARGIN
در مورد MARGIN قبلا توضیح مختصری داده ایم حال به تشریح کامل این دستور میپردازیم چرا که برای فارسی سازی بسیار مهم است
MARGIN برای حاشیه دور لبه جعبه بکار برده میشود . این خاصین رنگ نمیپذیرید اما میتواند 4 جهت آن را مشخص نمود . به عنوان مثال بگوییم جعبه از بالا 10 پیکسل و از پایین 15 پیکسل و از راست 20 و از چپ هم 25 پیکسل حاشیه داشته باشد برای این منظور میتوان از کدهای زیر استفاده نمود :
کد:

margin-top:10px;
margin-bottom:15px;
margin-right:20px;
margin-left:25px;

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

Margin:10px 20px 15px 25px

نکته هیچگاه بین px و عدد آن فاصله قرار ندهید چرا که IE فاصله را نمیشناسد
روش های ترکیبی دیگر به شرح زیر است :
کد:

margin:25px 50px 75px 100px;

حاشیه بالا 25px
حاشیه راست 50px
حاشیه پایین 75px
حاشیه چپ 100px

margin:25px 50px 75px;

حاشیه بالا 25px
حاشیه های چپ و راست 50px
حاشیه از پایین 75px

margin:25px 50px;

حاشیه از بالا و پایین 25px
حاشیه از چپ و راست 50px

margin:25px;

در تمام جهات حاشیه 25px


نکته : میتوان از auto استفاده نمود اما در تمامی مرور گرها از آن پشتیبانی نمیشود

دستور padding یا لفاف :

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

padding:15px 0 15px 20px

یعنی متن از موقعیت از بالا 15 از راست 0 و از پایین 15 و از چپ 20 پیکسل فاصله دارد
پس از راست چین نمودن اگر این دستور تغییر نکند نوشته ها به لبه راست میچسبد لذا باید این دستور تغییر کند و بین نوشته ها و لبه راست موقعیت فاصله قرار بدهیم بعنی
کد:

padding:15px 20px 15px 0

لذا در راست چین نمودن یا فارسی سازی قالب حتما باید padiing تغییر نماید

دستور بعدی دستور معروف float است
این دستور به معنای شناوری است float میتواند ارزش های left , right یا inherit را دارا باشد
مدتها پیش در یک آموزش خواندم که تمامی float های left را باید rightو یا برعکس نمود این کار کاملا اشتباه است . float میتواند یک موقعیت را به راست بیاورد و یا یک یک موقعیت را به چپ بیاورد اما استفاده نا صحیح از این دستور موجب بهم ریختگی قالب میشود .
برای تشریخ مطلب یک مثال میاورم
در فایل css هر قالب معمولا موقعیت left و یا right با تگ col1 یا col2 و یا columleft و columright و.. مشخص میشود با این دستور میتوانید موقعیت راست را به چپ و چپ را به راست بیاورید که البته حتما باید همین کار را انجام دهید اما اگر content که نوشته ها در آن قرار میگیرد و دارای float:left باشد اگر آن را عوض کنید به احتمال خیلی زیاد قالب شما بهم میریزد
برای منو بالای صفحه هم حتما باید float به راست تنظیم شود . همچنین آرم سایت که معمولا سمت چپ است را باید به راست بیاورید اما استفاده از float باید کاملا حساب شده باشد تا قالب از کنترل خارج نشود .

در اینجا آموزش css برای فارسی سازی تمام میشود و از این پس بیشتر بر عملیات اجرایی و نحوه عملی فارسی سازی تمرکز میکنیم