Dreamweaver_ part8_Box Properties ও Floating করা
Box Properties:
Div Tag এর মাধ্যমে Window ছোট ছোট বক্সে
বিভক্ত হয়। এই বক্সে মূল ৫ টি Properties রয়েছে। Height, Wight,
Padding, Border, Margin. চলুন দেখে নেই।
১. Tag Selector এর মাধ্যমে body
নামক একটি Style তৈরী করুন। Color দিন কালো।
২. Div Tag এর মাধ্যমে #Container
নামে নীলচে রঙের আরও একটি Box তৈরী করুন।
৩. এই বক্সের মধ্যে কার্সর রেখে আবার Insert Div Tag কমান্ড দিন। Insert Div Tag ডায়ালগ বক্সে At Insertion Point সিলেক্ট থাকা অবস্থায় OK করুন। background কালার হলুদ দিন। #Containerb নাম দিন।
CSS Style প্যানেলটিকে একটু বড় করুন। Container ও Container Style এ আমরা কিছু Properties
সংযুক্ত করব।
৪. Container Style টি সিলেক্ট থাকা
অবস্থায় CSS Style প্যানেলের নিচে Add
Properties অপশনে ক্লিক করে Width
দিন 300 px.
৫. আবার Add Properties অপশনে ক্লিক করে Height দিন 300 px. দেখুন Container
বক্সের Height এবং Width পরিবর্তিত হয়েছে।
৬. এবার #Container
সিলেক্ট করে Add Properties অপশনে সিলেক্ট করে Width =100 px এবং Height =100px সিলেক্ট করে দিন।
৭. File >Save কমান্ড দিয়ে সেভ
করুন । উপরের লেখা টুকুন মুছে দিন । লক্ষ্য করুন Container বক্সটি একদম কোনে অবস্থান করছে। এখানে কোন Padding
বা Margin দেয়া হয়নি তাই এটি এভাবে মিশে রয়েছে ।
৮. এবার CSS Style প্যানেলে Container
Style টি সিলেক্ট করে Add Properties বাটনে ক্লিক করে Padding = 20px
করে দিন । লক্ষ্য করুন ভিতরের বক্সটি কে বাইরের
বক্সটি 20px সরিয়ে দিয়েছে।
এটিকে বলে Padding, বক্সের ভিতরে
কিছু জায়গা ছেড়ে দিয়েছে।
৯. এবার #Containerb Style টি সিলেক্ট করে Add Properties অপশনে ক্লিক করুন Padding =10px লিখে দিন।
দেখুন ছোট বক্সের মধ্যকার লেখাগুলো 10px দূরে সরে গেছে । সুতরাং Padding হল যে এলিমেন্ট থাকবে তার দুরত্ব।
১০. CSS Style প্যানেলে #Container
স্টাইল সিলেক্ট থাকা অবস্থায় Add
Properties অপশনে Border =4px স্পেস দিয়ে Solid
লিখে দিন ।
১১. আবার Add Properties সিলেক্ট করে Border color দিয়ে লাল বা যে কোন গাঢ় রঙ ।
১২. একই ভাবে #Container সিলেক্ট করে Add Properties অপশন সিলেক্ট করে Border =2px স্পেস দিয়ে Solid লিখে দিন । আবার Border
color যে কোন গাঢ় রঙ লাল সিলেক্ট করি । উভয় Box এই বর্ডার সংযুক্ত হবে
১৩. #Container Style টি কে সিলেক্ট
করে Add Properties অপশনে ক্লিক করে Margin
দিন 20px
১৪. একই ভাবে #Containerb Style টিকে সিলেক্ট করে Add Properties অপশন থেকে Margin দিন 20px লক্ষ্য করুন বড় বক্সটি Design Window বা ফাকা স্ক্রিন থেকে 20px সরে যাবে । আবার ছোট বক্সটি বড় বক্স থেকে 20px
সরে অবস্থান করবে।
১৫. File>Save কমান্ড দিন । Preview/Debug
in Browser এ ক্লিক করে দেখে নিন ।
Floating করা
Div Tag এর মাধ্যমে আমাদের তৈরী কৃত বক্সকে এক জায়গা থেকে অন্য জায়গা নেওয়াকে Floating
বলে । চলুন শুরু করি।
১. File >Open কমান্ড দিয়ে Div
Tag ফাইলটি খুলুন । এখানে আমাদের Window টি বা ফাকা স্কীনটি header, main content,
sidebar, footer এই চার ভাগে বিভক্ত আছে।
আমরা Main Content নামের বক্স ছোট
করে Sidebar টিকে ডান দিকে আনব।
২. CSS Style প্যানেল হতে Main
Content Style টি সিলেক্ট থাকা অবস্থায়
প্যানেলের নিচের দিকে Add Properties অপশনে ক্লিক করুন ।
৩. Width লিখে 450px
দিন । দেখুন Main Content বক্সটি ছোট হয়ে গেছে।
৪. Main Content সিলেক্ট থাকা
অবস্থায় আবার Add Properties অপশনে ক্লিক করে
লিখুন Float এবং ডানদিকে নিন্মমুখী
তীরে ক্লিক করে সিলেক্ট করুন Left।
দেখতে পাচ্ছি Sidebar এবং Footer
Div Tag দুটি Main
Content এর ডানে অবস্থান করছে
এবং নিচে বেশ ফাঁকা জায়গা রয়েছে।
এই ফাঁকা জায়গায় Sidebar টিকে Float করে একদম ডানে
বসাতে পারি।
৫. CSS Style প্যানেলে Sidebar
Style টি সিলেক্ট থাকা অবস্থায় প্যানেলের নিচে Add
Properties অপশনে ক্লিক করে Float লিখে ডানের তীর থেকে Right সিলেক্ট করে দিন।
৬. Add Properties সিলেক্ট করে Width
করে দিন 100px এবং height অপশনে ক্লিক করে 50
px থেকে বাড়িয়ে 250px.
দেখুন Sidebar টি একদম ডান পাশে
অবস্থান করছে। Height এবং Width
বেড়েছে এবার আমরা Footer টিকে একদম নিচে নিয়ে আসব।
৭. Sidebar স্টাইলটি সিলেক্ট
থাকা অবস্থায় এর Width বেড়ে যাবে। Footer
এর লেখা গুলো নিচে পড়ে থাকতে দেখা যাবে।
৮. এবার Footer স্টাইলটি সিলেক্ট
করে প্যানেলের নিচে Add Properties অপশনে ক্লিক করে Float লিখে ডান দিকের
নিন্মমুখী তীরে ক্লিক করে Left সিলেক্ট করুন। Footer নিচে অবস্থান
করবে।
https://www.blogger.com/blogger.g?blogID=9037337840329120202#editor/target=post;postID=4730363867555356032;onPublishedMenu=template;onClosedMenu=template;postNum=29;src=link
অথবা Footer এর floating
টি আমরা Main Content এবং Sidebar এর মাঝখান থেকে Clear করার জন্য Add
Properties এ লিখুন Clear এবং ডান
দিকে নিন্মমুখী তীরে ক্লিক করে Both সিলেক্ট করে দিন।
দেখুন Footer এর বক্সটি নাই,
নিচে অবস্থান করছে ।
৯. File>Save করে Preview
তে গিয়ে দেখে নিন।
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
বিস্তারিত জানতে নিচের বইটি সংগরহ করে নিন।
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
