# صفحه‌آرایی (Layout)
# مقدمه
به چیدمان و سازمان‌دهی المنت‌ها در صفحه وب، صفحه‌آرایی یا Layout گفته میشه. مثلا اینکه صفحه وب شامل یک ستون ثابت در سمت راست باشه و یا Header و Footer داشته باشه. یا اینکه در حالت‌های مختلف، المنت‌ها چطور نمایش داده بشن و چطور کنار هم قرار بگیرن. برای پیاده‌سازی یک Layout، معمولا به صفحه از بیرون به داخل نگاه می‌کنیم.
برای مثال: با شروع از بیرونی‌ترین تقسیم‌بندی، فرض می‌کنیم یک قسمت ثابت در بالای صفحه داریم و ۳ ستون با عرض‌های مختلف در داخل صفحه. بعد در هر قسمت جزییات مرحله بعدی رو مشخص می‌کنیم. و این کار رو تا جایی ادامه می‌دیم که تمام جزییات داخل صفحه رو شامل بشه. برای نمونه اینجا رو ببینید.
برای تقسیم‌بندی صفحه گاهی از یک سری Container Element استفاده می‌کنیم. در گذشته از تگ <div> به عنوان یک Generic Container استفاده می‌کردیم ولی امروزه در مواردی که کاربرد اون صحیح باشه، ممکنه از تگ‌های جدید مثل <main>, <section>, <article> و ... در کنار <div> استفاده کنیم و بهشون استایل بدیم تا صفحه مورد نظرمون رو بسازیم.
اما پیش از شروع صفحه‌آرایی خوبه که استایل‌هایی که مرورگرهای وب بطور پیش‌فرض اعمال می‌کنن رو ریست یا نرمالایز کنیم.
# CSS Reset / Normalizing
در بخش قبلی در Cascading Order دیدیم که مرورگرهای وب به المنت‌ها استایل پیش‌فرض اعمال می‌کنن. برای اطمینان از اینکه صفحات وبی که ایجاد می‌کنیم روی تمام مرورگر‌ها به شکل یکسان نمایش داده بشه، در گذشته از روشی به اسم CSS Reset استفاده می‌شد. تاریخچه CSS Reset مفصله و اگر خواستی در اینجا می‌تونید درباره‌اش بخونی.
با گذشت زمان، روش‌های دیگه‌ای برای این نیاز ارائه شدن. یکی از اونها Normalize.css بود. تفاوت این روش در اینه که در Reset تمام استایل‌های پیش‌فرض تقریبا از بین می‌ره و توسعه‌دهنده باید به همه‌ی المنت‌ها استایل بده (مثلا لیست‌ها دیگه شامل bullet point نبودن) ولی در Normalize استایل‌های مشخصی به المنت‌ها داده میشه که ماهیت اونها رو نمایش بده ولی از شیوه نمایش یکسان اونها هم اطمینان حاصل بشه.
معمولا این استایل‌ها رو پیش از استایل‌های اصلی صفحه قرار می‌دن تا در نقطه شروع، استایل المنت‌ها یک وضعیت مشخص برسه. برای آشنایی این لینک رو بخون.
# روش‌های صفحه‌آرایی
- در گذشته از
floatبرای ایجاد ستون‌ها استفاده می‌شد در حالی که برای این کار ایجاد نشده بود و مشکلاتی داشت (به بخش قبلی دوره مراجعه کن). اما در هر صورت بهتر از استفاده از<table>برای صفحه‌آرایی بود 😃 - همچنان در گذشته (و شاید حال، در مواردی) از
display: inline-blockبرای قرار دادن ستون‌ها در کنار هم استفاده می‌شد. اما این روش هم مشکلاتی داشت که می‌تونی اینجا درباره‌اش بخونی. - از
positionبرای قراردادن المنت‌ها نسبت به جایی از صفحه نمایش یا سایر المنت‌ها استفاده میشه. - امروزه برای ایجاد سطر و ستون‌ها از Flexbox و Grid استفاده میشه.
برای آشنایی بیشتر اینجا رو ببین. همچنین این لینک از MDN که در بخش CSS مرور کردی، اطلاعات کامل‌تر و به‌روزتری داره. برای آشنایی با Flexbox و Grid می‌تونی از این لینک‌های جالب استفاده کنی:
# طراحی وب واکنش‌گرا (Responsive Web Design)
طراحی وب واکنش‌گرا یا پاسخگو—که ترجمه شدهٔ عبارت Responsive Web Design (به اختصار RWD) است—یک روش پیاده‌سازی صفحات وب برای بهینه بودن در ابعاد مختلف صفحات نمایشگر مثل دسکتاپ و تبلت و موبایل و... است.
قبل از این روش و حتی امروزه ممکنه بنا به دلایلی برنامه‌نویسان وب نسخه‌های متفاوتی از صفحه وب رو ایجاد کنن و با تکنیک Dynamic Serving یا با آدرس‌های متفاوت، به مخاطب نمایش بدن.
این روش (با اینکه امکان اون از مدت‌ها پیش وجود داشت) در سال ۲۰۱۰ توسط Ethan Marcotte معرفی و بعد از مدتی فراگیر شد.
برای مطالعه به این لینک‌ها مراجعه کن:
- Responsive Web Design - What It Is And How To Use It
- Responsive Design on MDN
- Responsive Design on Google Developers
# یک قدم فراتر
با مراجعه به این اسلاید و لینک‌های داخل اون، موضوعات زیر رو مطالعه کن:
- Containing Block and Initial Containing Block
- Stacking Context
- Display, Positioning & Float Relationship
# تمرین
- ظاهر صفحه رو به شکل زیر طراحی کن.
این تمرین رو طوری انجام بده که ستونِ سمت راست تمام ارتفاع صفحه را بگیرد و در صفحه ثابت باشد و با اسکرول عمودی جابجا نشود. افزایش محتوا در ستون سمت چپ باعث اسکرول شدن صفحه می‌شود.
طرح شکل زیر رو بدون استفاده از framework/libraryهای آماده بساز:
- ارتفاع HEADER برابر 60px باشد.
- ستون سمت راست با عرض 220px.
- ستون سمت چپ باقی عرض باقی مانده در صفحه را بگیرد.
- ببین ستون چپ و راست 30px فضای خالی باشد و هر دو ستون از HEADER برابر 30px فاصله داشته باشند.
- ستون سمت راست (aside) از زیر HEADER شروع شده و به فوتر رسیده باشد.
- ستون سمت چپ با افزایش محتوای درونش، باعث ایجاد اسکرول بار عمودی در صفحه شود.
تمرین قبل را طوری انجام بده که عرض HEADER و بخش‌های زیرین برابر تمام عرض مرورگر باشد اما در هر صورت از ۶۰۰px کمتر نشود.
در تمرین قبل، ستون سمت راست (ASIDE) رو به ۲ سطر تقسیم کن. سطر اول رو A و سطر دوم رو B نام‌گذاری می‌کنیم. کاری کن که در حالت موبایل (برای مثال نمایشگر با عرض کمتر مساوی ۷۶۷ پیکسل)، همه قسمت‌ها زیر هم قرار بگیرن، به این ترتیب که در ابتدا HEADER و بعد A و بعد ستون CONTENT و بعد B و در انتها FOOTER قرار داشته باشه.