ડ્રીમવેવરમાં એચટીએમએલ કોડ લખવા

તમારે ફક્ત WYSIWYG નો ઉપયોગ કરવાની જરૂર નથી

ડ્રીમ વીવર એક મહાન WYSIWYG એડિટર છે , પરંતુ જો તમે "તમે શું જુઓ છો તે તમે શું મેળવ્યું" માં વેબ પૃષ્ઠો લખવામાં રુચિ નથી, તો તમે હજુ પણ ડ્રીમવેવરનો ઉપયોગ કરી શકો છો કારણ કે તે એક મહાન ટેક્સ્ટ એડિટર પણ છે. પરંતુ ડ્રીમવાઇવર કોડ એડિટરમાં રસ્તાની બાજુએ ઘણા બધા લક્ષણો છે જે મુખ્ય ધ્યાન કેન્દ્રિત છે "ડિઝાઇન દૃશ્ય" અથવા ઉત્પાદનના WYSIWYG સંપાદક ભાગ પર.

કેવી રીતે ડ્રીમવેવર કોડ જુઓ ઇનટુ મેળવો

જો તમે ક્યારેય પૃષ્ઠની ટોચ પર ત્રણ બટન્સ જોયા નહીં તે પહેલાં તમે ક્યારેય ડ્રીમવાઇવર તરીકે HTML સંપાદક તરીકે ઉપયોગ કર્યો નથી: "કોડ," "સ્પ્લિટ" અને "ડિઝાઇન." "ડિઝાઇન દૃશ્ય" અથવા WYSIWYG મોડમાં ડિફૉલ્ટ દ્વારા ડ્રીમવેઅર પ્રારંભ થાય છે. પરંતુ HTML કોડ જોવા અને સંપાદિત કરવા પર સ્વિચ કરવાનું સરળ છે. ફક્ત "કોડ" બટન પર ક્લિક કરો. અથવા, જુઓ મેનુમાં જાઓ અને "કોડ" પસંદ કરો.

જો તમે હમણાં જ HTML લખવા કેવી રીતે શીખી રહ્યા છો અથવા તમે કેવી રીતે તમારા ફેરફારો તમારા દસ્તાવેજ પર અસર કરશે તે સમજવા માંગો છો, તો તમે એક જ સમયે કોડ દૃશ્ય અને ડિઝાઇન દૃશ્ય ખોલી શકો છો. આ પદ્ધતિની સુંદરતા એ છે કે તમે બન્ને વિંડોઝમાં પણ સંપાદિત કરી શકો છો. તેથી તમે HTML માં તમારી છબી ટેગ માટેનો કોડ લખી શકો છો અને પછી ડિઝાઇન દ્રશ્યનો ઉપયોગ તેને ડ્રેગ અને ડ્રોપ સાથેના બીજા સ્થાન પર ખસેડવા માટે કરી શકો છો.

બંને એકસાથે જોવા માટે, ક્યાં:

• "સ્પ્લિટ" બટન પર ક્લિક કરો ("કોડ" અને "ડિઝાઇન" વચ્ચે)
• જુઓ મેનૂમાં, "કોડ અને ડિઝાઇન" પસંદ કરો

એકવાર તમે તમારા HTML કોડને સંપાદિત કરવા માટે Dreamweaver નો ઉપયોગ કરીને આરામદાયક થઈ ગયા પછી, તમે મૂળભૂત રીતે કોડ દૃશ્યમાં ડ્રીમ વીવર ખોલવા માટે તમારી પસંદગીઓ બદલી શકો છો. કોડ દૃશ્યને વર્કસ્પેસ તરીકે સાચવવાનું સૌથી સરળ રસ્તો છે. તમે ઉપયોગ કરી રહ્યાં છો તે છેલ્લા કાર્યસ્થાનમાં ડ્રીમ વીવર ખુલ્લું હશે. જો તે ન કરે તો, ફક્ત વિંડો મેનૂ પર જાઓ અને તમે ઇચ્છો તે કામ કરવાની જગ્યા પસંદ કરો.

કોડ જુઓ વિકલ્પો

ડ્રીમ વીવર એ ખૂબ સરળ છે કારણ કે તેમાં કસ્ટમાઇઝ કરવા અને તેને જે રીતે તમે ઇચ્છો તે રીતે કામ કરવા માટે ઘણા બધા રસ્તાઓ છે. વિકલ્પો વિંડોમાં, કોડ કલરિંગ, કોડ ફોર્મેટિંગ, કોડ સંકેતો અને કોડ ફરીથી લખવાની વિકલ્પો છે જે તમે એડજસ્ટ કરી શકો છો. પણ તમે કોડ વ્યૂ અંદર કેટલાક વિશિષ્ટ વિકલ્પો બદલી શકો છો.

એકવાર તમે કોડ દૃશ્યમાં હોવ, ત્યાં ટૂલબારમાં "જુઓ વિકલ્પો" બટન છે. તમે વ્યુ મેનૂમાં જઈને અને "કોડ જુઓ વિકલ્પો" પસંદ કરીને વિકલ્પો જોઈ શકો છો. વિકલ્પો છે:

• શબ્દ વીંટો - HTML કોડને આવરી લે છે જેથી તમે તેને આડી રીતે સરકાવવા વગર જોઈ શકો. નોંધ લો કે આ વિકલ્પ તમારા કોડમાં કોઈપણ કેરેજ વળતર શામેલ કરતું નથી, તે ફક્ત કોડને પ્રદર્શિત કરે છે જેથી વાંચવાનું સરળ બને.
• લાઇન નંબર્સ - કોડની બાજુમાં રેખા સંખ્યાઓ પ્રદર્શિત કરે છે. તે દૃશ્ય વિંડો કરતાં લાંબા સમય સુધી લપેટી લીટીઓ માટે રેખા કામળો સંજ્ઞા બતાવે છે.
• હિડન અક્ષરો - વેબપેજ પર પ્રદર્શિત થતી સફેદ જગ્યાના બદલે વિશિષ્ટ અક્ષરો પ્રદર્શિત કરે છે. ડોટની જગ્યાએ જગ્યાને બદલે, ડબલ ચેવરોન દરેક ટેબને બદલે છે, અને એક પ્લરોરો અથવા પેરાગ્રાફ માર્કર દરેક લાઇન બ્રેકને બદલે છે
• અમાન્ય કોડ હાઇલાઇટ કરો - હાઇલાઇટ કરેલો HTML જે પીળોમાં ખોટો છે જો તમે પીળા ટેગ પસંદ કરો છો, તો મિલકત ઇન્સ્પેક્ટર તમને તેને કેવી રીતે ઠીક કરવું તે અંગે સંકેત આપશે.
• સિન્ટેક્ષ રંગ - તમારા કોડના રંગ કોડિંગને ચાલુ કરે છે અથવા બંધ કરે છે. તમે પસંદગીઓનાં કોડ કલર વિભાગમાં તમારા રંગ કોડિંગના રંગોને બદલી શકો છો.
• સ્વતઃ ઇન્ડેન્ટ - કોડને વળતર આપ્યા પછી તમારો કોડ ઇન્ડેન્ટ આપમેળે બનાવે છે જો ઉપરના કોડ ઇન્ડેન્ટેડ હોય. તમે પસંદગીઓના કોડ ફોર્મેટિંગ વિભાગમાં ટૅબ કદ બદલીને ઇન્ડેન્ટનું કદ બદલી શકો છો.

ડ્રીમવેવર કોડ જુઓ માં સંપાદન HTML કોડ

ડ્રીમવાઇવરના કોડ દૃશ્યમાં HTML કોડને સંપાદિત કરવું સરળ છે. ફક્ત તમારા HTML લખવાનું પ્રારંભ કરો પરંતુ ડ્રીમ વીવર તમને કેટલાક એક્સ્ટ્રાઝ સાથે પ્રદાન કરે છે જે તેને મૂળભૂત HTML સંપાદકથી વિસ્તૃત કરે છે. જ્યારે તમે HTML ટેગ લખવાનું શરૂ કરો છો, ત્યારે તમે <લખો છો. જો તમે તે પાત્ર પછી જ થોભો છો, તો ડ્રીમવાઇવર તમને HTML ટૅગ્સની સૂચિ બતાવશે. આ કોડ સંકેતો કહેવામાં આવે છે પસંદગીને સાંકળવા માટે, અક્ષરો ટાઇપ કરવાનું શરૂ કરો - ડ્રીમ-ડ્રૉપ ડાઉન સૂચીને ડ્રોપ-ડાઉન સૂચિને ટૂંકા કરશે જે તમે ટાઇપ કરી રહ્યા છો તે ફીટ કરે છે.

જો તમે HTML માટે નવા છો, તો તમે HTML ટૅગ્સની સૂચિમાંથી સ્ક્રોલ કરી શકો છો અને વિવિધ લોકો તેને પસંદ કરી શકો છો. એકવાર તમે ટૅગ ટાઇપ કર્યાં પછી ડ્રીમવેવર તમને લક્ષણો માટે પ્રોમ્પ્ટ કરવાનું ચાલુ રાખશે ઉદાહરણ તરીકે, જો તમે " એચટીએમએલ ટેગમાં નીચે મૂકશે, અન્ય ટૅગ્સ સાથે હું ત્યારથી શરૂ કરું છું. જો તમે અક્ષર "એમ" લખીને ચાલુ રાખો છો, તો Dreamweaver તેને ટેગમાં નીચે ટૂંકાવીને કરશે.

પરંતુ કોડ સંકેતો ટૅગ્સ પર સમાપ્ત નથી. તમે દાખલ કરવા માટે કોડ સંકેતોનો ઉપયોગ કરી શકો છો:

• એચટીએમએલ લક્ષણો
• વર્ગ અને ID નામો
• સીએસએસ ગુણધર્મો

જો કોડ સંકેતો દેખાતા નથી, તો તમે તેને પ્રદર્શિત કરવા માટે Ctrl-Spacebar (Windows) અથવા Cmd-spacebar (Macintosh) હિટ કરી શકો છો. કોડ સંકેત શા માટે દેખાતું નથી તે સૌથી સામાન્ય કારણ એ છે કે જો તમે તમારા ટેગને સમાપ્ત કરતા પહેલાં કોઈ અલગ વિંડોમાં સ્વિચ કરો છો. કારણ કે ડ્રીમવેઅર અક્ષરને ટાઈપ કરવાનું બંધ કરી રહ્યું છે <, જો તમે વિંડો છોડો અને પરત કરો, તો તમારે કોડ સંકેતો ફરી શરૂ કરવો પડશે.

તમે એસ્કેપ કીને હિટ કરીને કોડ સંકેતો મેનુ બંધ કરી શકો છો.

એકવાર તમે તમારા પ્રારંભિક HTML ટૅગ ટાઇપ કરી લીધા પછી, તમારે તેને બંધ કરવાની જરૂર પડશે. ડ્રીમ વીવર કુદરતી રીતે આ કરે છે. જો તમે "બંધ કરો ટૅગ્સ વિકલ્પ ટાઇપ કરો જે શ્રેષ્ઠ તમારી જરૂરિયાતોને અનુકૂળ કરે છે

જો તમે તમારા પૃષ્ઠોને એચટીએમએલમાં સંપાદિત કરવા પર ફેરબદલ કરવા માટે તદ્દન તૈયાર ન હોવ પરંતુ તમે લખેલું કોડ જોઈ શકો છો, તો તમારે કોડ ઇન્સ્પેક્ટરનો પ્રયાસ કરવો જોઈએ. આ HTML કોડને અલગ વિંડોમાં ખોલે છે. તે કોડ દૃશ્યની જેમ કામ કરે છે, અને વાસ્તવમાં, વર્તમાન દસ્તાવેજ માટે મૂળભૂત રીતે ડીટેચેબલ કોડ દૃશ્ય વિંડો છે. કોડ ઇન્સ્પેક્ટર ખોલવા માટે, વિંડો મેનૂ પર જાઓ અને "કોડ ઇન્સ્પેક્ટર" પસંદ કરો અથવા તમારા કીબોર્ડ પર F10 કી દબાવો.

ડ્રીમવેવર એચટીએમએલ કોડનું બંધારણ કરશે, તેમ છતાં તમને તે પ્રદર્શિત કરવું ગમશે. ઉદાહરણ તરીકે, જો તમે ઇન્ડેન્ટ કરવા માટે 3 જગ્યાઓનો ઉપયોગ કરો છો, પરંતુ IMG ટૅગ્સને ઇન્ડેન્ટ ન કરો, તો તમે તે કોડ રીરાઇટીંગ વિકલ્પોમાં તે ફોર્મેટિંગ માહિતીને સ્પષ્ટ કરી શકો છો. પછી તમે આદેશો મેનૂ પર જાઓ અને "સોર્સ ફોર્મેટિંગ લાગુ કરો" પસંદ કરો. તમારા માટે પરિચિત ફોર્મેટમાં કોઈ અન્ય વ્યક્તિ દ્વારા કોડ લખવાની આ એક સરસ રીત છે

એચટીએમએલ કોડને તોડવાની ક્ષમતા એ એચટીએમએલ કોડને તોડવાની ક્ષમતા છે કે નહીં તે અંગેની વિશેષતા એ છે કે HTML કોડ્સ આ દસ્તાવેજના ટેગ્સને દૂર કરતું નથી, પરંતુ માત્ર તેમને દૃશ્યથી દૂર કરો જેથી તેઓ તમારા પર કામ કરી રહ્યાં છે તે વિચલિત ન કરે. તમારો કોડ તોડવા માટે:

1. તમે છુપાવવા માંગો છો તે કોડના વિભાગને પસંદ કરો
2. સંપાદન મેનૂમાં, "કોડ સંકુચિત" પેટા મેનૂમાંથી "સંકુચિત પસંદગી" પસંદ કરો

એક સરળ રીત કોડ પસંદ કરવાનું છે અને પછી ગટરમાં દેખાતા કોડ પતન આઇકોન પર ક્લિક કરો. તમે પસંદ કરેલ કોડ પર પણ જમણું ક્લિક કરી શકો છો અને "સંકુચિત પસંદગી" પસંદ કરી શકો છો.

જો તમે હાઇલાઇટ કરેલ બધું સિવાય બધું છુપાવવા માંગતા હોવ, તો ઉપરોક્ત કોઈપણ પદ્ધતિઓમાં "પસંદગીને સંકુચિત કરો" પસંદ કરો

ભાંગી પડેલો કોડ વિસ્તૃત કરવા માટે, તેના પર ડબલ ક્લિક કરો. આ કોડ ખોલે છે અને તેને પસંદ કરે છે. પછી તમે તે પસંદગીને ખસેડી શકો છો અથવા તેને કાઢી નાખી શકો છો અથવા તેની આસપાસ વધારાના ટેગ ઉમેરી શકો છો.

તમે પતનનો ઉપયોગ કરી શકો છો અને જ્યાં તમે બાહ્ય નમૂનાને સંપાદિત કરવા નથી માંગતા ત્યાં પૃષ્ઠ પર બધા સમયને વિસ્તૃત કરો. તમે માત્ર તે સામગ્રી વિસ્તાર પસંદ કરો કે જેને તમે સંપાદિત કરવા અને બહાર નીકળી જવા માગો છો. પછી તમારા HTML લખો. તમે હજી પણ પૃષ્ઠને ડીઝાઇન દૃશ્યમાં જોઈ શકો છો અથવા તેને બ્રાઉઝરમાં પૂર્વાવલોકન કરી શકો છો. તૂટી કોડને દસ્તાવેજમાંથી દૂર કરવામાં આવ્યો નથી, ફક્ત દૃશ્યથી છુપાયેલું છે. જ્યારે તમે આઇટમ્સની શ્રેણી પર કામ કરી રહ્યા હો ત્યારે તમે તેનો ઉપયોગ પણ કરી શકો છો જ્યારે તમે એક સમાપ્ત કરી લો, ત્યારે તેને પડો તમે જાણો છો કે જ્યારે કોઈ કોડ દેખાતો નથી ત્યારે તમે પૂર્ણ કર્યું છે.