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



visibility  
mode_comment   ۸۸

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

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

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

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

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

ثبت نام در آموزش تصویری html5 و CSS3

comment دیدگاه کاربران
علی یوسفی replyپاسخ

خیلی هم عالی ممنون استاد عزیز. راستی استاد تخفیف برای دانشجویای قدیمی چی میشه ؟ پیش ثبت نام جاوا اسکریپت را تو اوایل فروردین بذارید که دانشجویای قدیمی هم بهره ببرن 🙂 ❓

لقمان آوند

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

ervin replyپاسخ

خسته نباشید

پژمان replyپاسخ

تسلسل و ریتم تدریست در سایتهای فارسی بی نظیره. یه دونه ای لقمان جان.

sadaf replyپاسخ

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

لقمان آوند

سلام
نه لزوما به این معنی نیست فقط . منتهی یکی از مواردی که باید در طراحی ریسپانسیو رعایت بشه همین هست .
دلیل اینکه توی دمو در سایط خیلی کم اسکرول افقی میخوره عرض ثابت یکی از تگ ها توی دمو هست . یه سلکتور img{max-width:100%} تعریف کنی مشکل رفع میشه .
به عنوان تمرین میسپرم به شما . پیدا کنید کدوم عنصر توی صفحه باعث این مشکل میشه در عرض خیلی کوچیک ؟؟؟

Mahdi replyپاسخ

عالی بود…. ❓ ❓ ❓

هدایت عباسی replyپاسخ

با سلام. لطفا در همین دوره بحث ریسپانسیو رو تموم کنید و بوت استرپ رو به صورت کامل بگید و به دوره بعد موکول نکنید . چون بحث ریسپانسیو خیلی مهم. چون بعدش هم دوره جاوااسکریپت که حداقل 3 ماه طول میکشه و بعد اون بهتر که وردپرس رو بگید (دوره بعد جاوااسکریپت) . ممنون از محبتتاتون

وحید صالحی

سلام دوست عزیز مبحث ریسپانسو و بوت استرپ خودش به یک دوره جداگانه نیاز داره و در یکی دو جلسه نمیشه آموزش داد ولی چشم سعی میکنیم خیلی زودتر یه دوره کامل و کاربردی در این مورد برگزار کنیم…

amirhosein afiattalab replyپاسخ

واقعا کاربردی بود، استاد دوست داریم

ehsan69 replyپاسخ

سلام
دکتر جان امکانش هست تو جلسه 25 یه پروژه ی کوچیک هم با بوت استرپ انجام بدین؟
ممنون

لقمان آوند

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

ehsan69

ممنون از پاسخ گوییت دکتر
هر جور شما صلاح بدونی. D:
دوره ی mySql هم فراموش نشود.
باتشکر

nima karimi replyپاسخ

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

لقمان آوند

امکانش نیست واقعا
ایشالله تو دوره اختصاصی خودش …
اون هم پروژه بزرگ !

yavarielham replyپاسخ

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

وحید صالحی

با استفاده از فریم ورک هایی مانند بوت سترپ نیازی به اندازه هایی بر حسب درصد برای نمایش یک سایت در اسکرین هایی با سایز های متفاوت نیست در ابتدا میتونیم بصورت ایستا و بر حسب پیکسل سایت رو طراحی و بعد با استفاده از فریم ورکی مثل بوت استرپ یا سایر فریم ورک های مشابه برای ریسپانسو کردن سایت اقدام کنیم
موفق باشید…

danial asvadi replyپاسخ

سلام استاد
ممنون عالی بود
فقط یه سوال
وقتی صفحه رو کوچیک میکنی و ایکون منو نمایش داده میشه اگه منو رو هیدن کنی و صفحه رو برگردونی به سایز دیفالت منو دیگه نمایش داده نمیشه(امیدوارم منظورمو رسونده باشم) میشه بگید مشکلش چیه؟

لقمان آوند

سلام
اره این یه باگ کوچولو تو قالبمون هست . کافیه با جی کوئری چک کنی اگه عرض پنجره بزرگ شد منو رو نمایش بده ! به عنوان تمرین سپردم به شما! تا 2-3 روز اگه نتونستی حلش کنی بگو که کدش رو بهت بدم …
موفق باشی

میوند

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

لقمان آوند

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

هدایت عباسی replyپاسخ

دوست عزیز بحث ریسپانسیو از مباحث مهم در طراحی قالب سایت ها است و شخص من طراحی سایت رو بلد بودم و فقط برای طراحی قالب ریسپانسیو شرکت کردم. لطفا به دیدگاه هنرجویان احترام بزارید. این عزیزانی که به به و چه چه می کنن مبتدی هستن و من و تعدادی از دوستان دیگه تمایل داریم بصورت حرفه ای کار کنیم و به همین خاطر شرکت کردیم . من مدتهاست که منتظر طراحی ریسپانسیو بودم الان شما میگید اموزش نمیدیم و وقت ما تلف شده. این طور هم نیست بوت استرپ و یه پروژه دو جلسه طول میکشه . لطف از این مبحث نگذرید. ممنون میشم اگه این کار انجام بدید. واقعا لازم داریم. ما قصد داریم در چندین آموزش شما شرکت کنیم پس ناامیدمون نکنید. یک هفته بیشتر اما رضایت همه. ممنون

لقمان آوند

سلام جناب عباسی …
کل بحث رسپانسیو کردن بدون فریمورک و روش انجام اینکار همونی بود که در این جلسه گفتیم. در مورد فریمورک ها هم از اول دوره در پاسخ سوالات دوستان همواره گفتیم که فریمورک ها در سطح آشنایی با امکاناتشون توضیح داده میشن و برای این فریمورک ها دوره های جداگانه در نظر گرفتیم . عنوان فصل مربوطه رو هم اگر دقت کرده باشید نوشتیم آشنایی با فریمورک ها … . ما رو کیفیت کارمون خیلی حساسیم و باید مطالب رو خیلی پایه ای و دقیق مطرح کنیم. نمی خوایم با یکی دو جلسه بوت استرپ رو سر هم بندی کنیم که نارضایتی بوجود بیاد. در مورد بوت استرپ یه دوره جدا با حداقل 10-20 ساعت آموزش در نظر گرفتیم و با یکی دو جلسه نمی شه همه چیز رو گفت .

zq

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

ehsan69

دکتر لقمان لطفاً دوره ی فریم ورک های html&css و javascript&jquery رو به صورت ترکیبی و با هم برگزار نمایید.
یعنی برای طراحی وب یه دوره ی فریم ورک و برای برنامه نویسی وب یه دوره ی فریم ورک برگزار بشه.
فرضاً تو دوره ی فریم ورک های طراحی وب بیاین و فریم ورک های BootStrap و AngularJs رو آموزش بدین و توی پروژه هایی هم که برای این دوره در نظر می گیرین به صورت ترکیبی از BootStrap و AngularJs استفاده نمایین.
باتشکر

لقمان آوند

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

Syd Ali Bararsani

با سلام و تشکر و خسته نباشید ویژه خدمت جناب آوند عزیز…
دقیقا بنده هم با نظر جناب عباسی موافقم بنده مدرک طراحی وب فنی حرفه ای دام و خیلی وقته کار می کنم یکی از دلایلی که باعث شد در این دوره ثبت نام کنم همین موارد تکمیلی و پیشرفته تر مثل رسپانسیو بود.در هر صورت از جناب آوند عزیز خواهشمندم همون طور که در بنر این دوره نوشتید از پایه تا پیشرفته کاربران حرفه ایتون رو هم راضی نگه دارید و برای مباحث پیشرفته تر وقت بیشتری بگذارید واین حق رو هم به ما بدید که یک جلسه برای طرح آموزش رسپانس کردن قالب که توی سرفصل های اصلی دوره هم آوردین و باعث اشتیاق خیلی ها( مثل خودم )به ثبت نام شده خیلی کمه که انشالله دوره جامع تری شود.با آرزوی موفقیت و سپاس مجدد

لقمان آوند

سلام
جناب بردستانی عزیز، مباحث پایه تا پیشرفته زبان های html و css در این دوره به صورت نسبتا کاملی تدریس شده و نه فریمورک های html و css . کلا سیاست برگزاری دوره های سون لرن این هست که دوره های زبان های پایه ای طراحی وب و فریمورک ها جدا از هم هستند و بارها در پاسخ دوستان این مورد رو تاکید کردیم. ضمن اینکه هر آنچه برای رسپانسیو کردن قالب لازم هست در اینجا گفته شده و با روش گفته شده و استفاده از نکاتی که گفتیم هر قالبی رو می تونید واکنشگرا کنید. ضمن اینکه آموزش و نکات گفته شده طوری بوده که هر قالب دیگه ای رو با همین روش می تونید واکنشگرا کنید. بار ها در پاسخ کاربرا جواب دادیم که آموزش فریمورک ها در این دوره در حد آشنایی با امکانات اونها هست . اگر می خواستیم فریمورک بوت استرپ رو هم تو این دوره بگنجونیم حداقل 10-15 ساعت باید اضافه میکردیم و هزینه دوره هم 30-40 درصد بالاتر بود. برای تمرکز بهتر تصمیم بر اینه که در دوره جداگانه ای فریمورک ها آموزش داده بشن و مختص این دوره نیست . برای فریمورک های زبان های دیگه هم سیاست برگزاری دوره ها به همین شکل هست و شدیدا عقیده دارم با این روش کیفیت آموزش ها بسیار بیشتر و بهتر خواهد بود.

جعفر پیشدادی replyپاسخ

با سلام وخسته نباشید… حال که این دوفریمورک را معرفی نمودید بسیار خوب می شد اگر بصورت ساده چارچوب استفاده از افریمورکها را در طراحی قالب جدید از ابتدا ویا تغییر ویا واکنشگرا کردن قالب دیگری در قالب مثال ساده بیان می نمودید..مثلایک پنل ساده ویا فرم تماس با ما….. چون تغییر در html می باشد از نکات کاربردیتان استفاده می کردیم…تشکر

لقمان آوند

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

Mehdi Zeynali replyپاسخ

سلام قبل از پایان دوره یه توضیح در حد معرفی از less و sass بدید
ممنون

لقمان آوند

پیشنهادتون بررسی میشه …
ممنون

jj20 replyپاسخ

سلام
استاد چرا وقتی صفحه رو افقی کوچک میکنیم
1.چرا سایدبار به جای اینکه وقتی به ابتداش میرسیم بیاد زیر مطالب ،وقتی به انتهاش میرسیم میاد زیر مطالب؟ اینجوری باعث میشه اسکرول افقی بخوریم که زیاد جالب نیست و تو یک صفحه با ابعاد عکس زیر این قالب معمولی میشه
http://up2www.com/uploads/5e62uuapture.png
2.چرا همزمان با کوچک کردن صفحه اسلایدر هم زمان باهاش کوچیک نمیشه و یهویی با تغییر مکان سایدبار اسلایدر نوشته هاش غیب میشه

لقمان آوند

سلام
1- ما خودمون تعین کردیم کوچکتر از عرض 768 این اتفاق بیفته که شما میتونی این عرض رو به دلخواه عوض کنی …
2- اصولا کاربر در ابزارش پنجره رو کوچک و بزرگ نمی کنه و یک حات رو میبینه که ما بر اساس این فرضیه به این شکل این کار رو انجام دادیم …

Abbas412 replyپاسخ

جناب آوند، با عرض تبریک سال نو
رفع مشکل ناپدید شدن منو، رو به عنوان تمرین سپرده بودید!

من یه همچین کدی نوشتم براش، نظرتون رو میگید؟
کد بهتری هست؟

لقمان آوند

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

جعفر پیشدادی replyپاسخ

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

وحید صالحی

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

Mani Soft replyپاسخ

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

لقمان آوند

سلام
خیر دوست عزیز . فرق چندانی نداره .
همونطور که دیدید همه کارو روی فایل css انجام دادیم . روی قالب های داینامیک مثل وردپرس هم فقط همین لازمه و متفاوت نیست …
روند کار کاملا یکسان هست و برای هر نوع قالبی می تونید اعمال کنید .

Mani Soft

اگر ممکنه این مورد رو هم به آموزش اضافه کنید خوب بالاخره ممکنه تفاوت هایی داشته باشن
ممنونم

hasan8 replyپاسخ

با سلام خدمت شما ، آقای آوند چه زمانی دوره ریسپانسیو یا بهتر بگم کار با فریم ورک های css مثل بوتسترپ شروع میشه؟ من دارم لحظه شماری میکنم تا اون دوره شروع بشه. بنظر من به جای دوره جاوااسکریپت و … بعد از پایان این دوره (طراحی وب) ، دوره بوتسترپ برگزاره بشه بهتره چون خیلی بهتره که مباحث پیاپی باشن و وقفه ای بینشون نیفته .
ولی باز هم نظر شما استاد محترم ، محترم هست.

لقمان آوند

سلام
احتمالا خرداد ماه دوره بوت استرپ رو شروع خواهیم کرد .

افشین زندی replyپاسخ

سلام استاد.ببخشید یه سوال داشتم.
استاد من به پلاگین منو پیدا کردم تقریبا میشه گفت مثل 7لرن.اما پلاگین فقط برای موبایل و تبلت قابل استفادس چون برای اسکرین بزرگ کدش رو نزدن.
سوالم اینه که مانعی نیست که از دو بخش کاملا مجزای اچ تی ام ال، یکی برای اسکرین های بزرگ و یکی برای تبلت و موبایل داشته باشیم؟
منظورم اینه که وقتی تو اسکرین بزرگ هستیم منوی خودمون رو نشون بده اما وقتی اسکرین موبایل و تبلت هست بیایم و منو خودمون رو display none بدیم و منوی پلاگین رو فعال کنیم.

لقمان آوند

مشکلی که نداره ولی خیلی بهتره که یه منو برای همه اسکرین ها داشته باشی.

میوند replyپاسخ

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

لقمان آوند

در مجموع سایت رسپانسیو و داشتن یک طراح برای همه دستگاه ها بهتر هست از نظر بنده .

میوند

ممنون از پاسخگوی تون استاد
به عنوان آخرین سوال امشب 😀
در ویدیو نگفتین که چگونه منو های تو در تو رو رسپانسیو کنیم ؟
اگر ساده هست و با متن گفته میشه همینجا بگید و اگر نمیشه و با جاوااسکریپت و جی کوئری ساخته میشه لطف نموده در دوره جاوا اسکریپت یاد آوری کنید.
با عرض معذرت که امشب خیلی سوال کردم 😯

لقمان آوند

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

amir rahimi morad replyپاسخ

سلام خسته نباشید من سایت زدم به نام www.persian-titan.ir وقتی تو pc با مرورگر کروم تست میکنم و کوچیک میکنم page و respomsive میشه اما وقتی با تبلت مستقیم وصل میشم و تست میکنم همچین اتفاقی نمیوفته همه جوره چک کردم محیط و اما واقعا گیج شدم ..
ممنون میشم کمکی نکته ای چیزی هست کمکم کنید

وحید صالحی

ببینید متا تگ viewport در قسمت head قالبتون قرار داره

amir rahimi morad

ممنون از راهنماییتون …

مازیار replyپاسخ

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

لقمان آوند

ایمیلی از شما نگرفتم . کی ارسال کردید ؟

جعفر پیشدادی replyپاسخ

با سلام….راست چین نمودن قالبی که از بوت استرب وفایل css استفاده نموده به چه صورت انجام می گیرد..مراحل

وحید صالحی

سلام این مورد رو در دوره آموزشی بوت استرپ و نحون راستچین کردن فایل های بوت استرپ رو توضیح و آموزش میدیم…

زمان الله ابراهیمی replyپاسخ

باسلام خسته نباشید استاد آوند فقد یک سوال یا یک درخواست از شما دارم
من تازه یک قالب طراحی کردم میخواهم منوی بالا مثل منوی شما با شه یعنی فکس باشه وهم
responsive با شه و قتی صفحه کوچک میشه منوی ها تو در تو مثل منوی سون لرن باشه
اگه راهنمایی کنید خیلی ممنون میشم یا یک کد بدید که توی قالب بزارم خیلی نیاز دارم
ممنون میشم که یک کد آماده بدید با تشکر از شما 🙄

وحید صالحی

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

زمان الله ابراهیمی

آقای صالحی عزیز ممنون که جواب دادید توی دوره بوت استریپ شما همچین منوی در نظر دارید که آموزش بدید خیلی ممنون ❓ ❓

وحید صالحی

خواهش می کنم بله توسط فریم ورک بوت استرپ آموزش میدیم

فرهاد replyپاسخ

استاد این دکمه هایی که در بالای صفحه ثبت نام دوره ها در سون لرن هست، (دکمه هایی که مثلا نام مدرس رو نوشته و شهریه و این ها) برای استایل دهیشون از چه فریم ورکی استفاده شده؟ اون طور که من توی سورس کد صفحه دیدم ظاهرا با فریم ورک foundation ایجاد شده اما من در مستندات فریم ورک foundation خیلی نگاه کردم دکمه هایی با چنین شکل هایی متاسفانه ندیدم. برای شکل دهی به این دکمه ها چیکار کردید میشه یه مقدار توضیح بدید؟ با تشکر

لقمان آوند

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

Alireza Sajedi replyپاسخ

سلام استاد صفحه دموی قالب این جلسه مشکل دارد لطفا پیگیری شود.

Alireza Sajedi replyپاسخ

سلام استاد در قسمت 24 طراحی وب بحث رسپانسیو چرا مرورگر من فقط برای 800 پیکسل واکنش میده و برای 400 پیکسل که همون عرض گوشی باشه واکنش نمیده؟

لقمان آوند

خوب احتمالا breakPoint ها اینجوری تعریف شدن!
برای زیر 400 هم می تونید تعین کنید و کدهای css اونو بزنید

sana_esi replyپاسخ

سلام،ممنون ازآموزشای جامع شما
میخواستم بدونم که استفاده ازفریمورک هاروچقدر توصیه می کنی؟

وحید صالحی

خیلی زیاد چون هم بهینه و اصولی و استاندارد هستند و هم سرعت کدنویس رو بالا می برن

Mohammadali Khoo replyپاسخ

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

وحید صالحی

مشکل شما احتمالا مربوط به مدیا کوئری هست که برای اسکرین های کوچک طراحی و کدنویسی کردید طبق آموزش ها پیش برید مشکلی نخواهد بود و قالبتون درست نمایش داده خواهد شد…

حمیدرضا صفری replyپاسخ

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

لقمان آوند

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

erfan foroughi replyپاسخ

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

لقمان آوند

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

حمیدرضا صفری replyپاسخ

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

لقمان آوند

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

danial asvadi replyپاسخ

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

لقمان آوند

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

میلاد فلاح replyپاسخ

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

لقمان آوند

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

alireza fatehi replyپاسخ

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

لقمان آوند

رفع شد
ممنون

محسن بشیری replyپاسخ

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

لقمان آوند

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

sadaf replyپاسخ

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

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

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

علی صالحی replyپاسخ

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

امیرحسین شکری replyپاسخ

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

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

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

ارسال نظرات

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