Nu trebuie să utilizați decât WYSIWYG
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 butonul "Cod". Sau mergeți în meniul View și selectați "Code".
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 butonul "Split" (între "Cod" și "Design")
- În meniul Vizualizare, 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.
După ce vă aflați în vizualizarea cod, există un buton "Opțiuni de vizualizare" din bara de instrumente. De asemenea, puteți vizualiza opțiunile accesând meniul Vizualizare și selectând "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 părții laterale a codului. Acesta prezintă un simbol de înfășurare pentru linii care se înfășoară mai mult decât fereastra de vizualizare.
- Caractere ascunse - afișează caractere speciale în loc de spațiu 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 - evidențiază codul HTML incorect în galben. Dacă selectați eticheta galbenă, Inspectorul de proprietăți vă va oferi sugestii despre modul de remediere a acesteia.
- Sintaxă de colorare - activează sau dezactivează codificarea culorilor codului. Schimbați culorile codului dvs. de culoare în secțiunea de colorare a codului din preferințe.
- Auto Indent ( Indentare automată) - face codul tău indentat automat după ce o carieră se întoarce 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, introduceț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 ".
Dar sugestiile de cod nu se termină la etichete. Puteți folosi indicii de cod pentru a insera:
Dacă sugestiile de cod nu apar, puteți apăsa bara de spațiu Ctrl (Windows) sau Cmd-spacebar (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 reveniți, va trebui să relansezi 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ă introduceți opțiunea "Închideți etichetele" care se potrivește cel mai bine nevoilor dvs.
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 meniul ferestrei și alegeți "Inspector cod" sau apăsați tasta F10 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, mergeți la meniul Comenzi și alegeți "Aplicare formatare sursă". 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 meniul Modificați, selectați "Restrângere selecție" din submeniul "Reducere cod"
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 "Reducere selecție".
Dacă doriți să ascundeți totul, cu excepția celor evidențiate, alegeți "Restrângeț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. Încă puteți să vizualizați pagina în vizualizarea Design sau să o previzualizați î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.