تصاویر واکنش گرا

مدرس Morten Rand-Hendriksen

انتشار 2015/06/05

به‌روز‌رسانی 2015/06/05

مدت زمان 1h 21m

سطح متوسط

فایل تمرینی دارد

آموزش Responsive Images

تصاویر ریسپانسیو تحول بعدی در طراحی وب هستند. با این بهترین سناریوهای واقعی برای پیاده سازی تصاویر واکنش گرا در سایت های تولیدی، نحوه پیاده سازی آنها را امروز بیاموزید. مورتن رند-هندریکسن توضیح می‌دهد که تصاویر واکنش‌گرا چیست و چگونه کار می‌کنند، و نحوه استفاده از Picturefill JavaScript polyfill برای کارکردن تصاویر واکنش‌گرا در مرورگرهایی که هنوز از آنها پشتیبانی نمی‌کنند. سپس دو نوع اصلی عکس‌های واکنش‌گرا را بررسی کنید (با استفاده از تگ با srcset و w و تگ جدید)، و با نمونه‌های کد آماده تولید در پنجره تمرین کار کنید تا تجربه پیاده‌سازی عملی داشته باشید.

Responsive Web Design Web Graphics

Introduction

Welcome ()

Who is this course for? ()

1. Responsive Images: An Introduction

How images on the web work ()

How responsive images work ()

New attributes and terminology for responsive images ()

2. Making Responsive Images Work with Picturefill

What is Picturefill? ()

Adding Picturefill to your site ()

Testing to make sure Picturefill works ()

3. Making Regular Images Responsive

When to use responsive images with the <img> tag ()

Preparing images for responsive display ()

Introducing srcset and w ()

Using srcset and w ()

Introducing sizes ()

Using sizes ()

Advanced layouts with srcset and sizes ()

Targeting resolution density with x ()

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. Beyond Traditional Image Formats

Using the <picture> element for image type fallbacks ()

Going Further

Responsive images are part of the new world of RWD ()

Ex_Files_resp_imgs.zip (10.4 MB)

دانلود فایل فشرده

با توجه به امکانات آموزش و همچنین امکانات بسته انتخاب شده لینک دانلود فایل فشرده آماده خواهد شد. با در نظر داشتن این شرایط لطفا بسته مورد نظر خود را انتخاب کرده و روی دکمه درخواست لینک دانلود کلیک کنید

در حال به روزرسانی اطلاعات

درخواست لینک دانلود

در حال به روزرسانی اطلاعات

لطفا قبل از فعالسازی لینک دانلود به موارد زیر توجه کنید:

پسورد فایل‌های فشرده است.
لینک‌های آماده شده تا 8 روز پس از فعالسازی منقضی خواهند شد.
حجم فایل‌ها تخمینی هستند.
در صورتی که لینک دانلود تا 15دقیقه پس از درخواست آماده نشد، از بخش پشتیبانی پیگیری نمایید.