Cómo agregar y formatear texto en Dreamweaver: dummies

Muchas personas quedan gratamente sorprendidas por la facilidad con la que pueden crear una página web básica con texto e imágenes en Dreamweaver. Puede hacer un formato de texto básico utilizando las opciones de formato HTML de Dreamweaver, incluidas las etiquetas de encabezado y párrafo. Comience con estas etiquetas HTML básicas para mantener las cosas simples al principio.

Cómo agregar texto a una página web en Dreamweaver

Para agregar texto a una página, puede simplemente hacer clic para insertar el cursor en la parte superior de la página y escribir. Si desea agregar texto que tenga en otro lugar, como en un archivo creado en Microsoft Word, puede copiar y pegar el texto en Dreamweaver en lugar de volver a escribirlo.

Dreamweaver ofrece muchas formas de mantener el formato al copiar y pegar texto de otro programa. Esta característica es especialmente importante cuando copia texto de Microsoft Word porque si solo pega el texto tal como está, corre el riesgo de incluir muchos códigos adicionales que son exclusivos de Microsoft Word y pueden causar problemas en su página web.

Puede cambiar el valor predeterminado de cómo Dreamweaver maneja el formato cuando elige Editar → Pegar alterando las Preferencias en la categoría Copiar / Pegar. También puede elegir Editar → Pegado especial para mostrar estas opciones cada vez que pegue contenido nuevo.

Las siguientes son sus cuatro opciones principales para insertar texto cuando elige Edición → Pegado especial, así como tres formas de refinar su elección:

• Solo texto: Dreamweaver elimina cualquier formateo e inserto Texto sin formato.

• Texto con estructura: Dreamweaver incluye párrafos, listas, tablas y otras opciones de formato estructural.

• Texto con estructura más formato básico: Dreamweaver incluye el formato estructural y el formato básico, como negrita y cursiva.

• Texto con formato completo de Structure Plus: Además de las opciones anteriores, Dreamweaver incluye el formato creado por hojas de estilo en programas como Microsoft Word.

• Retener saltos de línea: Se mantienen los saltos de línea, incluso si no conserva otras opciones de formato. Esta opción no está disponible si elige Solo texto.

• Limpiar espacios de párrafo de Word: Esta opción elimina el código de formato especial exclusivo de Microsoft Word y no es necesario (y no se recomienda) para el texto en la web.

• Convertir citas inteligentes en citas rectas: Comillas inteligentes: el nombre común para las citas rizadas de fantasía que los diseñadores adoran usar en documentos impresos, requieren que un personaje especial se muestre correctamente en la web, y ese personaje especial lo hace no funciona en todos los navegadores web.Para evitar este posible problema, seleccione esta casilla y convierta todas las citas inteligentes en rectas.

Cómo formatear texto con las etiquetas de encabezado en Dreamweaver

Una de las mejores opciones de formato para titulares es la colección de etiquetas de encabezado. En HTML, usar etiquetas de encabezado (

,

, etc.) para formatear texto que sirve como título o título ofrece muchas ventajas. Las etiquetas de encabezado están diseñadas para mostrarse en tamaños relativos, con

el más grande,

más pequeño,

aún más pequeño, y así sucesivamente hasta

.

Así que no importa el tamaño de texto predeterminado de una página web (y los tamaños de texto pueden variar debido a la configuración del navegador y la plataforma de la computadora), cualquier texto formateado con una etiqueta

siempre es más grande que el texto formateado con

.

La creencia popular es que muchos motores de búsqueda le dan prioridad a las palabras clave en el texto formateado con una etiqueta

porque el texto más importante en una página generalmente se incluye en el título de mayor tamaño. Del mismo modo, los expertos en motores de búsqueda le dirán que debe usar la etiqueta

solo una vez por página.

Para formatear texto con una etiqueta de encabezado, siga estos pasos:

1. Resalte el texto que desea formatear.

2. En el inspector de propiedades, en la parte inferior del espacio de trabajo, asegúrese de que esté seleccionado el botón HTML en el lado izquierdo del inspector.

3. Use la lista desplegable Formato para seleccionar una opción de encabezado.

   Cuando se aplican etiquetas de encabezado, el texto cambia automáticamente para convertirse en grande y negrita en la vista Diseño.

   

   Crédito: foto de Casey Stoll

En general, el inspector de propiedades es la forma más fácil de aplicar el formato básico, pero también puede encontrar estas opciones de formato HTML seleccionando Formato → Formato de párrafo y luego seleccionando una opción de encabezado del submenú que aparece.

Cómo agregar párrafos y saltos de línea en Dreamweaver

Cuando crea diseños de página para la web, debe trabajar dentro de muchas limitaciones que pueden parecer confusas al principio. El diseño web y el diseño de impresión son fundamentalmente diferentes, y eso puede hacer incluso tareas aparentemente simples más complicadas de lo que cabría esperar. Cómo crear párrafos y saltos de línea es un buen ejemplo.

Si está trabajando en la vista Diseño en Dreamweaver y presiona la tecla Intro (Windows) o la tecla Intro (Mac), Dreamweaver inserta una etiqueta de párrafo, o

, en el código, lo que crea un salto de línea seguido por una linea en blanco

Si desea un salto de línea sin la línea en blanco adicional, mantenga presionada la tecla Mayús mientras presiona Enter (o Return) para indicar a Dreamweaver que inserte la etiqueta

en el código, creando un salto de línea único.

La práctica recomendada es evitar el uso de párrafos múltiples o romper etiquetas para crear espacio extra en una página web (y no todos los navegadores mantendrán el espacio en blanco si lo crea de esa manera). Si desea agregar mucho espacio entre párrafos u otros elementos en una página, su mejor opción es usar CSS.

Si está trabajando en la vista Código y agrega espacio con la tecla Intro o Retorno, agrega espacio en blanco dentro del código. El espacio extra en el código HTML puede ser útil porque el espacio adicional puede hacer que el código sea más fácil de leer, pero en general, no afecta la forma en que se muestra una página en la vista Diseño o en un navegador web.