Dreamweaver es un gran editor WYSIWYG, pero si no estás interesado en escribir páginas web en un entorno de «lo que ves es lo que obtienes», puedes seguir usando Dreamweaver porque también es un gran editor de texto. Pero hay muchas características que se deslizan por el camino dentro del editor de código de Dreamweaver porque el foco principal está en la «vista de diseño» o la porción del editor WYSIWYG del producto.
Cómo entrar en la vista de código de Dreamweaver
Si nunca ha utilizado Dreamweaver como un editor HTML antes, es posible que nunca haya notado los tres botones en la parte superior de la página: «Código», «Separar» y «Diseño». Dreamweaver se inicia de forma predeterminada en el modo «Vista de diseño» o WYSIWYG. Pero es fácil cambiar a ver y editar el código HTML. Simplemente haga clic en el botón Código . O bien, vaya al menú Ver y seleccione Código .
Si está aprendiendo a escribir HTML o quiere tener una idea de cómo sus cambios afectarán a 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 se puede editar en ambas ventanas. Así que puede escribir el código para la etiqueta de su imagen en HTML y luego usar la vista de diseño para moverla a otra ubicación en la página con arrastrar y soltar.
Para ver ambas cosas a la vez:
- Haga clic en el botón Dividir (entre Código y Diseño ).
- En el menú Ver , seleccione Código y Diseño.
Una vez que se sienta cómodo usando 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 utilizó. Si no lo hace, simplemente vaya al menú Ventana y elija el espacio de trabajo que desee.
Opciones de vista de código
Dreamweaver es tan flexible porque tiene muchas maneras de personalizarlo y hacer que funcione de la manera que usted desea. En la ventana de opciones, hay opciones para colorear el código, formatear el código, sugerencias de código y reescribirlo. Pero también puede cambiar algunas opciones especiales dentro de la propia vista de código.
Una vez que esté en la vista de código, hay un botón View Options en la barra de herramientas. También puede ver las opciones yendo al menú Ver y eligiendo Opciones de vista de código. Las opciones son:
- Ajuste de línea : ajusta el código HTML para que pueda verlo sin tener que desplazarse horizontalmente. Tenga en cuenta que esta opción no inserta ningún retorno de carro en su código, sólo muestra el código para que sea más fácil de leer.
- Números de línea – muestra los números de línea a lo largo del lateral del código. Muestra un símbolo de ajuste de líneas para las líneas que se ajustan más largas que la ventana de visualización.
- Caracteres ocultos – muestra caracteres especiales en lugar de espacios en blanco que se mostrarían en una página web. Tal como un punto reemplaza un espacio, un doble chevron reemplaza cada pestaña, y un marcador de párrafo reemplaza cada salto de línea.
- Resalta Código no válido – resalta HTML que es incorrecto en amarillo. Si selecciona la etiqueta amarilla, el Inspector de Propiedades le dará consejos sobre cómo arreglarla.
- Coloración de sintaxis – activa o desactiva la codificación de color de su código. Usted cambia los colores de su código de colores en la sección de código de colores de las preferencias.
- Auto Indent – hace que su código se sangren 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 código HTML en la vista de código de Dreamweaver. Simplemente empieza a escribir tu HTML. Pero Dreamweaver le proporciona algunos extras que lo extienden más allá de un editor HTML básico. Cuando empiece a escribir una etiqueta HTML, escriba < . Si hace una pausa justo después de ese carácter, Dreamweaver le mostrará una lista de etiquetas HTML. Éstas se llaman pistas de código. Para reducir la selección, comience a escribir letras – Dreamweaver reducirá la lista desplegable a la etiqueta que se ajusta a lo que está escribiendo.
Si es nuevo en HTML, puede desplazarse por la lista de etiquetas HTML y elegir varias para ver lo que hacen. Dreamweaver continuará pidiéndole atributos una vez que haya escrito una etiqueta. Por ejemplo, si escribes .
Pero las sugerencias de código no terminan en las etiquetas. Puede utilizar sugerencias de código para insertar:
- Atributos HTML
- Nombres de clase e ID
- Propiedades de CSS
Si no aparecen las sugerencias de código, puede pulsar Ctrl-spacebar (Windows) o Cmd-spacebar (Macintosh) para que se muestren. La razón más común por la que una sugerencia de código podría no aparecer es si cambiaste a una ventana diferente antes de terminar tu etiqueta. Debido a que Dreamweaver está tecleando la escritura del personaje < , si dejas la ventana y regresas, tendrás que volver a lanzar las sugerencias de código.
Puede desactivar el menú de sugerencias de código pulsando la tecla de escape.
Una vez que haya escrito la etiqueta HTML de apertura, tendrá que cerrarla. Dreamweaver lo hace de una manera natural. Si escribe la opción Cerrar etiquetas que mejor se adapte a sus necesidades.
Si no estás listo para cambiar a la edición de tus páginas en HTML pero te gustaría ver el código tal y como está escrito, deberías intentarlo con el inspector de código. 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 al menú Window y elija Code Inspector o pulse la tecla F10 de su teclado.
Dreamweaver formateará el código HTML de la forma que usted desee que se muestre. Por ejemplo, si utiliza 3 espacios para sangrar, pero nunca para sangrar etiquetas IMG, puede especificar esa información de formato en las opciones de reescritura de código. A continuación, vaya al menú Comandos y seleccione Aplicar formato fuente . Esta es una gran manera de conseguir código escrito por alguien más en un formato familiar para usted.
Una característica que muchos codificadores HTML no conocen o no usan es la capacidad de contraer código HTML. Esto no elimina las etiquetas del documento, sino que simplemente las elimina de la vista para que no distraigan la atención sobre lo que está trabajando. Para colapsar tu código:
- Seleccione la sección de código que desea ocultar.
- En el menú Editar , seleccione Selección de colapso en el submenú Colapso de código
.
Una forma más fácil es seleccionar el código y luego hacer clic en los iconos de colapso de código que aparecen en el canalón. También puede hacer clic con el botón derecho en el código seleccionado y elegir Colapsar selección .
Si desea ocultar todo excepto lo que está resaltado, elija Ocultar selección exterior en cualquiera de los métodos anteriores.
Para expandir el código colapsado, simplemente haga doble clic en él. Esto abre el código y lo selecciona. Luego puede mover esa selección o borrarla o añadir etiquetas adicionales a su alrededor.
Puede utilizar la función de contraer y expandir todo el tiempo en páginas en las que no desee editar la plantilla externa. Sólo tiene que seleccionar el área de contenido que desea editar y contraer fuera. Luego escribe tu HTML. Todavía puede ver la página en Diseño , verla o previsualizarla en un navegador. El código colapsado no se elimina del documento, simplemente se oculta a la vista. También puede utilizarlo cuando esté trabajando en una serie de elementos. Cuando termines uno, colúmpelo. Sabes que has terminado cuando no se muestra el código.
