فرادرس
x عدم نمایش آخرین فرصت جشنواره تخفیف بسوی مهر ۴۰% تخفیف کد تخفیف: SRV99 کلیک کنید
فرصت باقیمانده

آموزش طراحی رابط کاربری وب سایت با فریم ورک W3schools) W3.CSS)

دسترسی به اطلاعات این آموزش: اطلاعات کلی محتوا و سرفصل ها پیش نمایش و دانلود اطلاعات تکمیلی دیدگاه ها
آموزش طراحی رابط کاربری وب سایت با فریم ورک W3schools) W3.CSS)

درباره ناشر

فرادرس
فرادرس

فرادرس بزرگ‌ترین ناشر دیجیتال آموزش‌های تخصصی، دانشگاهی و مهندسی است.

درباره مدرس

سید رضا هاشمیان
مهندس سید رضا هاشمیان

مدرس فرادرس

کارشناسی مهندسی فناوری اطلاعات


مهندس سید رضا هاشمیان، کارشناس فناوری اطلاعات گرایش برنامه نویسی تحت وب هستند. وی به عنوان برنامه نویس تحت وب فعالیت خود را آغاز کرده و همچنین به عنوان مدرس، در موسسات آموزشی مختلف به تدریس تکنولوژی ها و زبان های برنامه نویسی تحت وب می پردازند. (+)



در طراحی رابط کاربری، HTML ساختار را ایجاد می کند و CSS به این ساختار شکل داده و ظاهر و نحوه نمایش آن ها را مشخص می کند. ما در این فرادرس، قصد داریم تا یکی از فریمورک های ارائه شده برای CSS با نام W3.CSS را بررسی کنیم. فریمورک W3.CSS فریمورکی است که توسط وب سایت W3Schools برنامه نویسی شده و به صورت رایگان در اختیار افراد قرار گرفته است. از مزایای فریمورک W3.CSS می توان به واکنش گرا بودن این فریمورک اشاره کرد. همچنین، این فریمورک، تنها از دستورات استاندارد CSS استفاده می کند و مانند سایر فریمورک ها نظیر: Bootstrap و یاFoundation، نیازی به استفاده از جاوا اسکریپت و یا jQuery ندارد.

 

👤 مدرس: مهندس سید رضا هاشمیان
🕓 مدت زمان: ۴ ساعت و ۲ دقیقه
🎓 تعداد دانشجو: ۲۴۸ نفر این آموزش را تهیه کرده اند. — ۳ نفر در یک ماه اخیر

هزینه عادی آموزش: ۲۳,۰۰۰ تومان
در جشنواره بسوی مهر: ۱۳,۸۰۰ (کسب اطلاعات بیشتر +)




آنچه شما در این فرادرس خواهید دید:
آموزش ویدئویی مورد تایید فرادرس
فایل برنامه ها و پروژه های اجرا شده در حین آموزش

تضمین کیفیت و گارانتی بازگشت هزینه
توجه: کیفیت این آموزش توسط فرادرس تضمین شده است. در صورت عدم رضایت از آموزش، به انتخاب شما:
  • بازگشت و شارژ کل مبلغ پرداختی در حساب کاربری
  • و یا ۷۰ درصد مبلغ پرداختی به حساب بانکی شما بازگشت داده می شود.
    (توضیحات بیشتر +)
دانلود آنی
فعال‌سازی آنی لینک دانلود، بلافاصله پس از ثبت سفارش


    توضیحات

    چکیده آموزش


    هر وب سایت آنلاین را می توان در دو بخش اصلی 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)

    نرم افزارهای مرتبط با آموزش

    Sublime Text 3

    پیش نیاز

    پیش نمایش

    پیش نمایش ۱ : شروع به کار - ۲ دقیقه


    توجه: ممکن است که به خاطر سرعت پایین اینترنت شما، نمایش آنلاین با کیفیت پایین تر از کیفیت HD ویدئوی اصلی نمایش داده شوند. در این صورت آموزش را دانلود کرده و سپس مشاهده نمایید.

    دانلود مستقیم پیش نمایش - حجم دانلود ۲۳ مگابایت (کلیک کنید +)

    پیش نمایش ۲ : شبکه Grid - ۳ دقیقه


    توجه: ممکن است که به خاطر سرعت پایین اینترنت شما، نمایش آنلاین با کیفیت پایین تر از کیفیت HD ویدئوی اصلی نمایش داده شوند. در این صورت آموزش را دانلود کرده و سپس مشاهده نمایید.

    دانلود مستقیم پیش نمایش - حجم دانلود ۴ مگابایت (کلیک کنید +)

    پیش نمایش ۳ : سایزدهی به المان ها - ۹ دقیقه


    توجه: ممکن است که به خاطر سرعت پایین اینترنت شما، نمایش آنلاین با کیفیت پایین تر از کیفیت HD ویدئوی اصلی نمایش داده شوند. در این صورت آموزش را دانلود کرده و سپس مشاهده نمایید.

    دانلود مستقیم پیش نمایش - حجم دانلود ۱۲ مگابایت (کلیک کنید +)

    پیش نمایش ۴ : تایپوگرافی در W3.CSS - ۴ دقیقه


    توجه: ممکن است که به خاطر سرعت پایین اینترنت شما، نمایش آنلاین با کیفیت پایین تر از کیفیت HD ویدئوی اصلی نمایش داده شوند. در این صورت آموزش را دانلود کرده و سپس مشاهده نمایید.

    دانلود مستقیم پیش نمایش - حجم دانلود ۶ مگابایت (کلیک کنید +)

    پیش نمایش ۵ : کار با رنگ ها - ۴ دقیقه


    مشاهده آنلاین و یا دانلود رایگان این پیش نمایش، نیازمند عضویت و ورود به سایت (+) است.

    پیش نمایش ۶ : کار با حاشیه ها - ۲ دقیقه


    مشاهده آنلاین و یا دانلود رایگان این پیش نمایش، نیازمند عضویت و ورود به سایت (+) است.

    پیش نمایش ۷ : ایجاد Alert - ۱ دقیقه


    مشاهده آنلاین و یا دانلود رایگان این پیش نمایش، نیازمند عضویت و ورود به سایت (+) است.

    پیش نمایش ۸ : ایجاد کادرهای محتوا - ۶ دقیقه


    مشاهده آنلاین و یا دانلود رایگان این پیش نمایش، نیازمند عضویت و ورود به سایت (+) است.

    پیش نمایش ۹ : کار با Modal - ۴ دقیقه


    مشاهده آنلاین و یا دانلود رایگان این پیش نمایش، نیازمند عضویت و ورود به سایت (+) است.

    پیش نمایش ۱۰ : ایجاد نوارهای رنگی - ۱ دقیقه


    مشاهده آنلاین و یا دانلود رایگان این پیش نمایش، نیازمند عضویت و ورود به سایت (+) است.

    پیش نمایش ۱۱ : ایجاد نوارهای پیشرفت - ۴ دقیقه


    مشاهده آنلاین و یا دانلود رایگان این پیش نمایش، نیازمند عضویت و ورود به سایت (+) است.

    پیش نمایش ۱۲ : کار با دکمه ها - ۶ دقیقه


    مشاهده آنلاین و یا دانلود رایگان این پیش نمایش، نیازمند عضویت و ورود به سایت (+) است.

    پیش نمایش ۱۳ : کار با جداول - ۴ دقیقه


    مشاهده آنلاین و یا دانلود رایگان این پیش نمایش، نیازمند عضویت و ورود به سایت (+) است.

    پیش نمایش ۱۴ : کار با لیست ها - ۱ دقیقه


    مشاهده آنلاین و یا دانلود رایگان این پیش نمایش، نیازمند عضویت و ورود به سایت (+) است.

    پیش نمایش ۱۵ : کار با تصاویر - ۳ دقیقه


    مشاهده آنلاین و یا دانلود رایگان این پیش نمایش، نیازمند عضویت و ورود به سایت (+) است.

    پیش نمایش ۱۶ : کار با Badge - ۴ دقیقه


    مشاهده آنلاین و یا دانلود رایگان این پیش نمایش، نیازمند عضویت و ورود به سایت (+) است.

    پیش نمایش ۱۷ : کار با آیکون ها - ۱ دقیقه


    مشاهده آنلاین و یا دانلود رایگان این پیش نمایش، نیازمند عضویت و ورود به سایت (+) است.

    پیش نمایش ۱۸ : کار با فرم ها و کنترل های ورودی گیری - ۴ دقیقه


    مشاهده آنلاین و یا دانلود رایگان این پیش نمایش، نیازمند عضویت و ورود به سایت (+) است.

    پیش نمایش ۱۹ : کار با تگ ها - ۲ دقیقه


    مشاهده آنلاین و یا دانلود رایگان این پیش نمایش، نیازمند عضویت و ورود به سایت (+) است.

    پیش نمایش ۲۰ : افکت های نمایشی - ۴ دقیقه


    مشاهده آنلاین و یا دانلود رایگان این پیش نمایش، نیازمند عضویت و ورود به سایت (+) است.

    پیش نمایش ۲۱ : ایجاد منوهای کشویی - ۴ دقیقه


    مشاهده آنلاین و یا دانلود رایگان این پیش نمایش، نیازمند عضویت و ورود به سایت (+) است.

    پیش نمایش ۲۲ : ایجاد آکوردئون - ۳ دقیقه


    مشاهده آنلاین و یا دانلود رایگان این پیش نمایش، نیازمند عضویت و ورود به سایت (+) است.

    پیش نمایش ۲۳ : کلاس های ستون کناری - ۱ دقیقه


    مشاهده آنلاین و یا دانلود رایگان این پیش نمایش، نیازمند عضویت و ورود به سایت (+) است.

    پیش نمایش ۲۴ : کار با Tooltip ها - ۴ دقیقه


    مشاهده آنلاین و یا دانلود رایگان این پیش نمایش، نیازمند عضویت و ورود به سایت (+) است.




    اطلاعات تکمیلی

    نام آموزش آموزش طراحی رابط کاربری وب سایت با فریم ورک W3schools) W3.CSS)
    ناشر فرادرس
    شناسه اثر ۸–۱۲۴۵۲–۰۶۷۹۱۸ (ثبت شده در مرکز رسانه‌های دیجیتال وزارت ارشاد)
    کد آموزش FVH4C9704
    مدت زمان ۴ ساعت و ۲ دقیقه
    زبان فارسی
    نوع آموزش آموزش ویدئویی     (کیفیت HD - مورد تایید فنی فرادرس)
    حجم دانلود ۵۱۹ مگابایت     (کیفیت ویدئو HD‌ با فشرده سازی انحصاری فرادرس)


    ​راهنمای تهیه آموزش ها

    آیا می دانید که تهیه یک آموزش از فرادرس و شروع یادگیری چقدر ساده است؟

    راهنمایی بیشتر ( +)

    در مورد این آموزش یا نحوه تهیه آن سوالی دارید؟
    • با شماره تلفن واحد مخاطبین ۵۷۹۱۶۰۰۰ (پیش شماره ۰۲۱) تماس بگیرید. - تمام ساعات اداری
    • با ما مکاتبه ایمیلی داشته باشید (این لینک). - میانگین زمان پاسخ دهی: ۳۰ دقیقه

    با شروع یادگیری، یک کلیک فاصله دارید. همین حالا شروع کنید.

    آموزش طراحی رابط کاربری وب سایت با فریم ورک W3schools) W3.CSS)

    هزینه عادی آموزش: ۲۳,۰۰۰ تومان
    در جشنواره بسوی مهر: ۱۳,۸۰۰ (کسب اطلاعات بیشتر +)




    دیدگاه ها

    ( امتیاز ۴ از ۵ )
    ۴ از 5


    تا کنون ۲۴۸ نفراز این آموزش استفاده کرده اند و ۵ نظر ثبت شده است.
    1. 3 از 5

      :

      من رشته ام مرتبط نیست و برای آشنایی این آموزش رو خریدم. آموزش خوبی بود خیلی مبتدی نبود و نیاز به آشنایی ابتدایی داشت من اطلاعاتی که میخواستم از آموزش گرفتم و برام مفید بود. ویدئو ها خیلی طولانی بود و به نظرم اگه هر مبحث تو یک ویدو 5 دقیقا ای گنجونده میشد خیلی بهتر میشد.

    2. 4 از 5

      :

      آموزش کامل و خوبی بود.

    3. 5 از 5

      :

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

    4. 4 از 5

      :

      خوب بود و من راضی بودم.

    5. 0 از 5

      :

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


    نظر شما در مورد این فرادرس چیست؟

    امتیاز شما به این آموزش:




​همین امروز شروع به آموختن کنید​

آموزش طراحی رابط کاربری وب سایت با فریم ورک W3schools) W3.CSS)

هزینه عادی آموزش: ۲۳,۰۰۰ تومان
در جشنواره بسوی مهر: ۱۳,۸۰۰ (کسب اطلاعات بیشتر +)


برچسب‌ها: , , , , , , , , , , , , , , , , , , , , , , , , ,



فرادرس در رسانه ها و جشنواره ها

روزنامه ایرانیان مرکز توسعه فناوری اطلاعات و رسانه های دیجیتال روز آفرین نت استارت کنفرانس مهندسی برق ایران جشنواره وب ایران