Como insertar una imagen en una chuleta
Adobe Dreamweaver
Es una aplicación en forma de suite (basada en la forma de estudio de Adobe Flash) que está destinada a la construcción, diseño y edición de sitios, videos y aplicaciones Web basados en estándares. Creado inicialmente por Macromedia (actualmente producido por Adobe Systems) es el programa más utilizado en el sector del diseño y la programación web, por sus funcionalidades, su integración con otras herramientas como Adobe Flash y, recientemente, por su soporte de los estándares del World Wide Web Consortium. Su principal competidor es Microsoft Expression Web y tiene soporte tanto para edición de imágenes como para animación a través de su integración con otras. Hasta la versión MX, fue duramente criticado por su escaso soporte de los estándares de la web, ya que el código que generaba era con frecuencia sólo válido para Internet Explorer y no validaba como HTML estándar. Esto se ha ido corrigiendo en las versiones recientes.
La gran ventaja de este editor sobre otros es su gran poder de ampliación y personalización del mismo, puesto que en este programa, sus rutinas (como la de insertar un hipervínculo, una imagen o añadir un comportamiento) están hechas en Javascript-C, lo que le ofrece una gran flexibilidad en estas materias. Esto hace que los archivos del programa no sean instrucciones de C++ sino rutinas de Javascript que hace que sea un programa muy fluido, que todo ello hace, que programadores y editores web hagan extensiones para su programa y lo ponga a su gusto.
Entorno Dreamweaver
Pantalla Inicial
Al arrancar Dreamweaver aparece una pantalla inicial como ésta, vamos a ver sus componentes fundamentales. Así conoceremos los nombres de los diferentes elementos y será más fácil entender el resto del curso. La pantalla que se muestra a continuación (y en general todas las de este curso) puede no coincidir exactamente con la que ves en tu ordenador, ya que cada usuario puede decidir qué elementos quiere que se vean en cada momento, como veremos más adelante.
Barra De Titulo
La barra de título contiene el nombre del programa (Macromedia Dreamweaver MX 2004) y seguidamente el nombre del documento que aparecerá en el explorador y entre paréntesis, su ubicación y el nombre del archivo en formato html. En el extremo de la derecha están los botones para minimizar, maximizar/restaurar y cerrar.
Barra de Menús
La barra de menús contiene las operaciones de Dreamweaver, agrupadas en menús desplegables. Al hacer clic en Insertar, por ejemplo, veremos las operaciones relacionadas con los diferentes elementos que se pueden insertar en Dreamweaver.
Muchas de las operaciones se pueden hacer a partir de estos menús, pero para algunas es preferible o indispensable hacerlas desde los paneles.
Barra De Menús Estándar
La barra de herramientas estándar contiene iconos para ejecutar de forma inmediata algunas de las operaciones más habituales, como Abrir 
, Guardar 
, etc.
Barra De Herramientas De Documento
La barra de herramientas de documento contiene iconos para ejecutar de forma inmediata algunas otras operaciones habituales que no incluye la barra de herramientas estándar. Estas operaciones son las de cambio de vista del documento, vista previa, etc.
Paneles o Inspectores
Dreamweaver utiliza ventanas flotantes similares a las barras de herramientas, que se conocen como paneles o inspectores.
La diferencia entre panel e inspector es que, en general, la apariencia y opciones de un inspector cambian dependiendo del objeto seleccionado.
A través de la opción Ventana, de la barra de menús, es posible mostrar u ocultar cada uno de los paneles o inspectores. Vamos a ver los más importantes.
Inspector De Propiedades
El inspector de Propiedades muestra y permite modificar las propiedades del elemento seleccionado que son usadas de forma más frecuente. Por ejemplo, cuando el elemento seleccionado sea texto mostrará el tipo de fuente, la alineación, si está en negrita o cursiva, etc.
Pulsando sobre el botón 
se despliega para mostrar más opciones. Este botón se encuentra en la esquina inferior-derecha.
Seguramente será la herramienta de Dreamweaver que más vayas a utilizar.
Barra De Herramientas Insertar o Panel De Objetos
La barra de herramientas Insertar o panel de objetos permite insertar elementos en un documento sin la necesidad de recurrir al menú insertar. Los elementos están clasificados según su categoría: tablas, texto, objetos de formulario, etc.
Es posible configurar este panel para que en los botones se muestren los iconos de los objetos (como ocurre en la imagen anterior), para que se muestren los nombres de los objetos, o para que se muestren ambos a la vez.
Sitio web
Un sitio web es una colección de páginas web relacionadas y comunes a un dominio de Internet o subdominio en la World Wide Web en Internet.
Una página web es un documento HTML/XHTML que es accesible generalmente mediante el protocoloHTTP de Internet.
Todos los sitios web públicamente accesibles constituyen una gigantesca World Wide Web de información (un gigantesco entramado de recursos de alcance mundial).
A las páginas de un sitio web se accede frecuentemente a través de un URL raíz común llamado portada, que normalmente reside en el mismo servidor físico. Los URL organizan las páginas en una jerarquía, aunque los hiperenlaces entre ellas controlan más particularmente cómo el lector percibe la estructura general y cómo el tráfico web fluye entre las diferentes partes de los sitios.
Algunos sitios web requieren una subscripción para acceder a algunos o todos sus contenidos. Ejemplos de sitios con subscripción incluyen muchos portales de pornografía en Internet, algunos sitios de noticias, sitios de juegos, foros, servicios de correo electrónico basados en web, sitios que proporcionan datos de bolsa de valores e información económica en tiempo real, etc.
Diferencias entre sitio local y Remoto
SITIO LOCAL
El sitio local es un conjunto de páginas que solo pueden ser vistas en tu ordenador, no están montadas sobre un servidor por el cual puedan ser accedidas. Esta carpeta contendrá todos los documentos HTML creados y, además, otras carpetas en las que almacenarán las imágenes, los vídeos etc .
SITIO REMOTO
El sitio remoto, en cambio, es un conjunto de páginas que pueden ser vistas a través de Internet.
Modos De Edición
El programa puede mostrarnos el documento de tres formas diferentes: en la vista de Diseño, en la vista de Código y en una vista dividida que muestra tanto el diseño como el código. Los iconos para cambiar la visualización se encuentran en la barra de menú. Para el curso seleccionaremos la vista de
Diseño.
Modos de visualización
Dreamweaver nos permite trabajar de dos formas distintas en esta vista de diseño: en la vista de Disposición y en la vista Estándar (opciones incluidas en el Menú Objetos). En la vista de Disposición, puede diseñar el formato de una página, insertar gráficos, texto y elementos multimedia; en la vista Estándar, además de las funciones de la anterior opción, también puede insertar capas, crear documentos con marcos, crear tablas y aplicar otros cambios a la página.
Conf. De las Características De La Pajina
Para cambiar el aspecto base de nuestra página debemos abrir el menú Modificar/Propiedades de la página (Modify/Page Properties). Aparecerá un
menú donde insertaremos:
Título: Este texto aparecerá en la barra de título del explorador de nuestros visitantes cuando vean la página.
Imagen de Fondo: La ruta hacia la imagen que deseamos poner como mosaico de fondo. Esta imagen debe estar dentro del directorio
del sitio que hemos creado.
Fondo: Color del fondo de la página.
Texto: Color del texto por defecto.
Vínculos: Color en que se representarán los links de texto.
Vínc. Visitados: El color que tomarán los links una vez visitados.
Vínc. Activos: Color de los vínculos activos.
Márgenes
Codificación del Documento: Código de caracteres utilizado en la página.
Imagen de Rastreo: Imagen PNG, GIF o JPG que nos sirve de guía para realizar el diseño de la página. Esta no se verá en el explorador, simplemente nos sirve de referencia para la maquetación.
Transparencia de Imagen: Cambia la opacidad de la imagen de rastreo.
Tablas De Texto
Insertar texto dentro de nuestra página es tan fácil como escribir dentro de la ventana del archivo. El texto dentro de cualquier documento ha de tener
una apariencia dependiendo de la jerarquía de contenidos (título, subtítulos, texto corrido…) y para esto utilizaremos el Inspector de Propiedades. Si no se encuentra abierto accederemos desde el menú Ventana/Propiedades (Window/Properties). En esta ventana es donde veremos, y modificaremos las
propiedades de los objetos que insertemos en nuestra página.
Primero debemos seleccionar el texto al que queremos darle formato y luego seleccionar las propiedades para el mismo en el Inspector de
Propiedades.
Formato (Format): Aplica un estilo predefinido al texto.
Combinación de Fuentes (Font Combination) : Aplica una combinación de fuentes al texto. Las fuentes están agrupadas por familias. Si el
usuario no posee instalada la primera fuente del listado, el navegador buscará la segunda de la lista y luego la tercera. Si ninguna de ellas está
presente, mostrará el texto con el tipo de fuente estándar con el que del navegador.
Tamaño (Size): Aplica un tamaño de fuente específico en una escala
que va de 1 a 7 o un tamaño de fuente relativo al tamaño por defecto del navegador.
Negrita e Itálica (Bold/ltalic): Aplican al texto estos estilos.
Izquierda, Centro y Derecha (Left, Center, Right): Aplican alineación al texto.
Color de texto (Text Color): Define el color para el texto seleccionado.
Imágenes
Para insertar una imagen en la página seleccionaremos el lugar donde queremos ponerla y después:
Pulsar el icono imagen en el menú Objetos/Común o Acceder por el menú a Insertar/Imagen (Insert/Image)
Se abrirá el explorador de archivos y cogeremos la imagen que queremos incluir.
An*: Ancho de la imagen (en principio incluye el valor real del ancho de la imagen).
Al*: Altura de la imagen
Origen: ruta de directorios que el explorador ha de seguir para llegar a la imagen, es decir, nos muestra donde está la imagen.
Vínculo: Para hacer un vínculo desde la imagen.
Alinear: Determina el modo en que se alineará con el resto de los objetos del mismo párrafo (texto, imagen, tablas…). Se puede alinear a la izquierda, a la derecha o al centro en relación con otros elementos, o usando la alineación predeterminada del navegador.
Vínculos y tipos de Vinculo
Podemos crear un enlace desde una imagen o un texto. Simplemente debemos seleccionar el elemento que queremos activar como link e insertar en
el campo vínculo (link) del Inspector de Propiedades al sitio donde queremos que nos lleve.
Hay tres tipos de enlaces básicos:
Enlace dentro de la misma página: Podemos hacer que el visitante se desplace a otro lugar de la página pulsando un link. Para hacer esto
tenemos que nombrar con un punto de fijación (anchor) el lugar al que queremos ir, y enlazarlo en el campo vínculo como #nombre_de_fijación.
Enlace dentro del mismo sitio web: Seleccionaremos el archivo, de nuestro sitio al que queremos enlazar, pulsando el icono carpeta y
escogiendo el archivo.
Enlace a otro lugar de Internet: Escribiremos la dirección web completa del sitio al que queremos enlazar. Ej. http://www.Ugr.Es
Estos enlaces se pueden visualizar cambiando la opción Dest.
(target) en el Inspector de propiedades en:
_blank: Una ventana nueva conservando abierta la actual.
_parent: Abre el documento en el conjunto de marcos padre.
_self: Abre el link dentro del mismo marco.
_top: Abre en el conjunto de marcos de nivel más alto del documento
actual.
O el nombre que le hayamos asignado al marco dentro de nuestra estructura de marcos, para que se abra en un marco en concreto. Ej.
TopFrame.
Un link puede llamar a un archivo web, imágenes, sonido, etc. El navegador abrirá los archivos que comprende, y nos dará la opción de bajarlos si no
reconoce la extensión.
Hay otro tipo de link, el que nos permite mandar un mensaje a una cuenta de correo determinada: mailto. Para insertar un link de este tipo utilizaremos el
menú Objetos/común y, teniendo seleccionado el texto o la imagen para este, haremos clic sobre el icono malito