لایه های HTML

لایه های HTML


لایه بندی یا طرح بندی پیشرفته وب سایت را می توان با استفاده ترکیبی از CSS و HTML به دست آورد. در این جلسه به طور مختصر به شرح و بررسی لایه ها در زبان HTML می پردازیم.

بسیاری از وب سایت ها و وبلاگ های مدرن شامل هدر، فوتر، ناوبار و شاید نوارکناری و قسمت اصلی سایت که شامل محتوا است، می باشند. چیزی شبیه این:

لایه بندی HTML

HTML دارای تعدادی عنصر است که می تواند برای تعریف هریک از این مناطق استفاده شود. این عناصر شامل: <main>, <header>, <footer>, <nav>, <aside> و <article> می باشد. همچنین عنصر <div> یک عنصر سطح بلوک عمومی است که می تواند برای گروه بندی عناصر HTML مورد استفاده قرار گیرد. بنابراین طرح بالا می تواند به شرح زیر مشخص شود:

<header>هدر</header>

<article>مقاله</article>

<nav>منو</nav>

<div>تبلیغات</div>

<footer>فوتر</footer>

اما این عناصر صرفا ساختار سند را ارائه می دهند. یعنی دارای مقدار اندازه نیستند. بنابراین ما به این نتیجه خواهیم رسید:

نمایش عناصر لایه بندی HTML

همانطور که قبلا در این دوره ی آموزشی بیان کردیم، CSS چیزی است که ما برای تعیین اندازه اسناد HTML خود نیاز داریم.

ترسیم لایه با CSS

چیدمان شبکه CSS یا CSS grid layout به منظور طرح بندی سایت ساخته شده است. این ویژگی برپایه یک سیستم شبکه ای دوبعدی کار می کند که در آن مشخص می کنید که کدام عناصر به کدام قسمت از شبکه بروند.

بنابراین ما می توانیم کد HTML بالا را برداریم، سپس با استفاده از گرید سی اس اس مکان هر عنصر را تعیین کنیم.

<!DOCTYPE html>

<head>

<title>مثالی از لایه بندی صفحه وب</title>

<style>

body {

  display: grid;

  grid-template-areas:

    "header header header"

    "nav article ads"

    "footer footer footer";

  grid-template-rows: 60px 1fr 60px;

  grid-template-columns: 20% 1fr 15%;

  grid-gap: 10px;

  height: 100vh;

  margin: 0;

  }

#webheader {

  grid-area: header;

}

#webfooter {

  grid-area: footer;

}

#webarticle {

  grid-area: article;     

  }

#webnav {

  grid-area: nav;

  }

#webads {

  grid-area: ads;

  }

header, footer, nav, div {

  padding: 20px;

  background: #e866ff;

}

  article {

    padding: 150px;

    background: #ffe500;

  }

</style>

<body>

  <header id="webheader">هدر</header>

  <article id="webarticle">مقاله</article>

  <nav id="webnav">ناو</nav>

  <div id="webads">تبلیغات</div>

  <footer id="webfooter">فوتر</footer>

</body>

برای مشاهده نتیجه اینجا کلیک کنید.

اگر مرورگر شما از طرح شبکه ای پشتیبانی کند، این مثال بالا باید چیزی شبیه به تصویر زیر باشد:

نتیجه مثال لایه بندی HTML

در این مثال ما از ویژگی grid-template-areas با نگارش دستوری “ASCII art” برای مشخص کردن هرکدام از عناصر استفاده کردیم. یعنی این قسمت که در زیر آورده شده در مثال بالا کاربرد داشته است:

grid-template-areas:

    "header header header"

    "nav article ads"

    "footer footer footer";

سپس هر عنصر را به هرکدام از این منطقه شبکه ها با استفاده از ویژگی gird-area وصل کردیم.

#webheader {

  grid-area: header;

}

#webfooter {

  grid-area: footer;

}

#webarticle {

  grid-area: article;     

  }

#webnav {

  grid-area: nav;

  }

#webads {

  grid-area: ads;

  }

بقیه کدها با اندازه گیری، زیبایی شناسی و علاقه و کاربرد وب ارتباط دارد.

در این نمونه کمی عناصر را با اضافه کردن ID به آنها نشانه گذاری و تغییر دادیم. حتما لازم نیست که انجام داده شود، امّا این کار خوب است. با انجام اینکار، اطمینان حاصل می کنیم که مناطق شبکه تنها توسط عناصر با ID مخصوص به خودش عمل می کنند. اگر اینکار را انجام ندهیم، هنگامی که از یک عنصر همنام دیگر استفاده کنید (به عنوان مثال عنصر هدر دیگری اضافه کنیم) در صفحه وبمان به مشکلات عمده ای برخورد خواهیم کرد.

لایه های واکنشگرا

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

ما می توانیم از مثال فوق استفاده کنیم تا لایه هایی را که طراحی کرده ایم به حالت واکنشگرا تغییر دهیم. برای انجام اینکار کافیست یک media به کدها اضافه کنیم تا اگر کاربر با نمایشگرهای کوچکی مثل موبایل وارد صفحه شد عرض صفحه ما نیز با نمایشگر همگام شود و بالعکس.

<<!DOCTYPE html>

<head>

<title>مثالی از لایه بندی صفحه وب</title>

<style>

body {

  display: grid;

  grid-template-areas:

    "header header header"

    "nav article ads"

    "footer footer footer";

  grid-template-rows: 60px 1fr 60px;

  grid-template-columns: 20% 1fr 15%;

  grid-gap: 10px;

  height: 100vh;

  margin: 0;

  }

@media all and (max-width: 575px) {

  body {

    grid-template-areas:

      "header"

      "article"

      "ads"

      "nav"

      "footer";

    grid-template-rows: 80px 1fr 70px 1fr 70px; 

    grid-template-columns: 1fr;

 }

}

#webheader {

  grid-area: header;

}

#webfooter {

  grid-area: footer;

}

#webarticle {

  grid-area: article;     

  }

#webnav {

  grid-area: nav;

  }

#webads {

  grid-area: ads;

  }

header, footer, nav, div {

  padding: 20px;

  background: #e866ff;

}

  article {

    padding: 150px;

    background: #ffe500;

  }

</style>

<body>

  <header id="webheader">هدر</header>

  <article id="webarticle">مقاله</article>

  <nav id="webnav">ناو</nav>

  <div id="webads">تبلیغات</div>

  <footer id="webfooter">فوتر</footer>

</body>

برای مشاهده نتیجه اینجا کلیک کنید.

همانطور که در مثال بالا مشاهده نمودید اگر صفحه نمایش را کوچک کنیم یا مثلا با گوشی موبایل وارد شویم لایه ها زیر همدیگر قرار می گیرند و کاربر موبایل دیگر نیازی به اسکرول کردن افقی ندارد. اگر عملیات را درست انجام داده باشید اگر مرورگر (کروم) را کوچک کنید نتیجه باید مانند تصویر زیر باشد:

لایه رسپانسیو HTML

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

@media all and (max-width: 575px) {

  body {

    grid-template-areas:

      "header"

      "article"

      "ads"

      "nav"

      "footer";

    grid-template-rows: 80px 1fr 70px 1fr 70px; 

    grid-template-columns: 1fr;

 }

}

نتیجه ی کدهای بالا باعث می شود که شما همه عناصر موجود در بدنه سند HTML را به صورت روی هم انباشته مشاهده کنید (مگر اینکه این مثال را روی مانیتورهای بزرگ مشاهده کنید). استفاده از این عناصر برای دستگاه های کوچک مثل گوشی های هوشمند همراه بسیار ایده آل است.

ما به سادگی از ASCII art برای نمایش طرح جدیدی از صفحه وب استفاده کردیم (قرارگیری عناصر روی هم). همچنین در صورت نیاز مقدار ردیف و ستون را نیز می توانیم تغییر دهیم.

مرورگرهای غیر-شبکه

طرح شبکه ای یک بحث تازه است و به همین دلیل بسیاری از مرورگرها از آن پشتیبانی نمی کنند. خبر خوب این است که بیشتر مرورگرهای اصلی از ماه مارس 2017 از شبکه پشتیبانی می کنند، بنابراین این طرح بندی مورد استفاده قرار می گیرد. امّا هنوز تعداد زیادی از کاربران وب از مرورگرهای غیرشبکه ای «non-gird browsers» استفاده می کنند.

بنابراین تا زمانی که شبکه دارای پشتیبانی گسترده ای از مرورگرهاست، به منظور پشتیبانی از مرورگرهای غیرشبکه ای، شما باید از روش های دیگر برای طرح بندی وب سایت خود مانند پوسته های CSS (با مقدار float) و یا flexbox با ویژگی های flex و مرتبط با آن استفاده کنید.

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

تکامل طرح های وب سایت

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

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

جلسه قبل | جلسه بعد

تبلیغات در پایین ادامه ی مطلب

نظرات شما


    نام
    ایمیل (منتشر نمی‌شود) (لازم)
    وبسایت
    :) :( ;) :D ;)) :X :? :P :* =(( :O @};- :B /:) :S
    نظر خصوصی
    مشخصات شما ذخیره شود ؟ [حذف مشخصات] [شکلک ها]
    کد امنیتیرفرش کد امنیتی