آموزش کار با متون در نرم افزار DreamWeaver CS5

آموزش کار با متون در نرم افزار DreamWeaver CS5

در بخش اول و دوم آموزش ، کمی با قسمت های مختلف نرم افزار DreamWeaver CS5 آشنا شدید . امروز برای شما آموزش تنظیمات متن در قالب وب سایت را برای شما انتخاب کرده ام تا به طور کامل به این مبحث مهم بپردازم . همانطور که میدانید ظاهر یک قالب را تصاویر همراه با متن تشکیل میدهد پس بسیار مهم است که بدانیم برای ایجاد یک قسمت از وب سایت چه مشخصه هایی برای متن بکار برده شده مثل اندازه ، نوع فونت ، تراز بندی و دیگر مشخصه هایی که می توانیم به آن نسبت بدهیم ، بکار ببریم . برای شروع نرم افزار DreamWeaver CS5 را اجرا کنید . مباحثی که به طور کامل در این قسمت مورد بررسی قرار می گیرد عبارتند از آشنایی با نوع فونت بکار برده شده در وب سایت / اندازه / ترازبندی متن و کمی هم در مورد فاصله خطوط توضیح میدهم .

آشنایی با نوع فونت در وب سایت - Font Family

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

قابل ذکر است که اگر بیننده شما فونت مورد استفاده شما را نداشته باشد مرورگر به طور خودکار از فونت پیش فرض خود که به طور معمول Times New Roman است استفاده می کند.
در زیر یک سری از فونتهایی که زیاد توسط طراحان استفاده می شود را قرار داده ام . 
arial / tahoma / time news roman / arial black / courier / courier new / modem / terminal / symbol
حال با در نظر گرفتن توضیحاتی که در بالا قرار داده ام می خواهم بوسیله نرم افزار DreamWeaver CS5 نوع فونت را تغییر بدهم .
به تصویر زیر دقت کنید که چقدر کار با نرم افزار DreamWeaver CS راحت می باشد . کافیست قسمتی که می خواهید نوع فونت آن با بقیه صفحه متمایز یا به صورت یکسان باشد را انتخاب کرده و در پنل Properties نوع فونت را تغییر بدهید . فونت مورد نظر در css صفحه اضافی می شود .

لیست فونتهایی که کاربرد زیادی در طراحی دارد ، توسط نرم افزار برای شما به صورت لیست قرار داده شده است که می توانید به دلخواه یکی را انتخاب کنید .

در صورتیکه بخواهید می توانید یک سری از فونتهایی که در طراحی قالبهایتان می خواهید از آنها استفاده کنید را ایجاد و در لیست پیش فرض قرار بدهید . برای انجام اینکار کافیست بر روی تب CSS Style دابل کلیک کرده و از سمت چپ پیوندها گزینه Type را انتخاب کنید .

گزینه Edit Font List را انتخاب کنید .

صفحه Edit Font List باز می شود . کافیست یک لیست پیش فرض از فونتها را انتخاب کنید تا در قسمت chosen fonts نمایش داده شود . حالا با استفاده از دو فلشی که با کادر قرمز مشخص شده است می توانید یک فونت را اضافه یا فونتی را از لیست حذف کنید . سعی کنید لیست شما بیشتر از 3 فونت نباشد .

در صورتیکه فونت شما در لیست فونت پیش فرض وجود ندارد می توانید به صورت دستی نام فونت مورد نظر را در فایل CSS وارد کنید .

تغییر اندازه فونت در نرم افزار DreamWeaver CS 
همانطور که می دانید برای تغییر اندازه فونت در صفحه باید با واحدهای اندازه گیری متن آشنایی کامل داشته باشید بدلیل اینکه اگر ندانید متون صفحه را با چه واحدی اندازه گیری مشخص کنید تمام عناصر در مرورگرها به شکل متفاوت نمایش داده می شود . اجازه بدهید کمی در مورد واحد های اندازه گیری درcss برای شما توضیح بدهم .
واحدهای اندازه گیری متن در css به دو قسمت تقسیم می شود .
»»» قسمت اول Absolute بوده که دارای چند واحد اندازه گیری ثابت می باشد و بیشتر برای چاپ استفاده می شود .
»»»   قسمت دوم Relative بوده که به جز والد یا مرورگر وابسته می باشد و در صورتیکه تنظیمات پیش فرض تغییر کند این قسمت نیز تغییر می کند . این قسمت دارای چند واحد اندازه گیری بوده که مهمترین و پر کاربردترین آنها EMS و PX و % می باشد .
در صورتیکه قبلا طراحی قالب ، بوسیله کد نویسی بدون نرم افزار کرده باشید ، فرق این سه واحد اندازه گیری را می دانید . 
واحد پیکسل px بسته به رزولیشن مانیتور تغییر می کند و برای نمایش قسمت های مختلف سایت زیاد مناسب نمی باشد .
چند دلیل برای عدم استفاده از واحد px برای فونت وجود دارد که در ادامه به طور کامل برای شما شرح میدهم  : 
1. نسخه های قبلی ویندوز اکسپلورر (قبل از نسخه 7) از واحد پیکسل پشتیبانی نمی کنند . 
2. در صورتیکه از واحد px استفاده کنید اندازه نوشته ها را در موبایل بزرگتر از حد معمولی یا پیش فرض نمایش میدهد . 
برای تغییر اندازه فونت کافیست قسمت مورد نظر را انتخاب کرده و در پنل properties بر روی کلید Add property کلیک کنیم . در این قسمت می توانیم اندازه فونت را با واحدهای اندازه گیری مشخص شده وارد کنیم . من از طریق هر دو کادر اندازه را در تصاویر زیر تغییر داده ام

تعیین اندازه فاصله خطوط در DreamWeaver CS 
با استفاده از دستورات css می توانیم تغییراتی را بر روی فواصل بین خطوط از نظر افقی و عمودی بین متون صفحه اعمال کنیم . اما بدون استفاده از دستوراتcss و با استفاده از نرم افزار دریم ویور اینکار به مراتب راحت تر و بدون خطا می باشد . 
همیشه در ابتدای دستورات Body در css ویژگی Line-height را باید برای فاصله خطوط از هم به صورت عمودی وارد کنیم .
واحد اندازه گیری برای این قسمت هم به چند صورت می باشد . شما می توانید از درصد یا پیکسل یا واحد های اندازه گیری دیگر برای این قسمت استفاده کنید . معمولا برای این قسمت از درصد یا پیکسل استفاده می شود که این موضوع نیز بسته به طراحی فرق دارد . 
برای انجام اینکار کافیست تگ body را در پنل properties انتخاب و بر روی آن دابل کلیک کنید . می توانید مقدار خود را روبروی کادر line-height تایپ کنید .

ایجاد فاصله عمودی بوسیله Margin در DreamWeaver CS 
در بیشتر مواقع پیش می آید که بخواهیم بین عنوان (تیتر) صفحه یا لیست هایی که در قالب داریم  از طرفین فاصله ایجاد کنیم . برای انجام اینکار از Margin استفاده می شود . 
روش کار هم به این صورت هست که باید قسمت مورد نظر را انتخاب کرده و در پنل Properties بر روی کلید edit Rule کلیک کنیم یا می توانیم مستقیما بعد از انتخاب دیویژن مورد نظر به صورت مستقیم دستور CSS را تایپ کنیم. به تصاویر زیر دقت کنید .

در این قسمت تعیین کنید فاصله از چه سمتی باشد . بالا / راست / پایین / چپ

می توانید مستقیما دیویژن مورد نظر را انتخاب کرده و به صورت دستی تنظیمات خودتان را وارد کنید

کنترل فاصله های داخل یک کارد بوسیله Padding
تفاوت Margin با padding چیست ؟ Margin فاصله بین اجزا را تعیین می کند و Padding فاصله داخلی بین اجزا را تعیین می کند . هر کدام از اجزا را داخل یک کادر مستطیل شکل در نظر بگیرید فاصله متن یا هر شکل دیگری در داخل این کادر تا حاشیه کادر را Padding می گویند . 
برای درک بهتر به تیتر صفحه دقت کنید . با استفاده از Padding کمی فاصله از سمت راست ایجاد میکنم . برای انجام اینکار ابتدا تیتر صفحه را انتخاب کرده سپس بر روی کلید Edit Rule کلیک میکنم .

از پیوندهای سمت چپ Box را انتخاب کرده و تیک گزینه Same for all را بر میدارم تا تنظیمات به صورت تکی اعمال شود . حال در کادر Right مقدار مورد نظر خودم را وارد میکنم .

تغییرات را مشاهده کنید . شما می توانید از طرفین نیز این تغییرات را اعمال کنید . به عنوان مثال از سمت چپ / پایین یا بالا

ترازبندی متون در نرم افزار DreamWeaver CS5 
بسیار خوب من یک قالب که از قبل طراحی کرده ام را در نرم افزار دریم ویور باز میکنم . در بخش اول روش تراز بندی متن را با استفاده از دریم ویور آموزش میدهم . 
با استفاده از CSS می توانید کنترل بهتری بر روی چیدمان متن در وب سایت خود داشته باشید . دقت داشته باشید که تغییراتی که بر روی یک قسمت از متن اعمال می کنید به صورت کلی در قسمت مشخص شده (یک پاراگراف) اعمال می شود . 
برای تراز کردن متن در دریم ویور ،قسمتی که می خواهید از طرفین تراز شود را انتخاب کنید ، حال چند روش وجود دارد که بتوانیم تغییرات خودمان را بر روی قسمت مشخص شده اعمال کنیم .
روش اول انتخاب متن و سپس فشردن کلید Alt می باشد . بعد از فشردن کلید Alt یک پنجره برای شما باز می شود که با انتخاب سلکتور مورد نظر به صورت دستی تنظیمات مربوطه را می توانیم تغییر بدهیم .

روش دوم استفاده از پنل Properties می باشد . همانطور که در تصویر مشاهده می کنید بعد از انتخاب سلکتور مورد نظر ، می توانیم به صورت دستی ویژگی خودمان را در قسمتی که با کادر قرمز مشخص کرده ام وارد کنید .