طرح کلی صفحات HTML5

HTML Layout

2 697

طرح کلی صفحات HTML

صفحات وب مانند صفحات روزنامه ها و مجلات، محتوای خود را در ستون ها و طرح های خاصی نمایش می دهند. با معرفی HTML5 مبحث semantics وارد دنیای طراحی وب شد و حالا عناصری را داریم که semantic هستند.

semantic در لغت به معنی «معنایی» است و وقتی می گوییم عناصرِ semantic، منظورمان عناصری است که در HTML5 دیگر تنها یک عنصر نیستند، بلکه برای موتورهای جست و جو معنی خاصی دارند.

عناصر semantic ای که برای تعریف قسمت های مختلف یک صفحه استفاده می شوند از این قرار اند:

  • <header> مسئول تعریف قسمت header در سایت ها است
  • <nav> مسئول تعریف منوی سایت ها (نوار navigation) است
  • <section> مسئول تعریف یک قسمت در سایت ما است
  • <article> مسئول تعریف قسمتی مستقل است که دارای مقاله ای از سایت ما است
  • <aside> مسئول تعریف قسمت کناری و جانبی سایت است
  • <footer> مسئول تعریف قسمت footer در سایت ها است
  • <details> مسئول تعریف جزئیات بیشتر در صفحات وب است
  • <summary> مسئول تعریف یک heading برای عنصر <details> است

برای درک بهتر به تصویر زیر نگاه کنید:

طرح کلی HTML5
طرح کلی HTML5

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

برای ایجاد این نوع طرح چند ستونه 5 روش اصلی وجود دارد:

  • استفاده از جداول HTML (این مورد منسوخ شده است و به هیچ عنوان پیشنهاد نمی شود)
  • استفاده از خاصیت float در CSS
  • استفاده از flexbox در CSS
  • استفاده از framework های زبان CSS
  • استفاده از grid ها در CSS

جداول HTML

در سال های قبل (بسیار قبل تر از معرفی HTML5) طراحان مجبور بودند برای طراحی سایت های چند ستونه (طرح موجود در تصویر بالا) از <table> یا همان جدول ها در HTML استفاده کنند. واضح است که جدول ها برای شکل دهی به صفحات وب ساخته نشده اند بلکه برای نمایش داده های خاص که نیاز به جدول دارند می باشند. استفاده از <table> برای شکل دادن به صفحات وب تان کاری بسیار طاقت فرسا و غیر استاندارد است که کاملا منسوخ شده و هیچ انسان عاقلی دیگر از آن استفاده نمی کند.

فریم ورک های CSS

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

فریم ورک Bulma

Bulma CSS Framework
Bulma CSS Framework

فریم ورک Bulma یکی از محبوب ترین فریم ورک های CSS است که قبلا با نام Scotch شناخته میشد. از مزیت های اصلی این فریم ورک این است که از CSS خالص تشکیل شده است و هیچ کد جاوا اسکریپتی ندارد؛ بنابراین تنها باید یک فایل css را درون پروژه ی خود import کنید و نیازی به فایل های js نیست. همچنین این فریم ورک بر اساس Flexbox طراحی شده است و بر پایه ی Sass می باشد بنابراین تنها از کدهایی استفاده خواهید کرد که به آن ها نیاز داشته باشید. طراحی با این فریم ورک کاملا واکنش گرا (responsive) بوده و اولویت خود را بر گوشی های موبایل قرار داده است.

فریم ورک Bootstrap

Bootstrap Framework
Bootstrap Framework

فکر نمی کنم Bootstrap نیاز به معرفی داشته باشد! Bootstrap یکی از بزرگترین فریم ورک های CSS در دنیا می باشد که تا امروز به نسخه ی چهارم خود رسیده است. این فریم ورک، فریم ورک پیش فرض اکثر توسعه دهندگان وب است و بر اساس SASS و LESS ساخته شده است. می توان به صورت خلاصه گفت که Bootstrap بزرگترین فریم ورک CSS محسوب می شود

فریم ورک های بسیار دیگری نیز وجود دارد اما ما نمی توانیم تمام آن ها را بررسی کنیم. این دو مورد از موارد مشهور در کنار فریم ورک Foundation هستند

استفاده از خاصیت float در CSS

استفاده از خصوصیت float برای نظم دهی به صفحات وب و طراحی چند ستونه از شایع ترین روش های طراحی است. از مزیت های کار با float این است که یادگیری آن بسیار آسان است؛ تنها کافی است با خصوصیت های float و clear آشنا باشید. اما نکته ی منفی آن اینجاست که عناصر float وابسته به document flow (جریان عناصر در سند HTML) هستند که از انعطاف پذیری CSS کم می کند.

به مثال زیر توجه کنید:

مشاهده ی خروجی در JSBin

در مثال بالا یک صفحه ی وب را به صورت ساده طراحی کرده ایم که از عناصر semantic در HTML5 استفاده کرده است.

استفاده از Flexbox

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

به مثال زیر توجه کنید:

مشاهده ی خروجی در JSBin

استفاده از Grid View

ماژول Grid در CSS به شما اجازه می دهد تا طرحی داشته باشید که بر اساس یک Grid (به معنی «شبکه توری» یا «مشبک») باشد. به تصویر زیر نگاه کنید:

تفاوت صفحات طراحی شده با CSS Grid
تفاوت صفحات طراحی شده با CSS Grid

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

نکته: خصوصیت Grid که به صورت پیش فرض در CSS وجود دارد در مرورگر Internet Explorer 15 و قبل تر کار نمی کند اما Grid هایی وجود دارند که توسط توسعه دهندگان به عنوان کدهای جداگانه ساخته شده اند. شما می توانید با دانلود کردن این نوع Grid ها از آن ها در هر مرورگری استفاده کنید.

به طور مثال یکی از کد های Grid معروف در اینترنت simplegrid نام دارد که می توانید به مراجعه به سایت آن، کد CSS اش را دانلود کنید.

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

ترتیبی که روکسو برای یادگیری مطالب سری صفر تا صد HTML به شما توصیه می‌کند:
2 نظر
  1. علی

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

    1. امیر زوارمی

      سلام دوست عزیز،
      از نظر ظاهری بله میشه اینطوری بهش نگاه کرد اما از نظر فنی مباحث متفاوتی هستن. ماژول grid برای CSS جدیدا پیاده سازی شده.

ارسال نظر

توجه:‌ آدرس ایمیل شما منتشر نخواهد شد.

mezitli escort
mezitli escort