کار با تصاویر در 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 می باشد . در این کادر می توانیم با وارد کردن عدد مورد نظر یک خط به صورت حاشیه به تصویر اضافه کنیم .