কিভাবে ড্রিমওয়েভারে একটি ড্রপ ডাউন বক্স যুক্ত করবেন (ছবি সহ)

সুচিপত্র:

কিভাবে ড্রিমওয়েভারে একটি ড্রপ ডাউন বক্স যুক্ত করবেন (ছবি সহ)
কিভাবে ড্রিমওয়েভারে একটি ড্রপ ডাউন বক্স যুক্ত করবেন (ছবি সহ)

ভিডিও: কিভাবে ড্রিমওয়েভারে একটি ড্রপ ডাউন বক্স যুক্ত করবেন (ছবি সহ)

ভিডিও: কিভাবে ড্রিমওয়েভারে একটি ড্রপ ডাউন বক্স যুক্ত করবেন (ছবি সহ)
ভিডিও: ফ্রিতে কথা বলুন রাতদিন 24 ঘন্টা যেকোন নাম্বারে | Shohag Khandokar !! 2024, এপ্রিল
Anonim

এই উইকিহাও আপনাকে শেখায় কিভাবে অ্যাডোব ড্রিমওয়েভার ব্যবহার করে একটি ওয়েবপৃষ্ঠার জন্য একটি ড্রপ-ডাউন বক্স তৈরি করতে হয়। ড্রপ-ডাউন বাক্সগুলি হল মেনু যা আপনার ওয়েবপৃষ্ঠায় কোনো আইটেম ক্লিক করার সময় "ড্রপ ডাউন" হয়, যা প্রক্রিয়ায় আরও বিকল্প উপস্থাপন করে।

ধাপ

ড্রিমওয়েভার ধাপ 1 এ একটি ড্রপ ডাউন বক্স যুক্ত করুন
ড্রিমওয়েভার ধাপ 1 এ একটি ড্রপ ডাউন বক্স যুক্ত করুন

ধাপ 1. একটি Dreamweaver প্রকল্প খুলুন।

এটি করার জন্য প্রকল্পের ফাইলে ডাবল ক্লিক করুন। আপনি যদি একটি নতুন ড্রিমওয়েভার প্রকল্প তৈরি করতে চান, তাহলে আপনি ড্রিমওয়েভার খুলবেন, ক্লিক করুন ফাইল, ক্লিক নতুন, এবং যে কোন অন-স্ক্রিন প্রম্পট অনুসরণ করুন।

ড্রিমওয়েভার ধাপ 2 এ একটি ড্রপ ডাউন বক্স যুক্ত করুন
ড্রিমওয়েভার ধাপ 2 এ একটি ড্রপ ডাউন বক্স যুক্ত করুন

পদক্ষেপ 2. একটি অর্ডার করা তালিকা তৈরি করুন।

ড্রপ-ডাউন মেনু তৈরির জন্য, আপনার অন্তত একটি বুলেট-পয়েন্ট আইটেম থাকতে হবে। আপনি CSS বন্ধ করে একটি বুলেট পয়েন্ট তৈরি করতে পারেন (দেখুন মেনু আইটেম, নির্বাচন করুন স্টাইল রেন্ডারিং, এবং ক্লিক করুন প্রদর্শন শৈলী যদি এটি চেক করা থাকে), যেখানে আপনি পয়েন্ট যোগ করতে চান সেখানে ক্লিক করুন, উইন্ডোর নীচে বুলেট পয়েন্ট আইকনে ক্লিক করুন এবং পয়েন্টের নাম টাইপ করুন। আপনার এগিয়ে যাওয়ার আগে CSS চালু করা উচিত।

  • এখানে পয়েন্টের নামটি আপনার ড্রপ-ডাউন মেনুর অ্যাক্টিভেটর হিসেবে কাজ করবে (যেমন, যে বোতামটির উপর দিয়ে একটি হভার বা ড্রপ-ডাউন মেনু খোলার জন্য চাপ দেয়)।
  • আপনার যদি ইতিমধ্যে একটি তালিকা আইটেম থাকে যা আপনি ড্রপ-ডাউন মেনুতে রূপান্তর করতে চান তবে এই পদক্ষেপটি এড়িয়ে যান।
ড্রিমওয়েভার ধাপ 3 এ একটি ড্রপ ডাউন বক্স যুক্ত করুন
ড্রিমওয়েভার ধাপ 3 এ একটি ড্রপ ডাউন বক্স যুক্ত করুন

পদক্ষেপ 3. আপনার তালিকার নাম নির্ধারণ করুন।

ক্লিক করুন কোড ট্যাব এবং নিশ্চিত করুন যে আপনি আছেন সোর্স কোড সেটিং, তারপর আপনার অর্ডার করা তালিকার কোডে স্ক্রোল করুন (এটি একটি "এর মধ্যে হবে"

"ট্যাগ এবং একটি"

"ট্যাগ) এবং উপরের" "ট্যাগটি সন্ধান করুন"

ট্যাগ। উদ্ধৃতি শব্দটি আপনার তালিকার নাম।

  • যদি আপনি একটি নাম না দেখেন, তাহলে ট্যাগটি whereোকান (যেখানে নামটি তালিকার আপনার পছন্দের নাম উল্লেখ করে) সরাসরি উপরে

    ট্যাগ

  • ড্রিমওয়েভার ধাপ 4 এ একটি ড্রপ ডাউন বক্স যুক্ত করুন
    ড্রিমওয়েভার ধাপ 4 এ একটি ড্রপ ডাউন বক্স যুক্ত করুন

    ধাপ 4. বুলেট পয়েন্ট (গুলি) সরান।

    ক্লিক করে নিশ্চিত করুন যে আপনি সঠিক জায়গায় আছেন নকশা ট্যাব এবং তারপর ক্লিক করুন সিএসএস ডিজাইনার উইন্ডোর উপরের ডান কোণে ট্যাব, তারপর নিম্নলিখিতগুলি করুন:

    • ক্লিক + "নির্বাচক" শিরোনামের ডানদিকে।
    • #Name ul লিখুন যেখানে "name" হল আপনার তালিকার নাম।
    • দুবার ↵ Enter চাপুন।
    • নিচে স্ক্রোল করুন এবং ক্লিক করুন তালিকা-শৈলী-টাইপ এর নীচে প্যানে সিএসএস ডিজাইনার ট্যাব।
    • ক্লিক কোন ফলে পপ-আপ মেনুতে।
    ড্রিমওয়েভার ধাপ 5 এ একটি ড্রপ ডাউন বক্স যুক্ত করুন
    ড্রিমওয়েভার ধাপ 5 এ একটি ড্রপ ডাউন বক্স যুক্ত করুন

    পদক্ষেপ 5. অনুভূমিকভাবে প্রদর্শন করার জন্য আপনার অর্ডার করা তালিকা পরিবর্তন করুন।

    তাই না:

    • ক্লিক + "নির্বাচক" শিরোনামের ডানদিকে।
    • #Name li লিখুন যেখানে "name" হল আপনার তালিকার নাম।
    • নীচে প্যানেলে "ফ্লোট" শিরোনামটি খুঁজুন সিএসএস ডিজাইনার ট্যাব।
    • ক্লিক করুন বাম "ফ্লোট" শিরোনামের ডানদিকে অবিলম্বে বোতাম।
    ড্রিমওয়েভার ধাপ 6 এ একটি ড্রপ ডাউন বক্স যুক্ত করুন
    ড্রিমওয়েভার ধাপ 6 এ একটি ড্রপ ডাউন বক্স যুক্ত করুন

    পদক্ষেপ 6. আপনার তালিকার জন্য একটি সক্রিয় ট্যাগ যোগ করুন।

    ক্লিক করুন + "নির্বাচকদের" ডানদিকে বোতাম, তারপর #name a লিখুন (যেখানে "নাম" আপনার তালিকার নাম) এবং ↵ Enter দুবার চাপুন।

    ড্রিমওয়েভার ধাপ 7 এ একটি ড্রপ ডাউন বক্স যুক্ত করুন
    ড্রিমওয়েভার ধাপ 7 এ একটি ড্রপ ডাউন বক্স যুক্ত করুন

    ধাপ 7. একটি পটভূমি রঙ যোগ করুন।

    নির্বাচন করুন #নাম a প্রয়োজনে আইটেম, তারপর বক্স-আকৃতির "ব্যাকগ্রাউন্ড কালার" ট্যাবে ক্লিক করুন সিএসএস ডিজাইনার ফলক, নির্বাচন করুন পেছনের রঙ বিকল্প, এবং ব্যবহার করার জন্য একটি পটভূমি রঙ নির্বাচন করুন।

    আপনার ড্রপ-ডাউন তালিকার আইটেমগুলি এই রঙটি ব্যবহার করবে।

    ড্রিমওয়েভার ধাপ 8 এ একটি ড্রপ ডাউন বক্স যুক্ত করুন
    ড্রিমওয়েভার ধাপ 8 এ একটি ড্রপ ডাউন বক্স যুক্ত করুন

    ধাপ 8. আপনার তালিকার আইটেমগুলিকে "ব্লক" ফর্ম্যাট ব্যবহার করুন।

    এই ফরম্যাটটি নিশ্চিত করে যে যখন কেউ তালিকার কোনো আইটেমে ক্লিক বা ট্যাপ করতে যায়, তখন তারা সঠিকভাবে টেক্সট সিলেক্ট করার পরিবর্তে এটির সামান্য উপরে বা নীচে সিলেক্ট করে খুলতে পারে:

    • নিশ্চিত করুন যে আপনার #নাম a আইটেম নির্বাচন করা হয় সিএসএস ডিজাইনার ট্যাব।
    • ফলকে "ডিসপ্লে" শিরোনামে নিচে স্ক্রোল করুন।
    • "ডিসপ্লে" শিরোনামের খুব ডানদিকে ক্লিক করুন, তারপরে ক্লিক করুন ব্লক ফলে মেনুতে।
    ড্রিমওয়েভার ধাপ 9 এ একটি ড্রপ ডাউন বক্স যুক্ত করুন
    ড্রিমওয়েভার ধাপ 9 এ একটি ড্রপ ডাউন বক্স যুক্ত করুন

    ধাপ 9. প্রয়োজনে প্যাডিং যোগ করুন।

    যদি আপনি লক্ষ্য করেন যে আপনার তালিকার আইটেমগুলি একে অপরের বিরুদ্ধে জ্যাম হয়ে আছে, আপনি নিম্নলিখিতগুলি করে তাদের মধ্যে কিছু স্থান রাখতে পারেন:

    • নিশ্চিত করুন যে আপনার #নাম a আইটেম নির্বাচন করা হয় সিএসএস ডিজাইনার ট্যাব।
    • প্যানেলে "প্যাডিং" শিরোনামে নিচে স্ক্রোল করুন।
    • কমপক্ষে 5 টি পড়তে উপরের এবং নীচের "px" পাঠ্য ক্ষেত্রগুলি পরিবর্তন করুন।
    • কমপক্ষে 10 পড়ার জন্য বাম এবং ডান "px" পাঠ্য ক্ষেত্র পরিবর্তন করুন।
    ড্রিমওয়েভার ধাপ 10 এ একটি ড্রপ ডাউন বক্স যুক্ত করুন
    ড্রিমওয়েভার ধাপ 10 এ একটি ড্রপ ডাউন বক্স যুক্ত করুন

    ধাপ 10. একটি হোভার রঙ তৈরি করুন।

    ড্রপ-ডাউন মেনুতে একটি আইটেমের উপর যখন আপনি আপনার মাউস কার্সারটি ঘুরান তখন এই রঙটি প্রদর্শিত হবে:

    • ক্লিক + "নির্বাচক" শিরোনামের ডানদিকে।
    • #Nave a: hover (যেখানে "নাম" আপনার তালিকার নাম) টাইপ করুন এবং ↵ Enter দুবার চাপুন।
    • "পটভূমির রঙ" ট্যাবে ক্লিক করুন।
    • নির্বাচন করুন পেছনের রঙ এবং তারপরে পটভূমির রঙের তুলনায় আপনি একটি হালকা রঙ নির্বাচন করুন।
    ড্রিমওয়েভার ধাপ 11 এ একটি ড্রপ ডাউন বক্স যুক্ত করুন
    ড্রিমওয়েভার ধাপ 11 এ একটি ড্রপ ডাউন বক্স যুক্ত করুন

    ধাপ 11. CSS বন্ধ করুন।

    ক্লিক করুন দেখুন মেনু আইটেম, নির্বাচন করুন স্টাইল রেন্ডারিং, এবং ক্লিক করুন প্রদর্শন শৈলী পপ-আউট উইন্ডোতে বিকল্প।

    যদি প্রদর্শন শৈলী অপশনটি ধূসর হয়ে গেছে, আপনার ড্রিমওয়েভার ডকুমেন্টের যেকোনো জায়গায় ক্লিক করুন এবং আবার চেষ্টা করুন।

    ড্রিমওয়েভার ধাপ 12 এ একটি ড্রপ ডাউন বক্স যুক্ত করুন
    ড্রিমওয়েভার ধাপ 12 এ একটি ড্রপ ডাউন বক্স যুক্ত করুন

    ধাপ 12. ড্রপ-ডাউন মেনু বিষয়বস্তু তৈরি করুন।

    আপনি বুলেট পয়েন্টের নিচে সাব-পয়েন্ট যোগ করে এটি করতে পারেন যা আপনি ড্রপ-ডাউন মেনুর বোতাম হিসাবে ব্যবহার করতে চান:

    • আপনি যে ড্রপ-ডাউন মেনুতে পরিণত করতে চান সেই তালিকা আইটেমের ডানদিকে ক্লিক করুন, তারপরে ↵ এন্টার টিপুন।
    • ট্যাব Press টিপুন।
    • আপনার প্রথম ড্রপ-ডাউন মেনু আইটেমের নাম লিখুন, তারপরে ↵ এন্টার টিপুন।
    • পরবর্তী ড্রপ-ডাউন মেনুর নাম টাইপ করুন, তারপরে ↵ এন্টার টিপুন এবং প্রয়োজন অনুসারে পুনরাবৃত্তি করুন।
    ড্রিমওয়েভার ধাপ 13 এ একটি ড্রপ ডাউন বক্স যুক্ত করুন
    ড্রিমওয়েভার ধাপ 13 এ একটি ড্রপ ডাউন বক্স যুক্ত করুন

    ধাপ 13. একটি বুলেট আইটেমের সাথে ড্রপ-ডাউন মেনু বিষয়বস্তু বেঁধে দিন।

    তাই না:

    • ক্লিক + "নির্বাচক" এর পাশে, তারপর #name ul ul টাইপ করুন এবং ↵ Enter দুবার চাপুন।
    • নিচে স্ক্রোল করুন এবং ক্লিক করুন প্রদর্শন, তারপর ক্লিক করুন কোন পপ-আপ মেনুতে।
    • খুঁজুন এবং ক্লিক করুন অবস্থান, তারপর ক্লিক করুন পরম পপ-আপ মেনুতে।
    ড্রিমওয়েভার ধাপ 14 এ একটি ড্রপ ডাউন বক্স যুক্ত করুন
    ড্রিমওয়েভার ধাপ 14 এ একটি ড্রপ ডাউন বক্স যুক্ত করুন

    ধাপ 14. ড্রপ-ডাউন মেনু নিজেই তৈরি করুন।

    এটি করার জন্য আপনাকে আরও একজন নির্বাচক যুক্ত করতে হবে:

    • ক্লিক + "নির্বাচক" এর পাশে, তারপর #name ul li: hover> ul টাইপ করুন এবং ↵ Enter দুবার চাপুন।
    • খুঁজুন এবং ক্লিক করুন প্রদর্শন, তারপর ক্লিক করুন ব্লক ফলে পপ-আপ মেনুতে।
    ড্রিমওয়েভার ধাপ 15 এ একটি ড্রপ ডাউন বক্স যুক্ত করুন
    ড্রিমওয়েভার ধাপ 15 এ একটি ড্রপ ডাউন বক্স যুক্ত করুন

    ধাপ 15. ড্রপ-ডাউন মেনুর বিষয়বস্তু উল্লম্বভাবে প্রদর্শন করুন।

    ডিফল্টরূপে, ড্রপ-ডাউন মেনু বিষয়বস্তু একটি অনুভূমিক বারে প্রদর্শিত হবে, কিন্তু আপনি নিম্নলিখিতগুলি করে তাদের একটি উল্লম্ব কলামে জোর করতে পারেন:

    • ক্লিক + "নির্বাচক" এর পাশে, তারপর #name ul ul li টাইপ করুন এবং ↵ Enter দুবার চাপুন।
    • "ফ্লোট" শিরোনাম খুঁজুন।
    • "কেউ নেই" ক্লিক করুন ("ভাসমান" শিরোনামের ডানদিকে বিকল্প।
    ড্রিমওয়েভার ধাপ 16 এ একটি ড্রপ ডাউন বক্স যুক্ত করুন
    ড্রিমওয়েভার ধাপ 16 এ একটি ড্রপ ডাউন বক্স যুক্ত করুন

    ধাপ 16. আপনার প্রকল্প সংরক্ষণ করুন।

    এটি করার জন্য Ctrl+S (Windows) অথবা ⌘ Command+S (Mac) টিপুন।

    আপনি যদি এই প্রকল্পের জন্য একটি নতুন ড্রিমওয়েভার ফাইল তৈরি করেন, তাহলে আপনাকে একটি নাম লিখতে হবে, একটি সংরক্ষণ স্থান নির্বাচন করতে হবে এবং ক্লিক করতে হবে সংরক্ষণ আপনার ফাইল সংরক্ষণ করার জন্য।

প্রস্তাবিত: