Dreamweaver_ part7_ Div Tag
Div Tag
Book Name: Mastering Microsoft Word
RELATED POST LINKS BELOW ********************************************
part1_Dreamweaver, Properties Inspector ও Panel বন্ধ করা
part2-Panel আনা, Panel গ্রুপে Panel টিকে রাখা ও Panel গ্রুপকে Collapse করা
part3-নতুন Site তৈরী করা
part4_Import Siteও Logout তৈরী
part5_হেডার যুক্ত করা
part6_Style Sheet ও Tag Selector
part7_ Div Tag
part8_Box Properties ও Floating করা
part9_ID selector ও Image type
part10_Image Properties ও Animation সংযুক্ত
part11_টেবিল সংযোজন, টেবিলে ডাটা ইমপোট করা, Table ফরমেটিং ও টেবিলে Image সেট করা
part12_Form তৈরী করা, Form এর ভিতর ফিল্ড সেট করা, Form এর মধ্যে Text ফিল্ড যোগ করা, From এ রেডিও বাটন যোগ করা, Form এ Text area যোগ করা, Form এ বাটন যোগ করা, ও Form Design
Div
বলতে Divide বোঝানো হয়। আমাদেও Design
বা Window বা ফাঁকা স্ক্রীনকে
বিভিন্ন ভাগে ভাগ করব যাতে বিভিন্ন কনটেন্ট বা ছবি রাখতে সুবিধা হয়। সেক্ষেত্রে আমরা Div Tag ব্যবহার করব। Div Tag ব্যবহার করার জন্য আমরা Title বারের একদম ডান দিকে Designer অপশনের তীওে ক্লিক করে Classic সিলেক্ট করে নিন।
লক্ষকরুন সাদা স্ক্রীনের উপর Insert বারটি দেখা যাবে।
১. Insert বারে Insert Div Tag বাটনে ক্লিক করুন।
২. Insert Div
Tag নামক একটি ডায়ালগ
বক্স আসবে। Insert অপশন থেকে At
Insertion Point সিলেক্ট করুন। তাহলে যেখানে কার্সও আছে সেখানে থেকে Div Tag টি হবে। আমরা তৈরী করে
রাখা ID Selector দিয়ে Div Tag টি তৈরী করতে পারি। কিন্তু এখানে আমরা নতুন CSS Style তৈরীর মাধ্যোমে
Div Tag তৈরী করব।
৩. New CSS Rule অপশনে ক্লিক করুন।
New
CSS Rule ডায়ালগ বক্স
আসবে।
৪. Selector Type
অপশন থেকে Compound ( based on your Selection ) সিলেক্ট করুন। কেননা Div Tag Compound Selection এর মাধ্যমে হয়। Selection
Name ঘরে লিখে দিন #Header
। OK করুন।
CSS
Rule definition for #Header ডায়ালগ বক্স আসবে।
৫. Box ঘরে সিলেক্ট থাকা
অবস্থায় Hight অপশনে 110 px দিন, Padding ও Margin উভয়েরই Top এ 0 দিয়ে দিন। Background ঘর সিলেক্ট থাকা অবস্থায় Background Color এর উপর ক্লিক কওে যেকোন কালার আকাশী ( #OCF) নেই। Apply দিয়ে OK করি । আবার OK করি।
লক্ষ করুন আপনার পেজটি Div Tag দ্বারা 110 px Hight এ বিভক্ত হয়েছে। এখন
আমরা আরো একটি Div Tag তৈরী করব।
৬. আবার Insert বার থেকে Insert Div Tag অপশনে ক্লিক করি। Insert
Div Tag ডায়ালগ বক্স আসলে
Insert ঘরের নিমণমূখী তীওে ক্লিক কওে After Tag সিলেক্ট করুন এবং ডানের তীরে ক্লিক করে <div id = “header”> সিলেক্ট করুন। অর্থাৎ Div Tag টি পূর্ববতী header div Tag টির পরে হবে। New
CSS Rule অপশনে ক্লিক
করুন।
৭. New CSS Rule ডায়ালগ বক্সে Selector Type এ Compound সিলেক্ট করে Selector Name ঘরে লিখে দিন #maincontent,
OK করুন।
৮. CSS Rule
definition বক্সে Box ঘওে Padding এবং Margin এ 0 এবং Hight এর ঘওে 300 px দিন। Background ঘরে যে কোন Background Color #OFF হালকা আকাশী দিন। Apply দিয়ে OK করুন। আবার OK করুন।
লÿ্য করুন পেজটিতে
maincontent নামে আরো একটি Div Tag তৈরী হয়েছে। এবার আরো একটি Div Tag তৈরী করব।
৯. একই ভাবে Insert
bar > Insert Tag কমান্ড দিন। Insert Div Tag ডায়ালগ বক্স আসলে Insert ঘরে After Tag সিলেক্ট করে ডানপাশে
নিমণমূখী তীরে ক্লিক করে <div id =
“maincontent”> সিলেক্ট করে দিন। অর্থাৎ #maincontent Div Tag টির পরে হবে। New
CSS Rule বাটনে ক্লিক
করুন।
১০. New CSS Rule ডায়ালগ বক্সে Selector Type ঘরে Compound এবং Selector Name ঘরে #Sidebar লিখে OK করুন।
১১. New CSS
definition ডায়ালগ বক্সে Padding = 0, Margin = 0, hight = 50 px, Background Color হালকা সবুজ বা যে কোন একটি দিয়ে Apply
করে OK করুন। আবার OK করুন। আরও একটি Div Tag তৈরী হবে।
১২. একই ভাবে Sidebar
এর পরে #Footer নামে আরো একটি Div
Tag তৈরী করুন। যার Padding = 0, Margin = 0, hight = 50 px, Background Color যে কোন একটি কওে Apply দিয়ে OK করুন।Footer নামে আরো একটি Div Tag তৈরী হবে।
১৩. এবার File>Save কমান্ড দিয়ে Div
Tag নামে Save করুন। Preview> Preview in
explorer বাটনে ক্লিক
করুন।
দেখতে পাব পেজটি বিভিন্ন ভাগে বিভক্ত হয়েছে।
বিস্তারিত জানতে নিচের বইটি সংগরহ করে নিন।
Writer: Bappi Ashraf
Published By: Gyankosh Prokashani
Amount of Pages: 464
First Publish: October-2004
Last Edition: We've February-2015 edition. Future edition may be existed!
Book Price: BDT 350 (30% Discount)
The
writer of this book has told that he has written this book with the
concept of "teach yourself". On the other hand, Web Design is a thing which is
interesting to learn. He has also told that the book is full of fan and
enjoyment so that a person can learn Web Design by himself by playing with
the example projects of this book. Book's CD Link below...
part1_Dreamweaver, Properties Inspector ও Panel বন্ধ করা
part2-Panel আনা, Panel গ্রুপে Panel টিকে রাখা ও Panel গ্রুপকে Collapse করা
part3-নতুন Site তৈরী করা
part4_Import Siteও Logout তৈরী
part5_হেডার যুক্ত করা
part6_Style Sheet ও Tag Selector
part7_ Div Tag
part8_Box Properties ও Floating করা
part9_ID selector ও Image type
part10_Image Properties ও Animation সংযুক্ত
part11_টেবিল সংযোজন, টেবিলে ডাটা ইমপোট করা, Table ফরমেটিং ও টেবিলে Image সেট করা
part12_Form তৈরী করা, Form এর ভিতর ফিল্ড সেট করা, Form এর মধ্যে Text ফিল্ড যোগ করা, From এ রেডিও বাটন যোগ করা, Form এ Text area যোগ করা, Form এ বাটন যোগ করা, ও Form Design
