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

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

ওয়েবসাইটটি সাধারণত হেডার, মেনু, কনটেন্ট এবং ফুটার দ্বারা বিভক্ত হয়:

অনেক বিভিন্ন লেআউট ডিজাইন পাওয়া যায়।কিন্তু, উপরোক্ত স্ট্রাকচারটি সবচেয়ে সাধারণ স্ট্রাকচারগুলির মধ্যে একটি, আমরা এই টিউটোরিয়ালে তা গভীরভাবে অধ্যয়ন করব

হেডার

হেডার (header) সাধারণত ওয়েবসাইটের শীর্ষে (বা শীর্ষ নেভিগেশন মেনুর নিচে) অবস্থিত।এটি সাধারণত লগো (logo) বা ওয়েবসাইটের নাম ধারণ করে:

ইনস্ট্যান্স

.header {
  ব্যাকগ্রাউন্ড-কালার: #F1F1F1;
  টেক্সট-অ্যালাইন: সেন্টার;
  padding: 20px;
{}

ফলাফল:

হেডার

স্বয়ং প্রয়োগ করুন

নেভিগেশন বার

নেভিগেশন বারটি লিঙ্ক তালিকা ধারণ করে, যাতে ব্যবহারকারীদের আপনার ওয়েবসাইট ব্রাউজ করার জন্য সহায়তা করতে পারে:

ইনস্ট্যান্স

/* নেভিগেশন বার কন্টেনার */
.topnav {
  overflow: hidden;
  background-color: #333;
{}
/* নেভিগেশন বার লিঙ্ক */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  টেক্সট-অ্যালাইন: সেন্টার;
  padding: 14px 16px;
  text-decoration: none;
{}
/* লিঙ্ক - হভার হলে রঙ পরিবর্তন */
.topnav a:hover {
  background-color: #ddd;
  color: black;
{}

ফলাফল:

স্বয়ং প্রয়োগ করুন

কনটেন্ট

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

  • 1-স্তম্ভলেআউট (সাধারণত মোবাইল ব্রাউজারের জন্য ব্যবহৃত)
  • 2-স্তম্ভলেআউট (সাধারণত প্যাডলেট ও ল্যাপটপের জন্য ব্যবহৃত)
  • 3-স্তম্ভলেআউট (সাধারণত ডেস্কটপের জন্য ব্যবহৃত)

1-স্তম্ভ

2-স্তম্ভ

3-স্তম্ভ

আমরা 3 স্তম্ভ লেআউট তৈরি করব, এবং ছোট স্ক্রিনের জন্য তা 1 স্তম্ভ লেআউটে পরিবর্তন করব:

ইনস্ট্যান্স

/* তিনটি সমান স্তম্ভ তৈরি করুন, যারা একে অপরের সাথে ফ্লটিং করে */
.column {
  float: left;
  width: 33.33%;
{}
/* কলামের পরে ফ্লটিং সংক্রান্ত সমস্যা নিরসন */
.row:after {
  content: "";
  display: table;
  clear: both;
{}
/* রেসপনসিভ লেআউট - তিনটি স্তম্ভকে স্ট্যাক করুন, না পারালোক করুন, ছোট স্ক্রিন (প্রস্থ 600 পিক্সেল ও তার কম) */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  {}
{}

ফলাফল:

পূর্ণাংশীয় ওয়েবসাইট টেকনোলজি রেফারেন্স ম্যানুয়াল

আমাদের রেফারেন্স ম্যানুয়াল ওয়েবসাইট টেকনোলজির সবকিছু দিক সম্পর্কে আছে。

এটির মধ্যে রয়েছে W3C স্ট্যান্ডার্ড টেকনোলজি: HTML, CSS, XML। এছাড়াও, JavaScript, PHP, SQL মতো অন্যান্য টেকনোলজি রয়েছে。

অনলাইন ইনস্ট্যান্স টেস্ট টুল

在 CodeW3C.com，我们提供上千个实例。

আমাদের অনলাইন এডিটর ব্যবহার করে, আপনি এই ইনস্ট্যান্সগুলি সম্পাদন করতে পারবেন এবং কোডকে পরীক্ষা করতে পারবেন。

দ্রুত ও সুলভ শিক্ষামূলক পদ্ধতি

এক ইঞ্চি সময়কে এক ইঞ্চি সোনা বলা হয়, তাই, আমরা আপনাকে দ্রুত ও সুলভ শিক্ষামূলক মাত্রাকে প্রদান করি。

এখানে, আপনি একটি সুলভ ও সুবিধাজনক মোডে আপনার প্রয়োজনীয় কোনও জ্ঞান পাবেন

স্বয়ং প্রয়োগ করুন

টিপ:2 স্তম্ভ লেআউট তৈরি করতে, প্রস্থ 50% করেন। 4 স্তম্ভ লেআউট তৈরি করতে, 25% ব্যবহার করুন。

টিপ:আপনি কি @media রুল কিভাবে কাজ করে জানতে চান? আমাদের CSS মিডিয়া কোয়ালিফাইয়ার এই চাপটিতে আরও বিস্তারিত জানতে এখানে পড়ুন

টিপ:কলাম লেআউট তৈরির একটি আরও আধুনিক পদ্ধতি হল CSS Flexbox। কিন্তু Internet Explorer 10 ও তার আগের সংস্করণগুলি তা সমর্থন করে না। IE6-10 সমর্থন চাইলে, ফ্লটিং (উপরে দেখানোর মতো) ব্যবহার করুন。

ফ্লেক্সিবল বক্স লেআউট মডিউলের বিষয়ে আরও বিস্তারিত জানতে আমাদের CSS ফ্লেক্সবক্স শিক্ষাদীপিকা

বৈচিত্র্যপূর্ণ স্তম্ভ

মূল কনটেন্ট (main content) আপনার ওয়েবসাইটে সবচেয়ে বড় ও মূল্যবান অংশ

কলামগুলির প্রস্থ অন্যত্র হতে সাধারণত দেখা যায়, কারণ বেশিরভাগ জায়গা মূল কনটেন্টের জন্য রাখা হয়। সহযোগী কনটেন্ট (যদি থাকে) সাধারণত বিকল্প নেভিগেশন বা মূল কনটেন্টের সঙ্গে সংযুক্ত তথ্য হিসাবে ব্যবহৃত হয়। আপনি যেকোনোভাবে প্রস্থ পরিবর্তন করতে পারেন, কিন্তু মনে রাখুন যে তার সমষ্টি 100% হতে হবে:

ইনস্ট্যান্স

.column {
  float: left;
{}
/* ডান ও বাম স্তম্ভ */
.column.side {
  width: 25%;
{}
/* মিডল কলাম */
.column.middle {
  width: 50%;
{}
/* রেসপনসিভ লেআউট - তিনটি স্তম্ভকে স্ট্যাক করুন, না পারালোক করুন */
@media screen and (max-width: 600px) {
  .column.side, .column.middle {
    width: 100%;
  {}
{}

ফলাফল:

পূর্ণাংশীয় ওয়েবসাইট টেকনোলজি রেফারেন্স ম্যানুয়াল

আমাদের রেফারেন্স ম্যানুয়াল ওয়েবসাইট টেকনোলজির সবকিছু দিক সম্পর্কে আছে。

এটির মধ্যে রয়েছে W3C স্ট্যান্ডার্ড টেকনোলজি: HTML, CSS, XML। এছাড়াও, JavaScript, PHP, SQL মতো অন্যান্য টেকনোলজি রয়েছে。

অনলাইন ইনস্ট্যান্স টেস্ট টুল

在 CodeW3C.com，我们提供上千个实例。

আমাদের অনলাইন এডিটর ব্যবহার করে, আপনি এই ইনস্ট্যান্সগুলি সম্পাদন করতে পারবেন এবং কোডকে পরীক্ষা করতে পারবেন。

দ্রুত ও সুলভ শিক্ষামূলক পদ্ধতি

এক ইঞ্চি সময়কে এক ইঞ্চি সোনা বলা হয়, তাই, আমরা আপনাকে দ্রুত ও সুলভ শিক্ষামূলক মাত্রাকে প্রদান করি。

এখানে, আপনি একটি সুলভ ও সুবিধাজনক মোডে আপনার প্রয়োজনীয় কোনও জ্ঞান পাবেন

স্বয়ং প্রয়োগ করুন

ফুটার

ফুটার পৃষ্ঠার নিচে অবস্থিত।এটি সাধারণত কপিরাইট এবং যোগাযোগের তথ্যের মতো তথ্য ধারণ করে:

ইনস্ট্যান্স

.footer {
  ব্যাকগ্রাউন্ড-কালার: #F1F1F1;
  টেক্সট-অ্যালাইন: সেন্টার;
  প্যাডিং: 10পিক্সেল;
{}

ফলাফল:

ফুটার

স্বয়ং প্রয়োগ করুন

রেসপনসিভ ওয়েবসাইট লেয়াউট

উপরের সিস্টেমের CSS কোডটি ব্যবহার করে, আমরা একটি অদলবর্তী ওয়েবসাইট লেয়াউট তৈরি করেছি যা স্ক্রিন প্রস্থ অনুযায়ী দুই স্তম্ভ এবং পূর্ণ প্রস্থ স্তম্ভের মধ্যে পরিবর্তন করে:

স্বয়ং প্রয়োগ করুন