اطلاعات دوره
طراحی های خلاقانه رابط کاربری وب سایت (HTML, CSS, jQuery)
مسیر آموزشی

طراحی های خلاقانه رابط کاربری وب سایت (HTML, CSS, jQuery)

45,000 تومان

بررسی کامل دوره

ranking course dorebin logo3.5/5
وضعیت قیمت: 45,000 تومان
بالاتر از انتظار
منصفانه
ارزان
  • نظرات فراگیران:0 نظر0
  • آموزشگاه:تاپ لرن4.5
  • مدرس:محمود خاوریان4.3
  • زمان:5 ساعت و 35 دقیقه
  • مدرک:ندارد
  • توضیحات:دارد

توضیحات

طراحی های خلاقانه رابط کاربری وب سایت (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 آشنا کند.
دوره طراحی های خلاقانه رابط کاربری وب سایت (HTML, CSS, jQuery) دوره‌ای با امتیاز نهایی 3.5 می‌باشد و توسط دوره بین که موتور جستجوی بهترین دوره‌ های آموزشی می‌باشد، تحلیل، بررسی و امتیازدهی شده است. مدت زمان این دوره 5 ساعت و 35 دقیقه می‌باشد که در تاپ لرن توسط محمود خاوریان مدرس این دوره ارائه شده است. قابل توجه است که این دوره مدرک ندارد و دوره مذکور 45,000 تومان می‌باشد.
همچنین می‌توانید با کلیک بر روی دکمه شروع یادگیری به آموزشگاه ارائه‌دهنده متصل شوید و دوره طراحی های خلاقانه رابط کاربری وب سایت (HTML, CSS, jQuery) را تهیه نمایید.
علاوه بر این، شما عزیزان می‌توانید همه دوره‌های طراحی وب‌سایت سراسر اینترنت را در صفحه طراحی وب‌سایت در دوره‌بین مشاهده، مقایسه و بهترین دوره از نظر کیفیت و قیمت را به آسانی انتخاب نمایید.

نمایش بیشتر

نظرات فراگیران

امیراسماعیل پرتوی

سلام عرض احترام به استاد محترم به عنوان یک برنامه نویس حرفه ای خدمتتان عرض می شود که درس فوق العاده عالی بود. من خیلی چیزها یاد گرفتم. از بابت زحمات شما قدردانی می کنم و سپاسگزارم.

حسین رنجبر

سلام استاد وقت بخیر ببخشید در رابطه با درس سوم "منوی واکنشگرا" که از لحاظ عددی میشه قسمت های 9 ، 10 ، 11 اشتباه هست. من هم تو خود سایت نگاه کردم هم توی فایل های دانلودی ولی توی هیچ کدوم قسمت دوم درس 3 یعنی فایل شماره 10 ادامه ی درس منوی واکنشگرا نیست و فیلم شماره 11 هم رفته اسلایدر عکس رو توضیح داده!

ابوالفضل سوری

شما که چیزهای زیادی بلدید میشه بگید که با چه آموزشی میشه یه سایت مدرسه ای ساخت و برای هر دانش آموز یک صفحه شخصی متفاوت داشته باشه و بشه واسه هر دانش آموز نمرش رو ارسال کرد؟؟ چه راهکاری رو پیشنهاد میکنید؟؟

دانیال نصر

سلام ، دوره php از اقای باغ شیخی و گام های بعدی اون به شما کمک میکنه

ابوالفضل سوری

سلام ، میشه با این آمورش مثل یک مدرسه واسه هر دانش آموز صفحه شخصی ساخت و نمره ها رو به صورت فایل برای دانش آموزان فرستاد؟

نمایش بیشتر

دوره‌های مشابه

مطالب دوست‌داشتنی