آموزش ریسپانسیو قالب سایت در کمتر چند دقیقه

این مقاله به خاطر آموزش سریع ریسپانسیو سازی سایت (responsive) ایجاد شده و شما در انتهای این مقاله می فهمین که چیجوری می تونین در کمترین زمان ممکن سایت خود رو ریسپانسیو کنین.

چیجوری یه سایت ریسپانسیو بسازیم 

در عنوان این مقاله ما به این معنی اشاره کردیم که با به کار گیری آموزشای این مطلب شما می تونی در چند دقیقه یه سایت ریسپانسیو ایجاد کنین. پس یکی از ویژگیای جدا این مطلب صرفه جویی در زمونه !

ما روی قول خود می مونیم و به شما یاد می دیم که در زمان کوتاهی (کمتر از نیم ساعت) سایت ریسپانسیو خود رو ایجاد کنین. پس بیایید بدون اتلاف وقت به سراغ مطالی که سئو روز آماده کرده بریم.

طراحی سایت ریسپانسیو معنیش چیه؟

تصویر زیر رو ببینین:

آموزش responsiveهدف ما ایجاد یه صفحه یا یه سایت مشابه چیزی که در تصویر مشاهده می کنیده. در آخر این آموزش ابتدایی CSS ریسپانسیو کردن سایت شما خواهید آموخت که چیجوری صفحه ای مشابه صفحه نشون داده شده در عکس ایجاد کنین. شاید به نظر شما ایجاد یه صفحه مشابه صفحه بالا کار ساده ای باشه اما موضوع مهم اون هستش که صفحه ای که شما در این تصویر می بینین ریسپانسیوه و اگه شما اونو روی موبایل خود بارگذاری کنین تصویر زیر رو می بینین:

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

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

واسه به کار گیری قابلیتای این فریم ورک شما باید اول اونو دانلود کنین.

پس از دانلود کردن فایل دانلود شده رو آنزیپ (Unzip) کنین و محتویات اونو تو یه فولدر مشخص بذارین. شما باید در فولدر لیستی مشابه چیزی که در تصویر زیر مشاهده می کنین، پیدا کنین.

هدف کلی ما اینه که یه سایت بسازیم که در اون المانای اصلی مثل Header ، Body، Sidebar و Footer وجود داشته باشن.

قدم اول: یادگیری مفاهیم ابتدایی درباره فریم ورک Foundation

ما می خوایم چیزی مثل ساختار بالا رو در سایت خود بسازیم. اما قبل از هر کاری ما باید بتونیم اینجور ساختاری رو با زبون HTML بسازیم. این کار بسیار ساده س!. اما نیاز به اون داره که شما با ایجاد این Layout یا چیدمان صفحه در Foundation آشنایی داشته باشین. در این فریم ورک صفحه به ۱۲ ستون جور واجور تقسیم بندی شده که این ۱۲ ستون در کنار هم پهنای کلی صفحه رو تشکیل میدن. شما می تونین در کدهای خود مشخص کنین که می خواین سطری داشته باشین که دارای پهنایی برابر با تموم ۱۲ ستون باشه و یا پهنای کمتری داشته باشه. مثلا پهنای اون برابر با ۶ ستون یا بیشتر باشه. اگه شما کدی به شکل زیر بنویسین یه سطر با پهنای ۱۲ ستون ایجاد میکنین:

<div class=”row”>

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

</div>

خط اول کد واسه شما یه سط درون صفحه بوجود میاره و خط دوم کد تعیین می کنه که پهنای اشغال شده توسط این سطر به اندازه ۱۲ ستون یا تموم پهنای صفحه باشه. حال کد زیر رو ببینین:

 <div class=”row”>

<div class=”twelve columns”>

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

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

 </div> </div>

این کد دو سطر با پهنای مساوی و هریک به اندازه ۶ ستون درون صفحه بوجود میاره، در واقع خط اول این کد واسه شما یه سطر بوجود میاره و خط دوم تموم پهنای صفحه که برابر با ۱۲ ستونه به این سطر اختصاص میده بعد پهنای این سطر در خطای سوم و چهارم به دو سطر کوچکتر اختصاص داده می شه. اگه بخواین درون صفحه دو سطر با پهنای نامساوی ایجاد کنین باید کدی مشابه کد زیر بسازین:

<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>

در این کد شما می بینین که اول یه سطر ۱۲ ستونی ایجاد شده و بعد یه سطر هفت ستونی جدا از هم ایجاد شده. خط چهارم و پنجم این کد درون سطر ۷ ستونی ایجاد شده یه سطر ۱۲ ستونی بوجود میاره. ینی پهنای اشغال شده توسط سطر هفت ستونی رو به ۱۲ قسمت تقسیم می کنه به این کار لونه بندی سطرها می گن. خطوط انتهایی کد یه سطر ۵ ستونی ایجاد می کنن.

حالا که با معنی سطرا و ستونا و سطرهای لونه بندی شده آشنا شدید می تونیم به سراغ قدم بعدی بریم.

قدم دوم : ایجاد چدیمان صفحه در Foundation

اول تکست ادیتور یا ویرایشگر متن مورد نظر خود رو باز کنین و کدهای زیر رو در اون کپی کنین و نام اونو Index.html بذارین:

<!– 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 –>

به Foundation خوش اومدید. حال کدهای زیر رو هم در ویرایشگر متن خود اضافه کنین:

<!– 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”>

<h2>Body Seven Columns</h2>

</div>

<div class=”five columns”>

<h2>Sidebar Five Columns</h2>

</div>

</div>

</div>

</div>

<div class=”row”>

<div class=”twelve columns”>

<h2>Footer Twelve Columns</h2>

</div>

</div>

این کدها منتهی به ایجاد ساختاری مشابه چیزی که در زیر می بینین می شه. یعنی شما در اول یه سطر ۱۲ ستونی دارین که هدر صفحه شما رو تشکیل میده و در ادامه یه سطر هفت ستونی و یه سطر پنج ستونی که بدنه و ساید بار رو تشکیل میدن. در آخر هم شما یه سطر فوتر با پهنای ۱۲ ستون دارین.

تا اینجا ما تونستیم ساختار کلی و چیدمان اصلی یه صفحه ریسپانسیو رو بسازیم. حال نوبت به اون می رسه که المانای صفحه درون این ساختار قرار بگیرن. در بخش بعدی ما متنا و تصاویری رو در این ساختار جایگذاری میکنیم تا شما همه مراحل رو به صورت عینی ببینین.

قدم سوم: اضافه کردن محتوا به ساختار

هدف ما در این آموزش این نیس که به شما بیاموزیم چیجوری محتوا بسازین و یا چه محتوایی رو واسه صفحات خود انتخاب کنین. در این بخش تنها هدف ما اینه که شما محتواهای متنی و تصویری مختلفی رو درون صفحه خود بذارین تا ببینین که وقتی محتوایی درون صفحه شما قرار میگیره این محتوا روی صفحه کامپیوتر و صفحه موبایل چیجوری نشون داده می شه. واسه قرار دادن محتوای متنی درون این صفحه تنها باید محتوای مورد نظر خود رو کپی کرده و در بخش Body بذارین یا Paste کنین. واسه قرار دادن تصاویر می تونین از tag استفاده کنین. اگه می خواین پس زمینه صفحه شمام مثل پس زمینه صفحه ای که در ابتدایی این مقاله تصویری از اون واسه شما نشون داده شد دارای یه تصویر یا یه رنگ مشخص باشه باید تنطیمات مربوط به اونو در SubtlePatterns انجام بدین.

قدم چهارم : قدم چهارمی وجود نداره! ♥

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

حواستون باشه که وسایل زیادی واسه ایجاد یه صفحه ریسپانسیو وجود دارن و Foundation تنها یکی از اونا هستش. شما می تونین طبق علاقه خود هر کدوم از این وسیله ها رو واسه کار خود انتخاب کنین.

و در آخر از دوستائی که علاقمند به آموزش برنامه نویسی هستن و یا متخصص برنامه نویس اگه هستین دعوت میکنم در انجمن کار کنین