যা জানতে হবে
- Insert > Form > Form এ যান। ফর্মে বিন্দুযুক্ত লাল লাইনে ক্লিক করুন এবং Insert > Form > লিস্ট/মেনু এ যান। অ্যাক্সেসযোগ্যতার বিকল্পগুলি বেছে নিন।
- মেনুতে ক্লিক করুন এবং এর বৈশিষ্ট্য নির্বাচন করুন, তারপর নতুন মেনু আইটেম যোগ করতে তালিকা মান নির্বাচন করুন। আরও আইটেম যোগ করতে প্লাস চিহ্ন ক্লিক করুন৷
- আইটেমের মান যোগ করুন এবং একটি ডিফল্ট আইটেম বেছে নিন। অ্যাকশন যোগ করতে, Insert > Form > জাম্প মেনু যান। জাম্প মেনুতে আইটেম যোগ করুন এবং সংরক্ষণ করুন।
Dreamweaver আপনার ওয়েবসাইটের জন্য ড্রপ-ডাউন মেনু তৈরি করা সহজ করে তোলে। কিন্তু সব এইচটিএমএল ফর্ম মত, তারা একটি বিট চতুর হতে পারে. এই টিউটোরিয়ালটি আপনাকে Dreamweaver-এ একটি ড্রপ-ডাউন মেনু তৈরি করার ধাপগুলোর মধ্য দিয়ে নিয়ে যাবে।
ড্রিমওয়েভার জাম্প মেনু
Dreamweaver 8 আপনার ওয়েব সাইটে নেভিগেশনের জন্য একটি জাম্প মেনু তৈরি করার জন্য একটি উইজার্ড প্রদান করে। মৌলিক ড্রপ-ডাউন মেনু থেকে ভিন্ন, আপনি শেষ হয়ে গেলে এই মেনু কিছু করবে। আপনার ড্রপ-ডাউন ফর্ম কাজ করার জন্য আপনাকে কোনো জাভাস্ক্রিপ্ট বা CGI লিখতে হবে না। এই টিউটোরিয়ালটি আরও ব্যাখ্যা করে যে কীভাবে একটি জাম্প মেনু তৈরি করতে Dreamweaver 8 উইজার্ড ব্যবহার করতে হয়৷
প্রথমে, ফর্মটি তৈরি করুন
জাম্প মেনুর মত বিশেষ উইজার্ড ব্যতীত, Dreamweaver আপনাকে HTML ফর্মগুলিকে "কাজ" করতে সাহায্য করে না। এর জন্য আপনার একটি CGI বা JavaScript প্রয়োজন।
যখন আপনি আপনার ওয়েব সাইটে একটি ড্রপ-ডাউন মেনু যোগ করছেন, আপনার প্রথমে যে জিনিসটি প্রয়োজন তা হল এটিকে ঘিরে রাখার জন্য একটি ফর্ম৷ Dreamweaver-এ, Insert মেনুতে যান এবং Form-এ ক্লিক করুন, তারপর "ফর্ম" বেছে নিন।
ডিজাইন ভিউতে ফর্ম ডিসপ্লে
Dreamweaver ডিজাইন ভিউতে আপনার ফর্মের অবস্থান দৃশ্যমানভাবে দেখায়, যাতে আপনি জানেন আপনার ফর্ম উপাদানগুলি কোথায় রাখবেন কারণ ড্রপ-ডাউন মেনু ট্যাগগুলি ফর্ম উপাদানের বাইরে বৈধ নয় (এবং কাজ করবে না)৷ আপনি ছবিতে দেখতে পাচ্ছেন, ফর্মটি ডিজাইন ভিউতে লাল বিন্দুযুক্ত রেখা৷
লিস্ট/মেনু বেছে নিন
ড্রপ-ডাউন মেনুগুলিকে Dreamweaver-এ "তালিকা" বা "মেনু" আইটেম বলা হয়। তাই আপনার ফর্মে একটি যোগ করতে, আপনাকে সন্নিবেশ মেনুতে ফর্ম মেনুতে যেতে হবে এবং "তালিকা/মেনু" নির্বাচন করতে হবে। নিশ্চিত করুন যে আপনার কার্সারটি আপনার ফর্ম বক্সের লাল ডটেড লাইনের মধ্যে ছিল৷
বিশেষ বিকল্প উইন্ডো
ড্রিমওয়েভার বিকল্পগুলিতে, অ্যাক্সেসিবিলিটির একটি স্ক্রিন রয়েছে৷ আপনি যদি এই পাঁচটি বিকল্প পূরণ করেন তবে আপনার ড্রপ-ডাউন মেনুগুলি অবিলম্বে অন্যান্য ওয়েবসাইটের চেয়ে বেশি অ্যাক্সেসযোগ্য হবে৷
ফর্ম অ্যাক্সেসযোগ্যতা
অভিগম্যতার বিকল্পগুলি হল:
লেবেল
লেবেল ক্ষেত্রটি আপনার ফর্ম উপাদানের পাশে পাঠ্য হিসাবে দেখায়৷ আপনার ড্রপ-ডাউন মেনুর জন্য একটি নাম টাইপ করুন। এটি একটি প্রশ্ন বা সংক্ষিপ্ত বাক্যাংশ হতে পারে যার ড্রপ-ডাউন মেনু উত্তর দেবে।
শৈলী
HTML ওয়েব ব্রাউজারে আপনার ফর্ম লেবেল সনাক্ত করতে একটি লেবেল ট্যাগ অন্তর্ভুক্ত করে৷ আপনার পছন্দগুলি হ'ল ড্রপ-ডাউন মেনু এবং লেবেল পাঠ্যটিকে ট্যাগের সাথে মোড়ানো, লেবেল ট্যাগের "ফর" বৈশিষ্ট্যটি ব্যবহার করা যাতে এটি কোন ফর্ম ট্যাগটি উল্লেখ করে তা সনাক্ত করতে, বা লেবেল ট্যাগটি একেবারেই ব্যবহার না করা৷
পজিশন
আপনি ড্রপ-ডাউন মেনুর আগে বা পরে আপনার লেবেল রাখতে পারেন।
অ্যাক্সেস কী
দর্শকরা সরাসরি সেই ফর্ম ফিল্ডে যেতে "ইমেজ" বা বিকল্প কী সহ একটি অ্যাক্সেস কী ব্যবহার করতে পারেন। এই কীবোর্ড শর্টকাটটি আপনার ফর্মগুলিকে মাউস ছাড়াই ব্যবহার করা সহজ করে তোলে৷ alt="
ট্যাব সূচক
ট্যাব সূচী হল ওয়েব পৃষ্ঠার মাধ্যমে ট্যাব করার জন্য কীবোর্ড ব্যবহার করার সময় ব্যবহারকারীদের কীভাবে ফর্ম ক্ষেত্রগুলি অ্যাক্সেস করা উচিত৷
যখন আপনি আপনার অ্যাক্সেসযোগ্যতার বিকল্পগুলি আপডেট করবেন, ঠিক আছে ক্লিক করুন৷
মেনু নির্বাচন করুন
ড্রিমওয়েভার ডিজাইন ভিউতে আপনার ড্রপ-ডাউন মেনু প্রদর্শিত হলে, আপনাকে বিভিন্ন উপাদান যোগ করতে হবে। প্রথমে, ড্রপ-ডাউন মেনুতে ক্লিক করে নির্বাচন করুন। আপনি এটি বেছে নিয়েছেন তা দেখানোর জন্য Dreamweaver শুধু ড্রপ-ডাউন মেনুর চারপাশে আরেকটি ডটেড লাইন রাখবে।
মেনু বৈশিষ্ট্য
প্রপার্টি মেনু সেই ড্রপ-ডাউন মেনুর তালিকা/মেনু বৈশিষ্ট্যে পরিবর্তিত হবে। সেখানে আপনি আপনার মেনুকে একটি আইডি দিতে পারেন (যেখানে এটি "নির্বাচন" বলে), আপনি এটি একটি তালিকা বা একটি মেনু হতে চান কিনা তা নির্ধারণ করুন, আপনার স্টাইল শীট থেকে এটিকে একটি স্টাইল ক্লাস দিন এবং ড্রপ-ডাউনে মান নির্ধারণ করুন৷
তালিকা এবং মেনুর মধ্যে পার্থক্য কী?
Dreamweaver একটি মেনুকে ড্রপ-ডাউন মেনু বলে যে কোনও ড্রপ-ডাউন যা শুধুমাত্র একটি নির্বাচনের অনুমতি দেয়। একটি "তালিকা" ড্রপ-ডাউনে একাধিক পছন্দের অনুমতি দেয় এবং একাধিক আইটেম উচ্চ হতে পারে।
যদি আপনি একটি ড্রপ-ডাউন মেনু একাধিক লাইনের উচ্চতায় চান, তবে এটিকে একটি "তালিকা" টাইপে পরিবর্তন করুন এবং "নির্বাচন" বক্সটি টিক চিহ্ন ছাড়াই ছেড়ে দিন।
নতুন তালিকা আইটেম যোগ করুন
আপনার মেনুতে নতুন আইটেম যোগ করতে, "তালিকা মান…" বোতামে ক্লিক করুন, যা উপরের উইন্ডোটি খোলে। তারপর, প্রথম বাক্সে আপনার আইটেম লেবেল টাইপ করুন. এটি পৃষ্ঠায় প্রদর্শিত হবে৷
আরো যোগ করুন এবং পুনরায় সাজান
আরো আইটেম যোগ করতে প্লাস আইকনে ক্লিক করুন। আপনি যদি তালিকা বাক্সে তাদের পুনরায় অর্ডার করতে চান তবে ডানদিকে উপরের এবং নীচের তীরগুলি ব্যবহার করুন৷
সমস্ত আইটেমের মান দিন
আপনি যদি মানটি ফাঁকা রাখেন তবে লেবেলটি ফর্মে যাবে৷ কিন্তু আপনি আপনার সমস্ত আইটেমের মান দিতে পারেন - আপনার ফর্মে বিকল্প তথ্য পাঠাতে। আপনি জাম্প মেনু এবং হাইপারলিঙ্কিংয়ের মতো জিনিসগুলির জন্য এটি অনেক ব্যবহার করবেন৷
একটি ডিফল্ট চয়ন করুন
ওয়েব পৃষ্ঠাগুলি ডিফল্ট আইটেম হিসাবে প্রথমে তালিকাভুক্ত যে কোনও ড্রপ-ডাউন আইটেম প্রদর্শন করতে ডিফল্ট। কিন্তু আপনি যদি অন্য একটি নির্বাচন করতে চান তবে বৈশিষ্ট্য মেনুতে "প্রাথমিকভাবে নির্বাচিত" বাক্সে এটি হাইলাইট করুন৷
ডিজাইন ভিউতে আপনার তালিকা দেখুন
আপনার বৈশিষ্ট্যগুলি সম্পাদনা করা হয়ে গেলে, Dreamweaver আপনার ড্রপ-ডাউন তালিকাটি ডিফল্ট মান নির্বাচন করে দেখাবে।
কোড ভিউতে আপনার তালিকা দেখুন
আপনি যদি কোড ভিউতে স্যুইচ করেন, আপনি দেখতে পাবেন যে Dreamweaver আপনার ড্রপ-ডাউন মেনুটি পরিষ্কার কোড সহ যোগ করে। শুধুমাত্র অতিরিক্ত বৈশিষ্ট্য হল অ্যাক্সেসিবিলিটি বিকল্প। কোডটি সব ইন্ডেন্ট করা এবং পড়া এবং বোঝা খুব সহজ৷
ব্রাউজারে সংরক্ষণ করুন এবং দেখুন
যদি আপনি দস্তাবেজটি সংরক্ষণ করেন এবং এটি একটি ওয়েব ব্রাউজারে দেখেন, আপনি দেখতে পাবেন যে আপনার ড্রপ-ডাউন মেনু ঠিক যেমনটি আপনি আশা করছেন ঠিক তেমনই দেখাচ্ছে৷
কিন্তু এটা কিছু করে না…
আমরা উপরে যে মেনুটি তৈরি করেছি তা দেখতে সুন্দর, কিন্তু এটি কিছুই করে না। এটিকে কিছু করার জন্য, আপনাকে ফর্মটিতেই একটি ফর্ম অ্যাকশন সেট আপ করতে হবে৷
সৌভাগ্যক্রমে, Dreamweaver-এর একটি অন্তর্নির্মিত ড্রপ-ডাউন মেনু ফর্ম রয়েছে যা আপনি ফর্ম, CGI, বা স্ক্রিপ্টিং সম্পর্কে শেখার প্রয়োজন ছাড়াই আপনার সাইটে অবিলম্বে ব্যবহার করতে পারেন৷ একে জাম্প মেনু বলে।
ড্রিমওয়েভার জাম্প মেনু নাম এবং URL সহ একটি ড্রপ-ডাউন মেনু সেট আপ করে৷ তারপর আপনি মেনুতে একটি আইটেম চয়ন করতে পারেন, এবং ওয়েব পৃষ্ঠাটি সেই অবস্থানে চলে যাবে, ঠিক যেমন আপনি একটি লিঙ্কে ক্লিক করেছেন৷
ইনসার্ট মেনুতে যান এবং ফর্ম এবং তারপরে জাম্প মেনু বেছে নিন।
জাম্প মেনু উইন্ডো
মানক ড্রপ-ডাউন মেনুর বিপরীতে, জাম্প মেনু আপনার মেনু আইটেমগুলির নাম দেওয়ার জন্য এবং ফর্মটি কীভাবে কাজ করা উচিত সে সম্পর্কে বিশদ যোগ করার জন্য একটি নতুন উইন্ডো খোলে৷
প্রথম আইটেমের জন্য, "শিরোনামবিহীন1" পাঠ্যটিকে আপনি যা পড়তে চান তাতে পরিবর্তন করুন এবং একটি URL যোগ করুন।
আপনার জাম্প মেনুতে আইটেম যোগ করুন
আপনার জাম্প মেনুতে একটি নতুন আইটেম যোগ করতে যোগ আইটেমটিতে ক্লিক করুন। যত খুশি আইটেম যোগ করুন।
জাম্প মেনু বিকল্প
আপনি আপনার পছন্দসই সমস্ত লিঙ্ক যুক্ত করার পরে, আপনাকে আপনার বিকল্পগুলি বেছে নিতে হবে:
এ URL খুলুন
আপনার যদি একটি ফ্রেমসেট থাকে, তাহলে আপনি একটি ভিন্ন ফ্রেমে লিঙ্কগুলি খুলতে পারেন৷ অথবা আপনি প্রধান উইন্ডোর বিকল্পটিকে একটি বিশেষ লক্ষ্যে পরিবর্তন করতে পারেন যাতে URLটি একটি নতুন উইন্ডোতে বা অন্য কোথাও খুলতে পারে।
মেনুর নাম
আপনার মেনুতে পেজের জন্য একটি অনন্য আইডি দিন। এটা প্রয়োজন যাতে স্ক্রিপ্ট সঠিকভাবে কাজ করবে। এটি আপনাকে এক ফর্মে একাধিক জাম্প মেনু রাখার অনুমতি দেয় - তাদের সমস্ত আলাদা নাম দিন।
মেনুর পরে গো বোতাম ঢোকান
আমি এটি নির্বাচন করতে পছন্দ করি কারণ কখনও কখনও মেনু পরিবর্তন হলে স্ক্রিপ্ট কাজ করে না। এটি আরও অ্যাক্সেসযোগ্য৷
URL পরিবর্তনের পর প্রথম আইটেম নির্বাচন করুন
আপনার কাছে প্রথম মেনু আইটেম হিসাবে "একটি নির্বাচন করুন" এর মতো প্রম্পট থাকলে এটি নির্বাচন করুন৷ এটি নিশ্চিত করবে যে আইটেমটি পৃষ্ঠায় ডিফল্ট থাকবে।
জাম্প মেনু ডিজাইন ভিউ
আপনার প্রথম মেনুর মতই, Dreamweaver ডিজাইন ভিউতে আপনার জাম্প মেনু সেট আপ করে যাতে ডিফল্ট আইটেম দৃশ্যমান হয়। তারপরে আপনি ড্রপ-ডাউন মেনুটি সম্পাদনা করতে পারেন যেমন আপনি অন্য যেকোন করতে পারেন৷
আপনি যদি এটি সম্পাদনা করেন তবে নিশ্চিত করুন যে আইটেমগুলিতে কোনও আইডি পরিবর্তন করবেন না; অন্যথায়, স্ক্রিপ্টটি কাজ নাও করতে পারে৷
ব্রাউজারে জাম্প মেনু
ফাইলটি সংরক্ষণ করা এবং F12 চাপলে আপনার পছন্দের ব্রাউজারে পৃষ্ঠাটি প্রদর্শিত হবে। সেখানে আপনি একটি বিকল্প নির্বাচন করতে পারেন, "যান" এ ক্লিক করুন এবং জাম্প মেনু কাজ করে।
