آموزش کدهای طراحی سایت ریسپانسیو Responsive

آخرین بروز رسانی: دی ۲۲, ۱۳۹۴

با مطلب آموزشی آموزش کدهای طراحی سایت ریسپانسیو Responsive و یاطراحی واکنش گرا سایت جهت نمایش سایت به درستی در رزولویشن های مختلف از تیم وب یار در خدمت شما هستیم, اگر مطالب آموزشی طراحی سایت ریسپانسیو Responsive واکنش گرا را نخوانده اید ,حتما آن را بخوانید و بعد کدهای زیر را برای طراحی ریسپانسیو یاد بگیرید.برای آشنایی کامل با طراحی ریسپانسیو اول آن مطلب را بخوانید.

آموزش کدهای طراحی سایت ریسپانسیو Responsive

کد نویسی طراحی سایت ریسپانسیو:

آموزش طراحی سایت ریسپانسیو قسمت اول:

اول از همه کدهای صفحه ی html را با هم مینویسیم, ودر یک فایل مثلا با نام index.html ذخیره میکنیم,فقط به این موارد که در کدها نوشته شده است دقت کنید.برای شروع باید کدهای صفحه رو با doctype HTML5 و متا تگ ها آغاز کردیم. اما در طراحی ریسپانسیو ما نیاز به نصب کامپوننت های اضافی خواهیم داشت. بیشتر این متا تگ ها توسط مرورگرهای مدرن پشتیبانی میشوند.

<!DOCTYPE HTML>
<html>
<head>
<title>آموزش طراحی ریسپانسیو یک سایت کامل وب یار</title>
<meta charset=”utf-8″>
<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”>

<!–&#91;if lt IE 9&#93;>
<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>
<!&#91;endif&#93;–>
</head>
<div id=”w”>
<header class=”clearfix”>
<div id=”info”>
<div id=”photo”>
<img src=”img/logo.jpg” alt=”وب یار”/>
</div>
<h1><span>سید رضا احمد پور</span></h1>
<h3><span>طراحی سایت در اصفهان</span></h3>
<h3><span><a href=”http://webyar.net”>وب یار</a></span></h3>
<small>
<span>اصفهان</span>
<span>ایران</span>
</small>
<small><span>support@webyar.net</span></small>
</div>
</header><br />
<section id=”myhistory”>
<h2>درباره ما</h2>
<p>تیم طراحی سایت اصفهان وب یار متشکل از نیروهای متخصص در زمینه برنامه نویسی وب سئوی سایت ، گرافیک ، اندروید و  نرم افزار کاربردی درسال ۱۳۸۶ به صورت حرفه ای  فعالیت خود را آغاز نمود و تا کنون به لطف پشتیبانی قوی و استفاده از سرورهای باکیفیت و امنیت بالا توانسته  خدمات ارزنده ای با قیمت مناسب به مشتریان خود ارائه نماید.
</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://www.webyar.net/%D8%A2%D9%85%D9%88%D8%B2%D8%B4-%D8%A8%DA%A9-%D8%A2%D9%BE-backup%D8%B3%D8%A7%DB%8C%D8%AA-%D8%AF%D8%B1-%D8%B3%DB%8C-%D9%BE%D9%86%D9%84/”>آموزش بک آپ Backupسایت در سی پنل </a><br />
<a href=”http://www.webyar.net/%D8%AD%D9%84-%D9%85%D8%B4%DA%A9%D9%84-%D9%86%D8%A7%D8%B3%D8%A7%D8%B2%DA%AF%D8%A7%D8%B1%DB%8C-%D9%85%D8%B1%D9%88%D8%B1%DA%AF%D8%B1%D9%87%D8%A7-%D8%A8%D8%A7html5/”>حل مشکل ناسازگاری مرورگرها باHTML5</a>
</section>
</div>

متا تگ view port:

تگ خیلی مهمی برای کار کردن با طراحی متا تگ viewport است . ما اندازه را برابر یک کردیم. بنابراین پیکسل ها در صفحه نمایش به خوبی نمایش داده میشوند.
همچنین ما از برای نسخه های IE پایین تر از ۹ فایل هایی را فرخوانی کردیم که موجب شناخت مرورگر از عناصر HTML5 و همچین media queries میشود.

پس اولین نکته ی مهمی که یاد گرفتیم متا تگ view port است.

یک توضیح کلی در مورد کدها به شما میدم,اصل کدهای موجود در بدنه ی body شامل تگ های header,section, که از تگ های مهم html5 است,که نمونه کدهایی ساده از html در آن قرار داده ایم.دو فایل styles.css و Responsive.css  را در همان شروع کار به فایل html خودمان اضافه کرده ایم.

کدهای فایل Styles.css به شرح زیر است,که البته این کدها همان کدهای معمولی است که قبلا هم در فایل های CSS مان مینوشتیم.که برای زیبا سازی کلی به ظاهر سایتمان از آن استفاده کرده ایم.

@charset “utf-8”;
/* CSS Document */
@font-face { font-family: ‘BYekan’; src: url(‘fonts/BYekan.eot’);src: url(‘fonts/BYekan.eot?#iefix’) format(’embedded-opentype’),url(‘fonts/BYekan.woff’) format(‘woff’), url(‘fonts/BYekan.ttf’) format(‘truetype’);font-weight: normal; font-style: normal;}

*{ margin: 0; padding: 0; direction: rtl; border:0px;}
html { height: 101%; }
body { background-color: #f2f2f2; 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; }

#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%; }

#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 میرویم , و کدهای زیر را به آن اضافه میکنیم.این کدها موجب ریسپانسیو شدن سایت ما میشوند.

 

@charset “utf-8”;
/* CSS Document */

@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; }
}

در ابتدا کدهایی را قرار داده ایم که عرضشان بیشتر از ۷۴۰ است, (max-width: 740px),خیلی آسونه به ترتیب بعد از اون هم کدهایی رو قرار داده ام که عرضشان بیشتر از ۵۷۰ است و همین طور به ترتیب کدها به سادگی نشان دهنده ی همه چیز هستند.

حالا دیگه از این آموزش مفید خوشحال باشید چرا که به راحتی تونستید یک صفحه ی ریسپانسیو با کد نویسی های html5 و Css درست کنید.

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

مطالب مرتبط

کلیه حقوق مادی و معنوی این اثر متعلق به طراحی سایت اصفهان وب یار می باشد CopyRight 2016