آیا می دانید با دوره های آموزشی سون لرن می توانید از 0 تا 100 طراحی وب را در منزل فراگیرید!

دوره مجازی طراحی وب (جلسه 24): طراحی وب واکنشگرا، آشنایی با pureCSS و بوت استرپ

79 13095 ۲۳ اسفند ۹۳
در این جلسه از دوره طراحی وب به آموزش طراحی وب واکنشگرا (responsive) به شکل کاملا اصولی و پایه ای خواهیم پرداخت و روش و فرایند اصولی برای واکنشگرا کردن یک قالب و صفحه وب  رو تدریس خواهیم کرد . پس از آن با انجام یک پروژه عملی قالب مربوط به جلسه 19 رو کاملا واکنشگرا خواهیم کرد که در ابزارهای موبایل هم ظاهر مناسبی داشته باشه . بعد از انجام پروژه هم با فریم ورک های PureCSS و BootStrap آشنا خواهیم شد.

دموی پروژه این جلسه : قالب رسپانسیو شده پروژه جلسه 19

عموم مطالب مطرح شده در این جلسه عبارتند از :
  • تشریح و توضیح در مورد طراحی وب واکنشگرا
  • مقایسه دو روش پیاده سازی وب سایت ها برای ابزار موبایل
  • مزیت ها و معایت دو روش موجود
  • تشریح مفهوم media query ها و نحوه استفاده از آنها
  • انتخاب عرض های مناسب و مختلف برای مدیا کوئری ها و شروع طراحی واکنشگرا
  • ذکر چند مثال از نحوه کدنویسی واکنشگرا
  • تشریح دو روش مختلف واکنشگرا نمودن صفحات وب
  • تشریح و آموزش گام به گام مراحل واکنشگرا نمودن قالب های مختلف
  • پروژه واکنشگرا : واکنشگرا نمودن قالب جلسه 19 دوره به صورت کامل
  • استفاده از جاوااسکریپت و جی کوئری برای واکنشگرا کردن منوی بالای سایت
  • آشنایی با فریمورک PureCSS و قابلیت ها و امکانات آن
  • آشنایی با فریمورک بوت استرپ و قابلیت ها و امکانات آن
این مطلب یک جلسه از کاملترین و کاربردی ترین پکیج و دوره آموزش طراحی وب است و برای دیدن آن باید در این دوره ثبت نام کنید .
توضیحات : به جای صرف هزینه های چند صد هزارتومانی برای یادگیری طراحی وب ، تنها با 30% هزینه ی کلاس های حضوری، دوره ی کامل و حرفه ای آموزش طراحی وب را برای شما عزیزان برگزار کرده ایم. در این دوره مفاهیم اساسی و پایه ای طراحی وب مطرح خواهد شد و زبان های HTML5 و CSS3 با جزئیات کامل و به صورت کاملا عملی و کاربردی تدریس می شود. وجه تمایز و مزیت این دوره نسبت به دوره های مشابه، کاربردی بودن آن است. در این دوره مواردی مانند آموزش طراحی قالب متناسب با سئو، آموزش طراحی وب واکنشگرا (Responsive)، آموزش تبدیل قالب فتوشاپی به صفحه وب، آموزش ترجمه و فارسی سازی قالب های خارجی، آموزش طراحی قالب برای سیستم های وبلاگدهی (بلاگفا و میهن بلاگ) به صورت کاملا عملی، از پایه تا پیشرفته توسط مدرسی با تجربه 10 ساله طراحی وب و دانشجوی دکترای نرم افزار برای شما به صورت کاملا اصولی و عملی تدریس می شود. شما برای این حجم مطالب آموزشی فقط یک سوم کلاس های حضوری هزینه می کنید! ما رضایت شما را تضمین خواهیم کرد ...
:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها 79 دیدگاه برای این مطلب ارسال شده است.

  • ‏‏
    حمیدرضا صفری(۱۷ آذر ۱۳۹۵)

    سلام استاد
    من پروژه های جلسه 19 و 20 رو کد زدم و ریسپانسیو کردم، حالا مشکلی که در هر دو دارم، اینه که میخوام در
    پروژه جلسه 19 با اسکرول کردن موس نویگیشن فیکس بشه بالای صفحه، و در مورد پروژه 20 وقتی که قالب رو ریسپانسیو کردم نتونستم اسلایدر رو هماهنگ با سایر المانها کنم جوری که متناسب با صفحه بشه برا همین display: none کردم به ناچار 😆
    ممنون میشم راهنمایی کنید.
    http://s8.picofile.com/file/8277525318/MyProjects.zip.html

    • ‏‏
      لقمان آوند(۶ دی ۱۳۹۵)

      سلام
      برای فیکس کردن باید از جاوااسکریپت استفاده کنیم. مثالشو تو دور js زدیم و پیشنهاد می کنم این دوره رو ببینید.
      اسلایدرتون به نظرم خیلی هم خوبه. لزومی نداره برای این موارد دقیقا شبیه psd ش کنید. شاید اسلایدر اون حالتی اصلا پیدا نکنید!
      اسلایدر های دیگه رو ببینید و تست کنید رو طرح اگه راضی نیستید. لیستی از اسلاید ها

  • ‏‏
    erfan foroughi(۲۷ آذر ۱۳۹۵)

    با سلام و خسته نباشید
    لینک دموی پروژه جلسه 24(قالب رسپانسیو شده ) مشکل داره لطفا بررسی شود.ممنون

  • ‏‏
    حمیدرضا صفری(۳ دی ۱۳۹۵)

    سلام استاد آوند
    از 17 آذر منتظر جواب کامنتم هستما :)

    • ‏‏
      لقمان آوند(۶ دی ۱۳۹۵)

      پاسخ دادم
      ببخشید واقعا …

  • ‏‏
    danial asvadi(۲۴ دی ۱۳۹۵)

    سلام استاد
    یه سوال دارم
    اگه وبسایت دیجی کالا رو دیده باشید وقتی تو حالت رسپانسیو میره قالب کلا عوض میشه حتی کد های قالب هم تغیر میکنه
    خیلی خیلی ذهنمو درگیر کرده
    ممنون میشم منو ازین سردرگمی در بیارید

    • ‏‏
      لقمان آوند(۲۵ دی ۱۳۹۵)

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

  • ‏‏
    میلاد فلاح(۲۳ فروردین ۱۳۹۶)

    سلام استفاده پیکسلی برای اینکار جواب نمیده چون الان اغلب صفحات موبایل از نظر پیکسل هم اندازه یا بیشتر از صفحات دسک تاپ پیکسل دارن راهکاره دیگه وجود داره؟ لطفا راهنمایی کنید

    • ‏‏
      لقمان آوند(۲۹ فروردین ۱۳۹۶)

      شما عرض و ارتفاع رو می تونید بدست بیارید. برای عناصر صفحه میشه از واحدهای نسبی مثل درصد استفاده کرد.

  • نکته : برای پاسخگویی سریعتر و بهتر، بخش نظرات این مطلب مختص پرسش و پاسخ های کاربران ثبت نامی در دوره ی کاملترین و کاربردی ترین پکیج و دوره آموزش طراحی وب است .
    اگر قبلا در این دوره ثبت نام کرده اید پس از ورود به سایت می توانید تمامی پرسش و پاسخ ها و نظرات مطرح شده ی این مطلب را مشاهده و اگر سوالی دارید در همینجا مطرح کنید.

    ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

    :: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
    برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
    عضویت/ ورود سریع با :
    در حال اتصال ...

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram