آموزش تصاویر Responsive

مقدمه Introduction

• خوش آمدی Welcome

• این دوره برای کیست؟ Who is this course for?

1. تصاویر پاسخگو: مقدمه 1. Responsive Images: An Introduction

• نحوه کار بر روی وب How images on the web work

• تصاویر پاسخگو چگونه کار می کنند How responsive images work

• ویژگی ها و اصطلاحات جدید برای تصاویر پاسخگو New attributes and terminology for responsive images

2. ساخت تصاویر پاسخگو با کار با Picturefill 2. Making Responsive Images Work with Picturefill

• Picturefill چیست؟ What is Picturefill?

• افزودن Picturefill به سایت خود Adding Picturefill to your site

• تست کنید تا مطمئن شوید که Picturefill کار می کند Testing to make sure Picturefill works

3. ایجاد عکس العمل منظم 3. Making Regular Images Responsive

• چه موقع از تصاویر پاسخگو با استفاده کنید When to use responsive images with the <img> tag

• تهیه تصاویر برای نمایشگر پاسخگو Preparing images for responsive display

• معرفی srcset و w Introducing srcset and w

• با استفاده از srcset و w Using srcset and w

• معرفی اندازه ها Introducing sizes

• با استفاده از اندازه Using sizes

• طرح بندی پیشرفته با srcset و اندازه Advanced layouts with srcset and sizes

• چگالی وضوح وضوح با x Targeting resolution density with x

4. تصاویر پاسخگو برای جهت هنری 4. Responsive Images for Art Direction

• معرفی عنصر Introducing the <picture> element

• نقاط شکست و تغییرات طرح را برای تصاویر خود تعیین کنید Identifying breakpoints and layout changes for your images

• تهیه تصاویر برای Preparing images for <picture> element

• با استفاده از عنصر Using the <picture> element

• چالش هایی با تصاویر پاسخگو در جهت هنر Challenges with responsive images in art direction

5. فراتر از TR... 5. Beyond Traditional Image Formats

• با استفاده از این عنصر برای خطاهای مختلف تصویر Using the <picture> element for image type fallbacks

5. فراتر از قالب های سنتی تصویر Going Further

• تصاویر پاسخگو بخشی از دنیای جدید RWD هستند Responsive images are part of the new world of RWD