Universidad Nacional del Litoral

Facultad de Ingeniería y Ciencias Hídricas

Departamento de Informática

Taller de Diseño Web

Formato de texto y estilos HTML.

© 2003
Hugo Minni
 Unidad 2
Formato de texto y estilos HTML.

En esta guía de estudio continuaremos aprendiendo los rudimentos básicos de

distribución de HTML en una página Web utilizando Macromedia Dreamweaver MX.
Aprenderemos a dar formato a caracteres y a guardar colores y estilos HTML para su
posterior reutilización. Manejaremos caracteres especiales, líneas separadoras y texto Flash.

Archivos necesarios para realizar la Guía de estudio

Proyecto terminado:
Lesson_01_Text/Completed/introduction.html

1) Para comenzar, inicie Dreamweaver MX y abra el documento introduction.htm con el que

trabajó en la Guía de Estudio Nro. 1.

Formato de caracteres

En Dreamweaver es posible aplicar una gran variedad de opciones de formato al texto

tipeado.
Estas opciones permiten enfatizar ciertas palabras o frases. Las opciones a establecer
incluyen negrilla, itálica y subrayado.

2) En introduction.htm, seleccione las palabras “Light Source” en la lista de definición que creó
en la sección anterior.
En el Inspector de Propiedades, haga click en el botón Bold ( ) para aplicar formato negrilla
al texto seleccionado. También puede elegir Text/Style/Bold. El atajo de teclado es Ctrl+B.

Consejo
Tenga cuidado en aplicar formato subrayado a su texto. El subrayado es una manera de
identificar hiperlinks en una página Web. Usarlo para secciones de texto que no constituyen
hiperlinks puede confundir a los usuarios.

FICH - UNL Taller de Diseño Web. Tema 2. Pág. 2 de 19.

Repetir un comando

Muchas veces Ud. deberá repetir la operación de formato más reciente para un nuevo
párrafo o sección de texto.
El comando Repeat reduce esta tarea a una simple tecla.
Las dos primeras opciones en el menú de Edit son:
- Undo apply Markup (Ctrl+Z)
- Repeat apply Markup (Ctrl+Y)

3) En introduction.htm, seleccione la palabra “Lens” en la lista de definición. Presione Ctrl+Y.

Como el comando Bold fue el usado más recientemente, éste formato es aplicado al texto
seleccionado.

4) Repita el formato negrilla sobre otros términos de la lista de definición.

Cambiar la fuente

Es posible modificar la fuente de la página completa o de porciones seleccionadas de

texto.

5) En introduction.htm, seleccione el texto Introducción a Luces de la Costa:

Exploración.
En el Inspector de Propiedades, en la lista desplegable Font ( ), seleccione
Arial,Helvetica,sans-serif.

La fuente elegida debe estar instalada en el equipo del usuario para que éste pueda ver la
página tal como fue diseñada.
La combinación de fuentes indicará al browser que modifique el texto mostrado a otra
fuente, en dependencia de si esa fuente está instalada en el equipo.
Si la primer opción en la lista de fuentes no está disponible, el browser intentará usar la
segunda opción y luego la tercera.
Si ninguna de las fuentes en la lista está disponible en el equipo del usuario, el texto
será visualizado en la fuente por omisión del browser.

Las combinaciones de fuentes (tales como Arial,Helvetica,sans-serif) son útiles, pero

pueden no incluir específicamente las fuentes que Ud. desea usar.
La combinación de fuentes se puede modificar eligiendo, en el Inspector de
Propiedades, en la lista desplegable de Fuentes, la opción Edit Font List...:

FICH - UNL Taller de Diseño Web. Tema 2. Pág. 3 de 19.

 También se puede elegir Text/Font/Edit Font List para ver la caja de diálogo Edit Font
List.

Aquí se puede seleccionar una combinación de fuentes y luego:

Agregar o eliminar fuentes.

Para ello seleccione la fuente y haga click sobre el botón direccional entre las listas Fuentes
Disponibles y Fuentes elegidas.

Agregar o eliminar una combinación de fuentes.

Se debe hacer click en el signo (+) o (-)

Agregar una fuente no instalada en su equipo.

Para ello debe tipear el nombre de la fuente en la caja de texto debajo de la lista de fuentes
disponibles. y hacer click en el botón direccional para agregarla a la combinación.

Cambiar el orden de una combinación en la lista

Para ello haga click en las flechas en la esquina superior derecha de la ventana.

Finalmente cierre la ventana.

6) Seleccione el resto del texto en la página. Aplíquele la fuente Arial,Helvetica,sans-serif.

FICH - UNL Taller de Diseño Web. Tema 2. Pág. 4 de 19.

7) Guarde su trabajo y haga una vista previa en el browser.

Cambiar el tamaño de la fuente

En HTML las opciones para cambiar el tamaño de la fuente en la página son limitadas.
Se posee más control a través de la aplicación de la tecnología de Hojas de estilo en cascada
(CSS).

8) Seleccione el primer párrafo identado cerca del principio de la página.

En el Inspector de Propiedades, en la lista desplegable Size, seleccione -1.

FICH - UNL Taller de Diseño Web. Tema 2. Pág. 5 de 19.

 Note que los tamaños son listados de 1 a 7, de +1 a +7 y de -1 a -7.
Seleccionar simplemente el número (1 es el más pequeño, 7 es el más grande) establece
el tamaño absoluto de la letra.
Elegir un número positivo o negativo selecciona el tamaño de fuente relativo al tamaño
base de la fuente.
El número +1, por ejemplo, hace que la fuente aparezca una medida más grande que el
tamaño base.

El tamaño de texto base por omisión en el browser es 3.

Si se elige +3 para el tamaño de la fuente, se estará en realidad cambiando el tamaño a 6
(3+3).
El tamaño máximo para fuentes es 7, y el mínimo es 1.
Cualquier tamaño mayor que 7 se visualiza como 7. Por ejemplo, si se establece el
tamaño a +6, 3+6 es mayor que 7 pero la fuente se mostrará de todas maneras como 7.

Usar tamaños relativos proporciona más control sobre la apariencia de tamaño relativa a
todo el texto en la página. Es en general más accesible a los usuarios que los tamaños absolutos.

Consejo
También es posible elegir Text/Size para modificar el tamaño de la fuente.

Cambiar el color de la fuente

En Dreamweaver es muy sencillo modificar el color de su texto.

9) Seleccione el texto Introducción a Luces de la Costa:

Exploración.
En el Inspector de Propiedades, haga click en el botón
Selector de color ( ).
Aparece la paleta de colores Web-safe.

Elija el color con código #003366 (azul oscuro).

La ventana de selección de colores se cierra automáticamente luego de clickear sobre el color, y

Dreamweaver aplica el color inmediatamente.

También se puede acceder a la selección de color a través de Text/Color.

FICH - UNL Taller de Diseño Web. Tema 2. Pág. 6 de 19.

Guardar colores como Favoritos

Grupo de paneles Files

Panel Assets
Todos los colores utilizados en nuestro sitio son
almacenados en el panel Assets del grupo de
paneles Files.

Para asegurarnos de que los colores que estamos

usando son consistentes a lo largo de nuestro sitio,
podemos almacenar los usados más comúnmente en
el panel Assets como Favoritos.

10) Haga click en la flecha a la izquierda de grupo de paneles

Files.

Se abre el grupo de paneles Files y proporciona acceso al

panel Assets.

Si el grupo de paneles Files no está abierto, se puede elegir

Window/Assets.

Seleccione la ficha Assets.

FICH - UNL Taller de Diseño Web. Tema 2. Pág. 7 de 19.

11) En el panel Assets, haga click en el ícono Colors en la
columna a la izquierda.

Haga click en el botón de opción Site.

Ud. verá los colores que ya han usado dentro del proyecto
“Luces de la Costa”.

12) En el panel Assets, en la lista de colores del sitio, seleccione el color #330000.

En la esquina inferior derecha del panel Assets, haga click en el botón Agregar a favoritos ( )

Dreamweaver mostrará una caja de

diálogo informando que el color ha sido
agregado a sus Favoritos.

En la parte superior del panel Assets, haga

click en el botón de opción Favorites.
Debe ver como favorito al color recién
seleccionado.

Crear estilos HTML

A medida que diseñe sus páginas, querrá usar cambios de fuentes para hacer más
interesantes sus páginas. Se puede modificar fácilmente una fuente incluyendo su tamaño y
color, pero si se desea utilizar el mismo color, la misma fuente y el mismo tamaño para todas sus
páginas, tendrá que recordar la configuración de página a página y de selección a selección.

FICH - UNL Taller de Diseño Web. Tema 2. Pág. 8 de 19.

 Los estilos HTML permiten guardar el formato de texto y párrafo de un texto
seleccionado, facilitando aplicar el estilo a otros párrafos en el documento o a cualquier
documento en el sitio.
Usando estilos HTML se puede hacer el formato más consistente entre documentos,
acelerando el proceso de formateo de texto, proporcionando la capacidad de compartir estilos
con otros miembros del equipo de diseño.
Si se modifica o elimina un estilo HTML, el texto formateado originalmente con ese
estilo no cambia.

Nota
Para aplicar un formato que se actualice sus páginas deberían usar hojas de estilo en cascada.

13) Seleccione el texto The Lighthouse of Alexandria.

Aplique formato negrilla al texto .

En el panel Assets, en la lista Site, seleccione el color #003366

Al pie del panel Assets, haga click en el botón Apply:

Esta sección de la página Web describe una serie de faros famosos. Aplicaremos al resto de los
nombres de faros el mismo formato aplicado. Usaremos un estilo HTML para este propósito.

14) Con el texto The Lighthouse of Alexandria

seleccionado, elija Window/HTML Styles.
En el grupo de paneles Design, se abre el panel HTML
Styles.

Al pie del panel HTML Styles, haga click en el botón New

Style ( ).

Consejo
También puede elegir New... desde el menú contextual desplegable ( ).

FICH - UNL Taller de Diseño Web. Tema 2. Pág. 9 de 19.

Aparece la ventana Define HTML Style.

Esta ventana permite realizar los cambios necesarios en

el formato de los estilos.
Como se posee un texto seleccionado, todo el formato ya
aplicado al texto se muestra en esta ventana.

En la caja de texto Name tipee Faro.

En la lista de botones de opción Apply to, elija Selection.
Haga click en OK.

Nota
Cualquier cambio que se haga en la ventana Define
HTML Style no será aplicado al texto original. Si se
desean efectuar cambios en el texto original, hay que
aplicar el estilo directamente al texto.

La ventana se cierra, y el nuevo estilo aparece en el

panel HTML Styles.

Junto al nuevo estilo HTML aparece una “a” subrayada,

indicando que se trata de un estilo de selección.

FICH - UNL Taller de Diseño Web. Tema 2. Pág. 10 de 19.

15) Seleccione el texto (Egypt).
Aplique formato itálica y color #333333.
Cree un nuevo estilo HTML para esta selección. Llámelo
Ubicacion.
Haga click en OK.

16) En la lista de definición de la página Web, seleccione el texto the illuminating device or
burning of fuel to create light. Cambie la fuente a Verdana, el estilo a itálica y el color de texto
a #333300.
Cree un nuevo estilo para el texto, llamándolo Definicion.
Esta vez, en la lista de botones de opción Apply to, seleccione Paragraph.
Haga click en OK para cerrar la ventana.

Note que el ícono de párrafo aparece junto al nuevo estilo.

Este ícono indica un estilo de párrafo.

Aplicar estilos HTML

Ahora que se poseen varios estilos definidos es hora de aplicarlos.

Aplicar un estilo a una selección requiere seleccionar el texto apropiado antes de
aplicar el estilo.
Aplicar el estilo a un párrafo requiere ubicar el punto de inserción dentro del párrafo
(no es necesario seleccionar nada dentro del párrafo).

17) Con el panel de estilos HTML abierto, seleccione el texto usually glass, used to focus and
increase light intensity.
En este caso, el estilo a aplicar es un estilo de párrafo, así que se puede seleccionar el texto o
bien ubicar el punto de inserción dentro del texto. Cada línea dentro de la lista es considerada un
párrafo diferente.

En el panel HTML Styles, haga click en el estilo Definicion para aplicarlo.

FICH - UNL Taller de Diseño Web. Tema 2. Pág. 11 de 19.
El estilo es aplicado al párrafo.

18) Aplique el estilo Definicion al resto de las definiciones en la lista.

19) Seleccione el texto (U.S.A.). En el panel html Styles, haga click en Ubicacion para aplicar el
estilo. Esta vez se está aplicando un estilo de selección, así que hay que asegurarse de
seleccionar el texto al cual se desea aplicar estilo.

20) Aplique el estilo Ubicacion al resto de las ubicaciones listadas entre paréntesis.

FICH - UNL Taller de Diseño Web. Tema 2. Pág. 12 de 19.

 Los estilos HTML creados pueden ser utilizados en otros proyectos o compartidos con
otros usuarios.
Cuando se crea un estilo HTML, Dreamweaver crea un archivo Styles.xml que es
guardado en una carpeta llamada Library. Es posible copiar el archivo Styles.xml y moverlo a
otras carpetas del sitio o compartirlo con otros diseñadores.

21) Aplique el estilo Faro al resto de los nombres de faros.

Agregar caracteres especiales

Cuando se trabaja con Dreamweaver a veces son necesarios caracteres que no están
disponibles directamente desde el teclado. Estos caracteres especiales poseen códigos HTML
específicos o comandos de teclado alternativos que son difíciles de recordar.

22) En la barra Insert, haga click en la ficha Characters.

23) Arrastre el caracter de Copyright desde la barra Insert hasta el pie de la página.
A la derecha del caracter insertado, tipee 2002, Luces de la Costa.

FICH - UNL Taller de Diseño Web. Tema 2. Pág. 13 de 19.

Consejo
También puede hacer click para ubicar el puntero de inserción en el punto en donde se desea
aparezca el símbolo de Copyright. (en este caso, al pie de la página) y luego hacer click sobre el
símbolo de Copyright. Este será ubicado en el punto de inserción.

Si bien la ficha Character de la barra

Insert proporciona acceso rápido a
muchos de los caracteres más
comunes, no provee la lista completa.
Si el caracter que necesita usar no está
disponible en la barra Insert, debe
hacer click en el botón other
characters( ) o elegir Insert/Special
Characters/Other...
Una vez abierta la ventana Insert
Other Character, haga click sobre el
caracter que desea usar y haga click en
OK.

Agregar líneas horizontales (horizontal rules)

En HTML, una horizontal rule es una línea que atraviesa la página y proporciona una
división visual entre secciones de contenido.

24) Coloque el puntero de inserción justo a la izquierda de la información de Copyright.

En la barra Insert seleccione la ficha Common. Haga click en el botón Horizontal Rule ( ).
También puede hacer click en el documento y elegir Insert/Horizontal Rule.

25) Con la horizontal rule aún seleccionada vaya al Inspector de Propiedades y tipee 70 en la
caja de texto W (width-ancho).
En la lista desplegable a la derecha del valor W, elija “%”.

FICH - UNL Taller de Diseño Web. Tema 2. Pág. 14 de 19.

La horizontal rule se extiende en un 70% del ancho de la ventana del browser.

Nota
Debe seleccionar pixels en la lista desplegable si desea especificar un ancho absoluto.
Si la horizontal rule es definida así, no resultará redimensionada cuando el usuario
redimensione la ventana del browser.

26) Desactive la casilla de verificación Shading.

Tipee 1 en la caja de texto H (Height-Alto).

Desactivando la casilla de verificación Shading se muestra una línea sólida.

También se puede elegir alinear la barra horizontalmente eligiendo left, center o right desde la
lista desplegable Align en el Inspector de Propiedades.
La alineación por omisión para una horizontal rule es centrada.

27) Guarde su trabajo y visualícelo en el browser.

Agregar la fecha de modificación del documento

A veces resulta útil tener registrada la fecha en que se modificó por última vez una
página de nuestro sitio.
Dreamweaver permite ubicar la fecha y hora en las páginas para seguir un registro de
esta información.
Dreamweaver actualiza automáticamente estos datos cada vez que grabamos nuestro
trabajo.

Nota
Esta fecha no es la fecha dinámica que cambia de acuerdo a la fecha y hora en que el usuario
accede a la página. Esta fecha simplemente le indica a los usuarios cuando fueron actualizadas
por última vez las páginas.

28) Ubique el puntero de inserción al final del documento.

En la barra Insert, seleccione la ficha Common.

FICH - UNL Taller de Diseño Web. Tema 2. Pág. 15 de 19.

Haga click en Date ( ) para ubicar la fecha actual en la página.
También puede elegir Insert/Date para abrir la ventana Insert Date.

Elija Thursday.

Elija March 7, 1974.

Elija 10:18 PM.

Chequee la casilla de
verificación Update
Automatically on Save para actualizar la fecha de la página cada vez que se guarde el
documento.
Haga click en OK.

Nota
Puede modificar el formato de fecha si éste es actualizado automáticamente.
Para ello debe hacer click sobre la fecha en el documento.
Luego, en el Inspector de Propiedades, debe hacer click en el botón Edit Date Format.
Aparece la ventana Edit Date Format.
Esta ventana es idéntica a la ventana Insert Date y permite realizar los cambios necesarios.

FICH - UNL Taller de Diseño Web. Tema 2. Pág. 16 de 19.

Agregar texto Flash

Dreamweaver permite agregar texto definido con la tecnología Flash, con cualquier
fuente de texto y sin salir de Dreamweaver.
El texto creado es guardado en un archivo Flash (.SWF) pequeño.

29) Posicione el puntero de inserción delante del texto Some of the world's most notable
lighthouses include:.
En la barra Insert, seleccione la ficha Media.

Texto Flash
Botón Flash

Objeto Flash

Haga click en el botón Flash Text ( ).

Aparece la ventana Insert Flash Text.

FICH - UNL Taller de Diseño Web. Tema 2. Pág. 17 de 19.

 30) Haga los siguientes cambios:

1) Elija la fuente Comic Sans MS (Si

no está disponible en sus sistema, elija
cualquier otra) 2) Elija un tamaño de 22 para la fuente

3) Elija un color 4) Elija un color

rojo oscuro. azul.

5) Tipee Some of the

world's most notable
lighthouses include:

7) Elija notable.swf como nombre del archivo Flash.

6) Para color de fondo, elija #CCCC99.

Haga click en OK.

31) En el Inspector de Propiedades, haga click en Play para iniciar la animación Flash.
Este paso permite ver la animación en Dreamweaver como si estuviese en el browser.

En la ventana del documento, ubique el puntero del mouse sobre el texto Flash.
El color del texto cambia al color “rollover” seleccionado.

En el Inspector de Propiedades, haga click en Stop.

FICH - UNL Taller de Diseño Web. Tema 2. Pág. 18 de 19.

32) En la ventana del documento, seleccione el texto Flash y redimensiónelo arrastrando uno de
sus manejadores.
No importa que tamaño se le de al texto Flash. Como se trata de texto Flash y no de texto
normal, se lo puede redimensionar directamente en la ventana del documento.

Nota
Redimensionar gráficos dentro de Dreamweaver no es recomendable. Sin embargo, se puede
redimensionar la imagen de texto Flash creada ya que es un gráfico vectorial.
Los gráficos vectoriales son escalables. Los gráficos de mapa de bits (como los GIF o JPEG)
no los son.

Como el texto Flash es un gráfico vectorial, se puede incrementar o decrementar el tamaño de la

imagen sin temor a perder calidad.

Consejo
Mantenga presionada la tecla Shift para conservar las proporciones mientras se redimensiona el
texto Flash.

33) Elimine el texto normal Some of the world's most notable lighthouses include: remanente a
continuación de la película Flash.

34) Grabe su trabajo y visualícelo en el browser.

Modificar Texto Flash

Es muy fácil modificar el texto Flash en Dreamweaver.

En la ventana del documento, debe hacer doble click sobre el texto Flash.
Si no puede seleccionar el texto, primero haga click en el botón Stop en el Inspector de
Propiedades. A continuación debe abrirse la caja de diálogo Insert text Flash.
Entonces cambie las opciones a gusto y haga click en Apply para ver los resultados.
Cuando finalice, elija OK para cerrar la ventana Insert Flash Text.

Que hemos aprendido

Hemos llegado al final de la segunda guía de estudio de la materia. El siguiente es un resumen

de lo que hemos aprendido hasta aquí. Hemos:

- Aplicado diferentes estilos, tamaño y color de fuente de texto utilizando el Inspector de

Propiedades.

- Personalizado combinaciones de fuentes y configuraciones.

- Automatizado el proceso de formateo de texto creando y aplicando estilos HTML.

- Agregado a la página caracteres especiales.

- Agregado a la página una fecha que se actualiza cada vez que se graba la misma.

- Creado y editado texto Flash.

FICH - UNL Taller de Diseño Web. Tema 2. Pág. 19 de 19.