آموزش چیدمان وب سایت Website Layout در css

بازدید: 625 بازدید
آموزش چیدمان وب سایت

چیدمان وب سایت Website Layout ، به عبارتی اصلی ترین بخش یک وب سایت است.

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

اما باید بگوییم که این تصور اشتباه است.

طراحان وب سایت ها ، صفحات وب سایت را به بخش های مختلفی تقسیم می کنند. و بعد شروع به کار روی هر قسمت می کنند.

این کار به طراحان اجازه می دهد کنترل کامل تری رو صفحه و چیدمان عناصر داخل آن داشته باشند.

در آموزش امروز قصد داریم با این چیدمان آشنا شویم.

همراه ما باشید.

با سلام خدمت شما همراهان همیشگی سایت پرنیان طرح

چیدمان وب سایت Website Layout ، به عبارتی اصلی ترین بخش یک وب سایت است.

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

اما باید بگوییم که این تصور اشتباه است.

طراحان وب سایت ها ، صفحات وب سایت را به بخش های مختلفی تقسیم می کنند. و بعد شروع به کار روی هر قسمت می کنند.

این کار به طراحان اجازه می دهد کنترل کامل تری رو صفحه و چیدمان عناصر داخل آن داشته باشند.

در آموزش امروز قصد داریم با این چیدمان آشنا شویم.

همراه ما باشید.

چیدمان وب سایت

Website Layout

همانطور که در مقدمه گفته شد، طراحان سایت، معمولا وب سایت را به بخش های مختلفی تقسیم می کنند. و سپس با کنترل بیشتری روی این بخش های مختلف کار می کنند.

یک وب سایت اصولا به بخش های زیر تقسیم می شود:

  • header
  • menus
  • content
  • footer

چندین طرح مختلف برای انتخاب طراحی یک فرم وجود دارد.

به هر حال، ساختاری که در بالا گفته شده است، معمول ترین نوع ساختار وب است که استفاده می شود.

در این آموزش میخواهیم نگاه دقیق تری به این ساختار وب داشته باشیم.

Header

یک header ، همانطور که از نام آن پیداست ، در بالاترین بخش یک وب سایت قرار می گیرد.

و یا دقیقا زیر نوار ناوبری که در بالای صفحه قرار داده شده است.

header معمولا لوگو و یا نام سایت را در خود نگه می دارد.

به مثال زیر توجه کنید:

[php]
.header {
background-color: #F1F1F1;
text-align: center;
padding: 20px;
}
[/php]
نتیجه را ببینید.

نوارناوبری

یک نوارناوبری، شامل لیستی از لینک ها است. این بخش، به کاربران سایت کمک می کند، تا یک نگاه کلی به سایت داشته باشند. یعنی می توانند از طریق لینک های موجود در این بخش ، سایت را مرور کنند.

به مثال زیر دقت کنید:

[php]
/* The navbar container */
.topnav {
overflow: hidden;
background-color: #333;
}

/* Navbar links */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

/* Links – change color on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
[/php]

نتیجه به شکل زیر خواهد بود.

نمونه نوار ناوبری

محتوا

چیدمان وب سایت، در این بخش، بستگی به کاربران هدف دارد.

رایج ترین چیدمان یکی از نمونه های زیر (یا مخلوطی از چندنمونه زیر) می باشد.

تک ستون: معمولا برای مرورگرهای موبایل استفاده می شود.

دو ستون : معمولا برای تبلت ها و لپ تاپ ها استفاده می شود.

سه ستون : تنها برای دسک تاپ کامپیوترها استفاده می شود.

 

ما برای درک بیشتر این موضوع یک چیدمان سه ستونی ایجاد می کنیم.و آن را به طرح تک ستونی در صفحاتی که سایز کوچکتری دارند، تغییر سایز می دهیم.

[php]
/* Create three equal columns that floats next to each other */
.column {
float: left;
width: 33.33%;
}

/* Clear floats after the columns */
.row:after {
content: “”;
display: table;
clear: both;
}

/* 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) */
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}
[/php]

نتیجه به شکل زیر خواهد بود:

 

نمایش ستون ها در چیدمان وب سایت

 

 نکته1 ! برای ایجاد یک چیدمان 2ستونی، عرض را به 50% و برای ایجاد چیدمان 4ستونی، انرا به 25% تغییر دهید.

نکته 2 ! برای ایجاد یک چیدمان مدرن تر برای ستون ها ، می توانید از css flexbox استفاده کنید. ام باید توجه داشته باشید که این ویژگی در IE10 و نسخه های قدیمی تر آن پشتیبانی نمی شود. اگر به پشتیبانی IE6-10 نیاز دارید (مطابق مثال بالا) از FLOATS استفاده کنید.

برای مطالعه بیشتر و داشتن اطلاات بیشتر در مورد css flexbox می توانید به این لینک مراجعه کنید.

ستون های نامساوی

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

این روش برای ستون هایی که اندازه عرض آنها با هم برابر نیست معمول است. از محتوای کناری(در صورت وجود) معمولا به عنوان یک نوارناوبری جایگزین و یا برای مشخص کردن اطلاعاتی که به محتوای اصلی مربوط هستند، استفاده می شود.

عرض را هر طور که مایل هستید تغییر دهید. فقط به یاد داشته باشید . که مجموع عرض تمام ستون های شما باید به 100% برسد.

به مثال زیر دقت کنید:

[php]
.column {
float: left;
}

/* Left and right column */
.column.side {
width: 25%;
}

/* Middle column */
.column.middle {
width: 50%;
}

/* Responsive layout – makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.column.side, .column.middle {
width: 100%;
}
}
[/php]
نتیجه مانند زیر خواهد بود.

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

پاصفحه   footer

پاصفحه footer همانطور که از نام آن پیداست در پایین صفحه سایت قرار می گیرد.

این بخش معمولا شامل اطلاعاتی از قبیل اطلاعات تامس، قوانین کپی راست و … می باشد.

به مثال زیر دقت کنید.

[php]
.footer {
background-color: #F1F1F1;
text-align: center;
padding: 10px;
}
[/php]

چیدمان صفحات به صورت انعطاف پذیر Responsive

با استفاده از بعضی از کدها در مثال های بالا، ما طرح یک وب سایت انعطاف پذیر را ساخته ایم ، که بسته به عرض صفحه نمایش، بین دو ستونی، و ستون های با عرض کامل، تغییر سایز می دهد.

میتواندی نمونه را از این لینک به همراه کدها مشاهده کنید.

دسته بندی آموزش css
اشتراک گذاری
مقالات مرتبط

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

سبد خرید

هیچ محصولی در سبد خرید نیست.