Dreamweaver_ part14_Main মেনু তৈরি করা, Main menu তে Image ও Hover সেট করা
Main মেনু
আমরা এখন মেইন মেনু নামে একটি বার তৈরি করব । যার মধ্যে তিনটি বাটন থাকবে ।
আমরা আমাদের সাইটটিকে Div Tag এর মাধ্যমে
বিভক্ত করে নিয়েছি। কিভাবে Div Tag এর মাধ্যমে পেজ বিভক্ত করতে হয় তা আপনারা
দেখেছেন । উপরে রয়েছে #header তারপর #maincontent
ডানে #sidebar নিচে #footer । আমরা #header
এর মধ্যে
আর একটি মেনু তৈরি করব । চলুন শুরু করি।
১. CSS Styles প্যানেল থেকে #header এ ক্লিক করে সিলেক্ট করুন।
২. কার্সর দিয়ে header এর Image এর উপর ক্লিক করে কি বোর্ড দিয়ে রাইট Arrow
চেপে Enter দিন। Image এর নিচে header
এর মধ্যে
ফাঁকা জায়গা তৈরি হবে।
৩. এখানে কার্সর থাকা অবস্থায় একটি Div Tag তৈরি করব Mainmenu নামে। Common
tab থেকে Insert Div Tag এ ক্লিক
করুন।
Insert অপশনে At insertion point রাখুন, ID ঘরে নাম দিন Mai
menu .OK করুন। লক্ষ্য করুন Main menu নামে একটি Div Tag তৈরি হয়েছে।
৪. Code view তে যান। লক্ষ্য
করুন header Tag এর মধ্যে Main
menu Div Tag টি অবস্থান করছে।
৫. পেজে ফিরে আসুন । যে মেনু গুলো দিতে চান Enter দিয়ে সেই নামগুলো লিখুন। আমরা দিলাম Home
About us, Products । লেখা তিনটিকে সিলেক্ট
করে Properties প্যানেল থেকে Unordered
list করে দিন।
এখন আমরা একটি style তৈরি করব Unordered
list এর উপর ।
৬. CSS Styles প্যানেল থেকে New
CSS Rule বাটনে ক্লিক করুন। New
CSS Rule ডায়ালগ বক্স আসলে Selector
Name ঘরে liমুছে দিয়ে OK করুন। কিছু Properties সেট করার জন্য CSS Rule definition ডায়ালগ বক্স আসবে।
৭. Box ঘরে Width
100% ডানে Px ঘরের নিন্মতীরে ক্লিক করে % সিলেক্ট করে দেন। যতটুকু লেখা ততটুকু Width
থাকবে। Float করে দিন left, Padding=0 Margin=0.
৭. List ঘরে list style
–type ঘরে None এবং list style ঘরে None করে দেই । Positioning ঘরে Width 100% করে দেন। Apply করে OK করুন। লক্ষ্য করুন Unordered list গুলো চলে গিয়ে একদম বাম পাশে অবস্থান করছে।
এবার মেনু গুলোকে পাশাপাশি আনার জন্য আরও একটি style তৈরী করব।
৯. মেনু গুলো সিলেক্ট করে CSS Styles প্যানেল থেকে New CSS Rule বাটনে ক্লিক করে New CSS Rule ডায়ালগ বক্স আসলে Selector Name ঘরে ul এর ডানে li লিখে দিন। অর্থাৎ এবার আমরা list এর উপর Style
তৈরি করব। OK করুন।
১০. CSS Rule defination ডায়ালগ বক্সেType ঘরে Font
Family নামক দেই Arial ,Helvetica , Sens- Serif
; Block ঘরে Display এর ড্রপ ডাউন থেকে Block ; Box ঘরে Padding এ Some of all টি চিহ্ন উঠিয়ে
দিয়ে top =10 Left=30 ; Marginএ Some of
all টি চিহ্ন উঠিয়ে দিয়ে Left=30,Float=Left করে Apply দিয়ে OK করুন।
দেখুন মেনু গুলো পাশাপাশি অবস্থান করছে ।
এবার আমরা শুধু Box টির উপর একটি Style
করবো্
১১. বক্সটিকে সিলেক্ট করে CSS Styles প্যানেল থেকে New CSS Rule বাটনে ক্লিক করুন।
১২. New CSS Rule ডায়ালগ বক্স
আসলে Selector Nameঘরের ul মুছে দিতে হবে। অর্থাৎ #header# mainmenu লেখা থাকবে। অর্থাৎ বক্সের উপর প্রভাব পরবে। OK
করুন।
১৩. CSS Rule definition ডায়ালগ বক্সে কিছু Properties সেট করুন। Positioning
Width 350 px , heihgt =30px ; Position=absolute ; Placement এ Top= Top= 30 ; Left=235 Apply করে OK করুন।
দেখতে পাবেন বক্সটি Image এর উপর উঠে পড়বে। এখান থেকে আমরা ড্রাগ করে জায়গা মত বসাতে পারব।
বক্সটিকে চাইলেই এবার আপনি ড্রাগ করে মুভ করতে পারবেন।
১৪. বক্সটির Manu গুলো সিলেক্ট
করে আপনার সহশ্লিষ্ট link তৈরী করে
নিন। কিভাবে link তৈরি করতে হয় তা আপনারা আগেই দেখেছেন।
Main menu তে Image সেট করা
Main menu তে বৈচিত্র আনার জন্য আমরা মেনু লিস্ট Style টি তে গিয়ে বিভিন্ন ভাবে Properties সেট করতে পারি।
১৫. ডান দিকে CSS Styles প্যানেলে #header# mainmenu ul li লেখা style টি র উপর ডাবল
ক্লিক করুন ।
১৬. CSS Rule defination ডায়ালগ বক্স আসলে Backgroud বক্সে Backgroud Image এ Browse বাটনে ক্লিক করুন।
১৭. সংশ্লিষ্ট Image টিকে সিলেক্ট করে
OK করুন। Background
Image টি দিয়ে OK করুন।
মেনু বাটনে Hover সেট করা
Hover হচ্ছে আমরা যখন মাউস পয়েন্টার মেনু বাটনগুলোর উপর নেই তখন মেনু বাটনগুলোর
কালার চেন্জ হবে। মনেকরি লেখা হবে সাদা এবং Bold হবে।
১৮. Main menu র যেকোন বাটনের
টেক্সট সিলেক্ট করে CSS Styles প্যানেলের New
CSS Rule বাটনে ক্লিক করুন।
১৯. New CSS Rule ডায়ালগ বক্সে Selector
ঘরে লক্ষ্য করুন #header# mainmenu ul li
a লেখা এসেছে । পাশে লিখুন : hover, hover লেখার পূর্বে অবশ্যই কোলন (:) দিতে হবে। স্পেস না
দিয়ে লিখবেন।
২০. CSS Rule definition ডায়ালগ বক্স আসলে Type ঘরে Color =সাদা এবং Font
– Weigh= bold করে OK করুন।
২১. File>Save করে Preview
করুন।
২২. Main menu তিনটির যে কোন
একটি উপর মাউস নিন। দেখুন লেখা মোটা ও সাদা হচ্ছে।
