تبلیغات
برترین وبلاگ آموزش برنامه نویسی - جلسه پنجم:استفاده از تصاویر
 
برترین وبلاگ آموزش برنامه نویسی
درباره وبلاگ


این وبلاگ با هدف بالا بردن سطح برنامه نویسی دانشجویان و کسانی که می خواهند برنامه نویسی را شروع کنند تهیه شده است و سعی خواهد شد تا به بهترین شکل ممکن به کار خود ادامه دهد.امیدوارم بتوانم شما را راهنمایی کنم.

مدیر وبلاگ : محمدرضا اسماعیلی
موضوعات
نظرسنجی
سطح تدریس در این وبلاگ چگونه است؟







آمار وبلاگ
  • کل بازدید :
  • بازدید امروز :
  • بازدید دیروز :
  • بازدید این ماه :
  • بازدید ماه قبل :
  • تعداد نویسندگان :
  • تعداد کل پست ها :
  • آخرین بازدید :
  • آخرین بروز رسانی :
انواع تصویر:

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


فرمت هایی که بیشتر مرورگرهای وب آن را پشتیبانی می کنند عبارتند از GIF, JPEG, PNG و تصاویر وکتور است. برخی از ویژگی های فایل های گرافیکی عبارتند از:


شفافیت / فشرده سازی / انیمیشن / پیشروی


فرمت GIF


این فرمت در سال 1980 و برای طراحی وب سایت ساخته شد که در دهه 1990 ترجیح داده میشد که برای طراحی وب استفاده شود. این فرمت از ساختاری استفاده می کند که به راحتی و به سرعت فایل ها را کم حجم کرده و برای لود شدن سریع بسیار کاربرد دارند.


این فرمت به 255 رنگ محدود است و از ویژگی شفافیت پشتیبانی می کند. همچنین باید اضافه کنیم توسط این فرمت می توان تصاویر محرک ساخت.


مزایای استفاده از فرمت Gif عبارتند از:


قالب قوی برای نمایش عکس ها
دیاگرام ها در این فرمت بهتر دیده میشود
از ویژگی transparency قالب های گرافیکی پشتیبانی میکند
فرمت JPEG


فرمت JPEG میتواند به صورت فشرده ذخیره شود اما نه به صورت رنگ های واقعی یا True color که به صورت 24 بیتی است و در جایی که وضوح تصاویر نیاز است.


برخلاف فرمت GIF فرمت JPEG برای ذخیره شدن میتوانند از سوی کاربران کنترل شوند که بسته به میزان کیفیت و سایز فایل ممکن است متفاوت باشد.


مزایای این فرمت عبارتند از


امکان فشرده سازی بیشتر و در نتیجه دانلود سریعتر
برای استفاده برای عکس ها و طرح های پیچیده تر کیفیت تصویری بهتری را این فرمت ارائه میدهد
امکان پشتیبانی از رنگ های 24 بیتی
فرمت PNG


   PNG فرمت های نسبتا جدید است که به عنوان جایگزینی برای فایل های GIF معرفی شد. این فرمت رنگ های تا 24 بیت را پشتیبانی میکند البته از ویژگی دیگر این فرمت این است که میتوان یک متن تحت عنوان توضیحات را بر روی عکس داشت .


متاسفانه برخی از مرورگرها این فرمت را پشتیبانی نمیکنند و البته امکانات آن هم تحت پوشش برخی از مرورگرها نیست.


مزایای این فرمت عبارتند از


غلبه بر محدودیت رنگ 8 بیتی GIF
اجازه می دهد تا شرح متن از تصویر برای استفاده از موتور های جستجو درج شود
پشتیبانی از ویژگی transparency
نمودارها در این فرمت بهتر از فرمت JPEG دیده میشود
تصاویر گرافیکی وکتور


بیشتر تصاویر وب به صورت شطرنجی هستند یا به صورت بیت مپ (bitmap) که اینگونه تصاویر به صورت نمایش پیکسلی نشان داده میشوند. تصاویر وکتور توسط برنامه های نرم افزاری مانند Adobe Illustrator و Macromedia Freehand که بسته به انتخاب طراح با نرم افزارهای متفاوتی طراحی میشوند. تصاویر وکتور باید به یکی از فرمت های GIF, JPEG یا PNG تبدیل شوند تا برای مرورگرها قابل خواندن باشد.


حال باید بررسی کرد که از کدام فرمت باید استفاده کنید


طراحان سایت باید از فرمت های GIF یا JPEG بیشتر استفاده کنند. اما باید در نظر داشت اندازه ی فایل GIF از JPEG کوچکتر است اما اکثر طراحان وب از فرمت GIF برای تصاویر پس زمینه و باکس ها و مابقی المنت های سایت استفاده میکنند زیرا این المان ها میتوانند از رنگ های 8 بیتی هم استفاده کنند.


فرمت JPEG برای عکس ها و تصاویر با وضوح بالا استفاده میشوند و از فرمت PNG در المان های 8 بیتی وب سایت استفاده میشود درست مانند فرمت GIF. اما فرمت GIF هنوز هم برای تصاویر محرک استفاده میشود.

نتیجه‌گیری:

JPG ,PNG و GIF همگی از معایب و مزایایی برخوردارند اما نکته مهم درک موقعیت مورد نظر برای تشخیص بهترین پسوند فایل است. به عنوان قانونی نانوشته، هنگامی که به تصاویر متحرک نیاز دارید بهتر است از GIF استفاده کنید. فشرده‌سازی JPG فایل هایی با حجم کمتر تولید می‌کند که البته این حجم پایین به قیمت افت کیفیت تمام خواهد شد. PNG نیز فرمتی بهینه برای حفظ کیفیت تصویر در مواقعی است که حجم فایل برای شما اهمیتی ندارد.



استفاده از تصاویر:

<body>
 <img src="مسیر تصویر" alt="توضیخاتی در مورد تصویر">
</body>

برای درج تصویر از تگ <img> استفاده میشه...src مسیر تصویر مورد نظر هست..مثلا میتونه این باشه:

F:\Images\image_name.jpg

alt هم توضیخاتیدر مورد عکسه که با نگه داشتن موس رو تصویر نمایش داده میشه..

خوب همین الان چند تا عکس رو تو صفحه وبتون بزارید و امتحان کنید..عکس ها رو با سایز مختلف انتخاب کنید...مثلا یکیش  100*220..اون یکی 330*228 باشه و ....

بعد از تست کردن میبینید که تصاویر کل صفحه روگرفتن در حالی که شما میخواستید مثلا یه تیکه از صفحه رو اشغال کنن نه کل صفحه رو..برای اینکا باید این کار رو انجام بدید:

<body>
 <img src="pic_mountain.jpg" alt="Mountain View" style="width:304px;height:228px">
</body>



با خاصیت style میتونید به تصاویر عرض و طول بدید...مثلا تصویر بالا با طول 304 پیکسل و عرض 228 پیکسل بهنمایش در میاد...تگ style رو قبلا هم دیدید..تو آینده میگم که چطوری از این تگ استفاده میشه..
تو کد بالا یه بار هم به جای 304px عبارت 304 رو قرار بدید ببینید چی میشه.

یعنی یه همچین چیزی:

<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px">
<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">


جلسه بعد استفاده از تصاویر به عنوان نقشه رو میگم..فعلا




نوع مطلب :
برچسب ها :
لینک های مرتبط :

       نظرات
بیست و دوم آبان 93
محمدرضا اسماعیلی
بیست و پنجم آبان 93 03:02 ب.ظ
سلام دوست عزیز ! مرتضی پاشایی نازنینی بود که از بین ما رفت ، آهنگ های اون برای همیشه در آرشیو خاطرات ماست ، برای عضویت در وبلاگ طرفداران مرتضی پاشایی یه سری به ما بزن.

تو هم عضو شو
فقط با یه تبادل لینک ساده

__000000___00000
_00000000?0000000
_0000000000000000
__00000000000000
____00000000000
_______00000
_________0
________*__000000___00000
_______*__00000000?0000000
______*___0000000000000000
______*____00000000000000
_______*_____00000000000
________*_______00000
_________?________0
_000000___00000___*
00000000?0000000___*
0000000000000000____*
_00000000000000_____*
___00000000000_____*
______00000_______*
________0________*
________*__000000___00000
_______*__00000000?0000000
______*___0000000000000000
______*____00000000000000
______*______00000000000
_______*________00000
________*_________0
_________*________*
_________*_______*
__________*______*
___________*____*
____________*___*
_____________*__*
______________**

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