دوره آموزشی تصاویر واکنش گرا
1 ساعت 22 دقیقهمتوسط2015-06-05
مدرسین
Morten Rand-Hendriksen
Senior Staff Instructor, Speaker, Web Designer, and Software Developer
جزئیات دوره
تصاویر واکنش گرا تکامل بعدی در طراحی وب هستند. نحوه پیاده سازی آنها را امروز با این بهترین سناریوهای عملی برای پیاده سازی تصاویر پاسخگو در سایت های تولیدی بیاموزید. Morten Rand-Hendriksen توضیح می دهد که تصاویر واکنش گرا چیست و چگونه کار می کنند و چگونه می توان از polyfill Picturefill JavaScript برای کارکردن تصاویر پاسخگو در مرورگرهایی که هنوز آنها را پشتیبانی نمی کنند، استفاده کرد. سپس دو نوع اصلی از تصاویر پاسخگو (با استفاده از برچسب ![]()
با srcset و w و برچسب جدید) را کاوش کنید، و با نمونه های کد آماده تولید در پنجره تمرین کار کنید تا تجربه پیاده سازی عملی را بدست آورید.
اهداف یادگیری
نحوه پاسخگویی به تصاویر
افزودن Picturefill به سایت شما
واکنشگرا کردن تصاویر معمولی
استفاده از & lt؛ picture & gt؛ عنصر
شناسایی نقاط شکست و تغییرات طرح
استفاده از & lt؛ picture & gt؛ عناصر مورد نیاز برای نوع پشتیبان تصویر
اهداف یادگیری
نحوه پاسخگویی به تصاویر
افزودن Picturefill به سایت شما
واکنشگرا کردن تصاویر معمولی
استفاده از & lt؛ picture & gt؛ عنصر
شناسایی نقاط شکست و تغییرات طرح
استفاده از & lt؛ picture & gt؛ عناصر مورد نیاز برای نوع پشتیبان تصویر
مهارت ها
Responsive Web DesignWeb GraphicsCSSWeb DesignWeb DevelopmentOpen SourceOne-Off
سرفصل ها
0. مقدمه
- 01 - خوش آمدید
- 02 - این دوره برای چه کسانی است
1. تصاویر پاسخگو - مقدمه
- 03 - نحوه عملکرد تصاویر در وب
- 04 - تصاویر واکنشگرا چگونه کار میکنند
- 05 - ویژگیها و اصطلاحات جدید برای تصاویر واکنش گرا
2. ساخت تصاویر واکنشگرا با Picturefill
- 06 - Picturefill چیست
- 07 - افزودن Picturefill به سایت شما
- 08 - آزمایش برای اطمینان از کارکرد Picturefill
3. پاسخگو ساختن تصاویر معمولی
- 09 - چه زمانی از تصاویر واکنشگرا با برچسب < img> استفاده کنید
- 10 - آماده سازی تصاویر برای نمایش واکنش گرا
- 11 - معرفی srcset و w
- 12 - استفاده از srcset و w
- 13 - معرفی سایزها
- 14 - استفاده از اندازه ها
- 15 - طرح بندی پیشرفته با srcset و اندازه
- 16 - تراکم وضوح هدف با x
4. تصاویر پاسخگو برای هنر جهت
- 17 - معرفی عنصر < picture>
- 18 - شناسایی نقاط شکست و تغییرات چیدمان برای تصاویر شما
- 19 - آماده سازی تصاویر برای عنصر < picture>
- 20 - استفاده از عنصر < picture>
- 21 - چالش با تصاویر واکنشگرا در جهت هنری
5. فراتر از فرمتهای تصویر سنتی
- 22 - استفاده از عنصر < picture> برای بازگرداندن نوع تصویر
رفتن به جلو
- 23 - تصاویر واکنش گرا بخشی از دنیای جدید RWD هستند
دوره های مرتبط
- دوره آموزشی CSS: طرحبندیهای پیشرفته با Grid
- دوره آموزشی ساخت وبسایتهای ریسپانسیو با استفاده از Canva
- دوره آموزشی ساخت وب سایت های واکنش گرا با Canva آپدیت (2022)
- دوره آموزشی سطح بالا: طرح بندی CSS
- دوره آموزشی کاتینگ اج CSS
- دوره آموزشی CSS: Combining Grid and Flexbox
- دوره آموزشی ساخت وب سایت های پویا با استفاده از AWS Lambdas
- دوره آموزشی چیدمان های CSS: از Float تا Flexbox و Grid