Dreamweaver es un excelente editor WYSIWYG, pero si no estás interesado en escribir páginas web en un entorno "lo que ves es lo que obtienes", aún puedes usar Dreamweaver porque también es un excelente editor de texto. Pero hay muchas características que se deslizan por el camino dentro del editor de código de Dreamweaver porque el enfoque principal está en la "vista de diseño" o la parte del editor WYSIWYG del producto.
Cómo entrar en la vista de código de Dreamweaver
Si nunca ha usado Dreamweaver como editor de HTML, es posible que nunca haya notado los tres botones en la parte superior de la página: "Código", "Dividir" y "Diseñar". Dreamweaver se inicia de forma predeterminada en "Vista de diseño" o en modo WYSIWYG. Pero es fácil cambiar a ver y editar el código HTML. Simplemente haga clic en el Código botón. O bien, vaya a la Ver menú y seleccione Código.
Si solo está aprendiendo a escribir HTML o quiere tener una idea de cómo sus cambios afectarán su documento, puede abrir la vista de código y la vista de diseño al mismo tiempo. La belleza de este método es que también puede editar en ambas ventanas. Por lo tanto, puede escribir el código para su etiqueta de imagen en HTML y luego usar la vista de diseño para moverlo a otra ubicación en la página con solo arrastrar y soltar.
Para ver ambos a la vez, ya sea:
- Haga clic en el División botón (entre Código y Diseño).
- En el Ver menú, seleccione Código y Diseño.
Una vez que se sienta cómodo utilizando Dreamweaver para editar su código HTML, puede cambiar sus preferencias para abrir Dreamweaver en la vista de código de forma predeterminada. La forma más fácil es guardar la vista de código como un espacio de trabajo. Dreamweaver se abrirá en el último espacio de trabajo que estaba usando. Si no es así, simplemente vaya al menú Ventana y elija el espacio de trabajo que desee.
Opciones de vista de código
Dreamweaver es muy flexible porque tiene muchas formas de personalizarlo y hacerlo funcionar como usted quiere. En la ventana de opciones, hay opciones para colorear el código, formato de código, sugerencias de código y reescritura de código que puede ajustar. Pero también puede cambiar algunas opciones especiales dentro de la propia vista de código.
Una vez que estás en la vista de código, hay una Ver opciones Botón en la barra de herramientas. También puede ver las opciones entrando en el Ver menú y elección Opciones de vista de código. Las opciones son:
- Ajuste de línea - ajusta el código HTML para que pueda verlo sin desplazarse horizontalmente. Tenga en cuenta que esta opción no inserta ningún retorno de carro en su código, solo muestra el código para que sea más fácil de leer.
- Línea de números - Muestra números de línea a lo largo del lado del código. Muestra un símbolo de ajuste de línea para las líneas que se ajustan más tiempo que la ventana de vista.
- Personajes ocultos - muestra caracteres especiales en lugar de espacios en blanco que se mostrarían en una página web. Como un punto reemplaza un espacio, un doble chevron reemplaza cada pestaña, y un marcador de columna o párrafo sustituye cada salto de línea.
- Resalte código inválido - resalta HTML que es incorrecto en amarillo. Si selecciona la etiqueta amarilla, el inspector de propiedades le dará sugerencias sobre cómo solucionarlo.
- Color de sintaxis - Activa o desactiva la codificación de colores de su código. Cambia los colores de su código de color en la sección de coloreado de código de las preferencias.
- Sangría automática - crea su sangría de código automáticamente después de un retorno de carro si el código de arriba está sangrado. Puede cambiar el tamaño de la sangría cambiando el tamaño de la pestaña en la sección de formato de código de las preferencias.
Edición de código HTML en la vista de código de Dreamweaver
Es fácil editar el código HTML en la vista de código de Dreamweaver. Simplemente comienza a escribir tu HTML. Pero Dreamweaver le proporciona algunos extras que lo extienden más allá de un editor HTML básico. Cuando empiezas a escribir una etiqueta HTML, escribes <. Si hace una pausa justo después de ese carácter, Dreamweaver le mostrará una lista de etiquetas HTML. Estos son llamados consejos de código. Para reducir la selección, comience a escribir letras: Dreamweaver reducirá la lista desplegable a la etiqueta que se ajuste a lo que está escribiendo.
Si es nuevo en HTML, puede desplazarse por la lista de etiquetas HTML y elegir varias para ver qué hacen. Dreamweaver continuará solicitándole atributos una vez que haya escrito una etiqueta. Por ejemplo, si escribes <>, Dreamweaver bajará a la Etiqueta HTML, con las otras etiquetas comenzando con I siguiendo. Si continúas escribiendo la letra metro, Dreamweaver lo reducirá a la etiqueta.
Pero las sugerencias de código no terminan en las etiquetas. Puedes usar sugerencias de código para insertar:
- Atributos HTML
- Nombres de clase y de identificación
- Propiedades CSS
Si las sugerencias de código no aparecen, puede golpear Ctrl-barra espaciadora (Windows) o Barra espaciadora cmd (Macintosh) para que aparezcan. La razón más común por la que podría no aparecer una sugerencia de código es si cambia a una ventana diferente antes de terminar su etiqueta. Porque Dreamweaver está tecleando la tipificación del personaje <, si abandonas la ventana y regresas, tendrás que volver a ejecutar las sugerencias de código.
Puede desactivar el menú de sugerencias de código presionando la tecla de escape.
Una vez que haya escrito su etiqueta HTML de apertura, deberá cerrarla. Dreamweaver hace esto de una manera natural. Si escribe el Cerrar etiquetas La opción que mejor se adapte a tus necesidades.
Si no está listo para cambiar a la edición de sus páginas en HTML, pero le gustaría ver el código tal como está escrito, debe probar el inspector de códigos. Esto abre el código HTML en una ventana separada. Funciona igual que la vista de código y, de hecho, es básicamente una ventana de vista de código desmontable para el documento actual.Para abrir el inspector de código, vaya a la Ventana menú y elegir Inspector de código o pulsa el F10 Tecla en tu teclado.
Dreamweaver formateará el código HTML como quiera que se muestre. Por ejemplo, si usa 3 espacios para sangrar, pero nunca sangra las etiquetas IMG, puede especificar esa información de formato en las opciones de reescritura de código. Entonces vas a la Comandos menú y elegir Aplicar formato de fuente. Esta es una excelente manera de obtener el código escrito por otra persona en un formato que le resulte familiar.
Una característica que muchos codificadores HTML no conocen o no utilizan es la capacidad de contraer código HTML. Esto no elimina las etiquetas del documento, solo las elimina de la vista para que no distraigan la atención en lo que estás trabajando. Para contraer su código:
- Seleccione la sección de código que desea ocultar.
- En el Editar menú, elegir Contraer Selección desde el Colapso de código submenú
Una forma más fácil es seleccionar el código y luego hacer clic en los iconos de colapso del código que aparecen en el canal. También puede hacer clic derecho en el código seleccionado y elegir Contraer Selección.
Si quieres esconder todo. excepto lo que está resaltado, elige Contraer fuera de la selección En cualquiera de los métodos anteriores.
Para expandir el código contraído, simplemente haga doble clic en él. Esto abre el código y lo selecciona. Luego puede mover esa selección o eliminarla o agregar etiquetas adicionales a su alrededor.
Puede usar la función de contraer y expandir todo el tiempo en las páginas en las que no desea editar la plantilla externa. Solo tienes que seleccionar el área de contenido que deseas editar y contraer afuera. Luego escribe tu HTML. Todavía puedes ver la página en Diseño Ver o previsualizarlo en un navegador. El código contraído no se elimina del documento, simplemente se oculta de la vista. También puedes usarlo cuando estás trabajando en una serie de artículos. Cuando hayas terminado uno, colapsalo. Sabes que has terminado cuando no hay código que muestra.
