DESIGNAID

Herramientas claves para representar tus ideas

Dreamweaver: donde están mis imágenes?

pildora_dw.gifHola a todos. hoy voy a tocar un tema que creo que es super reconocido por cualquiera que haya usado alguna vez dreamweaver. (o por igual cualquier software para el montaje de páginas web) y es cuando sucede esto:

donde_estan_imagenes_1.gif
te ha pasado? antes de que sonrias y te lleguen malos recuerdos de cuando estabas a las 4 de la mañana preguntandote que hiciste para merecer este castigo del cielo, sigue leyendo. porque este es uno de los problemas más comunes cuando empezamos a trabajar con esta herramienta y también es uno de los mas fáciles de solucionar. tranquilo que el equipo gana.

Ok para hacer la historia corta si te ha pasado esto no es difícil de solucionar. eso sin mencionar que solo tienes que recordar que fue lo que hiciste. por que lo digo? porque si esto te paso alguna vez es porque haz perdido el vinculo que insertaba esa imagen. a ver, para comprender esto mejor empecemos primero desde lo básico.

El html es un lenguaje de programación descriptivo. mejor dicho el solo se limita a decirle a internet explorer (o tu navegador favorito) como debe dibujar la página y donde están ubicados los archivos (las animaciones, las imágenes, etc) para buscarlos y son entonces mostrados en tu monitor. cuando ves estas “X” rojas como lo muestra la imagen 1 (internet explorer) es porque internet explorer no puede encontrar la imagen. más

especificamente si esto te pasa es porque:

1- Borraste o cambiaste de carpeta el archivo de imagen.
2- Cambiaste de carpeta el archivo html.
3- Le cambiaste el nombre al archivo de imagen.
4- No definiste tu sitio web.

cualquiera de estas 4 opciones ocasionan que cuando veas tu página web, puedas admirar unas impactantes, atractivas  y hermosas “X” donde deberian estar tus imagenes. Estas X justamente nos están advirtiendo que ese vinculo está roto. Pero como estoy seguro que no eres admirador de las X (y mucho menos rojas) vamos a solucionar esto de raíz. vamos a trabajar con la opcion 4: definir nuestro sitio en dreamweaver para que esto no nos pase nunca más.

Definir el sitio en dreamweaver tiene una finalidad: decirle en cuál carpeta nos tiene que hacer los vinculos y darle ubicación a los archivos de imagenes y animaciones. Es tan sencillo como hacer una carpeta nueva en windows y decirle a dreamweaver que nos guarde en esa carpeta todo nuestro sitio web. de allí viene “definir el sitio”.hacerlo es super simple. el detalle es que debes hacerlo ANTES de empezar a montar tu sitio web. mucho antes de insertar tus imagenes y animaciones. para la practica usé dreamweaver MX en ingles, pero el proceso es igual en español y en las demás versiones.empecemos.

PASO 1: Abre dreamweaver en un archivo nuevo y Vete al menu de dreamweaver en SITE > NEW SITE (SITIO > SITIO NUEVO) y allí te aparecerá una ventana grande donde tenemos 2 opciones, hacerlo usando el proceso basico (BASIC) o el avanzado (ADVANCED) los dos son válidos la única diferencia es que en el básico dreamweaver nos hace las preguntas a manera de ayudante para definir el sitio. yo lo hare con el avanzado. vete entonces al avanzado. alli encontrarás a la izq. varios datos, entre ellos el primero y mas importante es “LOCAL INFO” o “DATOS LOCALES” alli es donde esta la información mas importante para definir nuestro sitio.

 donde_estan_imagenes_2.gif

PASO 2: fíjate que a la derecha puedes ver los 2 campos de información necesarios para definir nuestro sitio. “SITE NAME” o “NOMBRE DEL SITIO” y “LOCAL ROOT FOLDER” o “CARPETA RAIZ LOCAL”. en el campo de nombre del sitio coloca un nombre simple que identificará la definición de tu sitio. este es un nombre para que tu recuerdes cual sitio estas trabajando, ya que puedes definir varios sitios en tu dreamweaver. En el campo de carpeta raiz local haz click en el botón carpetica amarilla que aparece a la derecha y selecciona una carpeta donde estarán todos tus archivos de imagenes. si no tienes esa carpeta o no la haz creado, puedes crear una nueva carpeta haciendo click en el botón que muestra una carpeta con una estrella que tienes arriba a la derecha. estoy usando windows 2000 y se ve asi pero la tuya seria similar.

donde_estan_imagenes_3.gif
PASO 3: Listo! ahora sólo presiona los botones de aceptar y tu sitio estará definido. Ahora dreamweaver sabe donde estarán todos tus archivos que componen tu página web. de esa forma a partir de este momento cuando insertes una imagen o una animación de flash en tu página, dreamweaver creará el vinculo perfecto y habrá menos probabilidades de que tu imagen no se vea, o sigas apreciando las queridas X rojas.

Por supuesto, despues de definir tu sitio todavía estan presentes las primeras 3 opciones que te comenté al principio. el vinculo todavía se podria romper si borras el archivo de imagen o le cambias el nombre al archivo de imagen o animación. por eso, si quieres ahora mover tu sitio web completo sólo tienes que mover o copiar tu carpeta raiz local donde definiste tu sitio. porque allí adentro están o deberían estar todos los archivos que componen tu web.

Es simple la mecánica. Sólo le dices a dreamweaver en cual carpeta estarán todos tus documentos. te recomiendo hacer esto cuando empieces a montar tu sitio y cuando cambies de computadora, ya que cada dreamweaver debería saber donde esta ubicada tu carpeta raiz local para que los vinculos no se rompan.

y recuerda, este tutorial no es para tí si eres amante de las X rojas. pero si no lo eres te viene como anillo al dedo. yo por lo menos no lo soy.😉

saludos a todos.

Luis S.

12 comentarios»

  Noris Rivera wrote @

Hola prof. muy buen tutorial, me hubiese servido mucho cuando vi su materia🙂

  omero wrote @

Hey… profesor. esta muy bueno este sitio. gracias por que mas de una vez me salieron esas famosas y no muy queridas x.gracias

  Luis Suarez wrote @

Gracias Omero. es para que ustedes le saquen el mayor provecho.

saludos.

Luis S.

  Sharon wrote @

Gracias por la informacion, aunque aun estoy intentando subir mis archivos por medio del Macromedia Dreamweaver 8 al servidor http://www.000webhost.com/

  Oreste Garnier wrote @

Gracias profesor !! Excelente información .. estuve a punto de ir a URBE para meterme en una de sus clases porque no me acordaba como definir el sitio xD

Saludos… que este bien

  Luis S. wrote @

Epale Oreste.
jajaja que bueno que te haya ayudado.

saludos!🙂

Luis S.

  Fernando wrote @

Lo felicito, son muy buenos sus tutoriales, muchas gracias por la información (Y)

  Luis Suarez wrote @

Gracias fernando. Me alegra que te gusten y te hayan servido de mucho. Gracias por visitarme.

Saludos!
Luis s.

  fiorella wrote @

Hey !!! gracias profe Luis me acabas de sacar de una encruzijada, podre irme a dormir en paz despues de haber solucionado este problem : )

  Luis Suarez wrote @

Que bueno que te haya servido Fiorella. me alegra mucho.

Saludos!🙂

  javier wrote @

cuando llevo mis archivos(mi sitio web),
a otra pc tampoco salen las imagenes…a pesar que todas las imagenes estan en mi sitio web
Quiero saber si hay una solucion o tengo que volver a hacerlo desce cero?.

  Luis Suarez wrote @

Hola Javier.
No es necesario que empieces de cero si ya tienes tu sitio montado. El error es muy simple de arreglar y lo puedes hacer con el editor HTML que estes usando (dreamweaver, etc.) o incluso con notepad o cualquier editor de texto. El problema que tienes es la ruta o la ubicacion de los archivos de imagenes en tu HTML. Abre tu archivo HTML y verifica que la ruta (o la ubicacion de tus imagenes en el HTML) que hayas usado sea relativa y no absoluta; es decir que no sea por ejemplo: c:/mi_sitio/imagenes ya que estara buscando en una ubicacion absoluta. deberia ser por ejemplo: /mi_sitio/imagenes ó ../imagenes/ las rutas absolutas no son muy recomendables para las imagenes internas, es preferible crear vinculos relativos.simplemente realiza estos cambios en tu HTML con tu editor de texto favorito y listo. los cambios seran inmediatos.

Espero te ayude.

Saludos y gracias por visitarme.


Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: