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



visibility  
mode_comment   ۸۵

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

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

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

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

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

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

comment دیدگاه کاربران
حمیدرضا صفری

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

لقمان آوند

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

erfan foroughi

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

لقمان آوند

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

حمیدرضا صفری

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

لقمان آوند

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

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

لقمان آوند

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

میلاد فلاح

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

لقمان آوند

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

alireza fatehi

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

لقمان آوند

رفع شد
ممنون

محسن بشیری

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

لقمان آوند

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

sadaf

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

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

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

ارسال نظرات

کاربر گرامی، امکان ارسال نظر و پشتیبانی برای دوره های مجازی فقط برای دانشجویان این دوره امکان پذیر می باشد.

1 2 3 4