Non debes usar só WYSIWYG
Dreamweaver é un excelente editor de WYSIWYG , pero se non estás interesado en escribir páxinas web nun entorno "que ves é o que obtés", aínda podes usar Dreamweaver porque tamén é un gran editor de texto. Pero hai moitas características que se deslizan polo camiño dentro do editor de código Dreamweaver porque o foco principal está na "vista de deseño" ou na porción de editor WYSIWYG do produto.
Como entrar na vista do código de Dreamweaver
Se nunca usou Dreamweaver como editor de HTML antes de que nunca sequera teña notado os tres botóns na parte superior da páxina: "Código", "División" e "Deseño". Dreamweaver inicia por defecto en "Vista de deseño" ou no modo WYSIWYG. Pero é fácil cambiar a visualización e edición do código HTML. Só tes que premer no botón "Código". Ou, vai ao menú Ver e selecciona "Código".
Se só estás a aprender a escribir HTML ou queres ter unha idea de como os teus cambios terán impacto no teu documento, podes abrir vista de código e visualizar o deseño ao mesmo tempo. A beleza deste método é que podes editar tamén en ambas as xanelas. Entón pode escribir o código para a súa etiqueta de imaxe en HTML e, a continuación, usar a vista de deseño para mover a outra localización na páxina arrastrando e soltando.
Para ver ambos á vez, quere:
- Fai clic no botón "Dividir" (entre "Código" e "Deseño")
- No menú Ver, selecciona "Código e deseño"
Unha vez que estea cómodo usando Dreamweaver para editar o seu código HTML, pode cambiar as súas preferencias para abrir Dreamweaver na visualización de código por defecto. O xeito máis sinxelo é gardar a vista de código como espazo de traballo. Dreamweaver abrirase no último espazo de traballo que estaba a usar. Se non o fai, basta con ir ao menú Ventá e elixe o espazo de traballo que desexe.
Opcións de visualización de código
Dreamweaver é tan flexible porque ten moitas maneiras de personalizar e facer que funcione do xeito que o desexes. Na xanela de opcións, hai cor de código, formateo de código, consellos de código e opcións de reescritura de código que podes axustar. Pero tamén podes cambiar algunhas opcións especiais dentro da vista de código en si.
Unha vez que estás na vista de código, hai un botón "Ver opcións" na barra de ferramentas. Tamén pode ver as opcións ingresando no menú Ver e escoller "Opcións de visualización de código". As opcións son:
- Word Wrap : envasa o código HTML para que poida velo sen desprazar horizontalmente. Teña en conta que esta opción non insire ningún retorno de carro no seu código, só mostra o código para que sexa máis fácil de ler.
- Números de liña : mostra os números de liña ao longo do lado do código. Mostra un símbolo de envoltura de liña para liñas que se empenzan máis que a fiestra de vista.
- Caracteres ocultos : mostra caracteres especiais en vez de espazos en branco que se mostrarán nunha páxina web. Tal como un punto substitúe a un espazo, un dobre chevron substitúe a cada pestana e un marcador de orzamento ou parágrafo substitúe a cada salto de liña.
- Destaque o código non válido: destaca HTML que é incorrecto en amarelo. Se selecciona a etiqueta amarela, o inspector de propiedades daralle consellos sobre como solucionalo.
- Cor do sintaxe : activa ou desactiva a codificación de cor do teu código. Cambia as cores da codificación da cor na sección de coloración de código das preferencias.
- Sangramento automático : fai o seu código sangrando automaticamente despois dun retorno de carro se o código de arriba está sangrado. Pode cambiar o tamaño do guión cambiando o tamaño da tabulación na sección de formato de código das preferencias.
Edición de código HTML na vista de código de Dreamweaver
É fácil editar código HTML na vista de código de Dreamweaver. Simplemente comece a escribir o teu HTML. Pero Dreamweaver ofrécelle algúns extras que o estenden máis aló dun editor HTML básico. Cando comece a escribir unha etiqueta HTML escriba <. Se fai unha pausa despois do personaxe, Dreamweaver mostraralle unha lista de etiquetas HTML . Estes son chamados consellos de código. Para reducir a selección, comece a escribir letras - Dreamweaver reducirá a lista despregábel para a etiqueta que se adapta ao que está escribindo.
Se é novo en HTML, pode desprazarse pola lista de etiquetas HTML e escoller varias para ver o que fan. Dreamweaver continuará a solicitar os atributos unha vez que escribiches unha etiqueta. Por exemplo, se escribe ".
Pero as suxestións de código non terminan coas etiquetas. Podes usar consellos de código para inserir:
Se as suxestións de código non aparecen, pode pulsar Ctrl-barra espaciadora (Windows) ou Cmd-barra espaciadora (Macintosh) para que se mostren. A razón máis común pola que non pode aparecer unha información de código é se cambiou a outra xanela antes de rematar a súa etiqueta. Debido a que Dreamweaver está apagando a teclear o carácter <, se sae da fiestra e regresa, terá que reiniciar as suxestións de código.
Pode desactivar o menú de consellos de código premendo a tecla de escape.
Unha vez que escribiches a túa etiqueta HTML inicial, necesitarás pechala. Dreamweaver fai isto dun xeito natural. Se escribe a opción de "Pechar etiquetas" que mellor se adapte ás túas necesidades.
Se aínda non estás preparado para cambiar a edición das túas páxinas en HTML, pero queres ver o código tal como está escrito, debes probar o inspector de código. Isto abre o código HTML nunha xanela separada. Funciona do mesmo xeito que a vista de código e, de feito, é basicamente unha xanela de visualización de código desmontable para o documento actual. Para abrir o inspector de código, vaia ao menú Ventá e escolla "Inspector de código" ou prema a tecla F10 no teclado.
Dreamweaver formatará o código HTML no que desexa que se mostre. Por exemplo, se usa 3 espazos para sangrar, pero nunca inicia as etiquetas IMG, pode especificar a información de formato nas opcións de reescritura do código. Entón vai ao menú Comandos e escolle "Aplicar o formato de orixe". Esta é unha boa forma de obter o código escrito por outra persoa nun formato familiar para ti.
Unha característica que moitos codificadores HTML non saben ou non usan é a capacidade de colapsar o código HTML. Isto non elimina as etiquetas do documento, senón simplemente eliminalas da vista para que non estean distraendo o que está a traballar. Para colapsar o teu código:
- Selecciona a sección do código que queres ocultar
- No menú Editar, escolla "Collapse Selection" no submenú "Código de colapso"
Un xeito máis doado é seleccionar o código e logo premer sobre as iconas do colapso do código que aparecen na canle. Tamén pode facer clic co botón dereito no código seleccionado e escoller "Collapse Selection".
Se quere ocultar todo excepto o que está resaltado, elixe "Colar fóra de selección" en calquera dos métodos anteriores.
Para expandir o código colapsado, basta con premer dúas veces sobre el. Isto abre o código e seleccionao. Entón pode mover esa selección ou borralo ou engadir etiquetas adicionais ao seu redor.
Podes usar o colapso e expandir o recurso todo o tempo en páxinas onde non queres editar o modelo externo. Só tes que seleccionar a área de contido que desexas editar e colapsala fóra. A continuación, escriba o seu HTML. Aínda podes ver a páxina en Vista de deseño ou previsualizala nun navegador. O código colapsado non se elimina do documento, simplemente agochado da vista. Tamén podes usalo cando estás traballando nunha serie de elementos. Cando termine un, colócase. Vostede sabe que está feito cando non hai código que se amosará.