مهم (تخفیف درصد بالا): جهت حمایت از کاربران و کسب و کارهای آسیب دیده تا پایان امشب 50 و 90 درصد تخفیف فعال شد... جزئیات
همراه لرن فایلز باشید با آموزش طراحی قالب ریسپانسیو ویدیویی! طراحی ریسپانسیو (Responsive) یکی از امتیازات و الزامات یک وب سایت است! واکنشگرا بودن یا ریسپانسیو بودن یک وب سایت به این معناست که بعد از طراحی و پیاده سازی یک قالب ریسپانسیو، کاربر سایت شما می تواند سایت را بدون مشکل، مرتب و با دسترسی مناسب به اجزای مختلف سایت روی تمامی وسایل با اندازه های مختلف مانند تبلت و موبایل و لپ تاپ و … مشاهده کند.
پس از انتشار دوره 0 تا 100 آموزش بوت استرپ 4 حالا تصمیم گرفتیم در قالب یک پروژه کامل و جذاب به آموزش طراحی واکنشگرا بپردازیم و ریسپانسیو کردن سایت را به صورت کامل و قدم به قدم آموزش دهیم. با آموزش پروژه محور طراحی وب سایت واکنشگرا همراه لرن فایلز باشید.
این روز ها اگر وب سایت شما تنها در یک سایز مشخص مثلاً PC یا لپ تاپ به درستی نمایش داده شود و در سایر سایز ها مشکل داشته باشد، شما متحمل ضرر های زیادی خواهید شد از کاهش رضایت کاربر و حتی سئو وب سایت گرفته تا کاهش زمان حضور مخاطب در وب سایت شما و نهایتاً کاهش میزان فروش!
بازدید کنندگان با تبلت و گوشی های لمسی به وب سایت شما مراجعه می کنند و اینجاست که قالب ریسپانسیو به معنای پاسخ گرا یا واکنشگرا معنا پیدا می کند. به عبارتی طراحی وب سایت Responsive به شیوه ای می باشد که در اندازه های مختلف و دستگاه های متفاوت سایت به درستی نمایش داده می شود. طراحی سایت به شکلی که در هر اندازه صفحه قابل استفاده باشد اصطلاحا طراحی واکنش گرا یا Responsive web design نامیده می‌شود.
سرفصل های آموزش طراحی قالب ریسپانسیو:
سرفصل ها کلی بوده و بسیاری از موارد ذکر نشده است و ممکن است هر بخش شامل چندین ویدئو زیر مجموعه باشد.
مقدمه، معرفی مدرس و دوره آموزش طراحی قالب ریسپانسیو
آشنایی با مفاهیم اولیه
آشنایی با متا تگ viewport و تاثیر آن بر طراحی ریسپانسیو
شروع پیاده سازی قالب برای آشنایی بیشتر با مفاهیم طراحی ریسپانسیو
معرفی انواع Media query ها و آموزش ریسپانسیو با مدیا کوئری
نحوه استفاده از چند CSS مجزا برای سایزهای مختلف صفحه نمایش با Media attribute
آشنایی بامفهوم Mobile first و تفاوت آن باDesktop firstتعدادی از ویدیو های این دوره در بخش مربوط به پیش نمایش آموزش (بالا- ستون سمت راست) برای شما قرار داده شده است تا از کیفیت کمی و کیفی آموزش طراحی قالب ریسپانسیو – پروژه محور مطمئن شوید و قبل از خرید این دوره آموزشی به خوبی سطح آن را از همه لحاظ ارزیابی کنید.
قبل از شروع آموزش طراحی قالب ریسپانسیو – پروژه محور نیاز به یادگیری آموزش های زیر دارید:
این آموزش تاکنون نیاز به آپدیت نداشته است و کاملاً بروز می باشد!
چنانچه احساس میکنید این آموزش نیاز به آپدیت و بروزرسانی دارد لطفاً این موضوع را با ما در میان بگذارید.
چشم استاد . ممنون از راهنماییتون . دوره بوت استراپ هم خرید میکنم . اگر سوالی داشتم همون جا مزاحمتون میشم . ممنونم از راهنماییتون
سلام این صفحه رو من تونستم ریسپانسیو کنم . استاد ببینید چطور هستش . البته یه صفحه ساده هستش
https://pishgamanalborz.ir/site/index.html
سلام
خیلی خوبه ولی دوتا نکته رو هم لحاظ کنید عالی می شه
اول اینکه فونت سایز هاتون رو به پیکسل بدید نه درصد
مثلا منوی بالا سمت چپ تو حالت موبایل خیلی ریز می شه
در کل چه ریز چه درشت بهتره به پیکسل باشه
معمولا هم یه سایز ثابت بدید مشکلی پیش نمی یاد و نیازی نیست تو حالت های مختلف صفحه نمایش سایز فونت ها رو تغییر بدیم
دوم هم اینکه اون قسمت سرویس های جشنواره رو بهتره به جای یدونه عکس واحد،
عکس کلاه و وای فای رو جدا کنید که می شن دوتا عکس
یدونه هم عکس بک گراند
سعی کنید اون باکس رو با عکس و نوشته های جدا پیاده سازی کنید
یعنی یه div که background داره
همینطور بالاش یه تا عکس و پایین اش دوتا نوشته
استاد دست شما درد نکنه . خیلی با حوصله و زیبا توضیح دادید . واقعا ممنونم .
سلام تشکر از ارسال نظرتون
سلام سوالی داشتم این دوره با بوت استراپ هستش یا خیر ؟
سلام استاد با تشکر بابت اموزش خوبتون فقط اینکه الان من یه پروژه دارم کار میکنم که دارای حداقل 10 صفحه هستش حالا با این پروژه ای که شما گفتین و اموزشی که دادین یه کم سخته ریسپانسیو کردنش شما راهکاری واسه این مشکل بنده دارین واینکه شما تو هر media ای که مینوشتین این درصد برای width هارو من متوجه نشدم میشه در مورد اونم یه کم توضیح بدین
با تشکر
سلام
در مورد سوال اولتون باید بگم که طبیعتا وقتی شما ده تا صفحه دارید، حجم کارتون بیشتر از یه صفحه است. به این معنی که مشخصا برای هر صفحه ای که کدنویسی می کنید باید کدهای مربوط به بخش ریسپانیسوش رو هم بنویسید
البته بعد از گذشت زمان که تجربتون بیشتر شد، سرعت و کیفیت کارتون هم بهتر می شه. البته بعدا با فریم ورک هایی مثل بوت استرپ آشنا می شید که سرعت توسعه رو بشدت بالا می بره و خیلی از این موارد رو هم پوشش می ده. هرچند که بازهم با وجود بوت استرپ لازمه بخش هایی رو خودتون ریسپانیسو کنید
در مورد سوال دومتون هم درصد جایی به کار می ره که شما لازم داریم بخش هایی رو داشته باشیم که با کوچیک یا بزرگ شدن صفحه، اونها هم تغییر سایز بدن و چون از درصد استفاده کردید نسبت بزرگ یا کوچیک شدن المنت های صفحه تون یه اندازه است.
مثلا فرض کنید یه همچین کدی html ای داریم:
و همینطور این استایل ها رو نوشتیم:
.sidebar-container{
width: 25%;
}
.content-container{
width: 75%;
}
حالا اگر عرض main-container ما بشه 200 پیکسل عرض sidebar-container می شه 50 پیکسل و عرض content-container می شه 150 پیکسل
فرقی نمی کنه عرض main-container ما چقدر باشه. همیشه عرض content-container ما سه برابر sidebar-container خواهد بود
سلام و خسته نباشید
ممنونم از آموزش خوبتون.
من پروژه رو تا یک جایی انجام دادم و به مشکل برخوردم. الان من سایز صفحه رو که از 1200 کمتر می کنم تغییرات اعمال میشه ولی content-container فاصله ش با کناره ها خیلی زیاد میشه.نمیدونم مشکل از کجاست ممنون میشم راهنمایی کنید.
سورس پروژه رو براتون از طریق پروفایلم ارسال میکنم.
سلام
داخل css ها خط 173 این کد اشتباهه:
width: calc(75% – 20%);
درستش اینه:
width: calc(75% – 20px);
سلام ممنونم
سلام
وقت بخیر
من برای طراحی وب واکنش گرا به جای Bootstrap از همان Html و CSS خام (view port, media query) استفاده می کنم.
حالا شرکتی که براش به صورت پروژه ای کار میکنم از من میخواد که برای طراحی قالب ها از Bootstrap استفاده کنم.
حالا سوالم اینه که آیا لازم هست این کار را انجام بدم یا خیر؟ یعنی بدون Bootstrap نمیشه؟
سلام عذر میخوام دانلوداموزش انجام دادم ولی باز نمیشه میشه لطفا راهنمایی کنید
سلام و عرض ادب
شما تمامیه پارت های مربوط به دوره رو از پنلتون دانلود کنید و همه را باهم انتخاب و سپس اکسترکت فایل رو بزنید ، فایل نهایی کامل در اختیار شما قرار خواهد گرفت
موفق باشید
برای دیدن این دوره باید دوره ی بوت استریم رو دیده باشیم ؟
با سلام. خیر نیاز به پیشنیاز بوت استرپ ندارید.
وقت بخیر
عذر میخوام چجوری میتونم سورس پروژه رو داشته باشم؟
سلام بر شما
سورس همراه دوره هست ، به لینک ها دانلود مراجعه کنید ، اما باز هم به ایمیل شما ارسال شد .
موفق باشید
سلام
من آموزش را قبلا تهیه کردم ولی الان که میخوام دانلود کنم مینویسه متاسفانه زمان دانلود شما به اتمام رسیده است!!!
لطفا رسیدگی بفرمایید
تشکر
سلام بر شما
لینک های دانلود شما تمدید شد ، میتونید از طریق پنلتون دانلودکنید.
موفق باشید
من این دوره رو نگاه کردم به نظرم خیلی خوب بود و با نظری که “اسدی اسدی ” که گذاشتن مخالفم مباحثی که نیاز بود کاملا خوب توضیح داده شده بود . متشکر
درود بر شما
بسیار خوشحالیم که مفید واقع شده براتون
موفق باشید