تقسیم بندی صفحات وب مشخص می کند که هر عنصر سایت شما در کجا قرار گیرد واین کار به استاندار سازی،مرتب سازی، مفهومی سازی و ریسپانسیو سایت شما کمک خواهد کرد.
اگر به سایت های مختلف نگاه کنید، اکثر سایت ها از یک تقسیم بندی مشترک پیروی می کنند که همان ساختار html5 است.
شما یک قسمت هدر در سایت خود دارید که نام سایت، لوگوی سایت، منو و غیره را در آن قرار می دهید و معمولا در بالای سایت قرار دارد.
سپس بخشی برای ساید بار، معرفی خدمات، تبلیغات و … و در کنار آن بخشی برای نمایش محتوای اصلی سایت خود دارید. در پایان، بخشی به نام Footer دارید که می توانید لینک های مهم، راه های ارتباطی و … را در آن نمایش دهید.
در تصویر زیر این بحث را می توان به شکلی گویاتر مشاهده کرد:
ریسپانسیو صفحات سایت
طراحی ریسپانسیو با استفاده از Html و CSS (روشهای اضافه کردن CSS به صفحات html)مبنایی را برای تغییر تقسیم بندی محتوای صفحه در طراحی وب سایت با توجه به دستگاهی که کاربر برای دسترسی به سایت از آن استفاده می کند، فراهم می کند. این دستگاه ها شامل تبلت ها، تلفن های هوشمند و رایانه های شخصی است.
نمایش صحیح عناصر در دستگاه های مختلف مستلزم تغییر اندازه قسمت های مختلف و گاهی پنهان کردن این قسمت ها، جمع کردن متن با توجه به اندازه مرورگر مورد استفاده و گاهی بزرگ کردن آنها است تا کاربران بتوانند محتوای سایت را به درستی ببینند.
بنابراین می توان نتیجه گرفت که تفکیک محتوایی صفحات طراحی وب سایت و واکنش گرا بودن آنها از مهمترین مواردی است که در طراحی وب سایت و تقسیم بندی صفحات وب در html باید مورد توجه قرار گیرد.
continer چیست
Continer شامل یک سطر 100 درصدی در هر پلت فرم یا گجت گفته می شود که ممکن است بین یک تا دوزده ستون را شامل شود و شامل کد زیر می وباشد
ستون بندی در html
هر سطر را در تقسیم صفحه html معمولا به یک تا دوازده ستون تقسیم می کنیم و برای جدا سازی این ستون ها از margin استفاده می کنیم.
در زیر 12 ستون مورد استفاده شده در css آورده شده است
گرید بندی صفحه وب
گرید بندی صفحه وب در واقع همان تقسیم بندی صفحات وب است که به روش ها و شیوهای گوناگون انجام می پذیرد که من در این صفحه از روش های استاندار در تقسیم بندی صفحه که در فیلم آموزشی فراهم کرده ام خواهم پرداخت.
طرح بندی سایت
طرح بندی یا تقسیم بندی صفحات وب سایت به مرتب سازی این صفحات کمک خواهد کرد و در بحث مربوط به ریسپانسو که هر صفحه باید در دیوایس های مختلف بدون خطا وبهم ریختگی سایت به کاربر نمایش داده شود اجتناب ناپذیر است.
[…] ادامه آموزش html-css و تقسیم بندی تگهای ساختار html5 به دلیل اینکه حجم کدهای که رفته رفته در تگ های مختلف […]