Dreamweaver_ part11_টেবিল সংযোজন, টেবিলে ডাটা ইমপোট করা, Table ফরমেটিং ও টেবিলে Image সেট করা
টেবিল সংযোজন
Dreamweaver এ খুব সহজেই
টেবিল তৈরি করা যাবে।
1.
যেখানে টেবিলটি
তৈরী করবেন সেখানে কার্সর রাখুন । আমরা main comtent এর ভিতরে তৈরি করব।
2.
Common ট্যাব থেকে Table লেখা বাটনে ক্লিক
করুন।
3.
Table নামক ডায়ালগ বক্স আসলে Rows =5; Coloum =5; Table Width 80 দিয়ে পাশের ঘরে Pixels এর ড্রপ ডাউন থেকে Percent দিয়ে দিন।
100% দিলে পুরো main
content জুড়ে Table তৈরী হবে। Border thickness =0; Padding
=0; cellspaing =5 দিন । Header ঘরে ৩ নং অর্থাৎ হেডার উপরের দিকে থাকবে সেই
অপশনে ক্লিক করুন। caption ঘরে লিখে দিন BoOKs
অর্থাৎ টেবিলের যে কোন নাম । Summary ঘরে চাইলে summary লিখে দিতে পারেন যেমন-This is about
boOKs.
4.
OK করুন । লক্ষ্য
করুন ৫টি কলাম ও ৫টি রো সহ একটি টেবিল তৈরি হয়েছে । উপরে টেবিলের নাম দেখা যাচ্ছে।
5.
এবার code
ভিউতে যাই । লক্ষ্য করুন যেভাবে Properties
দিয়েছিলাম তা দেখা যাচ্ছে।
6.
এবার code
ভিউতেই Table width = 80%মুছে 100% করে দেই ; border =1; cell spacing =10 এবং cell Padding =2 করে দিন। Design
view তে ফিরে যান।
লক্ষ্য করুন আপনার টেবিলটি 100% হয়েছে অর্থাৎ পুরো main content জুড়ে হয়েছে। cell spacing বেড়ে 10 হয়েছে । এভাবে cell Padding =2 এবই border=1 হয়েছে । এভাবে আমরা Tableএর Properties পরিবর্তন করতে
পারি ।
আবার Table সিলেক্ট থাকলে নিচে Table এর Properties প্যানেলে থেকেও Properties গুলো পরিবর্তন করতে পারি ।
Marge Cell :- যে Cell গুলো Marge করলে অর্থাৎ সংযুক্ত করবেন সেই Cell গুলোকে সিলেক্ট করে মাউস এর রাইট বাটনে ক্লিক করে Table করে অপশনে Marge Cells এ ক্লিক করুন।
অথবা Modify মেনু ক্লিক করে Table
>Marge Cells কমান্ড দিন।
Split Table : যে Cell টিকে spilt বা বিভক্ত করবেন সেটি সিলেক্ট করে একই ভাবে মাউসের রাইট বাটন চেপে Table
>Split Cell কমান্ড দিন।
Split Table ডায়ালগ বক্স আসলে Number of coloums অথবা Number
of Rows দিয়ে দিন । OK করুন।
টেবিলে ডাটা ইমপোট করা :- অন্য কোন Programmer থেকে ডাটা টেবিলে ইমপোট করে আনা যায় ।
- File >Import কমান্ড দিন । লক্ষ্য করুন চারটি অপশন রয়েছে । যার মধ্যে Excel,
Word, XML এবং আর একটি রয়েছে Tabular
অপশন । এই
অপশন দিয়ে Word, Excel এবং XML ছাড়া
অন্যান্য প্রোগাম থেকে ডাটা ইমপোট করা যায় ।
আমরা এখানে Excel এ তৈরী করে রাখা
একটি ডাটা। ইমপোর্ট করা। যেখানে টেবিল আনতে চান সেখানে কার্সর রেখে
- File >Import Excel ডায়ালগ বক্সে থেকে সংশ্লিষ্ট ফাইল সিলেক্ট করে OK করুন। আমরা BoOKs
Table নামে ফাইল সিলেক্ট করেছি।
লক্ষ্য করুন Excel ফাইলটি Import
হয়েছে।
- BoOKs লেখাটি
সিলেক্ট করে Format> Align>Center করে দিন। BoOKs লেখাটি Center হবে। টেবিলের কন্টরে ক্লিক করে Table টি সিলেক্ট করে Formal>Align>Center
করে দিন। পুরো টেবিলটি সেন্টার
- Properties প্যানেল থেকে Border করে দিন। দেখতে ভাল দেখাবে । আরো বিভিন্ন ভাবে Properties পরিবর্তন করতে পারেন ।
Table ফরমেটিং
টেবিলকে নানা ভাবে ফরমেটিং করা যায়
। যে টেবিলটি তৈরি করেছি তার উপরে রয়েছে Header ।
1.
টেবিলের উপরের Row
তে ক্লিক করুন।
লক্ষ্য করুন Properties প্যানেলের উপরে একটি লাইনে কোড দেখা যাচ্ছে যার শেষে রয়েছে <th>। এই <th> কোড দ্বারা বোঝা যায় টেবিলটির এই Row টি Header
2.
আবার টেবিলটির
প্রথম Colaum এ ক্লিক করুন। Properties প্যানেলের উপরে
লেখা দেখতে পাবেন <td>অর্থাৎ এটি Table
ডাটা ।
3.
এই Table ডাটাকে Table Header বানানোর জন্য টেবিলের প্রথন কলামের 01 লেখা সেলে কার্সর রেখে Code ভিউতে যান।
4.
Code ভিউতে <td>01
</td> লেখার ডানে বামে th লিখে দিন। অর্থাৎ <th>01</th>
5.
Design View তে যান । লক্ষ্য 01 লেখা সেলটি Header
হয়ে গেছে।
6.
একই ভাবে 02,03,
04 লেখা সেল গুলো ও Header করে ফেলুন ।
এবার আমরা Table Header এর উপর একটি style তৈরি করবো।
7.
Table Header এর যে কোন সেলে কার্সর রেখে CSS Style প্যানেল থেকে New CSS Rule বাটনে ক্লিক করুন।
8.
New CSS Rule ডায়ালগ বক্সে Selector Name
ঘরে কোথায় Table টি হবে নাম চলে এসেছে । এই অবস্থায় রেখে OK করুন।
9.
CSS Rule definition বক্স আসলে Background ঘরে Color
যে কোন একটি দিয়ে দিন। আমরা নীল Color দিলাম। এবং Type ঘরে Color =সাদা দিয়ে দিন।
অর্থাৎ লেখা সাদা হবে এবং ব্যাকগ্রাউন্ড কালার হবে। Apply দিয়ে OK করুন।
দেখুন উপরের সারি এবং কলাম Table হেডার বলে তার উপর style টি পড়েছে।
10.
একই ভাবে আপনি
টেবিল ডাটার উপর ও style শীট তৈরি করে
নিতে পারেন।
11.
২নং কলামে Graphics
লেখা সেলটি বাদে বাকী ৪টি Row সিলেক্ট করে style প্যানেল থেকে New CSS Rule বাটনে ক্লিক করুন।
12.
New CSS Rule ডায়ালগ বক্স আসলে Selector Type অপশন থেকে ID সিলেক্ট নিন। Selector
Name ঘরে নাম দিন Coloumcolor OK করুন।
13.
CSS Rule Definition বক্স Background ঘরে হালকা সবুজ
এবং Type ঘরে লাল রং সিলেক্ট করে OK করুন ।
14.
লক্ষ্য করুন CSS
Style প্যানেলে ক্টাইলটি তৈরি হয়েছে। কিন্তু Apply
হয়নি।
১৫. সেলগুলো সেলেক্ট করে Properties প্যানেলে HTML
সিলেক্ট থাকা অবস্থায় ID ঘরের ড্রপ ডাউন থেকে Column color সিলেক্ট করুন।
লক্ষ্য করুন Cell গুলো তো Style
টি সংযুক্ত হয়েছে।
টেবিলে Image সেট করা :
এখন আমরা টেবিল Header এ অর্থাৎ
প্রথম Row এবং প্রথম Coloum এ Image সংযুক্ত করব।
16.
CSS Style প্যানেলে থেকে Table Header এর style টি অর্থাৎ #main
content div table tr th নামক style টির উপর ডাবল
ক্লিক করুন।
17.
CSS Rule definition ডায়ালগ বক্স থেকে Background ঘরে Background Image
এর ডানে browse করে Background নামক Image
টি সিলেক্ট করুন। Repeat অংশে No
Repeat ; Background Position (X) = Right ; Background Position (Y) = Top
করে দিন।
18.
Apply OK করুন।
লক্ষ্য করুন Image টি Table হেডারে সেট হয়েছে্
টেবিল Border : আমরা টেবিলে
বর্ডার সংযুক্ত করব। আপাতত আমাদের টেবিলের দুটি অংশ Table Header এবং Table body । আমরা Table
body ’র’ যে
কোন সেলে কার্সর রাখি।
19.
Table body ’র’ যে কোন সেলে কার্সর রেখে CSS
Style প্যানেল থেকে New CSS Rule ডায়ালগ
বক্স আসবে। লক্ষ্য করুন Selector Name ঘরে Table tr td লেখা দেখাচ্ছে। OK
করুন।
20.
CSS Rule Definition ডায়ালক বক্স আসলে Border ঘরে Style = Solid ; Width= 2Px
Color – Red দিয়ে দিন।
দেখুন টেবিলটির body অংশে border
সংযুক্ত হয়েছে।
Table এর caption পরিবর্তন :
টেবিলের caption এ Style শীট তৈরি করে পরিবর্তন করা যায় ।
আমাদের টেবিলে BoOKs লেখাটি হল
টেবিলের caption ।
21.
BoOKs লেখাটির উপর ক্লিক করে CSS
Style প্যানেল হতে New CSS Rule এ যান। New
CSS Rule ডায়ালগ বক্সের Selection
Name ঘরে লক্ষ্য করুন table captoin লেখা আছে । OK করুন।
22.
CSS Rule Definition ডায়ালগ বক্সে Type ঘরে Font Size 1.5 ; ডানে Px লেখার ড্রপ ডাউন থেকে Em সিলেক্ট করুন্ Font Weight = bold ; color লাল ; Box ঘরে Padding
এর Some for all টিক চিহ্ন উঠিয়ে Bottom =10 Px অর্থাৎ BoOKs লেখা টি 10px
দূরে অবস্থান করে টেবিল থেকে ;Margin এর Some for all ঠিক টিহ্ন উঠিয়ে Top=0 Right=auto; Bottom =0 ; Left =auto করে দিন।
লক্ষ্য করুন Books লেখাটি পরিবতির্ত হয়েছে
অর্থাৎ Style সংযুক্ত হয়েছে।
বিস্তারিত জানতে নিচের বইটি সংগরহ করে নিন।
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
