La manera fácil de escribir HTML en Dreamweaver (sin WYSIWYG)

La manera fácil de escribir HTML en Dreamweaver (sin WYSIWYG)

La manera fácil de escribir HTML en Dreamweaver (sin WYSIWYG)

VALORACIÓN DEL ARTÍCULO:
5/5


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 , Dreamweaver bajará a la etiqueta HTML, con las otras etiquetas empezando por I siguiente. Si continúa escribiendo la letra m , Dreamweaver la reducirá a la etiqueta .

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:

  1. Seleccione la sección de código que desea ocultar.
  2. En el menú Editar , seleccione Selección de colapso en el submenú Colapso de código
  3. .

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.

TAMBIÉN TE INTERESA

la estafa más habitual de España

Así es la estafa más habitual: WhatsApp, Telegram, oferta de empleo y un troyano…

Está arrasando. La estafa más habitual que circula por España lo tiene todo: ingeniería social, plataformas de mensajería, el señuelo del un empleo irreal y un troyano que tienes cuando ya has caído. Los expertos en ciberseguridad como Secure&IT se han hecho eco de multitud de robos de estas características. Describiendo la estafa más habitual

planificar un viaje con ChatGPT

Planificar un viaje con ChatGPT: todo lo que debes saber

Planificar un viaje con ChatGPT es una de las muchas cosas que se pueden hacer con esta popular herramienta. Destinos, restaurantes, precios, parkings donde dejar el coche, itinerarios… Se puede hacer de todo con la IA, pero hasta cierto punto. Y es que hay límites y riesgos que hay que tener en cuenta. Lo analizamos

nuevas funciones de Apple Intelligence

Traducción en Vivo y las nuevas funciones que llegan a Apple Intelligence

Apple ha anunciado nuevas funciones de Apple Intelligence que mejoran la experiencia del usuario en iPhone, iPad, Mac, Apple Watch y Apple Vision Pro. Es decir todo el ecosistema de Apple. Entre lo más destacado, llega Traducción en Vivo, si bien también hablaremos de otras mejoras en inteligencia visual o las novedades en Image Playground

webs con accesibilidad digital

Webs con accesibilidad: problema y asignatura pendiente en España

Aunque pueda parecer perfecta, Internet tiene carencias, especialmente para las personas con discapacidad. En lo que comprende a España, el país tiene una asignatura pendiente en la inclusión digital, puesto que las webs con accesibilidad digital son minoría. Este ha sido del tema de debate de la jornada “Accesibilidad Digital: Un futuro inclusivo”, organizada por