به سئو روز خوش آمدید

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

۱۱ تیر
۱۳۹۶
آموزش ریسپانسیو قالب سایت

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

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


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

حامد مهدی زاده
نویسنده

حامد مهدی زاده هستم 37 سال سن , 8 سال سابقه در رابطه با برنامه نویسی سئو و بهینه سازی سایت دارم , در سئو چون باید طبق الگوریتمها به روزبود نام سایت را سئو روز نهادم, همراهی کنید در شبکه های اجتماعی

مطالب اخیر