Layout وب‌سایت

Main Page Tutorial
موارد آموزشی
۱	خانه
۲	مقدمه
۳	شیوهٔ نوشتار
۴	انتخابگرها
۵	اضافه‌کردن CSS
۶	نظرات
۷	رنگ‌ها RGB HEX HSL
۸	پس‌زمینه‌ها رنگ پس‌زمینه‌ها تصویر پس‌زمینه تکرار پس‌زمینه پیوست در پس‌زمینه کوته‌شدهٔ پس‌زمینه
۹	کادرها عرض کادر رنگ کادر اطراف کادر کوته‌شدهٔ کادر کادر گرد شده
۱۰	حاشیه‌ها شکسته‌شدن حاشیه
۱۱	Padding
۱۲	ارتفاع/عرض
۱۳	Box Model
۱۴	Outline عرض Outline رنگ Outline کوته‌شدهٔ Outline Outline Offset
۱۵	متن رنگ متن آراستگی متن تبدیل‌کردن متن فاصله‌گذاری متن سایهٔ متن
۱۶	قلم‌ها خانواده قلم استایل قلم اندازهٔ قلم کوته‌شدهٔ قلم
۱۷	آیکن‌ها
۱۸	لینک‌ها
۱۹	لیست‌ها
۲۰	جداول
۲۱	ویژگی Display
۲۲	ویژگی Max-Width
۲۳	ویژگی Position
۲۴	ویژگی Overflow
۲۵	ویژگی Float ویژگی Clear مثال‌های Float
۲۶	مقدار Inline-block
۲۷	ترازکردن
۲۸	ترکیب کننده‌ها
۲۹	شبه کلاس
۳۰	شبه عنصر
۳۱	ویژگی Opacity
۳۲	نوار Navigation ناوبری ناوبری عمودی ناوبری افقی
۳۳	منو آبشاری
۳۴	گالری تصویر
۳۵	Image Sprites
۳۶	انتخاب‌گرهای خاصیت
۳۷	فرم‌ها
۳۸	شمارنده‌ها
۳۹	چیدمان وب‌سایت
۴۰	واحدها
۴۱	اولویت‌بندی
CSS پیشرفته
واکنش‌گرایی
Grid در CSS
مثال‌ها
مرجع‌ها

چیدمان (به انگلیسی: Layout) وب سایت

یک وب‌سایت اغلب به بخش‌های سر صفحه (به انگلیسی: Header)، منوها، محتوا و پاورقی (به انگلیسی: Footer) تقسیم می‌شود:

طراحی‌های گوناگونی از Layout برای استفاده وجود دارد. اما، ساختار بالا، یکی از رایج ترین‌ها است، و ما در این آموزش با آن بیشتر آشنا خواهیم شد.

Header

بخش سر صفحه معمولاً در بالای وب‌سایت (یا گوشه سمت راست پایین منوی navigation) قرار می‌گیرد. اغلب شامل یک لوگو یا نام وب‌سایت است:

نتیجه:

مثال

1 .header {
2   background-color: #F1F1F1;
3   text-align: center;
4   padding: 20px;
5 }

نتیجه:

مشاهدهٔ نتیجه

ناحیه Navigation

ناحیه navigation شامل لیستی از لینک‌ها برای کمک به بازدیدکنندگان برای جابه‌جایی در وب‌سایت است:

مثال

 1 /* The navbar container */
 2 .topnav {
 3   overflow: hidden;
 4   background-color: #333;
 5 }
 6 
 7 /* Navbar links */
 8 .topnav a {
 9   float: left;
10   display: block;
11   color: #f2f2f2;
12   text-align: center;
13   padding: 14px 16px;
14   text-decoration: none;
15 }
16 
17 /* Links - change color on hover */
18 .topnav a:hover {
19   background-color: #ddd;
20   color: black;
21 }

نتیجه:

مشاهدهٔ نتیجه

محتوا

چیدمان در این بخش، اغلب به کاربران نهایی بستگی دارد. رایج‌ترین نوع چیدمان یکی ( یا ترکیبی) از موارد زیر است:

• ۱ - ستونه (اغلب برای مرورگرهای موبایل استفاده می‌شود)
• ۲ - ستونه (اغلب برای تبلت‌ها و لب تاب‌ها استفاده می‌شود)
• چیدمان ۳ - ستونه (تنها برای رایانه‌های pc استفاده می‌شود)

یک چیدمان سه ستونه خواهیم ساخت، و آن را برای صفحه نمایش‌های کوچک به یک ستونه تبدیل خواهیم کرد:

مثال

 1 /* Create three equal columns that floats next to each other */
 2 .column {
 3   float: left;
 4   width: 33.33%;
 5 }
 6 
 7 /* Clear floats after the columns */
 8 .row:after {
 9   content: "";
10   display: table;
11   clear: both;
12 }
13 
14 /* Responsive layout - makes the three columns stack on top of each other instead of next to each other on smaller screens (600px wide or less) */
15 @media screen and (max-width: 600px) {
16   .column {
17     width: 100%;
18   }
19 }

نتیجه:

مشاهدهٔ نتیجه

نکته: برای ساخت یک چیدمان ۲ ستونه، عرض را به ۵۰٪ تغییر دهید. برای ساخت یک چیدمان ۴ ستونه، از ۲۵٪ استفاده کنید.

نکته: آیا می‌خواهید بدانید چگونه قوانین @media کار می‌کند؟ می توانید مطالب بیشتری را در این‌باره در فصل Media Querieها در CSS بخوانید.

نکته: یک روش جدیدتر برای ساختن Layout ستون‌ها، استفاده از Flexbox در CSS است، اما هنوز در Internet Explorer 10 و نسخه های قدیمی تر پشتیبانی نمی‌شود. اگر پشتیبانی از IE6-10 را نیاز دارید (همانند آنچه در بالا گفته شد) از floatها استفاده کنید.

برای یادگیری بیشتر در مورد مدل چیدمان جعبه انعطاف‌پذیر، فصل Flexible را مظالعه کنید.

ستون های نابرابر

محتوای اصلی بزرگترین و مهمترین بخش سایت است.

استفاده از عرض‌های غیریکسان برای ستون‌ها رایج است، بنابراین بیشتر فضا برای محتوای اصلی رزرو می‌شود.
محتوای جانبی (side content) (در صورت وجود) اغلب به عنوان یک ناحیهٔ navigation جایگزین یا برای مشخص کردن اطلاعات مربوط به محتوای اصلی استفاده می‌شود.
عرض را به هر مقداری که دوست دارید تغییر دهید، تنها به یاد داشته باشید که مجموع آنها در کل 100% باشد:

مثال

 1 .column {
 2   float: left;
 3 }
 4 
 5 /* Left and right column */
 6 .column.side {
 7   width: 25%;
 8 }
 9 
10 /* Middle column */
11 .column.middle {
12   width: 50%;
13 }
14 
15 /* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
16 @media screen and (max-width: 600px) {
17   .column.side, .column.middle {
18     width: 100%;
19   }
20 }

نتیجه:

مشاهدهٔ نتیجه

Footer (به فارسی: پاورقی)

Footer در پایین صفحه قرار می‌گیرد. اغلب شامل اطلاعاتی مانند کپی‌رایت و اطلاعات تماس است:

مثال

1 .footer {
2   background-color: #F1F1F1;
3   text-align: center;
4   padding: 10px;
5 }

نتیجه:

مشاهدهٔ نتیجه

چیدمان واکنش گرای وب‌سایت

با استفاده از برخی از کدهای CSS بالا، ما یک Layout واکنش گرای وب‌سایت ساخته‌ایم، که با توجه به عرض صفحه نمایش بین حالت دو ستونه و حالت تمام عرض تغییر می‌کند:

مشاهدهٔ نتیجه

صفحهٔ بعد»

«صفحهٔ قبل