රවුම් මෙනු බාර් එකක් Adobe Muse වලින් එකතු කරන ආකාරය
Adobe Muse යනු Adobe සමාගම නිර්මාණය කළ වෙබ් නිර්මාණ මෘදුකාංගයකි. එය HTML හෝ CSS කේත ලිවීමකින් තොරව, drag and drop ක්‍රමයට වෙබ් අඩවි නිර්මාණය කිරීමට ඉඩ සලසයි. නිර්මාණකරුවන්ට එය ඉතා ප්‍රයෝජනවත් වන්නේ, ඔවුන්ගේ සංකල්ප ඉක්මනින් ප්‍රායෝගික වෙබ් අඩවි බවට පරිවර්තනය කළ හැකි නිසාය.
ඕනෑම වෙබ් අඩවියක මෙනු බාර් එක පරිශීලක අත්දැකීමේ මූලික අංගයකි. රවුම් කොන් සහිත මෙනු බාර් එකක් නවීන සහ මෘදු පෙනුමක් ලබා දෙයි. එවැනි මෙනු බාර් එකක් කෝණාකාර මෙනු වලට වඩා ආකර්ෂණීය ලෙස පෙනේ, එබැවින් බොහෝ නවීන වෙබ් අඩවි මෙම මෝස්තරය තෝරා ගනී.
මෙම ලිපියෙන් Adobe Muse මඟින් රවුම් මෙනු බාර් එකක් සාදා ගන්නා ක්‍රමය, ඒ සමඟම CSS රූල සහ ප්‍රතිචාරාත්මක සැකසීම් ඉගෙන ගනිමු. මේ සඳහා ඔබට ගැඹුරු කේත දැනුමක් අවශ්‍ය නොවේ; Adobe Muse හි දෘශ්‍ය මෙවලම් ප්‍රමාණවත් වේ.
Adobe Muse හි මෙනු බාර් එකක් යොදන ආකාරය
Adobe Muse විවෘත කළ විට, වම් පැත්තේ ඇති "Widgets" පැනලයෙන් "Menu Bar" තෝරන්න. එය ඔබේ වැඩ පුවරුව මතට ඇදගෙන ගියාම, ස්වයංක්‍රීයව මෙනු එකක් දර්ශනය වේ. එය ඔබට ස්ථානය, ප්‍රමාණය, සහ වර්ණ සකස් කිරීමට ඉඩ සලසයි.
මෙනු බාර් එක මත ක්ලික් කළ විට, ඉහළ මෙවලම් තීරුවේ "Fill" කොටසෙන් පසුබිම් වර්ණය වෙනස් කළ හැකිය. මෙහිදී ඔබට solid color, gradient, හෝ texture ඕනෑම එකක් භාවිතා කළ හැකි අතර, ආරම්භයේ සිටම ඔබේ වෙබ් අඩවියේ සමස්ත මාතෘකාවට ගැළපෙන තේරීමක් කිරීම වැදගත්ය.
රවුම් කොන් ලක්ෂණය සැකසීම
Adobe Muse හි සම්මත මෙනු බාර් එකක් කෝණාකාර කොන් සහිතව පෙනේ. රවුම් පෙනුමක් ලබා ගැනීමට නම්, ඔබට CSS Designer මෙවලම භාවිතා කළ යුතුය.
CSS Designer පැනලයේ "+" සංකේතය ක්ලික් කර, "Corner Radius" විකල්පය තෝරන්න. පික්සල් 8 ත් 14 ත් අතර අගයක් බොහෝ විට සුදුසුය. ඉහළ අගයන් (20px+) ඉතා රවුම් ස්වරූපයක් ලබා දෙන නමුත්, මෙනු බාර් එකකට සාමාන්‍යයෙන් මධ්‍යස්ථ අගයක් ප්‍රමාණවත් වේ.
CSS මෙවලම් භාවිතයෙන් රවුම් මෙනු බාර් එකක් නිර්මාණය කිරීම
"States" කොටස මඟින් ඔබට hover, active, සහ selected states වෙනස් කිරීමට ඉඩ දෙයි. hover state එකේ පසුබිම් වර්ණය වෙනස් කිරීමෙන්, ක්ලික් කළ හැකි මෙනු බාර් එකක් නිර්මාණය කළ හැකිය. මෙවැනි CSS ගුණ දෙක තුනක් එකට යෙදීමෙන් ඇතිවන ප්‍රතිඵලය පුදුම සහගත වේ.
මෙවැනි කේත ව්‍යුහයන් ගැඹුරින් අවබෝධ කර ගැනීමට කැමති අයට, Python dataclasses සමඟ දත්ත නිරූපණය පිළිබඳ ලිපිය ද කියවීම වටිනාකමකි. එහි ක්‍රමවේදය Adobe Muse මෙන්ම වෙබ් නිර්මාණ ක්ෂේත්‍රයටද යොදා ගත හැකි මූලධාර්ම දක්වා ඇත.
වර්ණ සහ දෘශ්‍ය සාමය තේරීම
වර්ණ තේරීම මෙනු බාර් එකක සාර්ථකත්වය තීරණය කරන වැදගත් සාධකයකි. ඔබේ වෙබ් අඩවියේ සමස්ත වර්ණ පැලන්ට ගැළපෙන වර්ණ තෝරන්න. අධික ලෙස තියුණු වර්ණ (neon colors) මෙනු බාර් වලට සුදුසු නැත.
අකුරු වර්ණය සහ පසුබිමට අතර contrast ratio ඉහළ තිබීම වැදගත්ය. සුදු පසුබිමක් මත කළු අකුරු, නිල් පසුබිමක් මත සුදු අකුරු හොඳ තේරීම් වේ. මෙහිදී WCAG මාර්ගෝපදේශ අනුව 4.5:1 contrast ratio එකක් පවත්වා ගැනීම වඩාත් යෝග්‍ය වේ. එමඟින් දුරස්ථ දෘශ්‍යාබාධ සහිත පරිශීලකයින්ට ද පහසුවෙන් කියවිය හැකිය.
ප්‍රතිචාරාත්මක සැකසුම සහ උපාංග සහතික කිරීම
| උපාංගය | යෝග්‍ය කොන් අගය | යෝග්‍ය අකුරු ප්‍රමාණය | පේළි ගණන |
|---|---|---|---|
| ඩෙස්ක්ටොප් | 12px - 16px | 15px - 17px | 1 |
| ටැබ්ලට් | 10px - 12px | 13px - 15px | 1 |
| ජංගම දුරකථන | 6px - 10px | 12px - 14px | 1 |
මේ අගයන් ඔබේ රවුම් මෙනු බාර් එක සඳහා ආරම්භක සැකසුමක් ලෙස ගන්න. Adobe Muse හි "Responsive" විශේෂාංගය මඟින් සෑම උපාංගයක් සඳහාම වෙනම breakpoints නිර්මාණය කළ හැකිය. විවිධ උපාංග සඳහා අනුකූලතා තිබීමේ මූලධාර්මය Arduino මූලධාර්ම ඉගෙන ගැනීමේදීද දක්නට ලැබේ; දෙක්හිම විවිධ පරිසරයන් සඳහා ප්‍රශ්න විසඳුම් ලබා දීමේ පොදු ප්‍රවේශයක් ඇත.
පොදු ගැටළු විසඳීම
බොහෝ ආරම්භකයින් මුහුණ දෙන පොදු ගැටළුවක් වන්නේ රවුම් කොන් බ්‍රව්සරයේ නොපෙන්වීමයි. මෙයට හේතුව පැරණි බ්‍රව්සරයක් (Internet Explorer වැනි) විය හැකිය. නවීන Chrome, Firefox, හෝ Edge බ්‍රව්සර වල මෙය කිසිදු ප්‍රශ්නයකින් තොරව ක්‍රියාත්මක වේ.
අනෙක් පොදු ගැටළුව වන්නේ මෙනු බාර් එක උපාංගයේ පළලට ගැළපීමයි. මෙයට විසඳුම පික්සල් ඒකක වෙනුවට percentage units භාවිතා කිරීමයි. මෙවැනි ගැටළු විසඳීමේදී VB.NET යෙදුම් සංවර්ධන ක්ෂේත්‍රයේ භාවිතා වන debugging ක්‍රමවේදයන්ද මෙතැනදී උපකාරී වේ; පද්ධතියක හැසිරීම පියවරෙන් පියවර විමර්ශනය කිරීමේ සමාන ක්‍රමවේදයන් මෙහිදී ද යොදා ගත හැකිය.
මේ පියවරයන් අනුගමනය කිරීමෙන් ඔබට Adobe Muse වලින් රවුම් මෙනු බාර් එකක් සාදා ගත හැකිය. ඔබ ඉගෙන ගත් පාඩම්, මුහුණ දුන් ගැටළු, හෝ වැඩිදියුණු කළ යුතු කරුණු අපගේ ප්‍රතිචාර පිටුව හරහා අපට දැනුම් දෙන්න. ඔබේ ප්‍රතිචාර අපගේ ඉදිරි සටහන් වඩාත් ප්‍රයෝජනවත් කිරීමට හේතු වනු ඇත.