TUTORIAL DE USO DE FIREWORKS CON DREAMWEAVER

Cómo exportar un sitio web desde Fireworks a Dreamweaver.

Bueno este tutorial es para que Ostyo y para quien pueda sevir y vea cómo yo trabajo mi web y
cómo hacer que no se desconfigure.

1. Primero hacemos el trabajo en Fireworsk de cómo será nuestra página, x ejemplo:

(www.cyberpuntonet.tk) demo

2. Luego destinamos los puntos de division para exportar nuestro trabajo con la herramienta
WEB slice tool), en este punto es importante ya que acá destinamos cómo se cargará la web y
los espacios donde irá el texto. En este caso en el espacio grande BLANCO y en el espacio
GRIS donde pondremos texto como también poner fotos con o sin nuevas tablas:

Si nos fijamos bien al lado derecho, son los bordes donde acá es importante ya que si la web
tiene bordes como este ejemplo se expanderá hacia abajo sin que se pierda la forma. Cabe
señalar que solamente estos diseños hechos en Fireworks no se pueden expander hacia los
lados, ya que se desconfigura, pero sí se puede expandir hacia abajo sin problemas sabiendo
cómo distribuir los espacios (si es que se pudiera expandir hacia los lados, ya eso sería
avanzado… cabe recordar esto es básico)

Bien ahora vamos a Exportar discho trabajo a Dreamweaver:

Acá los elementos lo exportamos como HTML, ¿por qué? Por que acá se adjuntará un HTML el
cual conendrá el sitio ya divididos en 1 página, el cual se puede copiar a otros HML ya hechos
para copiar dicha imágen.
Nos fijamos
Nombre: tusitio.htm
Tipo: Html and Imáges
Html: Export HTML File
Slices: Export Slices
y marcar Include areas without slices.
Luego de esto ledamos el destino dónde está nuestro sitio y le damos GUARDAR.
3. Ahora abrimos DREAMWEAVER, y le damos abrir nuestro trabajo:

Abrimos el HTML que es donde contiene nuesto trabajo.

He acá nuestro sitio.

4. Ahora vamos a organizar nuestro sitio para que esté centrado para que no aparezca
desordenado:

Si puedes ver que ala orilla aparece 1 linea negra el cual seleccionamos todo nuestor cuadro
donde está el sitio.

ya seleccionamos le damos que nos Alinie al CENTRO y quedara posicionado así.

Ahora vamos a las Propiedades de la Página, donde vamos a ordenar los bordes superior e
inferior.

Acá nos fijamos de dejar MARGEN SUPERIOR en CERO 0 Y Margen Inferior en CEREO 0.
Con esto ya nuestro sitio quedara ordenado, le damos aceptar y listo.
5. Ahora en nuestro sitio vamos a eliminar algunos campos de fotos:
Si nos fijamos en la foto anterior había 1 fondo blanco, acá yo eliminé dicha foto, el cual se nos
posiciona el cursos para escribir.

Ahora vamos a las herramientas donde sale el fondo de dicho espacio (tabla) y le damos color
blanco, para que concuerde con nuestro sitio, y así reemplazamos dicha foto con este fondo
blanco. Lo mismo haremos con nuestro otro campo gris que está en la parte izquierda y ahí le
damos el color gris para dicho campo, quedando 2 espacios para poner texto,
fotos, etc.

6. Ahora vamos a ver lo de las orillas continuas. Si nos fijamos al lado derecho
hay 1 campo selecionado que es el borde, que seria el siguiente en la foto:

Como vemos acá este elemento le daremos como fondo para que asi se nos
repita esta foto como FONDO:

Seleccionamos el nombre del archivo le damos COPIAR dicho nombre:

Para luego pegar dicho nombre como FONDO de ese espacio “tabla“aquí

Y listo queda como FONDO no como foto Ojo (ver foto).

Entonces nos quedará ambos lugares con dichos fondos blancos y el borde como fondo. Como
resumen:

- Exportamos nuestro trabajo de Fireworsk a Dreamweaver

- Organizamos y centramos nuestra pagina
- Destinamos los lugares de texto.
- Dejamos como fondo los bordes para que se pueda “ expander hacia abajo “

Espero que haya sido de su ayuda y Osyto…. Ojala te sirva…

Saludos.