Layout وب‌سایت

از ویکی‌کد
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Css-menu.jpg
موارد آموزشی
۱خانه
۲مقدمه
۳شیوهٔ نوشتار
۴انتخابگرها
۵اضافه‌کردن CSS
۶نظرات
۷رنگ‌ها
۸پس‌زمینه‌ها
۹کادرها
۱۰حاشیه‌ها
۱۱Padding
۱۲ارتفاع/عرض
۱۳Box Model
۱۴Outline
۱۵متن
۱۶قلم‌ها
۱۷آیکن‌ها
۱۸لینک‌ها
۱۹لیست‌ها
۲۰جداول
۲۱ویژگی Display
۲۲ویژگی Max-Width
۲۳ویژگی Position
۲۴ویژگی Overflow
۲۵ویژگی 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 واکنش گرای وب‌سایت ساخته‌ایم، که با توجه به عرض صفحه نمایش بین حالت دو ستونه و حالت تمام عرض تغییر می‌کند:


منابع آموزشی