X

X

X

CSS Website Layout । ওয়েবসাইট লেআউট


ওয়েবসাইট লেআউট

একটি ওয়েবসাইট বা ওয়েবপেজ দেখতে কেমন হবে, তাকে ওয়েবসাইট লেআউট বলে। সাধারণত কোনো ওয়েবসাইট header, menu, content এবং footer ইত্যাদিতে বিভক্ত হয়ে থাকে।

ইন্টারনেটে হাজার হাজার ওয়েবসাইট লেআউট রয়েছে। কিন্তু এই চ্যাপ্টারে উপরের লেআউটটি বর্ণনা করা হবে। আমাদের ওয়েবসাইটটির লেআউট মোটামুটি এটির মত।


Header

header সাধারণত প্রতিটি ওয়েবপেজের শুরুর দিকে থাকে। এটিতে একটি নেভিগেশন মেনু, লোগো, ওয়েবসাইটের নাম ইত্যাদি থাকে।

Code Example

body {
  margin: 0;
}

/* Style the header */
.header {
    background-color: #f1f1f1;
    padding: 20px;
    text-align: center;
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


Navigation Bar

ওয়েবাসইটের গুরুত্বপূর্ণ লিংক নিয়ে নেভিগেশন বার গঠিত হয়। এটি সাধারণত হেডার এর নিচে থাকে:

Code Example

* {
    box-sizing: border-box;
}

body {
  margin: 0;
}

/* Style the header */
.header {
    background-color: #f1f1f1;
    padding: 20px;
    text-align: center;
}

/* Style the top navigation bar */
.topnav {
    overflow: hidden;
    background-color: #333;
}

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

/* Change color on hover */
.topnav a:hover {
    background-color: #ddd;
    color: black;
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


Content

এক্ষেত্রে লেআউট সাধারণত ব্যবহারকারীর উপর নির্ভর করে বিভিন্নরকম হতে পারে। তবে সচরাচর ব্যবহৃত লেআউটিটি নিম্নরূপ হয়ে থাকে:

  • 1-column ( সাধারণত mobile browser -ইউজারের জন্য প্রযোজ্য)
  • 2-column (সাধারণত tablet ও laptop ইউজারের জন্য প্রযোজ্য)
  • 3-column layout (সাধারণত desktop ইউজারের জন্য প্রযোজ্য)

1-column:

2-column:

3-column:

এখন আমরা একটি 3-column layout তৈরি করবো এবং এটিকে ছোটো স্ক্রিণের জন্য 1-column layout এ রূপান্তর করবো।

উদাহরণ

/* 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 (max-width: 600px) {
.column {
width: 100%;
}
}

ফলাফল:

Column

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique.

Column

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique.

Column

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique.

Try it Yourself »

টিপস: 2-column layout তৈরি করার জন্য প্রস্থটিকে 50% এ সেট করুন। অনুরূপভাবে 4-column layout তৈরি করার জন্য প্রস্থের মান 25% সেটি করুন।

টিপস: @media rule কিভাবে কাজ করে, এটি জানতে চান? তবে CSS3 Media Queries chapter টি পড়ুন।


অসমান Column

main content হচ্ছে সবচেয়ে বড় দৈর্ঘ্য বিশিষ্ট অংশ এবং এটি ওয়েবসাইটের সবচেয়ে গুরুত্বপূর্ণ অংশ।

উদহারণ

.column {
float: left;
}

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

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

ফলাফল:

Side

Lorem ipsum dolor sit amet, consectetur adipiscing elit…

Main Content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.

Side

Lorem ipsum dolor sit amet, consectetur adipiscing elit…

নিজে নিজে চেষ্টা করুণ »


Footer

এটি পেজের একবারে নিচের দিকে উপস্থাপিত হয়। এটি সাধারণত কপিরাইট, যোগাযোগের ঠিকানা ইত্যাদি ধারণ করে থাকে।

উদাহরণ

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

ফলাফল:

Footer

নিজে নিজে চেষ্টা করুণ »