একটি ডিভ-ভিত্তিক ওয়েবসাইটের খুব বেসিক: 7 টি ধাপ

2024 লেখক: John Day | [email protected]. সর্বশেষ পরিবর্তিত: 2024-01-30 08:04

এই নির্দেশাবলী আপনাকে ডিভের সাথে একটি ওয়েবসাইট কীভাবে তৈরি করতে হবে তার মূল বিষয়গুলি দেখাবে। কারণ লেআউটের জন্য ব্যবহৃত টেবিলগুলো মন্দ!: এই নির্দেশনাটি বুঝতে, আপনাকে প্রাথমিক HTML এবং CSS জানতে হবে। যদি আপনি কিছু বুঝতে না পারেন, তাহলে নির্দ্বিধায় জিজ্ঞাসা করুন আমার ব্যক্তিগত হোমপেজেও এই ধরনের ডিভ কাঠামো ব্যবহার করা হয়েছে।

ধাপ 1: বেসিক ফাইল তৈরি করুন

প্রথমে আপনার html ফাইল তৈরি করুন। আমরা এতে খুব বেসিক যুক্ত করব। এখন CSS ফাইল খালি থাকবে। আপনি নিজেই নামটি চয়ন করতে পারেন। আপনার CSS ফাইলটি.css হিসাবে সংরক্ষণ করতে হবে। এইচটিএমএল ফাইলে উল্লিখিত একই নামটি নিশ্চিত করুন। এই ক্ষেত্রে "style.css"। আমাদের ব্রাউজারে প্রিভিউ করার সময় আমাদের কাছে এখন একটি সাধারণ খালি HTML পৃষ্ঠা আছে।

ধাপ 2: মৌলিক রং, ফন্টের জন্য বডি ট্যাগ সম্পাদনা করুন,…

আমরা html ফাইলটি যেমন আছে তেমন রেখে দেব, এবং শুধুমাত্র css ফাইলটি সম্পাদনা করব। আপনার css ফাইলে নিম্নলিখিত কোড যোগ করুন: body {background: #444444; ফন্ট-ফ্যামিলি: ভারদানা, এরিয়াল, সান-সেরিফ; রঙ: #444444; ফন্ট সাইজ: 12px; margin: 0px;} এই বিট কোড দিয়ে আমরা বডি ট্যাগের সকল প্রপার্টি নির্ধারণ করব। যেহেতু সমস্ত বিষয়বস্তু বডি ট্যাগে রয়েছে, এই সেটিংসগুলি পুরো পৃষ্ঠাকে প্রভাবিত করবে। যদি আমাদের ওয়েবসাইট দেখার জন্য ব্যবহৃত কম্পিউটারে "verdana" ফন্ট না থাকে, তাহলে এটি "arial" ফন্টে আমাদের সাইট প্রদর্শন করবে। আপনি তালিকায় আরো ফন্ট যোগ করতে পারেন। "সান-সেরিফ" হল জেনেরিক টাইপ যা ব্যবহার করা হবে যখন আপনার দেওয়া কোন ফন্ট পাওয়া যাবে না। ফন্ট সাইজ (ফন্ট-সাইজ) 12 পিক্সেলে সেট করা হয়েছে। এটি একটি পরম মান। আপনি যদি অন্যান্য ফন্ট-সাইজ সম্পাদনা করতে চান (যেমন হেডার, অনুচ্ছেদ, মেনু আইটেম, …) আপনি "px" এর পরিবর্তে আপেক্ষিক একক "em" ব্যবহার করতে পারেন। এইভাবে, যদি আপনি আপনার ওয়েবসাইটের আকার পরিবর্তন করতে চান, তাহলে আপনাকে শুধুমাত্র বডি ফন্ট সাইজ পরিবর্তন করতে হবে। সাইটটি উইন্ডোর শীর্ষে থাকবে তা নিশ্চিত করার জন্য এটি করা হয়েছে।

ধাপ 3: শিরোনাম এবং সামগ্রী সহ একটি ধারক যুক্ত করা

আমরা এখন ধারক যোগ করব। এটি কেবল একটি কেন্দ্রিক ডিভ যা আমাদের সম্পূর্ণ ওয়েবসাইট ধারণ করবে এই পাত্রে, আমরা আরো দুটি ডিভ যোগ করব; একটি বিষয়বস্তু div এবং একটি শিরোনাম div. আমাদের html ফাইলটি এখন এইরকম হবে: বিষয়বস্তু শিরোনাম পরীক্ষা করুন আমরা আমাদের CSS ফাইলে নিম্নলিখিত কোড যুক্ত করব: div#ধারক {প্রস্থ: 800px; মার্জিন: 0px অটো; পটভূমি: #FFFFFF; প্যাডিং: 0px;} div#বিষয়বস্তু {প্রস্থ: 800px; প্যাডিং-টপ: 100px; পটভূমি: হলুদ;} div#হেডার {প্রস্থ: 800px; উচ্চতা: 100px; পটভূমি: নীল; অবস্থান: পরম; top: 0px;}। clearfix: পরে {content: "।"; প্রদর্শন ব্লক; উচ্চতা: 0; স্পষ্ট উভয়; দৃশ্যমানতা: লুকানো;}। ক্লিয়ারফিক্স {display: inline-block;}/* IE Mac থেকে লুকান আমরা কিছু রং এবং একটি "মার্জিন: 0px অটো;" আমাদের কনটেইনারটি পৃষ্ঠায় কেন্দ্রীভূত আছে তা নিশ্চিত করার জন্য। শিরোনামটি অন্যান্য বিষয়বস্তুর উপরে অবস্থিত তা নিশ্চিত করতে আমাদের বিষয়বস্তুকে একটি প্যাডিং-টপ এবং শিরোলেখকে "top: 0px" দিয়ে একটি পরম মান দিতে হবে। কুৎসিত রং। এটি কেবল রংগুলি পড়া এবং বিভিন্ন ডিভিকে দেখতে সহজ করার জন্য।

ধাপ 4: ন্যাভিগেশন এবং প্রকৃত বিষয়বস্তুর জন্য বিষয়বস্তু বিভাগে দুটি বিভাগ তৈরি করুন

আমরা এখন কন্টেন্ট ডিভিতে আরও দুটি ডিভ যোগ করব। একটি নেভিগেশনের জন্য এবং একটি প্রকৃত বিষয়বস্তুর জন্য। বিষয়বস্তু-ট্যাগের মধ্যে; আপনি নতুন কোড যোগ করবেন:

নেভিগেশন প্রধান বিষয়বস্তু আমরা নেভিগেশন এবং প্রধান বিষয়বস্তু divs প্রদর্শন করার জন্য কিছু CSS কোড যোগ করব; div#nav {width: 200px; ভাসা: বাম; পটভূমি: কমলা;} div#প্রধান বিষয়বস্তু {প্রস্থ: 600px; ভাসা: ডান; পটভূমি: গোলাপী;} লক্ষ্য করুন যে এই দুটি ডিভিটি উভয়ই ভাসমান। যদি আমরা আগের ধাপে অতিরিক্ত ক্লিয়ারফিক্স কোড না রাখতাম, তাহলে ডিভগুলি আশেপাশের ডিভির বাইরে ভেসে উঠত। ক্লিয়ারফিক্স পদ্ধতির মাধ্যমে, আমরা নিশ্চিত করব যে এটি ঘটবে না।

ধাপ 5: নেভিগেশনে কাঠামোর জন্য কিছু অতিরিক্ত ডিভ যোগ করুন

আমরা এখন আমাদের ওয়েবপেজে কিছু ধরনের কাঠামো তৈরির জন্য "nav" div উভয়টিতে কিছু অতিরিক্ত ডিভ যোগ করব।

• ফু
• বার

ডিভি "ন্যাভব্লক" কীভাবে প্রদর্শন করতে হবে তা নির্ধারণ করতে আমরা এখন কোডের একটি অংশ বিজ্ঞাপন দেব। এটার কারন খুবিই সাধারন; একটি আইডি সহ divs শুধুমাত্র একবার প্রদর্শিত হয় (নেভিগেশন ব্লক, হেডার, পাদলেখ, …)। ক্লাস সহ ডিভগুলি একাধিকবার প্রদর্শিত হতে পারে। এখানে আমরা একটি ক্লাস ব্যবহার করব। শুধু যদি আমরা পরবর্তীতে আরেকটি নেভিগেশন ব্লক যোগ করতে চাই তাহলে.div.navblock {width: 180px; মার্জিন: 5px অটো; সীমানা: 1px কঠিন লাল;} যদি আমরা নেভিগেশনের আরেকটি ব্লক যোগ করতে চাই, আপনাকে শুধু একটি নতুন… কাঠামো যোগ করতে হবে। আপনার কোড এখন এইরকম দেখাবে;

• ফু
• বার
• বু
• দূর

ধাপ 6: মূল সামগ্রীতে কাঠামোর জন্য কিছু অতিরিক্ত ডিভ যোগ করুন

আমরা এখন মূল বিষয়বস্তু div এর জন্য একই করব কোড এখন এই মত দেখাচ্ছে:

অ্যাডমিন সরবরাহকারী, …

আবার, আমরা আমাদের সিএসএস ফাইলে কোডের একটি অংশ যুক্ত করব যাতে ডিভিটি কীভাবে প্রদর্শিত হবে তা নির্ধারণ করতে হবে: div.contentblock {width: 580px; মার্জিন: 5px অটো; সীমানা: 1px কঠিন সাদা;} আমরা এখন মূল সামগ্রী ডিভিতে আরেকটি "…" যোগ করে সামগ্রীর আরেকটি ব্লক যুক্ত করতে পারি;

অ্যাডমিন সরবরাহকারী, …

Nunc cursus, justo eget elementum dictum,…

ধাপ 7: সাইটটিকে একটু কম কুৎসিত করুন

এখন মজার অংশ; রঙ এখন আমাদের প্রধান ডিভ কাঠামো আছে, আমরা রংগুলিকে একটু কম বিশৃঙ্খল/কুৎসিত/কিছু পরিবর্তন করতে পারি … শুধু CSS ফাইলের রঙের সাথে খেলুন এখানে ছবিতে প্রদর্শিত ওয়েবপেজের সম্পূর্ণ HTML ফাইল: পরীক্ষা

• ফু
• বার
• বু
• দূর

অ্যাডমিন সরবরাহকারী, …

Nunc cursus, justo eget elementum dictum,…

হেডার এবং এটি সম্পূর্ণ CSS ফাইল: বডি {ব্যাকগ্রাউন্ড: #444444; ফন্ট-ফ্যামিলি: ভারদানা, আড়িয়াল, সান-সেরিফ; রঙ: #444444; ফন্ট সাইজ: 12px; মার্জিন: 0px;} div#ধারক {প্রস্থ: 800px; মার্জিন: 0px অটো; পটভূমি: #FFFFFF; প্যাডিং: 0px;} div#বিষয়বস্তু {প্রস্থ: 800px; প্যাডিং-টপ: 100px; পটভূমি: #FFFFFF;} div #হেডার {প্রস্থ: 800px; উচ্চতা: 100px; পটভূমি: #888888; অবস্থান: পরম; শীর্ষ: 0px;} div#nav {width: 200px; ভাসা: বাম; পটভূমি: #FFFFFF;} div #maincontent {width: 600px; ভাসা: ডান; পটভূমি: #DDDDDDD;} div.navblock {width: 180px; মার্জিন: 5px অটো; সীমানা: 1px কঠিন #DDDDDDD;} div.contentblock {width: 580px; মার্জিন: 5px অটো; সীমানা: 1px কঠিন #FFFFFF;}। ক্লিয়ারফিক্স: {বিষয়বস্তু: "।"; প্রদর্শন ব্লক; উচ্চতা: 0; স্পষ্ট উভয়; দৃশ্যমানতা: লুকানো;}। ক্লিয়ারফিক্স {display: inline-block;}/* IE Mac থেকে লুকান অবশ্যই এখনও অনেক কিছু আছে যেমন রং, ফন্ট-সাইজ, আরও ভালো লাগার ন্যাভিগেশন ব্লক,… আপনি যদি অন্যান্য সম্পর্কিত নির্দেশাবলী দেখতে চান, আপনি সর্বদা জিজ্ঞাসা করতে পারেন। সময় বের করতে পারব কিনা দেখব।