1. ADICIÓN DE CONTENIDO A
DREAMWEAVER CS5
Por: Rodrigo Pérez

2. SITIO DE DREAMWEAVER
 Es un conjunto de archivos y activos
 Se pueden crear las paginas
 Cargarlas a un servidor
 Mantener el sitio actualizando archivos y
transfiriéndolos al servidor.
 Se pueden mantener y editar sitios que no
creados con Dreamweaver

3. CARPETA RAÍZ
Es un folder en la computadora en donde se
alojan todas las páginas y recursos del sitio
web.

4. CREANDO UNA PÁGINA WEB
 Dreamweaver proporciona opciones para
crear un documento Nuevo
 Documento en blanco
 Diseño predeterminado
 Plantilla preexistente
 Los páginas web se guardan con la extensión
HTML (Archivos de lenguaje de hipertexto)
 Los archivos HTML se guardan en un
lenguaje basado en etiquetas que muestran
la página a través del navegador.

5. OTROS TIPOS DE ARCHIVOS
Tipo Descripción Extensión Uso
CSS Hoja de estilos .CSS Aplicar formato al
en cascada contenido HTML y
controlar posición
de varios elementos
en la página
XML Lenguaje de .xml Contiene datos en
formato formato original
ampliable
XSL Lenguaje de .xls Aplican formato a
hoja de estilos los datos XML que
ampliable se muestran en una
página web.

6. OTROS TIPOS DE ARCHIVOS
Tipo Descripción Extensión Uso
CFML Lenguaje de .cfm
formato
ColdFusion
PHP Preprocesad .php
or de
hipertexto páginas
dinámicas
JS Javascript .js
ASP Paginas de .asp
servidor
activas

7. NOMBRANDO ARCHIVOS
 Un buen nombre:
 facilita el desarrollo de un sitio, especialmente al
trabajar en equipo.
 Ayuda a los visitantes a encontrar archivos del
sitio.
 Aplique los siguientes consejos para todos los
archivos que utilice en la web

8. NOMBRES DE ARCHIVO APROPIADOS
 Nombre únicos con significado
 No repita nombres
 Indique el contenido del archivo en el nombre
 Nombre de carpetas, con significado
 Use nombres que ayuden a organizar y localizar
el contenido.
 Utilice letras minúsculas siempre
 Mezclar mayúsculas con minúsculas aumente en
riesgo de links rotos.
 Algunos servidores son sensibles en este detalle

9. NOMBRES DE ARCHIVO APROPIADOS
 Sea consistente en el uso de extensiones
 Use extensiones comunes para todo su sitio.
 El usar extensiones diferentes incrementa el
riesgo de links rotos.
 No olvide incluir las extensiones en
Macintosh
 Aunque mac no requiere extensiones, las
navegadores la necesitan para desplegar páginas
correctamente.
 Utilice guión medio o bajo en lugar de
espacios
 Algunos navegadores no reconocen espacios en
blanco

10. NOMBRES DE ARCHIVO APROPIADOS
 Utilice solo letras y números
 Muchos símbolos especiales no son reconocidos
 En lo posible mantenga los nombres cortos
 Algunos navegadores limitan a 25 caracteres
para nombres de archivo.

11. TEXTO E IMÁGENES
 Son elementos básicos en todo sitio.
 La forma en como se acomodan requiere el
uso de CSS o tablas

12. APLICANDO FORMATO BÁSICO A TEXTO Y
PÁRRAFOS
 Se puede hacer de dos formas:
 Desde la categoría texto, panel insertar
 Desde el inspector de propiedades

13. OPCIONES DEL INSPECTOR DE PROPIEDADES
Opción Función o propósito
Formato Establece el estilo de párrafo del texto
seleccionado
ID Asigna una ID al texto seleccionado
Clase Muestra el estilo de clase CSS que se aplica al
texto
Negrita Aplica <b></b> o <strong> </strong> al texto
Cursiva o Aplica <i></i> <em></em> al texto
Itálica
Lista sin Crea una lista con viñetas
ordenar
Lista Crea una lista numerada
ordenada
Blockquote Inserta sangría
Quitar Anula sangría
Blockquote
Vinculo Crea un link

14. OPCIONES DEL PANEL INSERTAR
Opción Función o propósito
B Aplica formato negrita
I Aplica formato cursiva
S Aplica el formato destacado
¶ Aplica el formato párrafo al texto seleccionado
“” Aplica el formato comillas en versalita
PRE Aplica texto con formato predeterminado
H1, h2, h3 Aplica formatos de encabezados
Ul, ol, li Aplica listas ordenadas y no ordenadas
Dl, dt, dd Aplica formatos de lista de definición
Abbr. Marca abreviaturas de un texto y proporciona
su significado
W3c Marca las siglas de un texto y proporciona su
significado.

15. CARACTERES ESPECIALES
 Algunos de estos caracteres como:
 Copyright
 Ampersand
 Se representa en HTML por nombre o un
número llamado entidad

16. IMPORTANDO DOCUMENTOS DE OFFICE
 Se pueden insertar documentos de Word y Excel
en una página web
 DW recibe el HTML convertido y lo inserta en la
página.
 Las opciones del formato en que se inserta el
documento son:
 Solo texto (ningún formato)
 Estructura
 Se conservan párrafos, listas y tablas pero sin formato
 Estructura y formato básico
 Se conservan párrafos y tablas y texto formateado con b,
i, u y strong.
 Estructura y formato completo (HTML y CSS)
 Limpiar espaciado de párrafo de Word
 Limpia espacios adicionales entre párrafos al pegar el
texto.

17. MODIFICANDO EL TAMAÑO DE LAS IMAGEN
 Al modificar el tamaño, la calidad puede
reducirse
 Lo más adecuado es cambiar el tamaño
desde un editor (Fireworks)

18. PRINCIPALES PROPIEDADES DE UNA IMAGEN
 ID
 Nombre de identificación
 Alt
 descripción de la imagen para que un lector la
pueda leer.
 Vínculo
 Liga de la imagen hacia un sitio web.

19. FUNCIONES BÁSICAS DE EDICIÓN DE
IMÁGENES
 Sin tener que recurrir a un programa externo
se pueden usar las siguientes funciones:
 Volver a muestrear
 Añade o quita pixeles en imágenes a las que se les
cambio el tamaño, esto es útil para mejorar el tiempo
de descarga y reducir el tamaño del archivo.
 Recorte
 Reduce el área de las imágenes
 Brillo y contraste
 Se utiliza para corregir imágenes demasiado claras u
obscuras.
 Perfilar
 Ajusta el enfoque y aumenta el contraste en los
bordes dentro de la imagen

20. MARCADOR DE POSICIÓN DE IMÁGENES
 Es un gráfico que se usa para simular el espacio
que ocupará la imagen definitiva cuando se
incorpore a la página web.
 Son útiles por dos razones:
 En la etapa de maquetación
 Para avanzar en el desarrollo en lo que el material
gráfico está disponible.
 Las propiedades de un marcador son:
 Nombre: el que aparece como etiqueta
 Altura y anchura.
 Color: color de relleno del marcador
 Texto Alternativo: texto que describe la imagen para
un navegador de solo texto o lectores de pantalla.
 Cuando esté listo para agregar la imagen haga
doble clic sobre el marcador y seleccione la
imagen.

21. CREANDO VÍNCULOS (TIPOS)
 Interno: va hacia la página dentro el mismo
sitio y puede ser:
 Relativa al documento
 Relativa a la raíz del sitio
 Externo:
 va hacia otro sitio y se representa como ruta
absoluta
 Anclaje con nombre
 Va a una posición específica dentro de la misma
página.
 Correo electrónico
 Se abre un nuevo mensaje de correo en el
programa predeterminado.

22. INSERTANDO CONTENIDO MULTIMEDIA
 Se pueden añadir películas creadas con
 Adobe Flash (SWF)
 Contienen animaciones y contenido interactivo
 Flash Video (FLV)
 Incorpora video de diversas fuentes
 Los videos flash añaden interactividad al sitio.
 El comando Insertar FLV crea los siguientes archivos:
 Un archivo SWF de reproductor de video
 Un archivo SWF de aspecto para mostrar el video en una
página web.
 Un archivo main.asc que debe cargarse en Flash Media
Server
 Los archivos anteriores se deben cargar en el mismo
directorio que el archivo HTML al que se le esta
añadiendo el video.
 No olvide cargar estos archivos en el servidor web.

23. INSERTANDO MAPAS DE IMÁGENES
 Una mapa es una imagen que ha sido
dividida en regiones o zonas interactivas
 Cuando se hace clic sobre una zona
interactiva, sucede una acción, como: activar
un vínculo.
 Existen tres tipos de zonas interactivas
 Rectangular
 Circular
 Poligonal
 Define una zona irregular dando clic en las esquinas
del la imagen hasta cerrar la forma.

24. IMAGEN DE SUSTITUCIÓN
 Es una imagen que cambia cuando el
puntero pasa sobre ella.
 Se requieren dos imágenes para crearla
 La principal: que se carga al iniciar la página
 La secundaria: que aparece al pasar el puntero
sobre ella.
 Las dos imágenes deben ser del mismo
tamaño, sino dreamweaver ajusta el tamaño
de la segunda para ajustarla a la primera.

25. TRABAJANDO CON TABLAS
 Se usan las tablas para crear y dar formato a
los datos.
 Su objetivo principal presentar la
información en filas y columnas.
 Se pueden utilizar en la maquetación para
establecer el diseño de imágenes y texto.
 El uso de encabezados en tablas mejora la
accesibilidad del sitio, ya que ayudan a los
lectores a mantener un seguimiento de la
información en la tabla.
 Es posible importar una tabla de Excel o
archivos de base de datos.

26. FORMULARIOS
 Se pueden utilizar para interactuar, enviar u
obtener información cuando un visitante se
encuentra en nuestro sitio.
 Algunos ejemplos son:
 Formas de contacto
 Libro de visitantes
 Encuestas
 Órdenes de compra
 Cuando el visitante introduce información en
un formulario y hace clic en el botón de
envío, la información se transfiere a un
servidor, donde es procesada por una
aplicación.

27. ELEMENTOS QUE PUEDE CONTENER UN
FORMULARIO
 Campo de texto
 Acepta un valor alfanumérico y provee un espacio donde
el usuario puede introducir texto.
 Existe tres tipos:
 Una línea: para respuestas cortas
 Varias líneas: para respuestas largas
 Contraseña: aparecen asteriscos en vez de letras.
 Campo de archivo
 Permite al visitante seleccionar un archivo y subirlo al
servidor web.
 Casillas de verificación
 Permite al visitante marcar una sola opción o escoger
una o más opciones de un grupo de casillas.
 Botón de opción
 Permite al visitante escoger opciones que se excluyen
mutuamente. Es decir solo una de las opciones queda
seleccionada.

28.  Lista/Menú
 Permite al visitante seleccionar varias opciones
de un lista.
 Se utiliza para mostrar muchos elementos en
poco espacio.
 Botones
 Realizan acciones cuando se hace clic sobre
ellos.
 Menú de Salto
 Es una lista que permite que las opciones se
vinculen a otro documento o archivo.
 Actúa como navegación del sitio
 No debe mezclarse con otros elementos del
formulario.