ડ્રીમ વીવર તમારી વેબ સાઇટ માટે ડ્રોપ-ડાઉન મેનુ બનાવવાનું સરળ બનાવે છે. પરંતુ બધા HTML સ્વરૂપોની જેમ તે થોડી મુશ્કેલ હોઈ શકે છે. આ ટ્યુટોરીયલ તમને ડ્રીમ-ડાઉન મેનૂમાં ડ્રોપ-ડાઉન મેનૂ બનાવવા માટેના પગલાંઓ લઈ જવામાં આવશે.
ડ્રીમવેવર સીધા મેનૂઝ
ડ્રીમવવેર 8 પણ તમારી વેબ સાઇટ પર નેવિગેશન માટે બાંધી મેનૂ બનાવવા માટે વિઝાર્ડ પૂરા પાડે છે. મૂળભૂત ડ્રોપ-ડાઉન મેનુઓથી વિપરીત, જ્યારે તમે સમાપ્ત થાય ત્યારે આ મેનૂ ખરેખર કંઈક કરશે. તમારા ડ્રોપ-ડાઉન ફોર્મને કામ કરવા માટે તમારે કોઈપણ જાવાસ્ક્રિપ્ટ અથવા CGI લખવાની જરૂર નથી. આ ટ્યુટોરીયલ એ પણ સમજાવે છે કે જમ્પ મેનૂ બનાવવા માટે ડ્રીમવાઇવર 8 વિઝાર્ડનો ઉપયોગ કેવી રીતે કરવો.
01 નું 20
પ્રથમ ફોર્મ બનાવો
મહત્વપૂર્ણ ફોર્મ એચટીએમએલ ફોર્મ્સ અને ડ્રીમવેવર વિશે:
જમ્પ મેનૂ જેવા વિશેષ વિઝાર્ડસ સિવાય, ડ્રીમવ્વરે તમને HTML ફોર્મ્સ "વર્ક" બનાવવા માટે સહાય કરી નથી આના માટે તમને CGI અથવા JavaScript ની જરૂર છે. કૃપા કરીને મારી ટ્યુટોરીયલ જુઓ વધુ માહિતી માટે HTML ફોર્મ્સ વર્ક બનાવો.
જ્યારે તમે તમારી વેબ સાઇટ પર એક ડ્રોપ-ડાઉન મેનૂ ઉમેરી રહ્યા છો, ત્યારે તમને જરૂર તે પ્રથમ વસ્તુ તે ફરતે એક ફોર્મ છે ડ્રીમવેવરમાં, સામેલ કરો મેનૂ પર જાઓ અને ફોર્મ ક્લિક કરો, પછી "ફોર્મ" પસંદ કરો.
02 નું 20
ડિઝાઇન જુઓ માં ફોર્મ ડિસ્પ્લે
ડ્રીમવેઅર તમારા ફોર્મની સ્થિતિને દૃષ્ટિની દૃષ્ટિએ બતાવે છે, જેથી તમે જાણો છો કે તમારા ફોર્મ તત્વો ક્યાં મૂકવો. આ મહત્વપૂર્ણ છે, કારણ કે ડ્રોપ-ડાઉન મેનુ ટૅગ્સ ફોર્મ તત્વ બહાર (અને કામ કરશે નહીં) માન્ય નથી. જેમ તમે ચિત્રમાં જોઈ શકો છો, ફોર્મ એ ડિઝાઇન દ્રશ્યમાં લાલ ડોટેડ રેખા છે
20 ની 03
સૂચિ / મેનુ પસંદ કરો
ડ્રૉપ-ડાઉન મેનૂઝને "યાદી" અથવા "મેનૂ" વસ્તુઓને ડ્રીમવેવરમાં કહેવામાં આવે છે. તેથી તમારા ફોર્મમાં એક ઉમેરવા માટે, તમારે સામેલ કરો મેનૂ પર ફોર્મ મેનૂમાં જવું અને "સૂચિ / મેનુ" પસંદ કરવું આવશ્યક છે. ખાતરી કરો કે તમારું કર્સર તમારા ફોર્મ બોક્સની રેડ ડોટેડ લાઇનની અંદર હતું.
04 નું 20
ખાસ વિકલ્પો વિન્ડો
ડ્રીમવેયર વિકલ્પોમાં ઍક્સેસિબિલિટી પર સ્ક્રીન છે. હું Dreamweaver મને બધા ઍક્સેસિબિલિટી એટ્રીબ્યુટ્સ બતાવવાનું પસંદ કરું છું. અને આ સ્ક્રીન એનું પરિણામ છે. સ્વરૂપો એવી જગ્યા છે જ્યાં ઘણા વેબ સાઇટ્સ ઍક્સેસિબિલિટીમાં ઘટે છે અને આ પાંચ વિકલ્પો ભરીને તમારા ડ્રોપ-ડાઉન મેનુ તરત જ વધુ સુલભ હશે.
05 ના 20
ફોર્મ ઍક્સેસિબિલિટી
ઍક્સેસિબિલિટી વિકલ્પો છે:
લેબલ
આ ક્ષેત્ર માટેનું નામ છે. તે તમારા ફોર્મ એલિમેન્ટની બાજુમાં ટેક્સ્ટ તરીકે દેખાશે
તમે તમારા ડ્રોપ-ડાઉન મેનૂને કૉલ કરવા માગો છો તે લખો. આ પ્રશ્ન અથવા ટૂંકા શબ્દસમૂહ હોઈ શકે છે કે જે ડ્રોપ-ડાઉન મેનૂ જવાબ આપશે.
પ્રકાર
HTML માં બ્રાઉઝર પર તમારી ફોર્મ લેબલો ઓળખવા માટે એક લેબલ ટેગ શામેલ છે. લેબલ્સ ટૅગ પર "ફોર" એટ્રીબ્યુટનો ઉપયોગ કરવા માટે ટૅગ સાથેના ડ્રોપ-ડાઉન મેનુ અને લેબલ ટેક્સ્ટને લપેટી લેવાની તમારી પસંદગીઓ છે, તે ઓળખવા માટે કયા ફોર્મ ટેગ છે, અથવા લેબલ ટેગનો ઉપયોગ ન કરવો તે.
હું એટ્રીબ્યુટ માટે ઉપયોગ કરવાનું પસંદ કરું છું, તો પછી જો મને કેટલાક કારણોસર લેબલ ખસેડવાની જરૂર હોય તો તે હજુ પણ યોગ્ય ફોર્મ ફીલ્ડ સાથે જોડી દેવામાં આવશે.
પોઝિશન
તમે ડ્રોપ-ડાઉન મેનૂ પહેલાં અથવા પછી તમારા લેબલને મૂકી શકો છો.
ઍક્સેસ કી
આ એ કી છે કે જે તે ફોર્મ ફીલ્ડ પર સીધા જ મેળવવા માટે Alt અથવા Option કી સાથે ઉપયોગ કરી શકાય છે. માઉસની જરૂર વગર આ તમારા સ્વરૂપોનો ઉપયોગ કરવો સરળ બનાવે છે. HTML માં ઍક્સેસ કી કેવી રીતે સેટ કરવી
ટૅબ ઈન્ડેક્સ
વેબ પેજ દ્વારા ટેબ કરવા માટે કીબોર્ડનો ઉપયોગ કરતી વખતે આ ફોર્મ જે ફોર્મ ક્ષેત્રનો ઉપયોગ કરવો જોઈએ તે ક્રમમાં છે. ટેન્ડિડેક્સને સમજવું
જ્યારે તમે તમારા સુલભતા વિકલ્પોને અપડેટ કરી લો, ત્યારે ઓકે ક્લિક કરો
06 થી 20
મેનુ પસંદ કરો
એકવાર તમે તમારી ડ્રોપ-ડાઉન મેનૂને ડિઝાઇન દૃશ્યમાં પ્રદર્શિત કરી લો તે પછી, તમારે તેમાં વિવિધ ઘટકો ઉમેરવાની જરૂર છે. પહેલા તેના પર ક્લિક કરીને ડ્રોપ-ડાઉન મેનુ પસંદ કરો. ડ્રીમ-વીવર એ ફક્ત ડ્રોપ-ડાઉન મેનૂની આસપાસ બીજા ડોટેડ રેખા મૂકવામાં આવશે, તે બતાવવા માટે કે તમે તેને પસંદ કર્યું છે.
20 ની 07
મેનુ ગુણધર્મો
ગુણધર્મો મેનૂ તે ડ્રોપ-ડાઉન મેનૂ માટે સૂચિ / મેનૂ ગુણધર્મો પર બદલાશે. ત્યાં તમે તમારા મેનૂને એક ID (જ્યાં તે "પસંદ કરો" કહે છે) આપી શકો છો, નક્કી કરો કે તમે તેને લિસ અથવા મેનૂ તરીકે ઇચ્છો છો, તેને તમારી શૈલી શીટમાંથી શૈલી વર્ગ આપો અને ડ્રોપ-ડાઉન માટે મૂલ્યો સોંપો કરો.
સૂચિ અને મેનુ વચ્ચે શું તફાવત છે?
ડ્રીમવેઅર મેનૂ ડ્રોપ-ડાઉન મેનૂને કોઈપણ ડ્રોપ ડાઉન કહે છે જે ફક્ત એક પસંદગીને મંજૂરી આપે છે. "સૂચિ" ડ્રોપ-ડાઉનમાં બહુવિધ પસંદગીઓને પરવાનગી આપે છે અને એક કરતાં વધુ આઇટમ ઉચ્ચ હોઈ શકે છે
જો તમે ડ્રોપ-ડાઉન મેનૂ બહુવિધ રેખાઓ ઊંચી કરવા માંગો છો, તો તેને "સૂચિ" પ્રકાર પર બદલો અને "પસંદગી" બોક્સને અનચેક કરો છોડો.
08 ના 20
નવી સૂચિ આઇટમ્સ ઉમેરો
તમારા મેનૂમાં નવી આઇટમ્સ ઉમેરવા માટે, "સૂચિ મૂલ્યો ..." બટન પર ક્લિક કરો. આ ઉપરોક્ત વિંડો ખોલશે. પ્રથમ બૉક્સમાં તમારી આઇટમ લેબલ લખો. આ પૃષ્ઠ પર શું પ્રદર્શિત થશે તે છે. જો તમે કિંમત ખાલી છોડી દો છો, તો તે ફોર્મમાં શું મોકલવામાં આવશે તે પણ છે.
20 ની 09
વધુ ઉમેરો અને પુનઃક્રમાંકિત કરો
વધુ આઇટમ્સ ઉમેરવા માટે વત્તા ચિહ્ન પર ક્લિક કરો. જો તમે તેમને સૂચિ બૉક્સમાં ફરીથી ક્રમમાં ગોઠવવા માંગતા હોવ, તો જમણે ઉપર અને નીચે તીરનો ઉપયોગ કરો.
20 ના 10
તમામ વસ્તુઓ મૂલ્યો આપો
જેમ જેમ મેં પગલું 8 માં ઉલ્લેખ કર્યો છે, જો તમે કિંમતને ખાલી છોડી દો છો, તો લેબલ ફોર્મમાં મોકલવામાં આવશે. પરંતુ તમે તમારી બધી વસ્તુઓની કિંમતોને આપી શકો છો - તમારા ફોર્મમાં વૈકલ્પિક માહિતી મોકલવા માટે. તમે કૂદવાનું મેનૂઝ જેવી વસ્તુઓ માટે આનો ઘણો ઉપયોગ કરશો.
11 નું 20
ડિફૉલ્ટ પસંદ કરો
વેબ પૃષ્ઠો જે ડ્રોપ-ડાઉન આઇટમ પ્રદર્શિત કરવા માટે ડિફોલ્ટ છે તે ડિફૉલ્ટ વસ્તુ તરીકે પ્રથમ સૂચિબદ્ધ છે. પરંતુ જો તમે કોઈ અલગ પસંદ કરેલ હોય, તો તેને પ્રોપર્ટીઝ મેનૂ પર "શરૂઆતમાં પસંદ કરેલ" બૉક્સમાં પ્રકાશિત કરો.
20 ના 12
ડિઝાઇન સૂચિમાં તમારી સૂચિ જુઓ
એકવાર તમે ગુણધર્મો સંપાદિત કરી લો તે પછી, ડ્રીમવ્વરે પસંદ કરેલા ડિફૉલ્ટ મૂલ્ય સાથે તમારી ડ્રોપ-ડાઉન સૂચિ બતાવશે.
13 થી 20
કોડ વ્યૂમાં તમારી સૂચિ જુઓ
જો તમે કોડ દૃશ્ય પર સ્વિચ કરો છો, તો તમે જોઈ શકો છો કે ડ્રીમવ્વરે તમારા ડ્રોપ ડાઉન મેનૂને ખૂબ જ સ્વચ્છ કોડ સાથે ઉમેર્યો છે. એક્સેસિબિલિટી વિકલ્પો સાથે અમે ઉમેર્યા છે તે જ એકમાત્ર વિશેષતાઓ છે. આ કોડ ઇન્ડેન્ટેડ અને વાંચવા અને સમજવા માટે ખૂબ સરળ છે. તે પસંદ કરેલ = "પસંદ કરેલ" લક્ષણમાં મૂકે છે કારણ કે મેં ડ્રીમવેવરને કહ્યું છે કે હું એક્સએચટીએમએલ લખવા માટે ડિફૉલ્ટ છું.
14 નું 20
બ્રાઉઝરમાં સાચવો અને જુઓ
જો તમે દસ્તાવેજને સાચવો છો અને તેને વેબ બ્રાઉઝરમાં જુઓ છો, તો તમે જોઈ શકો છો કે તમારું ડ્રોપ-ડાઉન મેનૂ બરાબર જેવો દેખાશે.
20 ના 15
પરંતુ તે કંઈ પણ કરે નહીં
અમે ઉપર બનાવેલ મેનૂ સુંદર લાગે છે, પરંતુ તે કંઈ પણ કરતું નથી. તેને કંઈક કરવા માટે, તમારે ફોર્મ પર ફોર્મની રચના કરવાની જરૂર છે, જે સંપૂર્ણપણે અન્ય ટ્યુટોરીયલ છે
સદભાગ્યે, ડ્રીમવેઅર પાસે બિલ્ટ-ઇન ડ્રોપ-ડાઉન મેનુ સ્વરૂપ છે કે જે તમે સ્વરૂપો, CGIs, અથવા સ્ક્રિપ્ટીંગ વિશે શીખવાની જરૂર વગર તમારી સાઇટ પર તાત્કાલિક ઉપયોગ કરી શકો છો. તેને Jump મેનુ કહેવામાં આવે છે
ડ્રીમવેવર સીધા આના પર જાવ મેનૂ નામ અને URL સાથે ડ્રોપ-ડાઉન મેનૂ સેટ કરે છે. પછી તમે મેનૂમાં આઇટમ પસંદ કરી શકો છો અને વેબ પેજ તે સ્થાન પર જશે, જો તમે કોઈ લિંક પર ક્લિક કર્યું હોત તો.
સામેલ કરો મેનૂ પર જાઓ અને ફોર્મ પસંદ કરો અને પછી મેનુ ખોલો.
20 નું 16
મેનુ વિંડો ખોલો
સ્ટાન્ડર્ડ ડ્રોપ-ડાઉન મેનૂથી વિપરીત, Jump મેનુ તમારા મેનૂ આઇટમ્સને નામ આપવા અને ફોર્મ કેવી રીતે કામ કરવું તે વિશે વિગતો ઉમેરવા માટે નવી વિન્ડો ખોલશે.
પ્રથમ આઇટમ માટે, ટેક્સ્ટ "અનામાંકિત 1" ને તમે તેને વાંચવા અને તે લિંકને જ્યાં ઉમેરવું જોઈએ તે URL ઉમેરવા માંગો છો.
17 ની 20
તમારા સીધા આના પર જાવ મેનૂ પર આઇટમ્સ ઉમેરો
તમારા જમ્પ મેનૂમાં એક નવી આઇટમ ઉમેરવા ઍડ આઇટમ પર ક્લિક કરો. તમે ઈચ્છો તેટલા આઇટમ્સ ઉમેરો
18 નું 20
મેનુ વિકલ્પો સીધા આના પર જાઓ
તમે ઇચ્છો તે તમામ લિંક્સ ઉમેરા પછી, તમારે તમારા વિકલ્પો પસંદ કરવો જોઈએ:
માં URL ખોલો
જો તમારી પાસે ફ્રેમ્સેટ છે, તો તમે લિંક્સ એક અલગ ફ્રેમમાં ખોલી શકો છો. અથવા તમે મુખ્ય વિંડોનો વિકલ્પ વિશિષ્ટ લક્ષ્યમાં બદલી શકો છો જેથી URL નવી વિંડોમાં અથવા અન્ય જગ્યાએ ખોલશે.
મેનુ નામ
તમારા મેનૂને પૃષ્ઠ માટે અનન્ય ID આપો. આ જરૂરી છે જેથી સ્ક્રિપ્ટ યોગ્ય રીતે કામ કરશે. તે તમને એક જ ફોર્મમાં બહુવિધ જમ્પ મેનૂઝની પરવાનગી આપે છે - ફક્ત તેમને બધા અલગ નામ આપો.
મેનુ પછી જાઓ બટન શામેલ કરો
હું આ પસંદ કરવા માંગુ છું કારણ કે ક્યારેક જ્યારે સ્ક્રીપ્ટ મેનૂ બદલાય ત્યારે કામ કરતું નથી. તે વધુ સુલભ છે.
URL ફેરફાર પછી પ્રથમ આઇટમ પસંદ કરો
જો તમારી પાસે પ્રથમ મેનુ વસ્તુ તરીકે "એક પસંદ કરો" જેવા પ્રોમ્પ્ટ હોય તો આ પસંદ કરો આનાથી વીમો મળશે કે તે આઇટમ પૃષ્ઠ પર ડિફોલ્ટ રહે છે.
20 ના 19
Jump મેનુ ડિઝાઇન જુઓ
તમારા પ્રથમ મેનૂની જેમ જ, ડ્રીમવવેરે ડિફૉલ્ટ દ્રશ્યમાં તમારી બાંધી મેનૂને ડિફૉલ્ટ વસ્તુ દૃશ્યમાન સાથે સુયોજિત કરે છે. તમે ડ્રોપ-ડાઉન મેનુને સંપાદિત કરી શકો છો, જેમ કે તમે કોઈપણ અન્ય
જો તમે તેને સંપાદિત કરો છો, તો ખાતરી કરો કે વસ્તુઓ પરના કોઈપણ ID ને બદલશો નહી, અન્યથા સ્ક્રિપ્ટ કાર્ય કરશે નહીં.
20 ના 20
બ્રાઉઝરમાં મેનુ ખોલો
ફાઇલને સાચવી રહ્યું છે અને F12 હિટ કરીને તમારા મનપસંદ બ્રાઉઝરમાં પૃષ્ઠ પ્રદર્શિત થશે. ત્યાં તમે કોઈ વિકલ્પ પસંદ કરી શકો છો, "ગો" ક્લિક કરો અને બાંધી મેનૂ કાર્ય કરે છે!