Macromedia Dreamweaver 8 ofrece varias formas de
añadir texto y aplicarle formato en un documento. Puede insertar texto,
establecer el tipo, tamaño y color de fuente y los atributos de alineación, así
como crear y aplicar sus propios estilos personalizados mediante el uso de CSS
(hojas de estilos en cascada).
Durante este tema se utilizará el modo mixto para
ver el código html que se va generando y al mismo tiempo tengamos una
previsualización del diseño para ver cómo va quedando el aspecto de las
modificaciones realizadas.
En las figuras 5.1 a 5.3.se muestran los distintos
lugares donde existen opciones para dar formato al texto.
Figura 5.2. Barra insertar, Texto.
Figura 5.3. Inspector de propiedades.
En la figura 5.3. se observan las distintas
opciones que aparecen cuando hay texto seleccionado.
Todas las opciones de formato de texto se
encuentran en el Menú -> Texto tal como se puede comprobar en la
figura 5.4.
Figura 5.4. Opciones para formatear texto desde el
menú.
Inserción de texto
Dreamweaver permite añadir texto a páginas Web
escribiendo el texto directamente en una página, copiando y pegando texto de
otro documento o arrastrando texto de otra aplicación.
Entre los tipos de documentos que los profesionales
de la Web reciben con contenido de texto que debe incorporarse en las
páginas Web, se incluyen los archivos de texto ASCII, los archivos en
formato de texto enriquecido y los documentos de Microsoft Office. Dreamweaver
permite extraer texto de cualquiera de estos tipos de documentos e incorporarlo
a una página Web.
Figura 5.7. Inserción de texto utilizando copiar y
pegar.
Aplicación de formato al texto
A continuación se va a detallar la forma de cambiar
el formato del texto utilizando la barra insertar. Todo eso se hace de forma
similar desde el menú texto o desde el inspector de propiedades.
En las figuras 5.8. a 5.12 se muestra la forma en
que se puede dar formato a distinto texto utilizando la barra insertar texto.
Figura 5.8. Aplicación de Formato texto: “Encabezado
1”.
Figura 5.9. Aplicación de Formato texto: “Texto en
negrita”.
Figura 5.10. Aplicación de Formato texto:
“Encabezado 2”.
.
Figura 5.11. Aplicación de Formato texto:
“Negrita”+”Cursiva”.
Figura 5.12. Aplicación de Formato texto: “Negrita”+”Cursiva”.
Inserción de hiperenlaces y correos electrónicos
En primer lugar, en la barra insertar, se
debe elegir la opción “Común”, tal como se indica en la figura 5.25.
Figura 5.25. Selección de la barra de inserción
“Común”.
En las figuras 5.26 y 5.27 se indica
respectivamente cómo insertar hipervínculos a páginas de Internet así como
hacia otras páginas ubicadas en el sitio actual.
Figura
5.26. Inserción de “Hipervínculo” apuntando a una dirección de Internet.
Figura 5.27. Inserción de “Hipervínculo” apuntando
a otra página HTML del sitio actual.
Para incluir hipervínculos a zonas de la página
actual, en primer lugar se debe insertar un anclaje con nombre, figura
5.28. Posteriormente se inserta el hipervínculo, figura 5.29, así como hacia
otras páginas ubicadas en el sitio actual.
Figura 5.28. Inserción de un “anclaje con nombre”.
La inserción de una imagen con un editor
como BlueGriffon resulta extremadamente sencilla. En el menú Insertar
seleccionamos la opción Imagen. Aparecerá el cuadro de diálogo de la
figura:
En la parte superior debemos indicar la
ubicación de la imagen. De nuevo hay que recordar que, para que las direcciones
se generen como relativas, previamente debemos haber guardado la página web.
En el cuadro Texto alternativo
estableceremos el contenido del parámetro alt, es decir, una descripción
breve de la imagen.
Los otros dos cuadros se emplean para
añadir información extra en el caso de Título (algunos navegadores
muestran esta información como un mensaje emergente) y para indicar una
dirección donde mostrar información extendida. Esta última opción no funciona
en casi ningún navegador en la actualidad, por lo que no nos molestaremos en
rellenarla.
En conclusión, sólo indicaremos la dirección
de la imagen, un texto alternativo y haremos clic en Aceptar.
En este momento, la imagen se mostrará
en nuestra página web con su tamaño original. Se habrá insertado en el punto en
el que estuviese el cursor. Si lo necesitamos, podemos desplazarla a otra
posición de la página haciendo clic sobre ella y arrastrando el ratón hasta su
nueva posición, mientras mantenemos presionado el botón.
Editar
la imagen
Si queremos cambiar la imagen o
modificar el texto alternativo, podemos hacer doble clic sobre la imagen para
editarla. También podemos, obviamente, hacer clic en el botón source de
la parte inferior y modificar el código fuente de la página directamente.
Modificar
el tamaño de la imagen
Al hacer clic sobre una imagen, veremos
que aparecen unos pequeños cuadros alrededor de la imagen, como se muestra en
la figura. Arrastrando estos cuadros, podemos modificar sus dimensiones.
Ya hemos comentado que los cambios de
dimensiones se deberían realizar siempre con un editor de imágenes, pero en
ocasiones esta opción nos puede sacar de un apuro.
Al modificar el tamaño de una imagen, es
interesante ver cómo se refleja dentro de la etiqueta img. Accediendo a
la zona de código fuente mediante la opción source, podemos ver que los
cambios han provocado que se incorpore el parámetro style para recoger,
mediante estilos css, los cambios en los valores de anchura (width) y
altura (height). Si queremos afinar esos valores todavía más, podríamos
hacerlo con facilidad cambiándolos en el código fuente.
Modificar
la ubicación de la imagen
Estamos dejando para más tarde el
trabajo con estilos, pero podemos apuntar algún detalle al respecto. Si
quisiéramos modificar la ubicación de la imagen, podríamos seleccionarla y
modificar los valores del grupo Posición y distribución del panel Propiedades
de estilo, que se despliega haciendo clic en Paneles>Propiedades de
estilo. Con esa opciones podemos modificar la flotación de la imagen,
añadir algún desplazamiento, etc. Puedes probar a modificar algunos valores y
ver cómo va modificándose la posición de la imagen.
0 comentarios:
Publicar un comentario