سرفصل‌های پست
مفهوم layout
به طور خلاصه، layout به ساختار و ترتیب محتوا در صفحه وب سایت اطلاق میشه.
این مفهوم، تنها مختص به CSS و آموزش طراحی وب سایت نیست، بلکه یک مفهوم عموما طراحی محور محسوب میشه که تجربه کاربری (UX) و رابط کاربری (UI) در اون نقش مهمی رو ایفا می‌کنن و در نهایت، طراحی و پیاده سازی اون، توسط HTML، CSS و جاوا اسکریپت انجام می‌گیره.
هدف از داشتن یک layout مناسب برای وب سایت، هدایت کاربر به سمت محتوای درست و مورد نظر خودمونه.
قسمت های مختلف یک صفحه وب سایت
یک وب سایت، می‌تونه شامل قسمت های مختلفی باشه.
عمومی ترین ساختار و قسمت های یک وب سایت، به فرم زیر تعریف میشه:
اما هر کدوم از این قسمت ها چی هستن و چه کاری انجام می‌دن؟
header
این قسمت، نقش بسیار بزرگی رو در وب سایت ما ایفا می‌کنه و کوچیک ترین نقص در اون، می‌تونه کاربر وب سایت رو کامل به سردرگمی بندازه.
عمومی ترین وظیفه header، در بر داشتن منو و لوگوی وب سایت ماست.
منو یا همون navbar، کاربر رو علاوه بر آشنا کردن با قسمت های مختلف وب سایت ما، به قسمت های مختلف راهنمایی می‌کنه. بدین منظور لازمه که در navbar گزینه های مناسبی رو داشته باشیم.
ترتیب قرار گرفتن لوگو و navbar در وب سایت ما، می‌تونه به صورت عمودی و یا افقی باشه.
این موضوع به طراحی کلی وب سایت ما بستگی داره.
در مورد navbar ها و منو ها، می‌تونین به صورت کامل تر تو مقاله منو ها در CSS میزفا مطالعه کنین.
main
وظیفه این قسمت، در بر گیری محتوای اصلی یک وب سایته.
این محتوا می‌تونن شامل متن یک پست، معرفی محصولات، یک فیلم و غیره باشن.
این قسمت، محتوایی رو معرفی می‌کنه که دارای اولویت کمتری نسبت به محتوا main ما هستن.
برای مثال، معرفی محتوای قدیمی تر یا محتوای پیشنهاد شده توسط وب سایت، بر عهده ی این قسمته.
وب سایت لزوما شامل یک sidebar نیست، و می‌تونه تعداد بیشتری از sidebar ها رو مطابق با طراحی اصلی وب سایت در بر بگیره.
footer
در این قسمت، اطلاعاتی نظیر تماس با کارشناسان وب سایت و هشدار های کپی رایت قرار می‌گیره.
روش های طبقه بندی محتوا
تا اینجا فهمیدیم که یک وب سایت از چه قسمت هایی تشکیل میشه.
هدف بعدی ما، آشنایی با روش هاییه که برای طبقه بندی و توسعه ساختار یک وب سایت به کار گرفته می‌شن.
سه روش اصلی که در اینجا بررسی می‌شن عبارتند از:
- float یا محتوای شناور
- flexbox
- سیستم grid
روش float
این روش، عمومی ترین و ساده ترین روش برای توسعه ساختار یک وب سایت محسوب میشه.
در این روش، از خاصیت float استفاده می‌کنیم.
وظیفه این خاصیت، شناور کردن عناصر به سمت چپ و یا راست viewport ماست.
برای مثال، به منظور شناور کردن یک عنصر div در راستا های مورد نظرمون، از کد های زیر استفاده می‌کنیم.
/* --- شناور شدن به چپ --- */
div{
float: left;
}
/* --- شناور شدن به راست --- */
div{
float: right;
}
این روش رو به صورت کامل می‌تونین تو مقاله آموزش float میزفا مطالعه کنین.
روش flexbox
روش مورد نظر، سنگین تر و پیچیده تر از روش قبلیه. به همون تناسب، می‌تونه ساختار های پیچیده تری رو توسعه بده.
فرض کنین که می‌خوایم عناصر موجود در یک عنصر div رو به کمک این روش کنار هم بچینیم.
کافیه دستور زیر رو به عنصر div اختصاص بدیم و سپس با استفاده از خاصیت های دیگه ی flexbox، چیدمان عناصر فرزند رو مشخص کنیم:
div{
display: flex;
}
برای مطالعه کامل این روش، می‌تونین به مقاله آموزش flexbox میزفا مراجعه کنین.
اگه جایی از مطالب به سوال و یا ابهامی برخوردین، حتما تو قسمت نظرات بپرسین که کمکتون کنیم 🙂
روش سیستم grid
این روش، مثل روش flexbox عمل می‌کنه. با یک سری تفاوت های کوچیک، مثل دو بعدی بودن.
به این معنا که می‌تونه عناصر رو در دو جهت مرتب سازی کنه.
برای استفاده از این روش، کافیه به عنصر پدر عناصر مورد نظرمون، دستور زیر رو اختصاص بدیم و سپس با استفاده از خاصیت های دیگه ی grid، چیدمان این عناصر رو تعیین کنیم.
div{
display: grid;
}
این روش رو می‌تونین تو مقاله آموزش grid میزفا مطالعه کنین.
پایان ترم
[box type=”info” class=”question-from-users” width=””]سوال:
چرا نمی‌تونیم گزینه های هدایتی یک وب سایت رو (مثل دسته بندی محصولات، مقاله های بیشتر و …) به جای header داخل footer قرار بدیم؟
به ایمیل کسانی که پاسخ درست و کامل رو در نظرات بگن ۱۰ هزارتومان در پنل کاربری آکادمی میزفا حسابشون شارژ میشه. (البته باید در آکادمی میزفا ثبت‌نام کنید تا بتونید از این امتیاز استفاده کنید.)
[/box]نتیجه گیری
خب به پایان این فصل کوتاه در آموزش CSS می‌رسیم.
تو این فصل متوجه شدیم که یک وب سایت از چه قسمت هایی تشکیل میشه، و توسط چه روش هایی می‌تونیم این قسمت ها رو در کنار هم بچینیم.
امیدوارم که از این فصل بهره کافی رو برده باشید 🙂
اگه نکته‌ای، پیشنهادی و یا انتقادی در رابطه با نوشته ها دارین، خیلی خیلی خوشحال می‌شیم که تو قسمت دیدگاه های پایگاه دانش میزفا اون رو ارسال کنین.
مدیر محتوا: علی اسمعیلی
10 پاسخ
سلام عرض ادب
دوره عالی بود
خیلی نکات برای من مرور شد و چیز های جدید یادگرفتم
ممنون از سایت عالی
خلاصه دمتون گرم
سلام کریم
ممنونم از حضور شما
سلام خیلی ممنون از دورتون واقعا کامل بود فقط یه web kit ها بود که نمیدونم مربوط به css میشه یا نه رو نگفتید ولی واقعا عالی بود ممنون فقط یه باگ هم که هست اینکه من دیدم مقاله شماره 80 سی اس اس در مقالات بود ولی تو سر فصل ها و اون کنار مقاله هم نبود
سلام متین
ممنونیم از حضورت و همینطور دقت بالات.
مقاله ۸۰ اضافه شد.
ممنون از اموزشتون فوق العاده این امیدوارم موفق باشید
سلام محمدرضا. نظراتی مثل نظر تو خیلی بهمون انرژی میده، خوشحالیم آموزشا برات مفید بودن ?
خواستم ازتون تشکر کنم از اول مقاله تا اخرش رو خوندم و خیلی کمکم کرد واقعا خسته نباشید و سلامت باشید
سلام امیرعلی. خیلی خوشحالیم که این مقاله برات مفید بوده?
موفق و پایدار باشی
چون ممکنه main وب سایت طولانی و دارای ارتفاع زیاد باشه و خواننده حوصله نکنه تا انتهای صفحه بره پایین که به گزینه های هدایتی دسترسی پیدا کنه و از وب سایت ما خارج میشه
سلام مهدی. کاملا درسته، مرسی از پاسخت 🙂