قالب وردپرس شرکتی ممبر فیک
خانه / طراحی سایت / طراحی سایت با طراحی وب واکنشی بخش دوم: جداول شناور

طراحی سایت با طراحی وب واکنشی بخش دوم: جداول شناور

بعد از یادگیری مفاهیم اولیه در بخش قبلی، حال می توانیم سراغ مفهوم Fluid Grid برویم و آن را باهم بیاموزیم. در این روش با استفاده از واحد های نسبی (Relative Units) به جای واحد های ثابت مانند: px, cm, mm و… سعی می کنیم ساختار قالب وب سایت نسبت به اندازه صفحه نمایشی که در آن نمایش داده می شود تغییر خواهد کرد. به عبارتی با تغییر اندازه صفحه نمایش، سایت کوچکتر یا بزرگتر می شود.

برای شروع ساختار زیر را در نظر بگیرید:

یک صفحه ساده با اندازه کلی ۹۶۰px

منو اصلی در سمت چپ با اندازه ۲۱۵px و فاصله از اطراف با اندازه ۲۰px

مطالب اصلی در سمت راست با اندازه ۶۸۵px و فاصله از اطراف با اندازه ۲۰px

بخش کناره به اندازه ۲۱۵px در داخل بخش مطالب اصلی و فاصله از اطراف با اندازه ۲۰px

برای رسیدن به Fluid Grid باید ابتدا تمامی اندازه ها را به اندازه های نسبی تبدیل کنیم. در این بخش از % درصد استفاده می کنیم. برای مثال: width: 90% به این معنی است که طول المنت ما نود درصد طول پدر خود را پر کند. برای تبدیل تمامی اندازه المنت به مقادیر نسبی میتوانید از فرمول زیر استفاده کنید:

هدف ÷ پدر * ۱۰۰ = درصد

حال این فرمول را به کار میگیریم و مقادیر را محاسبه می کنیم:

منو اصلی:

۲۱۵/۹۶۰ × ۱۰۰ = ۲۲٫۳۹۵۸۳۳۳۳۳۳%

مطالب اصلی:

۶۸۵/۹۶۰ × ۱۰۰ = ۷۱٫۳۵۴۱۶۶۶۶۶۷%

بخش کناره:

۲۱۵/۶۸۵ × ۱۰۰ = ۳۱٫۳۸۶۸۶۱۳۱۳۹%

فاصله منو اصلی و مطالب اصلی از اطراف:

۲۰/۹۶۰ × ۱۰۰ = ۲٫۰۸۳۳۳۳۳۳۳۳%

فاصله بخش کناره از اطراف:

۲۰/۶۸۵ × ۱۰۰ = ۲٫۹۱۹۷۰۸۰۲۹۲%

توجه داشته باید که برای محاسبه مقادیر “بخش کناره ” و “فاصله بخش کناره از اطراف” مقدار پدر را در فرمول ۶۸۵ یعنی مقدار عرض بخش مطالب اصلی قرار دادیم چون بخش کناره طراحی سایت در داخل بخش مطالب اصلی قرار دارد در نتیجه طول آن نسبت به این المنت محاسبه می شود.

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

در بخش بعدی به بررسی نحوه استفاده از Media Queries ها خواهیم پرداخت.

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

واحد تحقیق و توسعه شرکت سرویس استار (طراحی سایت – طراحی سایت مشهد)

کلمات کلیدی مرتبط: نمونه طراحی سایت – طراحی سایت مشهد

درباره ی دیزاین ۷۲۴