کار با تصاویر در نرم افزار DreamWeaver CS5

کار با تصاویر در نرم افزار DreamWeaver CS5

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

آشنایی با فرمت های تصویری 
در وب سایت از 3 فرمت برای تصاویراستفاده می شود .
فرمت اول JPG می باشد : این فرمت گزینه مناسبی برای عکس و تصاویر با رنگهای متفاوت می باشد .این فرمت بیشتر برای تصاویر کوچک که حجم آنها زیاد نمی شود ، پیشنهاد می شود بدلیل اینکه تصاویر رنگی با کیفیت بالا گزینه مناسبی برای این فرمت نمی باشند و در صورتیکه حجم فایل را بخواهید با نرم افزار کمتر کنید ، کیفیت تصاویر مورد نظر افت پیدا می کند . 
فرمت دوم  GIF می باشد : ایده آل برای تصاویر کوچک و یا تصاویر تک رنگ می باشد . من برای تصاویر آموزش از GIF استفاده میکنم بدلیل اینکه با کوچک کردن اندازه تصویر ، کیفیت کاسته نمی شود و حجم کمتری نسبت به فرمت JPG دارد تقریبا 50 درصد کمتر می باشد . 
فرمت سوم PNG می باشد : این فرمت تقریبا شبیه فرمت GIF می باشد با این تفاوت که GIF دارای پالت رنگ 8 بیت می باشد ولی PNG دارای پالت رنگ 24 بیت ،به همین دلیل حجم سایز فایل مورد نظر بیشتر می باشد . این فرمت برای تصاویری بیشتر برای تصاویری استفاده می شود که دارای پس زمینه نمی خواهیم باشد .

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

در پنل Assets به راحتی می توانید یک تصویر را درگ کرده و بروی قسمت مورد نظر اضافه کنید تا تصویر در موقعی دلخواه قرار بگیرد .

یکی از امکانات فوق العاده دیگری که در دریم ویور وجود دارد ویرایش تصاویر به صورت پیش فرض می باشد . شما می توانید یک یا چند برنامه را برای ویرایش تصویر انتخاب کرده ، سپس با کلیک بر روی برنامه مورد نظر تصویر را ویرایش کنید ، سپس بعد از ذخیره تصویر ، مشاهده می کنید که بدون هیچ تغییری در کدهای مورد نظر (به صورت دستی) ، تصویر تغییر می کند . برای انجام اینکار ابتدا در نوار ابزار بالای صفحه بر روی Edit کلیک کرده و در مرحله بعدی گزینه Preferences را انتخاب نمائید . یک صفحه همانند تصویر زیر باز می شود . در سمت چپ بر روی پیوند File Types /Editors کلیک کنید .

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

وارد کردن تصاویر در  DreamWeaver CS5 
در نرم افزار دریم ویور به 3 روش می توانیم تصاویر خودمان را به قالب سایت اضافه کنیم . 
روش اول : با کلیک بر روی منوی Insert گزینه Image را انتخاب کنید . صفحه Select Image Source باز می شود . در این صفحه می توانید عکس مورد نظر را از روی کامپیوتر انتخاب و بر روی کلید OK کلیک کنید .

در این قسمت باید یک نام برای تصویر خودتان در کادر Alternate text تایپ کنید . این متن در تگ Alt تصویر قرار می گیرد و یکی از مشخصه های مهم در سئو می باد که بعدا توضیح میدهم .

روش دوم : استفاده از پنجره Insert بالای صفحه می باشد . در تب اول بر روی آیکون Image کلیک کنید . از لیست باز شده گزینه image کلیک کرده و مثل مرحله قبل تصویر مورد نظر را انتخاب کنید .

روش سوم : استفاده از پنل File می باشد . شما می توانید عکس مورد نظر خودتان را از فولدر Image انتخاب و بر روی قسمت مورد نظر درگ کنید . یا بعد از انتخاب تصویر پایین صفحه بر روی کلید Insert کلیک کنید .

ویرایش حرفه ای تصاویر در DreamWeaver CS5 
بعد از وارد کردن تصویر در دریم ویور احتیاج داریم که کمی مشخصات یا ابعاد آن را تغییر بدهیم . برای انجام اینکار بعد از کلیک کردن بر روی تصویر ، پنل Properties مربوط به آن فعال می شود . 
در قسمت ID می توانیم با انتخاب یک سلکتور برای تصویر مورد نظر کد جاوا یا تغییرات لازم را بر روی تصویر اعمال کنیم . 
در قسمت Width یا horizontal می توانیم عرض و ارتفاء تصویر را تغییر بدهیم . 
در قسمت Src محل ذخیره تصویر یا روت آن مشخص می شود . 
در قسمت Link می توانیم یک لینک برای تصویر وارد کنیم تا بازدید کننده بعد از کلیک بتواند به صفحه مورد نظر هدایت شود . بعد از اینکه لینک را وارد می کنید گزینه Target هم فعال می شود . می توانیم مشخص کنیم که بعد از کلیک بر روی تصویر بازدید کننده صفحه جدید را در همین صفحه باز کند یا در صفحه ای جدید . 
از دیگر کادرهایی که بسیار کاربردی می باشد می توان به V Space و H space اشاره کرد . این دو کادر برای فاصله تصویر از محتوا بکار می رود . فرض کنید می خواهید تصویر شما از سمت راست که متن تایپ شده است 10 پیکسل فاصله داشته باشد . 
در قسمت آخر هم کادر Border می باشد . در این کادر می توانیم با وارد کردن عدد مورد نظر یک خط به صورت حاشیه به تصویر اضافه کنیم .