Dreamweaver este un editor WYSIWYG excelent, dar dacă nu sunteți interesat să scrieți pagini web într-un mediu "ceea ce vedeți este ceea ce obțineți", puteți utiliza în continuare Dreamweaver, deoarece este și un editor de text excelent. Dar există o mulțime de caracteristici care alunecă pe marginea drumului în cadrul editorului de cod Dreamweaver, deoarece focalizarea primară se referă la "aspectul de proiectare" sau la porțiunea de editor WYSIWYG a produsului.
Cum se ajunge în vizualizarea codului Dreamweaver
Dacă nu ați folosit niciodată Dreamweaver ca editor HTML, înainte de a nu fi observat niciodată cele trei butoane din partea de sus a paginii: "Cod", "Split" și "Design". Dreamweaver pornește implicit în modul "Design view" sau WYSIWYG. Dar este ușor să comutați la vizualizarea și editarea codului HTML. Doar faceți clic pe Cod buton. Sau mergeți la Vedere meniu și selectați Cod.
Dacă învățați doar cum să scrieți HTML sau doriți să obțineți un sentiment asupra modului în care modificările dvs. vor influența documentul dvs., puteți deschide vizualizarea codului și vizualizarea în același timp. Frumusețea acestei metode este că puteți să editați și în ambele ferestre. Deci, puteți scrie codul pentru eticheta imaginii în HTML și apoi utilizați vizualizarea de proiectare pentru ao muta într-o altă locație din pagină cu drag and drop.
Pentru a vizualiza simultan, fie:
- Faceți clic pe Despică buton (între Cod și Proiecta).
- În Vedere meniu, selectați Cod și design.
Odată ce vă convine să utilizați Dreamweaver pentru a vă edita codul HTML, puteți schimba preferințele pentru a deschide Dreamweaver în modul de vizualizare cod în mod implicit. Cea mai ușoară modalitate este salvarea vizualizării codului ca spațiu de lucru. Dreamweaver se va deschide în ultimul spațiu de lucru pe care îl utilizați. Dacă nu, mergeți pur și simplu la meniul Fereastră și alegeți spațiul de lucru dorit.
Opțiuni de vizualizare a codului
Dreamweaver este atât de flexibil, deoarece are atât de multe moduri de a personaliza și de a face să funcționeze așa cum doriți. În fereastra de opțiuni există variante de colorare a codului, formatare cod, sugestii de cod și opțiuni de rescriere a codului pe care le puteți ajusta. Dar puteți schimba, de asemenea, câteva opțiuni speciale în cadrul vizualizării codului în sine.
Odată ce vă aflați în vizualizarea cod, există o Opțiunile de vizualizare butonul din bara de instrumente. De asemenea, puteți vizualiza opțiunile accesând Vedere meniul și alegerea Opțiuni de vizualizare a codului. Opțiunile sunt:
- Word Wrap - Împachetează codul HTML astfel încât să îl puteți vizualiza fără derulare orizontală. Rețineți că această opțiune nu introduce caracterele în codul dvs., doar afișează codul astfel încât să fie mai ușor de citit.
- Numere de linie - afișează numerele de linie de-a lungul laturii codului. Acesta prezintă un simbol de înfășurare pentru linii care se înfășoară mai mult decât fereastra de vizualizare.
- Caracterele ascunse - afișează caractere speciale în locul spațiului alb care ar fi afișat pe o pagină Web. Cum ar fi un punct înlocuind un spațiu, un șurub dublu înlocuiește fiecare filă, iar un marcator de pilde sau paragraf înlocuiește fiecare rupere de linie.
- Evidențiați codul nevalid - subliniază HTML care este incorect în galben. Dacă selectați eticheta galbenă, Inspectorul de proprietăți vă va oferi sugestii despre modul de remediere a acesteia.
- Sintaxă de colorat - pornește sau dezactivează codarea culorilor codului. Schimbați culorile codului dvs. de culoare în secțiunea de colorare a codului din preferințe.
- Indent automat - face codul tău indentată automat după o retur de cărucior dacă codul de deasupra lui este indentat. Puteți schimba mărimea indentului modificând dimensiunea filei în secțiunea de formatare a codului din preferințe.
Editarea codului HTML în vizualizarea codului Dreamweaver
Este ușor să editați cod HTML în vizualizarea codului Dreamweaver. Pur și simplu începeți să introduceți codul HTML. Dar Dreamweaver vă oferă câteva extra-uri care o extind dincolo de un editor HTML de bază. Când începeți să scrieți o etichetă HTML, tastați <. Dacă faceți o pauză imediat după acel caracter, Dreamweaver vă va afișa o listă de etichete HTML. Acestea se numesc sugestii de cod. Pentru a restrânge selecția, începeți să scrieți litere - Dreamweaver va restrânge lista verticală la eticheta care se potrivește cu ceea ce tastați.
Dacă sunteți nou în HTML, puteți parcurge lista de etichete HTML și puteți alege diferite pentru a vedea ce fac. Dreamweaver va continua să vă solicite atributele după ce introduceți o etichetă. De exemplu, dacă tastați <>, Dreamweaver va coborî la HTML, cu celelalte etichete, începând cu următorul text. Dacă continuați tastând litera mDreamweaver îl va restrânge la etichetă.
Dar sugestiile de cod nu se termină la etichete. Puteți folosi indicii de cod pentru a insera:
- Atributele HTML
- Numele de clasă și ID
- Proprietăți CSS
Dacă sugestiile de cod nu apar, puteți lovi Ctrl-bara de spațiu (Windows) sau Cmd-SPATIU (Macintosh) pentru a le afișa. Cel mai obișnuit motiv pentru care un indiciu de cod ar putea să nu apară este dacă ați trecut la o altă fereastră înainte de a termina eticheta. Deoarece Dreamweaver dezactivează tastarea caracterului <, dacă lăsați fereastra și vă întoarceți, va trebui să relanseți sugestiile de cod.
Puteți dezactiva meniul de coduri prin apăsarea tastei de evacuare.
După ce introduceți eticheta HTML de deschidere, va trebui să o închideți. Dreamweaver face acest lucru într-un mod natural. Dacă tastați Închideți etichetele care se potrivește cel mai bine nevoilor dumneavoastră.
Dacă nu sunteți chiar pregătit să treceți la editarea paginilor în HTML, dar doriți să vizionați codul așa cum este scris, ar trebui să încercați inspectorul de cod. Aceasta deschide codul HTML într-o fereastră separată. Funcționează exact ca vizualizarea codului și, de fapt, este, în principiu, o fereastră de vizualizare a codului detașabilă pentru documentul curent.Pentru a deschide inspectorul de cod, mergeți la Fereastră meniu și alegeți Cod Inspector sau apăsați pe F10 cheie de pe tastatură.
Dreamweaver va formata cod HTML oricum doriți să fie afișat. De exemplu, dacă utilizați 3 spații pentru indentare, dar niciodată nu etichetați etichete IMG, puteți specifica acele informații de formatare în opțiunile de rescriere a codului. Apoi, du-te la comenzi meniu și alegeți Aplicați formatul sursei. Aceasta este o modalitate excelentă de a obține codul scris de altcineva într-un format familiar pentru dvs.
O caracteristică pe care mulți coderi HTML nu o cunosc sau nu nu o utilizează este abilitatea de a restrânge codul HTML. Acest lucru nu elimină etichetele din document, ci doar le eliminați din vedere, astfel încât acestea să nu distragă atenția la ceea ce lucrați. Pentru a vă restrânge codul:
- Selectați secțiunea de cod pe care doriți să o ascundeți.
- În Editați | × meniu, alegeți Reduceți selecția de la Cod de colaps sub-meniu
O modalitate mai ușoară este să selectați codul și apoi să faceți clic pe pictogramele de restrângere a codului care apar în jgheab. De asemenea, puteți să faceți clic dreapta pe codul selectat și să alegeți Reduceți selecția.
Dacă vrei să ascunzi totul cu exceptia ceea ce este evidențiat, alegeți Reduceți selecția exterioară în oricare dintre metodele de mai sus.
Pentru a extinde codul restrâns, faceți dublu clic pe el. Aceasta deschide codul și îl selectează. Apoi puteți să mutați acea selecție sau să o ștergeți sau să adăugați etichete suplimentare în jurul acesteia.
Puteți utiliza funcția de restrângere și extindere tot timpul pe paginile în care nu doriți să editați șablonul extern. Trebuie doar să selectați zona de conținut pe care doriți să o editați și să o restrângeți în afară. Apoi scrieți codul HTML. Puteți să vizualizați pagina în continuare Proiecta vizualiza sau previzualiza într-un browser. Codul restrâns nu este eliminat din document, pur și simplu ascuns de vedere. Puteți, de asemenea, să o utilizați atunci când lucrați la o serie de articole. Când ați terminat unul, restrângeți-l. Știți că ați terminat când nu apare niciun cod.
