آموزش ریسپانسیو سازی قالب با css3 به صورت پروژه محور
ریسپانسیو در css یا واکنش گرایی سایت؟!
حتما این روزا این کلمات و جملات رو زیاد میشنوید که : سایت باید ریسپانسیو باشه یا اینکه آیا سایتی که طراحی میکنید واکنش گرا هست یا نه و یا حرف هایی در مورد اهمیت زیاد ریسپانسیو بودن سایت!!! اما ببینم این ریسپانسیو در css چی هست و واقعا به چه دردی میخوره تا بعد بریم سراغ آموزش ریسپانسیو کردن قالب...
پیش نمایش دوره آموزش ریسپانسیو در CSS :
برای مشاهده ادامه این دوره آموزشی فهرست دورس را مشاهده کنید.
ریسپانسیو بودن سایت
ریسپانسیو در css به صورت ساده به این معنی هست که عناصر و چیدمان یک صفحه وب در همه دستگاه ها با سایز های متفاوت به صورت مطلوب و مناسب نمایش داده شود.
تفاوت قالب ریسپانسیو با غیر ریسپانسیو
اگر قالبی ریسپانسیو یا واکنش گرا نباشد و ما آن رو در یک صفحه نمایش کوچکتر مانند موبایل مشاهده کنیم ، میبینیم که صفحه نمایش موبایل سعی میکند که کل عناصر قالب رو در صفحه نمایش کوچک خودش نمایش دهد و به همین دلیل قالب رو به قدری zoom out میکند که کلیه عناصر قالب کاملا ریز خواهند شد به طوری که برای دیدن یک قسمت از قالب باید حتما بر روی آن قسمت zoom کنیم که همچین حالتی برای کاربران بسیار ناخوشایند خواهد بود و اگر سایتی این حالت رو داشته باشد باعث میشه که کاربران از این سایت فورا خارج شوند.
خوب در پی اینکه همچین مشکلی برای سایت ها پیش اومد بحث ریسپانسیو در css برای طراحان وب اهمیت بیشتری پیدا کرد.
در قالب های ریسپانسیو ، عناصر قالب طوری طراحی میشوند که چیدمان و اندازه عناصر متناسب با صفحه نمایش های مختلف تغییر کند.در تصویر زیر میتونید این تفاوت رو کامل تر مشاهده کنید : شکل 1 ریسپانسیو هستش و شکل 2 غیر ریسپانسیو
مزایای یک سایت یا قالب ریسپانسیو
- کاربران راحتر میتونن با یک سایت ریسپانسیو کار کنن
- سایت های ریسپانسیو بیشتر مورد توجه موتورهای جستجوگر هستند و برای آنها اولویت بالاتری دارند
- نرخ خروج از سایت که یکی از معیار های سئو محسوب میشه ، بسیار کاهش پیدا میکنه
- افزایش نرخ تبدیل بازدید کننده به مشتری در سایت
- امکان تبلیغ سایت در اپلیکیشن های موبایلی
- افزایش بازدید سایت از طریق دستگاه های کوچکتر مانند گوشی های هوشمند و تبلت ها
- و…
یک عیب!!! : هزینه بالای ریسپانسیوسازی سایت ( عیب یا مزیت )
دوستان ریسپانسیو در css از سرتاپا کلا مزیت هستش 🙂 اما تنها عیبی که بتونیم بهش بگیریم این هستش که هزینه این کار در حوضه وب بالا هستش…
اما واقعا این عیب هستش یا مزیت ؟!! این بستگی به شما داره که این گزینه رو برای خودتون به عیب یا مزیت تبدیل کنید! خوب اگه خودتون ریسپانسیو در css رو بلد باشید که بهتون تبریک میگم با آموزش ریسپانسیو سازی قالب، این برای شما یک مزیت هستش و خودتون میتونید قالب یا سایت خودتون رو ریسپانسیو کنید و حتی میتونید این مزیت رو به درآمد هم تبدیل کنید… اما در مقابل اگر شما ریسپانسیوسازی رو بلد نباشید خوب طبیعتا شما باید این هزینه بالا رو بپردازید!
خوب الان اگه میخواید آموزش ریسپانسیو سازی قالب با CSS3 رو یاد بگیرید و این رو برای خودتون به یک مزیت تبدیل کنید بریم که این دوره آموزشی رو شروع کنیم…
ویژگی های دوره
- درس 11
- آزمون ها 0
- مدت 2 ساعت و 42 دقیقه
- سطح مهارت تمام سطوح
- زبان فارسی
- تعداد شرکت کنندگان 250
- ارزیابی ها بله
-
پیش نمایش و فایل های دانلودی دوره
-
فهرست دروس
-
next1app
همیشه عالی و پر محتوا
خیلی چیزارو از شما آموختیم استاد واقا کیفیت ضبط ویدیو و آموزشتون محشره. همچنان مشتاقانه منتظر آموزش های بیشتر شما استاد گرامی هستیم
-
mohammad adineh
امتیاز
آقای مصطفی زاده همیشه شاد باشی و همینطور پر انرژی . منتظر آموزش های بیشتر شما دوست عزیز هستیم
29 دیدگاه
با سلام و احترام
استاد گرامی جناب کریم زاده شما توی این دوره از مباحث فلکس باکس استفاده میکنید.
با تشکر
سلام و درود
خیر ، دوره آموزش 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 میتونید مشخص کنید که فایل های سایتتون تا چه مدت توی کش مرورگر کاربر ذخیره بشه و چند وقت یکبار فایل ها رو بروز کنه
برای اطلاع از این کدها کافیه این مورد رو توی گوگل سرچ کنید
موفق و پیروز باشید
امید وارم این دوره در تخفیف هفتگی بعدی تخفیف بخوره تا تهیش کنم.