طراحی قالب ریسپانسیو

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

با استفاده از HTML,CSS می توانیم طراحی قالب ریسپانسیو انجام دهیم.

با استفاده از بوت استرپ (BOOTSTRAP) نیز می توانیم طراحی قالب ریسپانسیو یا واکنش گرا انجام دهیم.

ریسپانسیو :

طراحی قالب ریسپانسیو (Responsive) یعنی قالب سایت در حالات مختلف ، عکس العمل نشان دهد و حالات نمایش تغییر کند. مثلا وقتی سایت را با موبایل تماشا می کنید منو جمع شده و یک علامت مشاهده می کنید ، در صورتی که وقتی با مانیتور تماشا می کنید منوها بصورت افقی نمایش داده میشود.

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

در این قسمت می خواهیم نحوه نمایش سایت شیرازلرن را در حالت موبایل و مانیتور نشان دهیم.

نحوه نمایش در مانیتور را در تصویر زیر ببینید.

طراحی قالب ریسپانسیو

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

طراحی قالب ریسپانسیو

 

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

آموزش طراحی قالب ریسپانسیو با HTML,CSS :

در این بخش به آموزش طراحی قالب ریسپانسیو با HTML,CSS می پردازیم و نکات مهمی را ذکر می کنیم.

برای طراحی قالب ریسپانسیو با HTML,CSS باید ابتدا دستورات HTML , CSS را بشناسید و با نحوه کار انها آشنا باشید.

یکی از راه های ریسپانسیو کردن سایت ، این است که عرض را با درصد مشخص کنید.

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

در حالت عادی ما عرض یک صفحه را مثلا 1024 پیکسل می گیریم سایز صفحه مشخص است و تغییر نمی کند . اما وقتی عرض را با درصد مشخص می کنیم صفحه واکنشگرا می شود و با تغییر اندازه ، تغییر می کند .

مثلا عرض را 100 در صد می گیریم در این صورت ، صفحه به هر اندازه باشد عناصر در آن تغییر می کند.

اگر عرض (WIDTH) یک عکس را 100 در صد بگیریم عکس ریسپانسیو می شود .

در قسمت پایین یک مثال را خواهید دید.

<img src="img_girl.jpg" style="width:100%;">

وقتی به عرض تصویر مقدار صد در صد را می دهیم تصویر ریسپانسیو می شود.

اما پیشنهاد می شود بجای طراحی قالب ریسپانسیو با HTML,CSS از فریمورک بوت استرپ استفاده نمایید.

آموزش طراحی قالب ریسپانسیو با بوت استرپ :

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

بوت استرپ یک فریمورک است که طراحی قالب ریسپانسیو را برای ما راحت کرده است.

بجای اینکه ساعت ها وقت خود را برای طراحی قالب ریسپانسیو با HTML,CSS هدر کنید بهتر است از بوت استرپ استفاده کنید.

کار با بوت استرپ راحت است.

براحتی می توانید در چند روز نحوه کار با بوت استرپ را بیاموزید و ازآن استفاده کنید.

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

بوت استرپ از سیستم گرید استفاده می کند. سیستم گرید به این شکل میباشد هر سطر به 12 ستون تقسیم می شود. مثلا شما تمایل دارید 3 عکس در کنار هم قرار گیرد پس در هر 4 بخش یک عکس قرار داده میشود.

کار با گرید بوت استرپ راحت است.

طراحی قالب ریسپانسیو

دانلود بوت استرپ :

بوت استرپ از کلاس های مختلفی استفاده می کند کلاس ها آماده است فقط کافی است از آن استفاده کنید. سایت اصلی بوت استرپ getbootstrap.com است.

برای دانلود بوت استرپ می توانید از این سایت استفاده کنید.

پس از دانلود بوت استرپ می توانید طراحی قالب سایت ریسپانسیو را انجام دهید.


نویسنده : هدایت عباسی

ثبت نظر