آموزش طراحی وب واکنشگرا، آشنایی با pureCSS و بوت استرپ

دسته بندی: آموزش
زمان مطالعه: ۲ دقیقه
۲۳ اسفند ۱۳۹۳

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

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

عموم مطالب مطرح شده در این جلسه عبارتند از :

  • تشریح و توضیح در مورد طراحی وب واکنشگرا
  • مقایسه دو روش پیاده سازی وب سایت ها برای ابزار موبایل
  • مزیت ها و معایت دو روش موجود
  • تشریح مفهوم media query ها و نحوه استفاده از آنها
  • انتخاب عرض های مناسب و مختلف برای مدیا کوئری ها و شروع طراحی واکنشگرا
  • ذکر چند مثال از نحوه کدنویسی واکنشگرا
  • تشریح دو روش مختلف واکنشگرا نمودن صفحات وب
  • تشریح و آموزش گام به گام مراحل واکنشگرا نمودن قالب های مختلف
  • پروژه واکنشگرا : واکنشگرا نمودن قالب جلسه 19 دوره به صورت کامل
  • استفاده از جاوااسکریپت و جی کوئری برای واکنشگرا کردن منوی بالای سایت
  • آشنایی با فریمورک PureCSS و قابلیت ها و امکانات آن
  • آشنایی با فریمورک بوت استرپ و قابلیت ها و امکانات آن
:: توجه

این مطلب یک جلسه از آموزش طراحی وب سایت می باشد و برای مشاهده آن باید در دوره ثبت نام کنید.

ثبت نام در آموزش طراحی وب سایت

نویسنده
بیش از 15 سال هست که برنامه نویسی می کنم و از بین همه زبون هایی که کار کردم جاوا، اسمبلی و php رو دوست دارم. دانشجوی دکترای نرم افزارم و توی دانشگاه روی پردازش بیگ دیتا و پردازش موازی کار کردم و عاشق چالش از هر نوعیش هستم! سون لرن مثل بچه منه که 12 سال براش وقت گذاشتم، اینجا همه تلاش می کنیم از شروع یادگیری تا ورود به بازر کار حوزه برنامه نویسی و IT همراهتون باشیم.

جلسات دوره

نظرات کاربران

Mostafa Nadi

سلام استاد. وقت بخیر. من یه سوالی برام پیش اومد در این جلسه اون هم اینه که الان موبایل های جدید رزولوشنشون خیلی بالاست. مثلا عرض صفحه نمایش گلکسی اس 10, 1440 پیکسل هست. خب این رزولوشن رو ممکنه برای یک گوشی وجود داشته باشه اما برای خیلی از دسکتاپ اسکرین ها هم این رزولوشن وجود داره. این تناقضات رو چطور باید هندل کرد؟

امیرحسین شکری

با سلام و عرض خسته نباشید خدمت اساتید محترم سون لرن.
بنده اکثر قسمت های قالب جلسه 19 رو با پوزیشن relative و تعیین top و right و… کد زدم. الان موقع رسپانسیو کردن قالب مشکل دارم و اکثر المانها یا عرض 100 درصد نمی‌گیرن یا از کادر خودشون بیرون میزنن و کلی معضل دیگه.
میخواستم بدونم با توجه به اینکه استاد آوند خیلی راحتتر این قالب رو رسپانسیو کردن آیا مشکل از پوزیشن دهی بنده هست؟ یا اصولا رسپانسیو کردن پوزیشن های relative سخت تره؟
جالبه که اکثر این المان با همون تکنیکی که استاد آوند در مورد تصویر اسلایدر همین پروژه به کار بردند (کدش رو ذکر کردم)، وسط چین و رسپانسیو میشن ولی آیا انجام اینکار برای اینهمه المان، منطقی و درسته؟
و سوال سوم اینکه: چه زمانی باید از padding و margin برای «پوزیشن دهی» استفاده کرد چه زمان از relative?
سپاسگزارم

   #slider .slider-image{
        position: absolute;
        right: 50%;
        margin-right: -150px;
        width: 300px;
    }
لقمان آوند

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

علی صالحی

سلام جناب اوند
راستش یه سوالی خیلی خیلی ذهنمو درگیر کرده که گفتم بپرسم شاید فرجی شد شما دیدین و جواب دادین !
من قبل اینکه این جلسه رو ببینم با خودم فک میکردم که با وجود درصد و max-width min-width و min-height max-height تقریبا مشکلی بابت ریسپانسیو کردن قالب وجود نداره چون راحت میشه کل div html و 100 درصد در نظر گرفت بعد تو همه جای قالب از درصد استفاده کرد تا مرورگر خودش تنظیم کنه اندازه بخش هارو که خودمم یه پروژه ناتمام کارکرده بودم (به دلیل خلاقیت کمم نتونستم تا اخرش برم ) که خیلی هم ریسپانسیو بود ولی تنها مشکلی که وجود داشت یکی منو های کشویی بود با display: none کردن بعضی جاها تو اندازه کوچک و به نظر من نیاز نبود که همه این کارارو با @media انجام بدیم و راحت میشد با درصد همه چیزو رو به راه کرد ! ولی شما به این مورد اشاره نکردید و اون درصد هارو اومدین تو @media دادین مثلا تو تگ های html عرض بخش مطالب مثلا 500px بود شما اومدین همونو تو media به درصد تبدیل کردین که میشد از همون اول اینکارو کرد کدنویسی هم کم بشه
ممنون میشم جواب بدید
موفق باشید

sadaf

سلام استاد وقتتون بخیر یه سوال داشتم از خدمتتون
من یه پروژه گرفتم که یه صفحه چت تحت وب هست و قراره بخش front کار رو من کد بزنم تقریبا تمام بخش ها رو تونستم فقط مشکلم با کد بخش پیام هست همونطور که می دونید باکس هر پیام باید قابل انعطاف باشه ارتفاعش و با توجه به ابعاد متن پیام اندازه اش تعیین شه ااز هر روشی که فکر می کردم درست میشه سعی کردم اما نتونستم این بخش رو پیاده سازی کنم که سایز پیام با افزایش متن بزگ تر بشه گاهی ارتتفاع div حجم بالا رو تو خودش جا میده اما رنگ پس زمینه فقط نهایتا برای یه خط اعمال میشه
ممنون میشم راهنمایی کنید این رو چطوری پیاده سازی کنم
ممنون

کیوان علی محمدی

سلام دوست عزیز. بهتره برای این مورد width و height رو تعیین نکنید اصلا و فقط از خاصیت max-width استفاده کنید. برای موقعیت باکس پیام هم می تونید خاصیت های padding و margin رو استفاده کنید.

محسن بشیری

سلام استاد
دردرس 24 برای اینکه بخوایم از فرم ورک purecssاستفاده کنیم شما فرمودید کافی ادرس لینک را در header لبنک استفاده کنید و در درس 6دوره phpنیز از این فرم ورک برای استایل دهی جدول استفاده کردید ومن پوشه commonان جلسه را باز کردم چیزی بانام pureداخلش نبود.حال سوالم اینه که اگر بخواهیم با استفاده از wampserverطراحی قالب را چک کنیم و از pure استفاده کنیم چه کار باید کنیم .لطفا اگه میشه از سایت pure توضیح دهید

لقمان آوند

سلام
در فایل های جلسات بعد پوشه کامون رو دریافت و جایگزین کنید که pure هم اونجا هست.
فرقی نداره شما pure رو دانلود کنید و در پروژتون بزارید و ادرس محلیشو بدید

alireza fatehi

سلام وقت بخیر!!!
قسمت 24 لینک دانلود (فایل ویدیو ) مشکل داره !

لقمان آوند

رفع شد
ممنون

میلاد فلاح

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

لقمان آوند

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

danial asvadi

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

لقمان آوند

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

حمیدرضا صفری

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

لقمان آوند

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

erfan foroughi

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

لقمان آوند

ممنون بابت گزارش
تصحیح شد

حمیدرضا صفری

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

لقمان آوند

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

پایان زمان پشتیبانی

دانشجوی گرامی، بازه پشتیبانی فعال برای این دوره ۳ ماه است که برای شما به پایان رسیده است.

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

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.
گزارش مشکل