close
خرید vpn
آموزش اصول طراحی قالب Responsive

آموزش اصول طراحی قالب Responsive

رزرو تبلیغــات

تعرفه تبلیغات
http://up.pcast.ir/view/1905304/147565193282231.giff

شمـا میتوانیــد برای دیافت آخرین مطالب و آگاهی از آخریـن اخبــار موزیـک در ایمیـــل خـود در خبــرنامـه ثـبت نـام کنــید

آموزش اصول طراحی قالب Responsive

این آموزش به درخواست چند تا از دوستان قرار می دهم که خیلی دوست داشتن که 
بدونن Responsive کردن سایت به چه صورتی هستش . لازم هستش که بگم این 
آموزش بسیار کوتاه هستش و تقریبا در 5 مرحله ساخته شده و بیس کار به صورت 
زیر هستش ، شما بسته به نیاز خودتون می توانید تغییرات را انجام بدهید : 

این آموزش به درخواست چند تا از دوستان قرار می دهم که خیلی دوست داشتن که 
بدونن Responsive کردن سایت به چه صورتی هستش . لازم هستش که بگم این 
آموزش بسیار کوتاه هستش و تقریبا در 5 مرحله ساخته شده و بیس کار به صورت 
زیر هستش ، شما بسته به نیاز خودتون می توانید تغییرات را انجام بدهید : 



1- قرار دادن کد متاتگ در بخش Head سایت :: 

کد:
<head> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
</head>


این متاتگ باعث میشه که به مرورگرهای تلفن همراه بفهمونیم که این سایت برای نمایش در صفحات شما هم ساخته شده. 

یک مشکلی وجود داره و اون اینکه در نسخه اینترنت اکسپلورر سرطان 8 به پایین 
media queries را که اصلی ترین بخش قالب ریسپانسیو هستش نمی شناسه . برای 
همین باید این کد جاوا اسکریپت فراخوانی کنیم : 

کد:
<!--[if lt IE 9]> 
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> 
<![endif]--> 

 

-----------------------------------------------------------------

2- بخش مربوط به فرم دهی قالب سایتمون شدش .... فرم شکل زیر را ببینی :: 



http://joomlaforum.ir/attachment.php?attachmentid=5853&d=1393842104 



ما یک کلاس اصلی داریم به نام container که به عرض 960 پیکسل ، که داخل این 
کلاس ، کلاس های مربوط به header , Content , Footer , Sidebar قرار می 
گیرند ... 



عرض یا همون width به صورت زیر است : 

container : 960px 

header : 960px 

Content :650 px 

sidebar : 245px 

footer : 960px 



چون اصول ریپسانسور کردن بدین صورت هستش که باید با درصد کار کنیم 
پس باید بدانیم چطور باید بفهمیم عرض قسمت هایی header , Content , Footer , 
Sidebar به درصد چقدر است ؟ الکی نمی تونیم بیایم مثلا به Content بگم تو 
بشو 70% یا سایدبار تو هم بشو 30% ، مخصوصا اگر این قالب داریم از روی یک 
فایل گرافیکی طراحی می کنیم !!!! 

-----------------------------------------------------------------

3- 
برای اینکه بدانیم اندازه دقیق مثلا Content ما به درصد چقدر هستش یک 
فرمولی هستش که از یک فیلم آموزش در یوتیوب به دست آوردم که بسیار جالب بود 
برام ...:: 

نحوه محاسبه فرمول : 



container : 960Px و به درصد یعنی اینکه 100% کل محوطه قالب سایتمون ... تا اینجا درست ؟؟؟؟ 

کد:
<style> 
.container {width:960px;} 
</style>


کلاس Header ما هم چون دقیقا هم اندازه عرض container ما می باشد یعنی همون 100% به صورت زیر یاداشت میکنیم :: 

کد:
<style> 
.container {width:960px;} 
.header {width:100%} 
</style>


حالا می رسیم به کلاس Content . یه کم به این قسمت بیشتر توجه کنید، 
همانطور که گفتیم عرض container برابر است با 960 پیکسل ، و عرض Content 
ما نیز برابر با 650 پیکسل برای به دست آوردن درصد Content از فرمول زیر 
استفاده میکنم :: 



کلاس مورد استفاده / کلاس اصلی * 100 



Content/container = ??? * 100 = add morde nazar 



650/960=0.6770833333333333 * 100 = 67.70833333333333% 

دقیقا این می شود اندازه به درصدی که میخواهیم .



برای قسمت های دیگر هم به صورت بالا حساب کنید تا خودتون یاد بگیرید ... 
حتی به Margin-Left و یا margin-right هم همینطوری باید محاسبه کنید و عدد 
به درصد قرار بدهید ... 

-----------------------------------------------------------------

4 - می رسیم به بخش CSS3 media query . 

در این قسمت باید تعیین کنیم وقتی که صفحه نمایش ما به این مقدار رزلوشنی 
رسید به چه صورت سایت نمایش بدهد ... برای اینکه سایتتون ببین در سایز های 
استاندارد و غیر استاندارد به چه صورت هستش دو تا کار بهتون پیشنهاد میدم : 



الف ) استفاده از سایت های آنلاین که سایت شما را در دیوایس های مختلف با رزولوشن های مختلف نمایش می دهد مثل :: 

Responsive Design Testing 

Mobile Responsive Design Testing 

Testing responsive web design in various resolutions | ResponsiveTest 

و..... 



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

من راه دوم بهتون پیشنهاد میدم ... چون راه اول حتما سایتتون باید آنلاید باشه ... 

برای راه دوم در مرورگر Firefox از منوی Tools گزینه Web Developer و سپس گزینه Responsive Design View انتخاب کنید ... 

در قسمت بالا سمت چپ چند یک DropDown وجود دارد که داخلش یک سری عدد نوشته 
شده ... این اعداد اندازه های استاندارد Device ها هستند . خودتون هم می 
توانید با Drog and Drop صفحه بزرگ یا کوچیک کنید ... به هر حال این قسمت 
کار خاصی نداره کار کنید یاد میگیرید ... 



بعد از اینکه رزلوشنی که وقتی قالب به اون رزلوشن میرسه ظاهرش خراب می شود 
پیدا کردید در انتهای کدهای CSS خود دستورات زیر را وارد می کنید :: 

کد:
@media screen and (max-width: 960px) { 
.class { 
background: #ccc; 

}


ین یعنی اینکه حداکثر عرض رزولوشن نمایشی 960 پیکسل بود بیاد به کلاس بکگراند بده ... 



یا اینکه به صورت زیر هم می توانیم بنویسم :: 

کد:
@media screen and (min-width: 600px) and (max-width: 900px) { 
.class { 
background: #333; 

}



این یعنی اینکه حداقل سایز نمایش 600 پیکسل و حداکثر 900 پیکسل بود اینکارها را انجام بده .... 





http://joomlaforum.ir/attachment.php?attachmentid=5854&d=1393844618 



اگر می خواهید media queries بیشتر بدونید کافی تو گوگل این عنوان جستجو کنید 



responsive search mobial - Google Search 



امیدوارم از این آموزش خوشتون اومده باشه 





موفق باشید .... 


تاریخ انتشار : پنجشنبه 19 شهريور 1394 ساعت: 11:34 | نظرات()
برچسب ها : , , , , , , , ,

نویسنده :

بازديد : 32

موضوع: قالب وبلاگ ,

مطالب مرتبط
بخش نظرات این مطلب
نام
ایمیل (منتشر نمی‌شود) (لازم)
وبسایت
:) :( ;) :D ;)) :X :? :P :* =(( :O @};- :B /:) :S
نظر خصوصی
مشخصات شما ذخیره شود ؟ [حذف مشخصات] [شکلک ها]
کد امنیتی
با کلیک بر روی 1+ ما را در گوگل محبوب کنید