مخصوص اعضای ویژه 
قیمت این دوره با تخفیف 70% : 45,000 تومان مهلت استفاده از این تخفیف تا :
قیمت این دوره: 150,000 45,000 تومان
- مدرس دوره : محمود خاوریان ( رزومه )
- تعداد ویدیوها : 39 ویدیو
- مدت زمان دوره : 5:35:00
- سطح دوره : مقدماتی
- وضعیت دوره : به اتمام رسیده
- تاریخ آخرین بروزرسانی : 1401/10/25
.jpg)
طراحی های خلاقانه رابط کاربری وب سایت (HTML, CSS, jQuery)
در این دوره به صورت پروژه محور روش ساخت 10 رابط کاربری متنوع و جذاب وب سایت ها آموزش داده می شود. اگر با HTML و CSS آشنایی دارید، اما درباره کاربردهای عناصر HTML و خصوصیات آنها آشنایی کافی ندارید، این دوره مناسب شماست. درس های این دوره به صورت عملی از تگ های HTML استفاده کرده، خصوصیات CSS را به کار می گیرند و به طور قدم به قدم پروژه های مطرح شده را طراحی می کنند. دلیل استفاده از کلمه خلاقانه در نام دوره این است که در حالت عادی و برای امور آموزشی، منوها، فرم های ورود به سایت، گالری تصاویر و سایر رابط های کاربری که در این دوره مطرح می شوند، بدون جلوه های بصری و گرافیکی خاصی طراحی می شوند، اما در این دوره از انواع جذابیت های گرافیکی و جلوه های بصری برای ساخت این رابط ها استفاده می شود.
در درس اول، نحوه ساخت یک کادر جستجوی انیمیشنی را فرا می گیرید. این کادر جستجو، ابتدا به صورت یک دایره است که درون آن یک آیکن از ذره بین قرار دارد. در صورتی که روی ذره بین کلیک کنیم، کادر جستجو باز می شود که این کار با افزایش پهنای آن انجام می شود. در این کادر متنی می توانیم متن موردنظر برای جستجو را وارد کنیم. همچنین آیکن ذره بین هم به یک دایره سبز رنگ بزرگ تبدیل می شود، با یک علامت ضربدر که به معنای این است که با کلیک کردن روی آن، کادر بسته می شود.
در درس دوم، نحوه ساخت یک فرم ورود/ثبت نام آموزش داده می شود. این فرم به دو بخش تقسیم می شود. بخش سمت چپ حاوی یک متن و یک تصویر بوده و بخش سمت راست حاوی دو سربرگ یا زبانه به نام های REGISTER و LOGIN می باشد. ابتدا سربرگ REGISTER که برای ثبت نام می باشد، فعال و قابل نمایش است که حاوی سه کادر متنی برای نام کاربری، ایمیل و کلمه عبور می باشد. با کلیک کردن روی عبارت LOGIN این سربرگ فعال می شود که حاوی دو کادر متنی ایمیل و کلمه عبور است.
درس سوم دوره اختصاص دارد به نحوه ساخت یک منوی افقی واکنش گرا (Responsive)، به این صورت که در دستگاه های دارای پهنای صفحه نمایش کوچک تر از 768 پیکسل منو را پنهان کرده و به جای آن، یک آیکن نمایش می دهیم. در صورتی که کاربر روی این آیکن کلیک کند، آیتم های منو به صورت یک لیست عمودی نمایش داده می شوند. در دستگاه هایی که پهنای صفحه نمایش آنها بیشتر از 768 پیکسل است نیز منو در حالت عادی و به صورت افقی نمایش داده می شود.
در چهارمین درس این دوره نحوه ساخت یک اسلایدر تصاویر آموزش داده می شود. اسلایدرها چند تصویر را در یک قاب نمایش می دهند و معمولاً به کاربر امکان می دهند با استفاده از دکمه ها بتواند تصویر فعلی را تغییر دهد. برای ساخت اسلایدر این درس، از پنج تصویر استفاده شده و در زیر تصویر نمایش داده شده، پنج دکمه مستطیلی که هرکدام نشان دهنده یکی از تصاویر می باشند، قرار داده می شود. برای مشخص شدن اینکه تصویر کدام یک از دکمه ها نمایش داده شده، دکمه مربوط به تصویر فعلی به صورت توپُر و سایر دکمه ها به صورت توخالی نشان داده می شوند. همچنین برای جلو و عقب رفتن بین تصاویر نیز از دو دکمه جهتی در سمت چپ و راست کادر اسلایدر استفاده می کنیم.
در درس پنجم نحوه ساخت یک لیست پایین افتادنی اعلانات (Notification) آموزش داده می شود. ممکن است در سایت هایی که عضو می باشید، با نمونه هایی از این رابط کاربری مواجه شده باشید. در این نوع رابط کاربری، معمولاً آیکنی از یک زنگوله نمایش داده می شود که با کلیک کردن روی آن، لیستی از پیغام هایی که اخیراً دریافت شده، نمایش داده می شود. در صورتی که کاربر مجدداً روی زنگوله کلیک کند، لیست بسته می شود.
درس ششم به آموزش ساخت یک Side bar (نوار کناری) اختصاص دارد که از آن برای نمایش آیکن و نام شبکه های اجتماعی مشهور استفاده می کنیم. در این پروژه، در لبه سمت چپ صفحه ابتدا فقط آیکن شبکه های اجتماعی نمایش داده می شود و در صورتی که کاربر اشاره گر ماوس خود را روی یکی از آیکن ها منتقل کند، پهنای سلول حاوی آن آیکن افزایش می یابد تا در کنار آیکن، نام شبکه اجتماعی مذکور نیز نمایش داده شود.
در درس هفتم نحوه ساخت جدول قیمت ها آموزش داده می شود. حتماً با نمونه هایی از این نوع رابط کاربری مواجه شده اید. توسط این نوع رابط کاربری، چند کادر برای مقایسه کردن انواع کالاها یا خدمات نمایش داده می شود و کاربر می تواند با تصمیم گیری درباره آنها اقدام به خرید کند. در پروژه این درس قصد داریم یک جدول قیمت ها از چند نوع سرویس نمایش دهیم. هر ستون جدول حاوی یک آیکن، عنوان سرویس، هزینه سرویس و مشخصات آن است. در پایان هر ستون نیز از یک دکمه برای خرید سرویس استفاده می کنیم.
در درس هشتم نحوه ساخت یک گالری تصویر آموزش داده می شود. در این گالری، با استفاده از چند دکمه کاری می کنیم که تصاویر به صورت فیلتر شده نمایش داده شوند، به این صورت که دو دسته بندی برای تصاویر در نظر می گیریم: تصاویر گوشی و تصاویر دوربین. برای هر دسته بندی دکمه ای در نظر می گیریم و یک دکمه دیگر هم با عنوان all برای نمایش تمام تصاویر، چه دوربین و چه گوشی ایجاد می کنیم. با بارگذاری صفحه تمام تصاویر نمایش داده می شوند. با کلیک کردن روی دکمه Mobile، فقط تصاویر گوشی و با کلیک کردن روی دکمه Camera، فقط تصاویر دوربین نمایش داده می شوند. برای نمایش داده شدن تمام تصاویر نیز می توانیم روی دکمه all کلیک کنیم.
درس نهم این دوره به آموزش ساخت یک کارت پروفایل انیمیشنی اختصاص دارد. این کارت پروفایل حاوی یک تصویر، نام و نشانی و توضیحاتی درباره تخصص فرد دارای کارت پروفایل می باشد. همچنین دو دکمه ارسال پیغام و دنبال کردن در پایین کارت و سه آیکن برای دنبال کردن فرد در شبکه های اجتماعی را در گوشه بالا سمت چپ کارت نمایش می دهیم.
در دهمین و آخرین درس این دوره نیز نحوه ساخت یک منوی جذاب انیمیشنی آموزش داده می شود. منویی که می توانیم به آن نام "منوی بازشو" یا "منوی گسترشی" را هم بدهیم، به این صورت است که ابتدا به صورت یک کادر کوچک مستطیلی با گوشه های گرد، نمایش داده می شود. در صورتی که روی آن کلیک کنیم، منو به طور افقی باز شده و آیتم های آن، نمایش داده می شوند.
امیدوارم این دوره بتواند شما را هرچه بیشتر با زبان نشانه گذاری HTML، دستورات قالب بندی CSS و کدهای jQuery آشنا کند.
فهرستـــ ویدیوها
مدت زمان دوره 5:35:00با مشاهده آنلاین جلسات در سایت ، هزینه اینترنت شما به صورت نیم بها محاسبه خواهد شد.
2
درس اول: فرم جستجوی انیمیشنی (قسمت اول)
00:10:18
در این درس، نحوه ساخت یک کادر جستجوی انیمیشنی را فرا می گیرید. این کادر جستجو، ابتدا به صورت یک دایره است که درون آن یک آیکن از ذره بین قرار دارد. در صورتی که روی ذره بین کلیک کنیم، کادر جستجو باز می شود که این کار با افزایش پهنای آن انجام می شود. در این کادر متنی می توانیم متن موردنظر برای جستجو را وارد کنیم. همچنین آیکن ذره بین هم به یک دایره سبز رنگ بزرگ تبدیل می شود، با یک علامت ضربدر که به معنای این است که با کلیک کردن روی آن، کادر بسته می شود.
3
درس اول: فرم جستجوی انیمیشنی (قسمت دوم)
00:09:12
در درس اول، نحوه ساخت یک کادر جستجوی انیمیشنی را فرا می گیرید. این کادر جستجو، ابتدا به صورت یک دایره است که درون آن یک آیکن از ذره بین قرار دارد. در صورتی که روی ذره بین کلیک کنیم، کادر جستجو باز می شود که این کار با افزایش پهنای آن انجام می شود. در این کادر متنی می توانیم متن موردنظر برای جستجو را وارد کنیم. همچنین آیکن ذره بین هم به یک دایره سبز رنگ بزرگ تبدیل می شود، با یک علامت ضربدر که به معنای این است که با کلیک کردن روی آن، کادر بسته می شود.
4
درس اول: فرم جستجوی انیمیشنی (قسمت سوم و پایانی)
00:19:14
در درس اول، نحوه ساخت یک کادر جستجوی انیمیشنی را فرا می گیرید. این کادر جستجو، ابتدا به صورت یک دایره است که درون آن یک آیکن از ذره بین قرار دارد. در صورتی که روی ذره بین کلیک کنیم، کادر جستجو باز می شود که این کار با افزایش پهنای آن انجام می شود. در این کادر متنی می توانیم متن موردنظر برای جستجو را وارد کنیم. همچنین آیکن ذره بین هم به یک دایره سبز رنگ بزرگ تبدیل می شود، با یک علامت ضربدر که به معنای این است که با کلیک کردن روی آن، کادر بسته می شود.
5
درس دوم: فرم ورود/ثبت نام (قسمت اول)
00:08:51
در درس دوم، نحوه ساخت یک فرم ورود/ثبت نام آموزش داده می شود. این فرم به دو بخش تقسیم می شود. بخش سمت چپ حاوی یک متن و یک تصویر بوده و بخش سمت راست حاوی دو سربرگ یا زبانه به نام های REGISTER و LOGIN می باشد. ابتدا سربرگ REGISTER که برای ثبت نام می باشد، فعال و قابل نمایش است که حاوی سه کادر متنی برای نام کاربری، ایمیل و کلمه عبور می باشد. با کلیک کردن روی عبارت LOGIN این سربرگ فعال می شود که حاوی دو کادر متنی ایمیل و کلمه عبور است.
6
درس دوم: فرم ورود/ثبت نام (قسمت دوم)
00:07:53
در درس دوم، نحوه ساخت یک فرم ورود/ثبت نام آموزش داده می شود. این فرم به دو بخش تقسیم می شود. بخش سمت چپ حاوی یک متن و یک تصویر بوده و بخش سمت راست حاوی دو سربرگ یا زبانه به نام های REGISTER و LOGIN می باشد. ابتدا سربرگ REGISTER که برای ثبت نام می باشد، فعال و قابل نمایش است که حاوی سه کادر متنی برای نام کاربری، ایمیل و کلمه عبور می باشد. با کلیک کردن روی عبارت LOGIN این سربرگ فعال می شود که حاوی دو کادر متنی ایمیل و کلمه عبور است.
7
درس دوم: فرم ورود/ثبت نام (قسمت سوم)
00:09:53
در درس دوم، نحوه ساخت یک فرم ورود/ثبت نام آموزش داده می شود. این فرم به دو بخش تقسیم می شود. بخش سمت چپ حاوی یک متن و یک تصویر بوده و بخش سمت راست حاوی دو سربرگ یا زبانه به نام های REGISTER و LOGIN می باشد. ابتدا سربرگ REGISTER که برای ثبت نام می باشد، فعال و قابل نمایش است که حاوی سه کادر متنی برای نام کاربری، ایمیل و کلمه عبور می باشد. با کلیک کردن روی عبارت LOGIN این سربرگ فعال می شود که حاوی دو کادر متنی ایمیل و کلمه عبور است.
8
درس دوم: فرم ورود/ثبت نام (قسمت چهارم و پایانی)
00:14:04
در درس دوم، نحوه ساخت یک فرم ورود/ثبت نام آموزش داده می شود. این فرم به دو بخش تقسیم می شود. بخش سمت چپ حاوی یک متن و یک تصویر بوده و بخش سمت راست حاوی دو سربرگ یا زبانه به نام های REGISTER و LOGIN می باشد. ابتدا سربرگ REGISTER که برای ثبت نام می باشد، فعال و قابل نمایش است که حاوی سه کادر متنی برای نام کاربری، ایمیل و کلمه عبور می باشد. با کلیک کردن روی عبارت LOGIN این سربرگ فعال می شود که حاوی دو کادر متنی ایمیل و کلمه عبور است.
9
درس سوم: نحوه ساخت یک منوی افقی Responsive یا واکنش گرا (قسمت اول)
00:10:22
درس سوم دوره اختصاص دارد به نحوه ساخت یک منوی افقی واکنش گرا (Responsive)، به این صورت که در دستگاه های دارای پهنای صفحه نمایش کوچک تر از 768 پیکسل منو را پنهان کرده و به جای آن، یک آیکن نمایش می دهیم. در صورتی که کاربر روی این آیکن کلیک کند، آیتم های منو به صورت یک لیست عمودی نمایش داده می شوند. در دستگاه هایی که پهنای صفحه نمایش آنها بیشتر از 768 پیکسل است نیز منو در حالت عادی و به صورت افقی نمایش داده می شود.
10
درس سوم: نحوه ساخت یک منوی افقی Responsive یا واکنش گرا (قسمت دوم)
00:11:13
درس سوم دوره اختصاص دارد به نحوه ساخت یک منوی افقی واکنش گرا (Responsive)، به این صورت که در دستگاه های دارای پهنای صفحه نمایش کوچک تر از 768 پیکسل منو را پنهان کرده و به جای آن، یک آیکن نمایش می دهیم. در صورتی که کاربر روی این آیکن کلیک کند، آیتم های منو به صورت یک لیست عمودی نمایش داده می شوند. در دستگاه هایی که پهنای صفحه نمایش آنها بیشتر از 768 پیکسل است نیز منو در حالت عادی و به صورت افقی نمایش داده می شود.
11
درس سوم: نحوه ساخت یک منوی افقی Responsive یا واکنش گرا (قسمت سوم و پایانی)
00:17:47
درس سوم دوره اختصاص دارد به نحوه ساخت یک منوی افقی واکنش گرا (Responsive)، به این صورت که در دستگاه های دارای پهنای صفحه نمایش کوچک تر از 768 پیکسل منو را پنهان کرده و به جای آن، یک آیکن نمایش می دهیم. در صورتی که کاربر روی این آیکن کلیک کند، آیتم های منو به صورت یک لیست عمودی نمایش داده می شوند. در دستگاه هایی که پهنای صفحه نمایش آنها بیشتر از 768 پیکسل است نیز منو در حالت عادی و به صورت افقی نمایش داده می شود.
12
درس چهارم: نحوه ساخت اسلایدر تصاویر (قسمت اول)
00:08:05
در چهارمین درس این دوره نحوه ساخت یک اسلایدر تصاویر آموزش داده می شود. اسلایدرها چند تصویر را در یک قاب نمایش می دهند و معمولاً به کاربر امکان می دهند با استفاده از دکمه ها بتواند تصویر فعلی را تغییر دهد. برای ساخت اسلایدر این درس، از پنج تصویر استفاده شده و در زیر تصویر نمایش داده شده، پنج دکمه مستطیلی که هرکدام نشان دهنده یکی از تصاویر می باشند، قرار داده می شود. برای مشخص شدن اینکه تصویر کدام یک از دکمه ها نمایش داده شده، دکمه مربوط به تصویر فعلی به صورت توپُر و سایر دکمه ها به صورت توخالی نشان داده می شوند. همچنین برای جلو و عقب رفتن بین تصاویر نیز از دو دکمه جهتی در سمت چپ و راست کادر اسلایدر استفاده می کنیم.
13
درس چهارم: نحوه ساخت اسلایدر تصاویر (قسمت دوم)
00:08:36
در چهارمین درس این دوره نحوه ساخت یک اسلایدر تصاویر آموزش داده می شود. اسلایدرها چند تصویر را در یک قاب نمایش می دهند و معمولاً به کاربر امکان می دهند با استفاده از دکمه ها بتواند تصویر فعلی را تغییر دهد. برای ساخت اسلایدر این درس، از پنج تصویر استفاده شده و در زیر تصویر نمایش داده شده، پنج دکمه مستطیلی که هرکدام نشان دهنده یکی از تصاویر می باشند، قرار داده می شود. برای مشخص شدن اینکه تصویر کدام یک از دکمه ها نمایش داده شده، دکمه مربوط به تصویر فعلی به صورت توپُر و سایر دکمه ها به صورت توخالی نشان داده می شوند. همچنین برای جلو و عقب رفتن بین تصاویر نیز از دو دکمه جهتی در سمت چپ و راست کادر اسلایدر استفاده می کنیم.
14
درس چهارم: نحوه ساخت اسلایدر تصاویر (قسمت سوم)
00:08:14
در چهارمین درس این دوره نحوه ساخت یک اسلایدر تصاویر آموزش داده می شود. اسلایدرها چند تصویر را در یک قاب نمایش می دهند و معمولاً به کاربر امکان می دهند با استفاده از دکمه ها بتواند تصویر فعلی را تغییر دهد. برای ساخت اسلایدر این درس، از پنج تصویر استفاده شده و در زیر تصویر نمایش داده شده، پنج دکمه مستطیلی که هرکدام نشان دهنده یکی از تصاویر می باشند، قرار داده می شود. برای مشخص شدن اینکه تصویر کدام یک از دکمه ها نمایش داده شده، دکمه مربوط به تصویر فعلی به صورت توپُر و سایر دکمه ها به صورت توخالی نشان داده می شوند. همچنین برای جلو و عقب رفتن بین تصاویر نیز از دو دکمه جهتی در سمت چپ و راست کادر اسلایدر استفاده می کنیم.
15
درس چهارم: نحوه ساخت اسلایدر تصاویر (قسمت چهارم و پایانی)
00:14:18
در چهارمین درس این دوره نحوه ساخت یک اسلایدر تصاویر آموزش داده می شود. اسلایدرها چند تصویر را در یک قاب نمایش می دهند و معمولاً به کاربر امکان می دهند با استفاده از دکمه ها بتواند تصویر فعلی را تغییر دهد. برای ساخت اسلایدر این درس، از پنج تصویر استفاده شده و در زیر تصویر نمایش داده شده، پنج دکمه مستطیلی که هرکدام نشان دهنده یکی از تصاویر می باشند، قرار داده می شود. برای مشخص شدن اینکه تصویر کدام یک از دکمه ها نمایش داده شده، دکمه مربوط به تصویر فعلی به صورت توپُر و سایر دکمه ها به صورت توخالی نشان داده می شوند. همچنین برای جلو و عقب رفتن بین تصاویر نیز از دو دکمه جهتی در سمت چپ و راست کادر اسلایدر استفاده می کنیم.
16
درس پنجم: نحوه ساخت لیست پایین افتادنی اعلانات (Notification) (قسمت اول)
00:08:52
در درس پنجم نحوه ساخت یک لیست پایین افتادنی اعلانات (Notification) آموزش داده می شود. ممکن است در سایت هایی که عضو می باشید، با نمونه هایی از این رابط کاربری مواجه شده باشید. در این نوع رابط کاربری، معمولاً آیکنی از یک زنگوله نمایش داده می شود که با کلیک کردن روی آن، لیستی از پیغام هایی که اخیراً دریافت شده، نمایش داده می شود. در صورتی که کاربر مجدداً روی زنگوله کلیک کند، لیست بسته می شود.
17
درس پنجم: نحوه ساخت لیست پایین افتادنی اعلانات (Notification) (قسمت دوم)
00:07:24
در درس پنجم نحوه ساخت یک لیست پایین افتادنی اعلانات (Notification) آموزش داده می شود. ممکن است در سایت هایی که عضو می باشید، با نمونه هایی از این رابط کاربری مواجه شده باشید. در این نوع رابط کاربری، معمولاً آیکنی از یک زنگوله نمایش داده می شود که با کلیک کردن روی آن، لیستی از پیغام هایی که اخیراً دریافت شده، نمایش داده می شود. در صورتی که کاربر مجدداً روی زنگوله کلیک کند، لیست بسته می شود.
18
درس پنجم: نحوه ساخت لیست پایین افتادنی اعلانات (Notification) (قسمت سوم)
00:09:19
در درس پنجم نحوه ساخت یک لیست پایین افتادنی اعلانات (Notification) آموزش داده می شود. ممکن است در سایت هایی که عضو می باشید، با نمونه هایی از این رابط کاربری مواجه شده باشید. در این نوع رابط کاربری، معمولاً آیکنی از یک زنگوله نمایش داده می شود که با کلیک کردن روی آن، لیستی از پیغام هایی که اخیراً دریافت شده، نمایش داده می شود. در صورتی که کاربر مجدداً روی زنگوله کلیک کند، لیست بسته می شود.
19
درس پنجم: نحوه ساخت لیست پایین افتادنی اعلانات (Notification) (قسمت چهارم و پایانی)
00:09:06
در درس پنجم نحوه ساخت یک لیست پایین افتادنی اعلانات (Notification) آموزش داده می شود. ممکن است در سایت هایی که عضو می باشید، با نمونه هایی از این رابط کاربری مواجه شده باشید. در این نوع رابط کاربری، معمولاً آیکنی از یک زنگوله نمایش داده می شود که با کلیک کردن روی آن، لیستی از پیغام هایی که اخیراً دریافت شده، نمایش داده می شود. در صورتی که کاربر مجدداً روی زنگوله کلیک کند، لیست بسته می شود.
20
درس ششم: آموزش ساخت Side bar (قسمت اول)
00:07:01
درس ششم به آموزش ساخت یک Side bar (نوار کناری) اختصاص دارد که از آن برای نمایش آیکن و نام شبکه های اجتماعی مشهور استفاده می کنیم. در این پروژه، در لبه سمت چپ صفحه ابتدا فقط آیکن شبکه های اجتماعی نمایش داده می شود و در صورتی که کاربر اشاره گر ماوس خود را روی یکی از آیکن ها منتقل کند، پهنای سلول حاوی آن آیکن افزایش می یابد تا در کنار آیکن، نام شبکه اجتماعی مذکور نیز نمایش داده شود.
21
درس ششم: آموزش ساخت Side bar (قسمت دوم)
00:09:23
درس ششم به آموزش ساخت یک Side bar (نوار کناری) اختصاص دارد که از آن برای نمایش آیکن و نام شبکه های اجتماعی مشهور استفاده می کنیم. در این پروژه، در لبه سمت چپ صفحه ابتدا فقط آیکن شبکه های اجتماعی نمایش داده می شود و در صورتی که کاربر اشاره گر ماوس خود را روی یکی از آیکن ها منتقل کند، پهنای سلول حاوی آن آیکن افزایش می یابد تا در کنار آیکن، نام شبکه اجتماعی مذکور نیز نمایش داده شود.
22
درس ششم: آموزش ساخت Side bar (قسمت سوم و پایانی)
00:08:38
درس ششم به آموزش ساخت یک Side bar (نوار کناری) اختصاص دارد که از آن برای نمایش آیکن و نام شبکه های اجتماعی مشهور استفاده می کنیم. در این پروژه، در لبه سمت چپ صفحه ابتدا فقط آیکن شبکه های اجتماعی نمایش داده می شود و در صورتی که کاربر اشاره گر ماوس خود را روی یکی از آیکن ها منتقل کند، پهنای سلول حاوی آن آیکن افزایش می یابد تا در کنار آیکن، نام شبکه اجتماعی مذکور نیز نمایش داده شود.
23
درس هفتم: نحوه ساخت جدول قیمت ها (قسمت اول)
00:07:48
در درس هفتم نحوه ساخت جدول قیمت ها آموزش داده می شود. حتماً با نمونه هایی از این نوع رابط کاربری مواجه شده اید. توسط این نوع رابط کاربری، چند کادر برای مقایسه کردن انواع کالاها یا خدمات نمایش داده می شود و کاربر می تواند با تصمیم گیری درباره آنها اقدام به خرید کند. در پروژه این درس قصد داریم یک جدول قیمت ها از چند نوع سرویس نمایش دهیم. هر ستون جدول حاوی یک آیکن، عنوان سرویس، هزینه سرویس و مشخصات آن است. در پایان هر ستون نیز از یک دکمه برای خرید سرویس استفاده می کنیم.
24
درس هفتم: نحوه ساخت جدول قیمت ها (قسمت دوم)
00:07:01
در درس هفتم نحوه ساخت جدول قیمت ها آموزش داده می شود. حتماً با نمونه هایی از این نوع رابط کاربری مواجه شده اید. توسط این نوع رابط کاربری، چند کادر برای مقایسه کردن انواع کالاها یا خدمات نمایش داده می شود و کاربر می تواند با تصمیم گیری درباره آنها اقدام به خرید کند. در پروژه این درس قصد داریم یک جدول قیمت ها از چند نوع سرویس نمایش دهیم. هر ستون جدول حاوی یک آیکن، عنوان سرویس، هزینه سرویس و مشخصات آن است. در پایان هر ستون نیز از یک دکمه برای خرید سرویس استفاده می کنیم.
25
درس هفتم: نحوه ساخت جدول قیمت ها (قسمت سوم)
00:07:56
در درس هفتم نحوه ساخت جدول قیمت ها آموزش داده می شود. حتماً با نمونه هایی از این نوع رابط کاربری مواجه شده اید. توسط این نوع رابط کاربری، چند کادر برای مقایسه کردن انواع کالاها یا خدمات نمایش داده می شود و کاربر می تواند با تصمیم گیری درباره آنها اقدام به خرید کند. در پروژه این درس قصد داریم یک جدول قیمت ها از چند نوع سرویس نمایش دهیم. هر ستون جدول حاوی یک آیکن، عنوان سرویس، هزینه سرویس و مشخصات آن است. در پایان هر ستون نیز از یک دکمه برای خرید سرویس استفاده می کنیم.
26
درس هفتم: نحوه ساخت جدول قیمت ها (قسمت چهارم و پایانی)
00:06:13
در درس هفتم نحوه ساخت جدول قیمت ها آموزش داده می شود. حتماً با نمونه هایی از این نوع رابط کاربری مواجه شده اید. توسط این نوع رابط کاربری، چند کادر برای مقایسه کردن انواع کالاها یا خدمات نمایش داده می شود و کاربر می تواند با تصمیم گیری درباره آنها اقدام به خرید کند. در پروژه این درس قصد داریم یک جدول قیمت ها از چند نوع سرویس نمایش دهیم. هر ستون جدول حاوی یک آیکن، عنوان سرویس، هزینه سرویس و مشخصات آن است. در پایان هر ستون نیز از یک دکمه برای خرید سرویس استفاده می کنیم.
27
درس هشتم: نحوه ساخت گالری تصاویر دارای فیلتر (قسمت اول)
00:09:45
در درس هشتم نحوه ساخت یک گالری تصویر آموزش داده می شود. در این گالری، با استفاده از چند دکمه کاری می کنیم که تصاویر به صورت فیلتر شده نمایش داده شوند، به این صورت که دو دسته بندی برای تصاویر در نظر می گیریم: تصاویر گوشی و تصاویر دوربین. برای هر دسته بندی دکمه ای در نظر می گیریم و یک دکمه دیگر هم با عنوان all برای نمایش تمام تصاویر، چه دوربین و چه گوشی ایجاد می کنیم. با بارگذاری صفحه تمام تصاویر نمایش داده می شوند. با کلیک کردن روی دکمه Mobile، فقط تصاویر گوشی و با کلیک کردن روی دکمه Camera، فقط تصاویر دوربین نمایش داده می شوند. برای نمایش داده شدن تمام تصاویر نیز می توانیم روی دکمه all کلیک کنیم.
28
درس هشتم: نحوه ساخت گالری تصاویر دارای فیلتر (قسمت دوم)
00:05:28
در درس هشتم نحوه ساخت یک گالری تصویر آموزش داده می شود. در این گالری، با استفاده از چند دکمه کاری می کنیم که تصاویر به صورت فیلتر شده نمایش داده شوند، به این صورت که دو دسته بندی برای تصاویر در نظر می گیریم: تصاویر گوشی و تصاویر دوربین. برای هر دسته بندی دکمه ای در نظر می گیریم و یک دکمه دیگر هم با عنوان all برای نمایش تمام تصاویر، چه دوربین و چه گوشی ایجاد می کنیم. با بارگذاری صفحه تمام تصاویر نمایش داده می شوند. با کلیک کردن روی دکمه Mobile، فقط تصاویر گوشی و با کلیک کردن روی دکمه Camera، فقط تصاویر دوربین نمایش داده می شوند. برای نمایش داده شدن تمام تصاویر نیز می توانیم روی دکمه all کلیک کنیم.
29
درس هشتم: نحوه ساخت گالری تصاویر دارای فیلتر (قسمت سوم و پایانی)
00:07:31
در درس هشتم نحوه ساخت یک گالری تصویر آموزش داده می شود. در این گالری، با استفاده از چند دکمه کاری می کنیم که تصاویر به صورت فیلتر شده نمایش داده شوند، به این صورت که دو دسته بندی برای تصاویر در نظر می گیریم: تصاویر گوشی و تصاویر دوربین. برای هر دسته بندی دکمه ای در نظر می گیریم و یک دکمه دیگر هم با عنوان all برای نمایش تمام تصاویر، چه دوربین و چه گوشی ایجاد می کنیم. با بارگذاری صفحه تمام تصاویر نمایش داده می شوند. با کلیک کردن روی دکمه Mobile، فقط تصاویر گوشی و با کلیک کردن روی دکمه Camera، فقط تصاویر دوربین نمایش داده می شوند. برای نمایش داده شدن تمام تصاویر نیز می توانیم روی دکمه all کلیک کنیم.
30
درس نهم: آموزش ساخت یک کارت پروفایل انیمیشنی (قسمت اول)
00:07:57
درس نهم این دوره به آموزش ساخت یک کارت پروفایل انیمیشنی اختصاص دارد. این کارت پروفایل حاوی یک تصویر، نام و نشانی و توضیحاتی درباره تخصص فرد دارای کارت پروفایل می باشد. همچنین دو دکمه ارسال پیغام و دنبال کردن در پایین کارت و سه آیکن برای دنبال کردن فرد در شبکه های اجتماعی را در گوشه بالا سمت چپ کارت نمایش می دهیم.
31
درس نهم: آموزش ساخت یک کارت پروفایل انیمیشنی (قسمت دوم)
00:07:03
درس نهم این دوره به آموزش ساخت یک کارت پروفایل انیمیشنی اختصاص دارد. این کارت پروفایل حاوی یک تصویر، نام و نشانی و توضیحاتی درباره تخصص فرد دارای کارت پروفایل می باشد. همچنین دو دکمه ارسال پیغام و دنبال کردن در پایین کارت و سه آیکن برای دنبال کردن فرد در شبکه های اجتماعی را در گوشه بالا سمت چپ کارت نمایش می دهیم.
32
درس نهم: آموزش ساخت یک کارت پروفایل انیمیشنی (قسمت سوم)
00:08:54
درس نهم این دوره به آموزش ساخت یک کارت پروفایل انیمیشنی اختصاص دارد. این کارت پروفایل حاوی یک تصویر، نام و نشانی و توضیحاتی درباره تخصص فرد دارای کارت پروفایل می باشد. همچنین دو دکمه ارسال پیغام و دنبال کردن در پایین کارت و سه آیکن برای دنبال کردن فرد در شبکه های اجتماعی را در گوشه بالا سمت چپ کارت نمایش می دهیم.
33
درس نهم: آموزش ساخت یک کارت پروفایل انیمیشنی (قسمت چهارم)
00:06:52
درس نهم این دوره به آموزش ساخت یک کارت پروفایل انیمیشنی اختصاص دارد. این کارت پروفایل حاوی یک تصویر، نام و نشانی و توضیحاتی درباره تخصص فرد دارای کارت پروفایل می باشد. همچنین دو دکمه ارسال پیغام و دنبال کردن در پایین کارت و سه آیکن برای دنبال کردن فرد در شبکه های اجتماعی را در گوشه بالا سمت چپ کارت نمایش می دهیم.
34
درس نهم: آموزش ساخت یک کارت پروفایل انیمیشنی (قسمت پنجم و پایانی)
00:04:57
درس نهم این دوره به آموزش ساخت یک کارت پروفایل انیمیشنی اختصاص دارد. این کارت پروفایل حاوی یک تصویر، نام و نشانی و توضیحاتی درباره تخصص فرد دارای کارت پروفایل می باشد. همچنین دو دکمه ارسال پیغام و دنبال کردن در پایین کارت و سه آیکن برای دنبال کردن فرد در شبکه های اجتماعی را در گوشه بالا سمت چپ کارت نمایش می دهیم.
35
درس دهم: نحوه ساخت یک منوی جذاب انیمیشنی (قسمت اول)
00:06:02
در دهمین و آخرین درس این دوره نحوه ساخت یک منوی جذاب انیمیشنی آموزش داده می شود. منویی که می توانیم به آن نام "منوی بازشو" یا "منوی گسترشی" را هم بدهیم، به این صورت است که ابتدا به صورت یک کادر کوچک مستطیلی با گوشه های گرد، نمایش داده می شود. در صورتی که روی آن کلیک کنیم، منو به طور افقی باز شده و آیتم های آن، نمایش داده می شوند.
36
درس دهم: نحوه ساخت یک منوی جذاب انیمیشنی (قسمت دوم)
00:05:51
در دهمین و آخرین درس این دوره نحوه ساخت یک منوی جذاب انیمیشنی آموزش داده می شود. منویی که می توانیم به آن نام "منوی بازشو" یا "منوی گسترشی" را هم بدهیم، به این صورت است که ابتدا به صورت یک کادر کوچک مستطیلی با گوشه های گرد، نمایش داده می شود. در صورتی که روی آن کلیک کنیم، منو به طور افقی باز شده و آیتم های آن، نمایش داده می شوند.
37
درس دهم: نحوه ساخت یک منوی جذاب انیمیشنی (قسمت سوم)
00:06:03
در دهمین و آخرین درس این دوره نحوه ساخت یک منوی جذاب انیمیشنی آموزش داده می شود. منویی که می توانیم به آن نام "منوی بازشو" یا "منوی گسترشی" را هم بدهیم، به این صورت است که ابتدا به صورت یک کادر کوچک مستطیلی با گوشه های گرد، نمایش داده می شود. در صورتی که روی آن کلیک کنیم، منو به طور افقی باز شده و آیتم های آن، نمایش داده می شوند.
38
درس دهم: نحوه ساخت یک منوی جذاب انیمیشنی (قسمت چهارم و پایانی)
00:05:33
در دهمین و آخرین درس این دوره نحوه ساخت یک منوی جذاب انیمیشنی آموزش داده می شود. منویی که می توانیم به آن نام "منوی بازشو" یا "منوی گسترشی" را هم بدهیم، به این صورت است که ابتدا به صورت یک کادر کوچک مستطیلی با گوشه های گرد، نمایش داده می شود. در صورتی که روی آن کلیک کنیم، منو به طور افقی باز شده و آیتم های آن، نمایش داده می شوند.
نظرات کاربران در رابطه با این دوره