0

هیچ محصولی در سبد خرید نیست.

طراحی سایت در اصفهان, سئو سایت اصفهان, ساخت سایت اصفهان, طراحی سایت حرفه ای اصفهان, بهینه سازی سایت , بازاریابی و دیجیتال مارکتینگ 09133886881 احمدپور

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

نویسنده پشتیبانی وب یار
امتیاز مطلب
تعداد بازدید 2129
تاریخ بروزرسانی ۲۳ فروردین ۱۳۹۷

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

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

مطالب مرتبط
کسب و کار اینترنتی با وب یار
مطالعه :

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

بهبود ساختار سایت
مطالعه :

بسیاری از وب‌سایت‌ها ساختار گمراه‌کننده‌ای دارند. لینک دادن محتوا‌ها به یکدیگر از هیچ قاعده و قانونی تبعیت نمی‌کند، کاربر را گیج و سردرگم و به مسیر اشتباهی راهنمایی می‌کند. این می‌تواند برای سئوی سایت شما بسیار بد باشد. امروز شما را با استراتژی بهبود ساختار وب‌سایت آشنا می‌کنیم تا بتوانید جایگاه سایت‌تان را در موتورهای جستجو ارتقا دهید. و از طریق آن بتوانیم به افزایش درآمدتان کمک کنیم. با ما همراه باشید. مسیر کاربر(User Flow) مسیر کاربر و ساختار وب‌سایت ارتباط تنگاتنگی دارند. ساختار وب سایت شما مانند نقشه‌ی معماری یک ساختمان است.این ساختار یک طرح کلی از چگونگی پیوند دادن پست‌ها و صفحات سایت‌تان برای شما فرآهم می‌آورد. با استفاده از مفهومی معروف به خوشه‌بندی محتوا می‌توان دید که چگونه ساختار وب‌سایت ‎تان روی سئوی آن موثر است. در ادامه درباره خوشه‌بندی محتوا توضیح خواهیم داد. از طرف دیگر مسیر کاربر مربوط به نحوه و چگونگی جابجایی کاربران در سایت‌تان است و یکی از عوامل مهم و تأثیرگذار روی سئو است. ساختار وب‌سایت سهم بزرگی در این مهم دارد. از دیگر عوامل مؤثر،می‌توان به کیفیت محتواها و لینک‌های‌تان اشاره کرد. بهترین ابزار برای تجزیه و تحلیل سایت قبل از اعمال هر گونه تغییر اساسی در ساختار وب‌سایت‌ تان باید نحوه استفاده کاربران از سایت‌تان را بررسی کنید. دو برنامه‌ی کاربردی و معروف وجود دارد که می‌توانید برای این کار […]

طراحی سایت حرفه ای
مطالعه : 15 دقیقه

طراحی سایت اصفهان |طراحی سایت حرفه ای | سئو تضمینی سایت تیم طراحی سایت و سئو سایت وب یار به آدرس https://www.webyar.net ، بامجوز رسمی از نظام کامپیوتر کشور و دارای نماد اعتماد و نماد ساماندهی و با ۱۶ سال دانش تخصصی در زمینه طراحی وب سایت ,سئوسایت در گوگل و امنیت سرور

خرید رپورتاژ آگهی و بک لینک
مطالعه :

رپورتاژ آگهی و بک لینک شاید تاکنون این سوال در ذهن شما بوجود آمده که چرا اساتید سئو سایت و بهینه سازی سایت همواره خرید رپورتاژ و بک لینک را توصیه می کنند و یا اینکه خرید رپورتاژ آگهی و بک لینک چه تأثیری در کسب و کار شما دارد؟ اگر می‌خواهید به سوال‌های‌تان پاسخ مناسبی بدهید با تیم طراحی سایت اصفهان وب یار همراه باشید. بهتر است بدانید در سال 2017 میلادی خرید رپورتاژ آگهی و بک لینک یکی از موثرترین عوامل شناخته شدن صفحات وب سایت توسط موتور جستجوگر گول شناخته شد. ابتدا توضیح مختصری درمورد خرید رپورتاژ آگهی و بک لینک برای شما همراهان عزیز ارائه می‌دهیم تا با مفهوم آن آشنا شوید. رپورتاژ آگهی و بک لینک چیست؟   رپورتاژ آگهی رپورتاژ برگرفته از کلمه reportage به معنای گزارش می‌باشد. که به صورت یک مقاله شامل 200 تا 500 کلمه و چند عکس با محتوای هدفمند جهت تبلیغ در قالب پست در سایت ها مخصوصا سایت های پربازدید مانند سایت های خبری به کار برده می شود.   ­­­ بک لینک بک لینک یک روش لینک‌دهی مستقیم به صورت بازگشتی است که باعث ارتقا رتبه سایت شما در موتورجستجوگر گوگل می‌شود.     خرید رپورتاژ آگهی خرید رپورتاژ آگهی یک روش برای تبلیغات می باشد و بک لینک دائمی ایجاد می‌کند. با خرید رپورتاژ می‌توانید بطور […]

طراحی سایت چند فروشندگی زودبا
مطالعه :

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

بهینه سازی داخلی سایت on the page seo
مطالعه :

سئو داخلی سایت on the page seo این بار برای بهینه سازی صفحات سایت با آموزش سئو داخلی سایت on the page seo در خدمت شما هستیم. میدانیم  که برای بهینه سازی وب سایت خود باید سئو داخلی on-the-page-seo و سئو خارجی سایت همانند استفاده از بک لینک ها (مطلب آموزشی فاکتورهای بک لینک و خرید بک لینک  را در خصوص آگاهی از سئو خارجی سایت خود حتما بخوانید) همزمان با هم انجام بدهیم. در واقع سئو داخلی و سئو خارجی سایت مکمل یکدیگرند و باید به هر دو به یک اندازه توجه شود. سئو خارجی سایت بیشتر به منابع خارج از سایت شما برمی‌گردد و می‌توان گفت نتیجه‌ی آن به طور کامل در دست شما نیست. اما سئو داخلی سایت که مربوط به محتوا و کدهای HTML است کاملا وابسته به شماست و قابل کنترل است. بنابراین با سئو سایت اصفهان وب یار همراه باشید تا تک به تک اجزای مورد نیاز سئو داخلی سایت را برای شما نام برده و توضیح دهیم. عنوان های زیر را برای بهینه سازی صفحات داخلی وب سایت به شما معرفی می کنیم. عنوان های بهینه سازی صفحات داخلی وب سایت: نام وب سایت، عنوان سایت، description ،keyword فایل های اصلی سایت بخش بندی درست  وب سایت در زمان کد نویسی ID.(نام دایو ها و مفهوم ها) Id کلاس( حجم و سرعت gtmetrix ) […]

دیدگاه ها

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *