آموزش قدم به قدم طراحی ریسپانسیو یک سایت کامل
سه شنبه, ۱۹ فروردين ۱۳۹۳، ۰۳:۴۶ ب.ظ
در این آموزش به شما نشان خواهیم داد که چگونه باید یک سایت ریسپانسیو درست کرد. سایتی که در همه رزولیشن ها به خوبی نمایش داده شود.
صفحه رو با doctype HTML5 و متا تگ ها آغاز کردیم. اما در طراحی ریسپانسیو ما نیاز به نصب کامپوننت های اضافی خواهیم داشت. بیشتر این متا تگ ها توسط مرورگرهای مدرن پشتیبانی میشوند.
<!DOCTYPE HTML><html>
<head>
<title>آموزش طراحی ریسپانسیو یک سایت کامل</title>
<meta name="author" content="آپارنت">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<link rel="stylesheet" type="text/css" href="style/styles.css">
<link rel="stylesheet" type="text/css" href="style/responsive.css">
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/js-main.js"></script>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
متا تگ viewport تگ خیلی مهمی برای کار کردن با طراحی ریسپانسیو است. ما
اندازه را برابر یک کردیم. بنابراین پیکسل ها در صفحه نمایش به خوبی
نمایش داده میشوند.
همچنین ما از برای نسخه های IE پایین تر از 9 فایل هایی را فرخوانی کردیم
که موجب شناخت مرورگر از عناصر HTML5 و همچین media queries میشود.
برای خواندن مطالب بیشتر در مورد متا تگ viewport به Mozilla Developer مراجعه کنید.
برای خواندن مطالب بیشتر در مورد متا تگ X-UA-Compatible به Stackoverflow و MSDN Microsoft مراجعه کنید.
برای خواندن مطالب بیشتر در مورد پشتیبانی نشدن عناصر HTML5 در IE به آپارنت مراجعه کنید.
بلاک های محتوای اصلی
کل سند اصلی تشکیل شده از یک دایو با تعداد زیادی تگ section در داخل خودش. تگ header شامل عکس من, آدرس ایمیل, و دیگر اطلاعات مهم است. بعد از قراردادن تگ header بقیه سند را نیز مانند زیر وارد میکنیم.
خب حالا در فایل استایل کدهای زیر را قرار میدهیم.
کل سند اصلی تشکیل شده از یک دایو با تعداد زیادی تگ section در داخل خودش. تگ header شامل عکس من, آدرس ایمیل, و دیگر اطلاعات مهم است. بعد از قراردادن تگ header بقیه سند را نیز مانند زیر وارد میکنیم.
<div id="w">
<header class="clearfix">
<div id="info">
<div id="photo">
<img src="http://aparnet.ir/wp-content/themes/aptana/about/style/photo.png" alt="محسن شفیعی"/>
</div>
<h1><span>محسن شفیعی</span></h1>
<h3><span>توسعه و طراحی وب</span></h3>
<h3><span><a href="http://aparnet.ir">آپارنت</a></span></h3>
<small>
<span>مشهد</span>
<span>ایران</span>
</small>
<small><span>mohsen.sh12@hotmail.com </span></small>
</div>
</header><br />
<section id="myhistory">
<h2>درباره من</h2>
<p>
من
محسن شفیعی هستم متولد 73 که علاقه زیاد به دنیای وب منو واداشت که به این
عرصه پا بذارم. پس از چند ماه کارکردن در دنیای وب جای خالی یک وب سایت
قدرتمند رو در ایران حس کردم. به همین دلیل سایت
آپارنت رو راه اندازی کردم تا محلی برای معرفی فناوری های روز جهان وب باشه.
</p>
</section><br />
<section id="skills">
<h2>مهارت ها</h2>
<section id="skills-right">
<ul>
<li>HTML5/CSS3</li>
<li>Jquery</li>
<li>Wordpress</li>
<li>PHP</li>
<li>MySQL Database</li>
</ul>
</section>
</section><br />
<section id="articles">
<h2>آخرین مطالب</h2>
<a href="http://aparnet.ir/114-%d8%ad%d9%84-%d9%85%d8%b4%da%a9%d9%84-%d9%be%d8%b4%d8%aa%db%8c%d8%a8%d8%a7%d9%86%db%8c-%d9%86%d8%b4%d8%af%d9%86-%d8%b9%d9%86%d8%a7%d8%b5%d8%b1-html5-%d8%af%d8%b1-ie">حل مشکل پشتیبانی نشدن عناصر HTML5 در IE</a><br />
<a href="http://aparnet.ir/111-%d9%be%db%8c%d8%af%d8%a7%da%a9%d8%b1%d8%af%d9%86-%d9%82%d8%a7%d8%a8%d9%84%db%8c%d8%aa-%d9%87%d8%a7%db%8c-%d9%85%d8%b1%d9%88%d8%b1%da%af%d8%b1%d9%87%d8%a7">پیداکردن قابلیت های مرورگرها</a>
</section>
</div>
*{ margin: 0; padding: 0; direction: rtl; font-family: "Tahoma";}
html { height: 101%; }
body { background: #f2f2f2 url('http://aparnet.ir/wp-content/themes/aptana/style/images/bg.png'); padding-bottom: 65px; }
h1 { color: #454545; font-size: 2.0em; margin-bottom: 6px; }
h2 { color: #484848; font-size: 1.5em; margin-bottom: 10px; text-decoration: underline; }
h3 { color: #777; font-size: 1.0em; font-weight: normal; margin-bottom: 10px; }
h4 { color: #656565; font-size: 0.8em;font-weight: bold;margin-bottom: 4px; }
p {color: #565656; font-size: 1.0em; line-height: 1.4em; margin-bottom: 15px; padding-left: 35px; }
small { font-family: "Balthazar", serif; color: #656565; font-size: 0.7em; display: block; margin-bottom: 6px; }
ul { display: block; list-style: none; }
ul li { padding-right: 45px; vertical-align: top;margin-bottom: 5px; color: #666; font-size: 1em; line-height: 2.3em; }
img { border: 0; max-width: 100%; }
a { color: #5582d6; text-decoration: none; }
a:hover { text-decoration: underline; }
/** @group core layout **/ #w { margin: 0px auto; padding: 20px 40px; padding-top: 35px; background: #fff; min-width: 260px; max-width: 1200px; border-radius: 0px 0px 8px 8px; }
header { width: 100%; }
/** @group personal settings **/ #info { float: none; margin-bottom: 12px; }
#photo { float: left; }
#photo img { -webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
background-color: #fff;
border: 1px solid #ccc;
padding: 5px;
}
خب تا اینجا طراحی سایت ما مانند یک سایت معمولی بود.
خب به فایل responsive.css میرویم و کدهای زیر را قرار میدهیم.
در کد بالا ما کدهایی که مربوط به نمایشگرهایی که بیشترین عرضشان 740px است
را قرار دادیم. همه چیز واضح است. کدهای دیگر را نیز مانند زیر قرار
میدهیم.
خب به فایل responsive.css میرویم و کدهای زیر را قرار میدهیم.
@media only screen and (max-width: 740px) {
h1 { font-size: 4.5em; }
h3 { font-size: 2.2em; }
h2 { display: block; text-align: center; }
#info { float: none; display: block; text-align: center; }
#photo {
float: none;
display: block;
text-align: center;
}
#w { padding: 20px 15px; }
p { padding: 0; }
}@media only screen and (max-width: 570px) {
ul li {
display: inline-block;
padding-left: 15px;
width: 140px;
background-position: -5px 0px;
margin-right: 6px;
line-height: 1.7em;
}
#skills-left, skills-rightright { margin-bottom: 15px; }
} @media only screen and (max-width: 480px) {
ul li { width: 120px; }
#w { margin: 0 20px; }
} @media only screen and (max-width: 320px) {
#w { margin: 0 10px; }
} /** iPhone only **/ @media screen and (max-device-width: 480px) {
ul li { width: 150px; }
}
مفید و مختصر
ممنون