በ Dreamweaver (ከሥዕሎች ጋር) ተቆልቋይ ሳጥን እንዴት እንደሚጨምር

ዝርዝር ሁኔታ:

በ Dreamweaver (ከሥዕሎች ጋር) ተቆልቋይ ሳጥን እንዴት እንደሚጨምር
በ Dreamweaver (ከሥዕሎች ጋር) ተቆልቋይ ሳጥን እንዴት እንደሚጨምር

ቪዲዮ: በ Dreamweaver (ከሥዕሎች ጋር) ተቆልቋይ ሳጥን እንዴት እንደሚጨምር

ቪዲዮ: በ Dreamweaver (ከሥዕሎች ጋር) ተቆልቋይ ሳጥን እንዴት እንደሚጨምር
ቪዲዮ: Scholarship tips | Answering your questions | ነፃ የትምህርት እድል ለምትፈልጉ | PART 3 2024, ሚያዚያ
Anonim

ይህ wikiHow ለድር ገጽ ተቆልቋይ ሳጥን ለመፍጠር አዶቤ ድሪምቨርን እንዴት እንደሚጠቀሙ ያስተምርዎታል። ተቆልቋይ ሳጥኖች በድር ጣቢያዎ ላይ አንድ ንጥል ጠቅ ሲያደርግ በሂደቱ ውስጥ ተጨማሪ አማራጮችን ሲያቀርብ “ወደ ታች የሚጥሉ” ምናሌዎች ናቸው።

ደረጃዎች

በ Dreamweaver ደረጃ 1 ውስጥ አንድ ተቆልቋይ ሳጥን ያክሉ
በ Dreamweaver ደረጃ 1 ውስጥ አንድ ተቆልቋይ ሳጥን ያክሉ

ደረጃ 1. የ Dreamweaver ፕሮጀክት ይክፈቱ።

ይህንን ለማድረግ የፕሮጀክቱን ፋይል ሁለቴ ጠቅ ያድርጉ። አዲስ የ Dreamweaver ፕሮጀክት መፍጠር ከፈለጉ ፣ ይልቁንስ ድሪምቨርን ይከፍታሉ ፣ ጠቅ ያድርጉ ፋይል ፣ ጠቅ ያድርጉ አዲስ, እና ማንኛውንም የማያ ገጽ ላይ ጥያቄዎችን ይከተሉ።

በ Dreamweaver ደረጃ 2 ውስጥ ተቆልቋይ ሳጥን ያክሉ
በ Dreamweaver ደረጃ 2 ውስጥ ተቆልቋይ ሳጥን ያክሉ

ደረጃ 2. የታዘዘ ዝርዝር ይፍጠሩ።

ተቆልቋይ ምናሌን ለመፍጠር ፣ ቢያንስ አንድ ነጥበ-ነጥብ ንጥል ሊኖርዎት ይገባል። CSS ን በማጥፋት የጥይት ነጥብ መፍጠር ይችላሉ (ጠቅ ያድርጉ ይመልከቱ የምናሌ ንጥል ፣ ይምረጡ የቅጥ ማቅረቢያ, እና ጠቅ ያድርጉ የማሳያ ቅጦች ምልክት ከተደረገ) ፣ ነጥቡን ማከል የሚፈልጉትን ቦታ ጠቅ በማድረግ ፣ በመስኮቱ ግርጌ ያለውን የጥይት ነጥብ አዶ ጠቅ በማድረግ እና የነጥቡን ስም ይተይቡ። ከዚያ ከመቀጠልዎ በፊት ወደ CSS መመለስ አለብዎት።

  • የነጥቡ ስም እዚህ እንደ ተቆልቋይ ምናሌዎ ገባሪ ሆኖ ያገለግላል (ለምሳሌ ፣ ተቆልቋይ ምናሌውን የሚከፍትበት ወይም የሚያንኳኳበት አዝራር)።
  • ወደ ተቆልቋይ ምናሌ ለመለወጥ የሚፈልጉት የዝርዝር ንጥል ካለዎት ይህንን ደረጃ ይዝለሉ።
በ Dreamweaver ደረጃ 3 ውስጥ ተቆልቋይ ሳጥን ያክሉ
በ Dreamweaver ደረጃ 3 ውስጥ ተቆልቋይ ሳጥን ያክሉ

ደረጃ 3. የዝርዝርዎን ስም ይወስኑ።

ጠቅ ያድርጉ ኮድ ትር እና በ ላይ መሆንዎን ያረጋግጡ ምንጭ ኮድ ቅንብር ፣ ከዚያ ወደ የታዘዘ ዝርዝር ኮድዎ ወደ ታች ይሸብልሉ (በ “መካከል” መካከል ይሆናል)

"መለያ እና"

"መለያ) እና" "መለያውን ከላይ” ይፈልጉ

መለያ። በጥቅሶች ውስጥ ያለው ቃል የእርስዎ ዝርዝር ስም ነው።

  • ስም ካላዩ ፣ መለያውን (ስም የሚመርጠውን የዝርዝሩን ስም የሚያመለክትበትን) በቀጥታ ከላይ ያስገቡ

    መለያ.

በ Dreamweaver ደረጃ 4 ውስጥ ተቆልቋይ ሳጥን ያክሉ
በ Dreamweaver ደረጃ 4 ውስጥ ተቆልቋይ ሳጥን ያክሉ

ደረጃ 4. የጥይት ነጥቡን (ቶች) ያስወግዱ።

ጠቅ በማድረግ በትክክለኛው ቦታ ላይ መሆንዎን ያረጋግጡ ንድፍ ትር እና ከዚያ ጠቅ ያድርጉ CSS ዲዛይነር በመስኮቱ በላይኛው ቀኝ ጥግ ላይ ትር ፣ ከዚያ የሚከተሉትን ያድርጉ

  • ጠቅ ያድርጉ + ከ “መራጮች” ርዕስ በስተቀኝ በኩል።
  • የእርስዎ ዝርዝር ስም “ስም” ባለበት #ስም ul ውስጥ ይተይቡ።
  • ይጫኑ twice ሁለት ጊዜ ያስገቡ።
  • ወደ ታች ይሸብልሉ እና ጠቅ ያድርጉ ዝርዝር-ቅጥ-ዓይነት ከግርጌው በታች ባለው ንጥል ውስጥ CSS ዲዛይነር ትር።
  • ጠቅ ያድርጉ የለም በሚመጣው ብቅ-ባይ ምናሌ ውስጥ።
በ Dreamweaver ደረጃ 5 ውስጥ አንድ ተቆልቋይ ሳጥን ያክሉ
በ Dreamweaver ደረጃ 5 ውስጥ አንድ ተቆልቋይ ሳጥን ያክሉ

ደረጃ 5. በአግድም ለማሳየት የታዘዘውን ዝርዝርዎን ይለውጡ።

እንደዚህ ለማድረግ:

  • ጠቅ ያድርጉ + ከ “መራጮች” ርዕስ በስተቀኝ በኩል።
  • “ስም” ዝርዝርዎ ስም በሚሆንበት #ስም li ውስጥ ይተይቡ።
  • በግርጌው ታችኛው ክፍል ላይ “ተንሳፋፊ” የሚለውን ርዕስ ይፈልጉ CSS ዲዛይነር ትር።
  • ጠቅ ያድርጉ ግራ ከ “ተንሳፋፊው” ርዕስ በስተቀኝ በኩል ወዲያውኑ አዝራር።
በ Dreamweaver ደረጃ 6 ውስጥ ተቆልቋይ ሳጥን ያክሉ
በ Dreamweaver ደረጃ 6 ውስጥ ተቆልቋይ ሳጥን ያክሉ

ደረጃ 6. ለዝርዝርዎ ንቁ መለያ ያክሉ።

ጠቅ ያድርጉ + ከ “መራጮች” በስተቀኝ ያለው አዝራር ፣ ከዚያ በ #ስም ሀ (“ስም” ዝርዝርዎ የሚገኝበት ቦታ) ይተይቡ እና twice ሁለቴ ያስገቡ።

በ Dreamweaver ደረጃ 7 ውስጥ ተቆልቋይ ሳጥን ያክሉ
በ Dreamweaver ደረጃ 7 ውስጥ ተቆልቋይ ሳጥን ያክሉ

ደረጃ 7. የጀርባ ቀለም ያክሉ።

የሚለውን ይምረጡ #ስም ሀ አስፈላጊ ከሆነ ንጥል ፣ ከዚያ በሳጥኑ ቅርፅ ያለው “የጀርባ ቀለም” ትርን ከላይኛው ላይ ጠቅ ያድርጉ CSS ዲዛይነር ንጥል ፣ ይምረጡ ዳራ-ቀለም አማራጭ ፣ እና ለመጠቀም የጀርባ ቀለም ይምረጡ።

ተቆልቋይ ዝርዝርዎ ንጥሎች የሚጠቀሙበት ቀለም ይህ ነው።

በ Dreamweaver ደረጃ 8 ውስጥ አንድ ተቆልቋይ ሳጥን ያክሉ
በ Dreamweaver ደረጃ 8 ውስጥ አንድ ተቆልቋይ ሳጥን ያክሉ

ደረጃ 8. የዝርዝር ዕቃዎችዎ የ “ማገጃ” ቅርጸት እንዲጠቀሙ ያድርጉ።

ይህ ቅርጸት አንድ ሰው በዝርዝሩ ውስጥ አንድ ንጥል ጠቅ ለማድረግ ወይም መታ ለማድረግ ሲሄድ ጽሑፉን በትክክል ከመምረጥ ይልቅ ከላይ ወይም ከታች በትንሹ በመምረጥ ሊከፍቱት እንደሚችሉ ያረጋግጣል።

  • የእርስዎን ያረጋግጡ #ስም ሀ ንጥል በ ውስጥ ተመርጧል CSS ዲዛይነር ትር።
  • በማያ ገጹ ውስጥ ወደ “ማሳያ” ርዕስ ይሂዱ።
  • በ “ማሳያ” አርዕስት በስተቀኝ በኩል ጠቅ ያድርጉ ፣ ከዚያ ጠቅ ያድርጉ አግድ በሚያስከትለው ምናሌ ውስጥ።
በ Dreamweaver ደረጃ 9 ውስጥ አንድ ተቆልቋይ ሳጥን ያክሉ
በ Dreamweaver ደረጃ 9 ውስጥ አንድ ተቆልቋይ ሳጥን ያክሉ

ደረጃ 9. አስፈላጊ ከሆነ ንጣፎችን ይጨምሩ።

የእርስዎ ዝርዝር ዕቃዎች እርስ በእርስ እንደተጨናነቁ ካስተዋሉ የሚከተሉትን በማድረግ በመካከላቸው የተወሰነ ቦታ ማስቀመጥ ይችላሉ-

  • የእርስዎን ያረጋግጡ #ስም ሀ ንጥል በ ውስጥ ተመርጧል CSS ዲዛይነር ትር።
  • በመያዣው ውስጥ ወደ “መለጠፊያ” ርዕስ ይሂዱ።
  • ቢያንስ 5 ለማንበብ የላይ እና የታችኛውን “px” የጽሑፍ መስኮች ይለውጡ።
  • ቢያንስ 10 ን ለማንበብ የግራ እና የቀኝ “px” የጽሑፍ መስኮችን ይለውጡ።
በ Dreamweaver ደረጃ 10 ውስጥ ተቆልቋይ ሳጥን ያክሉ
በ Dreamweaver ደረጃ 10 ውስጥ ተቆልቋይ ሳጥን ያክሉ

ደረጃ 10. የማንዣበብ ቀለም ይፍጠሩ።

በተቆልቋይ ምናሌው ውስጥ ባለው ንጥል ላይ የመዳፊት ጠቋሚዎን ሲያንዣብቡ ይህ የሚታየው ቀለም ነው-

  • ጠቅ ያድርጉ + ከ “መራጮች” ርዕስ በስተቀኝ በኩል።
  • #Nave a: hover (“ስም” የዝርዝሮችዎ ስም የሚገኝበት) ይተይቡ እና ↵ ሁለቴ ያስገቡ።
  • “የጀርባ ቀለም” ትርን ጠቅ ያድርጉ።
  • ይምረጡ ዳራ-ቀለም እና ከዚያ ለጀርባ ቀለም ከተጠቀሙበት ቀለል ያለ ቀለም ይምረጡ።
በ Dreamweaver ደረጃ 11 ውስጥ አንድ ተቆልቋይ ሳጥን ያክሉ
በ Dreamweaver ደረጃ 11 ውስጥ አንድ ተቆልቋይ ሳጥን ያክሉ

ደረጃ 11. CSS ን ያጥፉ።

ጠቅ ያድርጉ ይመልከቱ የምናሌ ንጥል ፣ ይምረጡ የቅጥ አሰጣጥ, እና ጠቅ ያድርጉ የማሳያ ቅጦች በሚከፈተው መስኮት ውስጥ አማራጭ።

ከሆነ የማሳያ ቅጦች አማራጭ ግራጫማ ነው ፣ በ Dreamweaver ሰነድዎ ውስጥ በማንኛውም ቦታ ላይ ጠቅ ያድርጉ እና እንደገና ይሞክሩ።

በ Dreamweaver ደረጃ 12 ውስጥ ተቆልቋይ ሳጥን ያክሉ
በ Dreamweaver ደረጃ 12 ውስጥ ተቆልቋይ ሳጥን ያክሉ

ደረጃ 12. ተቆልቋይ የምናሌ ይዘቶችን ይፍጠሩ።

እንደ ተቆልቋይ ምናሌ አዝራር ሊጠቀሙበት ከሚፈልጉት ጥይት ነጥብ በታች ንዑስ ነጥቦችን በማከል ይህንን ማድረግ ይችላሉ-

  • ወደ ተቆልቋይ ምናሌ ለመለወጥ ከሚፈልጉት የዝርዝሩ ንጥል በስተቀኝ ጠቅ ያድርጉ ፣ ከዚያ ↵ አስገባን ይጫኑ።
  • ትር Press ን ይጫኑ።
  • የመጀመሪያውን ተቆልቋይ የምናሌ ንጥልዎን ስም ይተይቡ ፣ ከዚያ ↵ አስገባን ይጫኑ።
  • በሚቀጥለው ተቆልቋይ ምናሌ ስም ይተይቡ ፣ ከዚያ ይጫኑ ↵ አስገባ እና እንደአስፈላጊነቱ ይድገሙት።
በ Dreamweaver ደረጃ 13 ውስጥ ተቆልቋይ ሳጥን ያክሉ
በ Dreamweaver ደረጃ 13 ውስጥ ተቆልቋይ ሳጥን ያክሉ

ደረጃ 13. የተቆልቋይ ምናሌ ይዘቶችን በጥይት ንጥል ላይ ያያይዙ።

እንደዚህ ለማድረግ:

  • ጠቅ ያድርጉ + ከ “መራጮች” ቀጥሎ ፣ ከዚያ #ስም ul ul ብለው ይተይቡ እና ↵ ሁለቴ ያስገቡ።
  • ወደ ታች ይሸብልሉ እና ጠቅ ያድርጉ ማሳያ ፣ ከዚያ ጠቅ ያድርጉ የለም በብቅ ባዩ ምናሌ ውስጥ።
  • ያግኙ እና ጠቅ ያድርጉ አቀማመጥ ፣ ከዚያ ጠቅ ያድርጉ ፍፁም በብቅ ባዩ ምናሌ ውስጥ።
በ Dreamweaver ደረጃ 14 ውስጥ አንድ ተቆልቋይ ሳጥን ያክሉ
በ Dreamweaver ደረጃ 14 ውስጥ አንድ ተቆልቋይ ሳጥን ያክሉ

ደረጃ 14. ተቆልቋይ ምናሌውን ራሱ ይፍጠሩ።

ይህንን ለማድረግ ሌላ መራጭ ማከል አለብዎት

  • ጠቅ ያድርጉ + ከ “መራጮች” ቀጥሎ ፣ ከዚያ በ #ስም ul li: hover> ul ይተይቡ እና ↵ ሁለቴ ያስገቡ።
  • ያግኙ እና ጠቅ ያድርጉ ማሳያ ፣ ከዚያ ጠቅ ያድርጉ አግድ በሚመጣው ብቅ-ባይ ምናሌ ውስጥ።
በ Dreamweaver ደረጃ 15 ውስጥ አንድ ተቆልቋይ ሳጥን ያክሉ
በ Dreamweaver ደረጃ 15 ውስጥ አንድ ተቆልቋይ ሳጥን ያክሉ

ደረጃ 15. የተቆልቋይ ምናሌ ይዘቶቹ በአቀባዊ እንዲታዩ ያድርጉ።

በነባሪ ፣ ተቆልቋይ የምናሌ ይዘቶች በአግድመት አሞሌ ውስጥ ይታያሉ ፣ ግን የሚከተሉትን በማድረግ ወደ አቀባዊ አምድ ማስገደድ ይችላሉ

  • ጠቅ ያድርጉ + ከ “መራጮች” ቀጥሎ ፣ ከዚያ በ #ስም ul ul ሊ ብለው ይተይቡ እና ↵ ሁለቴ ያስገቡ።
  • “ተንሳፋፊ” የሚለውን ርዕስ ይፈልጉ።
  • “የለም” ን ጠቅ ያድርጉ () ከ “ተንሳፋፊ” ርዕስ በስተቀኝ ያለው አማራጭ።
በ Dreamweaver ደረጃ 16 ውስጥ አንድ ተቆልቋይ ሳጥን ያክሉ
በ Dreamweaver ደረጃ 16 ውስጥ አንድ ተቆልቋይ ሳጥን ያክሉ

ደረጃ 16. ፕሮጀክትዎን ያስቀምጡ።

ይህንን ለማድረግ Ctrl+S (ዊንዶውስ) ወይም ⌘ Command+S (Mac) ን ይጫኑ።

ለዚህ ፕሮጀክት አዲስ የ Dreamweaver ፋይል ከፈጠሩ ፣ ስም ማስገባት ፣ የማስቀመጫ ቦታ መምረጥ እና ጠቅ ማድረግ ያስፈልግዎታል አስቀምጥ ፋይልዎን ለማስቀመጥ።

የሚመከር: