জুমলাঃ আয় করুন মাসে হাজার ডলার পর্ব - ৪

সুপ্রিয় পাঠক, অনলাইনে আয়ের ক্ষেত্রে ঢাকার অবস্থান পৃথিবীতে তৃতীয়। একটা বিষয় খুব ভালো লাগে যখন কোন প্রজেক্টে বিড করতে যাই, দেখি প্রায় ৬০% বিডার বাংলাদেশী। অর্থ্যাৎ ধীরে ধীরে বাংলাদেশী যুবকদের অংশগ্রহণ যে বাড়ছে অনলাইন আর্ণিংয়ে তা সুস্পষ্ট। বিভিন্ন অনলাইন মার্কেট প্লেসগুলি ঘাটলে দেখা যায় বাংলাদেশী প্রোগামাররা সোৎসাহে আয় করছে লক্ষ লক্ষ টাকা। এমনকি গত ঈদের দিনে কয়েকজনকে পাওয়া গেল অনলাইনে কাজ করছে। এই বিপুল উৎসাহকে স্বাগত জানাই। এই রকম ডেডিকেশন একদিন এই দেশের যুব সমাজকে বেকারত্বমুক্ত করে ছাড়বে আশা করি। তবে তার জন্য সঠিক প্রশিক্ষণও জরুরী। আর এই উদ্দেশ্যেই এই ধারাবাহিক রচনাটি প্রকাশ করা। আউটসোর্সিং এর খুব ব্যাপকভাবে পাওয়া যায় PSD2 HTML এর কাজ এবং Joomla Tempeting । কাজটি একটু কঠিন হলেও আয় খুব ভাল। মাসে কমপক্ষে ৫০০/৬০০ ডলার। তাই নিয়মিত এই পাঠটি পড়ুন ও শিখতে থাকুন নানান প্রফেশনাল কাজ। আপনিও ক্রমান্বয়ে হয়ে উঠবেন দক্ষ আউটসোর্সার আগের ৩টি পর্বে আমরা Div base HTML file ও CSS file তৈরী করে Link করা শিখেছিলাম। আমরা এই পর্বে খুব গুরুত্বপূর্ণ কাজ শিখব যা হল MENU তৈরী করা। এই কাজটি করতে হলে আগের পর্বের ধারনাগুলো নেয়া জরুরী। আগের পর্বগুলো সংগ্রহ করে নিবেন। MENU একটা Website এর খুব গুরত্বপূর্ণ অংশ। একে Navigation নামেও ডাকা হয়। Menu তৈরীর জন্য আমরা যে Sample Website টি ব্যবহার করব তার জন্য আপনাকে Download করতে হবেwww.icdbd.com/part4.zip এই লিংক হতে। Uinzip করার পর index.html file টিOpen করলেই আপনি দেখতে পারবেন একটি Sample Website তবে তার মাঝে Main menuসবহঁ টি নেই। আমরা Banner Image টির উপর Main manu তৈরী করব প্রদর্শিত ছবির মত। এর জন্য আমাদের MainNav নামে একটি Div তৈরী করতে হবে। এবার আমরা Practical কাজ শুরু করব। লক্ষ্য করুন আপনার Folder এর মাঝে CSS নামে একটি Folder আছে। আপনার Computer এAdobe Dreamweaver software টি Install  করা থাকতে হবে। এবার আপনি index.htmlএবং Styles.CSS file এর উপর Right Click করে Open with দিয়ে Dreamweaverদিয়ে ঋরষব দুটো খুলুন। যদি Dreamweaver না থাকে তবে Open with দিয়ে Notepad দিয়ে দুটো খুলুন। এরপর index file এর TOP Div  এর পর MainNav  নামে একটি উরা আমরা বানাবো। তাই TOP Div এর পর নিচের কোডটুকু Type করুনঃ <div class="mainNav"> <ul> <li><a href="#">Home Staging</a></li> <li><a href="#">Why Footsteps?</a></li> <li><a href="#">Schedule a Consultation</a></li> <li class="last"><a href="#">Home</a></li> </ul> <div class="clear"></div> </div> কোডটুকু Type করার পর আপনি ব্যানার ইমেজ এর উপর Manu Item গুলো এরকম দেখবেনঃ Home Staging Why Footsteps? Schedule a Consultation Home এখন আপনার প্রয়োজন Menu Item গুলোকে নিচের মত করে সাজানো। এর জন্য আপনার প্রয়োজন Style.CSS file টির মাঝে প্রয়োজনীয় কোড Type করা। তাইStyle.CSS file টির মাঝে নিচের কোডটুকু Type করুনঃ .mainNav{ width:100%; height:44px; background:url(../images/nav_bg.png) repeat-x; } .mainNav ul{ margin-left:135px; } .mainNav ul li{ float:left; text-align:center; padding:0 30px; background:url(../images/nav_separator.png) no-repeat right 15px; } .mainNav ul li.last{ background:none; } .mainNav ul li a{ font-size:17px; line-height:42px; font-weight:bold; color:#000; } .mainNav ul li a:hover{ color:#ffffff; } .mainNav ul li.active a{ color:#462418; } কোডটুকু আপনি যে কোন স্থানে Type করতে পারেন। তবেঃ .logo{ width:491px; height:92px; padding-top:184px; } এরপর Type করুন। এবার আমরা একটু ব্যাখ্যা করে বুঝবো কোডের কোন অংশে কি কাজ হচ্ছে। আসলে MainNav নামের Div টি সম্পূর্ণ Menu কে ধারণ করছে। একটি Menu তৈরীর জন্য আমাদের প্রয়োজন অনেকগুলো Item. এগুলোকে আমরা বলবো li বা list item যেমন Home Staging, why Footsteps?, Home ইত্যাদি হল এক একটি item. তবেitem. রঃবস. বা li. গুলোকে বেধে রাখার জন্য আমাদের <ul> ব্যবহার করতে হবে। লক্ষ্য করুন একটি Div Class declare করা হয়েছে last নামে (<li class="last"><a href="#">Home</a></li>) । কারণ Manu item গুলোর পর একটা Separator ( | ) দেখা যায়। কিনতৃ সবশেষে কোন Separator দরকার নাই। তাই last Class এর জন্য Style.CSS fileটির মাঝে নিচের কোডটুকু Type করা হয়েছ .mainNav ul li.last{ background:none; } Menu item গুলোর উপর মাউস নিলে Menu item গুলো সাদা রংয়ের হচ্ছে Style.CSS file টির মাঝেঃ  .mainNav ul li a:hover{ color:#ffffff; } - কোডটুকু থাকায়। আপনি color:#ffffff; এর ffffff এর পরিবর্তন করে ২২২২২২ দিয়ে বা অন্য কোড দিয়ে দেখতে পারেন। আগামী পর্বে খুব গুরুত্বপূর্ণ একটি কাজ শিখব। তাহল Textbox, list item, radio button ইত্যাদি তৈরী করা। এই কাজটির জন্য আজকে পর্যন্ত যে বিষয়গুলি শেখানো হল তা বার বার চর্চা করে কোন অসুবিধা থাকলে তা দূর করে ফেলুন। আপনি ধীরে ধীরে প্রবেশ করছেন প্রোগ্রামিং এর গভীরে। নিজেকে তার জন্য প্রস্তুত করতে থাকুন। যদি এই পর্বেই আটকে যান তবে সামনে এগোনোর পথ হারিয়ে যাবে। একটা চক্রে ঘুরতে থাকবেন। কাজেই কোন সমস্যায় যোগাযোগ করার দরকার হলে  icdjamil@gmail.com এই ঠিকানায়। সবাইকে অনেক অনেক শুভেচ্ছা জানিয়ে আজকের পর্ব এখানেই শেষ করছি। সবাই ভালো সুস্থ থাকুন। Feedback: combarta@gmail.com