PRACTICA 2 ­ DREAMWEAVER 

DANDO FORMATO A LA PAGINA CON UNA HOJA DE ESTILOS CSS 

Antes de empezar a dar formato con la hoja de estilo CSS debe haber hecho lo siguiente: 

1.  Configurar su sitio web. 
2.  Utilizando las vistas de diseños, crear el esquema de su web. 
3.  Agregar el texto a la página. 

En nuestro ejemplo quedaría de la siguiente manera: 

3.

1.

2.

CREANDO LA HOJA DE ESTILOS PARA DAR FORMATO A NUESTRA PAGINA WEB 

Configurando la fuente y el color de fondo de la página 

CREANDO ESTILOS A LAS ETIQUETAS 

1.  Clic en el menú Texto . 
2.  Seleccionar Estilo CSS 
3.  Escoger Nuevo 
4.  Configurar de acuerdo al grafico que se muestra:
En este ejemplo
se le dará estilo a
la etiqueta body
(que se refiere a
todo el cuerpo de
la página)

Lic. Carlos Meza Vásquez  1 
 5.  Como estamos definiendo en un nuevo archivo de hoja de estilos, nos saldrá el cuadro para 
guardar el archivo. 

Lo guardamos en
nuestro sitio web

Colocarle un
nombre a la hoja
de estilos

6.  Nos saldrá las opciones para cambiar los estilos para la etiqueta body 
Se cambiara el
formato al texto
de toda la
página
(Etiqueta body):
fuente: verdana,
tamaño: 10
En la
categoría
Tipo se
define el
aspecto del
texto:

7.  Cambiamos de categoría Fondo

Se cambiará
el fondo de
En la categoría la página a
Fondo se define color negro
el color o #000000
imagen de fondo
de los diferentes
elementos de la
Web

Lic. Carlos Meza Vásquez  2 
 8.  En nuestra Página Web se mostraría de la siguiente manera: 

Se cambió el fondo
de la página a color Cambió la fuente
negro ‐ #000000  de toda la página
Fuente: verdana,
Tamaño: 10

9.  Ahora crearemos los estilos para las etiquetas de los encabezados de HTML 

También se pueden crear estilos desde el panel CSS 
A TENER EN CUENTA 

Los Encabezados son etiquetas 

para definir párrafos especiales, 
formateados como títulos. Son 
Clic derecho son etiquetas que formatean el 
en un espacio texto como un titular, para lo cual 
vacío y asignan un tamaño mayor de letra 
seleccionar y colocan el texto en negrita. 
Nuevo
Hay varios tipos de encabezados, 
que se diferencian en el tamaño 
de la letra que utilizan. La etiqueta 
en concreto es la <h1>, para los 
encabezados más grandes, <h2> 
para los de segundo nivel y así 
hasta <h6> que es el encabezado 
más pequeño 

Nos saldrá el siguiente cuadro:

Seleccionar la
etiqueta de
de
encabezado
Definirlo en la
h1 hoja de estilo
creada
anteriormente

Lic. Carlos Meza Vásquez  3 
 10.  Seleccionar la categoría Tipo y cambiar el aspecto del texto: 

Para cambiar de
fuente, desplegar y
editar lista de fuentes

Cambiar el
tamaño,
estilo y
color de
fuente

Seleccionar otro grupo

de 3 nuevas fuentes

11. Luego de configurar el texto, la etiqueta h1 se mostrara en el panel CSS 

Doble clic para regresar al

cuadro anterior y
modificar los estilos

12. Ahora se va aplicar los estilos de la etiqueta h1 (encabezado 1) 

Seleccionar el texto al cual se

quiere aplicar el estilo de la
etiqueta h1 (en nuestro
ejemplo seleccionaremos el
título principal)

13. La vista de estar configurado en Estándar

Lic. Carlos Meza Vásquez  4 
 14. Buscar en las propiedades la opción Formato y seleccionar Encabezado 1 que es la etiqueta h1 

15. El resultado con el texto seleccionado será como se muestra a continuación:

El texto seleccionado
tendrá los estilos de
la etiqueta h1

Lic. Carlos Meza Vásquez  5