MANUAL DE DREAMWEAVER Índice

Vista previa del material en texto

MANUAL DE DREAMWEAVER 
Página -I- 
 
Índice 
 
UNIDAD 1 
ÁREA DE TRABAJO Y GESTIÓN DE ARCHIVOS EN EL SITIO LOCAL ............................... 1 
INTRODUCCIÓN ................................................................................................................. 1 
ENTORNO DE TRABAJO .................................................................................................... 1 
ELEMENTOS DE LA VENTANA .......................................................................................... 3 
LOS PANELES...................................................................................................................... 4 
INSPECTOR DE PROPIEDADES .......................................................................................... 4 
PANEL ARCHIVOS .............................................................................................................. 4 
PANEL ACTIVOS ................................................................................................................. 5 
PANELES INSPECTOR DE ETIQUETAS ............................................................................... 5 
PANEL HISTORIAL .............................................................................................................. 5 
PANEL CSS .......................................................................................................................... 5 
PANEL INSPECTOR DE CÓDIGO ........................................................................................ 6 
PANEL MARCOS ................................................................................................................. 6 
DISPOSICIÓN DE PANELES ............................................................................................... 6 
MENÚS ............................................................................................................................... 6 
MENÚS CONTEXTUALES ................................................................................................... 6 
AYUDA ............................................................................................................................... 6 
METODOLOGÍA DE TRABAJO EN UNA WEB ................................................................... 7 
PLANIFICACIÓN DE UN SITIO WEB .................................................................................. 7 
DEFINICIÓN DE UN SITIO WEB O SITIO LOCAL ............................................................... 8 
INTRODUCCIÓN ................................................................................................................. 8 
CREAR UN SITIO LOCAL .................................................................................................... 8 
CREAR UN SITIO LOCAL MEDIANTE EL ASISTENTE......................................................... 8 
CREAR UN SITIO LOCAL MEDIANTE UNA CARPETA 
EN EL DISCO DURO ........................................................................................................... 9 
CÓMO SUBIR LAS PÁGINAS AL SERVIDOR .................................................................... 10 
CONFIGURAR EL SERVIDOR ............................................................................................ 10 
ACCESO A NUESTRO LUGAR EN EL SERVIDOR ............................................................. 10 
SUBIR LOS ARCHIVOS AL SERVIDOR .............................................................................. 10 
BAJAR ARCHIVOS DESDE EL SERVIDOR ......................................................................... 11 
TRABAJAR EN MODO EXPANDIDO................................................................................ 11 
GESTIÓN DE ARCHIVOS EN EL SITIO LOCAL.................................................................. 12 
AÑADIR ARCHIVOS/CARPETAS AL SITIO LOCAL .......................................................... 12 
ESTABLECER LA PÁGINA PRINCIPAL .............................................................................. 12 
CAMBIAR EL NOMBRE DE UN ARCHIVO ....................................................................... 12 
BORRRAR ARCHIVOS/CARPETAS ................................................................................... 13 
TRABAJAR CON LAS PÁGINAS........................................................................................ 13 
COMENTARIOS SOBRE LAS CARPETAS .......................................................................... 13 
CARPETAS DE IMÁGENES ............................................................................................... 13 
TÍTULO DE PÁGINA Y NOMBRES DE ARCHIVO ............................................................. 13 
GUARDAR PÁGINAS ........................................................................................................ 13 
ABRIR PÁGINAS EXTERNAS ............................................................................................ 14 
VISTA PREVIA EN EL NAVEGADOR ................................................................................ 14 
 
MANUAL DE DREAMWEAVER 
Página -II- 
 
 
 
UNIDAD 2 
CREACIÓN DE PÁGINAS: PROPIEDADES ........................................................................ 15 
ESTABLECER EL TAMAÑO DE UNA PÁGINA.................................................................. 15 
INTRODUCCIÓN ............................................................................................................... 15 
PROPIEDADES DE UNA PÁGINA ..................................................................................... 15 
APLICAR FONDOS DE COLOR A LA PÁGINA ................................................................. 15 
APLICAR FONDOS BITMAP ............................................................................................. 15 
ESCRITURA DEL TEXTO ................................................................................................... 16 
INSERTAR SALTOS DE PÁRRAFO Y DE LÍNEA ................................................................ 16 
INSERTAR LÍNEAS HORIZONTALES ................................................................................. 16 
INSERTAR IMÁGENES ...................................................................................................... 16 
INSERTAR VÍNCULOS ....................................................................................................... 17 
RESUMEN CONCEPTOS GENERALES: EDICIÓN FORMATOS 
Y PANEL PROPIEDADES .................................................................................................. 18 
SUGERENCIAS EN LA CONFECCIÓN DE LA WEB ........................................................... 20 
GUÍA PARA COMPONER CON ESTILO ............................................................................ 20 
UNIDAD 3 
ESTILOS CSS ...................................................................................................................... 21 
INTRODUCCIÓN ............................................................................................................... 21 
COMENTARIOS SOBRE ESTILOS ...................................................................................... 22 
ELEMENTOS DE CONTROL PARA CSS............................................................................. 22 
EL PANEL DE ESTILOS CSS ............................................................................................... 22 
EL MODO ACTUAL DEL PANEL CSS ................................................................................ 23 
EL MODO TODO DEL PANEL CSS ................................................................................... 24 
CREAR ESTILOS INTERNOS 
CON PROPIEDADES DE PÁGINA ..................................................................................... 24 
CREAR ESTILOS INTERNOS 
CON EL BOTÓN NUEVA REGLA CSS ............................................................................... 26 
EDICIÓN DE ESTILOS CSS ................................................................................................27 
CREAR ESTILOS EXTERNOS CSS ...................................................................................... 27 
APLICAR UNA HOJA DE ESTILOS EXTERNA A OTRAS PÁGINAS .................................. 29 
CONVERTIR UN ESTILO CSS INTERNO EN EXTERNO ..................................................... 29 
ANEXO: RESUMEN SOBRE HOJAS DE ESTILO CSS ......................................................... 29 
ESTILOS CSS DE MUESTRA .............................................................................................. 30 
DISEÑOS PREFIJADOS ...................................................................................................... 31 
UNIDAD 4 
ENLACES O VÍNCULOS .................................................................................................... 32 
INTRODUCCIÓN ............................................................................................................... 32 
RUTAS RELATIVAS Y ABSOLUTAS .................................................................................. 32 
ASIGNAR UN VÍNCULO ................................................................................................... 33 
VÍNCULOS DE TEXTO ...................................................................................................... 33 
CAMBIO DE ATRIBUTOS PARA LOS VÍNCULOS DE TEXTO ........................................... 34 
ENLAZAR CON LA FUNCIÓN SEÑALAR ARCHIVO ......................................................... 34 
ENLAZAR CON LA FUNCIÓN BUSCAR ARCHIVO ........................................................... 34 
CREAR ENLACES DE CORREO ELECTRÓNICO ................................................................ 34 
CREAR MARCADORES EN EL DOCUMENTO ACTUAL ................................................... 35 
CREAR MARCADORES A OTRA PÁGINA DEL SITIO LOCAL .......................................... 35 
VÍNCULOS CON ARCHIVOS ............................................................................................. 35
MANUAL DE DREAMWEAVER 
Página -III- 
 
 
 
CREAR VÍNCULOS GRÁFICOS .......................................................................................... 36 
ASIGNACIÓN DE DESTINO A LOS VÍNCULOS ................................................................ 36 
CREAR UN ENLACE A UNA PÁGINA FUERA DEL SITIO LOCAL .................................... 37 
CREAR ENLACES A ARCHIVOS COMPRIMIDOS ............................................................. 37 
MAPA DE IMÁGENES ...................................................................................................... 37 
EDITAR LAS ZONAS SENSIBLES ....................................................................................... 37 
CREACIÓN DE BARRAS DE NAVEGACIÓN ..................................................................... 38 
ADMINISTRACIÓN DE LOS VÍNCULOS ........................................................................... 39 
EDITAR VÍNCULOS EN MAPA DEL SITIO ........................................................................ 40 
CAMBIAR UN VÍNCULO EN TODO EL SITIO ................................................................... 41 
UNIDAD 5 
TABLAS ............................................................................................................................. 42 
CREAR TABLAS ................................................................................................................. 42 
SELECCIONAR UNA TABLA ............................................................................................. 42 
SELECCIONAR FILAS, COLUMNAS Y CELDAS ................................................................ 43 
AÑADIR FILAS Y COLUMNAS ......................................................................................... 43 
ELIMINAR FILAS Y COLUMNAS ...................................................................................... 43 
DIVISIÓN Y COMBINACIÓN DE CELDAS ........................................................................ 43 
CAMBIAR EL TAMAÑO DE FILAS, COLUMNAS 
CELDAS Y TABLAS ........................................................................................................... 44 
CAMBIAR EL TAMAÑO DE UNA TABLA ........................................................................ 44 
CAMBIAR EL TAMAÑO DE FILAS Y COLUMNAS ........................................................... 44 
IGUALAR ANCHOS DE COLUMNA DE CÓDIGO Y VISUALES ........................................ 44 
AMPLIAR CELDAS DE UNA TABLA ................................................................................. 44 
IMPORTAR DATOS A LA TABLA ..................................................................................... 45 
ORDENAR EL CONTENIDO DE LAS TABLAS ................................................................... 45 
TABLAS ANIDADAS ......................................................................................................... 45 
TABLAS DE DISEÑO ......................................................................................................... 45 
CREAR CELDAS EN LA TABLA DE DISEÑO ..................................................................... 45 
DETALLES DE LAS TABLAS Y CELDAS ............................................................................ 46 
CUADRÍCULA ................................................................................................................... 46 
CAMBIAR EL TAMAÑO DE LAS TABLAS 
Y LAS CELDAS EN EL MODO DISEÑO............................................................................. 46 
MOVER TABLAS Y CELDAS ............................................................................................. 46 
UNIDAD 6 
IMÁGENES ........................................................................................................................ 48 
INTRODUCCIÓN ............................................................................................................... 48 
PREPARACIÓN DE LAS IMÁGENES PARA LA WEB ........................................................ 49 
INSERTAR IMÁGENES ...................................................................................................... 49 
CAMBIAR EL TAMAÑO DE LA IMAGEN ......................................................................... 50 
ALINEACIÓN DE IMÁGENES ........................................................................................... 51 
COLOCAR UN BORDE A LAS IMÁGENES 
NOMBRAR Y ETIQUETAS DE TEXTO .............................................................................. 52 
PANEL DE ACTIVOS: GESTIÓN DE IMÁGENES ............................................................... 52 
MARCADORES DE POSICIÓN .......................................................................................... 53 
VISTA PREVIA DE IMÁGENES .......................................................................................... 53 
CREAR THUMBNAILS DE MODO AUTOMÁTICO: 
ÁLBUM DE FOTOS ........................................................................................................... 54
MANUAL DE DREAMWEAVER 
Página -IV- 
 
 
 
IMÁGENES DE SUSTITUCIÓN .......................................................................................... 55 
GIF´S ANIMADOS ............................................................................................................ 56 
UNIDAD 7 
MARCOS ........................................................................................................................... 57 
INTRODUCCIÓN ............................................................................................................... 57 
INSERCIÓN DE UN CONJUNTO DE MARCOS PREDEFINIDO ......................................... 58 
INSERCIÓN MANUAL DE MARCOS ................................................................................. 58 
SELECCIONAR MARCOS: EL PANEL MARCOS ................................................................ 58 
GUARDAR UN CONJUNTO DE MARCOS ........................................................................ 59 
RESUMEN:CÓMO GUARDAR UN CONJUNTO DE MARCOS 
Y ESTABLECER DESTINOS ................................................................................................ 59 
PROPIEDADES DE LOS MARCOS ..................................................................................... 60 
PROPIEDADES DEL CONJUNTO DE MARCOS ................................................................ 60 
EJEMPLO DE MARCOS..................................................................................................... 61 
UNIDAD 8 
FORMULARIOS ................................................................................................................. 62 
INTRODUCCIÓN ............................................................................................................... 62 
FUNCIONAMIENTO DE LOS FORMULARIOS .................................................................. 62 
CREAR UN FORMULARIO ................................................................................................ 62 
OBJETOS DEL FORMULARIO ........................................................................................... 63 
CAMPOS DE TEXTO DE UNA LÍNEA ............................................................................... 63 
CAMPOS DE TEXTO DE VARIAS LÍNEAS ........................................................................ 64 
CASILLAS DE VERIFICACIÓN ........................................................................................... 64 
BOTONES DE OPCIÓN ..................................................................................................... 64 
GRUPOS DE OPCIÓN ....................................................................................................... 65 
ELEMENTOS DE LISTA/MENÚ ......................................................................................... 66 
BOTONES DE FORMULARIO ........................................................................................... 66 
CAMPO DE IMAGEN ........................................................................................................ 67 
CAMPO DE ARCHIVO ...................................................................................................... 67 
JUEGO DE CAMPOS ......................................................................................................... 67 
CAMPO OCULTO ............................................................................................................. 68 
MENÚ DE SALTO ............................................................................................................. 68 
GESTIÓN DE LOS FORMULARIOS ................................................................................... 69 
CGI .................................................................................................................................... 69 
PRUEBA DE FORMULARIOS ............................................................................................ 70 
UNIDAD 9 
ELEMENTOS DE EDICIÓN ................................................................................................ 73 
EL PANEL HISTORIAL ....................................................................................................... 73 
AUTOMATIZACIÓN DE TAREAS ..................................................................................... 73 
LOS COMANDOS ............................................................................................................. 74 
BUSCAR Y REEMPLAZAR ................................................................................................. 74 
BUSCAR Y REEMPLAZAR ETIQUETAS ............................................................................. 74 
VISTAS DISEÑO, DIVIDIR Y CÓDIGO .............................................................................. 75 
EDICIÓN DEL CÓDIGO ..................................................................................................... 75 
EL SELECTOR DE ETIQUETAS .......................................................................................... 76 
INSERCIÓN Y EDICIÓN DE ETIQUETAS ........................................................................... 76 
LA VENTANA SELECTOR DE ETIQUETAS ........................................................................ 76 
QUICK TAG EDITOR ......................................................................................................... 76 
FRAGMENTOS .................................................................................................................. 77 
 
MANUAL DE DREAMWEAVER 
Página -V- 
 
 
 
UNIDAD 10 
PLANTILLAS Y BIBLIOTECAS ........................................................................................... 78 
INTRODUCCIÓN ............................................................................................................... 78 
CREAR UNA PLANTILLA DESDE CERO ............................................................................ 78 
CREAR PLANTILLAS A PARTIR DE UN DOCUMENTO .................................................... 79 
CREAR UNA PLANTILLA DESDE LA BARRA INSERTAR .................................................. 79 
CREAR PÁGINAS DESDE UNA PLANTILLA...................................................................... 79 
DEFINICIÓN DE LAS REGIONES EDITABLES ................................................................... 80 
ELIMINAR REGIONES EDITABLES ................................................................................... 81 
BIBLIOTECAS .................................................................................................................... 81 
CREACIÓN DE ELEMENTOS DE BIBLIOTECA .................................................................. 81 
COLOCAR ELEMENTOS DE BIBLIOTECA ......................................................................... 82 
MODIFICAR ELEMENTOS DE BIBLIOTECA...................................................................... 82 
RECUPERAR ELEMENTOS DE BIBLIOTECA ..................................................................... 82 
UNIDAD 11 
MULTIMEDIA ................................................................................................................... 83 
INTRODUCCIÓN ............................................................................................................... 83 
INSERTAR ANIMACIONES FLASH ................................................................................... 83 
INSERTAR TEXTO FLASH ................................................................................................. 84 
INSERTAR BOTONES FLASH ............................................................................................ 85 
INSERTAR VÍDEO ............................................................................................................. 85 
INCRUSTAR VÍDEO EN UNA PÁGINA WEB .................................................................... 86 
VÍNCULO A UN ARCHIVO DE VÍDEO.............................................................................. 86 
FLASH VÍDEO ................................................................................................................... 86 
INSERTAR SHOCKWAVE .................................................................................................. 87 
INSERTAR SONIDO .......................................................................................................... 87 
INCRUSTAR AUDIO EN UNA PÁGINA WEB ................................................................... 88 
VÍNCULO A UN ARCHIVO DE AUDIO ............................................................................. 88 
INSERTAR APPLET DE JAVA ............................................................................................ 88 
INSTALAR Y UTILIZAR EXTENSIONES ............................................................................. 89 
CÓMO INSTALAR LAS EXTENSIONES ............................................................................. 89 
UNIDAD 12 
ENTORNO SPRY ...............................................................................................................90 
SPRY WIDGETS ................................................................................................................. 90 
BARRA DE MENÚS DE SPRY............................................................................................ 91 
NAVEGACIÓN POR FICHAS ............................................................................................. 92 
ACORDEÓN DE SPRY ....................................................................................................... 93 
PANEL DE CONTRACCIÓN SPRY ..................................................................................... 93 
SPRY Y LOS FORMULARIOS ............................................................................................ 94 
CAMPO DE TEXTO DE VALIDACIÓN SPRY..................................................................... 94 
SELECCIÓN DE VALIDACIÓN SPRY ................................................................................. 95 
ÁREA DE TEXTO DE VALIDACIÓN .................................................................................. 96 
CASILLAS DE VERIFICACIÓN ........................................................................................... 96 
 
 
 
 
 
MANUAL DE DREAMWEAVER 
Página - 1 - 
 
DREAMWEAVER 
 
 
 
Unidad 1 
 
ÁREA DE TRABAJO Y GESTIÓN DE ARCHIVOS EN EL SITIO 
LOCAL 
 
INTRODUCCIÓN 
Dreamweaver es un editor para el diseño de sitios Web con una interfaz gráfica que permite 
visualizar automáticamente el código y el diseño de la página que vamos creando. 
 
ENTORNO DE TRABAJO 
Cuando se inicia Dreamweaver se muestra un asistente con el que podemos crear un 
documento vacío y acceder a los documentos que hayamos creado recientemente así como 
trabajar con plantillas, hojas de estilo, marcos, etc… 
 
 
 
• Si seleccionamos la opción HTML en la columna central, crearemos un nuevo documento 
vacío en el que partiendo de cero podemos crear una página en lenguaje HTML. 
También disponemos de opciones para iniciar una página en lenguajes para 
programación de sitios dinámicos (PHP, ASP, etc..) 
• En la columna de la izquierda, aparece un listado de los documentos guardados 
recientemente, pudiendo abrir cualquiera de ellos. 
MANUAL DE DREAMWEAVER 
Página - 2 - 
 
• En la columna de la derecha disponemos de una serie de plantillas predeterminadas para 
crear páginas con hojas de estilo CSS, páginas con marcos, páginas prediseñadas, etc..Para 
empezar a trabajar con una página en blanco, pulsar en la opción Crear nuevo>HTML, 
veremos la ventana de trabajo en Dreamweaver con una página en blanco. 
 
 
 
Además aparecen una serie de paneles repartidos por la pantalla que podemos abrir, cerrar 
desde el menú Ventana o cambiar de tamaño haciendo uso del ratón. 
 
En la parte inferior aparece el panel de Propiedades y en el lateral, entre otros, el panel 
Archivos, CSS , etc.. en función de lo que hayamos activado en el menú Ventana. 
 
En la parte superior de la pantalla tenemos la barra de menús que da acceso a todas las 
opciones del programa (muchas de las cuales son accesibles desde los diferentes paneles). 
 
Debajo de la barra de menús se encuentra la barra de herramientas Insertar con los 
elementos comunes que podemos insertar en una página Web, como son: 
 
- Común: para insertar los elementos básicos en una página web, como los hipervínculos, 
tablas, imágenes, multimedia, fecha, etc.. 
 
 
 
- Diseño: para trabajar más específicamente con tablas, capas, marcos, etc.. 
 
 
 
 
 
MANUAL DE DREAMWEAVER 
Página - 3 - 
 
 
- Formularios: para trabajar con los elementos típicos de los formularios 
 
- Datos: insertar objetos de datos y elementos dinámicos. 
 
- Spry: contiene botones para crear páginas Spry, objetos de datos y widgets de Spry 
 
 
 
 
 
- Texto: con las opciones de texto más habituales 
 
 
 
 
 
 
- Favoritos: permite agrupar y organizar en un lugar común los botones de la barra 
Insertar que utilicemos con más frecuencia. Para añadir la categoría favoritos , pulsar 
con el botón derecho del ratón en la barra insertar y activar la opción Personalizar 
favoritos. Seleccionar los elementos deseados y agregar con el botón de la flecha. 
 
Si necesitamos agrupar todas las barras Insertar para que aparezcan como fichas activar Mostrar 
como fichas o bien Mostrar como menú (utilizando el botón derecho del ratón). 
 
ELEMENTOS DE LA VENTANA 
 
La ventana principal de Dreamweaver contiene los siguientes elementos: 
 
 
 
Barra de estado Selector de 
etiquetas HTML 
Tamaño de la 
ventana 
Tamaño y tiempo 
de carga 
Barra Documento Barra Estándar 
MANUAL DE DREAMWEAVER 
Página - 4 - 
 
• La barra Documento (en la parte superior): que contiene los botones con las diferentes 
vistas del documento (código, dividir y diseño), permite añadir un título a nuestro 
documento, administrar archivos y realizar una vista previa en nuestro navegador entre 
otras opciones. 
• Si hacemos clic con el botón derecho del ratón sobre la barra Documento, se pueden 
activar el resto barras comunes entre otras la barra Estándar con las opciones típicas de 
Windows tales como Nuevo, Abrir, Guardar, Copiar, Pegar, etc.. 
 
• En la Barra de estado vemos: 
o cada una de las etiquetas HTML que se van generando a medida que 
introducimos elementos en nuestra página, pudiendo seleccionar la etiqueta y 
modificarla, se trata del Selector de etiquetas. 
o La casilla Tamaño de ventana para ver el tamaño de la ventana con el que 
estamos trabajando en ese momento. 
o La casilla Tamaño y tiempo de carga en el navegador, para tener una idea 
aproximada del tiempo que tardará en cargarse nuestra página. El tiempo de 
carga dependerá de la velocidad de conexión o el módem. 
 
 
LOS PANELES 
 
Para activar los distintos paneles seleccionar el menú Ventana 
 
AA.. INSPECTOR DE PROPIEDADES 
 
Se puede abrir mediante el menú Ventana>Propiedades o bien pulsando Control + F3. Desde 
este panel se pueden examinar y editar las propiedades de cada elemento que seleccionemos en 
una página. El contenido del inspector variará en función del elemento seleccionado. 
 
 
 
La flecha de ampliación del panel (situada en la parte inferior del inspector), se amplia para ver 
más propiedades. El icono nos permitirá insertar directamente etiquetas HTML en la 
ventana flotante que aparece. El icono de la parte derecha permite controlar los paneles. 
 
 
BB.. PANEL ARCHIVOS 
 
 
Se utiliza para realizar las operaciones de mantenimiento de 
archivos, creación de documentos HTML, organización de 
páginas, movimientos de archivos y creación de carpetas. 
 
También permite transferir archivos entre los sitios local y 
remoto, es decir, entre la carpeta que tenemos en nuestro 
disco duro y nuestro servidor de internet. 
 
 Además en este panel se puede ver un sitio local en forma de 
mapa visual de iconos vinculados, para agregar nuevos 
archivos a un sitio y para modificar , agregar o quitar vínculos. 
 
 
 
Con la tecla F8 podemos hacer visible el panel de archivos.
MANUAL DE DREAMWEAVER 
Página - 5 - 
 
 
 
CC.. PANEL ACTIVOS 
 
Se llama Activos a los diversos elementos que se 
almacenan en un sitio, como pueden ser las 
imágenes, vídeos, animaciones Flash, colores, etc… y 
se encuentran clasificados en categorías. 
 
Mediante las herramientas de este panel podemos, 
entre otras acciones, seguir la pista de los colores 
utilizados en las páginas, insertar imágenes y 
elementos Flash y gestionar la biblioteca de 
elementos. 
 
 
DD.. PANELES INSPECTOR DE ETIQUETAS 
 
Agrupa los paneles Atributos y Comportamientos. 
 
Mediante el panel Atributos podemos editar 
etiquetas HTML y objetos mediante una hoja de 
propiedades. 
 
El panel Comportamientos permite al usuario interactuar con la página para realizar 
determinadas tareas, como por ejemplo una opción de menú en una página o cuando se pasa el 
ratón por encima de un elemento para que muestre una imagen o reproduzca un sonido. 
 
 
 
 
EE.. PANEL HISTORIAL 
 
 
Muestrauna lista de todas las operaciones realizadas en el documento activo desde que éste se 
ha creado abierto, se trata en definitiva como una grabadora que va almacenando todo lo que 
vamos haciendo durante nuestra sesión de trabajo. 
 
 
FF.. PANEL CSS 
 
 
Agrupa en principio los paneles Estilos CSS y Elementos PA. El 
panel de estilos CSS se utiliza para crear, editar y quitar estilos 
CSS (hojas de estilo en cascada), los cuales permiten generar 
efectos de texto y controlar la colocación de los elementos de 
pantalla, ajuste de márgenes, propiedades de fuentes y texto, 
etc.. . 
 
El panel Elementos PA se utiliza para el control de capas en 
Dreamweaver. Una capa es un elemento que puede contener 
cualquier tipo de objeto y es susceptible de desplazarse por 
cualquier parte del documento.
MANUAL DE DREAMWEAVER 
Página - 6 - 
 
GG.. PANEL INSPECTOR DE CÓDIGO 
 
 
Permite ver y editar el código de lo que realizamos en la página en una ventana independiente 
de la principal. Para abrir el panel del inspector de código ir al menú Ventana>Inspector de 
código o pulsar la tecla F10. 
 
 
 
HH.. PANEL MARCOS 
 
 
Muestra una representación de los marcos del documento de una manera visual pudiendo 
seleccionar los mismos para editar o ver sus propiedades. 
 
 
 
DISPOSICIÓN DE LOS PANELES 
 
Para desplazar
 
 los paneles a otro sitio de la pantalla ( o convertirlos flotantes), arrastrar del 
extremo punteado que aparece a la izquierda de la barra de título del panel y soltar en otra 
posición. 
 
 
 
Para desplegar
Cuando el panel está desplegado, a la derecha de la barra de título aparece un pequeño 
símbolo que da acceso a un menú contextual . 
 un panel, basta con hacer clic en la flechita pequeña situada a la izquierda del 
nombre del panel y la misma acción para cerrar el panel. 
 
Para cerrar todos los paneles a la vez y trabajar más cómodamente pulsar la tecla F4 y la misma 
tecla para volver a visualizarlos. 
 
 
 
MENÚS EN DREAMWEAVER 
 
 
MENÚS CONTEXTUALES 
 
 
Los menús contextuales aparecen al hacer clic con el botón derecho del ratón sobre un 
determinado elemento de la página y nos proporcionan una serie de comandos para llevar a 
cabo determinadas acciones. 
 
 
AYUDA EN DREAMWEAVER 
 
 
Pulsando la tecla F1 se accede a la ayuda principal del programa, organizada como una página 
Web. Además de la tecla F1 , el icono que se encuentra en un panel, inspector o ventana 
nos muestra la ayuda para ese elemento en cuestión. 
 
Posición de arrastre 
MANUAL DE DREAMWEAVER 
Página - 7 - 
 
METODOLOGÍA DE TRABAJO EN DREAMWEAVER 
 
 
PLANIFICACIÓN DE UN SITIO WEB 
 
A la hora de realizar un sitio Web debemos planificarlo antes de comenzar a añadir elementos, 
tenemos que tener claro el número de páginas que va a contener, qué va a aparecer en cada 
una de ellas, a quién está destinado, cuál es el propósito, etc.. 
 
Es preciso tener en cuenta lo siguiente: 
 
• Crear el sitio en papel antes de comenzar a trabajar con Dreamweaver, indicando los 
temas que vamos a tratar y organizarlos en categorías. 
• Dibujar un organigrama de la Web representando las páginas con rectángulos (ver 
figura) y utilizar flechas para señalar los hipervínculos. 
• Una vez decidido el contenido de las páginas, tenemos que crearlas, para ello, 
escribiremos el texto, el diseño de los gráficos y los archivos de audio y vídeo necesarios.. 
• Pensar en la audiencia que observará nuestra página. 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Una vez planificado el sitio Web, la mecánica de trabajo con Dreamweaver es la siguiente: 
 
11ºº.. Crear un nuevo sitio. 
22ºº.. Crear la(s) carpetas y archivos que van a constituir nuestro sitio Web. 
33ºº.. Configurar los diferentes elementos básicos de la página (imagen o color de fondo, 
colores y tipos de letra, márgenes, tamaño de la página, etc..). 
44ºº.. Introducir en cada página los elementos que deseemos (texto, imágenes, vínculos, 
capas, animaciones, sonidos, etc..) 
55ºº.. Continuar creando la totalidad de las página que conformen nuestro sitio Web, 
procurando dar un formato homogéneo a los distintos encabezados y párrafos de cada 
página (adjuntar estilos). 
66ºº.. Comprobar el buen funcionamiento de todos los vínculos. 
77ºº.. Comprobar la compatibilidad con diferentes navegadores. 
88ºº.. Alojar el sitio Web en el servidor al que estemos suscritos. 
MANUAL DE DREAMWEAVER 
Página - 8 - 
 
DEFINICIÓN DE UN STIO WEB O SITIO LOCAL 
 
 
INTRODUCCIÓN 
 
Un documento de Dreamweamer es cada página que realizamos dentro de la ventana de 
trabajo. El conjunto de páginas con elementos multimedia enlazadas entre sí constituyen un 
Sitio web. 
 
Lo usual es disponer de una página principal conteniendo los temas o apartados principales de 
la web desde la que accedemos a las diferentes páginas para desarrollar cada uno de esos temas 
de forma individual. 
 
Es conveniente, por otra parte, con vistas a tener organizado nuestro sitio, agrupar en una sola 
carpeta todas las imágenes que aparecen en la diferentes páginas, agrupar en otra todos los 
archivos de sonido, plantillas, animaciones, etc.. 
 
El lugar en el disco duro en donde se almacenan el conjunto de documentos y archivos que 
conforman la totalidad de una web se le llama Sitio Local o carpeta Raíz Local. Será una réplica 
del Sitio remoto, que es el sitio real del servidor Web al que accederán los visitantes. 
 
La creación de un sitio local, comprendido en la carpeta raíz local dentro de la que se establece 
la estructura de archivos y carpetas del sitio, evitará el acceso a cualquier archivo ubicado fuera 
de la carpeta raíz local. Los archivos del disco duro que no se encuentren en la carpeta raíz local 
no estarán disponibles para el servidor remoto. 
 
Es aconsejable definir un sitio local en nuestro ordenador antes de empezar a crear páginas, 
gráficos y demás elementos. El nombre de una carpeta raíz es simplemente para fines de gestión 
de archivos (no estará disponible para los visitantes de la página) y puede ser el nombre del sitio 
respectivo o cualquier otro nombre que deseemos. 
 
 
 
CREAR UN SITIO LOCAL 
 
Podemos crear un sitio local de varios modos: 
• Mediante el asistente Sitio de Dreamweaver 
• Mediante la creación de carpetas previas en el disco duro. 
 
CREAR UN SITIO LOCAL CON EL ASISTENTE SITIO DE DREAMWEAVER 
 
11.. En la ventana principal de la aplicación de Dreamweaver seleccionar una de estas dos 
opciones: 
• Menú Sitio>Nuevo sitio.. 
• Menú Sitio>Administrador de sitios…>botón Nuevo…>Sitio 
 
22.. Se abre el asistente con dos fichas; Básicas y Avanzadas. Seleccionar Básicas y en esta 
ventana tenemos que escribir el nombre que vamos a poner al sitio (que puede coincidir 
con el nombre de la carpeta raíz local) y la dirección URL
 
 en donde se alojará nuestro 
sitio en el servidor de Internet (de momento no poner nada). Pulsar el botón Siguiente. 
33.. En el siguiente paso del asistente, seleccionar No deseo utilizar una tecnología de 
servidor, la otra opción es la que debemos seleccionar cuando se trate de páginas Web 
dinámicas creadas con tecnologías de servidor como PHP, ASP, etc.., pulsar el botón 
Siguiente. 
 
44.. En este paso podemos decidir entre Editar copias locales en mi equipo y luego 
cargarlas al servidor cuando estén listas (crear las páginas en nuestro PC y luego 
subirlas al servidor) o Editar directamente en el servidor utilizando la red local, 
seleccionar la primera opción. En el apartado ¿En qué lugar del equipo desea almacenar 
los archivos?, por defecto asigna el nombre del sitio (paso 2) a la carpeta raíz local. 
 
MANUAL DE DREAMWEAVER 
Página - 9 - 
 
 
 
Debemos especificar la carpeta del disco duro en donde almacenaremos las páginas y 
elementos de nuestro sitio, para ello pulsar en el botón . Si queremos poner el mismo 
nombre al sitio y a nuestra carpeta raíz local pulsar el botón Siguiente. 
 
55.. En el siguiente paso del asistente en el apartado ¿Cómo conecta consu servidor 
remoto? Seleccionar Ninguno en el desplegable, o bien indicar cómo nos vamos a 
conectar con el servidor remoto para enviarle todas las páginas y archivos de nuestra 
Web, lo usual suele ser vía FTP, en ese caso debemos rellenar todos los datos con la 
información que nos facilite la empresa que gestiona el servidor. Una vez introducidos 
los datos, pulsar en el botón Conexión de prueba para conectar con el servidor. Pulsar el 
botón Siguiente. 
 
66.. En el último paso del asistente se muestra la información que hemos configurado para 
nuestro sitio. Pulsar el botón Completado para finalizar. En el panel de Archivos aparece 
el nombre del sitio creado y la carpeta raíz local en la que iremos incluyendo las páginas 
y elementos de nuestro sitio (comprobar si está seleccionada la opción Vista local en la 
casilla de la derecha). 
 
 
77.. Si posteriormente deseamos realizar alguna modificación, seleccionar el menú 
Sitio>Administrador sitios y en el cuadro de diálogo Administrador de sitios pulsar el 
botón Editar o bien el botón Quitar si queremos eliminar el sitio creado. 
 
Dentro de la carpeta raíz local ir creando nuevas carpetas para organizar los contenidos del sitio 
Web, para ello seleccionar la carpeta raíz y con el botón derecho Nueva Carpeta. Para crear una 
página nueva seleccionar Nuevo archivo. 
 
 
CREAR UN SITIO LOCAL MEDIANTE LA CREACIÓN DE LA CARPETA PREVIA EN EL DISCO DURO. 
 
 
11.. Dentro de la aplicación de Dreamweaver seleccionar en el panel de Archivos la pestaña 
Archivos y posteriormente la unidad deseada (C:,D:,etc..) 
 
22.. Con el botón derecho del ratón en la unidad seleccionada elegir Nueva carpeta y poner 
un nombre a la que será la carpeta raíz local (puede coincidir con el nombre que le 
pongamos al sitio). 
 
33.. Seleccionar el menú Sitio>Nuevo sitio…, en el asistente escribir un nombre para el sitio 
(puede ser el mismo de la carpeta raíz u otro distinto) y pulsar el botón Siguiente. 
 
44.. En el siguiente paso seleccionar No deseo utilizar una tecnología de servidor y pulsar el 
botón Siguiente. 
 
55.. En este paso del asistente elegir Editar copias locales en mi equipo y luego cargarlas al 
servidor cuando estén listas (crear las páginas en nuestro PC y luego subirlas al 
servidor)y en el apartado ¿En qué lugar del equipo desea almacenar los archivos? 
Pulsar en el icono y seleccionar la carpeta que hemos creado en el paso -2-, pulsar el 
botón Siguiente. 
 
66.. En el siguiente paso del asistente en el apartado ¿Cómo conecta con su servidor 
remoto? Elegir de la lista Ninguno y pulsar el botón Siguiente. 
 
77.. Para finalizar, pulsar el botón Completado. 
 
 
MANUAL DE DREAMWEAVER 
Página - 10 - 
 
 
 
 
CÓMO SUBIR LAS PÁGINAS AL SERVIDOR 
 
 
AA.. CONFIGURAR EL SERVIDOR 
 
 
Nuestro proveedor de internet nos deberá proporcionar los datos de conexión al servidor. Los 
datos necesarios para un sistema de transferencia FTP (File Transfer Protocol) son los siguientes: 
 
Servidor FTP: podría ser parecido a ftp.nombre.com, usuario.servidor.org,etc.. 
 
Directorio del servidor: es la carpeta donde se ubicarán nuestra páginas y archivos, p. ej. \html, 
public_html, etc.. 
 
Usuario: es el nombre de usuario que nos ha asignado el servidor, p. ej. Jetxe 
 
Contraseña: es la clave para que podamos acceder a los archivos de nuestra Web en el servidor 
 
 
 
 
Una vez introducidos los datos pulsar en el botón Prueba o Conexión de prueba . 
 
 
BB.. ACCESO A NUESTRO LUGAR EN EL SERVIDOR 
 
 
Una vez configurada la conexión al servidor, es preciso conectarnos a él para llevar los archivos 
y páginas a la carpeta que nos han asignado en su disco duro. Pasos: 
 
1. En el panel Archivos pulsar en el icono Conectar al servidor remoto . 
2. En el panel se puede ver la carpeta del servidor en donde podremos alojar nuestros 
archivos y la casilla desplegable derecha deberá mostrar la opción Vista remota. 
3. Si en la casilla seleccionamos la opción Vista local, lo que veremos serán los archivos y 
páginas que tengamos alojados en el sitio local de nuestro disco duro. 
 
 
CC.. SUBIR LOS ARCHIVOS AL SERVIDOR 
 
 
Una vez tengamos nuestras páginas y archivos del sitio web creados, debemos depositarlos 
(subirlos) en el servidor. Pasos: 
 
11.. En el panel de Archivos seleccionar la opción Vista local para visualizar los archivos y 
páginas que tengamos alojados en el sitio local de nuestro disco duro.
ftp://ftp.nombre.com/�
MANUAL DE DREAMWEAVER 
Página - 11 - 
 
22.. Pulsar el icono Colocar y, tras realizarse la conexión con el servidor y solicitarnos 
conformidad para colocar todo el sitio en dicho servidor, comenzará la transferencia de 
archivos desde el sitio local al sitio remoto. 
 
33.. Una vez finalizada la transferencia, seleccionar la opción Vista remota en la casilla de la 
derecha en el panel Archivo para ver todos los archivos ya ubicados en el servidor y 
dentro de la carpeta que hayamos asignado al definir el sitio. Esta carpeta nos la ha 
asignado la empresa proveedora de Internet. Las carpetas del sitio local y del sitio 
remoto se muestran coloreadas en verde y amarillo respectivamente. 
 
 
DD.. BAJAR LOS ARCHIVOS DESDE EL SERVIDOR 
 
 
Para trasladar los archivos existentes en el servidor hasta el sitio local en nuestro disco duro, hay 
que realizar el proceso inverso al que acabamos de ver. Pasos: 
 
 
11.. En la casilla de la derecha seleccionar la opción Vista remota para visualizar los archivos 
y páginas que tengamos alojados en el servidor. 
 
22.. Hacer clic en el icono Obtener archivos y, tras solicitar conformidad, se realizará la 
conexión con el servidor y comenzará la transferencia de archivos desde el servidor al 
sitio local. 
 
 
TRABAJAR EN MODO EXPANDIDO 
 
 
 
Dreamweaver utiliza un sistema parecido al de otros programas FTP, como p. ej. Cute FTP para 
la transferencia de archivos del ordenador local al ordenador remoto. En el panel de Archivos, 
pulsar en el icono Expandir/Contraer . 
 
En la parte izquierda de la pantalla tenemos una vista del ordenador remoto o servidor, en 
tanto que en la parte derecha observamos el contenido de nuestro sitio local. 
 
Desde esta vista podemos realizar las transferencias de archivos hacia y desde el servidor 
utilizando respectivamente los iconos Cargar y Obtener , pero también arrastrando 
los archivos de un lado al otro (de izq. a der. bajamos archivos al sitio local y de der. a izq. 
subimos al servidor). 
 
El panel de Archivos en modo ampliado también permite: 
 
 Actualizar: las listas de elementos que aparecen en los directorios local y remoto (aunque 
esta operación está configurada automáticamente). 
 Archivos del sitio: muestra la estructura de archivos de los sitios local y remoto en las dos 
mitades de la pantalla. 
 Servidor de prueba: muestra la estructura de directorios del servidor de prueba y del sitio 
local. Sólo se utiliza para la creación de páginas dinámicas. 
MANUAL DE DREAMWEAVER 
Página - 12 - 
 
Mapa del sitio: muestra una representación gráfica del sitio basándose en los vínculos 
entre las páginas. Necesitamos establecer una página como principal previamente para ver el 
mapa del sitio. Permite seleccionar páginas, abrir una página para editarla, añadir nuevas 
páginas al sitio, crear vínculos entre archivos y cambiar títulos de página. 
 
 Proteger y desproteger archivos: se utilizan para proteger y desproteger archivos en 
el servidor. 
 
 
 
GESTIÓN DE ARCHIVOS EN EL SITIO LOCAL 
 
 
AÑADIR ARCHIVOS Y/O CARPETAS AL SITIO LOCAL 
 
Una vez definido el sitio local necesitamos crear las carpetas y las páginas que contiene ese sitio. 
A la página principal o de Inicio de nuestro sitio le pondremos el nombre de archivo que indique 
nuestro proveedor de Internet, normalmente recibe alguno de estos nombres; index.html, 
welcome.html, default.html o home.html. 
 
 Para añadir páginas a nuestro sitio existen varios métodos: 
 
AA.. DESDE EL PANEL DE ARCHIVOS 
 
11..En el panel Archivos, activar la Vista local y pulsar en el icono 
22.. Seleccionar Archivo>Nuevo archivo o Nueva carpeta 
33.. Aparece un nuevo archivo con el nombre por defecto untitled.html 
 
También desde el panel Archivos 
 
•• Seleccionar el sitio local (CARPETA RAÍZ)creado con el botón derecho del ratón y elegir 
la opción Nuevo archivo o Nueva carpeta del menú contextual. 
 
BB.. DESDE EL MENÚ ARCHIVO DE LA APLICACIÓN DE DREAMWEAVER 
 
11.. Seleccionar menú Archivo>Nuevo… 
22.. En la ventana Nuevo documento, elegir Página en blanco y en la columna Tipo de 
página: seleccionar HTML (o cualquier otro diseño predeterminado) y pulsar el botón 
Crear. 
33.. Aparece un nuevo archivo con el nombre por defecto untitled.html 
44.. En este caso no aparece el nuevo archivo en la ventana del sitio hasta que lo guardemos 
con el menú archivo>Guardar como y la extensión htm o html. 
 
 
ESTABLECER LA PÁGINA PRINCIPAL 
 
Para indicar cuál será la página principal del resto de páginas de nuestro sitio: 
 
11.. En el panel Archivos, seleccionar con el botón derecho el nombre del archivo que 
deseamos convertir en página de inicio o principal. 
22.. Seleccionar la opción Establecer como página principal. 
 
 
CAMBIAR EL NOMBRE DE UN ARCHIVO 
 
Hacer dos clic despacio (no doble clic) sobre el archivo deseado o seleccionarlo con el botón 
derecho del ratón y en el menú contextual Edición>Cambiar nombre 
 
MANUAL DE DREAMWEAVER 
Página - 13 - 
 
BORRAR ARCHIVOS Y/O CARPETAS 
 
En el panel Archivos, seleccionar individualmente o en grupo (tecla CONTROL y clic) los archivos 
y/o carpetas deseados. 
 
 
TRABAJAR CON LAS PÁGINAS 
 
Para editar los archivos de las páginas, en el panel Archivos hacer doble clic sobre el nombre del 
archivo deseado. Posteriormente se puede cambiar entre las páginas abiertas seleccionándolas 
desde las pestañas que muestra la barra de Documento. 
 
COMENTARIOS SOBRE LAS CARPETAS 
 
A la hora de crear carpetas debemos tener en cuenta que éstas se ubican siempre a partir del 
nivel de carpeta que tengamos seleccionado. En general, las carpetas de contenidos, Imágenes, 
animaciones, etc.. crearlas a partir del directorio raíz (sitio local). 
 
CARPETAS DE IMÁGENES 
 
Para almacenar las imágenes en el interior de una carpeta es preferible utilizar uno
•• En Mi PC o explorador de Windows, seleccionar el archivos(s) de la carpeta deseada y 
copiarlos al portapapeles(Control + C ) y, posteriormente en la carpeta deseada del sitio 
local pegarlos(Control + V) 
 de estos 
métodos: 
 
•• En el panel Archivos, localizar la carpeta que contiene las imágenes y copiarlas al 
portapapeles (Control + C). Seleccionar posteriormente nuestro sitio y pegarlas en la 
carpeta deseada(Control + V) 
•• Menú Insertar>Imagen, seleccionar de la carpeta deseada la(s) imagen(s) y pulsar 
Aceptar. Posteriormente indicar la ruta de destino donde deseamos insertar las 
imágenes. 
 
 
TíTULO DE PÁGINA Y NOMBRES DE ARCHIVO 
 
Cuando se accede a una página para su edición, en la barra de Documento de DW se muestra 
Documento sin título, esto se debe a que cada página además de tener un nombre de archivo, 
debe tener un título identificativo de la página (no tiene por qué ser el mismo que el del 
archivo). 
 
 
 
Para asignar un título a la página, hacer clic en la casilla Título: de la barra Documento y poner 
un nombre. También se puede seleccionar el menú Modificar<Propiedades de la página>Título 
codificación y poner un nombre en la casilla Título. 
 
 
GUARDAR PÁGINAS 
 
Es recomendable guardar el trabajo que realicemos en las páginas mediante el menú 
Archivo>Guardar o Guardar como… 
 
Siempre que modifiquemos un documento y no esté guardado aparece un asterisco (*) junto al 
nombre del archivo, que desaparece al guardarlo. 
 
 
MANUAL DE DREAMWEAVER 
Página - 14 - 
 
Si hemos creado varias páginas sin tener un sitio local definido: 
 
11.. Crear primero el sitio local (ver CREAR UN SITIO LOCAL) 
22.. Abrir una a una las páginas y seleccionar menú Archivo>Guardar como e ir guardando 
cada una de las páginas en la capeta del sitio local. 
33.. Tras solicitarnos autorización para actualizar los vínculos el panel Archivos reflejará los 
cambios automáticamente. 
 
 
ABRIR PÁGINAS EXTERNAS 
 
Se pueden aprovechar otras páginas que tengamos almacenadas en el disco, que pueden 
proceder de internet y las hemos almacenado en un disco o simplemente páginas de otro sitio 
que queremos utilizar en el nuevo sitio. Es imprescindible para poder abrir una página Web 
externa en DW que esté guardada previamente en disco. 
Para guardar una página de internet en disco seleccionar en el menú Archivo>Guardar y en la 
casilla Tipo de archivo: Página Web completa 
 
Pasos: 
 
11.. Abrir el sitio local 
22.. Menú Archivo>Abrir y seleccionar de la unidad correspondiente el archivo deseado. 
33.. Una vez cargada la página, podemos modificarla, eliminar información , seleccionar 
elementos para copiarlos en otra página, ver su código HTML, etc.. 
44.. Para integrar la página en nuestro sitio local, seleccionar menú Archivo>Guardar como, 
seleccionar nuestra carpeta del sitio local o bien pulsar el botón Raíz del sitio y asignar 
un nombre de archivo. 
 
 
VISTA PREVIA EN EL NAVEGADOR 
 
Para comprobar cómo se verán nuestras páginas en uno o varios navegadores verificar el 
correcto funcionamiento de las mismas, podemos hacer uso de la vista previa. 
 
11ºº.. Definir los diferentes navegadores, para ello en el menú Archivo>Vista previa en el 
navegador>Editar lista de navegadores…para ver la ventana Preferencias. 
22ºº.. Pulsar el botón + para añadir nuevos navegadores e indicar su ubicación en el disco 
duro estableciendo si queremos que actúen como navegador principal o secundario. 
33ºº.. Una vez definidos los navegadores, para ver las páginas pulsar la tecla F12 
MANUAL DE DREAMWEAVER 
Página - 15 - 
 
Unidad 2 
 
CREACIÓN DE PÁGINAS: PROPIEDADES 
 
En esta unidad vamos a ver los elementos básicos para crear páginas sencillas utilizando 
formatos y colores. 
 
 
ESTABLECER EL TAMAÑO DE LA PÁGINA 
 
INTRODUCCIÓN 
 
Los monitores tienen mucho en común con las TV. En el caso de los monitores CRT están 
formados por un tubo de rayos catódico también llamados tubo de vacío (dentro del tubo es 
casi un vacío perfecto). Los de color se obtienen mediante 3 cañones de electrones. Estos 
bombardean la placa de fósforo en la parte interior de la pantalla y liberan puntitos de luz a 
color rojo, verde y azul (RGB) llamados Píxel. 
 
La resolución se caracteriza por los píxel representados en horizontal y vertical un ejemplo es la 
resolución 800X600 osea 800 píxels en horizontal y 600 píxels en vertical. A más resolución más 
píxels representados. 
 
A la hora de crear páginas Web conviene utilizar un tamaño adecuado para que puedan verse 
correctamente en las resoluciones de monitor más corrientes. En este sentido la resolución 
óptima para la gran mayoría de monitores sería de 800 x 600 píxeles. 
 
Configurar primero el tamaño de la página antes de comenzar, para ello: 
 
1. Antes de seleccionar el tamaño debemos visualizar el área de trabajo en modo no 
expandido 
2. Seleccionar en la barra de estado de la ventana del documento la flecha desplegable 
3. Activar la opción Editar tamaños…> 800 x 600 Maximizado (opción recomendada) o 
1024 x 768 
 
 
 
PROPIEDADES DE UNA PÁGINA 
 
Para establecer las propiedades generales de una página podemos utilizar alguno de estos 
métodos: 
 
• Botón Propiedades de página… en el panel Propiedades 
• Menú Modificar>Propiedades de página 
• En la ventana del documento hacer clic con el botón derecho y seleccionar Propiedades 
de página. 
 
Veremos el cuadro de diálogo Propiedades de la página, donde se pueden aplicar en las 
distintas categorías, las fuentes y los encabezados, colores para los vínculos, los fondos, etc.. 
 
APLICAR FONDOS DE COLOR SÓLIDO A LA PÁGINA 
 
Botón Propiedades de página>Color de fondo>Seleccionarla paleta de colores 
 
APLICAR FONDOS BITMAP 
 
Las imágenes deberán estar en formato GIF, JPEG o PNG. Si la imagen es más grande que la 
resolución empleada no cabrá y si es más pequeña se repetirá como un mosaico en toda la 
ventana. 
MANUAL DE DREAMWEAVER 
Página - 16 - 
 
Para aplicar una imagen de fondo, botón Propiedades de página>Imagen de fondo>Seleccionar 
la imagen: 
• De la carpeta imagen del sitio 
• De otra carpeta, en ese caso guardarla en el directorio Imagen del sitio 
 
 
ESCRITURA DEL TEXTO 
 
Se puede teclear directamente el texto o copiar texto al portapapeles de otra aplicación con las 
opciones Copiar o Cortar y Pegar posteriormente en DW en la posición donde se encuentre el 
cursor. Aunque forma de controlar los atributos de texto es similar a la de los procesadores de 
texto se utiliza el panel Propiedades , menú Texto o la ficha Texto de la barra Insertar. 
 
INSERTAR SALTOS DE PÁRRAFO Y DE LÍNEA 
 
Para insertar un salto de párrafo pulsar la tecla Intro. Para bajar sólo una línea cada vez, 
mantener la tecla de Mayúscula pulsada y tecla Intro. 
Para añadir espacios en blanco pulsar las teclas Control + Mayúscula + Barra espaciadora 
 
INSERTAR LÍNEAS HORIZONTALES 
 
1. Ir al menú Insertar>HTML>Regla horizontal 
2. Seleccionar la línea y modificar sus atributos(ancho, alto, alineación,etc..) en el panel 
Propiedades 
 
 
 
 
La inserción de líneas horizontales provoca el desplazamiento hacia abajo del texto que se 
encuentre por debajo de la línea (equivalente a la tecla Intro) 
 
ACTIVIDAD 1 
 
• Crear un sitio con el nombre Aula_1 que contenga cuatro páginas llamadas home.html, 
derecho.html. protocolo.html y ofimática.html. Añadir al sitio una carpeta llamada 
Images para alojar tres imágenes descargadas previamente de nuestro equipo. 
• Establecer la página de home.html como documento principal y asignarle de título 
Prácticas de Secretariado. 
• Añadir al resto de páginas y establecer un título para cada una de ellas además de un 
color de fondo. Posteriormente guardar todas las páginas. 
 
 
INSERTAR IMÁGENES 
 
La unidad 4 correspondiente al tratamiento de las imágenes, trata en profundidad el tema. 
Vamos a ver aspectos generales de cómo se inserta una imagen en un documento. Para ello: 
 
1. Situar el cursor en la posición deseada. 
2. Seleccionar menú Insertar>Imagen pulsar el icono en la barra Insertar>Común 
3. En la ventana que aparece elegir la ruta y el nombre de archivo en donde se encuentra 
la imagen a colocar. Si el archivo no está ubicado en el sitio local, veremos una serie de 
ventanas que nos permitirán copiar el archivo en el lugar que deseemos de nuestro sitio 
local (normalmente en la carpeta destinada a las imágenes)
MANUAL DE DREAMWEAVER 
Página - 17 - 
 
INSERTAR VÍNCULOS 
 
 
La unidad 3 correspondiente al tratamiento de las imágenes, trata en profundidad el tema. 
Vamos a ver algunos aspectos de los vínculos. Para ello: 
 
Un vínculo es un enlace entre dos lugares de tal manera que al hacer clic en un elemento de la 
página (texto o imagen) se acceda automáticamente a otro lugar de la página, a otra página de 
nuestro sitio, a una imagen ampliada, una dirección de correo, etc.. 
 
1. Seleccionar el texto al que queremos aplicar el vínculo. 
2. En el panel Propiedades aparece una casilla llamada Vínculo en la que escribiremos la 
ruta que contiene el documento al que accederemos o bien habiendo clic en la carpeta 
. También podemos seleccionar un texto o imagen, pulsar la tecla Mayúscula y 
arrastrar hacia un archivo en el panel Archivos. Asimismo se puede seleccionar el texto o 
imagen y arrastrar el icono (que aparece a la derecha de la casilla Vínculo) hacia el 
archivo deseado en el panel Archivos. 
 
ACTIVIDAD 2 
 
• Seleccionar el sitio Aula_3 en el panel de archivos y hacer doble clic en el archivo 
home.html. Introducir el texto Secretariado de Dirección –BILBAO y poner un tamaño 
de 24, alinear al centro y ponerlo en negrita. En el panel Propiedades seleccionar un 
color de fondo cakee y para el texto color marrón. 
• Introducir el texto “Esta es una práctica de documento web de la escuela de 
Secretariado. En este ejercicio practicaremos con los formatos, imágenes y vínculos. En la 
unidad 2 estudiaremos los estilos. Para ello debajo de todas las páginas hemos insertado 
palabras que serán futuros enlaces”. 
• Seleccionar este párrafo y establecer lo siguiente: 
o Fuente (panel Propiedades); Verdana a 14 píxeles en negrita y cursiva 
o Color del texto blanco y alineado a la izquierda 
• Abrir las otras páginas y copiar en ellas el texto Secretariado de Dirección y añadir a su 
derecha el nombre de la materia. En la parte inferior de cada página escribir las 
materias de las otras páginas, posteriormente guardar todo. 
• Insertar una línea horizontal en todas las páginas debajo de cada encabezado 
• Guardar en la carpeta images, tres fotos del Gugenheim, Puppie y la vista de Bilbao 
desde Artxanda e insertarlas en las páginas correspondientes justo debajo de la línea 
horizontal. 
• Asignar a todas las imágenes : 
o un ancho y alto de 100 x 100 
o alinear la imagen a la izquierda 
o introducir en cada imagen un comentario sobre la misma de un par de líneas 
• Abrir el archivo home.html y crear enlaces para acceder a las páginas Puppie, Vista 
desde Artxanda y Guggenheim. A su vez desde cada página crear los respectivos 
enlaces. 
• En la dirección http://www.pekegifs.com/webmaster/generartexto3d.htm generar un 
botón con la palabra Principal (seguir las instrucciones del enlace) para ir siempre a la 
página de inicio (home.html) . 
• En cada una de las páginas añadir el botón creado para que enlace con la página 
principal (se puede cinsertar la imagen con el vínculo a la página deseada y copiarlo al 
resto de páginas) 
• Insertar una imagen gif animada de http://www.gifanimados.com/email/buzonesrojos/ 
en la parte inferior del archivo home.html ,que sirva de vínculo para que nos permita 
abrir la aplicación de correo electrónico y se muestre la dirección del destinatario ya 
introducida (poned vuestra dirección de correo) . 
http://www.pekegifs.com/webmaster/generartexto3d.htm�
http://www.gifanimados.com/email/buzonesrojos/�
MANUAL DE DREAMWEAVER 
Página - 18 - 
 
• Por último, añadir el siguiente texto en el archivo home.html: 
© made by jonan y comprobar si funcionan todos los vínculos utilizando para ello la opción 
de Mapa del sitio. 
 
 
 RESUMEN CONCEPTOS GENERALES: EDICIÓN, FORMATOS Y PANEL 
PROPIEDADES 
 
Para introducir texto, colocar el cursor en el lugar deseado y escribir, el texto se muestra 
con los atributos que tenga por defecto. 
 
Para insertar un salto de dos líneas, pulsar tecla INTRO 
Para insertar un salto de una línea, pulsar tecla MAYÚSCULA + INTRO 
Para separar las palabras con más de un espacio pulsar la combinación de teclas 
CONTROL+MAYÚSCULA+Barra espaciadora 
 
Todos los cambios de atributos que realicemos se aplicarán al texto que se encuentre 
seleccionado. 
 
Para cambiar el tamaño, el formato y el tipo de fuente, utilizar el panel Propiedades. 
También podemos hacer uso del menú Insertar>HTML>Caracteres especiales y del menú 
Texto. 
 
 
 
 
 
 
Para añadir nuevas fuentes, en la casilla Fuente del panel Propiedades seleccionar Editar lista 
de fuentes…: 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
• Si queremos agregar
• Para 
 fuentes a una combinación, seleccionarla en el recuadro Lista 
de fuentes, elegir posteriormente la fuente a añadir en el recuadro Fuentes 
disponibles y pulsar en el icono para incorporarla. 
eliminar
• Para 
 una fuente de una combinación seleccionar ésta en el recuadro Lista 
de fuentes, elegir la fuente a eliminar en el recuadro Fuentes elegidas y pulsar el 
icono . 
añadir una combinación de fuentes, en el recuadro Lista de fuentes, 
seleccionar la opción (Añadir fuentes de la lista siguiente), en el recuadro Fuentes 
disponibles seleccionar la fuente a agregar a la nueva combinación y pulsar 
para incorporarla.Repetir ésta última operación para ir incorporando fuentes al 
grupo. Para crear o eliminar nuevos grupos
 
 hacer clic en los botones 
Color fuente Alineación Alineación 
Listas y Sangría 
MANUAL DE DREAMWEAVER 
Página - 19 - 
 
 
Para insertar caracteres especiales, situar el cursor en la posición deseada y elegir en el menú 
Insertar>HTML>Caracteres especiales o bien hacer clic en el último icono
 
 a la derecha de la 
barra Insertar>Texto 
• Podemos crear Listas de texto numeradas (ordenadas) y listas de texto con viñetas
1. Situar el cursor donde deseemos comenzar la lista 
 
(sin ordenar). Se pueden crear a partir de texto previamente editado o sin editar. 
Para crear listas desde cero: 
2. En el panel Propiedades hacer clic en el icono Lista sin ordenar o bien 
en el icono de Lista ordenada . También se pueden utilizar los iconos 
del menú Insertar>Texto 
3. Cada vez que terminemos una línea, pulsar Intro y para finalizar la lista 
pulsar Intro dos veces seguidas. 
• Para crear listas a partir de párrafos ya escritos, basta con seleccionar la totalidad 
de los párrafos (elementos de texto independientes entre sí) y pulsar en uno de los 
iconos 
• Para crear Listas de definición
o Pulsar el icono dl y pulsar Intro. 
 (para definir un término) utilizar los iconos 
 de la barra Insertar>Texto. Si seleccionamos esta opción: 
o Pulsar el icono dt y escribir el texto a definir, el texto saltará a la segunda 
línea pero con una sangría izquierda para indicar que esa segunda línea 
describe lo que se ha dicho en la primera. Tras escribir esta segunda línea y 
volver a pulsar Intro, el cursor regresará a su sangría normal. 
• Para crear Listas anidadas
• Para establecer las 
 (combinación de listas), crear primero una lista sin 
ordenar o una lista ordenada y posteriormente aplicar a la línea o líneas deseadas 
una sangría de texto mediante el icono . El párrafo o párrafos seleccionados se 
desplazarán a la derecha y mostrarán viñetas diferentes. Utilizar el icono para 
adaptar la numeración en el caso de las listas ordenadas. 
propiedades de las listas
1. Colocar el cursor sobre la lista. Si lo hacemos sobre los puntos principales, 
las modificaciones afectarán a todos estos; si lo hacemos sobre los puntos 
secundarios, las modificaciones solo afectarán a ese grupo secundario. 
: 
2. Seleccionar menú Texto>Lista >Propiedades o bien pulsar el botón 
 del panel Propiedades. 
3. En las casillas Tipo de lista y Estilo ajustar el formato y estilo de lista 
deseado. 
4. En la casilla Iniciar recuento podemos introducir el valor que deberá tener 
una lista que no comience por el número 1 
5. Si queremos cambiar únicamente algunos elementos de la lista, situar el 
cursor sobre dicho elemento y actuar igual que antes pero sobre las 
opciones de la sección Elemento de lista. 
• Para cambiar la fuente predeterminada que aparece cuando comenzamos a escribir 
en DW: 
1. Menú Edición>Preferencias>Fuentes, en la casilla Fuente proporcional, 
seleccionar la fuente que el programa utilizará para mostrar texto 
normal. El tamaño también se puede ajustar 
• Para llevar a cabo la corrección ortográfica de un documento utilizar el menú 
Texto>Ortografía (proceder como lo haríamos en un procesador de texto).
MANUAL DE DREAMWEAVER 
Página - 20 - 
 
• Para buscar un texto en un documento y reemplazarlo por otro ir al menú 
Edición>Buscar y reemplazar 
 
SUGERENCIAS EN LA CONFECCIÓN DE LA WEB 
 
• Presentar una estructura bien organizada 
• Diseñar la web en papel y hacer un mapa de distribución de las páginas uniendo con 
líneas cada vínculo y su página correspondiente. 
• Recopilar toda la información que vayamos a colocar en la página (documentos de 
texto, imágenes, símbolos, direcciones URL de enlaces a otras webs, archivos disponibles, 
etc.) 
• Pensar el nombre que vamos a dar a cada página y archivo y apuntarlo. 
• Decidir si vamos a trabajar con tablas, plantillas, animaciones, capas, imágenes 
mapeadas, sonidos, animaciones flash 
• Navegar por distintos webs para ir recopilando ideas. 
• Despertar el interés con el tema y la apariencia. 
• Incluir el acceso a todos los temas desde la página de bienvenida, o bien, si el tema de la 
web es amplio, crear una página inicial tipo periódico por medio de una tabla y desde la 
misma página a modo de índice acceder al resto de documentos del sitio. 
 
GUÍA PARA COMPONER CON ESTILO 
 
• Utilizar 2 o 3 fuentes distintas en cada página 
• Líneas de texto cortas 
• Altura de texto de 10 a 12 píxeles 
• Alinear los textos por la izquierda 
• Dividir en varias páginas el contenido de la web (las páginas con mucha información 
tardan más en cargarse) 
• No utilizar texto intermitente y no abusar de texto en mayúsculas 
• Utilizar iconos o símbolos que puedan sustituir un texto escrito y emplearel mismo estilo 
para la creación de iconos. 
• Un icono que enlace con la página principal es de gran ayuda para las webs de muchas 
páginas. 
• Utilizar pocos iconos animados (ralentizan la carga de la página) 
• Utilizar una barra de navegación o botones idénticos para todas las páginas. 
• No utilizar imágenes grandes es preferible utilizar miniaturas o tuhnbnails que luego 
podamos ampliar 
• Utilizar colores pastel o neutros para el fondo. El fondo debe ser menos importante que 
el contenido de la página y no debe dificultar la lectura del texto. 
• La descripción de los enlaces debe ser clara (evitar el clásico “Pinche aquí”) 
• Posibilitar la comunicación con los visitantes a través de email o formularios para 
mejorar el trabajo 
• Avisar a los usuarios de la fecha de la última actualización 
• Si creamos enlaces a otras webs distintas, permitir la opción de que se carguen en una 
ventana nueva del navegador
MANUAL DE DREAMWEAVER 
Página - 21 - 
 
Unidad 3 
 
 ESTILOS CSS 
 
INTRODUCCIÓN 
 
Un estilo es un grupo de atributos de formato texto identificados por un nombre. El término en 
cascada se refiere a la secuencia ordenada de estilos. En DW cada estilo recibe inicialmente el 
nombre Estilo y un número. 
 
DreamWeaver trabaja por defecto con hojas de estilo en cascada (CSS) y determinadas 
combinaciones de atributos que aplicamos al texto las convierte en un estilo CSS que luego 
podemos utilizar para aplicárselo directamente de una sola vez a otro texto. 
 
Otros tipos de formato de texto como, p. ej., los encabezados que encontramos en el 
desplegable de la casilla Formato del panel Propiedades, no fuerzan la creación de un estilo CSS 
y lo que hacen es aplicar lo que se llama una etiqueta HTML. 
 
DreamWeaver trabaja combinando estilos CSS y estilos HTML, para especificar cómo queremos 
trabajar ir al menú Edición>Preferencias, activar la categoría General y seleccionar la casilla de 
Utilizar CSS en lugar de etiquetas HTML. El uso de estilos CSS permite entre otras cosas cambiar 
a la vez los atributos (propiedades) de texto que compartan un mismo estilo. 
 
Cada vez que se crea una combinación nueva de atributos de texto en una página, el programa 
crea un estilo nuevo que aparece en la casilla Estilos del panel Propiedades. 
 
PRÁCTICA CON ESTILOS SENCILLOS 
 
Para ver un ejemplo de estilos básicos realizar la siguiente práctica: 
1. Escribir tres párrafos y aplicarles fuentes, tamaños, negritas y colores diferentes. 
2. Comprobar los estilos creados en la casilla Estilos y aplicarlos a otros textos del documento. 
 
 
 
 
 
 
 
 
Los estilos se aplican a la totalidad de un párrafo, palabra o fragmento, no es necesario 
seleccionarlo todo. No obstante podemos aplicar estilos a palabras sueltas o fragmentos de 
párrafos 
3. En el panel de estilos (activar en menú Ventana<Estilos CSS) 
ver cómo quedan configurados los estilos 
(pulsar en el icono +) y en las propiedades realizar algún 
cambio. Si realizamos alguna modificación en un estilo 
aplicado (formato, fuente, etc.) automáticamente se 
actualizan el resto de párrafos con ese estiloMANUAL DE DREAMWEAVER 
Página - 22 - 
 
 
4. Para borrar un estilo, seleccionarlo y pulsar seguidamente en la papelera de la 
ventana estilos 
5. Pulsar el botón Código en la ventana del documento para ver cómo se muestra el 
código que define el trabajo con los estilos (<style type=”text/css”>) y por debajo del 
mismo aparecen los diferentes estilos creados. 
 
COMENTARIOS SOBRE LOS ESTILOS 
 
• Se pueden crear estilos CSS a partir de texto escrito, pero también se pueden crear 
desde cero (Propiedades de página) 
• Es posible aplicar estilos CSS a texto en formato HTML como p.ej. encabezados h1, h2, 
listas, etc.. 
• Podemos tener estilos CSS internos, que solo afectan a la página en la que se 
encuentran y también podemos crear estilos CSS externos que pueden aplicarse a 
múltiples páginas a la vez, con lo cual, una modificación de un estilo externo puede 
cambiar el aspecto de todo el texto de uno o varios sitios a la vez. 
• Aunque el programa asigna automáticamente los nombres de los estilos, se pueden 
cambiar y crear nuestros propios nombres, para ello: 
1. En la casilla Estilo del panel Propiedades seleccionar la opción Cambiar 
nombre… 
2. Seleccionar el estilo y asignar un nuevo nombre 
• Hay tres tipos de estilos CSS: 
o Estilos personalizados o de Clase, que se pueden aplicar a párrafos enteros, 
fragmentos de párrafo, palabras o letras sueltas. 
o Estilos de Etiqueta que se aplican a texto que ha sido conformado con etiquetas 
HTML (h1, h2, li, dl, etc.). 
o Estilos de selector, que redefinen el formato de una determinada combinación 
de etiquetas que cumple unas determinadas condiciones. 
 
 
ELEMENTOS DE CONTROL PARA CSS 
 
EL PANEL DE ESTILOS CSS 
 
Para activar el panel de estilos ir al menú Ventana>Estilos CSS, podremos ver los estilos asociados 
al documento actual y supervisar las reglas y propiedades CSS que afectan a un elemento de 
página actualmente seleccionado o las reglas y propiedades que afectan a todo un documento 
(botones Actual y Todo respectivamente): 
 
 
 
También nos permitirá modificar las propiedades que afectan a todo un documento.
MANUAL DE DREAMWEAVER 
Página - 23 - 
 
En la parte inferior del panel estilos vemos los botones: 
 Adjuntar una hoja de estilos externa 
Crear un nuevo estilo 
 Editar un estilo 
 Borrar un estilo 
 
Si pulsamos el botón , se abre un menú en el que encontraremos, además de los comandos 
citados, otros destinados al control de estilos CSS. 
 
 
EL MODO ACTUAL DEL PANEL CSS 
 
Si activamos el botón del panel de estilos CSS podemos supervisar las reglas y 
propiedades CSS que afectan a un elemento de página que se encuentre actualmente 
seleccionado. 
 
Para mostrar las reglas en cascada de la etiqueta seleccionada pulsar el icono , esto nos 
permitirá ver el nombre de estilo que tiene aplicado el texto seleccionado en la página. El icono 
muestra la información acerca de la propiedad que hayamos seleccionado en el recuadro 
Resumen de la selección. Veamos un ejemplo, tomando la figura de abajo: 
 
• Está resaltado el estilo .Estilo1, que indica que 
tenemos el cursor sobre un elemento de texto en la 
página que tiene este estilo aplicado. 
• A la derecha de .Estilo1 aparece la etiqueta <p> 
indicando que se trata de un párrafo (HTML). 
• En el apartado Propiedades de “.Estilo 1” , se 
muestran listadas en orden alfabético las propiedades 
que posee el estilo. Si deseamos añadir propiedades, 
hacer clic en el enlace Añadir propiedad y seleccionar la 
propiedad que deseemos. 
• Si activamos el icono , las propiedades de los 
estilos aparecen en la lista y únicamente estarán en 
color azul aquellas que estén siendo utilizadas por el 
estilo. Las propiedades aparecen clasificadas en grupos 
que podremos expandir o contraer para ver su 
contenido. 
• Para volver al modo de visualización anterior, 
pulsar en el icono . 
• Todos los cambios que realicemos en este panel 
se reflejarán de forma inmediata en los textos que 
contengan el estilo CSS editado. 
 
 
MANUAL DE DREAMWEAVER 
Página - 24 - 
 
 
EL MODO TODO DEL PANEL CSS 
 
 
El botón Todo del panel CSS muestra todas las reglas CSS definidas para el documento actual, 
independientemente de que estén en una hoja de estilos externa o en el mismo documento. 
 
En este modo podemos editar directamente las propiedades y parámetros de un estilo CSS sin 
necesidad de que el cursor tenga que estar situado en un elemento de texto que contenga un 
estilo. 
 
 
 
 
 
CREAR ESTILOS INTERNOS con Propiedades de página 
 
Sólo se utilizan en el documento actual. Si queremos que el sitio Web tenga un estilo uniforme 
en todas las páginas, debemos utilizar una hoja de estilos externa vinculada al sitio (opción 
recomendada). 
 
Un método para crear estilos CSS internos es a través de la ventana Propiedades de página (otro 
método que veremos será con la opción Nueva regla). 
 
 
Los atributos que asignemos en las categorías Aspecto, Vínculos, y Encabezados se convertirán 
directamente en estilos CSS. Se trata de estilos generales de la página. Destacamos entre otros: 
• En la categoría Aspecto podemos definir entre otros la Fuente de página(fuente de los 
párrafos), tamaño, color, color de fondo, imágenes, etc. 
• En la categoría Vínculos, el color de los vínculos y el estilo de los mismos 
• En la categoría Encabezados, establecemos los títulos de las secciones, su fuente, 
tamaño y color 
MANUAL DE DREAMWEAVER 
Página - 25 - 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
PRÁCTICA con ESTILOS INTERNOS 
 
 
1. Crear un nuevo documento de nombre practica1_cssinterno .html en nuestro sitio local 
2. Pulsar el botón 
3. Introducir lo siguiente: 
• en la categoría Aspecto: Fuente de página (se aplica a los párrafos) Verdana, 
Color, blanco y Color de fondo verde oscuro (utilizar el selector de colores), 
Tamaño, 11 píxeles. 
• En la categoría Vínculos: en Color de vínculo seleccionar marrón oscuro, en 
Vínculos visitados seleccionar marrón claro, en Vínculo de sustitución (cambia el 
color del enlace cuando situamos el cursor en el mismo) de color verde claro. En 
Estilo subrayado , seleccionar Mostrar subrayado solamente al situar cursor 
encima . 
• En la categoría Encabezados: Fuente de encabezado, Times new roman, en 
Encabezado 1, a 16 píxeles y en la casilla color introducir un color gris. 
4. Pulsar Aceptar para guardar los cambios y comprobar en el panel estilos CSS los 
atributos aplicados. Se mostrará la ventana: 
 
 
 
Se trata de estilos generales de la página y no se puede 
cambiar su nombre ya que no son estilos personalizados. En el 
panel estilos CSS vemos las diferentes propiedades de cada 
estilo y podemos modificarlos (sin necesidad de 
pulsar las Propiedades de página) o añadir nuevos, para ello ir 
a las Propiedades en la parte inferior del panel. 
 
 
MANUAL DE DREAMWEAVER 
Página - 26 - 
 
CREAR ESTILOS INTERNOS con el botón NUEVA REGLA CSS 
 
1. En el panel estilos CSS hacer clic en el icono Nueva regla CSS o bien menú 
Texto>Estilos CSS>Nuevo. 
2. En la ventana Nueva regla CSS (ver figura), en Tipo de selector seleccionar entre: 
 
 
 
• Clase: permite crear un estilo personalizado que puede aplicarse a un rango o 
bloque de texto (cualquier tipo de texto en la página). 
• Etiqueta: redefinir el formato predeterminado que posee una etiqueta HTML. 
Es el tipo de estilo adecuado para cambiar por ejemplo los atributos de los 
encabezados h1, h2, h3, etc. 
• Avanzadas: redefinir el formato predeterminado de una combinación específica 
de etiquetas. 
3. En la casilla Nombre debemos introducir una información que dependerá del tipo de 
selector elegido: 
• Con el selector clase introducir el nombre que tendrá el estilo que vamos a crear 
precedido por un punto. 
• Con el selector Etiqueta podemos seleccionar del desplegable la etiqueta para la 
que vamos a crear un nuevo estilo (p. ej. h2 o p, etc..). 
• Con el selector Avanzadas podemos aplicar estilos sólo al texto que contenga