നിങ്ങൾ മാത്രം WYSIWYG ഉപയോഗിക്കേണ്ടതില്ല
ഒരു വലിയ WYSIWYG എഡിറ്റർ ആണ് ഡ്രീംവൈവർ, പക്ഷെ വെബ് പേജുകൾ "നിങ്ങൾ എന്ത് കാണുന്നുവെന്നത്" എന്ന അന്തരീക്ഷത്തിൽ എഴുതാൻ താത്പര്യമില്ലെങ്കിൽ, നിങ്ങൾക്ക് ഇപ്പോഴും വലിയൊരു ടെക്സ്റ്റ് എഡിറ്റർ ആയതിനാൽ ഡ്രീംവൈവറി ഉപയോഗിക്കാനാകും. എന്നാൽ ഡിസ്ക്വേവർ കോഡ് എഡിറ്ററിലെ വഴികൾ ഉപയോഗിച്ച് നിരവധി സവിശേഷതകളുണ്ട്, കാരണം പ്രാഥമിക ശ്രദ്ധേയമാണ് "ഡിസൈൻ കാഴ്ച" അല്ലെങ്കിൽ ഉൽപ്പന്നത്തിന്റെ WYSIWYG എഡിറ്റർ ഭാഗത്ത്.
Dreamweaver കോഡ് കാണുക എങ്ങനെ ലഭിക്കും
നിങ്ങൾ ഒരു HTML എഡിറ്ററായി ഒരിക്കലും ഡ്രീംവാവർ ഉപയോഗിച്ചിട്ടില്ലെങ്കിൽ, "കോഡ്," "സ്പ്ലിറ്റ്," "ഡിസൈൻ" എന്നീ മൂന്ന് ബട്ടണുകൾ പോലും നിങ്ങൾ ശ്രദ്ധിച്ചിട്ടുണ്ടാവില്ല. ഡ്രീംവാവർ ഡിഫോൾട്ട് ആയി "ഡിസൈൻ കാഴ്ച" അല്ലെങ്കിൽ WYSIWYG മോഡിൽ ആരംഭിക്കുന്നു. പക്ഷെ HTML കോഡ് കാണുന്നതിനും എഡിറ്റുചെയ്യുന്നതിനും എളുപ്പമാണ്. "കോഡ്" ബട്ടണിൽ ക്ലിക്കുചെയ്യുക. അല്ലെങ്കിൽ, കാഴ്ചാ മെനുവിൽ പോയി "കോഡ്" തിരഞ്ഞെടുക്കുക.
നിങ്ങൾ എങ്ങനെയാണ് HTML എഴുതുകയോ നിങ്ങളുടെ മാറ്റങ്ങൾ നിങ്ങളുടെ പ്രമാണത്തെ എങ്ങനെ ബാധിക്കുമെന്ന് മനസ്സിലാക്കുകയോ ചെയ്യുകയാണെങ്കിൽ, നിങ്ങൾക്ക് ഒരേ സമയം കോഡ് കാഴ്ചയും ഡിസൈൻ കാഴ്ചയും തുറക്കാം. ഈ രീതിയുടെ സൗന്ദര്യം നിങ്ങൾ രണ്ടു വിൻഡോകളിലും എഡിറ്റുചെയ്യാൻ കഴിയും എന്നതാണ്. അതിനാൽ HTML ൽ നിങ്ങളുടെ ഇമേജ് ടാഗിനായി കോഡ് എഴുതാനും തുടർന്ന് പേജിൽ മറ്റൊരു ലൊക്കേഷനിലേക്ക് ഡ്രാഗ് ചെയ്ത് ഡ്രോപ്പ് ചെയ്യാനും ഡിസൈൻ കാഴ്ച ഉപയോഗിക്കാം.
രണ്ട് തവണയും കാണാൻ:
- "സ്പ്ലിറ്റ്" ബട്ടണിൽ ക്ലിക്ക് ചെയ്യുക ("കോഡ്" ഉം "ഡിസൈൻ" ഉം തമ്മിലുള്ളത്)
- കാഴ്ചാ മെനുവിൽ "കോഡ്, ഡിസൈൻ" തിരഞ്ഞെടുക്കുക
നിങ്ങളുടെ HTML കോഡ് എഡിറ്റുചെയ്യാൻ ഡ്രീംവൈവറാണ് ഉപയോഗിക്കുന്നതെങ്കിൽ നിങ്ങൾക്ക് ഇഷ്ടാനുസൃതമായി കോഡ് കാഴ്ചയിൽ ഡ്രീംവീവർ തുറക്കാൻ മുൻഗണനകൾ മാറ്റാം. കോഡ് കാഴ്ചയെ വർക്ക്സ്പെയ്സ് ആയി സൂക്ഷിക്കുക എന്നതാണ് ഏറ്റവും എളുപ്പമുള്ള മാർഗ്ഗം. നിങ്ങൾ ഉപയോഗിക്കുന്ന അവസാന ജോലികളിലാണ് ഡ്രീംവൈവർ തുറക്കുന്നത്. ഇത് സംഭവിച്ചില്ലെങ്കിൽ, ജാലക മെനുവിലേക്ക് പോയി നിങ്ങൾക്ക് ആവശ്യമുള്ള പ്രവർത്തിസ്ഥലം തിരഞ്ഞെടുക്കുക.
കോഡ് കാണുക ഓപ്ഷനുകൾ
അത് ഇഷ്ടാനുസൃതമാക്കാനും നിങ്ങൾക്കാവശ്യമായ രീതിയിൽ പ്രവർത്തിക്കാനും നിരവധി മാർഗങ്ങളുള്ളതിനാൽ ഡ്രീംവൈവർ എളുപ്പമാണ്. ഓപ്ഷനുകൾ വിൻഡോയിൽ കോഡ് കോഡുകൾ, കോഡ് ഫോർമാറ്റിംഗ്, കോഡ് സൂചനകൾ, കോഡ് തിരുത്തി ഓപ്ഷനുകൾ എന്നിവ ക്രമീകരിക്കാം. എന്നാൽ നിങ്ങൾക്ക് കോഡ് കാഴ്ചയിൽ തന്നെ ചില പ്രത്യേക ഓപ്ഷനുകൾ മാറ്റാവുന്നതാണ്.
നിങ്ങൾ കോഡ് കാഴ്ചയിൽ ആയിക്കഴിഞ്ഞാൽ, ടൂൾബാറിലെ "ഓപ്ഷനുകൾ കാണുക" ബട്ടൺ ഉണ്ട്. നിങ്ങൾക്ക് കാഴ്ച മെനുവിലേക്ക് പോയി "കോഡ് കാഴ്ച ഓപ്ഷനുകൾ" തിരഞ്ഞെടുക്കുന്നതിലൂടെ ഓപ്ഷനുകൾ കാണാനാകും. ഓപ്ഷനുകൾ ഇവയാണ്:
- Word Wrap - HTML കോഡ് തിരുകിയതിനാൽ തിരശ്ചീനമായി സ്ക്രോൾ ചെയ്യാതെ നിങ്ങൾക്ക് അത് കാണാൻ കഴിയും. ഈ ഓപ്ഷൻ നിങ്ങളുടെ കോഡിലുള്ള കാരിയൽ റിട്ടേണുകൾ ചേർക്കുന്നില്ലെന്ന് മനസ്സിലാക്കുക, അത് വായിക്കാൻ എളുപ്പമുള്ള തരത്തിൽ കോഡ് പ്രദർശിപ്പിക്കുന്നു.
- ലൈൻ നമ്പറുകൾ - കോഡിന്റെ വശത്തുള്ള ലൈൻ നമ്പറുകൾ പ്രദർശിപ്പിക്കുന്നു. കാഴ്ച ജാലകത്തിന് മീതെയുളള വരികൾക്കായി ഒരു വരി റാപ്പ് ചിഹ്നമാണ് ഇത് കാണിക്കുന്നത്.
- മറഞ്ഞിരിക്കുന്ന പ്രതീകങ്ങൾ - വെബ് പേജിൽ ദൃശ്യമാകുന്ന വൈസ്പെയ്സ് പകരം പ്രത്യേകം അക്ഷരങ്ങൾ പ്രദർശിപ്പിക്കുന്നു. ഒരു ഡോട്ട് സ്പേസ് മാറ്റിയാൽ ഓരോ ടാബിലും ഒരു ഡബിൾ ഷെവൻ മാറ്റി, ഒരു പിക്ക്രോ അല്ലെങ്കിൽ ഖണ്ഡിക മാർക്കർ ഓരോ വരി ബ്രേക്കും മാറ്റിസ്ഥാപിക്കുന്നു.
- അസാധുവായ കോഡ് ഹൈലൈറ്റ് ചെയ്യുക - മഞ്ഞനിരത്തിൽ തെറ്റായ HTML ഹൈലൈറ്റുചെയ്തത്. നിങ്ങൾ മഞ്ഞ ടാഗ് തിരഞ്ഞെടുക്കുകയാണെങ്കിൽ, പ്രോപ്പർട്ടി ഇൻസ്പെക്ടർ അത് പരിഹരിക്കാൻ എങ്ങനെ നിങ്ങൾക്ക് സൂചന നൽകും.
- സിന്റാക്സ് കളർ - നിങ്ങളുടെ കോഡ് കളർ കോഡിംഗ് ഓണാക്കുകയോ ഓഫാക്കുകയോ ചെയ്യുന്നു. നിങ്ങൾ മുൻഗണനകളുടെ കോഡ് കളറിംഗ് വിഭാഗത്തിൽ നിങ്ങളുടെ വർണ്ണ കോഡിംഗിന്റെ നിറങ്ങൾ മാറ്റുന്നു.
- സ്വയമേവയുള്ള ഇൻഡെന്റ് - മുകളിലുള്ള കോഡ് ഇൻഡന്റ് ചെയ്തിട്ടുണ്ടെങ്കിൽ, നിങ്ങളുടെ കാറേജ് റിട്ടേണുകൾക്ക് ശേഷം നിങ്ങളുടെ കോഡ് യാന്ത്രികമായി ഇൻഡന്റ് ചെയ്യുന്നു. മുൻഗണനകളുടെ കോഡ് ഫോർമാറ്റിംഗ് വിഭാഗത്തിൽ ടാബ് വലുപ്പം മാറ്റിക്കൊണ്ട് ഇൻഡന്റ് വലുപ്പം നിങ്ങൾക്ക് മാറ്റാം.
Dreamweaver കോഡ് കാഴ്ചയിൽ HTML കോഡ് എഡിറ്റുചെയ്യുന്നു
ഡ്രീംവൈവറുടെ കോഡ് കാഴ്ചയിൽ HTML കോഡ് എഡിറ്റുചെയ്യുന്നത് എളുപ്പമാണ്. നിങ്ങളുടെ HTML ടൈപ്പുചെയ്യാൻ ആരംഭിക്കുക. എന്നാൽ ഇത് അടിസ്ഥാന HTML എഡിറ്ററെ അതിജീവിക്കാൻ കഴിയുന്ന ചില അധികങ്ങളോടെ ഡ്രീം വെയ്വർ നിങ്ങൾക്ക് നൽകുന്നു. നിങ്ങൾ ഒരു HTML ടാഗുകൾ എഴുതുമ്പോൾ, നിങ്ങൾ ടൈപ്പുചെയ്യുക. ആ പ്രതീകത്തിനുശേഷം നിങ്ങൾ താൽക്കാലികമായി നിർത്തുകയാണെങ്കിൽ, Dreamweaver നിങ്ങൾക്ക് HTML ടാഗുകളുടെ ഒരു പട്ടിക കാണിക്കും. ഇവയെ കോഡ് സൂചനകൾ എന്ന് വിളിക്കുന്നു. തിരഞ്ഞെടുക്കൽ ചുരുക്കുക, അക്ഷരങ്ങൾ ടൈപ്പുചെയ്യാൻ ആരംഭിക്കുക - നിങ്ങൾ ടൈപ്പുചെയ്യുന്നതെന്താണെന്ന് ടാഗുചെയ്യുന്ന ഡ്രോപ്പ്വീവർ ഡ്രോപ്പ്-ഡൗൺ ലിസ് ചുരുക്കിക്കൊണ്ടിരിക്കും.
നിങ്ങൾ പുതിയ HTML ആണെങ്കിൽ, നിങ്ങൾക്ക് HTML ടാഗുകളുടെ ലിസ്റ്റിലൂടെ സ്ക്രോൾ ചെയ്യാനും അവർ എന്തുചെയ്യണമെന്ന് കാണാൻ വിവിധ പേരുകൾ തിരഞ്ഞെടുക്കാം. നിങ്ങൾ ടാഗുചെയ്തുകഴിഞ്ഞാൽ ഡ്രീംവൈവർ ആട്രിബ്യൂട്ടുകൾക്കായി നിങ്ങളെ പ്രേരിപ്പിക്കും. ഉദാഹരണത്തിന്, നിങ്ങൾ " ടാഗ് ആയി ചുരുക്കി ചെയ്യും.
എന്നാൽ കോഡ് സൂചനകൾ ടാഗുകളിൽ അവസാനിക്കുന്നില്ല. നിങ്ങൾക്ക് ഉൾപ്പെടുത്താൻ കോഡ് സൂചനകൾ ഉപയോഗിക്കാം:
കോഡ് സൂചനകൾ പ്രത്യക്ഷപ്പെടുന്നില്ലെങ്കിൽ, നിങ്ങൾക്ക് അവയെ പ്രദർശിപ്പിക്കാൻ Ctrl-spacebar (Windows) അല്ലെങ്കിൽ Cmd-spacebar (Macintosh) അമർത്തുക. നിങ്ങളുടെ ടാഗ് പൂർത്തിയാക്കുന്നതിനു മുമ്പായി ഒരു വ്യത്യസ്ത വിൻഡോയിലേക്ക് സ്വിച്ച് ചെയ്തെങ്കിൽ ഒരു കോഡ് സൂചന ദൃശ്യമാകില്ല എന്നതാണ് ഏറ്റവും സാധാരണമായ കാരണം. പ്രതീകം ടൈപ്പുചെയ്യുന്നതിൽ നിന്ന് ഡ്രീംവൈവേർ കീ നിങ്ങൾ വിൻഡോ വിട്ടുപോകുകയും തിരികെ വരികയാണെങ്കിൽ, കോഡ് സൂചനകൾ വീണ്ടും ആരംഭിക്കേണ്ടതുണ്ട്.
എസ്കേപ്പ് കീ അമർത്തുന്നതിലൂടെ നിങ്ങൾക്ക് കോഡ് സൂചന മെനു ഓഫാക്കാൻ കഴിയും.
നിങ്ങൾ തുറക്കുന്ന HTML ടാഗിന് ടൈപ്പ് ചെയ്തുകഴിഞ്ഞാൽ, നിങ്ങൾ അത് അടയ്ക്കേണ്ടതുണ്ട്. ഇത് സ്വാഭാവിക രീതിയിൽ ഡ്രീംവൈവർ ചെയ്യുന്നതാണ്. നിങ്ങളുടെ ആവശ്യങ്ങൾക്ക് അനുയോജ്യമായ "ക്ലോക്ക് ടാഗുകൾ ഓപ്ഷൻ ടൈപ്പുചെയ്യുകയാണെങ്കിൽ.
നിങ്ങളുടെ പേജുകൾ എച്ച്ടിഎംഎൽ എഡിറ്റു ചെയ്യുന്നതിൽ നിങ്ങൾ മാറാൻ തയ്യാറാകുന്നില്ലെങ്കിലും എഴുതപ്പെട്ടതുപോലെ കോഡ് കാണാൻ ആഗ്രഹിക്കുന്നുവെങ്കിലും നിങ്ങൾ കോഡ് ഇൻസ്പെക്ടർ ശ്രമിക്കണം. ഇത് മറ്റൊരു വിൻഡോയിൽ HTML കോഡ് തുറക്കുന്നു. ഇത് കോഡ് കാഴ്ചപോലെ തന്നെ പ്രവർത്തിക്കുന്നു, കൂടാതെ, യഥാർത്ഥത്തിൽ, നിലവിലെ പ്രമാണത്തിനായുള്ള ഒരു വേർപിരിയുന്ന കോഡ് കാഴ്ചാ ജാലകം. കോഡ് ഇൻസ്പെക്ടർ തുറക്കാൻ, വിൻഡോ മെനുവിലേക്ക് പോയി "കോഡ് ഇൻസ്പെക്ടർ" തിരഞ്ഞെടുക്കുക അല്ലെങ്കിൽ നിങ്ങളുടെ കീ ബോർഡിൽ F10 കീ അമർത്തുക.
എച്ച്ടിഎംഎൽ കോഡും ഡിസ്വീവർ ഫോർമാറ്റ് ചെയ്യാം. ഉദാഹരണത്തിന്, നിങ്ങൾ ഇൻഡന്റ് ചെയ്യുന്നതിനായി 3 സ്പെയ്സുകളാണ് ഉപയോഗിക്കുന്നതെങ്കിൽ, എന്നാൽ ഒരിക്കലും IMG ടാഗുകൾ ഇൻഡന്റ് ചെയ്യുകയാണെങ്കിൽ, കോഡ് റീറൈറ്റിംഗ് ഓപ്ഷനുകളിൽ നിങ്ങൾക്ക് ആ ഫോർമാറ്റിംഗ് വിവരം വ്യക്തമാക്കാനാകും. അപ്പോൾ നിങ്ങൾ കമാൻഡുകൾ മെനുവിലേക്ക് പോയി "സോഴ്സ് ഫോർമാറ്റിംഗ് പ്രയോഗിക്കുക" തിരഞ്ഞെടുക്കുക. നിങ്ങൾക്ക് പരിചയമുള്ള ഒരു ഫോർമാറ്റിൽ ഒരാൾ എഴുതിയ കോഡ് ലഭിക്കാൻ ഇത് മികച്ച മാർഗമാണ്.
പല HTML കോഡറുകൾ അറിയാത്തതോ ഉപയോഗിക്കാത്തതോ ആയ ഒരു സവിശേഷത HTML കോഡുകളെ ചുരുക്കുന്നതിനുള്ള കഴിവായിരിക്കും. ഇത് പ്രമാണത്തിൽ നിന്ന് ടാഗുകളെ നീക്കംചെയ്യില്ല, എന്നാൽ അവ കാഴ്ചയിൽ നിന്ന് നീക്കംചെയ്താൽ മാത്രം അവ നിങ്ങൾ എന്തുചെയ്യുന്നുവെന്നതിൽ ശ്രദ്ധ കേന്ദ്രീകരിക്കുന്നു. നിങ്ങളുടെ കോഡ് ചുരുക്കാൻ:
- നിങ്ങൾ മറയ്ക്കാൻ ആഗ്രഹിക്കുന്ന കോഡ് തിരഞ്ഞെടുക്കുക
- എഡിറ്റ് മെനുവിൽ, "കോഡ് ചുരുക്കുക" ഉപമെനുവിൽ നിന്ന് "തിരഞ്ഞെടുക്കൽ ചുരുക്കുക" തിരഞ്ഞെടുക്കുക
കോഡ് തിരഞ്ഞെടുക്കുന്നതും കുഴൽക്കിണറിൽ ദൃശ്യമാകുന്ന കോഡ് ചുരുക്കൽ ഐക്കണുകളിൽ ക്ലിക്കുചെയ്യുക. നിങ്ങൾക്ക് തിരഞ്ഞെടുക്കപ്പെട്ട കോഡും റൈറ്റ് ക്ലിക്ക് ചെയ്ത് "തിരഞ്ഞെടുക്കൽ ചുരുക്കുക" തിരഞ്ഞെടുക്കുക.
ഹൈലൈറ്റുചെയ്തവ ഒഴികെയുള്ള എല്ലാ കാര്യങ്ങളും മറയ്ക്കണമെങ്കിൽ, മുകളിലുള്ള ഏതെങ്കിലും ഒന്നിൽ "പുറത്തെ തിരഞ്ഞെടുക്കൽ ചുരുക്കുക" തിരഞ്ഞെടുക്കുക.
സ്ക്രോൾ ചെയ്ത കോഡ് വികസിപ്പിക്കുന്നതിന്, അതിൽ ഡബിൾ ക്ലിക്ക് ചെയ്യുക. ഇത് കോഡ് തുറക്കുകയും അത് തിരഞ്ഞെടുക്കുകയും ചെയ്യുന്നു. അതിനുശേഷം നിങ്ങൾക്ക് ആ തിരഞ്ഞെടുപ്പ് നീക്കാൻ കഴിയും അല്ലെങ്കിൽ ഇല്ലാതാക്കുകയോ അതിനൊപ്പം അധിക ടാഗുകൾ ചേർക്കുകയോ ചെയ്യാം.
ബാഹ്യ ടെംപ്ലേറ്റ് നിങ്ങൾ എഡിറ്റുചെയ്യാൻ ആഗ്രഹിക്കാത്ത പേജുകളിൽ നിങ്ങൾക്ക് എല്ലാം ചുരുക്കാൻ ഉപയോഗിക്കാനും ഫീച്ചർ വികസിപ്പിക്കാനും കഴിയും. പുറത്ത് എഡിറ്റുചെയ്യാനും ചുരുങ്ങാനും നിങ്ങൾ താൽപ്പര്യപ്പെടുന്ന ഉള്ളടക്ക ഏരിയ തിരഞ്ഞെടുക്കുക. തുടർന്ന് നിങ്ങളുടെ HTML എഴുതുക. നിങ്ങൾക്ക് തുടർന്നും ഡിസൈൻ കാഴ്ചയിൽ പേജ് കാണാനോ ബ്രൗസറിൽ പ്രിവ്യൂ നടത്താനോ കഴിയും. കാഴ്ചയിൽ നിന്ന് കേടായ കോഡ് നീക്കംചെയ്യുന്നില്ല, കാഴ്ചയിൽ നിന്ന് അദൃശ്യമായിരിക്കുന്നു. നിങ്ങൾ ഒരു കൂട്ടം ഇനങ്ങളിൽ പ്രവർത്തിക്കുമ്പോൾ ഉപയോഗിക്കും. നിങ്ങൾ ഒരെണ്ണം പൂർത്തിയാക്കുമ്പോൾ, അത് ചുരുക്കുക. കോഡ് പ്രദർശിപ്പിക്കുന്നില്ലെങ്കിൽ നിങ്ങൾ പൂർത്തിയാക്കി എന്ന് നിങ്ങൾക്കറിയാം.