۹- چیدمان صفحه

مقدمه

در این فصل می‌خواهیم در مورد Page Layout (چیدمان صفحه) نکاتی را بیان کنیم؛ یعنی چگونه جهت قرار گرفتن اِلمنت‌ها را تغییر دهیم.

داکیومنت فِلو دایرکشن  Document Flow Direction

با توجه به مطالب فصل هفتم نحوه قرار گرفتن اِلمنت‌ها در صفحه به صورت:

  • block (زیر هم زیر هم)
  • inline (در یک‌خط پشت سر هم)
  • inline-block که ترکیب این دو مورد است گفتگو کردیم.

در این فصل می‌خواهیم در مورد “جهت جریان قرار گرفتن مطالب” صحبت کنیم.

۱- در تصویر زیر:
جهت قرار گرفتن block‌ها از بالا به پایین (Top-Bottom) و جهت نوشته‌های inline به صورت افقی (horizontal) می‌باشد.

۲- در تصویر زیر:
جهت قرار گرفتن block‌ها از راست به چپ (Right-Left) و جهت نوشته‌های inline به صورت عمودی (vertical) می‌باشد.

۳- در تصویر زیر:
جهت قرار گرفتن block‌ها از چپ به راست (Left-Right) و جهت نوشته‌های inline به صورت عمودی (vertical) می‌باشد.

برای انجام این کار از دستور css زیر باید استفاده کرد.

writing-mode:
   horizontal-tb | vertical-rl | vertical-lr;

در دستور بالا بعد از عبارت writing-mode مقدار اول جهت تعیین inline و مقدار دوم جهت تعیین block می‌باشد.

main {
  writing-mode: vertical-rl;
}
روی تصویر کلیک کنید تا صفحه طراحی شده برایتان باز شود.

به کمک ابزار Inspect جهت نوشته‌ها در مثال بالا را تغییر دهید.

اَلایْمِنت  Alignment

برای تراز کردن اِلمنت‌ها در صفحه بدین روش استفاده می‌شود.

img {
  display: block;
  /* کد خط ۴ معادل دستور خطوط ۵ و ۶ است */
  /* margin:  0 auto; */
  margin-left: auto;
  margin-right: auto;
}
روی تصویر کلیک کنید تا صفحه طراحی شده برایتان باز شود.

به کمک ابزار Inspect مثال بالا را برای خودتان تحلیل کنید.

سؤال:
چرا در خطوط ۳ و ۴ مثال بالا نوشته‌ها به صورت متفاوتی نسبت به بقیه می‌باشند؟
برای پاسخ به این سؤال باید بدانید کامنت چیست و چه کاربردی دارد!

کامنت  Comment

آیا می‌توان از کدهایی برای راهنمایی و تفسیر دیگر کدهایمان استفاده کنیم و برای دیگران قابل مشاهده نباشد؟
محدودیتی در استفاده از کامنت‌ها وجود دارد؟

در این بخش می‌خواهیم در رابطه با تگ‌های کامنت صحبت کرده و خصوصیات این تگ‌ها و نحوه استفاده آنها را بررسی کنیم.

کامنت‌ها، قطعه کد‌هایی هستند که توسط مرورگرها نادیده گرفته می‌شوند.
معمولاً از کامنت برای شرح یک قطعه کد پیچیده، جداسازی بخش‌ها یا نکات و یادداشت برنامه‌نویسان (توسعه دهنده وب) استفاده می‌شود.

در یک کلام، کامنت‌ها به شما و دیگران کمک می‌کنند تا کدهایی که نوشته‌اید را درک کنند همچنین کامنت‌ها تاثیر عمیقی در افزایش خوانایی کد دارند.

پیشنهاد می‌شود حتماً از کامنت‌ها در کد‌نویسی وب سایت استفاده کنید.

کامنت در HTML
<!–  …  –>

در این تگ هر متنی که در وسط آن قرار گیرد به عنوان کامنت در نظر گرفته می شود؛
که توسط همه مرورگر ها نادیده گرفته خواهد شد.
مثال:

<!DOCTYPE html>
<html>
<head>  <!-- Document Header Starts -->
  <title> This is document title </title>
</head> <!-- Document Header Ends -->
<body>
  <p> Document content goes here.....</p>
</body>
</html>
}

کامنت در CSS
/*   …   */

در این دستور هر متنی که در وسط آن قرار گیرد به عنوان کامنت در نظر گرفته می شود؛
مثال:

/* This is a CSS comment */
/* This
   is another comment
*/
body {
   font-family:sans-serif;
   /*This is another comment */
}

در نرم‌افزار Visual‌Studio‌Code ابتدا خط یا خطوطی که می‌خواهید به صورت کامنت شوند را انتخاب (select) کرده سپس به کمک کلید‌های  / + ctrl  به حالت کامنت در آورید.

چگونه بلاک را از صف خارج کنیم؟

ویژگی float در css به شما این امکان را می‌دهد تا بتوانید بلاک‌های پشت سر هم چیده شده را از صف خارج کرده و طرحی شبیه به مجلات و روزنامه‌ها داشته باشید؛
جایی که تصویری را به نمایش می‌گذارند و متنی دور آن تصویر جریان پیدا می‌کند؛ float در لغت به معنای شناور یا جریان است.

برای انجام این کار از دستور css زیر باید استفاده کرد.

float:
   none | left | right;

ویژگی float سه مقدار    none | left | right   می‌گیرد.
مقدار none (هیچ) به صورت پیشفرض است به این معنا که بلاک در حالا عادی خود قرار دارد.

زمانیکه یک اِلمنت به سمت راست هول داده شود (float: right) یعنی از صف خارج می‌شود، محتوای بعد از آن دور لبه چپ اِلمنت پیچیده می‌شود.
و زمانیکه اِلمنت به سمت چپ هول داده شود (float: left) و از صف خارج می‌شود، محتوای بعد از آن دور لبه راست اِلمنت جمع خواهد شد.
و در حالت پیشفرض (float: none) اِلمنت بعدی به صورت عادی قرار می‌گیرد.

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

برای اینکه ویژگی float را بهتر متوجه شوید اینجا کلیک کنید؛ با تغییر مقادیر float در هر بلاک تغییرات را تحلیل و بررسی کنید.

چگونه اطراف یک بلاک  را پاک‌سازی (خالی) کنیم؟

حال کار ویژگی clear در css این است که از جریان دادن اِلمنت‌ها در کنار اِلمنتی که شناور (float) شده است جلوگیری کند.

برای انجام این کار از دستور css زیر باید استفاده کرد.

clear:
   none | left | right | both;

ویژگی clear بطور مستقیم با ویژگی float در ارتباط است.
کاربرد این ویژگی این است که اطراف اِلمنت شناور (یعنی اِلمنتی که مقدار float آن right یا left است) را پاک‌سازی (clear) کرده و اِلمنت دیگر به پایین اِلمنت شناور سقوط می‌کند.

ویژگی clear چهار مقدار  none | left | right | both   می‌گیرد.
مقدار none (هیچ) به صورت پیشفرض است به این معنا که بلاک در حالا عادی خود قرار دارد.
و مقدار both (دو طرف) به این معناست که دو طرف بلاک مربوطه را پاک‌سازی (خالی) می‌کند.

اگر اِلمنتی دارید که در سمت راست آن، اِلمنتی شناور به سمت راست (float: right) وجود دارد و می‌خواهید اِلمنت شما در کنار آن اِلمنت قرار نگیرد و به پایین آن سقوط کند کافی است مقدار clear آن را برابر با right قرار دهید.
مقدار both هم زمانی‌ کاربرد دارد که بخواهید اِلمنتی در دو طرف اِلمنت شما شناور نباشد.

برای درک مطالب بالا روی تصویر زیر کلیک کنید تا صفحه طراحی شده برایتان باز شود؛
سپس با تغییر مقادیر clear و float در هر بلاک تغییرات را تحلیل و بررسی کنید.

برای اینکه ویژگی‌های clear و float را بهتر متوجه شوید اینجا کلیک کنید؛ با تغییر مقادیر float , clear در هر بلاک تغییرات را مشاهده کنید.

اُوِرفلو  overflow

ویژگی overflow تعیین می‌کند که محتوایی که از مرزهای اِلمنت خارج می‌شود، را نمایش داده شود یا خیر؟ همچنین چگونگی نمایش را نیز تعیین می‌کند.

نکته:
فقط اِلمنت‌هایی که از نوع بلاک هستند محتوایشان سر ریز می‌شوند.

در حالت عادی اگر اِلمنتی پهنا و ارتفاع ثابت نداشته باشد با افزایش و بزرگ شدن محتوای آن، اِلمنت نیز در جهت ارتفاع و پهنا گسترش پیدا می‌کند.
در این حالت محتوای عنصر دچار اُوفلو (سَر ریز) نخواهد شد.

اما اگر در جهتی (چه افقی، چه عمودی و چه هردو) اندازه اِلمنت ثابت باشد، آن زمان اگر محتوای اِلمنت بیشتر از فضای آن باشد، محتوا دچار سَر ریز می‌شود.

تعیین ارتفاع و پهنای ثابت می‌تواند از طریق ویژگی‌های height و width تعیین شود؛
همچنین می‌تواند با استفاده از ویژگی position تعیین مختصات برای اِلمنت را انجام دهید.

برای انجام این کار از دستور css زیر باید استفاده کرد.

overflow:
   visible | hidden | scroll | auto;

visible:
این مقدار برای ویژگی overflow که مقدار پیشفرض است باعث می‌شود تا محتوای سَر ریز شده، نمایش داده شود.

hidden:
اگر این مقدار تعیین شود محتوای سَر ریز شده نمایش داده نمی‌شود.

scroll:
این مقدار باعث می‌شود تا برای اِلمنت اسکرول رسم شود تا محتوا داخل اِلمنت اسکرول شود.

auto:
زمانیکه از مقدار scroll استفاده شود حتماً اسکرول روی اِلمنت رسم می‌شود چه محتوا سَر ریز کند چه نکند.

اما اگر نیاز دارید که قبل از سَر ریز اسکرول نباشد و زمانیکه سَر ریز صورت گرفت اسکرول ظاهر شود، جواب نیاز شما مقدار auto می‌باشد.

در تصویر زیر اِلمنتی نمایش داده شده است که مقادیر ثابت برای پهنا و ارتفاع آن تعیین شده است:

اُوفلو ان پَرنت       overflow on parent

برای اینکه ویژگی‌های overflow on parent را بهتر متوجه شوید اینجا کلیک کنید؛
با تغییر مقدار overflow برای parent و تغییر مقدار float برای child این ویژگی را  تحلیل و بررسی کنید.

اُوفلو ان چایلد     overflow on child

برای اینکه ویژگی‌های overflow on child را بهتر متوجه شوید اینجا کلیک کنید؛
با تغییر مقدار overflow برای green و تغییر مقدار float برای red این ویژگی را  تحلیل و بررسی کنید.

برای درک بهتر مثال‌های زیر حتماً Source آنها را تحلیل و بررسی کنید.

مثال۱:

برای مشاهده Source روی تصویر بالا کلیک کنید.

مثال۲:

section {
  overflow: hidden;
}
img {
  display: block;
  float: left;
}
برای مشاهده Source روی تصویر بالا کلیک کنید.

مثال۳:

main {
  overflow: hidden;
}
section {
  float: left;
  margin: 0 35px;
}
section+section {
  margin-left: 0;
}
برای مشاهده Source روی تصویر بالا کلیک کنید.

تمرین

این فایل را دانلود کرده و از حالت فشرده خارج کنید (Extract) سپس با نوشتن ۵ خط در فایل style.css آن را طوری کامل کنید که خروجی مانند تصویر زیر شود.