آموزش متریال دیزاین در وب

آموزش متریال دیزاین قسمت اول

Materialize مجموعه ای از رابط های کاربری ساخته شده با CSS و HTML و Javascript است.با استفاده از این ابزار می توانید به سادگی و با جذابیت هر چه تمامتر به طراحی و کدنویسی بپردازید.Materialize از قواعد و اصول استاندارد در زمینه وب برخوردار است و پشتیبانی خوبی بر روی مرورگرهای بروز و مدرن دارد. این ابزار به شما کمک می کند که سایتهایی متریال و زیبا، سریع و واکنشگرا بسازید.این ابزار از Google Material Design ایده گرفته و از روی قواعد مربوط به آن ساخته شده است.

توجه: پیش نیاز این دوره درک متوسطی از html و css است.تمام فایل های که باید با متریال کار کنید در کنار فایل آموزشی قرار دارد.

سرفصل های فیلم آموزش متریال در وب

01	نمایش رایگان متریال چیست : متریال دیزاین بیش از حد به سیستم گرید و انیمشین‌ها اهمیت می‌دهد و عمق و سایه‌ها برای المان‌های طراحی شده بسیار مهم است. شاید بتوان گفت ورژن بروز شده طراحی تخت (Flat Design) باشد اما خیلی زیباتر با انیمییشن‌ها و Transition های بسیار زیبا و در عین حال پیچیده. خود گوگل ادعا دارد که زبان جدید طراحی آنها، الهام گرفته از مرکب و کاغذ است. یکی از طراحان مشهور جهان به نام Matias Durate میگوید همانگونه که اجسام در دنیای واقعی قابل حس هستند و طول و عرض و ارتفاع دارند در این نوع طراحی دیجیتال هم باید همین حس‌ها را منتقل کرد. قرار دادن فایل های متریال در html: ما در این قسمت و تمام قسمت ها فایل های کار با متریال و کار عملی که انجام میدهیم را همراه فایل آموزشی در اختیار شما قرار می دهیم ساخت دکمه متریال: در این قسمت یک مثال ساده ,ساخت دکمه به همراه افکت خاصت را توضیح میدهیم
02	نمایش رایگان کار با رنگ ها: در این جلسه ما به طور کامل با رنگ ها و کلاس های مربوطه را توضیح دادیم و جداول رنگ ها هم در اختیار شما همراه فایل اموزش موجود است. کار با card-panel: کارد پنل شناسایی DIV به عنوان یک کارت ساده با سایه ها و لایه ها است.
03	نمایش رایگان کار با Grids: صفحات وب از 12 ستون تشکیل شده اند که توسط grid می توانیم با ستون ها کار کنیم و المان های خود را در مکانی که می خواهیم قرار دهیم. در Grids بندی ما به 3 شیوه می توانیم عمل کنیم: s1 تا s12 برای دستگاه های با نمایش کوچک m1 تا m12 برای دستگاه های با نمایش متوسط l1 تا l12 برای دستگاه های با نمایش بزرگ
04	کار با Grids بخش دوم: در این جلسه چند کار عملی را با Grids بندی یاد خواهیم گرفت,که در ساخت قالب متریال بسیار کاربردی است.
05	آموزش تراز بندی سند ها : کار با valign کار با left کار با left-align کار با left و..... آموزش نمایش یا پنهان کردن المان ها در دستگاهای مختلف: یکی از ویژگی ها مثبت متریالایز خصوصیت نمایش یا پنهان کردن یک شی در دستگاه های مختلف (موبایل و تپلت و کامپیوتر) است این خصوصیت بسیار مفیده برای دوستانی که علاقه دارن قالب های خود را توسط متریالایز پیاده سازی کنند.
06	کار با عکس در متریال: در متریال می توانیم یک سری افکت ها به عکس بدیم , و ریسپانسیو عکس. کار با پخش انلاین فیلم در متریال: در متریال می توانیم یک سری افکت ها به عکس بدیم , و ریسپانسیو فیلم.
07	کار با سایه در متریال: در این قسمت از آموزش به مبحث shadow در متریال می پردازیم , که توسط آن بهتر می توانیم متریال را درک کنیم .سایه ها را می توانیم به تمام المان ها خود در html بدهیم.
08	کار با Table ها در متریال: در این قسمت از آموزش به مبحث جدول ها در متریال می پردازیم , جدول های در در طراحی وب برای نمایش اطلاعات به کار برده می شود که توسط متریال می توانیم افکت های بسیار جالب و رو بسازیم .
09	کار با باتن ها در متریال: در این قسمت از آموزش به مبحث باتن ها و یا دکمه ها می پردازیم و دکمه های با افکت های خاص و به صورت زیر منویی و در موقعیت های مختلف طراحی خواهیم کرد که بسیار کاربر پسند خواهد بود.
10	کار با Chips : می توان برای نشان دهنده بلوک های کوچکی از اطلاعات استفاده کرد. کار با Breadcrumbs : یک راه خوب برای نمایش مکان فعلی شما است.معمولا زمانی استفاده می شود که شما از لایه های متعدد از محتوا در سایت قرار دارید. کار با Footer : قسمت پایینی سایت که توضیحاتی در رابطه با حق نشر سایت ( کپی رایت ) تاریخ افتتاح سایت و ... قرار میگیرد را footer مینامند.
11	کار با form ها : ساخت input و Radio Buttons و Checkboxes و Switches و HTML5 Range و Date Picker در متریال دیزاین با افکت های بسیار زیبا.
12	کار با Pagination : اضافه کردن لینک های صفحه بندی برای کمک به تقسیم کردن محتوای طولانی در قالبتان. کار با Preloader : اگر شما مطلبی دارید که برای بارگذاری آن باید زمان نسبتا طولانی طول بکشد تا لود کامل آن , می توانید از preloader ها استفاده کنید که یک لودینگ بسیار زیبا را می توان ساخت. کار با Collapsible : ساخت منو آکاردئونی که کاربر میتوانید انتخاب کند کدام زیر منو باز باشد و کدام پنهان.
13	ساخت اسلاید شو : ما در متریال به اسانی می توانیم که اسلاید شو زیبا را پیاده سازی کنیم. ساخت Tooltips : راهنمای ابزار کوچک، تعاملی، نکات متنی برای عناصر عمدتا گرافیکی می باشد.

پیش نمایش فیلم آموزش متریال در وب
درس شماره 1 زمان فیلم: 10:25
دانلود مستقیم پیش نمایش - حجم دانلود 17 مگابایت (کلیک کنید +)
درس شماره 2 زمان فیلم: 09:23
دانلود مستقیم پیش نمایش - حجم دانلود 18 مگابایت (کلیک کنید +)
درس شماره 3 زمان فیلم: 10:41
دانلود مستقیم پیش نمایش - حجم دانلود 19 مگابایت (کلیک کنید +)

نظرات کاربران

yas sltn

1403-08-12

سلام خسته نباشین
یک سوال دارم
توی نوشتن فرم میخوام از کاربر عکس درخاست کنم بصورت Browse
چه دستوری استفاده کنم؟

محمدرضا

1403-08-14

[dir=#555]<form action="#">
<div class="file-field input-field">
<div class="btn">
<span>File</span>
<input type="file" multiple>
</div>
<div class="file-path-wrapper">
<input class="file-path validate" type="text" placeholder="Upload one or more files">
</div>
</div>
</form>[/dir]

minoo

1403-08-08

عالی

سامان حسینی

1403-05-17

عالی

بازآوری فهرست دیدگاه‌ها

مدرس

مهندس محمدرضا کیانی

محمدرضا کیانی هستم دانشجوی کارشناسی نرم‌افزارم، در ابتدا کار خودم را با طراحی صفحات وب در فتوشاپ شروع کردم و در ادامه به html ، css ، js ، WordPress و انواع فریمورک های css و js مسلط شدم.