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

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

یکی از نکات مهم حین طراحی سایت، واکنشگرا بودن آن است. سایت واکنشگرا - Responsive WebSite، به وب سایتی گفته می شود که در تمامی دستگاه ها متناسب با رزولوشن ، بدون نیاز به زوم کردن به درستی نمایش داده شده و قابل پیمایش باشد.

در بلاگ طراحی سایت این هفته قصد داریم به شما روش ایجاد سایتی واکنشگرا را توضیح دهیم با این آموزش می توانید سایت خود را تبدیل به سایتی واکنشگرا کنید.

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

در ابتدا و قبل از شروع آموزش، نمونه فایل زیر را دانلود کنید.

دانلود با لینک مستقیم

 

 

 

 

این فایل تمامی محتوی تصویر زیر را شامل می شود.

صفحه ایندکس را در مرورگر خود بازکنید.

در بالای صفحه ایندکس نمونه ای ستون و سربرگ می بینید در این آموزش قصد داریم تمامی موارد نشان داده شده در تصویر را به همراه موارد اضافه تر شامل حذف و اضافه کردن آموزش دهیم:

هدف این مقاله ایجاد وب سایتی با هدر، فوتر، بدنه می باشد بطوریکه تمامی این موارد مطابق با صفحه نمایشگر کاملا واکنش گرا باشند.

 

 

مرحله اول:درک نحوه عملکرد

حال چگونه تصویر بالا را به زبان html ترجمه وتبدیل کنیم

در مرحله اول نیاز دارید که نحوه عملکرد اجزا و لایه ها را درک کنید .در این کد از 12 ستون برای تعیین عرض هر بخش استفاده شده است.

 

<div class="row">

<div class="twelve columns"></div>

</div>

معنی کد بالا به اینصورت است که در یک ردیف مشخص 12 ستون با عرض 1000 پیکسل را اشغال می کند. در حالیکه در کد زیر:

<div class="row">

<div class="twelve columns">

<div class="six columns"></div>

<div class="six columns"></div>

</div>

</div>

6 ستون دوتایی داخل 12 ستون قرارداده شده است. به این معنی است که 6 ستون 50 درصد از عرض 12 ستون را می گیرد و برای تمام ستون ها به همین صورت می باشد.

<div class="row">

<div class="twelve columns">

<div class="row">

<div class="seven columns">

<div class="row">

<div class="twelve columns"></div>

</div>

</div>

<div class="five columns"></div>

</div>

</div>

در کد بالا برای 7 ستون ردیف دیگری قرار دادیم که 12 ستون را اشغال می کند به این معنی که 12 ستون، بیشترین عرض از 7 ستون را اشغال می کند و آن را به 12 ستون بخش بندی می کند.

حال که سطر و ستون ها معرفی شد اجازه دهید به بخش اصلی آموزش برویم:

مرحله دوم:عملکرد لایه ها

با استفاده از ویرایشگر متنی که مورد علاقه و استفاده تان است فایلی با نام index.html ایجاد و قطعه کد زیر را به ابتدای فایل اضافه کنید.

<!-- Editor's note: if you're wondering what are these items below, you should follow the link below -->

<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->

<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->

<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->

<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->

<!--[if gt IE 8]><!--> <!--<![endif]-->

<!-- Set the viewport width to device width for mobile -->

 

 

<!-- Included CSS Files -->

<!--[if lt IE 9]>

<link rel="stylesheet" href="stylesheets/ie.css">

<![endif]--><script type="text/javascript" src="javascripts/modernizr.foundation.js"></script>

<!-- IE Fix for HTML5 Tags -->

<!--[if lt IE 9]>

<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

<![endif]-->

کد بالا مطابق با سایز اینترنت اکسپلورر و دیگر مرورگرها می باشد.در ادامه کد بالا کد زیر را بنویسید:

<div class="row">

<div class="twelve columns">

<h2>Header Twelve Columns</h2>

</div>

</div>

<div class="row">

<div class="twelve columns">

<div class="row">

<div class="seven columns">

<h3>Body Seven Columns</h3>

</div>

<div class="five columns">

<h3>Sidebar Five Columns</h3>

</div>

</div>

</div>

</div>

<div class="row">

<div class="twelve columns">

<h2>Footer Twelve Columns</h2>

</div>

</div>

اگر به انداز کافی برایتان روشن نیست که چرا این نوار ابزار و دوازده ستون را ایجاد کردیم می توانید کد زیر را از بین ببرید و نتیجه را مشاهده کنید.

در این مقاله مواردی ساده و کاربردی که برای یک سایت واکنشگرا لازم بود گفته شد. اکنون فقط نیاز دارید تصاویر و متن انتخابی خود را به این کدها اضافه کنید .اگر آموزش بالا را با دقت مطالعه کرده باشید اکنون می توانید اولین سایت واکنش گرای خود را بسازید.

لطفا نظرتون را درباره این مقاله آموزشی برای بهبود کیفیت آموزش ها بیان کنید.

 

 

 

 

 

671

بلاگ های مرتبط

ثبت نظر جدید

نظرات کاربران

آیا سوالی دارید ؟

با تلگرام 09108454545 و یا با ایمیل آدرس ایمیل سروش پرداز تماس برقرار کنید.

برای تماس با مشاورین میتوانید با شماره های 02186085365 و 02186084238 و 02186083746 تماس حاصل فرمایید همچنین برای تسهیل در ارتباطات میتوانید با تلگرام شرکت به شماره 09108454545 تماس بگیرید.


logo-samandehi