در طراحی رابط کاربری، HTML ساختار را ایجاد می کند و CSS به این ساختار شکل داده و ظاهر و نحوه نمایش آن ها را مشخص می کند. ما در این فرادرس، قصد داریم تا یکی از فریمورک های ارائه شده برای CSS با نام W3.CSS را بررسی کنیم. فریمورک W3.CSS فریمورکی است که توسط وب سایت W3Schools برنامه نویسی شده و به صورت رایگان در اختیار افراد قرار گرفته است. از مزایای فریمورک W3.CSS می توان به واکنش گرا بودن این فریمورک اشاره کرد. همچنین، این فریمورک، تنها از دستورات استاندارد CSS استفاده می کند و مانند سایر فریمورک ها نظیر: Bootstrap و یاFoundation، نیازی به استفاده از جاوا اسکریپت و یا jQuery ندارد.
آموزش طراحی رابط کاربری وب سایت با فریم ورک W3schools) W3.CSS)
ایشان به عنوان برنامه‌نویس تحت وب فعالیت خود را آغاز کرده و همچنین به عنوان مدرس، در موسسه‌های آموزشی مختلف به تدریس تکنولوژی‌ها و زبان‌های برنامه‌نویسی تحت وب می‌پردازند.
توضیحات تکمیلی
هر وب سایت آنلاین را می توان در دو بخش اصلی Front End و Back End خلاصه کرد. به بیان ساده، بخش Front End، هر چیزی که توسط کاربر مشاهده می شود را شامل می شود. فرم ها، منوها، شکل المان ها، نحوه چیدمان صفحه و شکل ظاهری المان های صفحه وب سایت اما Back End در پشت وب سایت فعال بوده و تمامی عملیات مرتبط با بخش های مختلف سایت توسط این بخش انجام شده و نتیجه اجرای این عملیات، به صورت کدهای مفهومی HTML و CSS برای مرورگر ارسال شده و مرورگر، نتیجه را به کاربر نمایش می دهد، اما بحث اصلی ما، در مورد رابط کاربری وب سایت و یا همان Front End است.
همانقدر که کدنویسی صحیح و مناسب بودن عملیات Back End یک وب سایت مطرح است، رابط کاربری سایت نیز از اهمیت بالایی برخوردار است زیرا کاربر، از طریق رابط کاربری با وب سایت ما در ارتباط بوده و هر چه رابط کاربری زیباتر و دسترسی به المان ها ساده تر باشد، رضایت کاربران از وب سایت بالاتر بوده و احتمال بازگشت کاربر به وب سایت بالاتر خواهد بود.
به منظور طراحی رابط کاربری، تاکنون ابزارها و فریم ورک ها و نرم افزارهای متعددی، از کتابخانه ها و فریم ورک های برنامه نویسی مانند بوت استرپ (Bootstrap) تا نرم افزارهایی همچون Adobe Muse و… ارائه شده است.
در طراحی رابط کاربری، HTML ساختار را ایجاد می کند و CSS به این ساختار شکل داده و ظاهر و نحوه نمایش آن ها را مشخص می کند. ما در این فرادرس، قصد داریم تا یکی از فریم ورک های ارائه شده برای CSS با نام W3.CSS را بررسی کنیم.
فریم ورک W3.CSS فریم ورکی است که توسط وب سایت W3Schools برنامه نویسی شده و به صورت رایگان در اختیار افراد قرار گرفته است. از مزایای فریم ورک W3.CSS می توان به واکنش گرا بودن این فریم ورک اشاره کرد، همچنین این فریم ورک، تنها از دستورات استاندارد CSS استفاده می کند و مانند سایر فریم ورک ها نظیر: Bootstrap و یا Foundation، نیازی به استفاده از جاوااسکریپت و یا jQuery ندارد.
فهرست سرفصل‌ها و رئوس مطالب مطرح شده در اين مجموعه آموزشی، در ادامه آمده است:
- درس یکم: شروع به کار
- درس دوم: شبکه Grid
- درس سوم: سایزدهی به المان ها
- کار با Container
- کار با Padding
- کار با Margin
- کلاس های موقعیت دهی محتوا
- کار با Layout های آماده
- قابلیت Responsive
- درس چهارم: تایپوگرافی در W3.CSS
- کار با فونت ها
- کار با متن ها
- کلاس های ایجاد یادداشت
- کلاس های ایجاد نقل قول
- کلاس های Tag
- درس پنجم: کار با رنگ ها
- درس ششم: کار با حاشیه ها
- درج حاشیه
- ایجاد انحنا در حاشیه ها
- درس هفتم: ایجاد Alert
- درس هشتم: ایجاد کادرهای محتوا
- کار با Panel
- کار با Card
- درس نهم: کار با Modal
- درس دهم: ایجاد نوارهای رنگی
- درس یازدهم: ایجاد نوارهای پیشرفت
- درس دوازدهم: کار با دکمه ها
- درس سیزدهم: کار با جداول
- درس چهاردهم: کار با لیست ها
- درس پانزدهم: کار با تصاویر
- درس شانزدهم: کار با Badge
- درس هفدهم: کار با آیکون ها
- درس هجدهم: کار با فرم ها و کنترل های ورودی گیر
- درس نوزدهم: کار با تگ ها
- درس بیستم: افکت های نمایشی
- کار با انیمیشن ها
- کار با افکت های نمایشی
- درس بیست و یکم: ایجاد منوهای کشویی
- درس بیست و دوم: ایجاد آکوردئون
- درس بیست و سوم: کلاس های ستون کناری
- درس بیست و چهارم: کار با Tooltip
مفید برای
- مهندسی کامپیوتر
- مهندسی فناوری اطلاعات (IT)
پیش نیاز
آنچه در این آموزش خواهید دید:
نرم افزارهای مرتبط با آموزش
پیش نمایش‌ها
۱.
شروع به کار
۲.
شبکه Grid
۳.
سایزدهی به المان ها
۴.
تایپوگرافی در W3.CSS
۵.
کار با رنگ ها
مشاهده این پیش‌نمایش، نیازمند
عضویت و ورود به سایت (+)
است.
۶.
کار با حاشیه ها
مشاهده این پیش‌نمایش، نیازمند
عضویت و ورود به سایت (+)
است.
۷.
ایجاد Alert
مشاهده این پیش‌نمایش، نیازمند
عضویت و ورود به سایت (+)
است.
۸.
ایجاد کادرهای محتوا
مشاهده این پیش‌نمایش، نیازمند
عضویت و ورود به سایت (+)
است.
۹.
کار با Modal
مشاهده این پیش‌نمایش، نیازمند
عضویت و ورود به سایت (+)
است.
۱۰.
ایجاد نوارهای رنگی
مشاهده این پیش‌نمایش، نیازمند
عضویت و ورود به سایت (+)
است.
۱۱.
ایجاد نوارهای پیشرفت
مشاهده این پیش‌نمایش، نیازمند
عضویت و ورود به سایت (+)
است.
۱۲.
کار با دکمه ها
مشاهده این پیش‌نمایش، نیازمند
عضویت و ورود به سایت (+)
است.
۱۳.
کار با جداول
مشاهده این پیش‌نمایش، نیازمند
عضویت و ورود به سایت (+)
است.
۱۴.
کار با لیست ها
مشاهده این پیش‌نمایش، نیازمند
عضویت و ورود به سایت (+)
است.
۱۵.
کار با تصاویر
مشاهده این پیش‌نمایش، نیازمند
عضویت و ورود به سایت (+)
است.
۱۶.
کار با Badge
مشاهده این پیش‌نمایش، نیازمند
عضویت و ورود به سایت (+)
است.
۱۷.
کار با آیکون ها
مشاهده این پیش‌نمایش، نیازمند
عضویت و ورود به سایت (+)
است.
۱۸.
کار با فرم ها و کنترل های ورودی گیری
مشاهده این پیش‌نمایش، نیازمند
عضویت و ورود به سایت (+)
است.
۱۹.
کار با تگ ها
مشاهده این پیش‌نمایش، نیازمند
عضویت و ورود به سایت (+)
است.
۲۰.
افکت های نمایشی
مشاهده این پیش‌نمایش، نیازمند
عضویت و ورود به سایت (+)
است.
۲۱.
ایجاد منوهای کشویی
مشاهده این پیش‌نمایش، نیازمند
عضویت و ورود به سایت (+)
است.
۲۲.
ایجاد آکوردئون
مشاهده این پیش‌نمایش، نیازمند
عضویت و ورود به سایت (+)
است.
۲۳.
کلاس های ستون کناری
مشاهده این پیش‌نمایش، نیازمند
عضویت و ورود به سایت (+)
است.
۲۴.
کار با Tooltip ها
مشاهده این پیش‌نمایش، نیازمند
عضویت و ورود به سایت (+)
است.
راهنمای سفارش آموزشها
.svg)
در مورد این آموزش یا نحوه تهیه آن سوالی دارید؟
- با شماره تلفن واحد مخاطبین ۵۷۹۱۶۰۰۰ (پیش شماره ۰۲۱) تماس بگیرید. - تمام ساعات اداری
- با ما مکاتبه ایمیلی داشته باشید (این لینک). - میانگین زمان پاسخ دهی: ۳۰ دقیقه
- ۱۰۰ درصد مبلغ پرداختی در حساب کاربری شما شارژ می‌شود.
- و یا ۷۰ درصد مبلغ پرداختی به حساب بانکی شما بازگشت داده می‌شود.
نظرات
ممنونم
لطفا با آقای کلامی سلام برسونید و بگید ما شمارو خیلی دوست داریم.