No heu d'utilitzar només WYSIWYG
Dreamweaver és un gran editor de WYSIWYG , però si no esteu interessat a escriure pàgines web en un entorn de "què veieu és el que obteniu", podeu continuar utilitzant Dreamweaver perquè també és un gran editor de text. Tanmateix, hi ha moltes característiques que es desplacen a la part inferior de l'editor de codi de Dreamweaver, ja que l'enfocament principal es troba a la vista "disseny" o WYSIWYG del producte.
Com arribar a la vista del codi de Dreamweaver
Si mai no heu utilitzat Dreamweaver com a editor d'HTML abans d'haver-vos vist mai els tres botons a la part superior de la pàgina: "Codi", "Partició" i "Disseny". Dreamweaver s'inicia de manera predeterminada a "Vista de disseny" o al mode WYSIWYG. Però és fàcil canviar a veure i editar el codi HTML. Simplement feu clic al botó "Codi". O bé, aneu al menú Veure i seleccioneu "Codi".
Si només esteu aprenent a escriure HTML o voleu obtenir una idea de com afectaran els vostres canvis el vostre document, podeu obrir la visualització de codi i la visualització del disseny al mateix temps. La bellesa d'aquest mètode és que també es pot editar a les dues finestres. Per tant, podeu escriure el codi de la vostra etiqueta d'imatge a HTML i, a continuació, utilitzar la vista de disseny per moure-la a una altra ubicació de la pàgina amb arrossegar i deixar anar.
Per visualitzar tots dos alhora:
- Feu clic al botó "Dividir" (entre "Codi" i "Disseny")
- Al menú Veure, seleccioneu "Codi i disseny"
Una vegada que us sentiu còmode amb Dreamweaver per editar el vostre codi HTML, podeu canviar les vostres preferències per obrir Dreamweaver a la visualització de codi de manera predeterminada. La forma més senzilla és guardar la visualització de codi com a espai de treball. Dreamweaver s'obrirà en l'últim espai de treball que utilitzava. Si no ho fa, simplement aneu al menú Finestra i trieu l'espai de treball que desitgeu.
Opcions de visualització de codi
Dreamweaver és tan flexible perquè té moltes maneres de personalitzar-lo i fer-lo funcionar de la manera que vulgueu. A la finestra d'opcions, hi ha coloració de codi, format de codi, suggeriments de codi i opcions de reescriptura de codi que podeu ajustar. Però també podeu canviar algunes opcions especials dins de la visualització de codi.
Un cop heu visitat el codi, hi ha un botó "Opcions de visualització" a la barra d'eines. També podeu veure les opcions accedint al menú Visualitza i escollint "Opcions de visualització de codi". Les opcions són:
- Word Wrap : embolica el codi HTML perquè pugui veure sense desplaçar-se horitzontalment. Tingueu en compte que aquesta opció no insereix cap retorn de carro al codi, només mostra el codi perquè sigui més fàcil de llegir.
- Números de línia : mostra els números de línia al llarg del costat del codi. Mostra un símbol d'embolcall de línies per a les línies que s'adapten més temps que la finestra de visualització.
- Caràcters ocults : mostra caràcters especials en comptes d'espais en blanc que es mostraran en una pàgina web. Com un punt substitueix un espai, un doble chevron reemplaça cada pestanya, i un marcador de paràgraf o pilars substitueix cada salt de línia.
- Ressalteu el codi no vàlid : destaca HTML que no és correcte en color groc. Si seleccioneu l'etiqueta groga, l'inspector de propietats us indicarà com solucionar-lo.
- Coloració de sintaxi : activa o desactiva la codificació de color del vostre codi. Podeu canviar els colors de la vostra codificació de color a la secció de coloració de codis de les preferències.
- Sagnat automàtic : fa que el codi sagnin automàticament després d'un retorn de carro si el codi de dalt està sagnat. Podeu canviar la mida de la sangria canviant la mida de la pestanya a la secció de format de codi de les preferències.
Edició del codi HTML a la vista del codi de Dreamweaver
És fàcil editar codi HTML a la vista de codi de Dreamweaver. Simplement comença a escriure el teu HTML. Però Dreamweaver us proporciona alguns extres que l'ajuden més enllà d'un editor HTML bàsic. Quan comenceu a escriure una etiqueta HTML, escriviu <. Si feu una pausa després d'aquest personatge, Dreamweaver us mostrarà una llista d' etiquetes HTML . Aquests són anomenats consells de codi. Per restringir la selecció, comenceu a escriure lletres: Dreamweaver reduirà la llista desplegable a l'etiqueta que s'adapti a allò que escriviu.
Si sou nou en HTML, podeu desplaçar-vos per la llista d'etiquetes HTML i triar-ne diverses per veure què fan. Dreamweaver continuarà demanant-vos els atributs una vegada hàgiu escrit una etiqueta. Per exemple, si escriviu ".
Però els suggeriments de codi no acaben amb les etiquetes. Podeu utilitzar suggeriments de codi per inserir:
Si els indicis del codi no apareixen, podeu prémer Ctrl-barra espaiadora (Windows) o Cmd-barra espaiadora (Macintosh) per mostrar-los. El motiu més habitual pel qual és possible que no aparegui una indicació de codi és si heu canviat a una finestra diferent abans d'acabar l'etiqueta. Atès que Dreamweaver està apagant l'escriptura del caràcter <, si sortiu de la finestra i torneu, haureu de reiniciar els suggeriments de codi.
Podeu desactivar el menú de suggeriments de codi fent clic a la tecla d'escapament.
Un cop hàgiu escrit l'etiqueta HTML d'obertura, haureu de tancar-la. Dreamweaver ho fa de forma natural. Si escriviu l'opció "Tancar Etiquetes" que millor s'adapti a les vostres necessitats.
Si no esteu preparat per passar a editar les vostres pàgines en HTML, però voleu veure el codi tal com està escrit, heu d'intentar l'inspector de codi. Això obre el codi HTML en una finestra independent. Funciona igual que la visualització de codi i, de fet, és bàsicament una finestra de visualització de codi desmuntable per al document actual. Per obrir l'inspector de codi, aneu al menú Finestra i seleccioneu "Inspector de codi" o premeu la tecla F10 al vostre teclat.
Dreamweaver formatarà el codi HTML, però us agradaria que aparegués. Per exemple, si utilitzeu 3 espais per sagnar, però mai indenteu etiquetes IMG, podeu especificar la informació de format a les opcions de reescriptura del codi. A continuació, vagi al menú d'ordres i seleccioneu "Aplica el format original". Aquesta és una bona manera d'obtenir un codi escrit per algú més en un format familiar per a tu.
Una característica que molts codificadors HTML no saben o no utilitzen és la possibilitat de col·lapsar el codi HTML. Això no elimina les etiquetes del document, sinó que simplement elimineu-les de la visualització perquè no distreguin al que esteu treballant. Per col·lapsar el codi:
- Seleccioneu la secció del codi que voleu amagar
- Al menú Edició, seleccioneu "Plegar selecció" al submenú "Codi de col · lapse"
Una manera més senzilla és seleccionar el codi i, a continuació, fer clic a les icones de col · lapse de codi que apareixen al canal. També podeu fer clic amb el botó dret del ratolí sobre el codi seleccionat i seleccionar "Plegar selecció".
Si voleu ocultar tot excepte el que es ressalta, trieu "Contraure fora de la selecció" en qualsevol dels mètodes anteriors.
Per ampliar el codi colapsat, simplement feu doble clic sobre ell. Això obre el codi i el selecciona. A continuació, podeu moure aquesta selecció o suprimir-la o afegir-hi etiquetes addicionals al voltant.
Podeu utilitzar el col.lapse i la funció d'expansió tot el temps a les pàgines on no voleu editar la plantilla externa. Només heu de seleccionar l'àrea de contingut que voleu editar i col·lapsar fora. A continuació, escriviu el vostre HTML. Encara podeu veure la pàgina a la vista de disseny o previsualitzar-la en un navegador. El codi col · lapse no s'elimina del document, simplement amagat de la vista. També podeu utilitzar-lo quan treballeu en una sèrie d'articles. Quan hagueu acabat un, col·lapsueu-lo. Ja saps que ja heu acabat quan no hi ha cap codi que mostri.