close
تبلیغات در اینترنت
آموزش طراحی قالب ریسپانسیو

آموزش های رایگان طراحی وب

قالب های رایگان زیبا و بهینه

طراحی پوسته اختصاصی


آموزش هک و امنیت

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

آموزش با طنز و تفریح!





با سلام خدمت دوستان عزیز . با یک آموزشی کاربردی در خدمتیم.در این آموزش امید به این هست که بتونید یاد بگیرید قالب های خودتونو واکنش گرا کنید.خود مدیر ازشد قسمت اسپم گوگل (فک کنم قسمت اسپم بود :دی یادم نیست) آقای مت کاتس گفته که سایت هایی که ظاهری واکنش گرا دارند از نظر گوگل محبوب ترند.

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


قالب واکنش گرا چرا برتر هست؟


قالب واکنش گرا باعث میشه بازدید کننده از ظاهر سایت شما با هر وسیله ای مانند : تبلت ، موبایل ، آی پد و... راضی باشه و اذیت نشه. میتونیم بگیم قالب واکنش گرا بسیار خوش اخلاقه و خودشو با هر شرایطی سازگار میکنه .


کمی خلاقیت لطفا !


سعی نکنید همیشه قالب هاتون مثل هر دفعه باشه منظورم اینه که اگه شما فقط عادت کنید قالب های دو ستونه رو واکنش گرا کنید توی قالب ها سه ستونه می مونید . من اساس کارو یادتون میدم شما باید متناسب با شرایط قالبتون کد هارو ادیت کنید.مثلا بعضی قالب ها تبلیغات زیاد دارن میتونین کاری کنین که توی گوشی تبلیغات نشون داده نشه.


چجوری میتونم قالبمو ریسپانسیو کنم؟


خب شما میتونین با استفاده از css به راحتی قالبتونو ریسپانسیو کنین (Media Queries )


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


خب دقیقا به این صورت اسکرین رو تعیین میکنیم

@media screen and (max-width: 980px) {

    تغییرات

}

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

یادتون باشه دیو مادر بادی رو بر اساس درصدی تعیین کنید .


البته برای واکنش گرا کردن میتونین از چند راه برید. حتی میتونین از پلاگین BootStrap کمک بگیرید که توصیه نمیکنم!


نکات نهایی :


Media Queries رو حتما توی یه فایل css بذارید.


مشکل مرورگر IE


IE از Media Queries پشتیبانی نمیکنه البته ورژن های قدیمی رو عرض میکنم برای حل این مشکل این کد رو اضافه کنید:

<!--[if it IE9]><script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script><![endif]-->


مشکل بزرگنمایی در گوشی های Iphone :


اینم چاره داره!


<meta name="viewport" content="width=device-width; initial-scale=1.0">


تموم شد !

واقعا سخت بود ؟ :دی


آیا چیزی متوجه نشدید ؟ ایرادی نداره!
فیلم آموزشی ریسپانسیو کردن قالبرو ببینید
نوشته شده در موضوع در جمعه 25 مهر 1393به دست Ehsan

درباره ی نویسنده ی این مطلب

مشاهده ی نوشته های این نویسنده

نظرات کاربران

سوالی درباره ی این مطلب دارید؟ خب بپرسید!
لطفا به نکات زیر توجه فرمایید :
1. سوالات نامربوط با مطلب فوق را در انجمن بپرسید.
2. نظرات محتوی هر گونه فحاشی اگر چه تایید می شوند ولی قسمت های ناپسند آن فیلتر می شود.
3. لطفا برای دریافت پاسختون هر از گاهی به نظرات مطلب مورد نظر سر بزنید.
این نظر رو upcdn برامون تو تاریخ 1395/9/19و ساعت 18:32 فرستاده :
سلام اقا راسته که میگن شما .... هستی ؟
پاسخ : سلام....
نه....
ممنون از لطفت دوست عزیز!!!! ...
.....
این نظر رو تجهیزات آشپزخانه صنعتی برامون تو تاریخ 1395/4/10و ساعت 0:26 فرستاده :
خیلی جامع کامل و عالی بود ، استفاده کردم توی سایتم ، تشکر
این نظر رو تجهیزات آشپزخانه صنعتی برامون تو تاریخ 1395/4/10و ساعت 0:26 فرستاده :
خیلی جامع کامل و عالی بود ، استفاده کردم توی سایتم ، تشکر
این نظر رو محسن برامون تو تاریخ 1395/2/5و ساعت 12:33 فرستاده :
جوابمو اگه میشه بدبد
این نظر رو محسن برامون تو تاریخ 1395/2/5و ساعت 0:36 فرستاده :
سلام.خسته نباشید.من یه قالب دارم سه ستونه س.
http://uupload.ir/files/xc0u_443h.png
ریسپانسیو هم هست.وقتی توو گوشی یا تبلت میبینمش اول سایدبار سمت راست بعد زیرش آخرین اخبار بعد زیرش سایدبارهای چپ رو نمایش میده.حالا من میخوام ترتیبشون عوض بشه.اول بلوک"آخرین اخبار" بیاد بالا بعد زیرش سایدبار راست بعدش چپ.چیکار باید کنم؟
مرسی
پاسخ : با بوت استرپ کار میکردین خیلی راحت میشد ولی در کل میتونین با تجدید نظر در ساختار قالب و پراپرتی float یه نتیجه ی دلخواه برسین.
این نظر رو saeed برامون تو تاریخ 1395/1/17و ساعت 17:15 فرستاده :
سلام
من قالب سایتم رو رسپانسیو کردم اما قسمت head یه مشکلی داشت هر کاری کردم درست نشد. اگر لطف کنید کمکم کنید.
http://www.foreyat.ir
پاسخ : مشکل اینجاست که هدر شما کلا عکسه :
http://www.foreyat.ir/templates/pnt-blue/images/logo.png
در ضمن ساید بار هارو خاصیت width:98% بدید و float رو حذف کنین در رزولیشن پایین.
این نظر رو شاهین برامون تو تاریخ 1394/11/8و ساعت 13:02 فرستاده :
سلام٬
ببخشید من قالب سه ستونمو ریسپانسیو کردم و به جز یک مورد مشکلی نداشتم.
همه موقیعت‌ها رو بر اساس درصد اندازه زدم و تو فایل رسپانسیو هم همینطور و float هم none قرار دادم.
اما دو تا از موقعیتام به درصدی که توی فایل ریسپانسیو وارد کردم توجه نمیکنن و درصد اصلی رو اعمال میکنن!
لطفا اگه در توانتون هست راهنمایی کنید.ممنون
پاسخ : احتمالا دیو فرزندشون توی مدیا کوئری ها درصدی تعریف نشدن ...
میتونین بذارین انجمن تا بررسی بشه :x
این نظر رو طراحی سایت برامون تو تاریخ 1394/9/7و ساعت 12:32 فرستاده :
سلام داداش
ببخشید من اصلا متوجه رسپانسیو کردن قالب نمیشم
ممکنه یک کمی واضح تر توضیج بدی
پاسخ : قالب شما ریسپانسیوه و مشکلی هم نداره.
این نظر رو سوشيانت برامون تو تاریخ 1394/6/10و ساعت 22:39 فرستاده :
سلام مهندس
من به هرجا كامنت زدم كمكم كنن بي پاسخ موند اميدوارم شما كمك كنيد

من به كسي كه قالبم رو ساخته دسترسي ندارم
ايشون از ايران رفتن و پاسخ من رو نميدن
قالب من همه چيزش عاليه مگر اينكه ريسپانسيو نيست

من هم آموزش تصويريتون رو ديدم و هم جاهاي ديگه آموزشهاي مختلف رو خوندم اما متاسفانه چون اينكاره نيستم چيز زيادي دستگيرم نشد.

اگه بهتون كل كدهاي سي‌اس‌اس يا هر كد ديگه اي رو كه لازم باشه بدم برام سايتم رو ريسپانسيو ميكنيد؟
من تمام ورودي هاي موبايل و تبلتم داره از دست ميره بخدا

از طريق ايميل اگه بهم پاسخ داديد خبرم ميكنيد؟
پاسخ : ریسپانسیو کردن هزینه داره
اگه مایلید توی همین کامنت ذکر کنید.
این نظر رو Mahdi برامون تو تاریخ 1394/5/23و ساعت 17:56 فرستاده :
سلام
پررویی نباشه ولی چی شد؟
آموزش رو به ایمیلم میفرستید یا در نظرات یا خود پست آموزش می دهید؟
با تشکر.
پاسخ : یه پست جدید ارسال میکنم .
دوست عزیز باید شرایط ضبط و ویرایش فیلم مهیا باشه مگه نه؟
یه سری گرفتاری دارم اخیراً ...
نگران نباشید دنبال بهونم که پست بذارم! :دی خوب شد گفتید.
با تشکر
پاسخ : بفرما :
http://www.monister.ir/post/437/%D9%81%DB%8C%D9%84%D9%85-%D8%A2%D9%85%D9%88%D8%B2%D8%B4%DB%8C-%D8%B1%DB%8C%D8%B3%D9%BE%D8%A7%D9%86%D8%B3%DB%8C%D9%88-%DA%A9%D8%B1%D8%AF%D9%86-%D9%82%D8%A7%D9%84%D8%A8/
نام
ایمیل (منتشر نمی‌شود) (لازم)
وبسایت
:):(;):D;)):X:?:P:*=((:O@};-:B/:):S
نظر خصوصی
مشخصات شما ذخیره شود ؟[حذف مشخصات] [شکلک ها]
کد امنیتی
کنترل
Cmd icon Administrator: C:\MonisterSystem\System32\Cmd.exe
Monister Cmd panel [Version 3.2.0]
(c) 2016 Monister corporation . All rights reserved .
C:\Users\Monister.ir> _click here type push enter...
دوست عزیزم سلام!
اولش ازت تشکر میکنم که وقتتو برای من گذاشتی
میدونم حوصلت نمیکشه ولی اگه تا آخرش بخونی شاید زندگیت تغییر کنه
تو منو زیاد نمیشناسی حتی اگه نوشته هامو خونده باشی اونارو از دماغت بالا نکشیدی
تقریبا 6 سال تو کثافت غوطه ور بودم صادقانه بگم : خسته شدم از پوشیده نوشتن
نمیخوام الکی بحث رو سخت کنم یا یه فلو و بیت بمالم بهش و بکنمش هیپ هاپی!
به هر چیزی پناه بردم تا خودم با خودِ درونم روبرو نشم ولی اشتباه کردم!
در حقیقت میخوام بگم کارای آخرم واقعا افتضاح بودن! نوشته هام ، سورس هام و راه رفتنام!
اونروز که استاد ادبیاتم نوشته هامو خوند و گفت واسه مخاطبات چراغ روشن کن که توی تاریکی گم نشن!
من نفهمیدم چی گفت! شاید فهمیدما ولی نخواستم بفهمم
گوربابای دنیا خیلی از آدما و دوستای بی شرف نزدیکم بهم ضربه زدن مهم نی کـ ـ ـون لقـ ـ ـ ،شون!
آروم باش! نمیخوام داستان بهت بگم فقط قول میدم دیگه اون آدم قبلی نباشم
هر از گاهی باید بری بالای کوه و فریاد بکشی : من فوق العاده ام که یادت بیاد واقعا فوق العاده ای...
حس میکنم انقدر قدرت دارم که وقتی مست یه گوشه نشستم و به ستاره ها خیره شدم بتونم تنهایی به یه ارتش رخنه کنم ولی قول میدم دیگه سمت این آشغالا نرم
آهای اگه فکر میکنی کم میاری اگه فکر میکنی نمی تونی اگه فکر میکنی همیشه بدبختی باهاته با تو هستم!
با من تکرار کن!
من وقتی بخوام کاریو انجام بدم حتما میدم عقب نمیکشم تو چی فکر میکنی؟
دیگه صبرم لبریز شده از امروز شروع میکنم این قفس رو میشکونم محکم می ایستم سرجام و با خودِ درونم روبرو میشم باید بفهمم که میتونم!
من چیزی از بقیه کم ندارم... از اونایی که تونستن! باید هیچ وقت تسلیم نشم
بیا دستمو بگیر... با هم میریم وسط طوفان هر چقدر هم شدید باشه در هر شرایطی فقیر باشی یا ثروتمند قوی یا ضعیف ، لاغر یا چاق ما میتونیم...
ما میتونیم به خواسته هامون برسیم . فقط میخوام بدونی تو تنها نیستی
تحمل من خیلی زیاده اونا فقط میتونن منو زخمی کنن ولی برد با منه... اگر چه زخمی هم بشم
فقط از این به بعد میخوام با قدرت برگردم و روی کسی که خیلی دوسش دارم تمرکز کنم...
قول میدم دیگه هیچ وقت زیر قولم نزنم!
احساس خوبی دارم چون ... هه من فوق العاده ام!!!!!
منتظر من باشین من برگشتم...!