ICT & others Information

Dreamweaver_ part14_Main মেনু তৈরি করা, Main menu তে Image ও Hover সেট করা

March 10, 2020 Sharmin Khan Ishita

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 তিনটির যে কোন একটি উপর মাউস নিন। দেখুন লেখা মোটা ও সাদা হচ্ছে।

JavaScript_part3_Javascript ফাইল ও ডায়নামিক Html Element তৈরি

March 09, 2020 Sharmin Khan Ishita

Javascript ফাইল (.J S)

Javascript আপনার প্রোগ্রামে Internal বা External file দ্বারা ব্যবহার করা যায়। <Head> বা <body> ট্যাগের মধ্যেমে Javascript ব্যবহারকে Internal ফাইল ব্যবহার বলা হয় যা আমরা ইতোপূর্বে দেখেছি। এবারে দেখব External ফাইল কি।

এই ফাইলে সাধারণত <script> এর সকল কোড লেখা হয়। এর এক্সটেনশন হল .js । html পেজ এর মধ্যে কেবল আপনার .js ফাইল এর সোর্স বা উৎস বলে দিতে হয়। যেমন আমরা Nova.js নামে Javascript একটি ফাইল তৈরী করলাম।

1. এবার Notepad++ এ Nova.js ফাইলটি ওপেন করুন। এবার নিচের কোডটি লিখুন।

function MyFirstProgram()

{

document.write("Hellow");

document.write("This my first External Js Test");

}

2. এখন আপনি program_006 নামে একটি html ফাইল তৈরী করুন।

3. এবার program_006.html ফাইলটিকে Notepad++ এ ওপেন করুন। নিচের মত করে কোড লিখুন।

ব্যাখ্যা :এখানে লক্ষনীয় যে আমাদের JS ফোল্ডারের মধ্যে Nova .js ফাইলটি বিদ্যমান। <script> ট্যগে External Javascript ফাইল ব্যবহার করতে চাইলে আপনাকে <script> এর মাঝে ঐ .js ফাইলটির সোর্স বলে দিতে হবে। তাই আমরা উপরোক্ত উদাহরনের ৭ নং লাইনে আমরা src = “Js/Nova.js” লিখেছি। এখানে JS হল ফোল্ডারটির নাম এবং Nova.js হল ফাইলটির নাম।

ডায়নামিক Html Element তৈরি

জাভাস্ক্রিপ্ট ব্যবহার করে আপনি খুব সহজেই ডায়নামিক্যালি ট্যাগ তৈরি করতে পারবেন এবং তাকে ব্যবহার করতে পারবেন। তবে এক্ষেত্রে আপনাকে Html এর খুবই ভাল ধারনা থাকতে হবে।

প্রোগ্রাম : ডায়নামিক Html element তৈরি

1. আপনার Notepad++ ওপেন করে নিচের মত করে কোড লিখুন। এবার Program_007.html হিসাবে সেভ করুন।

<!DOCTYPE html>

<html>

<body>

<head>

<title>

This is Javascript Lessons

</title>

document.write("<h1>Hellow, This is Nova Computer</h2>");

document.write("<h2>Hellow, This is Nova Computer</h2>");

document.write("<h3>Hellow, This is Nova Computer</h3> ");

document.write("<p>It is in Aziz Super Market, </br> Shahbag Dhaka </p> ");

</script>

</head>

<body>

</body>

</html>

ফলাফল : এবার আপনার ব্রাউজারে program_007.html পেজটিকে ওপেন করুন। নিমেণর চিত্রের ন্যায় আউটপুট দেখতে পাবেন ।

চিত্র: ডায়নামিক Html element তৈরি

ব্যাখ্যা : উপরোক্ত উদাহরণে আমরা কিভাবে কোডের মাঝে html element তৈরি করে তা শিখলাম। এখানে <h1> </h1> , <h2> </h2> ,<h3> </h3>, <1b> <p> উদাহরন দেয়া হল।

Html এলিমেন্টকে Javascript এ ব্যবহার

Html এর “id” অ্যাট্রিবিউট মুলত Html element নির্দেশ করে। সুতরাং Html এর element কে Javascript এর মধ্যে ব্যবহার করতে হয়।

প্রোগ্রাম : Html এলিমেন্টকে Javascript এ ব্যবহার

1. আপনার Notepad++ ওপেন করে নিচের মত করে কোড লিখুন।

2. এবার Program_008.html হিসাবে সেভ করুন।

<!DOCTYPE html>

<html>

<body>

<head>

<title>

This is Javascript Lessons

</title>

</head>

<body>

<h4>How to get html element</h4>

document.getElementById("heading2").innerHTML="Wow I have write it in Javascript";

</script>

</body>

</html>

ফলাফল : এবার আপনার ব্রাউজারে program_008.html পেজটিকে ওপেন করুন। নিমেণর চিত্রের ন্যায় আউটপুট দেখতে পাবেন ।

এই অংশে আমরা শিখব -

Ø জাভাস্ক্রিপ্ট বস্নক

Ø জাভাস্ক্রিপ্ট মাল্টিপল কমেন্টস

Ø জাভাস্ক্রিপ্ট স্টেটমেন্ট

Ø লাইনের শেষে কমেন্টস দেয়া

জাভাস্ক্রিপ্টের স্টেটমেন্টগুলো ব্রাউজারের মাধ্যমে সিকোয়েনশিয়ালি এক্সিকিউট বা রান হয়। জাভাস্ক্রিপ্ট কেস সেনসেটিভ অর্থাৎ এটি Captial Letter এবং Small Letter আলাদা আলাদা মনে করে। অর্থাৎ Name এবং name এর মানে এখানে সম্পূর্ণ আলাদা।তাই ভেরিয়েবল, ফাংশন, স্টেটমেন্ট ইত্যাদি লেখার সময় ভালোভাবে লক্ষ্য রাখতে বলা হল।

প্রোগ্রাম : জাভাস্ক্রিপ্ট কেস সেনসেটিভ

1. আপনার Notepad++ ওপেন করে নিচের মত করে কোড লিখুন।

2. এবার Program_009.html হিসাবে সেভ করুন।

<!DOCTYPE html>

<html>

<head>

<title>This is Javascript Lessons</title>

function MyFirstMessage()

{

var name="This Variable Contains 'name'";

var Name="This Variable Contains 'Name'";

document.write(name);

document.write("<br>");

document.write(Name);

}

</script>

</head>

</body>

</html>

ফলাফল : এবার আপনার ব্রাউজারে program_009.html পেজটিকে ওপেন করুন। নিমেণর চিত্রের ন্যায় আউটপুট দেখতে পাবেন ।

ব্যাখ্যা : এখানে দেখা যাচ্ছে যে দুটি ভেরিয়েবলে ভিন্ন ভিন্ন ভ্যালু এ্যাসাইন করা আছে। ভেরিয়েবল দুটি ভিন্ন ভিন্ন বলে দুটি ভ্যালু-ই আউটপুটে দেখা যাচ্ছে।জাভাস্ক্রিপ্টের প্রতিটি স্টেটমেন্টের শেষে সেমিকোলন (;) ব্যবহার করতে হয়, না করলেও কোন অসুবিধা নেই। তবে সেমিকোলন ব্যবহার করে প্রোগ্রামিং স্টেটমেন্ট লেখা ভাল। এতে করে এক লাইনে অনেকগুলো স্টেটমেন্ট লেখা যায়।

জাভাস্ক্রিপ্ট বক্স :

অন্যান্য প্রোগ্রামিং ল্যাগুয়েজের মত জাভাস্ক্রিপ্টের বক্স ও শুরু হয় { left কালি ব্রাকেট এবং শেষ হয় } Right কালি ব্রাকেট এর মাধ্যমে। বক্সের উদ্দেশ্য হল একটি নির্দিষ্ট বক্সে কোডগুলো প্রথমে Execate করা।

নিচের কোডগুলো লক্ষ্য করুন
জাভাস্ক্রিপ্ট বক্স

1. আপনার Notepad++ ওপেন করে নিচের মত করে কোড লিখুন।এবার Program_010.html হিসাবে সেভ করুন।

<!DOCTYPE html>

<html>

<body>

<p id="para1">It is Paragraph 1.</p>

<p id="para2">It is Paragraph 2.</p>

<button type="button" onclick="Block()">Display </button>

function Block()

{

document.getElementById("para1").innerHTML="Hellow this is Nova Computer";

document.getElementById("para2").innerHTML="How are you?";

}

</script>

</body>

</html>

এখানে দেখা যাচ্ছে যে Block() ফাংশনটিতে দুটি স্টেটমেন্ট একটি বল্ককের অর্মত্মভুক্ত।

জাভাস্ক্রিপ্ট কমেন্টস :

কমেন্ট মূলত জাভাস্ক্রিপ্ট এর স্টেটমেন্ট বা ফাংশনগুলোকে ভালভাবে বিশদভাবে বোঝার জন্য লেখা হয় যা জাভাস্ক্রিপ্ট এক্সিকিউট করে না।

Single line Comment শুরু হয় // দ্বারা

মাল্টি লাইন Comment শুধু যে /* দ্বারা এবং শেষ হয় */ দ্বারা।

উদাহরন /* লাইন 1

লাইন 2

লাইন 3

লাইন 4

এর দ্বারা বুঝা যাবে যে লাইন 1,2,3,4 কোনটিই এক্সিকিউট হবে না। প্রতিটি লাইনের শেষ কমেন্ট ব্যবহার করতে চাইলে // দ্বারা কমেন্ট লেখা শুরু করতে হবে। নিমেণর কোড লক্ষ্য করা যাক।

Single line, multiple লাইনের উদাহরন এক সাথে দেয়া হল।

প্রোগ্রাম : জাভাস্ক্রিপ্ট কমেন্ট

1. আপনার Notepad++ ওপেন করে নিচের মত করে কোড লিখুন।

2. এবার Program_011.html হিসাবে সেভ করুন।

<!DOCTYPE html>

<html>

<body>

<p id="para1">It is Paragraph 1.</p>

<p id="para2">It is Paragraph 2.</p>

<button type="button" onclick="Block()">Display </button>

this function is for understanding

Block function, Here opening { and closing }

Contains a block

function Block()

{

// here GetElementById Method can read id of an html element

document.getElementById("para1").innerHTML="Hellow this is Nova Computer";

document.getElementById("para2").innerHTML="How are you?"; // here GetElementById Method can read id of an html element

}

</script>

</body>

</html>

Previous Post Next Post

বিস্তারিত জানতে নিচের বইটি সংগরহ করে নিন।

Book Name: Mastering Microsoft Word

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...