سی اس اس cssمقدمه
از مهارت های اساسی که هر طراح وب لازم است به آن اشراف داشته باشد ترجمه یا محلی ساختن (Localization) قالب های HTML/CSS انگلیسی است که در این پست قصد داریم 3 گام اولیه و اساسی برای انجام اینکار را به اختصار شرح دهیم.
گام اول؛ اشراف به فایل های قالب
در اولین قدم اگر قالب موردنظر را خودتان طراحی نکرده اید باید با بررسی فایل های قالب نسبت به محتوای آن ها و اینکه هر فایل، مرتبط با کدام بخش قالب است اشراف پیدا کنید؛ اهمیت انجام اینکار در مراحل بعدی مشخص می شود.
گام دوم؛ ویرایش فایل های CSS
حال شما باید نسبت به ویرایش فایل های CSS که ساختار قالب شما را شکل می دهند، بپردازید؛ این مرحله مهم ترین بخش کار است و درصورتی که به درستی و کامل انجام شود، بخش مهمی از کار تمام شده است.
در ویرایش فایل های CSS باید به مراحل زیر را طی کرد.
معکوس کردن مقادیر شناوری های راست و چپ (Float)
برای مثال در بخشی از فایل CSS به قطعه کد زیر می رسیم.
.notifications-box li{
float: right;
color: #a9a9a9;
font-style: italic;
margin: 0 0 0 20px;
}
در اینجا شناوری راست را به شناوری چپ تبدیل می کنیم.
.notifications-box li{
float: left;
color: #a9a9a9;
font-style: italic;
margin: 0 0 0 20px;
}
معکوس کردن مقادیر ترازبندی متن (text-align)
در این مرحله درصورت وجود ترازبندی متن از راست یا چپ، مقدار آن را معکوس می کنیم.
برای مثال به قطعه کد زیر توجه کنید.
.infobox{
border-width: 1px;
border-style: solid;
padding: 10px;
text-shadow: 1px 1px 0 rgba(255,255,255,0.5);
position: relative;
text-align: left;
}
در این مثال طراح اصلی قالب از ترازبندی چپ استفاده کرده است که ما آن را معکوس می کنیم.
.infobox{
border-width: 1px;
border-style: solid;
padding: 10px;
text-shadow: 1px 1px 0 rgba(255,255,255,0.5);
position: relative;
text-align: right;
}
معکوس کردن مقادیر padding و margin راست و چپ
روش کار همانگونه است که پیش تر مشاهده کردید؛ اما چند نکته ریز و قابل تأمل وجود دارد که آن ها را به همراه مثال شرح می دهیم.
همانطور که می دانید شیوه های مختلفی برای بیان padding و margin یک المان از صفحه وجود دارد؛
ساده ترین حالت موقعی است که طراح قالب مقادیر padding و margin از جهات مختلف را با صفت اختصاصی آن جهت مشخص می کند.
برای مثال در قطعه کد زیر طراح قصد داشته تا padding المان را از بالا برابر 10 پیکسل و از راست برابر 7 قرار دهد.
.nav-list li a{
padding-top: 10px;
padding-right: 7px;
}
حالت رایج دیگر که همانند قطعه کد زیر است وقتی استفاده می شود که فاصله از بالا و پایین یکسان و فاصله از راست و چپ نیز یکسان باشد؛ برای مثال در قطعه کد زیر مقدار margin از بالا و پایین برابر 10 پیکسل بوده و مقدار آن از راست و چپ برابر 5 پیکسل می باشد.
.nav-list li a{
margin: 10px 5px;
}
حالت بعدی زمانی است که مثلا خصوصیت padding یک المان صفحه از هر جهت با دیگر جهات آن متفاوت است؛ به عبارت دیگر مقدار padding آن المان از بالا، پایین، چپ و راست با یکدیگر متفاوت است.
برای بیان چنین حالاتی قطعه کد زیر به کار می رود، البته باید توجه داشته باشید که ترتیب بیان در این شیوه بسیار مهم است به طوریکه به ترتیب مقدار padding از بالا، راست، پایین و چپ نوشته می شود. (به حالت ساعت گرد)(درضمن خصوصیت margin هم از این قاعده پیروی می کند.)
قطعه کد زیر نمونه ای از این شیوه بیان را نشان می دهد.
.nav-list li a{
margin: 1px 5px 3px 10px;
}
آخرین حالت نیز زمانی روی می دهد که شما مقدار padding یا margin را فقط از سه جهت بیان می کنید که در این حالت مقادیر بیان شده به ترتیب از راست به چپ برابر padding از بالا، راست و پایین است؛ به عبارت دیگر در این شیوه شما مقدار padding از چپ را مشخص نمی کنید؛ این قواعد برای margin هم صدق می کند.
به قطعه کد زیر توجه کنید.
.nav-list li a{
margin: 0px 4px 8px;
}
حال که با شیوه های مرسوم بیان margin و padding آشنا شدید، روش معکوس کردن آن ها را بیان می کنیم.
در ترجمه قالب ها از انگلیسی به فارسی تنها در صورتی نیاز به معکوس کردن margin و padding است که طراح اصلی قالب مقادیری را برای margin یا padding از سمت راست یا چپ اختصاص داده باشد.
ساده ترین حالت که در ابتدا آن را بیان کردیم زمانی است که طراح از صفات اختصاصی راست یا چپ استفاده می کند؛ مانند قطعه کد زیر:
.nav-list li a{
padding-top: 10px;
padding-right: 7px;
}
برای معکوس کردن چنین حالتی که طراح اصلی مقدار padding از سمت راست را برابر 7 پیکسل گذاشته است باید مقدار padding از سمت چپ را برابر 7 پیکسل قرار دهیم؛ به قطعه کد زیر توجه نمایید.
.nav-list li a{
padding-top: 10px;
padding-left: 7px;
}
یکی از حالت رایج دیگر زمانی است که طراح اصلی قالب چهار مقدار را برای padding یا margin مشخص کرده است.
به قطعه کد زیر توجه کنید.
.nav-list li a{
margin: 1px 5px 3px 10px;
}
در این حالات برای معکوس کردن کافی است مقدار دوم و چهارم را جا به جا کنیم که در مثال فوق نتیجه نهایی به شکل زیر خواهد بود.
.nav-list li a{
margin: 1px 10px 3px 5px;
}
حالت با اهمیت دیگر زمانی است که طراحی اصلی قالب سه مقدار را برای صفات margin یا padding مشخص کرده باشد؛ به مثال زیر توجه کنید.
.nav-list li a{
margin: 0px 4px 8px;
}
همانطور که قبل تر متذکر شدیم در چنین حالاتی طراح از بیان فاصله از سمت چپ خودداری کرده است پس ما برای معکوس کردن چنین حالاتی باید علاوه بر ثابت نگه داشتن مقادیر فاصله از بالا و پایین نسبت به مشخص کردن فاصله از سمت چپ اقدام نماییم؛ بدیهی است که باید مقدار فاصله از سمت راست نامشخص شود.
در مثالی که زده شد قطعه کد زیر بعد از معکوس شدن را نشان می دهد.
.nav-list li a{
margin-top: 0px;
margin-bottom: 8px;
margin-left: 4px;
}
گام سوم؛ استفاده از متون فارسی
در حال حاضر ساختار کلی قالب راستچین شده است و آماده جایگزینی متون فارسی با متون انگلیسی است.
پس دست به کار شوید و از متون فارسی دلخواه خود در قالب استفاده کنید.
سخن آخر
در این مطلب سعی شد تا 3 گام اولیه و اساسی را در ترجمه و محلی ساختن (Localization) قالب های وب لاتین و انگلیسی بیان شود؛ البته بدون شک در بعضی قالب های حرفه ای و پیشرفته انجام تغییرات دیگری همانند ویرایش فایل های جاوا اسکریپت قالب ضروری و حتمی است که در اینجا به آن اشاره نکردیم.
امید است که بهره کافی را برده باشید، انشاالله!
آموزش اصول اولیه متلب به زبان ساده - جلسه اول 
.gif)