آشنایی با تقسیم بندی محتوایی صفحات در طراحی سایت

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

طرح بندی صفحات وب که به منظور تقسیم بندی محتوایی صفحات در طراحی سایت صورت می پذیرد، با استفاده از تگ های معنایی تحت عنوان semantic انجام می شود. بدین منظور چهار روش رایج وجود دارد که هر کدام ویژگی های مثبت و منفی خاص خود را دارند. طراحی جدول دار، ویژگی float، استفاده از framework و به کارگیری flex box مهم ترین روش های تقسیم بندی محتوایی صفحات در طراحی سایت هستند که در ادامه به بررسی آن ها خواهیم پرداخت.

طراحی جدول دار

توجه داشته باشید که طراحی جدول دار در تقسیم بندی محتوایی صفحات در طراحی سایت به معنی به کارگیری تگ< table=""> نبوده و منظور از آن نمایش اطلاعات موجود در سایت به صورت کاملا مجزا و طبقه بندی شده است.
در صورتی که کد نویسی انجام شده شامل طراحی جدول دار باشد، کدهای نهایی بسیار شلوغ بوده و این شلوغی موجب سخت شدن بررسی و تغییرات آن ها در گام های بعدی خواهد شد.

استفاده از ویژگی float

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

استفاده از framework

در این روش به منظور تقسیم بندی محتوایی صفحات در طراحی سایت چارچوب هایی نظیر bootstrap را مورد استفاده قرار می دهند.

استفاده از ویژگی flex box

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


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

آموزش تقسیم بندی محتوایی صفحات در طراحی سایت

شاید بهتر باشد در هنگام انجام هر عملی به منظور انسجام بیشتر کار و دستیابی راحت تر به هدف اصلی، نخست چارچوب اولیه و کلی کار را در ذهن خود و یا بر روی کاغذ ترسیم نماییم. بدون شک تقسیم بندی محتوایی صفحات در طراحی سایت نیز هیچگاه از این قاعده کلی مستثنی نبوده و نیست.
به منظور ساخت یک صفحه از سایت در گام اول صفحه مورد نظر خود را تقسیم بندی نموده و محل قرارگیری هر یک از المان ها در صفحه را تعیین کنید. پیشنهاد ما این است که طرح اولیه مورد نظر را بر روی یک کاغذ رسم کرده و یا با استفاده از نرم افزارهای موجود در این زمینه آن را تصویر سازی کنید.
اگر به سایت های دیگر دقت کرده باشید، حتما متوجه شده اید که عمده این سایت ها از یک طبقه بندی کلی تبعیت می کنند. یکی از بخش هایی که در تقسیم بندی محتوایی صفحات در طراحی سایت مورد استفاده قرار می گیرد، بخشی تحت عنوان Header است. نام سایت، لوگو سایت، منو و مواردی از این قبیل در این بخش گنجانده می شوند. بخش Header عمدتا در بالای سایت مستقر می گردد.


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

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

توجه داشته باشید که بخش sidebar امکان قرارگیری در دو طرف صفحه را دارا می باشد. این موضوع موجب تغییر ساختار کلی سایت نشده و در هر دو صورت شمای کلی اکثر سایت های طراحی شده به همین منوال است.
حال ممکن است این سوال ذهنتان را به خود مشغول کرده باشد که چگونه می توانیم تقسیم بندی محتوایی صفحات در طراحی سایت را مطابق آنچه پیش تر گفته شد، انجام دهیم؟

استفاده از تگ < div=""> در تقسیم بندی محتوایی صفحات در طراحی سایت

در صورت استفاده از تگ < div=""> در تقسیم بندی محتوایی صفحات در طراحی سایت می توان تمامی عناصر موجود در Html را مورد استفاده قرار داد. تگ نام برده شده قادر است تمامی عناصر داخل خود را در طبقه ای مشخص قرار دهد.

جالب است بدانید که تغییر مکان و تغییر اندازه این تگ از طریق به کارگیری CSS امکان پذیر می باشد. به جدول زیر توجه کنید تا مثالی از تگ div و خروجی آن را به وضوح ببینید:

مثال تگ div

واکنش گرایی صفحات سایت، اصلی مهم در طراحی سایت

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

طراحی واکنش گرا با به کارگیری Html و CSS زمینه ای را فراهم می سازد که تقسیم بندی محتوایی صفحات در طراحی سایت متناسب با دستگاهی که کاربر با استفاده از آن وارد سایت شده است، تغییر کند. این دستگاه ها شامل تبلت، تلفن همراه هوشمند و کامپیوتر شخصی می باشد.

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

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

---