آموزش ریسپانسیو سازی قالب با css3 به صورت پروژه محور
ریسپانسیو در css یا واکنش گرایی سایت؟!
حتما این روزا این کلمات و جملات رو زیاد میشنوید که : سایت باید ریسپانسیو باشه یا اینکه آیا سایتی که طراحی میکنید واکنش گرا هست یا نه و یا حرف هایی در مورد اهمیت زیاد ریسپانسیو بودن سایت!!! اما ببینم این ریسپانسیو در css چی هست و واقعا به چه دردی میخوره تا بعد بریم سراغ آموزش ریسپانسیو کردن قالب... توصیه میشود ( دوره آموزشی طراحی سایت ) را نیز مشاهده کنید
ریسپانسیو بودن سایت
ریسپانسیو در css به صورت ساده به این معنی هست که عناصر و چیدمان یک صفحه وب در همه دستگاه ها با سایز های متفاوت به صورت مطلوب و مناسب نمایش داده شود.
تفاوت قالب ریسپانسیو با غیر ریسپانسیو
اگر قالبی ریسپانسیو یا واکنش گرا نباشد و ما آن رو در یک صفحه نمایش کوچکتر مانند موبایل مشاهده کنیم ، میبینیم که صفحه نمایش موبایل سعی میکند که کل عناصر قالب رو در صفحه نمایش کوچک خودش نمایش دهد و به همین دلیل قالب رو به قدری zoom out میکند که کلیه عناصر قالب کاملا ریز خواهند شد به طوری که برای دیدن یک قسمت از قالب باید حتما بر روی آن قسمت zoom کنیم که همچین حالتی برای کاربران بسیار ناخوشایند خواهد بود و اگر سایتی این حالت رو داشته باشد باعث میشه که کاربران از این سایت فورا خارج شوند.
خوب در پی اینکه همچین مشکلی برای سایت ها پیش اومد بحث ریسپانسیو در css برای طراحان وب اهمیت بیشتری پیدا کرد.
در قالب های ریسپانسیو ، عناصر قالب طوری طراحی میشوند که چیدمان و اندازه عناصر متناسب با صفحه نمایش های مختلف تغییر کند.در تصویر زیر میتونید این تفاوت رو کامل تر مشاهده کنید : شکل 1 ریسپانسیو هستش و شکل 2 غیر ریسپانسیو
مزایای یک سایت یا قالب ریسپانسیو
- کاربران راحتر میتونن با یک سایت ریسپانسیو کار کنن
- سایت های ریسپانسیو بیشتر مورد توجه موتورهای جستجوگر هستند و برای آنها اولویت بالاتری دارند
- نرخ خروج از سایت که یکی از معیار های سئو محسوب میشه ، بسیار کاهش پیدا میکنه
- افزایش نرخ تبدیل بازدید کننده به مشتری در سایت
- امکان تبلیغ سایت در اپلیکیشن های موبایلی
- افزایش بازدید سایت از طریق دستگاه های کوچکتر مانند گوشی های هوشمند و تبلت ها
- و…
یک عیب!!! : هزینه بالای ریسپانسیوسازی سایت ( عیب یا مزیت )
دوستان ریسپانسیو در css از سرتاپا کلا مزیت هستش 🙂 اما تنها عیبی که بتونیم بهش بگیریم این هستش که هزینه این کار در حوضه وب بالا هستش…
اما واقعا این عیب هستش یا مزیت ؟!! این بستگی به شما داره که این گزینه رو برای خودتون به عیب یا مزیت تبدیل کنید! خوب اگه خودتون ریسپانسیو در css رو بلد باشید که بهتون تبریک میگم با آموزش ریسپانسیو سازی قالب، این برای شما یک مزیت هستش و خودتون میتونید قالب یا سایت خودتون رو ریسپانسیو کنید و حتی میتونید این مزیت رو به درآمد هم تبدیل کنید… اما در مقابل اگر شما ریسپانسیوسازی رو بلد نباشید خوب طبیعتا شما باید این هزینه بالا رو بپردازید!
خوب الان اگه میخواید آموزش ریسپانسیو سازی قالب با CSS3 رو یاد بگیرید و این رو برای خودتون به یک مزیت تبدیل کنید بریم که این دوره آموزشی رو شروع کنیم…
ویژگی های دوره
- تعداد جلسات 11
- امتحانات 0
- مدت 2 ساعت و 42 دقیقه
- سطح مهارت تمام سطوح
- زبان فارسی
- دانشجویان 420
- ارزیابی ها بله
-
پیش نمایش و فایل های دانلودی دوره
-
فهرست دروس
-
abrahimiali488
انتقاد
سلام و خسته نباشید خدمت استادگرامی مصطفی زاده استا من کلا اهل سوال کردن و تعریف و تمجید نیستم ولی چون پایه برنامه نویسی رو از شما آموختم و با شما به دنیای مجازی علاقه مند شدم همیشه خودم رو مدیون شما میدانم و این دین به گردنم نسبت به شما باعث شد برای اولین بار روی نظرات گام بردارم و چند سطر خلاصه وار ادای دین کنم هر چند که در سایت ذینفع نیستم و هیچ اجباری ندارم که رو نظرات وقت بزارم خلاصه کلام : در دنیایی که همه آموزشها نصف ساعت آموزش رو برای تعریف و تمجید خود میپردازند و آخر سر یک خروار چرندیات تحویل آدم میدهند که مثلا ساعت آموزش رو بالا ببرند و به شعور مشتری توهین کنند و دانشجو رو از هدف اصلی آموزش دور و علایق و انگیزها رو میکشند . هستند آدم های مثال استاد گرام که یقینا خداترسند. متاسفانه و متاسفانه گمنام ! آهای با شمام که تو دنیای مجازی و در انبوهی از علاف های هرز سرگدانی در خرید آموزشهای گرانبها اندکی تامل شرط عقل نیست لطفا بشتابید و و جهت کمک به هموطنانمان و مفتخر بودن به استاد گمناممان آقای مصطفی زاده نهایت تلاش و همت را اهتمام ورزیم در پایان امیدوارم برا همیشه شاهد تداوم آموزشهای گرانبهای شما باشیم و سربلند و کامیار باشید برادر کوچکتان آقای ایرانی
-
next1app
همیشه عالی و پر محتوا
خیلی چیزارو از شما آموختیم استاد واقا کیفیت ضبط ویدیو و آموزشتون محشره. همچنان مشتاقانه منتظر آموزش های بیشتر شما استاد گرامی هستیم
-
mohammad adineh
امتیاز
آقای مصطفی زاده همیشه شاد باشی و همینطور پر انرژی . منتظر آموزش های بیشتر شما دوست عزیز هستیم
53 دیدگاه
سلام وقت بخیر
من ریسپانیو رو در لوکال انجام دادم همه چیز اوکی هست ولی وقتی میزارم روی هاست ، اون تغییرات انجام نمیشه
مطمئن بشید که لینک استایل هاتون درست باشه
سلام توی این دوره از چه ابزاری برای ریسپانسیو استفاده کردید؟
سلام و درود
با مدیاکوئری و CSS خام
سلام اقای مصطفی زاد ه من 2 دوره اموزش اموزش طراحی قالب با سی اس تری و اموزش رسپانسبو سازی با سی اس رو از شما خریدارکردم امااین براکت من درست کار نمی کنه میشه بگید شما چه نوع براکتی استفاده می کنید من هم استفاده کنم مال من اخرین ورزن هست
واین که اگر میشه یک اموزش در رابطه با نصب راکت و افزونه هاش و کابردش هم بزارید ممنون
سلام و درود
پیشنهاد میکنم از ادیتور VSCode استفاده کنید
سلام. ممنون از آموزش های بسیار پر انرژیتون. آقا باور کنید گاهی اوقات احساس میکنم کنارم هستین و حین آموزش ازتون سوال میپرسم.
سوال: همین اول آموزش به مشکل خوردم و وقتی در CSS به تگ header عرض و ارتفاع 100% میدم فقط عرض 100%اعمال میشه و ارتفاع رو به درصد قبول نمیکنه و حتما باید به پیکسل وارد کنم تا عکس رو کامل نمایش بده.
سلام و درود
ممنون از نظر و انرژی شما
برای اینکه یک المنت ارتفاع درصدی بگیره باید والد داشته باشه ، شما داخل استایل هاتون به body و html ارتفاع 100% بدید
موفق و پیروز باشید
سلام استاد
این اموزش رو الان خریدم… 20 دقیقه اول درس 6 رو نگاه کردم که شروع کردید به ریسپانسیو….انقد با حوصله و خوب درس دادید که وظیفه خودم دونستم تشکر کنم از صبر و حوصله ای که به خرج دادید و اینکه به جزئیات دقت داشتید…خیلی سپاسگزارم.
سلام و درود
ممنون بابت اینکه نظرات خودتون رو ما در میان میزارید و بهمون انرژی میدید
خوشحالم که دوره مورد توجه تون قرار گرفته
موفق و پیروز باشید
سلام استاد خسته نباشد ممنون از دوره خوبتون مثل همیشه عالی بود فقط یک سوال داشتم اینکه صفحه کروم من از 500px به بعد دیگه کوچیک نمیشه و با استفاده از inspect و Ctrl + Shift + M هم تغییرات ریسپانسیو (مدیاکوری ها) اعمال نمیشه اگه امکان داره راهنمایی کنید یا یک لینکی از مرورگر کروم بفرستید
سلام و درود
ممنون از نظر ارزشمند تون
با مرورگر فایرفاکس هم این مشکل رو دارید؟
سلام استاد …ببخشید مزاحم شدم…بنده html تموم کردم و css رو هم اخراشه میخوام بیام این اموزشتون رو ببینم…خواستم بدونم ریسپانسیو که مربوط به زبان دیگری نمیشه ؟یعنی مثلا در این اموزش که نمیاییم سری به جاوا اسکریپت بزنیم مث اموزش html که از درس 20 به بعد مربوط به جاوا اسکریپت بود…یعنی ریسپانسیو کردن کاملا مربوط به css میشه؟ ممنون از زحمات و تدریس خوبتون استاد عزیز.
سلام و درود
خیر این دوره آموزشی فقط و فقط ریسپانسیوسازی با CSS هست
موفق و پیروز باشید
سلام خسته نباشید
من یک اسکریپت فروشگاهی دارم
روی تبلت و کامپیوتر سایزش خوبه
اما با گوشی اسکرول افقی میخوره و از همه مهم تر دکمه های منو ابشاری کار نمیکنه
مثلا تو صفحه لوگین سای، خوبه اما بیشتر صفحات خراب و خب از همه مهم تر عمل نکردن همون دکمه های منو ابشاری
این اسکریپت همش php من متوجه نشدم این کد هارو کجا باید قرار بدم توی تمام صفحات ؟؟
یا اصلا این بدردم میخوره؟؟
اگر میشه راهنماییم کنید
و یا اگر این کار نیاز به هزینه داره بگید پرداخت میکنم
سلام و درود
ببینید هر اسکریپت یا سایتی دارای یک فایل style.css هست و کار PHP استایل نویسی نیست ، شما داخل سایتتون فایل style.css رو پیدا کنید و خیلی راحت میتونید کدهای ریسپانسیو رو اضافه کنید
متاسفانه ما پروژه دریافت نمیکنیم
موفق و پیروز باشید
سلام من وقتی میخوام مرورگر خودم رو کوچیک کنم از ۵۰۰ پیکسل کوچیکتر نمیشه و فکر میکنم چون از اخرین ورژن کروم استفاده میکنم اینطوریه
شما در این اموزش از کدوم ورژن کروم استفاده کردید؟
سلام و درود
از آخرین نسخه استفاده کنید و برای مشاهده سایز های مختلف ابتدا کلیک راست و inpect و در نهایت از کنترل های Ctrl + Shift + M اسفاده کنید
موفق و پیروز باشید
سلام وقت بخیر استاد.ببخشید در بخش اول سایت شما برای
div.conteiner{max-width:1200px}
قرار دادید چرا از در صد نسبی استفاده نکردید%که مثلا این ظرف در هر سایزی اندازه 100در صد ویا 80 درصد بگیره ایا مشکلی به وجود میاد ؟
سلام و درود
به این خاطر px قرار داده میشه که ما در هر رزولیشنی باشیم عرض کانتینر ما همون 1200 پیکسل باشه و از اون بیشتر نشه برای مثال اگر شما درصد بدید و قالب خودتون رو توی یک نمایشگر 20 اینچ یا رزولویشن 1920 مشاهده کنید میبینید که کانتینر و المنت های شما اندازه شون خیلی متفاوت خواهد شد
موفق و پیروز باشید
باسلام من نتونستم وارد کانال تلگرامی بشم.
سلام و درود
از طریق آیدی amuzeshtak@ براحتی میتونید وارد کانال تلگرامی ما بشید
موفق و پیروز باشید
سلام مهندس میتونید یه کد تخفیف به من بدید من این دوره رو تهیه کنم تخفیف 60درصد هم که کلا درست نیست یعنی 60درصد واقعی نیست اگه میشه یه کد تخفیفی تا امروز بدید تا بتونم بخرم ممنون از شما که این اموزش های خوبو تهیه میکنید
سلام و درود
ببینید دوره ها نسبت به قیمت شون تخفیف شون هم متفاوت هست بعضی دوره ها بالای 60 درصد تا 90 درصد هم تخفیف خوردن اما دوره ریسپانسیو با توجه به اینکه قیمت چندان بالایی ندارد تخفیف ش رو نمیتونیم بیشتر از این قرار بدیم
موفق و پیروز باشید
با سلام و احترام
استاد گرامی جناب کریم زاده شما توی این دوره از مباحث فلکس باکس استفاده میکنید.
با تشکر
سلام و درود
خیر ، دوره آموزش Flexbox به صورت رایگان در سایت موجود هست که میتونید مشاهده کنید
موفق و پیروز باشید
سلام آقا کریم ، من تو بحس ریسپانسیو طبق آموزش خودتون دارم میرم جلو اما وقتی از این دستور استفاده میکنم
@media screen and (max-width:600px){
.logo{
display: none;
}
}
max-width اجرا نمیشه.
ولی وقتی از min-width استفاده میکنم اجرا میشه ولی با مشکلات خاص min-width
مشکل از چی میتونه باشه؟میخوام از max-width استفاده کنم.
اکثر width های کاربردی هم براساس % می باشد.
از vscod استفاده میکنم.مرورگرم هم کروم Version 76.0.3809 استفاده میکنم.
سلام و درود
لطفا از طریق آیدی تلگرامی که در صفحه تماس با ما قرار داده شده با بنده در ارتباط باشید
موفق و پیروز باشید
سلام واقعا دوره هاتون از هر نظری کامل و عالی فقط کی آموزش php رو میزارین ؟
سلام و درود
با تشکر از نظر ارزشمند شما ، خوشحالیم که دوره ها مورد توجه شما قرار گرفتن
متاسفانه در حال حاضر دوره طراحی قالب وردپرس در حال ضبط هست اما انشالا در آینده حتما PHP رو آموزش خواهیم داد
موفق و پیروز باشید
سلام و خسته نباشید! ممنون از آموزش های خوب و کاربردیتون،
استاد عزیز خواستم بدونم ابن دوره ریسپانسیو با استفاده از تکنیک Grid یا flex یا بر اساس تقسیم بندی های عرضی صفحه(.col-1 {width: 8.33%;}) و مدیا کوئری؟
سلام و درود
با سپاس از نظر ارزشمند شما
در این دوره آموزشی ریسپانسیوسازی قالب با استفاده از مدیا کوئری CSS انجام میشه اما در دوره آموزش بوت استرپ 4 برای ریسپانسیوسازی قالب از Grid System و Flexbox استفاده میکنیم
موفق و پیروز باشید
سلام آقای مصطفی زاده خسته نباشید.
میخواستم بدونم سایت ها رو چجوری داینامیک می کنن؟
سلام و درود
برای داینامیک کردن سایت ها دو روش کلی وجود داره : 1- استفاده از برنامه نویسی سمت سرور مثل PHP یا ASP و ساخت یک سیستم مدیریت محتوای اختصاصی 2- استفاده از یک سیستم مدیریت محتوای آماده مثل وردپرس یا دیگر CMS ها که در این روش شما قالب سایتتون رو طراحی میکنید و در نهایت با توابع مخصوص وردپرس قالب رو تبدیل میکنید
موفق و پیروز باشید
سلام وقت بخیر و خسته نباشید.
با تشکر از سایت خوبتون با آموزش های عالی
ببخشید من این دوره ی شما رو خریداری کردم آموزشتون عالی بود.
یه سوال داشتم تو قسمت اول آموزش که هدر را میسازیم یه تصویر تو css به بکگراند هدر تعریف میکنیم و height آن را 100% قرار میدهیم من وقتی این کار را انجام میدم هدرم 100% نمیشه تقریبا 50پیکسل میشه البته دلیلشو پیدا کردم از doctype html هست وقتی این رو از اول کد html برمیدارم عکس رو کامل یعنی 100% نشون میده. خواستم ببینم دلیل آن چی هست و راهی هست که doctype html باشه و height آن 100% بشه؟
بازم ممنون از سایت خوبتون
سلام و درود
با تشکر از نظر ارزشمند شما
بله وقتی ما داخل سند خودمون از doctype استفاده نمیکنیم html و body ارتفاع صددرصد رو میگیرن اما وقتی doctype رو قرار میدیم html و body فقط به اندازه المنت های فرزند ارتفاع میگیرن به همین خاطر این مشکل پیش میاد
برای رفع این مشکل اگر بالا doctype رو قرار دادین استایل زیر رو داخل CSS قرار بدین :
html,body{
height:100%;
}
موفق و پیروز باشید
سلام وقت بخیر متاسفانه کد تخفیف ramezan کار نمیکنه و هیچ اروری هم نمیده !!!
سلام و دورد
طی اطلاع رسانی های مککر داخل کانال تلگرام آموزش تک کد تخفيف رمضان منقضی شده
موفق و پیروز باشید
کوپن “ramezan” وجود ندارد!
مگه کد تخفیف یک ماهه نبود برای ماه رمضان؟!!!
خیر داخل کانال تلگرام هم اطلاع رسانی شد که کد تخفیف منقضی خواهد شد
کد تخفیف : ramezan کار نمیکنه
سلام و درود
به چه مشکلی برخوردید لطفا خطارو کامل برای ما بفرستید
موفق و پیروز باشید
سلام خسته نباشید مرسی از اموزش خوبتون
یه سوالی دارم من وقتی این قالب رو تو دیوایس های دیگه باز میکنم فایل css و عکس هام لود نمیشه لینک html به css رو هم چک کردم
سلام و درود
ممنون از نظر ارزشمند شما
لطفا از طریق قسمت تماس با ما با آی دی تلگرام مدیریت در این مورد تماس بگیرید
موفق و پیروز باشید
عالی بود خیلی قشنگ توضیح دادید اون نکته ها هم که گفتید خیی جالب بود ممنون
سلام و درود
خوشحالیم که این دوره آموزشی مورد توجه شما واقع شده
با سپاس از نظر ارزشمند شما
موفق و پیروز باشید
سلام وقت بخیر
خواستم بدونم که بازهم در انتهای سال تخفیف میزارید برای محصولاتتون یا این آخرین دوره تخفیف امسال هستش؟
سلام و درود
در حال حاضر 30 درصد تخفیف بر روی دوره ها اعمال شده و فعلا مشخص نیست که چه زمانی دوباره تخفیف بر رو دوره ها اعمال شود
موفق و پیروز باشید
سلام خیلی ممنون از آموزش خوبتون یک سوال داشتم چطوری میتونم کاری کنم که منویی که ساختم مثل آموزش شما با حالت آرام تر و زیبا تری ظاهر بشه
سلام و درود
خوشحالیم که این دوره آموزشی مورد توجه شما واقع شده
برای اینکار میتونید از keyframes در css استفاده کنید اما روش بهتر استفاده از جاوا اسکریپت یا جی کوئری هست که ما دقیقا همچین منویی رو در آموزش جاوا اسکریپت طراحی کردیم که در پیش نمایش دوره میتونید ببینید
موفق و پیروز باشید
با عرض سلام و ادب آقای مصطفی زاده
ابتدا به خاطر آموزش های خوب و جامعتون خسته نباشید میگم و تشکر .
مشکلی داشتم . اینکه موقعی که تغییراتی روی قالب سایتم اعمال میکنم و اون رو روی هاستم آپلود میکنم همه چیز درسته ولی وقتی که بازدید کننده ای که قبلا از سایت دیدن کرده ، تغییرات جدید رو نمیبینه و برای اینکه تغییرات جدید رو ببینه باید کش مرورگر رو پاک کنه.
آیا باید دستور یا کدی اضافه کنم ؟
چه طور میتونم مشکلم رو حل کنم ؟
سلام و درود
از نظر و دیدگاه ارزشمند شما سپاسگزاریم ، خوشحالیم که دوره ها مورد توجه شما همراه عزیز ما قرار گرفته
اگر هاستتون لینوکس باشه ،با استفاده از فایل htaccess میتونید مشخص کنید که فایل های سایتتون تا چه مدت توی کش مرورگر کاربر ذخیره بشه و چند وقت یکبار فایل ها رو بروز کنه
برای اطلاع از این کدها کافیه این مورد رو توی گوگل سرچ کنید
موفق و پیروز باشید
امید وارم این دوره در تخفیف هفتگی بعدی تخفیف بخوره تا تهیش کنم.