دوره آموزشی چیدمان پاسخگو
2 ساعت 33 دقیقهمتوسط2018-10-24
مدرسین

Clarissa Peterson
Developer, Author, and Speaker, specializing in UX and design strategy
جزئیات دوره
طراحی واکنش گرا مستلزم انطباق وب سایت ها با دستگاهی است که در آن نمایش داده می شود. طرح بندی پاسخگو مهم است و HTML و CSS اکنون ویژگی هایی را ارائه می دهند که ایجاد طرح بندی هایی را که در طیف وسیعی از دستگاه ها و اندازه صفحه نمایش به خوبی کار می کنند، بیش از پیش آسان می کند. در این دوره، کلاریسا پترسون اصول اولیه طراحی طرح بندی وب سایت های پاسخگو با آخرین استانداردها، از جمله CSS Flexbox و Grid را پوشش می دهد. اصول اولیه، مانند کار با ویژگیهای موقعیت و شناور برای تنظیم موقعیت مکانی عناصر روی صفحه را مرور کنید و نحوه استفاده از پرس و جوهای رسانه ای برای به روز رسانی فعال طرح خود را کشف کنید. سپس به CSS Grid بروید، از جمله تراز کردن و مرتب کردن موارد در شبکه، و نحوه کار با ظروف flexbox. در نهایت، یاد بگیرید که یک طرح 12 ستونی ایجاد کنید که Grid و Flexbox را در یک طرح ترکیب می کند.
اهداف یادگیری
طراحی واکنش گرا چیست؟
ساختار صفحه پاسخگو
قابلیت دسترسی و طراحی پاسخگو
استفاده از پرس و جوهای رسانه ای
طراحی با شبکه CSS
طراحی با CSS Flexbox
اهداف یادگیری
طراحی واکنش گرا چیست؟
ساختار صفحه پاسخگو
قابلیت دسترسی و طراحی پاسخگو
استفاده از پرس و جوهای رسانه ای
طراحی با شبکه CSS
طراحی با CSS Flexbox
مهارت ها
Responsive Web DesignHTMLWeb StandardsWeb DesignFront-End Web DevelopmentWeb DevelopmentOpen SourceDeep Dive (X:Y)
سرفصل ها
0. مقدمه
- 01 - با طراحی واکنشگرا به چند پلتفرم بروید
- 02 - آنچه باید بدانید
1. ساختار اصلی صفحه
- 03 - Viewport
- 04 - CSS مورد نیاز
- 05 - نمایش ویژگی
- 06 - موقعیت یابی
- 07 - شناور
- 08 - واحد
2. چیدمان پاسخگو
- 09 - طراحی واکنش گرا
- 10 - پرسشهای رسانه ای
- 11 - فلکس باکس و گرید
- 12 - دسترسی
- 13 - پشتیبانی از مرورگر
3. طرح بندی شبکه ای
- 14 - معرفی CSS Grid
- 15 - تعریف سطر و ستون
- 16 - شکاف شبکه
- 17 - اندازه سطرها و ستون ها
- 18 - قرار دادن اقلام شبکه ای
- 19 - نمای کلی تراز شبکه
- 20 - تراز کردن مسیرها
- 21 - تراز کردن آیتمهای شبکه در مسیرها
- 22 - تراز کردن آیتمهای شبکه ای جداگانه
- 23 - ستونهای متغیر
- 24 - مناطق قالب شبکه
- 25 - نامگذاری خطوط شبکه
- 26 - سفارش اقلام شبکه
- 27 - جریان شبکه و مسیرهای ضمنی
- 28 - چالش - جعبه رنگین کمان
- 29 - راه حل - جعبه رنگین کمان
4. فلکس باکس
- 30 - تعریف ظرف فلکس باکس
- 31 - جهت
- 32 - پیچیدن
- 33 - سفارش اقلام فلکس
- 34 - نمای کلی تراز Flexbox
- 35 - تراز کردن اقلام در محور اصلی
- 36 - تراز کردن اقلام در محور متقاطع
- 37 - تراز کردن خطوط در محور متقاطع
- 38 - تراز کردن اقلام فلکس منفرد
- 39 - توزیع فضا برای اقلام انعطاف پذیر
- 40 - چالش - شناور به فلکس باکس
- 41 - راه حل - شناور به فلکس باکس
5. طراحی چیدمان
- 42 - محور قرار دادن محتوا
- 43 - طرح 3 ستونی با مناطق شبکه ای، قسمت 1
- 44 - طرح 3 ستونی با مناطق شبکه ای، قسمت 2
- 45 - طرح 3 ستونی با فلکس باکس
- 46 - تنظیم طرح 12 ستونی
- 47 - طرح 12 ستونی برای نمای متوسط
- 48 - طرح 12 ستونی برای درگاههای دید گسترده
نتیجه
- 49 - مراحل بعدی
دوره های مرتبط
- دوره آموزشی CSS: طرحبندیهای پیشرفته با Grid
- دوره آموزشی ساخت وبسایتهای ریسپانسیو با استفاده از Canva
- دوره آموزشی ساخت وب سایت های واکنش گرا با Canva آپدیت (2022)
- دوره آموزشی سطح بالا: طرح بندی CSS
- دوره آموزشی کاتینگ اج CSS
- دوره آموزشی CSS: Combining Grid and Flexbox
- دوره آموزشی ساخت وب سایت های پویا با استفاده از AWS Lambdas
- دوره آموزشی چیدمان های CSS: از Float تا Flexbox و Grid