031- 344 500 60

طراحی سایت اصفهان | سئو سایت اصفهان
طراحی سایت در اصفهان, سئو سایت اصفهان, طراحی سایت فروشگاهی شرکت, طراحی سایت اصفهان, طراحی حرفه ای سایت اصفهان, بهینه سازی سایت , بازاریابی اینترنتی اصفهان , تبلیغات اینترنتی , 09133886881

صفحه نخست » بلاگ » bootstrap » آموزش کدهای طراحی سایت ریسپانسیو Responsive

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

تاریخ:۲۲ام دی ۱۳۹۴
پشتیبانی وب یار
150

با مطلب آموزشی آموزش کدهای طراحی سایت ریسپانسیو 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=”https://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=”https://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=”https://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 درست کنید.

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

درباره نویسنده :
پشتیبانی وب یار

مطالب مرتبط

طراحی سایت فروش و تبلیغات مبلمان

طراحی سایت فروش و تبلیغات مبلمان

طراحی سایت فروش و تبلیغات مبلمان حراجی مبل طراحی سایت فروش و تبلیغات مبلمان سایت حراجی مبل ، با طراحی ساده و زیبای خود ، به معرفی انواع و دسته بندی های مبلمان پرداخته و با درج گالری عکس ها ، قیمت و جنس مبلمان ، محصولات خود را برای کاربران به نمایش گذاشته است. […]

طراحی فروشگاه اینترنتی تحریر20

طراحی فروشگاه اینترنتی تحریر20

طراحی فروشگاه اینترنتی تحریر20 طراحی فروشگاه اینترنتی تحریر20 با خدمات فروش و عرضه انواع لوازم تحریر در اصفهان ، اخیرا توسط تیم طراحی سایت وب یار با رعایت تمامی المان های استاندارد سئو در آن طراحی شده است. طراحی گرافیکی کاملا اختصاصی و امکانات پیشرفته ای که در طراحی فروشگاه اینترنتی تحریر20 قرار گرفته است ، باعث […]

طراحی فروشگاه اینترنتی پخش پسته

طراحی فروشگاه اینترنتی پخش پسته

طراحی فروشگاه اینترنتی پخش پسته طراحی فروشگاه اینترنتی پخش پسته ، ارائه دهنده ی محصولات مغزیجات و خشکبار می باشد که ساختار استاندارد آن برای هر نوع طراحی فروشگاه اینترنتی مناسب است. یعنی شما با این قالب اختصاصی از تیم طراحی سایت وب یار قادرید هر نوع سایت فروشگاه اینترنتی را روی آن بالا بیاورید. […]

طراحی سایت آموزشی AZ کنکور

طراحی سایت آموزشی AZ کنکور

طراحی سایت آموزشی AZ کنکور یکی از نمونه کارهای طراحی سایت وب یار، طراحی سایت آموزشی AZ کنکور می باشد که زمینه ی کاری آن مشاوره تحصیلی، برگذاری کلاس های آنلاین، آزمون آنلاین و فروش محصولات آموزشی است. اصول سئو در کدنویسی طراحی سایت AZ کنکور رعایت شده است همچنین در طراحی گرافیک قالب سایت […]

ارسال دیدگاه

*    

*    

ارتباط با تیم پشتیبانی وب یار

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

چه کمکی از تیم وب یار بر می آید ، با ما در میان بگذارید

برای گفتگو کلید ENTER را بفشارید