PDF de programación - Manual de Dreamwaver MX 2004

Manual de Dreamwaver MX 2004

1. INTRODUCCIÓN A DREAMWEAVER................................................................ 2
1.1. FLUJO DE TRABAJO DE DREAMWEAVER PARA LA CREACIÓN DE SITIOS WEB .......... 2
1.2. GUÍA DE RECURSOS DE FORMACIÓN DE DREAMWEAVER ........................................ 3
2. ENTORNO DE TRABAJO ................................................................................... 4
2.1. ELEMENTOS DEL ENTORNO DE TRABAJO................................................................. 5
2.2. BARRAS DE HERRAMIENTAS ................................................................................... 5
2.3. INSPECTOR DE PROPIEDADES .................................................................................. 6
2.4. MENÚS CONTEXTUALES.......................................................................................... 7
2.5. PANELES................................................................................................................. 7

3. DEFINICIÓN DE UN SITIO LOCAL. DIFERENCIAS ENTRE SITIO
LOCAL Y SITIO REMOTO......................................................................................... 7
3.1. CONFIGURACIÓN DE UN SITIO DE DREAMWEAVER NUEVO: CARPETA LOCAL.......... 8
3.2. CARPETA REMOTA.................................................................................................. 9
3.3. DIFERENCIAS ENTRE SITIO LOCAL Y SITIO REMOTO................................................. 9
4. CREACIÓN DE UNA PÁGINA CON DREAMWEAVER ............................. 10
4.1. MODOS DE EDICIÓN EN DREAMWEAVER............................................................... 12
4.2. DEFINIR LAS CARACTERÍSTICAS DE LA PÁGINA..................................................... 12
4.3. INSERTAR TEXTO .................................................................................................. 15
4.5. INCLUYENDO IMÁGENES....................................................................................... 19
4.5.1. CREAR UNA IMAGEN DE SUSTITUCIÓN ............................................................... 21
4.6. CREANDO VÍNCULOS ............................................................................................ 22
4.6.1. ASPECTOS BÁSICOS DE UBICACIÓN Y RUTAS DE DOCUMENTOS .......................... 22
4.6.2. TIPOS DE VÍNCULOS........................................................................................... 23
4.6.3. ESTABLECER VÍNCULOS CON UNA PARTE ESPECÍFICA DEL DOCUMENTO: ANCLAS
.................................................................................................................................... 25
4.6.4. ESTABLECER VÍNCULOS CON CORREOS ELECTRÓNICOS ..................................... 26
4.6.5. BARRA DE NAVEGACIÓN.................................................................................... 27
4.6.6. MAPAS DE IMAGEN............................................................................................ 28
4.6.7. COMPROBACIÓN DE VÍNCULOS .......................................................................... 29
4.7. AYUDAS A LA MAQUETACIÓN: REGLAS Y CUADRÍCULAS, TABLAS Y PLANTILLAS. 29
4.7.1. UTILIZACIÓN DE REGLAS, CUADRÍCULAS E IMAGEN DE RASTREO PARA DISEÑAR
PÁGINAS ...................................................................................................................... 29
4.7.2. TABLAS ............................................................................................................. 30
4.7.3. CAPAS ............................................................................................................... 34
4.8. PLANTILLAS.......................................................................................................... 37
4.8.1. VISUALIZACIÓN DE LA PLANTILLA EN LA VISTA DISEÑO .................................... 37
4.8.2. CREAR UNA PLANTILLA ..................................................................................... 38
4.8.3. CREACIÓN DE REGIONES EN LA PLANTILLA........................................................ 38
4.8.4. APERTURA DE UNA PLANTILLA PARA EDITARLA ................................................ 40
4.8.5. DOCUMENTOS BASADOS EN PLANTILLAS........................................................... 40
4.9. MARCOS............................................................................................................... 41
4.9.1. UTILIZAR MARCOS: VENTAJAS Y DESVENTAJAS................................................. 41
4.9.2. CREACIÓN DE MARCOS ...................................................................................... 42
4.9.3. MODIFICAR PROPIEDADES DE LOS MARCOS ....................................................... 43
4.9.4. MARCOS CON VÍNCULOS.................................................................................... 44

Secretariado de Tecnologías de Apoyo a la Docencia.
Universidad de Granada

1

Manual de Dreamwaver MX 2004

1. Introducción a Dreamweaver

Macromedia Dreamweaver MX 2004 es un editor HTML para diseñar,
codificar y desarrollar sitios, páginas y aplicaciones Web. Dreamweaver le
proporciona útiles herramientas tanto si desea controlar manualmente el
código HTML como si prefiere trabajar en un entorno de edición visual.

Con Dreamweaver se puede controlar todo el proceso de creación de un sitio
web: creación del sitio, estructurar el árbol de links, diseñar las páginas y la
subida de nuestro trabajo a nuestro servidor web.

Por ejemplo, puede crear y editar imágenes en Macromedia Fireworks o en
otra aplicación de gráficos y su posterior importación directa a Dreamweaver, o
bien añadir objetos Macromedia Flash.

También ofrece un entorno de codificación con todas las funciones. Incluye
herramientas para la edición de código (tales como coloreado de código y
terminación automática de etiquetas) y material de referencia sobre HTML,
hojas de estilos en cascada (CSS), JavaScript, ColdFusion Markup Language
(CFML), Microsoft Active Server Pages (ASP) y JavaServer Pages (JSP).

Dreamweaver le permite crear aplicaciones Web dinámicas basadas en bases
de datos empleando tecnologías de servidor como CFML, ASP, NET, JSP y
PHP.

Dreamweaver se puede personalizar totalmente. Puede crear sus propios
objetos y comandos, modificar métodos abreviados de teclado e incluso escribir
código JavaScript para ampliar las posibilidades que ofrece Dreamweaver con
nuevos comportamientos, inspectores de propiedades e informes de sitios.

1.1. Flujo de trabajo de Dreamweaver para la creación de sitios
Web

Se debe empezar definiendo la estrategia o la finalidad de un sitio.

Luego, debe diseñar el aspecto y el funcionamiento del sitio. Una vez que el
diseño esté finalizado, es cuando se crea el sitio y codifican las páginas,
añadiendo el contenido y la interactividad. A continuación, vinculará las páginas
y comprobará si el sitio funciona y si cumple los objetivos para los que ha sido
diseñado.

Además, si lo desea, puede incluir páginas dinámicas.

Para terminar el ciclo, publicará el sitio en un servidor.





Secretariado de Tecnologías de Apoyo a la Docencia.
Universidad de Granada

2

Manual de Dreamwaver MX 2004

1) Planificación del sitio
Planificar y organizar cuidadosamente el sitio desde el primer momento puede
ayudar a ahorrar tiempo más adelante. La organización del sitio no sólo implica
la determinación de los archivos que van a incluirse, sino que también requiere
un examen de las necesidades del sitio, el perfil de la audiencia y sus objetivos.
Una vez que haya organizado la información y determinado una estructura,
podrá comenzar a crear el sitio.

2) Diseño de las páginas Web
Puede empezar creando páginas de muestra y trabajar en el diseño definitivo
de sus páginas.

Son interesantes herramientas como: las capas, hojas de estilo, las tablas para
la estructura de las páginas, los marcos para la organización o las plantillas
para reutilizar los diseños.

3) Adición de contenido a las páginas
Con Dreamweaver, es muy fácil añadir todo tipo de contenidos (texto,
imágenes, películas, sonidos y elementos multimedia).

4) Codificación manual
Hay dos métodos para crear las páginas. La edición visual, con herramientas
sencillas, o el entorno de codificación que permite trabajar directamente con
código. Puede utilizar el modo que quiera, o una combinación de ambos.

5) Páginas dinámicas
Este tipo de páginas permite ver a los visitantes información almacenada en
bases de datos, e incluso añadirles nueva información. Los pasos preliminares
a realizar son algo más complejos. Configurar el servidor Web y el servidor de
aplicaciones, y conectarse a la base de datos.

1.2. Guía de recursos de formación de Dreamweaver


• Ayuda


Se accede a la ayuda desde el menú Ayuda. Incluye los sistemas de Primeros
pasos y tutoriales, enfocados para orientar la creación de sitios Web sencillos.

Utilización de Dreamweaver proporciona información completa sobre todas
las funciones.


• Referencia


En Referencia se recogen todas las explicaciones de código, etiquetas y
atributos, extraídas de diferentes libros.

Y diferentes opciones de Extensiones.



Secretariado de Tecnologías de Apoyo a la Docencia.
Universidad de Granada

3

Manual de Dreamwaver MX 2004

• Recursos del sitio Web de Macromedia


El sitio Web de Macromedia ofrece apartados como el Centro de soporte,
para las actualizaciones, ejemplos y últimas noticias para sacar el máximo
partido al programa.

El Centro de desarrolladores proporciona herramientas y tutoriales. A través
de los Foros se pueden intercambiar ideas o compartir consejos útiles.


2. Entorno de trabajo


El espacio de trabajo de Dreamweaver permite ver las propiedades de los
documentos y los objetos.

Además, c