آموزشگاه فطرس

کار با بخش ها در المنتور 1

دسته بندی : آموزش المنتور

کار با بخش ها در المنتور 1

آموزش ویدئویی

آموزش متنی

در این جلسه از آموزش المنتور قصد داریم بخش ها یا section رو مورد بررسی قرار بدیم.
از ویرایش بخش یا سکشن میریم سراغ اولین سربرگ یعنی طرح بندی.

 

آموزش المنتور-کار با بخش ها در المنتور

 

بخش کشیده :
میتونیم از این طریق بخش درست شده رو تمام عرض کنیم.

(ممکن هست این بخش کشیده در بعضی نسخه ها در انتهای این بخش طرح بندی قرار گرفته باشد.)
عرض محتوا
جعبه ای :
میتونیم یک عرض دلخواه رو برای بخش ایجاد شده ی خودمون در نظر بگیریم.
تمام عرض :
محتوای ما تمام عرض رو بصورت خودکار در برمیگیره.
فاصله ی بین ستون ها :
در صورتی که دو یا چند ستون داشته باشیم ، میتونیم فاصله ی بین این ستون ها رو در اینجا تعیین کنیم.
برای این کار از مقادیر زیر میتونیم استفاده کنیم :
بدون فاصله ، باریک ، باز شده ، عریض و عریض تر.
هر کدوم از این گزینه هارو میتونید انتخاب کنید و تغییرات رو مشاهده کنید و مورد مناسب رو انتخاب کنید.
ارتفاع :
با استفاده از این گزینه میتونیم ارتفاع بخش خودمون رو بصورت دلخواه تعیین کنیم.
هم اندازه ی صفحه نمایش :
براساس صفحه نمایش ارتفاع بصورت خودکار تنظیم می شود.
کمترین ارتفاع :
با انتخاب این گزینه ما میتونیم یک ارتفاع دلخواه رو برای این بخش خودمون در نظر بگیریم.
موقعت ستون :
اگر ارتفاع بخش شما به اندازه ای باشه که بالا و پایین محتوای شما خالی بمونه میتونید این بخش رو تنظیماتش رو ببیند.
میتونید از بین گزینه های زیر یکی رو به دلخواه با توجه به مشاهده ی تغییرات انتخاب کنید.
کشیده ، بالا ، وسط ، پایین
تراز عمودی :
میتونید با گزینه های این بخش تراز عمودی رو در صورت وجود تعیین کنید.
بالا ، وسط ، پایین ، فاصله بینابینی ، فضای اطراف ، فضا یکنواخت.
سر ریز :
سر ریز یا overflow چیست ؟
برای درک مفهوم سر ریز به مثال زیر توجه کنید :
ما یک بخش داریم با یک ستون و یک محتوای تصویری.
حالا من میام و مارجین از بالای منفی به تصویر خودم میدم.
چه اتفاقی میفته ؟
تصویر من از قسمت بخش یا سکشن من جدا میشه و دیگه داخل بخش قرار نداره.
مثلا یک سوم تصویر من از قسمت بخش خارج میشه ، در این حالت تمام تصویر من نمایش داده میشه.
حتی قسمتی که از بخش ما خارج شده هم نمایش داده میشه.
حالا اگر من بیام و سر ریز رو از سربرگ طرح بندی بخش رو در حالت مخفی یا هیدن بذارم دیگه اون قسمت از تصویر ما که از بخش
خارج شد نمایش داده نمیشه.
فکر میکنم بصورت کامل با این مثال با مفهوم سر ریز آشنا شده باشید.
تگ html :
میتونید از این قسمت نوع تگ بخش خودتون رو هم انتخاب کنید.
این قسمت دارای گزینه های زیر هستش :
div , header , footer , main , article , section , aside , nav
حالا تگ هایی که بیشتر مورد استفاده قرار میگیرن رو خدمت شما توضیح میدم.
div :
یکی از تگ های پر استفاده ی html در طراحی سایت هستش که برای بلوک بندی ، ایجاد ساختار ، یک بخش استفاده می شود.
header :
همانطور که از اسمش پیداست برای عناصری که در سرصفحه یا هدر سایت قرار می گیرند استفاده می شوند.
footer :
همه ی سایت ها بخش پاورقی یا همان فوتر رو دارن.
برای ایجاد بخش فوتر از این نوع تگ ها استفاده می کنند.
nav :
از تگ ناوبری برای ایجاد انواع منوها در سایت استفاده میشه.
ساختار :

آموزش المنتور-کار با بخش ها در المنتور
از این بخش میتونید تعداد ستون های بخش رو مشاهده کنید.
همچنین نسبت ستون هارو هم میتونید از این طریق تغییر بدین.
مثلا یک ستون رو کوچکتر از ستون بغلی تنظیم کنید و…
خب دوستان عزیزم خسته نباشید ، تنظیمات سربرگ طرح بندی به پایان رسید.
انشالله در جلسه ی آینده بخش استایل رو مورد بررسی قرار میدیم.

نویسنده

نویسنده

میلاد پورزارعی دانش آموخته ی ممتاز رشته ی مهندسی نرم افزار ، طراح سایت ، متخصص سئو ، استراتژیست بازاریابی و فروش

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

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *