کتاب طراحی سایت ریسپانسیو

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

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

طراحی وب به صورت واکنش گرا به معنی استفاده از HTML و CSS برای تغییر اندازه، مخفی کردن، کوچک یا بزرگ کردن یا حرکت محتوا برای نمایش بهتر آن در هر صفحه نمایشی است.

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

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

در سئو وب سایت شما نیز تاثیر بسیار زیادی دارد.

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

در زمان ایجاد صفحات وب به صورت واکنش گرا، عنصر <meta> زیر را در تمام صفحات وب‌سایت خود اضافه کنید: این کد viewport صفحه شما را تنظیم کرده و دستورالعمل چگونگی کنترل ابعاد و مقیاس محتوای صفحه را به مرورگر می‌دهد.

در اینجا مثالی از یک صفحه بدون متا تگ viewport و همان صفحه با استفاده از متا تگ viewport آورده شده است:   تصاویر واکنش گرا به تصاویری گفته می‌شود که برای انطباق با هر نوع اندازه مرورگری تغییر سایز پیدا می‌‌کنند.

  اگر ویژگی width را روی ۱۰۰ درصد تنظیم کنیم، تصویر به صورت واکنش گرا خواهد بود و افزایش یا کاهش اندازه خواهد یافت:   اگر ویژگی max-width را روی ۱۰۰ درصد تنظیم کنید تصویر در صورت نیاز به اندازه‌های کوچک‌تر تغییر سایز پیدا می‌کند اما هرگز بزرگ‌تر از اندازه اصلی خود نخواهد شد:   عنصر <picture> در HTML به شما امکان تعریف تصاویر مختلف برای اندازه‌های مختلف پنجره مرورگر را می‌دهد.

مثلا تصور کنید در حالت عادی صفحه نمایش یک گلدان پر از گل به طور کامل نمایش می‌یابد.

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

در انتها اگر صفحه را به کوچک‌ترین حالت ممکن تغییر دهید تنها یک غنچه از تصویر نمایش می‌یابد.

  اندازه متن می‌تواند با یک واحد “vw” تنظیم شود که به معنی «viewport width» است.

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

به این ترتیب که اگر پنجره مرورگر بزرگ‌تر یا کوچک‌تر شود، متن هم به همان نسبت تغییر اندازه پیدا می‌کند.

  علاوه بر تغییر اندازه متن و تصویر، در بین برنامه‌نویسان استفاده از مدیا کوئری (media query) در صفحات واکنش گرای وب بسیار رایج است.

شما با استفاده از مدیا کوئری می‌توانید استایل‌های کاملا متفاوتی برای اندازه‌های مختلف مرورگر تعریف کنید.

در نمونه کد زیر مشخص شده است که با هر بار تغییر پنجره مرورگر، در نوار زیر چه تغییراتی ایجاد شود:   یک صفحه واکنش گرا باید در صفحات بزرگ دسکتاپ و صفحات کوچک گوشی‌های موبایل ظاهر خوبی داشته باشد: فریم پورک‌های CSS بسیاری وجود دارد که طراحی واکنش گرا ارائه می‌دهند.

برخی از آن‌ها رایگان بوده و روش استفاده آسانی دارند.

  یکی از فریم‌ورک‌های بسیار محبوب CSS، فریم‌ورک بوت استرپ (Bootstrap) است که از HTML، CSS و جی کوئری (jQuery) برای ایجاد صفحات واکنش گرا استفاده می‌کند: امیدوارم این آموزش مورد توجه دوستان قرار گرفته باشد….

لیست جلسات قبل آموزش Html حتما بخوانید 1 : فیلم آموزش رایگان Html مهندس رحمانی حتما بخوانید 1 : فیلم آموزش رایگان CSS مهندس رحمانی راهنماي دانلود گزارش خرابي لينک آموزش تعمير فايل زيپ ورود ثبت نام سورس باران بازدید شما را به فال نیک پنداشته و برای شما در هر کجای این گیتی که هستید آرزوی ساعاتی سرشار از نیکی و نیکینامی می کند به یاد داشته باشید که ایرانی هستید هر کجا که هستید و سنت و ملیت خود را افتخار خود بدانید ایرانی باشید ، ایرانی باشید ، ایرانی باشید … اما با شما هموطنان نوع دوست سخنی دیگر داریم : در گذر این ثانیه ها به یاد آنان که هفت سین زندگیشان حتی سیبی برای سرخی ندارد و سبزه ای برای سبزی و جیبشان از سکه های طراوت تهی است باشیم.

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

بهار می رسد، دلتان خوش ، کامتان شیرین ،روزگارتان سبز ، به یاد دلهای دردمند نیز باشید.

امید است که مطالب ما گامی بر پیشرفت برنامه نویسی در کشور عزیزمان ایران باشد… ایام به کام – جاری باشید.

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