موضوع :
آموزشگاه اسکینک ,
آموزش طراحی وب ,
آموزش کار با قالب ,
زمان: 1393/08/27
آموزش Responsive کردن قالب با یک فایل css
سلام
در این مطالب آموزش پر مخاطب ریسپانسیو کردن قالب را آماده کرده ایم. اول توضیح بدم که حتما بعضی کاربران شنیدن که کسی میگه این قالب ریسپانسیو هست اما متوجه نمیشید منظورشون چی هست.
ریسپانسیو کردن قالب یعنی اینکه قالب رو جوری استایل دهی کنی که کاربر وقتی با کامپیوتر میاد داخل سایت قالب رو با مروگر کامپیوتر درست ببینه و اگر با تبلت اومد به همین صورت قالب با تبلت ست بشه و در نهایت با موبایل هم ست بشه. یعنی کاربر با هر موسیله ای وارد سایت شد قالب با اون وسیله ست بشه و درست نمایش داده بشه.
توجه: برای ریسپانسیو کردن اشنایی کامل به css ضروری است.
برای ریسپانسیو کردن یا واکنشگرا کردن قالب به صورت زیر عمل کنید...
1-کد زیر را در قالب قرار دهید:
دانلود کد شماره 1
2-با هر نرم افزاری دوست دارید کد نویسی کنید یک فایل css ایجاد کنید من معمولا با همون notepad این کار رو میکنم. شما با هر نرم افزاری راحت هستید انجام بدید.
برای شروع کد زیر را در اون فایل css بریزید:
دانلود کد شماره 2
در این کد ما نوشتیم که اگر یک کاربر با رزولوشن 980 وارد سایت شد sidebar ها صد در صد باز شوند و ads ها نمایش داده نشوند.
برای تنظیم در اندازه های مختلف مثل کد زیر استایل اضافه میکنید:
دانلود کد شماره 3
حالا باید برای هر اندازه استایل ها را تنظیم کنید هر استایلی میخوای نمایش داده بشه مثل همون که 100% گذاشتم بذارید و هر کدوم میخواهید نمایش داده نشه مثل ads بهش استایل بدید.
برای نمونه یک استایل نوشتم که میتونید بازش کنید و ببینید چطوری باید استایل بدید.
دانلود فایل شماره 4
اخر کار که استایل دهیتون تمام شد فایل رو با فرمت .css ذخیره کنید و در کد زیر قرار دهید :
دانلود کد شماره 5
و در آخر کد را در هد قالب قرار دهید.
18073
| امتیاز : |
|
نتیجه : 3 امتیاز توسط 4 نفر مجموع امتیاز :15
15
| |
برچسب ها :
Responsive کردن با CSS ,
آموزش ریسپانسیو کردن قالب با CSS ,
آموزش واکنش گرا کردن ,
آموزش واکنش گرا کردن قالب، ,
ریسپانسیو ,
ریسپانسیو کردن با CSS ,
ساخت قالب Responsive ,
ساخت قالب ریسپانسیو ,
طراحی Responsive ,
طراحی ریسپانسیو ,
طراحی واکنش گرا ,
مرجع ابزار وبلاگ ,
مرجع ابزار وبلاگ نویسان ,
مرجع ابزار وبمستران ,
مرجع وردپرس ,
مرجع پوسته وردپرس ,
واکنش گرا ,
قالب ,
قالب واکنش گرا ,
چگونگی ریسپانسیو کردن ,
نظرات : 49 تا
بازدید : بار
